[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