600 lines
23 KiB
XML
600 lines
23 KiB
XML
<?xml version="1.0" encoding="iso-8859-1"?>
|
|
<!-- Copyright (c) 1998, 1999 Nik Clayton, All rights reserved.
|
|
|
|
Redistribution and use in source (SGML DocBook) and 'compiled' forms
|
|
(SGML HTML, PDF, PostScript, RTF and so forth) with or without
|
|
modification, are permitted provided that the following conditions
|
|
are met:
|
|
|
|
1. Redistributions of source code (SGML DocBook) must retain the above
|
|
copyright notice, this list of conditions and the following
|
|
disclaimer as the first lines of this file unmodified.
|
|
|
|
2. Redistributions in compiled form (transformed to other DTDs,
|
|
converted to PDF, PostScript, RTF and other formats) must reproduce
|
|
the above copyright notice, this list of conditions and the
|
|
following disclaimer in the documentation and/or other materials
|
|
provided with the distribution.
|
|
|
|
THIS DOCUMENTATION IS PROVIDED BY NIK CLAYTON "AS IS" AND ANY EXPRESS OR
|
|
IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
|
|
OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
|
DISCLAIMED. IN NO EVENT SHALL NIK CLAYTON BE LIABLE FOR ANY DIRECT,
|
|
INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
|
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
|
|
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
|
|
HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
|
|
STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
|
|
ANY WAY OUT OF THE USE OF THIS DOCUMENTATION, EVEN IF ADVISED OF THE
|
|
POSSIBILITY OF SUCH DAMAGE.
|
|
|
|
$FreeBSD$
|
|
-->
|
|
<chapter xmlns="http://docbook.org/ns/docbook" xmlns:xlink="http://www.w3.org/1999/xlink" version="5.0" xml:id="xhtml-markup">
|
|
<title><acronym>XHTML</acronym> Markup</title>
|
|
|
|
<sect1 xml:id="xhtml-markup-introduction">
|
|
<title>Introduction</title>
|
|
|
|
<para>This chapter describes usage of the <acronym>XHTML</acronym>
|
|
markup language used for the &os; web site.</para>
|
|
|
|
<para><acronym>XHTML</acronym> is the <acronym>XML</acronym>
|
|
version of the HyperText Markup Language, the markup language of
|
|
choice on the World Wide Web. More information can be found at
|
|
<uri xlink:href="http://www.w3.org/">http://www.w3.org/</uri>.</para>
|
|
|
|
<para><acronym>XHTML</acronym> is used to mark up pages on the
|
|
&os; web site. It is usually not used to mark up other
|
|
documentation, since DocBook offers a far richer set of elements
|
|
from which to choose. Consequently, <acronym>XHTML</acronym>
|
|
pages will normally only be encountered when writing for the web
|
|
site.</para>
|
|
|
|
<para><acronym>HTML</acronym> has gone through a number of
|
|
versions. The <acronym>XML</acronym>-compliant version
|
|
described here is called <acronym>XHTML</acronym>. The latest
|
|
widespread version is <acronym>XHTML</acronym> 1.0, available in
|
|
both <emphasis>strict</emphasis> and
|
|
<emphasis>transitional</emphasis> variants.</para>
|
|
|
|
<para>The <acronym>XHTML</acronym> <acronym>DTDs</acronym> are
|
|
available from the Ports Collection in
|
|
<package>textproc/xhtml</package>. They are
|
|
automatically installed by the <package>textproc/docproj</package> port.</para>
|
|
|
|
<note>
|
|
<para>This is <emphasis>not</emphasis> an exhaustive list of
|
|
elements, since that would just repeat the documentation for
|
|
<acronym>XHTML</acronym>. The aim is to list those elements
|
|
most commonly used. Please post questions about elements or
|
|
uses not covered here to the &a.doc;.</para>
|
|
</note>
|
|
|
|
<note>
|
|
<title>Inline Versus Block</title>
|
|
|
|
<para>In the remainder of this document, when describing
|
|
elements, <emphasis>inline</emphasis> means that the element
|
|
can occur within a block element, and does not cause a line
|
|
break. A <emphasis>block</emphasis> element, by comparison,
|
|
will cause a line break (and other processing) when it is
|
|
encountered.</para>
|
|
</note>
|
|
</sect1>
|
|
|
|
<sect1 xml:id="xhtml-markup-fpi">
|
|
<title>Formal Public Identifier (<acronym>FPI</acronym>)</title>
|
|
|
|
<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 <acronym>XHTML</acronym> documents on
|
|
the &os; web site comply with the transitional version of
|
|
<acronym>XHTML</acronym> 1.0.</para>
|
|
|
|
<programlisting>PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"</programlisting>
|
|
</sect1>
|
|
|
|
<sect1 xml:id="xhtml-markup-sectional-elements">
|
|
<title>Sectional Elements</title>
|
|
|
|
<para>An <acronym>XHTML</acronym> document is normally split into
|
|
two sections. The first section, called the
|
|
<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 content that will be
|
|
displayed to the user.</para>
|
|
|
|
<para>These sections are indicated with <tag>head</tag>
|
|
and <tag>body</tag> elements respectively. These
|
|
elements are contained within the top-level
|
|
<tag>html</tag> element.</para>
|
|
|
|
<example>
|
|
<title>Normal <acronym>XHTML</acronym> Document
|
|
Structure</title>
|
|
|
|
<programlisting><tag class="starttag">html xmlns="http://www.w3.org/1999/xhtml"</tag>
|
|
<tag class="starttag">head</tag>
|
|
<tag class="starttag">title</tag><replaceable>The Document's Title</replaceable><tag class="endtag">title</tag>
|
|
<tag class="endtag">head</tag>
|
|
|
|
<tag class="starttag">body</tag>
|
|
|
|
…
|
|
|
|
<tag class="endtag">body</tag>
|
|
<tag class="endtag">html</tag></programlisting>
|
|
</example>
|
|
</sect1>
|
|
|
|
<sect1 xml:id="xhtml-markup-block-elements">
|
|
<title>Block Elements</title>
|
|
|
|
<sect2 xml:id="xhtml-markup-block-elements-headings">
|
|
<title>Headings</title>
|
|
|
|
<para><acronym>XHTML</acronym> has tags to denote headings in
|
|
the document at up to six different levels.</para>
|
|
|
|
<para>The largest and most prominent heading is
|
|
<tag>h1</tag>, then <tag>h2</tag>,
|
|
continuing down to <tag>h6</tag>.</para>
|
|
|
|
<para>The element's content is the text of the heading.</para>
|
|
|
|
<example>
|
|
<title><tag>h1</tag>, <tag>h2</tag>,
|
|
and Other Header Tags</title>
|
|
|
|
<para>Usage:</para>
|
|
|
|
<programlisting><tag class="starttag">h1</tag>First section<tag class="endtag">h1</tag>
|
|
|
|
<!-- Document introduction goes here -->
|
|
|
|
<tag class="starttag">h2</tag>This is the heading for the first section<tag class="endtag">h2</tag>
|
|
|
|
<!-- Content for the first section goes here -->
|
|
|
|
<tag class="starttag">h3</tag>This is the heading for the first sub-section<tag class="endtag">h3</tag>
|
|
|
|
<!-- Content for the first sub-section goes here -->
|
|
|
|
<tag class="starttag">h2</tag>This is the heading for the second section<tag class="endtag">h2</tag>
|
|
|
|
<!-- Content for the second section goes here --></programlisting>
|
|
</example>
|
|
|
|
<para>Generally, an <acronym>XHTML</acronym> page should have
|
|
one first level heading (<tag>h1</tag>). This can
|
|
contain many second level headings (<tag>h2</tag>),
|
|
which can in turn contain many third level headings. Do not
|
|
leave gaps in the numbering.</para>
|
|
</sect2>
|
|
|
|
<sect2 xml:id="xhtml-markup-block-elements-paragraphs">
|
|
<title>Paragraphs</title>
|
|
|
|
<para><acronym>XHTML</acronym> supports a single paragraph
|
|
element, <tag>p</tag>.</para>
|
|
|
|
<example>
|
|
<title><tag>p</tag> Example</title>
|
|
|
|
<para>Usage:</para>
|
|
|
|
<programlisting><tag class="starttag">p</tag>This is a paragraph. It can contain just about any
|
|
other element.<tag class="endtag">p</tag></programlisting>
|
|
</example>
|
|
</sect2>
|
|
|
|
<sect2 xml:id="xhtml-markup-block-elements-block-quotations">
|
|
<title>Block Quotations</title>
|
|
|
|
<para>A block quotation is an extended quotation from another
|
|
document that will appear in a separate paragraph.</para>
|
|
|
|
<example>
|
|
<title><tag>blockquote</tag> Example</title>
|
|
|
|
<para>Usage:</para>
|
|
|
|
<programlisting><tag class="starttag">p</tag>A small excerpt from the US Constitution:<tag class="endtag">p</tag>
|
|
|
|
<tag class="starttag">blockquote</tag>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.<tag class="endtag">blockquote</tag></programlisting>
|
|
</example>
|
|
</sect2>
|
|
|
|
<sect2 xml:id="xhtml-markup-block-elements-lists">
|
|
<title>Lists</title>
|
|
|
|
<para><acronym>XHTML</acronym> can present the user with three
|
|
types of lists: ordered, unordered, and definition.</para>
|
|
|
|
<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.</para>
|
|
|
|
<para>Ordered lists are indicated by the <tag>ol</tag>
|
|
element, unordered lists by the <tag>ul</tag>
|
|
element, and definition lists by the <tag>dl</tag>
|
|
element.</para>
|
|
|
|
<para>Ordered and unordered lists contain listitems, indicated
|
|
by the <tag>li</tag> element. A listitem can
|
|
contain textual content, or it may be further wrapped in one
|
|
or more <tag>p</tag> elements.</para>
|
|
|
|
<para>Definition lists contain definition terms
|
|
(<tag>dt</tag>) and definition descriptions
|
|
(<tag>dd</tag>). A definition term can only contain
|
|
inline elements. A definition description can contain other
|
|
block elements.</para>
|
|
|
|
<example>
|
|
<title><tag>ul</tag> and
|
|
<tag>ol</tag> Example</title>
|
|
|
|
<para>Usage:</para>
|
|
|
|
<programlisting><tag class="starttag">p</tag>An unordered list. Listitems will probably be
|
|
preceded by bullets.<tag class="endtag">p</tag>
|
|
|
|
<tag class="starttag">ul</tag>
|
|
<tag class="starttag">li</tag>First item<tag class="endtag">li</tag>
|
|
|
|
<tag class="starttag">li</tag>Second item<tag class="endtag">li</tag>
|
|
|
|
<tag class="starttag">li</tag>Third item<tag class="endtag">li</tag>
|
|
<tag class="endtag">ul</tag>
|
|
|
|
<tag class="starttag">p</tag>An ordered list, with list items consisting of multiple
|
|
paragraphs. Each item (note: not each paragraph) will be
|
|
numbered.<tag class="endtag">p</tag>
|
|
|
|
<tag class="starttag">ol</tag>
|
|
<tag class="starttag">li</tag><tag class="starttag">p</tag>This is the first item. It only has one paragraph.<tag class="endtag">p</tag><tag class="endtag">li</tag>
|
|
|
|
<tag class="starttag">li</tag><tag class="starttag">p</tag>This is the first paragraph of the second item.<tag class="endtag">p</tag>
|
|
|
|
<tag class="starttag">p</tag>This is the second paragraph of the second item.<tag class="endtag">p</tag><tag class="endtag">li</tag>
|
|
|
|
<tag class="starttag">li</tag><tag class="starttag">p</tag>This is the first and only paragraph of the third
|
|
item.<tag class="endtag">p</tag><tag class="endtag">li</tag>
|
|
<tag class="endtag">ol</tag></programlisting>
|
|
</example>
|
|
|
|
<example>
|
|
<title>Definition Lists with <tag>dl</tag></title>
|
|
|
|
<para>Usage:</para>
|
|
|
|
<programlisting><tag class="starttag">dl</tag>
|
|
<tag class="starttag">dt</tag>Term 1<tag class="endtag">dt</tag>
|
|
|
|
<tag class="starttag">dd</tag><tag class="starttag">p</tag>Paragraph 1 of definition 1.<tag class="endtag">p</tag>
|
|
|
|
<tag class="starttag">p</tag>Paragraph 2 of definition 1.<tag class="endtag">p</tag><tag class="endtag">dd</tag>
|
|
|
|
<tag class="starttag">dt</tag>Term 2<tag class="endtag">dt</tag>
|
|
|
|
<tag class="starttag">dd</tag><tag class="starttag">p</tag>Paragraph 1 of definition 2.<tag class="endtag">p</tag><tag class="endtag">dd</tag>
|
|
|
|
<tag class="starttag">dt</tag>Term 3<tag class="endtag">dt</tag>
|
|
|
|
<tag class="starttag">dd</tag><tag class="starttag">p</tag>Paragraph 1 of definition 3.<tag class="endtag">p</tag><tag class="endtag">dd</tag>
|
|
<tag class="endtag">dl</tag></programlisting>
|
|
</example>
|
|
</sect2>
|
|
|
|
<sect2 xml:id="xhtml-markup-block-elements-preformatted-text">
|
|
<title>Pre-formatted Text</title>
|
|
|
|
<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>Wrap pre-formatted text in the <tag>pre</tag>
|
|
element.</para>
|
|
|
|
<example>
|
|
<title><tag>pre</tag> Example</title>
|
|
|
|
<para>For example, the <tag>pre</tag> tags could be
|
|
used to mark up an email message:</para>
|
|
|
|
<programlisting><tag class="starttag">pre</tag> 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
|
|
|
|
&lt;URL:http://people.FreeBSD.org/~nik/primer/index.html&gt;
|
|
|
|
Comments appreciated.
|
|
|
|
N<tag class="endtag">pre</tag></programlisting>
|
|
|
|
<para>Keep in mind that <literal><</literal> and
|
|
<literal>&</literal> still are recognized as special
|
|
characters in pre-formatted text. This is why the example
|
|
shown had to use <literal>&lt;</literal> instead of
|
|
<literal><</literal>. For consistency,
|
|
<literal>&gt;</literal> was used in place of
|
|
<literal>></literal>, too. Watch out for the special
|
|
characters that may appear in text copied from a plain-text
|
|
source, like an email message or program code.</para>
|
|
</example>
|
|
</sect2>
|
|
|
|
<sect2 xml:id="xhtml-markup-block-elements-tables">
|
|
<title>Tables</title>
|
|
|
|
<para>Mark up tabular information using the
|
|
<tag>table</tag> element. A table consists of one or
|
|
more table rows (<tag>tr</tag>), each containing one
|
|
or more cells of table data (<tag>td</tag>). Each
|
|
cell can contain other block elements, such as paragraphs or
|
|
lists. It can also contain another table (this nesting can
|
|
repeat indefinitely). If the cell only contains one paragraph
|
|
then the <tag>p</tag>element is not needed.</para>
|
|
|
|
<example>
|
|
<title>Simple Use of <tag>table</tag></title>
|
|
|
|
<para>Usage:</para>
|
|
|
|
<programlisting><tag class="starttag">p</tag>This is a simple 2x2 table.<tag class="endtag">p</tag>
|
|
|
|
<tag class="starttag">table</tag>
|
|
<tag class="starttag">tr</tag>
|
|
<tag class="starttag">td</tag>Top left cell<tag class="endtag">td</tag>
|
|
|
|
<tag class="starttag">td</tag>Top right cell<tag class="endtag">td</tag>
|
|
<tag class="endtag">tr</tag>
|
|
|
|
<tag class="starttag">tr</tag>
|
|
<tag class="starttag">td</tag>Bottom left cell<tag class="endtag">td</tag>
|
|
|
|
<tag class="starttag">td</tag>Bottom right cell<tag class="endtag">td</tag>
|
|
<tag class="endtag">tr</tag>
|
|
<tag class="endtag">table</tag></programlisting>
|
|
</example>
|
|
|
|
<para>A cell can span multiple rows and columns by adding the
|
|
<tag class="attribute">rowspan</tag> or
|
|
<tag class="attribute">colspan</tag> attributes with
|
|
values for the number of rows or columns to be spanned.</para>
|
|
|
|
<example>
|
|
<title>Using
|
|
<tag class="attribute">rowspan</tag></title>
|
|
|
|
<para>Usage:</para>
|
|
|
|
<programlisting><tag class="starttag">p</tag>One tall thin cell on the left, two short cells next to
|
|
it on the right.<tag class="endtag">p</tag>
|
|
|
|
<tag class="starttag">table</tag>
|
|
<tag class="starttag">tr</tag>
|
|
<tag class="starttag">td rowspan="2"</tag>Long and thin<tag class="endtag">td</tag>
|
|
<tag class="endtag">tr</tag>
|
|
|
|
<tag class="starttag">tr</tag>
|
|
<tag class="starttag">td</tag>Top cell<tag class="endtag">td</tag>
|
|
|
|
<tag class="starttag">td</tag>Bottom cell<tag class="endtag">td</tag>
|
|
<tag class="endtag">tr</tag>
|
|
<tag class="endtag">table</tag></programlisting>
|
|
</example>
|
|
|
|
<example>
|
|
<title>Using
|
|
<tag class="attribute">colspan</tag></title>
|
|
|
|
<para>Usage:</para>
|
|
|
|
<programlisting><tag class="starttag">p</tag>One long cell on top, two short cells below it.<tag class="endtag">p</tag>
|
|
|
|
<tag class="starttag">table</tag>
|
|
<tag class="starttag">tr</tag>
|
|
<tag class="starttag">td colspan="2"</tag>Top cell<tag class="endtag">td</tag>
|
|
<tag class="endtag">tr</tag>
|
|
|
|
<tag class="starttag">tr</tag>
|
|
<tag class="starttag">td</tag>Bottom left cell<tag class="endtag">td</tag>
|
|
|
|
<tag class="starttag">td</tag>Bottom right cell<tag class="endtag">td</tag>
|
|
<tag class="endtag">tr</tag>
|
|
<tag class="endtag">table</tag></programlisting>
|
|
</example>
|
|
|
|
<example>
|
|
<title>Using <tag class="attribute">rowspan</tag> and
|
|
<tag class="attribute">colspan</tag>
|
|
Together</title>
|
|
|
|
<para>Usage:</para>
|
|
|
|
<programlisting><tag class="starttag">p</tag>On a 3x3 grid, the top left block is a 2x2 set of
|
|
cells merged into one. The other cells are normal.<tag class="endtag">p</tag>
|
|
|
|
<tag class="starttag">table</tag>
|
|
<tag class="starttag">tr</tag>
|
|
<tag class="starttag">td colspan="2" rowspan="2"</tag>Top left large cell<tag class="endtag">td</tag>
|
|
|
|
<tag class="starttag">td</tag>Top right cell<tag class="endtag">td</tag>
|
|
<tag class="endtag">tr</tag>
|
|
|
|
<tag class="starttag">tr</tag>
|
|
<!-- Because the large cell on the left merges into
|
|
this row, the first <td> will occur on its
|
|
right -->
|
|
|
|
<tag class="starttag">td</tag>Middle right cell<tag class="endtag">td</tag>
|
|
<tag class="endtag">tr</tag>
|
|
|
|
<tag class="starttag">tr</tag>
|
|
<tag class="starttag">td</tag>Bottom left cell<tag class="endtag">td</tag>
|
|
|
|
<tag class="starttag">td</tag>Bottom middle cell<tag class="endtag">td</tag>
|
|
|
|
<tag class="starttag">td</tag>Bottom right cell<tag class="endtag">td</tag>
|
|
<tag class="endtag">tr</tag>
|
|
<tag class="endtag">table</tag></programlisting>
|
|
</example>
|
|
</sect2>
|
|
</sect1>
|
|
|
|
<sect1 xml:id="xhtml-markup-inline-elements">
|
|
<title>In-line Elements</title>
|
|
|
|
<sect2 xml:id="xhtml-markup-inline-elements-emphasizing-information">
|
|
<title>Emphasizing Information</title>
|
|
|
|
<para>Two levels of emphasis are available in
|
|
<acronym>XHTML</acronym>, <tag>em</tag> and
|
|
<tag>strong</tag>. <tag>em</tag> is for a
|
|
normal level of emphasis and <tag>strong</tag>
|
|
indicates stronger emphasis.</para>
|
|
|
|
<para><tag>em</tag> is typically rendered in italic
|
|
and <tag>strong</tag> is rendered in bold. This is
|
|
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>
|
|
|
|
<example>
|
|
<title><tag>em</tag> and
|
|
<tag>strong</tag> Example</title>
|
|
|
|
<para>Usage:</para>
|
|
|
|
<programlisting><tag class="starttag">p</tag><tag class="starttag">em</tag>This<tag class="endtag">em</tag> has been emphasized, while
|
|
<tag class="starttag">strong</tag>this<tag class="endtag">strong</tag> has been strongly emphasized.<tag class="endtag">p</tag></programlisting>
|
|
</example>
|
|
</sect2>
|
|
|
|
<sect2 xml:id="xhtml-markup-inline-elements-fixed-pitch-text">
|
|
<title>Indicating Fixed-Pitch Text</title>
|
|
|
|
<para>Content that should be rendered in a fixed pitch
|
|
(typewriter) typeface is tagged with <tag>tt</tag>
|
|
(for <quote>teletype</quote>).</para>
|
|
|
|
<example>
|
|
<title><tag>tt</tag> Example</title>
|
|
|
|
<para>Usage:</para>
|
|
|
|
<programlisting><tag class="starttag">p</tag>Many system settings are stored in
|
|
<tag class="starttag">tt</tag>/etc<tag class="endtag">tt</tag>.<tag class="endtag">p</tag></programlisting>
|
|
</example>
|
|
</sect2>
|
|
|
|
<sect2 xml:id="xhtml-markup-inline-elements-links">
|
|
<title>Links</title>
|
|
|
|
<note>
|
|
<para>Links are also inline elements.</para>
|
|
</note>
|
|
|
|
<sect3 xml: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 a
|
|
document on the web. The link is indicated with
|
|
<tag>a</tag>, and the
|
|
<tag class="attribute">href</tag> attribute contains
|
|
the <acronym>URL</acronym> of the target 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
|
|
<tag class="starttag">a href="..."</tag></title>
|
|
|
|
<para>Usage:</para>
|
|
|
|
<programlisting><tag class="starttag">p</tag>More information is available at the
|
|
<tag class="starttag">a href="http://www.&os;.org/"</tag>&os; web site<tag class="endtag">a</tag>.<tag class="endtag">p</tag></programlisting>
|
|
</example>
|
|
|
|
<para>This link always takes the user to the top of the linked
|
|
document.</para>
|
|
</sect3>
|
|
|
|
<sect3 xml:id="xhtml-markup-inline-elements-specific-parts">
|
|
<title>Linking to Specific Parts of Documents</title>
|
|
|
|
<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
|
|
<tag class="attribute">id</tag> attribute of an
|
|
element to a name. This example creates an anchor by
|
|
setting the <tag class="attribute">id</tag>
|
|
attribute of a <tag class="element">p</tag>
|
|
element.</para>
|
|
|
|
<example>
|
|
<title>Creating an Anchor</title>
|
|
|
|
<para>Usage:</para>
|
|
|
|
<programlisting><tag class="starttag">p id="samplepara"</tag>This paragraph can be referenced
|
|
in other links with the name <tag class="starttag">tt</tag>samplepara<tag class="endtag">tt</tag>.<tag class="endtag">p</tag></programlisting>
|
|
</example>
|
|
|
|
<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 a Different
|
|
Document</title>
|
|
|
|
<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><tag class="starttag">p</tag>More information can be found in the
|
|
<tag class="starttag">a href="foo.html#samplepara"</tag>sample paragraph<tag class="endtag">a</tag> of
|
|
<tag class="starttag">tt</tag>foo.html<tag class="endtag">tt</tag>.<tag class="endtag">p</tag></programlisting>
|
|
</example>
|
|
|
|
<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>The <literal>samplepara</literal> example
|
|
resides in this document. To link to it:</para>
|
|
|
|
<programlisting><tag class="starttag">p</tag>More information can be found in the
|
|
<tag class="starttag">a href="#samplepara"</tag>sample paragraph<tag class="endtag">a</tag> of this
|
|
document.<tag class="endtag">p</tag></programlisting>
|
|
</example>
|
|
</sect3>
|
|
</sect2>
|
|
</sect1>
|
|
</chapter>
|