[html5] r3316 - [e] (0) A quick introduction to HTML.
whatwg at whatwg.org
whatwg at whatwg.org
Thu Jun 25 16:19:18 PDT 2009
Author: ianh
Date: 2009-06-25 16:19:16 -0700 (Thu, 25 Jun 2009)
New Revision: 3316
Modified:
index
source
Log:
[e] (0) A quick introduction to HTML.
Modified: index
===================================================================
--- index 2009-06-25 07:02:16 UTC (rev 3315)
+++ index 2009-06-25 23:19:16 UTC (rev 3316)
@@ -164,7 +164,8 @@
<li><a href=#structure-of-this-specification><span class=secno>1.8 </span>Structure of this specification</a>
<ol>
<li><a href=#how-to-read-this-specification><span class=secno>1.8.1 </span>How to read this specification</a></li>
- <li><a href=#typographic-conventions><span class=secno>1.8.2 </span>Typographic conventions</a></ol></ol></li>
+ <li><a href=#typographic-conventions><span class=secno>1.8.2 </span>Typographic conventions</a></ol></li>
+ <li><a href=#a-quick-introduction-to-html><span class=secno>1.9 </span>A quick introduction to HTML</a></ol></li>
<li><a href=#infrastructure><span class=secno>2 </span>Common infrastructure</a>
<ol>
<li><a href=#terminology><span class=secno>2.1 </span>Terminology</a>
@@ -1425,6 +1426,97 @@
+ <h3 id=a-quick-introduction-to-html><span class=secno>1.9 </span>A quick introduction to HTML</h3>
+
+ <p><em>This section is non-normative.</em></p>
+
+ <p>A basic HTML document looks like this:</p>
+
+ <pre><!DOCTYPE HTML>
+<html>
+ <head>
+ <title>Sample page</title>
+ </head>
+ <body>
+ <h1>Sample page</h1>
+ <p>This is a <a href="demo.html">simple</a> sample.</p>
+ </body>
+</html></pre>
+
+ <p>HTML documents consist of a tree of elements and text. Each
+ element is denoted by a <a href=#syntax-start-tag title=syntax-start-tag>start
+ tag</a>, such as "<code title=""><body></code>", and an <a href=#syntax-end-tag title=syntax-end-tag>end tag</a>, such as "<code title=""></body></code>". (Certain start tags and end tags can in
+ certain cases be <a href=#syntax-tag-omission title=syntax-tag-omission>omitted</a>
+ and are implied by other tags.)</p>
+
+ <p>Tags have to be nested correctly, so that elements do not
+ partially overlap each other:</p>
+
+ <pre class=bad><p>This is <em>very <strong>wrong</em>!</strong></p></pre>
+ <pre><p>This <em>is <strong>correct</strong>.</em></p></pre>
+
+ <p>This specification defines a set of elements that can be used in
+ HTML, along with rules about the ways in which the elements can be
+ nested.</p>
+
+ <p>Elements can have attributes, which control how the elements
+ work. In the example above, there is a <a href=#hyperlink>hyperlink</a>,
+ formed using the <code><a href=#the-a-element>a</a></code> element and its <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute:</p>
+
+ <pre><a href="demo.html">simple</a></pre>
+
+ <p><a href=#syntax-attributes title=syntax-attributes>Attributes</a> are placed
+ inside the start tag, and consist of a <a href=#syntax-attribute-name title=syntax-attribute-name>name</a> and a <a href=#syntax-attribute-value title=syntax-attribute-value>value</a>, separated by an "<code title="">=</code>" character. The attribute value can be left
+ unquoted if it is a keyword, but generally will be quoted. (The
+ value can also be omitted altogether if it is empty.)</p>
+
+ <p>The tree formed by an HTML document in this way is turned into a
+ DOM tree when parsed. This DOM tree can then be manipulated from
+ scripts. Since DOM trees are the "live" representation of an HTML
+ document, this specification is mostly phrased in terms of DOM
+ trees, instead of the serialisation described above.</p>
+
+ <p>Each element in the DOM tree is represented by an object, and
+ thus objects have APIs so that they can be manipulated. For
+ instance, a link can have its "<code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>" attributed changed in
+ several ways:</p>
+
+ <pre>var a = <a href=#htmldocument title=HTMLDocument>document</a>.<a href=#dom-document-links title=dom-document-links>links</a>[0]; // obtain the first link in the document
+a.<a href=#dom-a-href title=dom-a-href>href</a> = 'sample.html'; // change the destination URL of the link
+a.<a href=#dom-uda-protocol title=dom-uda-protocol>protocol</a> = 'https'; // change just the scheme part of the URL</pre>
+
+ <p>HTML documents represent a media-independent description of
+ interactive content. HTML documents might be rendered to a screen,
+ or through a speech synthesizer, or on a braille display. To
+ influence exactly how such rendering takes place, authors can use a
+ styling language such as CSS.</p>
+
+ <p>In the following example, the page has been made yellow-on-blue
+ using CSS.</p>
+
+ <pre><!DOCTYPE HTML>
+<html>
+ <head>
+ <title>Sample styled page</title>
+ <style>
+ body { background: navy; color: yellow; }
+ </style>
+ </head>
+ <body>
+ <h1>Sample styled page</h1>
+ <p>This page is just a demo.</p>
+ </body>
+</html></pre>
+
+ <p>For more details on how to use HTML, authors are encouraged to
+ consult tutorials and guides. Some of the examples included in this
+ specification might also be of use, but the novice authors is
+ cautioned that this specification, by necessity, defines the
+ language with a level of detail that may be difficult to understand
+ at first.</p>
+
+
+
<h2 id=infrastructure><span class=secno>2 </span>Common infrastructure</h2>
<h3 id=terminology><span class=secno>2.1 </span>Terminology</h3>
@@ -13650,11 +13742,11 @@
<p>The <code><a href=#the-a-element>a</a></code> element also suports the complement of
<a href=#url-decomposition-attributes>URL decomposition attributes</a>, <dfn id=dom-a-protocol title=dom-a-protocol><code>protocol</code></dfn>, <dfn id=dom-a-host title=dom-a-host><code>host</code></dfn>, <dfn id=dom-a-port title=dom-a-port><code>port</code></dfn>, <dfn id=dom-a-hostname title=dom-a-hostname><code>hostname</code></dfn>, <dfn id=dom-a-pathname title=dom-a-pathname><code>pathname</code></dfn>, <dfn id=dom-a-search title=dom-a-search><code>search</code></dfn>, and <dfn id=dom-a-hash title=dom-a-hash><code>hash</code></dfn>. These must follow the
- rules given for URL decomposition attributes, with the <a href=#concept-uda-input title=concept-uda-input>input</a> being the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-a-href>href</code> attribute relative to the element,
- if there is such an attribute and resolving it is successful, or the
- empty string otherwise; and the <a href=#concept-uda-setter title=concept-uda-setter>common setter action</a> being the
- same as setting the element's <code title=attr-a-href>href</code>
- attribute to the new output value.</p>
+ rules given for URL decomposition attributes, with the <a href=#concept-uda-input title=concept-uda-input>input</a> being the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute relative to the
+ element, if there is such an attribute and resolving it is
+ successful, or the empty string otherwise; and the <a href=#concept-uda-setter title=concept-uda-setter>common setter action</a> being the
+ same as setting the element's <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute to the new output
+ value.</p>
</div>
@@ -39494,7 +39586,7 @@
<p>An element that is <a href=#focusable>focusable</a>, has an <a href=#assigned-access-key>assigned
access key</a>, and is neither an <code><a href=#the-a-element>a</a></code> element with an
- <code title=attr-a-href>href</code> attribute, a
+ <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute, a
<code><a href=#the-button-element>button</a></code> element, an <code><a href=#the-input-element>input</a></code> element whose
attribute is in one of the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a>, <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a>, <a href=#button-state title=attr-input-type-button>Button</a>, <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a>, or <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> states, an
<code><a href=#the-option-element>option</a></code> element with an ancestor <code><a href=#the-select-element>select</a></code>
@@ -46981,7 +47073,7 @@
empty object as soon as the attribute is set; it would then be
sniffed to determine the image type and decoded as an image.</p>
- <p>A <code title="">javascript:</code> URL in an <code title=attr-a-href>href</code> attribute of an <code><a href=#the-a-element>a</a></code>
+ <p>A <code title="">javascript:</code> URL in an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute of an <code><a href=#the-a-element>a</a></code>
element would only be evaluated when the link was <a href=#following-hyperlinks title="following hyperlinks">followed</a>.</p>
<p>The <code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code> attribute of an
@@ -55263,9 +55355,9 @@
<p>For each <var title="">node</var> in <var title="">nodes</var>:</p>
- <dl><dt>If the node is an <code><a href=#the-a-element>a</a></code> element with an <code title=attr-a-href>href</code></dt>
+ <dl><dt>If the node is an <code><a href=#the-a-element>a</a></code> element with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code></dt>
- <dd>Add to <var title="">urls</var> the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-a-href>href</code> content attribute relative to
+ <dd>Add to <var title="">urls</var> the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> content attribute relative to
the element.</dd>
<dt>If the node is an <code><a href=#the-img-element>img</a></code> element with an <code title=attr-img-src><a href=#attr-img-src>src</a></code></dt>
@@ -56615,12 +56707,12 @@
<dt><dfn id=command-unlink title=command-unlink><code>unlink</code></dfn></dt>
<dd><strong>Summary:</strong> Removes all links from the selection.</dd>
<dd class=impl><strong>Action:</strong> The user agent must remove all
- <code><a href=#the-a-element>a</a></code> elements that have <code title=attr-a-href>href</code> attributes and that are partially
+ <code><a href=#the-a-element>a</a></code> elements that have <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attributes and that are partially
or completely included in the current selection.</dd>
<dd><strong>Enabled When:</strong> The document has a selection
that is entirely within an <a href=#editing-host>editing host</a> and that
contains (either partially or completely) at least one
- <code><a href=#the-a-element>a</a></code> element that has an <code title=attr-a-href>href</code> attribute.</dd>
+ <code><a href=#the-a-element>a</a></code> element that has an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute.</dd>
<dd><strong>Indeterminate When:</strong> Never.</dd>
<dd><strong>State:</strong> Always false.</dd>
<dd><strong>Value:</strong> Always the string "<code title="">false</code>".</dd>
@@ -71317,6 +71409,7 @@
Neil Soiffer,
Nicholas Shanks,
Nicolas Gallagher,
+ Noah Mendelsohn,
Ojan Vafai,
Olaf Hoffmann,
Olav Junker Kjær,
Modified: source
===================================================================
--- source 2009-06-25 07:02:16 UTC (rev 3315)
+++ source 2009-06-25 23:19:16 UTC (rev 3316)
@@ -429,6 +429,104 @@
+ <h3>A quick introduction to HTML</h3>
+
+ <p><em>This section is non-normative.</em></p>
+
+ <p>A basic HTML document looks like this:</p>
+
+ <pre><!DOCTYPE HTML>
+<html>
+ <head>
+ <title>Sample page</title>
+ </head>
+ <body>
+ <h1>Sample page</h1>
+ <p>This is a <a href="demo.html">simple</a> sample.</p>
+ </body>
+</html></pre>
+
+ <p>HTML documents consist of a tree of elements and text. Each
+ element is denoted by a <span title="syntax-start-tag">start
+ tag</span>, such as "<code title=""><body></code>", and an <span
+ title="syntax-end-tag">end tag</span>, such as "<code
+ title=""></body></code>". (Certain start tags and end tags can in
+ certain cases be <span title="syntax-tag-omission">omitted</span>
+ and are implied by other tags.)</p>
+
+ <p>Tags have to be nested correctly, so that elements do not
+ partially overlap each other:</p>
+
+ <pre class="bad"><p>This is <em>very <strong>wrong</em>!</strong></p></pre>
+ <pre><p>This <em>is <strong>correct</strong>.</em></p></pre>
+
+ <p>This specification defines a set of elements that can be used in
+ HTML, along with rules about the ways in which the elements can be
+ nested.</p>
+
+ <p>Elements can have attributes, which control how the elements
+ work. In the example above, there is a <span>hyperlink</span>,
+ formed using the <code>a</code> element and its <code
+ title="attr-hyperlink-href">href</code> attribute:</p>
+
+ <pre><a href="demo.html">simple</a></pre>
+
+ <p><span title="syntax-attributes">Attributes</span> are placed
+ inside the start tag, and consist of a <span
+ title="syntax-attribute-name">name</span> and a <span
+ title="syntax-attribute-value">value</span>, separated by an "<code
+ title="">=</code>" character. The attribute value can be left
+ unquoted if it is a keyword, but generally will be quoted. (The
+ value can also be omitted altogether if it is empty.)</p>
+
+ <p>The tree formed by an HTML document in this way is turned into a
+ DOM tree when parsed. This DOM tree can then be manipulated from
+ scripts. Since DOM trees are the "live" representation of an HTML
+ document, this specification is mostly phrased in terms of DOM
+ trees, instead of the serialisation described above.</p>
+
+ <p>Each element in the DOM tree is represented by an object, and
+ thus objects have APIs so that they can be manipulated. For
+ instance, a link can have its "<code
+ title="attr-hyperlink-href">href</code>" attributed changed in
+ several ways:</p>
+
+ <pre>var a = <span title="HTMLDocument">document</span>.<span title="dom-document-links">links</span>[0]; // obtain the first link in the document
+a.<span title="dom-a-href">href</span> = 'sample.html'; // change the destination URL of the link
+a.<span title="dom-uda-protocol">protocol</span> = 'https'; // change just the scheme part of the URL</pre>
+
+ <p>HTML documents represent a media-independent description of
+ interactive content. HTML documents might be rendered to a screen,
+ or through a speech synthesizer, or on a braille display. To
+ influence exactly how such rendering takes place, authors can use a
+ styling language such as CSS.</p>
+
+ <p>In the following example, the page has been made yellow-on-blue
+ using CSS.</p>
+
+ <pre><!DOCTYPE HTML>
+<html>
+ <head>
+ <title>Sample styled page</title>
+ <style>
+ body { background: navy; color: yellow; }
+ </style>
+ </head>
+ <body>
+ <h1>Sample styled page</h1>
+ <p>This page is just a demo.</p>
+ </body>
+</html></pre>
+
+ <p>For more details on how to use HTML, authors are encouraged to
+ consult tutorials and guides. Some of the examples included in this
+ specification might also be of use, but the novice authors is
+ cautioned that this specification, by necessity, defines the
+ language with a level of detail that may be difficult to understand
+ at first.</p>
+
+
+
<h2 id="infrastructure">Common infrastructure</h2>
<h3>Terminology</h3>
@@ -14515,12 +14613,13 @@
rules given for URL decomposition attributes, with the <span
title="concept-uda-input">input</span> being the result of <span
title="resolve a url">resolving</span> the element's <code
- title="attr-a-href">href</code> attribute relative to the element,
- if there is such an attribute and resolving it is successful, or the
- empty string otherwise; and the <span
+ title="attr-hyperlink-href">href</code> attribute relative to the
+ element, if there is such an attribute and resolving it is
+ successful, or the empty string otherwise; and the <span
title="concept-uda-setter">common setter action</span> being the
- same as setting the element's <code title="attr-a-href">href</code>
- attribute to the new output value.</p>
+ same as setting the element's <code
+ title="attr-hyperlink-href">href</code> attribute to the new output
+ value.</p>
</div>
@@ -44430,7 +44529,7 @@
<p>An element that is <span>focusable</span>, has an <span>assigned
access key</span>, and is neither an <code>a</code> element with an
- <code title="attr-a-href">href</code> attribute, a
+ <code title="attr-hyperlink-href">href</code> attribute, a
<code>button</code> element, an <code>input</code> element whose
attribute is in one of the <span
title="attr-input-type-submit">Submit Button</span>, <span
@@ -53529,7 +53628,7 @@
sniffed to determine the image type and decoded as an image.</p>
<p>A <code title="">javascript:</code> URL in an <code
- title="attr-a-href">href</code> attribute of an <code>a</code>
+ title="attr-hyperlink-href">href</code> attribute of an <code>a</code>
element would only be evaluated when the link was <span
title="following hyperlinks">followed</span>.</p>
@@ -64831,11 +64930,11 @@
<dl>
<dt>If the node is an <code>a</code> element with an <code
- title="attr-a-href">href</code></dt>
+ title="attr-hyperlink-href">href</code></dt>
<dd>Add to <var title="">urls</var> the result of <span
title="resolve a url">resolving</span> the element's <code
- title="attr-a-href">href</code> content attribute relative to
+ title="attr-hyperlink-href">href</code> content attribute relative to
the element.</dd>
<dt>If the node is an <code>img</code> element with an <code
@@ -66384,13 +66483,13 @@
<dd><strong>Summary:</strong> Removes all links from the selection.</dd>
<dd class="impl"><strong>Action:</strong> The user agent must remove all
<code>a</code> elements that have <code
- title="attr-a-href">href</code> attributes and that are partially
+ title="attr-hyperlink-href">href</code> attributes and that are partially
or completely included in the current selection.</dd>
<dd><strong>Enabled When:</strong> The document has a selection
that is entirely within an <span>editing host</span> and that
contains (either partially or completely) at least one
<code>a</code> element that has an <code
- title="attr-a-href">href</code> attribute.</dd>
+ title="attr-hyperlink-href">href</code> attribute.</dd>
<dd><strong>Indeterminate When:</strong> Never.</dd>
<dd><strong>State:</strong> Always false.</dd>
<dd><strong>Value:</strong> Always the string "<code title="">false</code>".</dd>
@@ -84133,6 +84232,7 @@
Neil Soiffer,
Nicholas Shanks,
Nicolas Gallagher,
+ Noah Mendelsohn,
Ojan Vafai,
Olaf Hoffmann,
Olav Junker Kjær,
More information about the Commit-Watchers
mailing list