Embed Size (px)
DESCRIPTION
HTML 101. HTML. HTML is a standard Maintained by a nonprofit, international organization participated by many IT companies W3.org. HTML. Simple Just markups and plaintext Readable by human Use plain text Editable by Notepad Verbose Readable and friendly to human - PowerPoint PPT Presentation
Citation preview
HTMLHTML is a standard
Maintained by a nonprofit, international organization participated by many IT companies
W3.org
HTMLSimple
Just markups and plaintextReadable by human
Use plain textEditable by Notepad
VerboseReadable and friendly to humanLeave the chore to computerGood!!!
HTML VersionsNow comes HTML 4.0 and XHTML
Strict syntax as XMLLowercase tagsAbout content, not format, which is designated
to cssHTML 5.0
Canvas…
The file extension.html.htm
Editable byNotepaddreamWeaverVisual Studio…
Browsable byIeOperaChrone…
HTML 文档基本结构
<html><head>
<!—Here goes the info about the document--></head><body>
<!—Here goes the content--></body>
</html>
HTML Tag Basics
<h1>Hello World</h1>
<img src=”x.gif” />
Start tag End 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.
ML--ElementThe start tag and
end tag must be paired; note the slash
There are elements /texts between the start tag and end tag
ML--Element
We have rules regarding the element name and what content it holdsYou must use
specified element name and cannot create your own element
The element name is lowercase, generally
ML--Element
For element with no content, the start tag and end tag are collapsed into one like <hr/>.hr means
horizontal row, a horizontal line.
Attributes
Separated by at least one whitespaceValue must be quoted by double quotesA property can have no valueSame Property name doesn’t occur twiceAttribute identifier contains no special chars such
as =,”, etc.
<html><head> <title>Untitled Page</title></head>
<body>姓名 :<input type="text" />婚否<input type="checkbox" checked/>
</body></html>
HTML 标记 lower case
Tag/ Attribute一般小写
ML--Content
In the starting note and ending note is the content, including other tags and/or plain texts
<html><head> <title>Untitled Page</title></head><body>
姓名 :<input type="text" />婚否<input type="checkbox" checked/>
</body></html>
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
<html><head> <title>Untitled Page</title></head><body>
姓 名 : <input type="text" />婚 否<input type="checkbox" checked/>
</body></html>
Special Chars
Escape Special chars
<html><head>
<title>Untitled Page</title></head><body>
姓名 :<input type="text" />婚否 ?<input type="checkbox" checked/><br />
请 朗 读 以 下 字 符 ：ÅåAӒååå&<>"
</body></html>
•Å vs å •Entity name ,case sensitive
•A Ӓå•Entity number ,decimal
•å•Entity number, hexadecimal, case insensitive
How to display a world map with only one character
<html><body><p style="font-family:Webdings;font-size:600px;">û</p></body>
</html>
Good habit to code ML-IndentStart and end at the same indent positionContent needs a unit of indent.Use tab
<tag><subTag1>…</subtag1><subTag2>
…</subTag2>
</tg>
Help you debug
ML Coding—outline first
Write the outlying pair (tags, quotes, braces, etc) first, then insert its content. E.g
<tag></tag>
<tag>””</tag>
<tag> “…” <subTag> </subTag</tag>
Make the code syntactically right alwaysHelp debug
Lest that the latter part be forgotten
toolsNotepadVisual StudioDreamWeaverWord, excel, ……
debugFireBugBrowser
Press F12 in new versions of IE
Validating HTML
To validate a web page, you can use the online validator
Paste, or upload the HTML or use a URLhttp://validator.w3.org
Source: W3C http://validator.w3.org/check
Comment
<!--comment inserts here-->If you want to delete some contents
temporally, you can comment it out.
<html><head>
<!--<title>Hi, HTML</title>--></head>
</html>
<title><meta>
<meta name="keywords" content="HTML, CSS, XML" />
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
HTML 常用标记 in head<title>HTML, CSS, XML" />
meta name=“___”<meta>
<meta name="keywords" content="HTML, CSS, XML" />
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
Refresh by http-equiv<meta http-equiv="Refresh" content="300">
<meta http-equiv="Refresh" content="20; URL=page4.html">
Meta name=…Author
The value must be a free-form string giving the name of one of the page's authors.
basehave either an href attribute, a target
attribute, or both, specifying the document base URL for the purposes of
resolving relative URLs, the name of the default browsing context for
the purposes of following hyperlinks. The
There must be no more than one base element per document.
<head> <base
href="http://www.example.com/news/index.html">
</head> <body>
<a href="archives.html">archives</a> would be a link to http://www.example.com/news/archives.html.
</body>
Link <link rel="stylesheet" href="B"
type="text/css"> <link rel="stylesheet" href="C">
<h1> … <h6> <div> <span><p> <hr><br> <img> <object><iframe> <a> <!– 注释内容 --> <table><form>
<article><section>
Header Levels
<h1>First Major Heading</h1> <h2>First Subheading</h2> <h2>Second Subheading</h2> <h3>A Sub-subheading</h3><h1>Another Major Heading</h1> <h2>Another Subheading</h2>
Headers were very ugly in default rendering - most folks started with <h3>.
<p>paragraph</p>
bdi
bdiThe bdi element represents a span of text that is
to be isolated from its surroundings for the purposes of bidirectional text formatting. [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.
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).
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 attributesAlso, the dir global attribute has special semantics
on this elementDOM interface:Uses HTMLElement.
<ul> <li>User <bdi>jcranmer</bdi>: 12 posts.
<li>User <bdi>hober</bdi>: 5 posts. <li>User <bdi>إيان</bdi>: 3 posts.
</ul>
bdo
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]
bdo vs bdi
bdiunicode
bdoExplicitly by dir
...<ruby>汉 <rt>hàn</rt>字 <rt>zì </rt></ruby>...
rp... 漢 ( か ん ) 字
( じ ) ...<ruby>漢<rp> (</rp><rt> かん </rt><rp>) </rp>字 <rp> (</rp><rt> じ </rt><rp>) </rp></ruby>
ins del<h1>To Do</h1> <ul>
<li>Empty the dishwasher</li> <li><del datetime="2009-10-11T01:25-
07:00">Watch Walter Lewin's lectures</del></li>
<li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
<li>Buy a printer</li> </ul>
<section> <ins>
<p> This is a paragraph that was inserted. </p> This is another paragraph whose first sentence was
inserted at the same time as the paragraph above. </ins> This is a second sentence, which was there all
along. </section>
Anchor and link
anchorfor long documents, you can even have links to other locations in that same document
<a name="ident">…</a>where ident is a variable for identifying this location
Hyperlinks<a href="URL">…</a>
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
<a href="URL" target="_blank">…</a>causes the page to be loaded in a new Window
* Find more info on attribute TARGET
Hyperlinks (cont.)for long documents, you can even have links to other locations in that same document
<a href="#ident">…</a>will then jump to that location within the file
<a href="URL#ident">…</a>can jump into the middle of another file just as easily
Hyperlinks (cont.) <p> [ <a href="#HTML">HTML</a> | <a href="#HTTP">HTTP</a> | <a href="#IP">IP</a> | <a href="#TCP">TCP</a> ] </p> <p> Computer acronyms: <dl> <dt id="HTML">HTML</dt> <dd>HyperText Markup Language <dt id="HTTP">HTTP</dt> <dd>HyperText Transfer Protocol…</dd> <dt id="IP">IP</dt> <dd>Internet Protocol…</dd> <dt id="TCP">TCP</dt> <dd>Transfer Control Protocol…</dd> </dl> </p>
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.
Hyperlinks vs anchor
<a name="ident">…</a>
<a href="#ident">…</a>
URL
1999 Asian Women's Network Training Workshop 60
The current HTML document is my.html and the current directory is Iam
C:\- Iam -my.html
-your.html
Type this ; <A href=your.html>Your link </A>
C:\- Iam -my.html
Child -your.html
Type this ; <A href=Child/your.html>Your link </A>
C:\- Iam -my.html
Sister -your.html
Type this ; <A href=../Sister/your.html>Your link </A>
C:\- Mother -your.html
Iam -my.html
Type this ; <A href=../your.html>Your link </A>
How to specify Relative pathnames
Div and span
<div> and <span> TagsThe default meaning of <span> is to leave the
content as it is
Another tag that is useful for style specifications: <div>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
63
Lists<p>An ordered list:<ol> <li>The first item. <li>The second item.</ol>
<p>An unordered list with gaps between items:<ul> <li>The first item.</li><p> <li>The second item.</li><p> <li>The third item.</li></ul>
64
More lists<p>Fancier list:<ol> <li>The first item. <ol type=“a”> <li>Sub item one. <li>Sub item two. </ol> <li>The second item.</ol>
表格
67
Tables<table noborder cellpadding=3 cellspacing=3><tr><td><b>Col 1</b> <td><b>Col 2</b> <td><b>Col 3</b><tr><td>The second row <td>More here <td>Yet more<tr height=20><td> <!-- That’s a space --><tr><td>Row after a gap <td colspan=2>Here’s a bunch of stuff covering two columns.
</table>
68
In the browser
Images<img src="URL (or filename)“ alt="text" title= "text" />
Map and area将一个图片划分为不同区域，每个可以指向不同的链
接
Figure and figureCaption<figure>
<img src="bubbles-work.jpeg" alt="Bubbles, sitting in his office chair, works on his latest project intently.">
<figcaption>Bubbles at work</figcaption> </figure>
canvas
VideoAudioObject
params
<iframe src=“qq.com”/>
Basic Form Elements <input type=“submit” value=“button label
Radio buttons <input type=“radio” name="parameter“
value="par_value">
More Form Elements<input type=“checkbox” name="parameter">
<input type=“text” name="parameter“ size=“25”>
Select Boxes<select name=”parameter”> ... </select>.
Each option in the select box is specified by the <option> ... </option> tag
A Basic Form<html><head><title>Basic Form</title></head>
<body><h1> Basic Form</h1><p><form action=“/cgi-bin/bios546/hello.cgi” method=“post”>What is your name?<input type=“text” name=“your_name”><br>Please select your favorite color:<select name=“color”><option>Red</option><option>Blue</option></select><br /><input type=“submit” value=“Click Me!></form></body></html>
Processing Forms Once a form is submitted, it is sent to a specific program on
the server.
<form action=“http://biolinx.bios.niu.edu/cgi-bin/bios546/hello.cgi” method=“post”>
iframe用于在网页中嵌入另一个
网页……<iframe
src=“qq.com”></iframe>
GlobalIdTitleLang and xml:langTranslateXml:base(xml only)DirClassStyle
langspecifies 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, enzh… or the empty string.
the primary language is unknown.
translateThe attribute's keywords are
the empty string, yes, and no.
<p>type <kbd translate=no>start</kbd>.
The game will start</p>
dirThe dir attribute specifies the element's text
directionality. ltrrtlauto
data-*Embedding custom non-visible data with
the attributesCustom data attributes are intended to store
custom data private to the page or application, for which there are no more appropriate attributes or elements.
data-*naming
no namespace has at least one character after the hyphencontains 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.
e.ga site about music could annotate list items
representing tracks in an album with custom data attributes containing the length of each track. This 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.
<ol> <li data-length="2m11s">Beyond The Sea</li> ... </ol>
element . DatasetReturns a DOMStringMap object for the
element's data-* attributes.Hyphenated names become camel-cased. For
example, data-foo-bar="" becomes element.dataset.fooBar
<div class="spaceship" data-ship-id="92432" data-weapons="laser 2" data-shields="50%" data-x="30" data-y="10" data-z="90"> <button class="fire"
onclick="spaceships[this.parentNode.dataset.shipId].fire()"> Fire
</button> </div>
For further reading and learningW3schools.comW3school.com.cnW3.orgWikipedia.orgNilnul.com
Thanks!
