Revise and edit the XHTML chapter. Improve clarity, voice, and
examples. Replace CDATA with longer but technically correct ("the best
kind of correct") sgmltag usage.
This commit is contained in:
parent
9f805dff1c
commit
fa7c4cfd5c
Notes:
svn2git
2020-12-08 03:00:23 +00:00
svn path=/head/; revision=42274
1 changed files with 170 additions and 190 deletions
|
|
@ -60,9 +60,9 @@
|
|||
<emphasis>transitional</emphasis> variants.</para>
|
||||
|
||||
<para>The <acronym>XHTML</acronym> <acronym>DTDs</acronym> are
|
||||
available from the Ports Collection in
|
||||
available from the Ports Collection in
|
||||
<filename role="package">textproc/xhtml</filename>. They are
|
||||
automatically installed as part of the <filename
|
||||
automatically installed by the <filename
|
||||
role="package">textproc/docproj</filename> port.</para>
|
||||
|
||||
<note>
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
<para>There are a number of <acronym>XHTML</acronym>
|
||||
<acronym>FPI</acronym>s, depending upon the version, or
|
||||
<emphasis>level</emphasis> of <acronym>XHTML</acronym> to which
|
||||
a document conforms. Most XHTML documents on the FreeBSD web
|
||||
a document conforms. Most <acronym>XHTML</acronym> documents on the FreeBSD web
|
||||
site comply with the transitional version of
|
||||
<acronym>XHTML</acronym> 1.0.</para>
|
||||
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
<emphasis>head</emphasis>, contains meta-information about the
|
||||
document, such as its title, the name of the author, the parent
|
||||
document, and so on. The second section, the
|
||||
<emphasis>body</emphasis>, contains the content that will be
|
||||
<emphasis>body</emphasis>, contains content that will be
|
||||
displayed to the user.</para>
|
||||
|
||||
<para>These sections are indicated with <sgmltag>head</sgmltag>
|
||||
|
|
@ -118,17 +118,17 @@
|
|||
<title>Normal <acronym>XHTML</acronym> Document
|
||||
Structure</title>
|
||||
|
||||
<programlisting><html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title><replaceable>The Document's Title</replaceable></title>
|
||||
</head>
|
||||
<programlisting><sgmltag class="starttag">html xmlns="http://www.w3.org/1999/xhtml"</sgmltag>
|
||||
<sgmltag class="starttag">head</sgmltag>
|
||||
<sgmltag class="starttag">title</sgmltag><replaceable>The Document's Title</replaceable><sgmltag class="endtag">title</sgmltag>
|
||||
<sgmltag class="endtag">head</sgmltag>
|
||||
|
||||
<body>
|
||||
<sgmltag class="starttag">body</sgmltag>
|
||||
|
||||
…
|
||||
|
||||
</body>
|
||||
</html></programlisting>
|
||||
<sgmltag class="endtag">body</sgmltag>
|
||||
<sgmltag class="endtag">html</sgmltag></programlisting>
|
||||
</example>
|
||||
</sect1>
|
||||
|
||||
|
|
@ -153,47 +153,28 @@
|
|||
|
||||
<para>Usage:</para>
|
||||
|
||||
<programlisting><![CDATA[<h1>First section</h1>
|
||||
<programlisting><sgmltag class="starttag">h1</sgmltag>First section<sgmltag class="endtag">h1</sgmltag>
|
||||
|
||||
<!-- Document introduction goes here -->
|
||||
<!-- Document introduction goes here -->
|
||||
|
||||
<h2>This is the heading for the first section</h2>
|
||||
<sgmltag class="starttag">h2</sgmltag>This is the heading for the first section<sgmltag class="endtag">h2</sgmltag>
|
||||
|
||||
<!-- Content for the first section goes here -->
|
||||
<!-- Content for the first section goes here -->
|
||||
|
||||
<h3>This is the heading for the first sub-section</h3>
|
||||
<sgmltag class="starttag">h3</sgmltag>This is the heading for the first sub-section<sgmltag class="endtag">h3</sgmltag>
|
||||
|
||||
<!-- Content for the first sub-section goes here -->
|
||||
<!-- Content for the first sub-section goes here -->
|
||||
|
||||
<h2>This is the heading for the second section</h2>
|
||||
<sgmltag class="starttag">h2</sgmltag>This is the heading for the second section<sgmltag class="endtag">h2</sgmltag>
|
||||
|
||||
<!-- Content for the second section goes here -->]]></programlisting>
|
||||
<!-- Content for the second section goes here --></programlisting>
|
||||
</example>
|
||||
|
||||
<para>Generally, an <acronym>XHTML</acronym> page should have
|
||||
one first level heading (<sgmltag>h1</sgmltag>). This can
|
||||
contain many second level headings (<sgmltag>h2</sgmltag>),
|
||||
which can in turn contain many third level headings. Each
|
||||
<sgmltag>h<replaceable>n</replaceable></sgmltag> element
|
||||
should have the same element, but one further up the
|
||||
hierarchy, preceding it. Leaving gaps in the numbering is to
|
||||
be avoided.</para>
|
||||
|
||||
<example>
|
||||
<title>Bad Ordering of
|
||||
<sgmltag>h<replaceable>n</replaceable></sgmltag>
|
||||
Elements</title>
|
||||
|
||||
<para>Usage:</para>
|
||||
|
||||
<programlisting><![CDATA[<h1>First section</h1>
|
||||
|
||||
<!-- Document introduction -->
|
||||
|
||||
<h3>Sub-section</h3>
|
||||
|
||||
<!-- This is bad, <h2> has been left out -->]]></programlisting>
|
||||
</example>
|
||||
which can in turn contain many third level headings.
|
||||
Do not leave gaps in the numbering.</para>
|
||||
</sect2>
|
||||
|
||||
<sect2 id="xhtml-markup-block-elements-paragraphs">
|
||||
|
|
@ -207,8 +188,8 @@
|
|||
|
||||
<para>Usage:</para>
|
||||
|
||||
<programlisting><![CDATA[<p>This is a paragraph. It can contain just about any
|
||||
other element.</p>]]></programlisting>
|
||||
<programlisting><sgmltag class="starttag">p</sgmltag>This is a paragraph. It can contain just about any
|
||||
other element.<sgmltag class="endtag">p</sgmltag></programlisting>
|
||||
</example>
|
||||
</sect2>
|
||||
|
||||
|
|
@ -216,7 +197,7 @@
|
|||
<title>Block Quotations</title>
|
||||
|
||||
<para>A block quotation is an extended quotation from another
|
||||
document that should not appear within the current
|
||||
document that will appear in a separate
|
||||
paragraph.</para>
|
||||
|
||||
<example>
|
||||
|
|
@ -224,14 +205,14 @@
|
|||
|
||||
<para>Usage:</para>
|
||||
|
||||
<programlisting><![CDATA[<p>A small excerpt from the US Constitution:</p>
|
||||
<programlisting><sgmltag class="starttag">p</sgmltag>A small excerpt from the US Constitution:<sgmltag class="endtag">p</sgmltag>
|
||||
|
||||
<blockquote>We the People of the United States, in Order to form
|
||||
<sgmltag class="starttag">blockquote</sgmltag>We the People of the United States, in Order to form
|
||||
a more perfect Union, establish Justice, insure domestic
|
||||
Tranquility, provide for the common defence, promote the general
|
||||
Welfare, and secure the Blessings of Liberty to ourselves and our
|
||||
Posterity, do ordain and establish this Constitution for the
|
||||
United States of America.</blockquote>]]></programlisting>
|
||||
United States of America.<sgmltag class="endtag">blockquote</sgmltag></programlisting>
|
||||
</example>
|
||||
</sect2>
|
||||
|
||||
|
|
@ -241,12 +222,11 @@
|
|||
<para><acronym>XHTML</acronym> can present the user with three
|
||||
types of lists: ordered, unordered, and definition.</para>
|
||||
|
||||
<para>Typically, each entry in an ordered list will be
|
||||
numbered, while each entry in an unordered list will be
|
||||
preceded by a bullet point. Definition lists are composed of
|
||||
<para>Entries in an ordered list will be
|
||||
numbered, while entries in an unordered list will be
|
||||
preceded by bullet points. Definition lists have
|
||||
two sections for each entry. The first section is the term
|
||||
being defined, and the second section is the definition of the
|
||||
term.</para>
|
||||
being defined, and the second section is the definition.</para>
|
||||
|
||||
<para>Ordered lists are indicated by the <sgmltag>ol</sgmltag>
|
||||
element, unordered lists by the <sgmltag>ul</sgmltag>
|
||||
|
|
@ -270,31 +250,31 @@
|
|||
|
||||
<para>Usage:</para>
|
||||
|
||||
<programlisting><![CDATA[<p>An unordered list. Listitems will probably be
|
||||
preceded by bullets.</p>
|
||||
<programlisting><sgmltag class="starttag">p</sgmltag>An unordered list. Listitems will probably be
|
||||
preceded by bullets.<sgmltag class="endtag">p</sgmltag>
|
||||
|
||||
<ul>
|
||||
<li>First item</li>
|
||||
<sgmltag class="starttag">ul</sgmltag>
|
||||
<sgmltag class="starttag">li</sgmltag>First item<sgmltag class="endtag">li</sgmltag>
|
||||
|
||||
<li>Second item</li>
|
||||
<sgmltag class="starttag">li</sgmltag>Second item<sgmltag class="endtag">li</sgmltag>
|
||||
|
||||
<li>Third item</li>
|
||||
</ul>
|
||||
<sgmltag class="starttag">li</sgmltag>Third item<sgmltag class="endtag">li</sgmltag>
|
||||
<sgmltag class="endtag">ul</sgmltag>
|
||||
|
||||
<p>An ordered list, with list items consisting of multiple
|
||||
<sgmltag class="starttag">p</sgmltag>An ordered list, with list items consisting of multiple
|
||||
paragraphs. Each item (note: not each paragraph) will be
|
||||
numbered.</p>
|
||||
numbered.<sgmltag class="endtag">p</sgmltag>
|
||||
|
||||
<ol>
|
||||
<li><p>This is the first item. It only has one paragraph.</p></li>
|
||||
<sgmltag class="starttag">ol</sgmltag>
|
||||
<sgmltag class="starttag">li</sgmltag><sgmltag class="starttag">p</sgmltag>This is the first item. It only has one paragraph.<sgmltag class="endtag">p</sgmltag><sgmltag class="endtag">li</sgmltag>
|
||||
|
||||
<li><p>This is the first paragraph of the second item.</p>
|
||||
<sgmltag class="starttag">li</sgmltag><sgmltag class="starttag">p</sgmltag>This is the first paragraph of the second item.<sgmltag class="endtag">p</sgmltag>
|
||||
|
||||
<p>This is the second paragraph of the second item.</p></li>
|
||||
<sgmltag class="starttag">p</sgmltag>This is the second paragraph of the second item.<sgmltag class="endtag">p</sgmltag><sgmltag class="endtag">li</sgmltag>
|
||||
|
||||
<li><p>This is the first and only paragraph of the third
|
||||
item.</p></li>
|
||||
</ol>]]></programlisting>
|
||||
<sgmltag class="starttag">li</sgmltag><sgmltag class="starttag">p</sgmltag>This is the first and only paragraph of the third
|
||||
item.<sgmltag class="endtag">p</sgmltag><sgmltag class="endtag">li</sgmltag>
|
||||
<sgmltag class="endtag">ol</sgmltag></programlisting>
|
||||
</example>
|
||||
|
||||
<example>
|
||||
|
|
@ -302,33 +282,33 @@
|
|||
|
||||
<para>Usage:</para>
|
||||
|
||||
<programlisting><![CDATA[<dl>
|
||||
<dt>Term 1</dt>
|
||||
<programlisting><sgmltag class="starttag">dl</sgmltag>
|
||||
<sgmltag class="starttag">dt</sgmltag>Term 1<sgmltag class="endtag">dt</sgmltag>
|
||||
|
||||
<dd><p>Paragraph 1 of definition 1.</p>
|
||||
<sgmltag class="starttag">dd</sgmltag><sgmltag class="starttag">p</sgmltag>Paragraph 1 of definition 1.<sgmltag class="endtag">p</sgmltag>
|
||||
|
||||
<p>Paragraph 2 of definition 1.</p></dd>
|
||||
<sgmltag class="starttag">p</sgmltag>Paragraph 2 of definition 1.<sgmltag class="endtag">p</sgmltag><sgmltag class="endtag">dd</sgmltag>
|
||||
|
||||
<dt>Term 2</dt>
|
||||
<sgmltag class="starttag">dt</sgmltag>Term 2<sgmltag class="endtag">dt</sgmltag>
|
||||
|
||||
<dd><p>Paragraph 1 of definition 2.</p></dd>
|
||||
<sgmltag class="starttag">dd</sgmltag><sgmltag class="starttag">p</sgmltag>Paragraph 1 of definition 2.<sgmltag class="endtag">p</sgmltag><sgmltag class="endtag">dd</sgmltag>
|
||||
|
||||
<dt>Term 3</dt>
|
||||
<sgmltag class="starttag">dt</sgmltag>Term 3<sgmltag class="endtag">dt</sgmltag>
|
||||
|
||||
<dd><p>Paragraph 1 of definition 3.</p></dd>
|
||||
</dl>]]></programlisting>
|
||||
<sgmltag class="starttag">dd</sgmltag><sgmltag class="starttag">p</sgmltag>Paragraph 1 of definition 3.<sgmltag class="endtag">p</sgmltag><sgmltag class="endtag">dd</sgmltag>
|
||||
<sgmltag class="endtag">dl</sgmltag></programlisting>
|
||||
</example>
|
||||
</sect2>
|
||||
|
||||
<sect2 id="xhtml-markup-block-elements-preformatted-text">
|
||||
<title>Pre-formatted Text</title>
|
||||
|
||||
<para>Pre-formatted text can be shown to the user exactly as it
|
||||
is in the file. Typically, this means that the text is shown
|
||||
in a fixed font, multiple spaces are not merged into one, and
|
||||
line breaks in the text are significant.</para>
|
||||
<para>Pre-formatted text is shown to the user exactly as it
|
||||
is in the file. Text is shown in a fixed font.
|
||||
Multiple spaces and line breaks are shown exactly as they are
|
||||
in the file.</para>
|
||||
|
||||
<para>In order to do this, wrap the content in the
|
||||
<para>Wrap pre-formatted text in the
|
||||
<sgmltag>pre</sgmltag> element.</para>
|
||||
|
||||
<example>
|
||||
|
|
@ -337,18 +317,18 @@
|
|||
<para>For example, the <sgmltag>pre</sgmltag> tags could be
|
||||
used to mark up an email message:</para>
|
||||
|
||||
<programlisting><![CDATA[<pre> From: nik@FreeBSD.org
|
||||
<programlisting><sgmltag class="starttag">pre</sgmltag> From: nik@FreeBSD.org
|
||||
To: freebsd-doc@FreeBSD.org
|
||||
Subject: New documentation available
|
||||
|
||||
There is a new copy of my primer for contributors to the FreeBSD
|
||||
Documentation Project available at
|
||||
|
||||
<URL:http://people.FreeBSD.org/~nik/primer/index.html>
|
||||
&lt;URL:http://people.FreeBSD.org/~nik/primer/index.html&gt;
|
||||
|
||||
Comments appreciated.
|
||||
|
||||
N</pre>]]></programlisting>
|
||||
N<sgmltag class="endtag">pre</sgmltag></programlisting>
|
||||
|
||||
<para>Keep in mind that <literal><</literal> and
|
||||
<literal>&</literal> still are recognized as special
|
||||
|
|
@ -379,101 +359,101 @@
|
|||
|
||||
<para>Usage:</para>
|
||||
|
||||
<programlisting><![CDATA[<p>This is a simple 2x2 table.</p>
|
||||
<programlisting><sgmltag class="starttag">p</sgmltag>This is a simple 2x2 table.<sgmltag class="endtag">p</sgmltag>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>Top left cell</td>
|
||||
<sgmltag class="starttag">table</sgmltag>
|
||||
<sgmltag class="starttag">tr</sgmltag>
|
||||
<sgmltag class="starttag">td</sgmltag>Top left cell<sgmltag class="endtag">td</sgmltag>
|
||||
|
||||
<td>Top right cell</td>
|
||||
</tr>
|
||||
<sgmltag class="starttag">td</sgmltag>Top right cell<sgmltag class="endtag">td</sgmltag>
|
||||
<sgmltag class="endtag">tr</sgmltag>
|
||||
|
||||
<tr>
|
||||
<td>Bottom left cell</td>
|
||||
<sgmltag class="starttag">tr</sgmltag>
|
||||
<sgmltag class="starttag">td</sgmltag>Bottom left cell<sgmltag class="endtag">td</sgmltag>
|
||||
|
||||
<td>Bottom right cell</td>
|
||||
</tr>
|
||||
</table>]]></programlisting>
|
||||
<sgmltag class="starttag">td</sgmltag>Bottom right cell<sgmltag class="endtag">td</sgmltag>
|
||||
<sgmltag class="endtag">tr</sgmltag>
|
||||
<sgmltag class="endtag">table</sgmltag></programlisting>
|
||||
</example>
|
||||
|
||||
<para>A cell can span multiple rows and columns. To indicate
|
||||
this, add the <literal>rowspan</literal> and/or
|
||||
<literal>colspan</literal> attributes, with values indicating
|
||||
the number of rows or columns that should be spanned.</para>
|
||||
<para>A cell can span multiple rows and columns by adding
|
||||
the <sgmltag class="attribute">rowspan</sgmltag> or
|
||||
<sgmltag class="attribute">colspan</sgmltag> attributes with values for
|
||||
the number of rows or columns to be spanned.</para>
|
||||
|
||||
<example>
|
||||
<title>Using <literal>rowspan</literal></title>
|
||||
<title>Using <sgmltag class="attribute">rowspan</sgmltag></title>
|
||||
|
||||
<para>Usage:</para>
|
||||
|
||||
<programlisting><![CDATA[<p>One tall thin cell on the left, two short cells next to
|
||||
it on the right.</p>
|
||||
<programlisting><sgmltag class="starttag">p</sgmltag>One tall thin cell on the left, two short cells next to
|
||||
it on the right.<sgmltag class="endtag">p</sgmltag>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td rowspan="2">Long and thin</td>
|
||||
</tr>
|
||||
<sgmltag class="starttag">table</sgmltag>
|
||||
<sgmltag class="starttag">tr</sgmltag>
|
||||
<sgmltag class="starttag">td rowspan="2"</sgmltag>Long and thin<sgmltag class="endtag">td</sgmltag>
|
||||
<sgmltag class="endtag">tr</sgmltag>
|
||||
|
||||
<tr>
|
||||
<td>Top cell</td>
|
||||
<sgmltag class="starttag">tr</sgmltag>
|
||||
<sgmltag class="starttag">td</sgmltag>Top cell<sgmltag class="endtag">td</sgmltag>
|
||||
|
||||
<td>Bottom cell</td>
|
||||
</tr>
|
||||
</table>]]></programlisting>
|
||||
<sgmltag class="starttag">td</sgmltag>Bottom cell<sgmltag class="endtag">td</sgmltag>
|
||||
<sgmltag class="endtag">tr</sgmltag>
|
||||
<sgmltag class="endtag">table</sgmltag></programlisting>
|
||||
</example>
|
||||
|
||||
<example>
|
||||
<title>Using <literal>colspan</literal></title>
|
||||
<title>Using <sgmltag class="attribute">colspan</sgmltag></title>
|
||||
|
||||
<para>Usage:</para>
|
||||
|
||||
<programlisting><![CDATA[<p>One long cell on top, two short cells below it.</p>
|
||||
<programlisting><sgmltag class="starttag">p</sgmltag>One long cell on top, two short cells below it.<sgmltag class="endtag">p</sgmltag>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td colspan="2">Top cell</td>
|
||||
</tr>
|
||||
<sgmltag class="starttag">table</sgmltag>
|
||||
<sgmltag class="starttag">tr</sgmltag>
|
||||
<sgmltag class="starttag">td colspan="2"</sgmltag>Top cell<sgmltag class="endtag">td</sgmltag>
|
||||
<sgmltag class="endtag">tr</sgmltag>
|
||||
|
||||
<tr>
|
||||
<td>Bottom left cell</td>
|
||||
<sgmltag class="starttag">tr</sgmltag>
|
||||
<sgmltag class="starttag">td</sgmltag>Bottom left cell<sgmltag class="endtag">td</sgmltag>
|
||||
|
||||
<td>Bottom right cell</td>
|
||||
</tr>
|
||||
</table>]]></programlisting>
|
||||
<sgmltag class="starttag">td</sgmltag>Bottom right cell<sgmltag class="endtag">td</sgmltag>
|
||||
<sgmltag class="endtag">tr</sgmltag>
|
||||
<sgmltag class="endtag">table</sgmltag></programlisting>
|
||||
</example>
|
||||
|
||||
<example>
|
||||
<title>Using <literal>rowspan</literal> and
|
||||
<literal>colspan</literal> Together</title>
|
||||
<title>Using <sgmltag class="attribute">rowspan</sgmltag> and
|
||||
<sgmltag class="attribute">colspan</sgmltag> Together</title>
|
||||
|
||||
<para>Usage:</para>
|
||||
|
||||
<programlisting><![CDATA[<p>On a 3x3 grid, the top left block is a 2x2 set of
|
||||
cells merged into one. The other cells are normal.</p>
|
||||
<programlisting><sgmltag class="starttag">p</sgmltag>On a 3x3 grid, the top left block is a 2x2 set of
|
||||
cells merged into one. The other cells are normal.<sgmltag class="endtag">p</sgmltag>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td colspan="2" rowspan="2">Top left large cell</td>
|
||||
<sgmltag class="starttag">table</sgmltag>
|
||||
<sgmltag class="starttag">tr</sgmltag>
|
||||
<sgmltag class="starttag">td colspan="2" rowspan="2"</sgmltag>Top left large cell<sgmltag class="endtag">td</sgmltag>
|
||||
|
||||
<td>Top right cell</td>
|
||||
</tr>
|
||||
<sgmltag class="starttag">td</sgmltag>Top right cell<sgmltag class="endtag">td</sgmltag>
|
||||
<sgmltag class="endtag">tr</sgmltag>
|
||||
|
||||
<tr>
|
||||
<!-- Because the large cell on the left merges into
|
||||
this row, the first <td> will occur on its
|
||||
right -->
|
||||
<sgmltag class="starttag">tr</sgmltag>
|
||||
<!-- Because the large cell on the left merges into
|
||||
this row, the first <td> will occur on its
|
||||
right -->
|
||||
|
||||
<td>Middle right cell</td>
|
||||
</tr>
|
||||
<sgmltag class="starttag">td</sgmltag>Middle right cell<sgmltag class="endtag">td</sgmltag>
|
||||
<sgmltag class="endtag">tr</sgmltag>
|
||||
|
||||
<tr>
|
||||
<td>Bottom left cell</td>
|
||||
<sgmltag class="starttag">tr</sgmltag>
|
||||
<sgmltag class="starttag">td</sgmltag>Bottom left cell<sgmltag class="endtag">td</sgmltag>
|
||||
|
||||
<td>Bottom middle cell</td>
|
||||
<sgmltag class="starttag">td</sgmltag>Bottom middle cell<sgmltag class="endtag">td</sgmltag>
|
||||
|
||||
<td>Bottom right cell</td>
|
||||
</tr>
|
||||
</table>]]></programlisting>
|
||||
<sgmltag class="starttag">td</sgmltag>Bottom right cell<sgmltag class="endtag">td</sgmltag>
|
||||
<sgmltag class="endtag">tr</sgmltag>
|
||||
<sgmltag class="endtag">table</sgmltag></programlisting>
|
||||
</example>
|
||||
</sect2>
|
||||
</sect1>
|
||||
|
|
@ -490,11 +470,11 @@
|
|||
normal level of emphasis and <sgmltag>strong</sgmltag>
|
||||
indicates stronger emphasis.</para>
|
||||
|
||||
<para>Typically, <sgmltag>em</sgmltag> is rendered in italic
|
||||
<para><sgmltag>em</sgmltag> is typically rendered in italic
|
||||
and <sgmltag>strong</sgmltag> is rendered in bold. This is
|
||||
not always the case, however, and should not be relied upon.
|
||||
According to best practices, webpages only hold structural and
|
||||
semantical information and stylesheets are later applied to
|
||||
not always the case, and should not be relied upon.
|
||||
According to best practices, web pages only hold structural and
|
||||
semantical information, and stylesheets are later applied to
|
||||
them. Think of semantics, not formatting, when using these
|
||||
tags.</para>
|
||||
|
||||
|
|
@ -504,8 +484,8 @@
|
|||
|
||||
<para>Usage:</para>
|
||||
|
||||
<programlisting><![CDATA[<p><em>This</em> has been emphasized, while
|
||||
<strong>this</strong> has been strongly emphasized.</p>]]></programlisting>
|
||||
<programlisting><sgmltag class="starttag">p</sgmltag><sgmltag class="starttag">em</sgmltag>This<sgmltag class="endtag">em</sgmltag> has been emphasized, while
|
||||
<sgmltag class="starttag">strong</sgmltag>this<sgmltag class="endtag">strong</sgmltag> has been strongly emphasized.<sgmltag class="endtag">p</sgmltag></programlisting>
|
||||
</example>
|
||||
</sect2>
|
||||
|
||||
|
|
@ -521,9 +501,8 @@
|
|||
|
||||
<para>Usage:</para>
|
||||
|
||||
<programlisting><![CDATA[<p>This document was originally written by
|
||||
Nik Clayton, who can be reached by email as
|
||||
<tt>nik@FreeBSD.org</tt>.</p>]]></programlisting>
|
||||
<programlisting><sgmltag class="starttag">p</sgmltag>Many system settings are stored in
|
||||
<sgmltag class="starttag">tt</sgmltag>/etc<sgmltag class="endtag">tt</sgmltag>.<sgmltag class="endtag">p</sgmltag></programlisting>
|
||||
</example>
|
||||
</sect2>
|
||||
|
||||
|
|
@ -537,75 +516,76 @@
|
|||
<sect3 id="xhtml-markup-inline-elements-linking">
|
||||
<title>Linking to Other Documents on the Web</title>
|
||||
|
||||
<para>A link points to the <acronym>URL</acronym> of another
|
||||
<para>A link points to the <acronym>URL</acronym> of a
|
||||
document on the web. The link is indicated with
|
||||
<sgmltag>a</sgmltag>, and the <literal>href</literal>
|
||||
<sgmltag>a</sgmltag>, and the <sgmltag class="attribute">href</sgmltag>
|
||||
attribute contains the <acronym>URL</acronym> of the target
|
||||
document. The content of the element becomes the link, and
|
||||
is normally indicated to the user in some way,
|
||||
typically by a different color or underlining.</para>
|
||||
document. The content of the element becomes the link,
|
||||
indicated to the user by showing it in
|
||||
a different color or with an underline.</para>
|
||||
|
||||
<example>
|
||||
<title>Using <literal><a href="..."></literal></title>
|
||||
<title>Using <sgmltag class="starttag">a href="..."</sgmltag></title>
|
||||
|
||||
<para>Usage:</para>
|
||||
|
||||
<programlisting><![CDATA[<p>More information is available at the
|
||||
<a href="http://www.FreeBSD.org/">FreeBSD web site</a>.</p>]]></programlisting>
|
||||
<programlisting><sgmltag class="starttag">p</sgmltag>More information is available at the
|
||||
<sgmltag class="starttag">a href="http://www.&os;.org/"</sgmltag>&os; web site<sgmltag class="endtag">a</sgmltag>.<sgmltag class="endtag">p</sgmltag></programlisting>
|
||||
</example>
|
||||
|
||||
<para>These links will take the user to the top of the chosen
|
||||
<para>This link always takes the user to the top of the linked
|
||||
document.</para>
|
||||
</sect3>
|
||||
|
||||
<sect3 id="xhtml-markup-inline-elements-other-parts">
|
||||
<title>Linking to Other Parts of Documents</title>
|
||||
<sect3 id="xhtml-markup-inline-elements-specific-parts">
|
||||
<title>Linking to Specific Parts of Documents</title>
|
||||
|
||||
<para>Linking to a point within another document, or within
|
||||
the same document, requires that the document author include
|
||||
<emphasis>anchors</emphasis>. Anchors are indicated with
|
||||
<sgmltag>a</sgmltag> and the <literal>id</literal> attribute
|
||||
instead of <literal>href</literal>.</para>
|
||||
<para>To link to a specific point within a document, that
|
||||
document must include an
|
||||
<emphasis>anchor</emphasis> at the desired point. Anchors are included by setting the
|
||||
<sgmltag class="attribute">id</sgmltag> attribute of an element to a name.
|
||||
This example creates an anchor by setting the <sgmltag class="attribute">id</sgmltag> attribute
|
||||
of a <sgmltag class="element">p</sgmltag> element.</para>
|
||||
|
||||
<example>
|
||||
<title>Using <literal><a id="..."></literal></title>
|
||||
<title>Creating an Anchor</title>
|
||||
|
||||
<para>Usage:</para>
|
||||
|
||||
<programlisting><![CDATA[<p><a id="para1">This</a> paragraph can be referenced
|
||||
in other links with the name <tt>para1</tt>.</p>]]></programlisting>
|
||||
<programlisting><sgmltag class="starttag">p id="samplepara"</sgmltag>This paragraph can be referenced
|
||||
in other links with the name <sgmltag class="starttag">tt</sgmltag>samplepara<sgmltag class="endtag">tt</sgmltag>.<sgmltag class="endtag">p</sgmltag></programlisting>
|
||||
</example>
|
||||
|
||||
<para>To link to a named part of a document, write a normal
|
||||
link to that document, but include the <acronym>ID</acronym>
|
||||
of the anchor after a <literal>#</literal> symbol.</para>
|
||||
<para>Links to anchors are similar to plain links,
|
||||
but include a <literal>#</literal> symbol and the anchor's <acronym>ID</acronym>
|
||||
at the end of the <acronym>URL</acronym>.</para>
|
||||
|
||||
<example>
|
||||
<title>Linking to a Named Part of Another Document</title>
|
||||
<title>Linking to a Named Part of a Different Document</title>
|
||||
|
||||
<para>Assume that the <literal>para1</literal> example
|
||||
resides in a document called
|
||||
<filename>foo.html</filename>.</para>
|
||||
<para>The <literal>samplepara</literal> example
|
||||
is part of a document called
|
||||
<filename>foo.html</filename>. A link to that specific
|
||||
paragraph in the document is constructed in this example.</para>
|
||||
|
||||
<programlisting><![CDATA[<p>More information can be found in the
|
||||
<a href="foo.html#para1">first paragraph</a> of
|
||||
<tt>foo.html</tt>.</p>]]></programlisting>
|
||||
<programlisting><sgmltag class="starttag">p</sgmltag>More information can be found in the
|
||||
<sgmltag class="starttag">a href="foo.html#samplepara"</sgmltag>sample paragraph<sgmltag class="endtag">a</sgmltag> of
|
||||
<sgmltag class="starttag">tt</sgmltag>foo.html<sgmltag class="endtag">tt</sgmltag>.<sgmltag class="endtag">p</sgmltag></programlisting>
|
||||
</example>
|
||||
|
||||
<para>If you are linking to a named anchor within the same
|
||||
document then you can omit the document's URL, and just
|
||||
include the name of the anchor (with the preceding
|
||||
<literal>#</literal>).</para>
|
||||
<para>To link to a named anchor within the same
|
||||
document, omit the document's <acronym>URL</acronym>, and just
|
||||
use the <literal>#</literal> symbol followed by the name of the anchor.</para>
|
||||
|
||||
<example>
|
||||
<title>Linking to a Named Part of the Same Document</title>
|
||||
|
||||
<para>Assume that the <literal>para1</literal> example
|
||||
resides in this document:</para>
|
||||
<para>The <literal>samplepara</literal> example
|
||||
resides in this document. To link to it:</para>
|
||||
|
||||
<programlisting><![CDATA[<p>More information can be found in the
|
||||
<a href="#para1">first paragraph</a> of this
|
||||
document.</p>]]></programlisting>
|
||||
<programlisting><sgmltag class="starttag">p</sgmltag>More information can be found in the
|
||||
<sgmltag class="starttag">a href="#samplepara"</sgmltag>sample paragraph<sgmltag class="endtag">a</sgmltag> of this
|
||||
document.<sgmltag class="endtag">p</sgmltag></programlisting>
|
||||
</example>
|
||||
</sect3>
|
||||
</sect2>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue