- From: CVS User lsilli <cvsmail@w3.org>
- Date: Wed, 24 Apr 2013 15:19:26 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/html-xhtml-author-guide In directory roscoe:/tmp/cvs-serv31239 Modified Files: SamplePage.html Log Message: updating SamplePage --- /sources/public/html5/html-xhtml-author-guide/SamplePage.html 2013/04/24 14:03:37 1.11 +++ /sources/public/html5/html-xhtml-author-guide/SamplePage.html 2013/04/24 15:19:26 1.12 @@ -1,144 +1,148 @@ -<!DOCTYPE html> +<!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> +<html id="SampleDoc" xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> - <head> - <title>A Sample Page Using Polglot Markup</title> - <meta charset='utf-8' /> - <!-- The link element is self-closing as described in Section 6.4 Void Elements. --> - <!-- Style commands are included by linking to an external file rather than including them in-line as described in Section 9. Script and Style --> - <link type="text/css" rel="stylesheet" href="Sample.css"/> - </head> - - <body> - <h1>Sample Page Using Polyglot Markup</h1> - <p> - The source code for this document uses <dfn id="polyglot">polyglot markup</dfn>, - a document that is a stream of bytes that parses into identical document trees - (with the exception of the xmlns attribute on the root element) when processed as HTML and when processed as XML. - The source code for this document also contains additional comments about the use of <a href="#polyglot">polyglot markup</a>. - </p> - - <h2>Foreign Elements</h2> - <p> - The following shapes use SVG elements. - <a href="#polyglot">Polyglot markup</a> introduces undeclared (native) default namespaces - for the the root SVG element <code><svg></code> and respects the mixed-case element names and attribute values - when appropriate, as described in sections - <a href="http://dev.w3.org/html5/html-xhtml-author-guide/html-xhtml-authoring-guide.html#element-level-namespaces"> - 5.1 Element-Level Namespaces</a>, - <a href="http://dev.w3.org/html5/html-xhtml-author-guide/html-xhtml-authoring-guide.html#element-names">6.3.1 Element Names</a>, - and <a href="http://dev.w3.org/html5/html-xhtml-author-guide/html-xhtml-authoring-guide.html#attribute-values">6.3.3 Attribute Values</a>. - </p> - - <!-- Polyglot markup declares the xlink: namespace on the <svg> element to maintain XML-compatibility --> - <svg width="350" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - <g> - <title>Three SVG shapes</title> - <desc> - This SVG image contains an ellipse filled with a gradient that goes from white to blue as it moves outward from the center. - A yellow rectangle with a black border overlaps the ellipse in the upper-left quadrant, - and a red spiral on a white background overlaps the ellipse in the bottom-right quadrant. - The red spiral is also a link to the example code for that shape. - </desc> - <defs> - <!-- Note that "radialGradient" and "myGradient" respect mixed-case values. --> - <radialGradient id="myGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> - <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/> - <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/> - </radialGradient> - </defs> - <ellipse cx="50%" cy="50%" rx="50%" ry="42%" style="fill:url(#myGradient)"/> - <rect x="0" y="0" width="100" height="100" style="fill: yellow; stroke: black;"/> - <a xlink:href="http://www.w3schools.com/svg/tryit.asp?filename=path2&type=svg"> - <!-- Note that the following attribute contains no newlines. --> - <path transform="translate(60, -175)" d="M153 334 C153 334 151 334 151 334 C151 339 153 344 156 344 C164 344 171 339 171 334 C171 322 164 314 156 314 C142 314 131 322 131 334 C131 350 142 364 156 364 C175 364 191 350 191 334 C191 311 175 294 156 294 C131 294 111 311 111 334 C111 361 131 384 156 384 C186 384 211 361 211 334 C211 300 186 274 156 274" style="fill:white;stroke:red;stroke-width:2"/> - </a> - </g> - </svg> - <h2>Void Elements</h2> - <!-- Given an empty instance of an element whose content model is not EMPTY (in this case, an empty paragraph) - polyglot markup does not use the minimized form, as described in Section 6.4 Void Elements --> - <p></p> - <p> - There is an empty <code><p></code> element before this paragraph. - <a href="#polyglot">Polyglot markup</a> uses <code><p></p></code> and not <code><p /></code>. - </p> - <p> - <a href="#polyglot">Polyglot markup</a> treats certain elements as self-closing, - empty elements, such as the following <code><img></code> element. - </p> - <!-- The img element is self-closing as described in Section 6.4 Void Elements --> - <img height="48" width="72" alt="W3C" src="http://www.w3.org/Icons/w3c_home"/> - <p> - For more information, see - <a href="http://dev.w3.org/html5/html-xhtml-author-guide/html-xhtml-authoring-guide.html#empty-elements">Section 6.4 Void Elements</a>. - </p> - - - <h2>Required Elements</h2> - <p> - The following table uses the required <code><tbody></code> element, as described in - <a href="http://dev.w3.org/html5/html-xhtml-author-guide/html-xhtml-authoring-guide.html#required-elements">Section 6.1 Required Elements</a>. - </p> - <table border="1"> - <!-- Explicit use of the <tbody> element, as described in Section 6.1 Required Elements --> - <tbody> - <tr> - <th>Column One</th> - <th>Column Two</th> - </tr> - <tr> - <td>Row 1, Column 1</td> - <td>Row 1, Column 2</td> - </tr> - <tr> - <td>Row 2, Column 1</td> - <td>Row 2, Column 2</td> - </tr> - <tr> - <td>Row 3, Column 1</td> - <td>Row 3, Column 2</td> - </tr> - </tbody> - </table> - - <p> - The following table uses the required <code><colgroup></code> element, as described in - <a href="http://dev.w3.org/html5/html-xhtml-author-guide/html-xhtml-authoring-guide.html#required-elements">Section 6.1 Required Elements</a>. - </p> - <table border="1"> - <!-- Explicit use of the <colgroup> element as described in Section 6.1 Required Elements --> - <colgroup> - <col style="background-color:silver"/> - <col style="background-color:gray"/> - <col style="background-color:yellow"/> - </colgroup> - <tbody> - <tr> - <th>ISBN</th> - <th>Title</th> - <th>Price</th> - </tr> - <tr> - <td>3476896</td> - <td>My first HTML</td> - <td>$53</td> - </tr> - <tr> - <td>1234567</td> - <td>Intermediate Polyglot</td> - <td>$49</td> - </tr> - </tbody> - </table> - - - <h2>Named Entity References</h2> - <p> - This paragraph uses the string <code>&amp;</code> for ampersands and uses the string <code>&#xA0;</code> - for a nonbreaking space between the words "polyglot markup" as described in - <a href="http://dev.w3.org/html5/html-xhtml-author-guide/html-xhtml-authoring-guide.html#named-entity-references">Section 8. Named Entity References</a>. - </p> - </body> -</html> + <head> + <title>A Sample Page Using Polglot Markup</title> + <meta charset='utf-8' /> + <!-- The link element is self-closing as described in Section 6.4 Void Elements --> + <!-- Style commands are included by linking to an external file rather than including them in-line, + as described in Section 9. Script and Style --> + <link type="text/css" rel="stylesheet" href="Sample.css"/> + </head> + + <body> +<nav><p><strong>NB!:</strong> These bytes are available served as <a href="SamplePage.xhtml">XHTML</a> and as <a href="SamplePage.html">HTML</a></p></nav> + + <h1>Sample Page Using Polyglot Markup</h1> + <p> + The source code for <a href="#SampleDoc">this document</a> uses <dfn id="sampleDef">polyglot markup</dfn>, + a document that is a stream of bytes that parses into identical document trees + (with the exception of the xmlns attribute on the root element) when processed as HTML and when processed as XML. + The source code for this document also contains additional comments about the use of + <a href="#sampleDef">polyglot markup</a>. + </p> + + <h2>Foreign Elements</h2> + <p> + The following shapes use SVG elements. + <a href="#sampleDef">Polyglot markup</a> introduces undeclared (native) default namespaces + for the the root SVG element (<code>svg</code>) and respects the mixed-case element names and values + when appropriate, as described in the sections 5.1 Element-Level Namespaces, 6.3.1 Element Names, and 6.3.3 Attribute Values. + </p> + + <!-- <a href="#sampleDef">Polyglot markup</a> declares the xlink: namespace on the <svg> element to maintain XML-compatibility --> + <svg width="350" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <g> + <title>Three SVG shapes</title> + <desc> + This SVG image contains an ellipse filled with a gradient that goes from white to blue as it moves outward from the center. + A yellow rectangle with a black border overlaps the ellipse in the upper-left quadrant, + and a red spiral on a white background overlaps the ellipse in the bottom-right quadrant. + The red spiral is also a link to the example code for that SVG shape. + </desc> + <defs> + <!-- Note that "radialGradient" and "myGradient" respect mixed-case values. --> + <radialGradient id="myGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> + <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/> + <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/> + </radialGradient> + </defs> + <ellipse cx="50%" cy="50%" rx="50%" ry="42%" style="fill:url(#myGradient)"/> + <rect x="0" y="0" width="100" height="100" style="fill: yellow; stroke: black;"/> + <a xlink:href="http://www.example.org/foo"> + <!-- + Note that the following attribute contains newlines which will produce a different DOM, + but will not affect the way in which SVG functions in the least. + --> + <path transform="translate(60, -175)" + d="M153 334 C153 334 151 334 151 334 C151 339 153 344 156 344 C164 344 171 339 171 334 + C171 322 164 314 156 314 C142 314 131 322 131 334 C131 350 142 364 156 364 + C175 364 191 350 191 334 C191 311 175 294 156 294 C131 294 111 311 111 334 + C111 361 131 384 156 384 C186 384 211 361 211 334 C211 300 186 274 156 274" + style="fill:white;stroke:red;stroke-width:2"/> + </a> + </g> + </svg> + <h2>Void Elements</h2> + <!-- Given an empty instance of an element whose content model is not EMPTY (in this case, an empty paragraph) + <a href="#sampleDef">polyglot markup</a> does not use the minimized form, as described in Section 6.4 Void Elements --> + <p></p> + <p> + There is an empty <code>p</code> element before this paragraph. + <a href="#sampleDef">Polyglot markup</a> uses <code><p></p></code> and not <code><p/></code>. + </p> + <p> + <a href="#sampleDef">Polyglot markup</a> treats certain elements as self-closing, + void elements, such as the following <code>img</code> element. + </p> + <img height="48" width="72" alt="W3C" src="http://www.w3.org/Icons/w3c_home"/> + <p> + For more information, see Section 6.4 Void Elements. + </p> + + + <h2>Required Elements</h2> + <p> + The following table uses the required <code>tbody</code> element, as described in + Section 6.1 Required Elements. + </p> + <table> + <tbody> + <tr> + <th>Column One</th> + <th>Column Two</th> + </tr> + <tr> + <td>Row 1, Column 1</td> + <td>Row 1, Column 2</td> + </tr> + <tr> + <td>Row 2, Column 1</td> + <td>Row 2, Column 2</td> + </tr> + <tr> + <td>Row 3, Column 1</td> + <td>Row 3, Column 2</td> + </tr> + </tbody> + </table> + + <p> + The following table uses the required <code>colgroup</code> element, as described in + Section 6.1 Required Elements. + </p> + <table> + <colgroup> + <col style="background-color:silver"/> + <col style="background-color:gray"/> + <col style="background-color:yellow"/> + </colgroup> + <tbody> + <tr> + <th>ISBN</th> + <th>Title</th> + <th>Price</th> + </tr> + <tr> + <td>3476896</td> + <td>My first HTML</td> + <td>$53</td> + </tr> + <tr> + <td>1234567</td> + <td>Intermediate Polyglot</td> + <td>$49</td> + </tr> + </tbody> + </table> + + <h2>Named Entity References</h2> + <p> + The paragraph you now read, uses the string <code>&amp;</code> for ampersands (“&”) and uses, + as described in Section 8. Named Entity References, the string <code>&#xA0;</code> + for a nonbreaking space between the following two words: <i>“<a href="#sampleDef">polyglot&#xA0;;markup</a>”</i>. + + </p> + </body> +</html>
Received on Wednesday, 24 April 2013 15:19:32 UTC