Download presentation
Presentation is loading. Please wait.
Published bySelena Eke Modified over 10 years ago
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 å 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!
Similar presentations
© 2025 SlidePlayer.com Inc.
All rights reserved.