3. HTML HTML is a standard Maintained by a  nonprofit,  international organization  participated by many IT companies W3.org

4. HTML Simple Just markups and plaintext Readable by human Use plain text Editable by Notepad Verbose Readable and friendly to human Leave the chore to computer Good!!!

5. HTML Versions Now comes HTML 4.0 and XHTML Strict syntax as XML Lowercase tags About content, not format, which is designated to css HTML 5.0 Canvas …

6. The file extension.html.htm

7. Editable by Notepad dreamWeaver Visual Studio … Browsable by Ie Opera Chrone …

8. You will learn Syntax Editor Tags/Atributes

10. HTML 文档基本结构

11. HTML Tag Basics Hello World Start tagEnd tag Self-closing tag Attribute A self closing tag does not need a corresponding end tag. Tags “mark up” the HTML document. The tags are read and interpreted by the browser - but not shown.

12. ML--Element The start tag and end tag must be paired; note the slash There are elements /texts between the start tag and end tag

13. ML--Element We have rules regarding the element name and what content it holds You must use specified element name and cannot create your own element The element name is lowercase, generally

14. ML--Element For element with no content, the start tag and end tag are collapsed into one like. hr means horizontal row, a horizontal line.

15. Attributes Separated by at least one whitespace Value must be quoted by double quotes A property can have no value Same Property name doesn’t occur twice Attribute identifier contains no special chars such as =,”, etc. Untitled Page 姓名 : 婚否

16. HTML 标记 lower case Tag/ Attribute 一般小写

17. ML--Content In the starting note and ending note is the content, including other tags and/or plain texts Untitled Page 姓名 : 婚否

18. ML--Content Redundant space and carriage enter are ignored Note the space before, in and after “ 姓 名 :” Note the newline in “ 婚否 ” is displayed as whitespace If you want to insert some whitespace, or other special chars, such >, you have to…see next slide Untitled Page 姓 名 : 婚 否

19. Special Chars

20. Escape Special chars Untitled Page 姓名 : 婚否 ? 请朗读以下字符： ÅåAӒååå &<>" Å vs å Entity name,case sensitive A Ӓå Entity number,decimal &#xe5 Entity number, hexadecimal, case insensitive

21. How to display a world map with only one character û

23. Good habit to code ML-Indent Start and end at the same indent position Content needs a unit of indent. Use tab … … Help you debug

24. ML Coding—outline first Write the outlying pair (tags, quotes, braces, etc) first, then insert its content. E.g ”” “…” </subTag Make the code syntactically right always Help debug Lest that the latter part be forgotten

25. tools Notepad Visual Studio DreamWeaver Word, excel, … …

26. debug FireBug Browser Press F12 in new versions of IE

27. Validating HTML To validate a web page, you can use the online validator Paste, or upload the HTML or use a URL http://validator.w3.org Source: W3C http://validator.w3.org/checkhttp://

29. Comment If you want to delete some contents temporally, you can comment it out. Hi, HTML -->

31. HTML 常用标记 in head HTML, CSS, XML" />

32. meta name=“___”

33. Refresh by http-equiv

34. Meta name=… Author The value must be a free-form string giving the name of one of the page's authors.

35. base have either an href attribute, a target attribute, or both, specifyinghreftarget the document base URL for the purposes of resolving relative URLs,document base URLresolving relative URLs the name of the default browsing context for the purposes of following hyperlinks. Thebrowsing contextfollowing hyperlinks There must be no more than one base element per document.base

36. archives would be a link to http://www.example.com/news/archives.html.http://www.example.com/news/archives.html

37. Link

38. … 

40. Header Levels First Major Heading First Subheading Second Subheading A Sub-subheading Another Major Heading Another Subheading Headers were very ugly in default rendering - most folks started with.

41. paragraph

42. bdi

43. The bdi element represents a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting. [BIDI]bdirepresents[BIDI] For the purposes of applying the bidirectional algorithm to the contents of a bdi element, user agents must treat the element as a paragraph-level container.bdi For the purposes of applying the bidirectional algorithm to the paragraph-level container that a bdi element finds itself within, the bdi element must be treated like a U+FFFC OBJECT REPLACEMENT CHARACTER (in the same manner that an image or other inline object is handled).bdi

44. Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model:Phrasing content. Content attributes: Global attributes Also, the dir global attribute has special semantics on this element DOM interface:Uses HTMLElement.

45. User jcranmer : 12 posts. User hober : 5 posts. User إيان : 3 posts.

46. bdo

47. The bdo element represents explicit text directionality formatting control for its children. It allows authors to override the Unicode bidirectional algorithm by explicitly specifying a direction override. [BIDI]bdorepresents [BIDI]

48. bdo vs bdi

49. bdi unicode bdo Explicitly by dir

50. ... 汉 hàn 字 zì...

51. rp... 漢 ( かん ) 字 ( じ )... 漢 ( かん ) 字 ( じ )

52. ins del To Do Empty the dishwasher Watch Walter Lewin's lectures Download more tracks Buy a printer

53.  This is a paragraph that was inserted.  This is another paragraph whose first sentence was inserted at the same time as the paragraph above. This is a second sentence, which was there all along.

54. Anchor and link

55. anchor for long documents, you can even have links to other locations in that same document …  where ident is a variable for identifying this location

56. Hyperlinks …  if the page is accessed over the Web, must start with http://  if not there, the browser will assume it is the name of a local file …  causes the page to be loaded in a new  Window * Find more info on attribute TARGET

57. Hyperlinks (cont.) for long documents, you can even have links to other locations in that same document …  will then jump to that location within the file …  can jump into the middle of another file just as easily

58. Hyperlinks (cont.) [ HTML | HTTP | IP | TCP ] Computer acronyms: HTML HyperText Markup Language HTTP HyperText Transfer Protocol… IP Internet Protocol… TCP Transfer Control Protocol… Internal links are handled slightly differently in HTML 5. Use the same format to specify the hyperlinks, but use an ‘id’ to define the location of the anchor. This can be applied to (nearly) any HTML element.

59. Hyperlinks vs anchor …

60. URL

61. 1999 Asian Women's Network Training Workshop61 The current HTML document is my.html and the current directory is Iam C:\-  Iam -my.html -your.html  Type this ; Your link C:\-  Iam -my.html  Child -your.html  Type this ; Your link C:\-  Iam -my.html  Sister -your.html  Type this ; Your link C:\-  Mother -your.html  Iam -my.html  Type this ; Your link How to specify Relative pathnames

62. Div and span

63. and Tags The default meaning of is to leave the content as it is  Another tag that is useful for style specifications: Used to create document sections (or divisions) for which style can be specified e.g., a section of five paragraphs for which you want some particular style

64. 64 Lists An ordered list: The first item. The second item. An unordered list with gaps between items: The first item. The second item. The third item.

65. 65 More lists Fancier list: The first item. Sub item one. Sub item two. The second item.

67. 表格

68. 68 Tables Col 1 Col 2 Col 3 The second row More here Yet more Row after a gap Here’s a bunch of stuff covering two columns.

69. 69 In the browser

70. Images 

71. Map and area 将一个图片划分为不同区域，每个可以指向不同的链 接

72. Figure and figureCaption Bubbles at work

73. canvas

74. Video Audio Object params

77. Basic Form Elements <input type=“submit” value=“button label Radio buttons

78. More Form Elements

79. Select Boxes.... Each option in the select box is specified by the... tag

80. A Basic Form Basic Form Basic Form /cgi-bin/bios546/hello.cgi What is your name? Please select your favorite color: Red Blue

81. Processing Forms Once a form is submitted, it is sent to a specific program on the server. http://biolinx.bios.niu.edu/cgi-bin/bios546/hello.cgi

82. iframe 用于在网页中嵌入另一个 网页 ……

84. Global Id Title Lang and xml:lang Translate Xml:base(xml only) Dir Class Style

85. lang specifies the primary language for the element's contents and for any of the element's attributes that contain text. Its value must be a valid BCP 47 language tag, en zh … or the empty string.  the primary language is unknown.

86. translate The attribute's keywords are the empty string, yes, and no. type start. The game will start

87. dir The dir attribute specifies the element's text directionality.dir ltr rtl auto

89. data-* Embedding custom non-visible data with the attributes Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

90. data-* naming no namespace has at least one character after the hyphen contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).  All attributes on HTML elements in HTML documents get ASCII-lowercased automatically, so the restriction on ASCII uppercase letters doesn't affect such documents.

91. e.g a site about music could annotate list items representing tracks in an album with custom data attributes containing the length of each track. T his information could then be used by the site itself to allow the user to sort the list by track length, or to filter the list for tracks of certain lengths. Beyond The Sea...

92. element. Dataset Returns a DOMStringMap object for the element's data-* attributes. Hyphenated names become camel-cased. For example, data-foo-bar="" becomes element.dataset.fooBar

93.  Fire

94. For further reading and learning W3schools.com W3school.com.cn W3.org Wikipedia.org Nilnul.com

95. Thanks!