http:^^www.cs.wisc.edu^docs^htmltutorial.html

来自「This data set contains WWW-pages collect」· HTML 代码 · 共 548 行 · 第 1/2 页

<!WA0><!WA0><!WA0><!WA0><!WA0><!WA0><!WA0><!WA0><!WA0><!WA0><!WA0><!WA0><!WA0><A HREF="http://info.cern.ch/hypertext/WWW/MarkUp/Entities.html">table
of the codes</A>. For example, to produce a u with an umlaut (&uuml;) the
<code>&amp;uuml;</code> code is used.

<p>
Another useful structure is the HTML comment, produced with &lt;!-- and
--&gt;. The contents of the comment should not be displayed by the browser.
(However, some versions of Mosaic are broken and still interpret tags within
comments, so you can't comment out tags. This is unfortunate.) For example,
the text
<blockquote><pre>This here &lt;!-- right here --&gt; is a comment.</pre></blockquote>
should appear as

<p>
This here <!-- yeah, right here --> is a comment.

<P><HR>
<H2>Lists</H2>

<p>
Lists are a very useful construct in HTML. There are three types of lists:
ordered, unordered, and descriptive.

<p> Ordered lists produce a list of numbered items. To make an ordered
list, use the <code>&lt;OL&gt;</code> (ordered list) and
<code>&lt;LI&gt;</code> (list item) tags, like this:

<blockquote><pre>
&lt;OL&gt;
&lt;LI&gt;Get two slices of bread, peanut butter, and jelly.
&lt;LI&gt;Spread jelly on one side of one slice of bread.
&lt;LI&gt;Spread peanut butter on the other side of the other slice.
&lt;LI&gt;Put the sandwich together and eat!
&lt;/OL&gt;
</pre></blockquote>

<p> The result is this:
<OL>
<LI>Get two slices of bread, peanut butter, and jelly.
<LI>Spread jelly on one side of one slice of bread.
<LI>Spread peanut butter on the other side of the other slice.
<LI>Put the sandwich together and eat!
</OL>

<p>As you can see, the items are automatically numbered in order.

<p>Unordered lists are similar, but aren't numbered.  Instead of 
<code>&lt;OL&gt;</code> and <code>&lt;/OL&gt;</code>,
use <code>&lt;UL&gt;</code> and <code>&lt;/UL&gt;</code>.  For example:

<ul>
  <li> Bread (two slices)
  <li> Jelly
  <li> Peanut Butter
</ul>


<p> Descriptive lists are a little different: they are used when
giving lists of items and their descriptions, like in a dictionary.
The tag for descriptive lists is, predictably, <code>&lt;DL&gt;</code>,
and each item has a <code>&lt;DT&gt;</code> (term to be defined) and
<code>&lt;DD&gt;</code> (definition) tag. The example should make the
usage clear:

<blockquote><pre>
&lt;DL&gt;
&lt;DT&gt;This is the first term to be defined
&lt;DD&gt;This is the definition of that term.
&lt;DT&gt;piz-za \'pe^-t-se\
&lt;DD&gt;an open pie made typically of thinly rolled bread dough
    spread with a spiced mixture (as of tomatoes, cheese, and
    ground meat) and baked
&lt;/DL&gt;
</pre></blockquote>

<DL>
<DT>This is the first term to be defined
<DD>This is the definition of that term.
<DT>piz-za \'pe^-t-se\
<DD>an open pie made typically of thinly rolled bread dough spread with
     a spiced mixture (as of tomatoes, cheese, and ground meat) and baked
</DL>


<p> In all of the different kinds of lists, you are not limited to
short items.  In fact, they can be as long as you want, and can even
have multiple paragraphs.

<UL>
  <LI> This is an example of some really long items in a list. This text can
       go on and on and on, for quite some time, really. You get the idea.
       The next sentence will be a new paragraph, started with <code>&lt;P&gt;</code>.

       <p>Surprising, eh? It's another paragraph, with blank space separating
       it from the previous text, but still indented correctly.

  <li> This item has nothing to do with the previous item, though.
</UL>


<P><HR>
<H2>Pictures</H2>

<p>
Adding pictures to an HTML document is not difficult. The picture 
itself must be in GIF format, and have a filename that ends in <TT>.gif</TT>.
If you have a file in some other format you can make a GIF file using a
utility such as <TT>xv</TT> or the <TT>pbm</TT> programs.

<p> To include an image, use the <code>&lt;IMG&gt;</code> tag. The usage
is a little different than the other tags we have seen so far. By
itself, the <code>&lt;IMG&gt;</code> tag does nothing; you must use
the <code>SRC=""</code> attribute in the tag to specify the name of
the image.  Inside the quotes of the <code>SRC=""</code>, insert the 
<!WA1><!WA1><!WA1><!WA1><!WA1><!WA1><!WA1><!WA1><!WA1><!WA1><!WA1><!WA1><!WA1><A HREF="http://www.cs.wisc.edu/docs/url.html">URL</A> of the image.

An example:

<PRE>
Here is a picture of Felix: &lt;IMG SRC="felix.gif"&gt;
</PRE>

<p>Here is a picture of Felix: <!WA2><!WA2><!WA2><!WA2><!WA2><!WA2><!WA2><!WA2><!WA2><!WA2><!WA2><!WA2><!WA2><IMG SRC="http://www.cs.wisc.edu/docs/felix.gif">

<p>
By default, the text was lined up with the bottom of the picture. By using the
<code>ALIGN=MIDDLE</code> or <code>ALIGN=TOP</code> attributes, you can change
this. For instance:

<PRE>
Felix is the center of all things:&lt;IMG SRC="felix.gif" ALIGN=MIDDLE&gt;
</PRE>

<p>Felix is the center of all things:<!WA3><!WA3><!WA3><!WA3><!WA3><!WA3><!WA3><!WA3><!WA3><!WA3><!WA3><!WA3><!WA3><IMG SRC="http://www.cs.wisc.edu/docs/felix.gif" ALIGN=MIDDLE>

<PRE>
Felix: &lt;IMG SRC="felix.gif" ALIGN=TOP&gt; on top of the world!
</PRE>

<p>Felix: <!WA4><!WA4><!WA4><!WA4><!WA4><!WA4><!WA4><!WA4><!WA4><!WA4><!WA4><!WA4><!WA4><IMG SRC="http://www.cs.wisc.edu/docs/felix.gif" ALIGN=TOP> on top of the world!

<p>
Another important attribute that you can add to <code>&lt;IMG&gt;</code>
tags is <code>ALT=""</code>. If a browser is not capable of displaying
graphics, it will instead show any text that you put inside the quotes.
(Lynx, a text-only browser, is an example.)
If your page would be incomprehensible without the pictures, it is a very
good idea to use this alternative.

<PRE>
&lt;IMG SRC="felix.gif" ALT="Felix"&gt; was quite a skier.
</PRE>

<!WA5><!WA5><!WA5><!WA5><!WA5><!WA5><!WA5><!WA5><!WA5><!WA5><!WA5><!WA5><!WA5><IMG SRC="http://www.cs.wisc.edu/docs/felix.gif" ALT="Felix"> was quite a skier.


<P><HR>
<H2><A NAME="links">Links</A></H2>

<p> A full explanation of how to create links between documents is
beyond the scope of this document. However, we can give a quick
introduction.

<p>
Links, sometimes referred to as "anchors", are specified with the
<code>&lt;A&gt;</code> tag. Like the <code>&lt;IMG&gt;</code> tag,
<code>&lt;A&gt;</code> does nothing by itself. The <code>HREF=""</code>
attribute specifies the <!WA6><!WA6><!WA6><!WA6><!WA6><!WA6><!WA6><!WA6><!WA6><!WA6><!WA6><!WA6><!WA6><A HREF="http://www.cs.wisc.edu/docs/url.html">URL</A> that the link points to:

<PRE>
If you click &lt;A HREF="link.html"&gt;here&lt;/A&gt;, you will see
the file "link.html".
</PRE>

<p>
If you click <!WA7><!WA7><!WA7><!WA7><!WA7><!WA7><!WA7><!WA7><!WA7><!WA7><!WA7><!WA7><!WA7><A HREF="http://www.cs.wisc.edu/docs/link.html">here</A>, you will see the file "link.html".

<p> As you can see, the text inside the <code>&lt;A&gt;</code> and
<code>&lt;/A&gt;</code> tags is marked as a link.

<p>
To create a link using a <!WA8><!WA8><!WA8><!WA8><!WA8><!WA8><!WA8><!WA8><!WA8><!WA8><!WA8><!WA8><!WA8><A HREF="http://www.cs.wisc.edu/docs/url.html">URL</A>, just put the URL 
in the <code>HREF=""</code>
part of the anchor. For example, a link and its original HTML source:

<p>
The <!WA9><!WA9><!WA9><!WA9><!WA9><!WA9><!WA9><!WA9><!WA9><!WA9><!WA9><!WA9><!WA9><A HREF="http://www.cs.wisc.edu/">UWCS home page</A>.

<PRE>
The &lt;A HREF="http://www.cs.wisc.edu/"&gt;UWCS home page&lt;/a&gt;.
</PRE>

<p>
Another attribute for <code>&lt;A&gt;</code> is the 
<code>NAME=""</code> attribute.
This attibute specifies that the text within the anchor should be
associated with a name. Other links may jump directly to that anchor by
specifying <code>theURL#name</code> as a target. For example, I might
surround the heading for Chapter 3 of my book with the anchor
<blockquote><pre>&lt;A NAME="Chapter3"&gt;Chapter Three&lt;/A&gt;</pre></blockquote>
<p>
Then, from anywhere else in the document, I could provide a link to Chapter 3
by writing
<blockquote><pre>&lt;A HREF="#Chapter3"&gt;Jump to Chapter 3&lt;/A&gt;</pre></blockquote>

<p>
If Felix had a book with the URL 
<TT>http://www.cs.wisc.edu/~felix/book.html</TT>,
any document could jump to Chapter 3 of the book by specifying
<blockquote><pre>&lt;A HREF="http://www.cs.wisc.edu/~felix/book.html#Chapter3"&gt;
Chapter 3 of Felix's book&lt;/A&gt;</pre></blockquote>


<p><HR>
<H2>Other Tags</H2>

<p>
There are a number of other tags, more and less useful. A quick survey:

<DL>
<DT> <code>&lt;PRE&gt;</code>
<DD> Preformatted text: rendered in a monospace font. Unlike most HTML,
     white space is significant. Tags are still honored, though.
     This style is useful for tables of information, since tabs work.

<DT> <code>&lt;LISTING&gt;</code>
<DD> Similar to <code>&lt;PRE&gt;</code>, but in a smaller size.
     Meant for program listings. Supposedly, embedded tags are ignored.

<DT> <code>&lt;BLOCKQUOTE&gt;</code>
<DD> Indented text, meant for long quotes from other material.

<DT> <code>&lt;ADDRESS&gt;</code>
<DD> Address formatting--different browsers give different results.
     Use the <code>&lt;BR&gt;</code> code for multiple lines.

</DL>
<p>
Some other tags are of not very useful, since no one seems to know
exactly what they should be used for:

<DL>
<DT> <code>&lt;DFN&gt;</code>
<DD> Definition

<dt> <code>&lt;CITE&gt;</code>
<dd> Citation

<dt> <code>&lt;CODE&gt;</code>
<dd> HTML codes?

<dt> <code>&lt;KBD&gt;</code>
<dd> Keys on a keyboard, like <KBD>Return</KBD>.

<dt> <code>&lt;SAMP&gt;</code>
<dd> Sample codes?

<dt> <code>&lt;VAR&gt;</code>
<dd> Variable names

</DL>

<P><HR>
<H2>Other Sources of Information</H2>

<p> By now, you should have a good idea of what HTML is all about, and
you should be able to create your own HTML documents.
If you want to see more, we have links to other more complete sources 
of information <!WA10><!WA10><!WA10><!WA10><!WA10><!WA10><!WA10><!WA10><!WA10><!WA10><!WA10><!WA10><!WA10><A HREF="http://www.cs.wisc.edu/docs/otherdocs.html#html">here</A>.  Or, you might
want to read some of our other <!WA11><!WA11><!WA11><!WA11><!WA11><!WA11><!WA11><!WA11><!WA11><!WA11><!WA11><!WA11><!WA11><A HREF="http://www.cs.wisc.edu/docs/">documents</A>.

<P><hr>
</body> </html>