1- HTML Tutorial From W3Schools
HTML Tutorial from W3Schools
<!--[if !supportLists]-->1. <!--[endif]-->HTML Tutorail 1- HTML Basic
<!--[if !supportLists]-->2. <!--[endif]-->HTML Tutorail 2- HTML Advanced
<!--[if !supportLists]-->3. <!--[endif]-->HTML Examples
<!--[if !supportLists]-->4. <!--[endif]-->Quiz
<!--[if !supportLists]-->5. <!--[endif]-->References
PART 1
HTML Tutorail 1- HTML Basic
“Always view the page source to study how the page was built!”
1. Introduction to HTML
2. HTML Elements
1) Use Lowercase Tags
2) Tag Attributes
3) Always Quote Attribute Values
3. Basic HTML Tags
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment
4. HTML Text Formatting (尽量使用现成的Tag，而不需要重新定义)
1) Text Formatting Tags
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<<state w:st="on"><place w:st="on">del</place></state>> Defines deleted text
<s> Deprecated. Use <<state w:st="on"><place w:st="on">del</place></state>> instead
<strike> Deprecated. Use <<state w:st="on"><place w:st="on">del</place></state>> instead
<u> Deprecated. Use styles instead
2) "Computer Output" Tags
Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<tt> Defines teletype text
<var> Defines a variable
<pre> Defines preformatted text
<listing> Deprecated. Use <pre> instead
<plaintext> Deprecated. Use <pre> instead
<xmp> Deprecated. Use <pre> instead
3) Citations, Quotations, and Definition Tags
Tag Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term
5. HTML Character Entities
A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;).
To display a less than sign in an HTML document we must write: < or <
Full list of HTML character entities: http://www.w3schools.com/tags/ref_entities.asp
6. HTML Links <a>
<!--[if !supportLists]-->1) <!--[endif]-->The Anchor Tag and the Href Attribute;
<!--[if !supportLists]-->2) <!--[endif]-->Target Attribute
<!--[if !supportLists]-->3) <!--[endif]-->Name Attribute
<!--[if !supportLists]-->4) <!--[endif]-->Useful Tips:
Always add a trailing slash to subfolder references. If you link like this: href="http://www.w3schools.com/html", you will generate two HTTP requests to the server, because the server will add a slash to the address and create a new request like this: href=http://www.w3schools.com/html/
5) Break out of a frame use target=”_top”
7. HTML Frames
http://www.w3schools.com/html/html_frames.asp
8. HTML Tables
Table Tags
Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table
9. HTML Lists
List Tags
Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines a definition term
<dd> Defines a definition description
10. HTML Forms and Input
Form Tags
Tag Description
<form> Defines a form for user input
<input> Defines an input field
<textarea> Defines a text-area (a multi-line text input control)
<label> Defines a label to a control
<fieldset> Defines a fieldset
<legend> Defines a caption for a fieldset
<select> Defines a selectable list (a drop-down box)
<optgroup> Defines an option group
<option> Defines an option in the drop-down box
<button> Defines a push button
11. HTML Images
Image Tags
Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
12. HTML Backgrounds
The bgcolor, background, and the text attributes in the <body> tag are deprecated in the latest versions of HTML (HTML 4 and XHTML). The World Wide Web Consortium (W<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C">3C</chmetcnv>) has removed these attributes from its recommendations.
Style sheets (CSS) should be used instead (to define the layout and display properties of HTML elements).
13.
HTML Colors;
HTML Color Values;
HTML Color Names;
14. HTML 4.01 Quick List
HTML Basic Document
<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>
Heading Elements
<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>
Text Elements
<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>
Logical Styles
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
Physical Styles
<b>This text is bold</b>
<i>This text is italic</i>
Links, Anchors, and Image Elements
<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
<a href="mailto:[email protected]">Send e-mail</a>
A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>
Unordered list
<ul>
<li>First item</li>
<li>Next item</li>
</ul>
Ordered list
<ol>
<li>First item</li>
<li>Next item</li>
</ol>
Definition list
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
Tables
<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
Frames
<frameset cols="25%,75%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
Forms
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname" value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60" cols="20"></textarea>
</form>
Entities
< is the same as <
> is the same as >
© is the same as ©
Other Elements
<!-- This is a comment -->
<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>
Source : http://www.w3schools.com/html/html_quick.asp
PART 2
HTML Tutorail 2 – HTML Advanced
<!--[if !supportLists]-->1. <!--[endif]-->HTML Layout
HTML Layout - Using Tables
<!--[if !supportLists]-->2. <!--[endif]-->HTML Fonts:
The <font> Tag Should NOT be Used.
The <street w:st="on"><address w:st="on">Right Way</address></street> to Do It - With Styles (with CSS)
3. Why use HTML 4.0?
In HTML 4.0 all formatting can be removed from the HTML document and stored in a separate style sheet.
Do not use presentation attributes inside your HTML tags if you can avoid it. Start using styles!
<!--[if !supportLists]-->4. <!--[endif]-->HTML Style
When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:
1) External Style Sheet
2) Internal Style Sheet
3) Inline Styles
5. HTML Head
1) The Head Element:
The head element contains general information, also called meta-information, about a document.
You can say that meta-data means information about data, or meta-information means information about information.
2) only a few tags are legal inside the head section. These are: <base>, <link>, <meta>, <title>, <style>, and <script>.
3) Head Tags
Tag Description
<head> Defines information about the document
<title> Defines the document title
<base> Defines a base URL for all the links on a page
<link> Defines a resource reference
<meta> Defines meta information
Tag Description
<!DOCTYPE> Defines the document type. This tag goes before the <html> start tag.
4) One target for all links
This example demonstrates how to use the base tag to let all the links on a page open in a new window.
“<head>
<base target="_blank">
</head>”
6. HTML Meta
description
keywords (since too many webmasters have used meta tags for spamming, like repeating keywords to give pages a higher ranking, some search engines have stopped using them entirely)
…
Redirect a user
This example demonstrates how to redirect a user if your site address has changed.
Some user agents support the use of <place w:st="on">META</place> to refresh the current page after a specified number of seconds, with the option of replacing it by a different URI. Authors should not use this technique to forward users to different pages, as this makes the page inaccessible to some users. Instead, automatic page forwarding should be done using server-side redirects
<!--[if !supportLists]-->6. <!--[endif]-->HTML Scripts
Add scripts to HTML pages to make them more dynamic and interactive.
<!--[if !supportLists]-->1) <!--[endif]-->Insert a Script into HTML Page (using JavaScript)
<!--[if !supportLists]-->2) <!--[endif]-->Handle Older Browsers
A browser that does not recognize the <script> tag at all, will display the <script> tag's content as text on the page. To prevent the browser from doing this, you should hide the script in comment tags.
JavaScript:
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
<!--[if !supportLists]-->3) <!--[endif]--><noscript> Tag
<!--[if !supportLists]-->7. <!--[endif]-->HTML 4.0 Standard Attributes
http://www.w3schools.com/html/html_standardattributes.asp
<!--[if !supportLists]-->8. <!--[endif]-->HTML 4.0 Event Attributes
http://www.w3schools.com/html/html_eventattributes.asp
Learn more about programming with these events, you should study our JavaScript tutorial and our DHTML tutorial.
10. HTML URL-encoding Reference
ASCII characters in URL-encoding form (hexadecimal format)
http://www.w3schools.com/html/html_urlencode.asp
You Have Learned HTML, Now What? HTML Summary:
The key to HTML is the tags, which indicates what content is coming up.
Now You Know HTML, What's Next?
The next step is to learn XHTML and CSS.
PART 3
HTML Example
http://www.w3schools.com/html/html_examples.asp
PART 4
HTML Quiz & Diploma
http://www.w3schools.com/html/html_quiz.asp
DROP since need money. J
PART 5
HTML 4.01 / XHTML 1.0 Reference
（用于快速查阅，很有用！）
<!--[if !supportLists]-->1. <!--[endif]-->TAG字母排序：http://www.w3schools.com/tags/default.asp
<!--[if !supportLists]-->2. <!--[endif]-->TAG功能排序：
http://www.w3schools.com/tags/ref_byfunc.asp
<!--[if !supportLists]-->3. <!--[endif]-->其他：
HTML Standard Attributes： http://www.w3schools.com/tags/ref_standardattributes.asp
HTML Event Attributes(for Script programming):
http://www.w3schools.com/tags/ref_eventattributes.asp
HTML Color: http://www.w3schools.com/tags/ref_colornames.asp
HTML ASCII Reference: http://www.w3schools.com/tags/ref_ascii.asp
HTML 4.01 Entities Reference: http://www.w3schools.com/tags/ref_entities.asp
HTML URL-encoding Reference: http://www.w3schools.com/tags/ref_urlencode.asp
HTTP Status Messages: http://www.w3schools.com/tags/ref_httpmessages.asp