-HTML stands for HyperText Markup Language, it is the main markup language for displaying web pages and other information that can be displayed in a web browser.
-It is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>.
-The purpose of it is to read HTML documents and compose them into visible or audible web page.
-The first publicly available description of HTML was a document called "HTML Tags", first mentioned on the Internet by Berners-Lee in late 1991.
-HTML markup consists of several key components, including elements (and their attributes), character-based data types, character references and entity references. Another important component is the document type declaration, which triggers standard mode rendering.
-The following is an example of the classic Hello World Programme: <!DOCTYPE html>
<head>
<title>Hello HTML</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
-The World Wide Web is composed primarily of HTML documents transmitted from web servers to web browsers using the Hypertext Transfer Protocol (HTTP). However, HTTP is used to serve images, sound, and other content, in addition to HTML. To allow the Web browser to know how to handle each document it receives, other information is transmitted along with the document.
-An HTML Application (HTA; file extension ".hta") is a Microsoft Windows application that uses HTML and Dynamic HTML in a browser to provide the application's graphical interface.
-HTML 4 defined three different versions of the language: Strict, Transitional (once called Loose) and Frameset. The Strict version is intended for new documents and is considered best practice, while the Transitional and Frameset versions were developed to make it easier to transition documents that conformed to older HTML specification or didn't conform to any specification to a version of HTML 4. The Transitional and Frameset versions allow for presentational markup, which is omitted in the Strict version. Instead, cascading style sheets are encouraged to improve the presentation of HTML documents. Because XHTML 1 only defines an XML syntax for the language defined by HTML 4, the same differences apply to XHTML 1 as well.
-The Transitional version allows the following parts of the vocabulary, which are not included in the Strict version:
- A looser content model
- Inline elements and plain text are allowed directly in:
body,blockquote,form,noscriptandnoframes
- Inline elements and plain text are allowed directly in:
- Presentation related elements
- underline (
u)(Deprecated. can confuse a visitor with a hyperlink.) - strike-through (
s) center(Deprecated. use CSS instead.)font(Deprecated. use CSS instead.)basefont(Deprecated. use CSS instead.)
- underline (
- Presentation related attributes
background(Deprecated. use CSS instead.) andbgcolor(Deprecated. use CSS instead.) attributes forbody(required element according to the W3C.) element.align(Deprecated. use CSS instead.) attribute ondiv,form, paragraph (p) and heading (h1...h6) elementsalign(Deprecated. use CSS instead.),noshade(Deprecated. use CSS instead.),size(Deprecated. use CSS instead.) andwidth(Deprecated. use CSS instead.) attributes onhrelementalign(Deprecated. use CSS instead.),border,vspaceandhspaceattributes onimgandobject(caution: theobjectelement is only supported in Internet Explorer (from the major browsers)) elementsalign(Deprecated. use CSS instead.) attribute onlegendandcaptionelementsalign(Deprecated. use CSS instead.) andbgcolor(Deprecated. use CSS instead.) ontableelementnowrap(Obsolete),bgcolor(Deprecated. use CSS instead.),width,heightontdandthelementsbgcolor(Deprecated. use CSS instead.) attribute ontrelementclear(Obsolete) attribute onbrelementcompactattribute ondl,dirandmenuelementstype(Deprecated. use CSS instead.),compact(Deprecated. use CSS instead.) andstart(Deprecated. use CSS instead.) attributes onolandulelementstypeandvalueattributes onlielementwidthattribute onpreelement
- Additional elements in Transitional specification
menu(Deprecated. use CSS instead.) list (no substitute, though unordered list is recommended)dir(Deprecated. use CSS instead.) list (no substitute, though unordered list is recommended)isindex(Deprecated.) (element requires server-side support and is typically added to documents server-side,formandinputelements can be used as a substitute)applet(Deprecated. use theobjectelement instead.)
- The
language(Obsolete) attribute on script element (redundant with thetypeattribute). - Frame related entities
iframenoframestarget(Deprecated in themap,linkandformelements.) attribute ona, client-side image-map (map),link,formandbaseelements
Here is a txt form of html which was made by me. You may paste it into a txt document and save it as html to see it. Although it is silly, but it really works!
----------START----------
<html>
<body>
<h1>No Xi</h1>
<br />
<p>This is a display page for functions for html.</p>
<p>Some of the functions are showed below:</p>
<br />
<a href="www.hwachong.edu.sg"> This is not a link</a>
<br />
<br />
<img src="NoXi.jpg" width="104" height="142" /><p>This is not a picture.</p>
<br />
<ul>
<li>This</li>
<li>is</li>
<li>not</li>
<li>a</li>
<li>list</li>
</ul>
<br />
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#container{width:580px}
div#header {background-color:#00CCCC;}
div#menu {background-color:#ffff00; height:300px; width:80px; float:left;}
div#content {background-color:#DDDDDD; height:300px; width:500px;
float:left;}
div#footer {background-color:#00bbbb; clear:both; text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0; font-size:14px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>This is the title</h1>
</div>
<div id="menu">
<h2>This is the menu</h2>
<ul>
<li>No Xi 1</li>
<li>No Xi 2</li>
<li>No Xi 4</li>
<li>No Xi 5</li>
<li>No Xi 6</li>
<li>No Xi 7</li>
<li>No Xi 8</li>
<li>No Xi 9</li>
<li>No Xi 0</li>
</ul>
</div>
<div id="content">This is the content</div>
<div id="footer">You may also put something here.</div>
</div>
</body>
</html>
<br />
<form>
<input type="radio" name="a" value="Alive" /> Alive
<br />
<input type="radio" name="a" value="Dead" /> Dead
<br />
<input type="radio" name="a" value="Others" /> Others
<form name="input" action="" method="get">
<br />
<br />
Username:
<input type="text" name="Username" />
<br />
Password:
<input type="text" name="Password" />
<input type="submit" value="Submit" />
<form name="input" action="" method="get">
</form>
</body>
</html>
<body>
<h1>No Xi</h1>
<br />
<p>This is a display page for functions for html.</p>
<p>Some of the functions are showed below:</p>
<br />
<a href="www.hwachong.edu.sg"> This is not a link</a>
<br />
<br />
<img src="NoXi.jpg" width="104" height="142" /><p>This is not a picture.</p>
<br />
<ul>
<li>This</li>
<li>is</li>
<li>not</li>
<li>a</li>
<li>list</li>
</ul>
<br />
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#container{width:580px}
div#header {background-color:#00CCCC;}
div#menu {background-color:#ffff00; height:300px; width:80px; float:left;}
div#content {background-color:#DDDDDD; height:300px; width:500px;
float:left;}
div#footer {background-color:#00bbbb; clear:both; text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0; font-size:14px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>This is the title</h1>
</div>
<div id="menu">
<h2>This is the menu</h2>
<ul>
<li>No Xi 1</li>
<li>No Xi 2</li>
<li>No Xi 4</li>
<li>No Xi 5</li>
<li>No Xi 6</li>
<li>No Xi 7</li>
<li>No Xi 8</li>
<li>No Xi 9</li>
<li>No Xi 0</li>
</ul>
</div>
<div id="content">This is the content</div>
<div id="footer">You may also put something here.</div>
</div>
</body>
</html>
<br />
<form>
<input type="radio" name="a" value="Alive" /> Alive
<br />
<input type="radio" name="a" value="Dead" /> Dead
<br />
<input type="radio" name="a" value="Others" /> Others
<form name="input" action="" method="get">
<br />
<br />
Username:
<input type="text" name="Username" />
<br />
Password:
<input type="text" name="Password" />
<input type="submit" value="Submit" />
<form name="input" action="" method="get">
</form>
</body>
</html>
----------END----------
And just for fun, this is the html for THIS page:
----------START---------
<strong><span style="color: #073763;">There are some of the learning points about HTML:</span></strong><br />
<strong><span style="color: #073763;"></span></strong><br />
<strong><span style="color: blue; font-family: Times, "Times New Roman", serif;">-HTML stands for HyperText Markup Language, it is the main markup language for displaying web pages and other information that can be displayed in a web browser.</span></strong><br />
<strong><span style="color: #073763;"></span></strong><br />
<span style="color: blue;"><strong>-It is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>.</strong></span><br />
<span style="color: blue;"><strong><br />-The purpose of it is to read HTML documents and compose them into visible or audible web page.<br /><br />-The first publicly available description of HTML was a document called "HTML Tags", first mentioned on the Internet by Berners-Lee in late 1991.<br /><br />-HTML markup consists of several key components, including elements (and their attributes), character-based data types, character references and entity references. Another important component is the document type declaration, which triggers standard mode rendering.<br /><br />-The following is an example of the classic Hello World Programme:</strong></span> <span style="color: cyan;"><!DOCTYPE html></span> <br />
<span class="sc2"><span style="font-family: "Courier New", Courier, monospace;"><span style="color: #009900;"> <</span><span class="kw2">head</span><span style="color: #009900;">></span></span></span><br />
<span class="sc2"></span><span style="font-family: "Courier New", Courier, monospace;"> <span class="sc2"><span style="color: #009900;"><</span><span class="kw2">title</span><span style="color: #009900;">></span></span>Hello HTML<span class="sc2"><span style="color: #009900;"><</span><span class="sy0"><span style="color: #66cc66;">/</span></span><span class="kw2">title</span><span style="color: #009900;">></span></span> </span><br />
<span style="font-family: "Courier New", Courier, monospace;"><span class="sc2"><span style="color: #009900;"> <</span><span class="sy0"><span style="color: #66cc66;">/</span></span><span class="kw2">head</span><span style="color: #009900;">></span></span> </span><br />
<span style="font-family: "Courier New", Courier, monospace;"><span class="sc2"><span style="color: #009900;"> <</span><span class="kw2">body</span><span style="color: #009900;">></span></span> </span><br />
<span style="font-family: "Courier New", Courier, monospace;"><span class="sc2"><span style="color: #009900;"> <</span><span class="kw2">p</span><span style="color: #009900;">></span></span>Hello World!<span class="sc2"><span style="color: #009900;"><</span><span class="sy0"><span style="color: #66cc66;">/</span></span><span class="kw2">p</span><span style="color: #009900;">></span></span></span><br />
<span class="sc2"></span><span style="font-family: "Courier New", Courier, monospace;"> <span class="sc2"><span style="color: #009900;"><</span><span class="sy0"><span style="color: #66cc66;">/</span></span><span class="kw2">body</span><span style="color: #009900;">></span></span><span class="sc2"><span style="color: #009900;"></span></span></span><br />
<span class="sc2"><span style="font-family: "Courier New", Courier, monospace;"><span style="color: #009900;"> <</span><span class="sy0"><span style="color: #66cc66;">/</span></span><span class="kw2">html</span><span style="color: #009900;">></span></span></span><br />
<br />
<span class="sc2"><span style="color: #009900; font-family: Courier New;"><strong><span style="color: blue; font-family: Times, "Times New Roman", serif;">-The </span></strong><strong><span style="color: blue; font-family: Times, "Times New Roman", serif;">World Wide Web</span></strong><span style="color: blue; font-family: Times, "Times New Roman", serif;"><strong> is composed primarily of HTML documents transmitted from web servers to web browsers using the </strong></span><strong><span style="color: blue; font-family: Times, "Times New Roman", serif;">Hypertext Transfer Protocol</span></strong><span style="color: black;"><strong><span style="color: blue; font-family: Times, "Times New Roman", serif;"> (HTTP). However, HTTP is used to serve images, sound, and other content, in addition to HTML. To allow the Web browser to know how to handle each document it receives, other information is transmitted along with the document.</span></strong></span></span></span><br />
<br />
<span style="font-family: Times;"><span style="color: blue;"><strong>-An HTML Application (HTA; file extension ".hta") is a </strong></span><span style="color: blue;"><strong>Microsoft Windows</strong></span><span style="color: blue;"><strong> application that uses HTML and Dynamic HTML in a browser to provide the application's graphical interface.</strong></span></span><br />
<strong><span style="color: blue; font-family: Times;"></span></strong><br />
<span style="color: blue; font-family: Times, "Times New Roman", serif;"><strong>-HTML 4 defined three different versions of the language: Strict, Transitional (once called Loose) and Frameset. The Strict version is intended for new documents and is considered best practice, while the Transitional and Frameset versions were developed to make it easier to transition documents that conformed to older HTML specification or didn't conform to any specification to a version of HTML 4. The Transitional and Frameset versions allow for </strong></span><span style="color: blue; font-family: Times, "Times New Roman", serif;"><strong>presentational markup</strong></span><span style="color: blue; font-family: Times, "Times New Roman", serif;"><strong>, which is omitted in the Strict version. Instead, </strong></span><span style="color: blue; font-family: Times, "Times New Roman", serif;"><strong>cascading style sheets</strong></span><span style="color: blue; font-family: Times, "Times New Roman", serif;"><strong> are encouraged to improve the presentation of HTML documents. Because XHTML 1 only defines an XML syntax for the language defined by HTML 4, the same differences apply to XHTML 1 as well.</strong></span><br />
<strong><span style="color: blue; font-family: Times;"></span></strong><br />
<strong><span style="color: blue; font-family: Times;">-The Transitional version allows the following parts of the vocabulary, which are not included in the Strict version:</span></strong><br />
<span style="color: blue; font-family: Times;"><ul>
<li><strong>A looser content model</strong>
<ul>
<li><strong>Inline elements and plain text are allowed directly in: <code>body</code>, <code>blockquote</code>, <code>form</code>, <code>noscript</code> and <code>noframes</code></strong></li>
</ul>
</li>
<li><strong>Presentation related elements</strong>
<ul>
<li><strong>underline (<code>u</code>)(Deprecated. can confuse a visitor with a hyperlink.)</strong></li>
<li><strong>strike-through (<code>s</code>)</strong></li>
<li><strong><code>center</code> (Deprecated. use CSS instead.)</strong></li>
<li><strong><code>font</code> (Deprecated. use CSS instead.)</strong></li>
<li><strong><code>basefont</code> (Deprecated. use CSS instead.)</strong></li>
</ul>
</li>
<li><strong>Presentation related attributes</strong>
<ul>
<li><strong><code>background</code> (Deprecated. use CSS instead.) and <code>bgcolor</code> (Deprecated. use CSS instead.) attributes for <code>body</code> (required element according to the W3C.) element.</strong></li>
<li><strong><code>align</code> (Deprecated. use CSS instead.) attribute on <code>div</code>, <code>form</code>, paragraph (<code>p</code>) and heading (<code>h1</code>...<code>h6</code>) elements</strong></li>
<li><strong><code>align</code> (Deprecated. use CSS instead.), <code>noshade</code> (Deprecated. use CSS instead.), <code>size</code> (Deprecated. use CSS instead.) and <code>width</code> (Deprecated. use CSS instead.) attributes on <code>hr</code> element</strong></li>
<li><strong><code>align</code> (Deprecated. use CSS instead.), <code>border</code>, <code>vspace</code> and <code>hspace</code> attributes on <code>img</code> and <code>object</code> (caution: the <code>object</code> element is only supported in Internet Explorer (from the major browsers)) elements</strong></li>
<li><strong><code>align</code> (Deprecated. use CSS instead.) attribute on <code>legend</code> and <code>caption</code> elements</strong></li>
<li><strong><code>align</code> (Deprecated. use CSS instead.) and <code>bgcolor</code> (Deprecated. use CSS instead.) on <code>table</code> element</strong></li>
<li><strong><code>nowrap</code> (Obsolete), <code>bgcolor</code> (Deprecated. use CSS instead.), <code>width</code>, <code>height</code> on <code>td</code> and <code>th</code> elements</strong></li>
<li><strong><code>bgcolor</code> (Deprecated. use CSS instead.) attribute on <code>tr</code> element</strong></li>
<li><strong><code>clear</code> (Obsolete) attribute on <code>br</code> element</strong></li>
<li><strong><code>compact</code> attribute on <code>dl</code>, <code>dir</code> and <code>menu</code> elements</strong></li>
<li><strong><code>type</code> (Deprecated. use CSS instead.), <code>compact</code> (Deprecated. use CSS instead.) and <code>start</code> (Deprecated. use CSS instead.) attributes on <code>ol</code> and <code>ul</code> elements</strong></li>
<li><strong><code>type</code> and <code>value</code> attributes on <code>li</code> element</strong></li>
<li><strong><code>width</code> attribute on <code>pre</code> element</strong></li>
</ul>
</li>
<li><strong>Additional elements in Transitional specification</strong>
<ul>
<li><strong><code>menu</code> (Deprecated. use CSS instead.) list (no substitute, though unordered list is recommended)</strong></li>
<li><strong><code>dir</code> (Deprecated. use CSS instead.) list (no substitute, though unordered list is recommended)</strong></li>
<li><strong><code>isindex</code> (Deprecated.) (element requires server-side support and is typically added to documents server-side, <code>form</code> and <code>input</code> elements can be used as a substitute)</strong></li>
<li><strong><code>applet</code> (Deprecated. use the <code>object</code> element instead.)</strong></li>
</ul>
</li>
<li><strong>The <code>language</code> (Obsolete) attribute on script element (redundant with the <code>type</code> attribute).</strong></li>
<li><strong>Frame related entities</strong></li>
<ul>
<li><code><strong>iframe</strong></code></li>
<li><code><strong>noframes</strong></code></li>
<li><strong><code>target</code> (Deprecated in the <code>map</code>, <code>link</code> and <code>form</code> elements.) attribute on <code>a</code>, client-side image-map (<code>map</code>), <code>link</code>, <code>form</code> and <code>base</code> elements</strong></li>
</ul>
</ul>
<div style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none;">
<strong><em><u><span style="color: black;">Here is a txt form of html which was made by me. You may paste it into a txt document and save it as html to see it. Although it is silly, but it really works!</span></u></em></strong></div>
<div style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none;">
<span style="color: orange;">----------START----------</span></div>
<div style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none;">
<span style="color: orange;"><html><br /><body><br /><h1>No Xi</h1><br /><br /><br /><p>This is a display page for functions for html.</p><br /><p>Some of the functions are showed below:</p><br /><br /><br /><a href="<a href="http://www.hwachong.edu.sg/">www.hwachong.edu.sg</a>"> This is not a link</a><br /><br /><br /><br /><br /><img src="NoXi.jpg" width="104" height="142" /><p>This is not a picture.</p><br /><br /><br /><ul><br /><li>This</li><br /><li>is</li><br /><li>not</li><br /><li>a</li><br /><li>list</li><br /></ul><br /><br /><br /><!DOCTYPE html><br /><html><br /><head><br /><style type="text/css"><br />div#container{width:580px}<br />div#header {background-color:#00CCCC;}<br />div#menu {background-color:#ffff00; height:300px; width:80px; float:left;}<br />div#content {background-color:#DDDDDD; height:300px; width:500px; </span><br />
<span style="color: orange;">float:left;}<br />div#footer {background-color:#00bbbb; clear:both; text-align:center;}<br />h1 {margin-bottom:0;}<br />h2 {margin-bottom:0; font-size:14px;}<br />ul {margin:0;}<br />li {list-style:none;}<br /></style><br /></head><br /><body><br /><div id="container"><br /><div id="header"><br /><h1>This is the title</h1><br /></div><br /><div id="menu"><br /><h2>This is the menu</h2><br /><ul><br /><li>No Xi 1</li><br /><li>No Xi 2</li><br /><li>No Xi 4</li><br /><li>No Xi 5</li><br /><li>No Xi 6</li><br /><li>No Xi 7</li><br /><li>No Xi 8</li><br /><li>No Xi 9</li><br /><li>No Xi 0</li><br /></ul><br /></div><br /><div id="content">This is the content</div><br /><div id="footer">You may also put something here.</div><br /></div><br /></body><br /></html><br /><br /><br /><form><br /><input type="radio" name="a" value="Alive" /> Alive<br /><br /><br /><input type="radio" name="a" value="Dead" /> Dead<br /><br /><br /><input type="radio" name="a" value="Others" /> Others<br /><form name="input" action="" method="get"><br /><br /><br /><br /><br />Username: <br /><input type="text" name="Username" /><br /><br /><br />Password:<br /><input type="text" name="Password" /><br /><input type="submit" value="Submit" /><br /><form name="input" action="" method="get"><br /></form><br /></body><br /></html></span></div>
<div style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none;">
<span style="color: orange;">----------END----------</span></div>
<div style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none;">
<br />
<span style="color: black;"><strong><em><u>And just for fun, this is the html for THIS page:</u></em></strong></span><br />
<span style="color: lime; font-size: xx-small;">----------START---------</span><br />
<span style="color: lime; font-size: xx-small;">----------END----------</span></div>
<div style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none;">
<br />
<span style="color: red; font-family: Times, "Times New Roman", serif;"><u>Are you feeling dizzy now?</u></span><br />
<br />
<span style="color: #444444; font-family: Times, "Times New Roman", serif;"><u>Here is also a link to a video about HTML:</u></span></div>
<div style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none;">
<u><span style="color: #444444;"></span></u></div>
</span><br />
<div style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none;">
</div>
<div style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none;">
<object class="BLOGGER-youtube-video" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" data-thumbnail-src="http://2.gvt0.com/vi/CKlh1lwe2rY/0.jpg" height="266" width="320"><param name="movie" value="http://www.youtube.com/v/CKlh1lwe2rY&fs=1&source=uds" /><param name="bgcolor" value="#FFFFFF" /><param name="allowFullScreen" value="true" /><embed width="320" height="266" src="http://www.youtube.com/v/CKlh1lwe2rY&fs=1&source=uds" type="application/x-shockwave-flash" allowfullscreen="true"></embed></object></div>
<div style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none;">
</div>
<div style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none;">
<span style="color: red;">Hope you enjoy! <span style="font-size: large;">:)</span></span></div>----------END----------
Are you feeling dizzy now?
Here is also a link to a video about HTML:
Hope you enjoy! :)
没有评论:
发表评论