1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Draft//EN">
4
<TITLE>A Beginner's Guide to HTML</TITLE>
8
<H1>A Beginner's Guide to HTML</H1>
11
This is a primer for producing documents in HTML, the markup language
12
used by the World Wide Web.
15
<LI><A HREF="#A1.1">Acronym Expansion</A>
16
<LI><A HREF="#A1.2">What This Primer Doesn't Cover</A>
17
<LI><A HREF="#A1.3">Creating HTML Documents</A>
19
<LI><A HREF="#A1.3.1">The Minimal HTML Document</A>
20
<LI><A HREF="#A1.3.2">Basic Markup Tags</A>
22
<LI><A HREF="#A1.3.2.1">Titles</A>
23
<LI><A HREF="#A1.3.2.2">Headings</A>
24
<LI><A HREF="#A1.3.2.3">Paragraphs</A>
26
<LI><A HREF="#A1.3.3">Linking to Other Documents</A>
28
<LI><A HREF="#A1.3.3.1">Relative Links Versus Absolute Pathnames</A>
29
<LI><A HREF="#A1.3.3.2">Uniform Resource Locator</A>
30
<LI><A HREF="#A1.3.3.3">Anchors to Specific Sections in Other Documents</A>
31
<LI><A HREF="#A1.3.3.4">Anchors to Specific Sections Within
32
the Current Document</A>
35
<LI><A HREF="#A1.4">Additional Markup Tags</A>
37
<LI><A HREF="#A1.4.1">Lists</A>
39
<LI><A HREF="#A1.4.1.1">Unnumbered Lists</A>
40
<LI><A HREF="#A1.4.1.2">Numbered Lists</A>
41
<LI><A HREF="#A1.4.1.3">Definition Lists</A>
42
<LI><A HREF="#A1.4.1.4">Nested Lists</A>
44
<LI><A HREF="#A1.4.2">Preformatted Text</A>
45
<LI><A HREF="#A1.4.3">Extended Quotes</A>
46
<LI><A HREF="#A1.4.4">Addresses</A>
49
<LI><A HREF="#A1.5">Character Formatting</A>
51
<LI><A HREF="#A1.5.1">Physical Versus Logical:
52
Use Logical Tags When Possible</A>
54
<LI><A HREF="#A1.5.1.1">Logical Styles</A>
55
<LI><A HREF="#A1.5.1.2">Physical Styles</A>
57
<LI><A HREF="#A1.5.2">Using Character Tags</A>
58
<LI><A HREF="#A1.5.3">Special Characters</A>
60
<LI><A HREF="#A1.5.3.1">Escape Sequences</A>
61
<LI><A HREF="#A1.5.3.2">Forced Line Breaks</A>
62
<LI><A HREF="#A1.5.3.3">Horizontal Rules</A>
65
<LI><A HREF="#A1.6">In-line Images</A>
67
<LI><A HREF="#A1.6.1">Alternate Text for Viewers
68
That Can't Display Images</A>
70
<LI><A HREF="#A1.7">External Images, Sounds, and Animations</A>
71
<LI><A HREF="#A1.8">Troubleshooting</A>
73
<LI><A HREF="#A1.8.1">Avoid Overlapping Tags</A>
74
<LI><A HREF="#A1.8.2">Embed Anchors and Character Tags,
75
But Not Anything Else</A>
76
<LI><A HREF="#A1.8.3">Check Your Links</A>
78
<LI><A HREF="#A1.9">A Longer Example</A>
79
<LI><A HREF="#A1.10">For More Information</A>
81
<LI><A HREF="#A1.10.1">Fill-out Forms</A>
82
<LI><A HREF="#A1.10.2">Style Guides</A>
83
<LI><A HREF="#A1.10.3">Other Introductory Documents</A>
84
<LI><A HREF="#A1.10.4">Additional References</A>
88
<H2><A NAME = "A1.1">Acronym Expansion</A></H2>
91
<DD>World Wide Web (or Web, for short).
93
<DD>Standard Generalized Markup Language -- this is a standard for
94
describing markup languages.
96
<DD>Document Type Definition -- this is a specific markup language,
99
<DD>HyperText Markup Language -- HTML is a SGML DTD. In practical
100
terms, HTML is a collection of styles (indicated by markup tags)
101
that define the various components of a World Wide Web document.
102
HTML was invented by Tim Berners-Lee while at CERN. He is now director
103
of the W3 Consortium.
106
<H2><A NAME = "A1.2">What This Primer Doesn't Cover</A></H2>
108
This primer assumes that you have:
111
<LI>at least a passing knowledge of how to use NCSA Mosaic or some
113
<LI>a general understanding of how Web servers and client browsers
115
<LI>access to a Web server for which you would like to produce HTML
116
documents, or that you wish to produce HTML documents for personal
120
<H2><A NAME = "A1.3">Creating HTML Documents</A></H2>
122
HTML documents are in plain (also known as ASCII) text format and can
123
be created using any text editor (e.g., Emacs or vi on UNIX machines).
124
A couple of Web browsers (tkWWW for X Window System machines and CERN's
125
Web browser for NeXT computers) include rudimentary HTML editors in
126
a WYSIWYG environment. There are also some WYSIWIG editors available
127
now (e.g. HotMetal for Sun Sparcstations, HTML Edit for Macintoshes).
128
You may wish to try one of them first before delving into the details
131
<I>You can preview a document in progress with NCSA Mosaic (and
132
some </I><I>other Web browsers). Open it with the </I><B>Open Local
133
</B><I>command under the </I><B>File</B><I> menu. </I>
136
<I>After you edit the source HTML file, save the changes. Return
137
to NCSA </I><I>Mosaic and </I><B>Reload</B><I> the document. The
138
changes are reflected in the on-</I><I>screen display.</I>
142
<H3><A NAME = "A1.3.1">The Minimal HTML Document</A></H3>
144
Here is a bare-bones example of HTML:
147
<TITLE>The simplest HTML example</TITLE>
148
<H1>This is a level-one heading</H1>
149
Welcome to the world of HTML.
150
This is one paragraph.<P>
151
And this is a second.<P>
154
<A HREF=MinimalHTML.html>Click here</A> to see the formatted version
158
HTML uses markup tags to tell the Web browser how to display the text.
159
The above example uses:
162
<LI>the <SAMP><TITLE></SAMP> tag (and corresponding <SAMP></TITLE></SAMP>
163
tag), which specifies the title of the document
164
<LI>the <SAMP><H1></SAMP> header tag (and corresponding <SAMP></H1></SAMP>)
165
<LI>the <SAMP><P></SAMP> paragraph-separator tag
169
HTML tags consist of a left angle bracket (<SAMP><</SAMP>), (a ``less
170
than'' symbol to mathematicians), followed by name of the tag and closed
171
by a right angular bracket (<SAMP>></SAMP>). Tags are usually paired,
172
e.g. <SAMP><H1></SAMP> and <SAMP></H1></SAMP>. The ending
173
tag looks just like the starting tag except a slash (/) precedes the
174
text within the brackets. In the example, <SAMP><H1></SAMP> tells
175
the Web browser to start formatting a level-one heading; <SAMP></H1></SAMP>
176
tells the browser that the heading is complete.
179
The primary exception to the pairing rule is the <SAMP><P></SAMP>
180
tag. There is no such thing as <SAMP></P></SAMP>.
183
<STRONG>NOTE:</STRONG><I> HTML is not case sensitive. </I><SAMP><title></SAMP><I>
184
is equivalent to </I><SAMP><TITLE></SAMP><I> or </I><SAMP><TiTlE></SAMP><I>.
188
Not all tags are supported by all World Wide Web browsers. If a browser
189
does not support a tag, it just ignores it.
191
<H3><A NAME = "A1.3.2">Basic Markup Tags</A></H3>
192
<H4><A NAME = "A1.3.2.1">Title</A></H4>
194
Every HTML document should have a title. A title is generally displayed
195
separately from the document and is used primarily for document identification
196
in other contexts (e.g., a WAIS search). Choose about half a dozen
197
words that describe the document's purpose.
199
<I>In the X Window System and Microsoft Windows versions of NCSA
200
</I><I>Mosaic, the </I><B>Document Title</B><I> field is at the
201
top of the screen just below the </I><I>pulldown menus. In NCSA
202
Mosaic for Macintosh, text tagged as </I><SAMP><TITLE></SAMP>
203
<I>appears as the window title.</I>
207
<H4><A NAME = "A1.3.2.2">Headings</A></H4>
209
HTML has six levels of headings, numbered 1 through 6, with 1 being
210
the most prominent. Headings are displayed in larger and/or bolder
211
fonts than normal body text. The first heading in each document should
212
be tagged <SAMP><H1></SAMP>. The syntax of the heading tag is:
215
<SAMP><H</SAMP><VAR>y</VAR><SAMP>></SAMP><VAR>Text of heading</VAR><SAMP>
216
</H</SAMP><VAR>y</VAR><SAMP> ></SAMP>
219
where <VAR>y</VAR> is a number between 1 and 6 specifying the level
223
For example, the coding for the ``Headings'' section heading above
227
<H3>Headings</H3>
230
<H5><A NAME = "A1.3.2.2.1">Title versus first heading</A></H5>
232
In many documents, the first heading is identical to the title. For
233
multipart documents, the text of the first heading should be suitable
234
for a reader who is already browsing related information (e.g., a chapter
235
title), while the title tag should identify the document in a wider
236
context (e.g., include both the book title and the chapter title, although
237
this can sometimes become overly long).
239
<H4><A NAME = "A1.3.2.3">Paragraphs</A></H4>
241
Unlike documents in most word processors, carriage returns in HTML
242
files aren't significant. Word wrapping can occur at any point in your
243
source file, and multiple spaces are collapsed into a single space.
244
(There are couple of exceptions; space following a <SAMP><P></SAMP>
245
or <SAMP><H</SAMP><VAR>y</VAR><SAMP>></SAMP> tag, for example,
246
is ignored.) Notice that in the bare-bones example, the first paragraph
251
This is the first paragraph. <P>
255
In the source file, there is a line break between the sentences. A
256
Web browser ignores this line break and starts a new paragraph only
257
when it reaches a <SAMP><P></SAMP> tag.
260
<STRONG>Important:</STRONG> You must separate paragraphs with <SAMP><P></SAMP>.
261
The browser ignores any indentations or blank lines in the source text.
262
HTML relies almost entirely on the tags for formatting instructions,
263
and without the <SAMP><P></SAMP> tags, the document becomes one
264
large paragraph. (The exception is text tagged as ``preformatted,''
265
which is explained below.) For instance, the following would produce
266
identical output as the first bare-bones HTML example:
269
<TITLE>The simplest HTML example</TITLE><H1>This is a level
270
one heading</H1>Welcome to the world of HTML. This is one
271
paragraph.<P>And this is a second.<P>
275
However, to preserve readability in HTML files, headings should be
276
on separate lines, and paragraphs should be separated by blank lines
277
(in addition to the <SAMP><P></SAMP> tags).
279
<I>NCSA Mosaic handles <P> by ending the current paragraph
280
and insert</I><I>ing a blank line. </I>
285
In HTML+, a successor to HTML currently in development, <SAMP><P></SAMP>
286
becomes a ``container'' of text, just as the text of a level-one heading
287
is ``contained'' within<SAMP><H1> ... </SAMP><SAMP></H1></SAMP>:
291
This is a paragraph in HTML+.
296
The difference is that the <SAMP></P></SAMP> closing tag can
297
always be omitted. (That is, if a browser sees a <SAMP><P></SAMP>,
298
it knows that there must be an implied <SAMP></P></SAMP> to end
299
the previous paragraph.) In other words, in HTML+, <SAMP><P></SAMP>
300
is a beginning-of-paragraph marker.
303
The advantage of this change is that you will be able to specify formatting
304
options for a paragraph. For example, in HTML+, you will be able to
305
center a paragraph by coding
308
<SAMP><P ALIGN=CENTER></SAMP>
309
This is a centered paragraph. This is HTML+, so you can't do it yet.
313
This change won't effect any documents you write now, and they will
314
continue to look just the same with HTML+ browsers.
316
<H3><A NAME = "A1.3.3">Linking to Other Documents</A></H3>
318
The chief power of HTML comes from its ability to link regions of text
319
(and also images) to another document. The browser highlights these
320
regions (usually with color and/or underlines) to indicate that they
321
are hypertext links (often shortened to <DFN>hyperlinks</DFN> or simply
325
HTML's single hypertext-related tag is <SAMP><A></SAMP>, which
326
stands for <DFN>anchor</DFN>. To include an anchor in your document:
329
<LI>Start the anchor with <SAMP><A</SAMP> . (There's a space after
331
<LI>Specify the document that's being pointed to by entering the parameter
332
<SAMP>HREF="</SAMP><VAR>filename</VAR><SAMP>"</SAMP>
333
followed by a closing right angle bracket: <SAMP>></SAMP>
334
<LI>Enter the text that will serve as the hypertext link in the current
336
<LI>Enter the ending anchor tag: <SAMP></A></SAMP>.
340
Here is an sample hypertext reference:
343
<A HREF="MaineStats.html">Maine</A>
347
This entry makes the word ``Maine'' the hyperlink to the document <SAMP>MaineStats.html</SAMP>,
348
which is in the same directory as the first document. You can link
349
to documents in other directories by specifying the <DFN>relative path</DFN>
350
from the current document to the linked document. For example, a link
351
to a file <SAMP>NJStats.html</SAMP> located in the subdirectory <SAMP>AtlanticStates</SAMP>
355
<A HREF="AtlanticStates/NJStats.html">New Jersey</A>
359
These are called <VAR>relative links</VAR>. You can also use the absolute
360
pathname of the file if you wish. Pathnames use the standard UNIX syntax.
362
<H4><A NAME = "A1.3.3.1">Relative Links Versus Absolute Pathnames</A></H4>
364
In general, you should use relative links, because
367
<LI>You have less to type.
368
<LI>It's easier to move a group of documents to another location, because
369
the relative path names will still be valid.
373
However, use absolute pathnames when linking to documents that are
374
not directly related. For example, consider a group of documents that
375
comprise a user manual. Links within this group should be relative
376
links. Links to other documents (perhaps a reference to related software)
377
should use full path names. This way, if you move the user manual to
378
a different directory, none of the links would have to be updated.
380
<H4><A NAME = "A1.3.3.2">Uniform Resource Locator</A></H4>
382
The World Wide Web uses Uniform Resource Locators (URLs) to specify
383
the location of files on other servers. A URL includes the type of
384
resource being accessed (e.g., gopher, WAIS), the address of the server,
385
and the location of the file. The syntax is:
388
<VAR>scheme</VAR><SAMP>://</SAMP><VAR>host.domain</VAR><SAMP>[:</SAMP><VAR>port</VAR><SAMP>]/</SAMP><VAR>path</VAR><SAMP>/</SAMP><VAR>filename</VAR>
391
where <VAR>scheme</VAR> is one of
394
<DT><SAMP>file</SAMP>
397
<DD>a file on your local system, or a file on an anonymous FTP server
399
<DT><SAMP>http</SAMP>
400
<DD>a file on a World Wide Web server
401
<DT><SAMP>gopher</SAMP>
402
<DD>a file on a Gopher server
403
<DT><SAMP>WAIS</SAMP>
404
<DD>a file on a WAIS server
405
<DT><SAMP>news</SAMP>
406
<DD>an Usenet newsgroup
407
<DT><SAMP>telnet</SAMP>
408
<DD>a connection to a Telnet-based service
412
The <VAR>port</VAR> number can generally be omitted. (That means unless
413
someone tells you otherwise, leave it out.)
416
For example, to include a link to this primer in your document, you
420
<A HREF = "http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html">
421
NCSA's Beginner's Guide to HTML</A>
425
This would make the text ``NCSA's Beginner's Guide to HTML'' a hyperlink
429
For more information on URLs, look at
432
<LI><A HREF = "http://www.w3.org/hypertext/WWW/Addressing/Addressing.html">
433
<CITE>WWW Names and Addresses, URIs, URLs, URNs</CITE></A>, written
435
<LI><A HREF = "http://www.ncsa.uiuc.edu/demoweb/url-primer.html">
436
<CITE>A Beginner's Guide to URLs</CITE></A>, located on the NCSA Mosaic
440
<H4><A NAME = "A1.3.3.3">Links to Specific Sections in Other Documents</A></H4>
442
Anchors can also be used to move to a particular section in a document.
443
Suppose you wish to set a link from document A and a specific section
444
in document B. (Call this file <SAMP>documentB.html</SAMP>.) First
445
you need to set up a <DFN>named anchor</DFN> in document B. For example,
446
to set up an anchor named ``Jabberwocky'' to document B, enter
449
Here's <A NAME = "Jabberwocky">some text</a>
453
Now when you create the link in document A, include not only the filename,
454
but also the named anchor, separated by a hash mark (#).
457
This is my <A HREF = "documentB.html#Jabberwocky">link</A> to document B.
461
Now clicking on the word ``link'' in document A sends the reader directly
462
to the words ``some text'' in document B.
464
<H4><A NAME = "A1.3.3.4">Links to Specific Sections Within the Current Document</A></H4>
466
The technique is exactly the same except the filename is omitted.
469
For example, to link to the Jabberwocky anchor from within the same
470
file (Document B), use
473
This is <A HREF = "#Jabberwocky">Jabberwocky link</A> from within Document B.
476
<H2><A NAME = "A1.4">Additional Markup Tags</A></H2>
478
The preceding is sufficient to produce simple HTML documents. For more
479
complex documents, HTML has tags for several types of lists, preformatted
480
sections, extended quotations, character formatting, and other items.
482
<H3><A NAME = "A1.4.1">Lists</A></H3>
484
HTML supports unnumbered, numbered, and definition lists.
486
<H4><A NAME = "A1.4.1.1">Unnumbered Lists</A></H4>
488
To make an unnumbered list,
491
<LI>Start with an opening list <SAMP><UL></SAMP> tag.
492
<LI>Enter the <SAMP><LI></SAMP> tag followed by the individual
493
item. (No closing <SAMP></LI></SAMP> tag is needed.)
494
<LI>End with a closing list <SAMP></UL></SAMP> tag.
498
Below an example two-item list:
516
The <SAMP><LI></SAMP> items can contain multiple paragraphs.
517
Just separate the paragraphs with the <SAMP><P></SAMP> paragraph
520
<H4><A NAME = "A1.4.1.2">Numbered Lists</A></H4>
522
A numbered list (also called an ordered list, from which the tag name
523
derives) is identical to an unnumbered list, except it uses <SAMP><OL></SAMP>
524
instead of <SAMP><UL></SAMP>. The items are tagged using the
525
same <SAMP><LI></SAMP> tag. The following HTML code
536
produces this formatted output:
544
<H4><A NAME = "A1.4.1.3">Definition Lists </A></H4>
546
A definition list usually consists of alternating a term (abbreviated
547
as <SAMP>DT</SAMP>) and a definition (abbreviated as <SAMP>DD</SAMP>).
548
Web browsers generally format the definition on a new line.
551
The following is an example of a definition list:
556
<DD> NCSA, the National Center for Supercomputing Applications,
557
is located on the campus of the University of Illinois
558
at Urbana-Champaign. NCSA is one of the participants in the
559
National MetaCenter for Computational Science and Engineering.
560
<DT> Cornell Theory Center
561
<DD> CTC is located on the campus of Cornell University in Ithaca,
562
New York. CTC is another participant in the National MetaCenter
563
for Computational Science and Engineering.
568
The output looks like:
572
<DD>NCSA, the National Center for Supercomputing Applications, is located
573
on the campus of the University of Illinois at Urbana-Champaign.
574
NCSA is one of the participants in the National MetaCenter for
575
Computational Science and Engineering.
576
<DT>Cornell Theory Center
577
<DD>CTC is located on the campus of Cornell University in Ithaca, New
578
York. CTC is another participant in the National MetaCenter for
579
Computational Science and Engineering.
583
The <SAMP><DT></SAMP> and<SAMP> <DD></SAMP> entries can
584
contain multiple paragraphs (separated by <SAMP><P></SAMP> paragraph
585
tags), lists, or other definition information.
587
<H4><A NAME = "A1.4.1.4">Nested Lists</A></H4>
589
Lists can be arbitrarily nested, although in practice you probably
590
should limit the nesting to three levels. You can also have a number
591
of paragraphs, each containing a nested list, in a single list item.
594
An example nested list:
598
<LI> A few New England states:
601
<LI> New Hampshire
603
<LI> One Midwestern state:
611
The nested list is displayed as
614
<LI>A few New England states:
619
<LI>One Midwestern state:
625
<H3><A NAME = "A1.4.2">Preformatted Text</A></H3>
627
Use the<SAMP> <PRE></SAMP> tag (which stands for ``preformatted'')
628
to generate text in a fixed-width font and cause spaces, new lines,
629
and tabs to be significant. (That is, multiple spaces are displayed
630
as multiple spaces, and lines break in the same locations as in the
631
source HTML file.) This is useful for program listings. For example,
638
cfs get mysrc.f:mycfsdir/mysrc.f
639
cfs get myinfile:mycfsdir/myinfile
640
fc -02 -o mya.out mysrc.f
642
cfs save myoutfile:mycfsdir/myoutfile
653
cfs get mysrc.f:mycfsdir/mysrc.f
654
cfs get myinfile:mycfsdir/myinfile
655
fc -02 -o mya.out mysrc.f
657
cfs save myoutfile:mycfsdir/myoutfile
662
Hyperlinks can be used within <SAMP><PRE></SAMP> sections. You
663
should avoid using other HTML tags within <SAMP><PRE></SAMP>
667
Note that because <, >, and & have special meaning in HTML,
668
you have to use their escape sequences (<SAMP>&lt;</SAMP>, <SAMP>&gt;</SAMP>,
669
and <SAMP>&amp;</SAMP>, respectively) to enter these characters.
670
See the section <A HREF = "#A1.5.3">
671
Special Characters</A> for more information.
673
<H3><A NAME = "A1.4.3">Extended Quotations</A></H3>
675
Use the <SAMP><BLOCKQUOTE></SAMP> tag to include quotations in
676
a separate block on the screen. Most browsers generally indent to separate
677
it from surrounding text.
684
I still have a dream. It is a dream deeply rooted in the
685
American dream. <P>
686
I have a dream that one day this nation will rise up and
687
live out the true meaning of its creed. We hold these truths
688
to be self-evident that all men are created equal. <P>
695
I still have a dream. It is a dream deeply rooted in the American
699
I have a dream that one day this nation will rise up and live out
700
the true meaning of its creed. We hold these truths to be self-evident
701
that all men are created equal.
705
<H3><A NAME = "A1.4.4">Addresses</A></H3>
707
The <SAMP><ADDRESS></SAMP> tag is generally used to specify the
708
author of a document and a means of contacting the author (e.g., an
709
email address). This is usually the last item in a file.
712
For example, the last line of the online version of this guide is
716
A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu
722
<ADDRESS>A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu </ADDRESS>
725
<STRONG>NOTE:</STRONG> <SAMP><ADDRESS></SAMP> is <EM>not</EM>
726
used for postal addresses. See ``Forced Line Breaks'' on page 10 to
727
see how to format postal addresses.
729
<H2><A NAME = "A1.5">Character Formatting</A></H2>
731
You can code individual words or sentences with special styles. There
732
are two types of styles: logical and physical. <DFN>Logical styles</DFN>
733
tag text according to its meaning, while <DFN>physical styles</DFN>
734
specify the specific appearance of a section. For example, in the preceding
735
sentence, the words ``logical styles'' was tagged as a ``definition.''
736
The same effect (formatting those words in italics), could have been
737
achieved via a different tag that specifies merely ``put these words
740
<H3><A NAME = "A1.5.1">Physical Versus Logical: Use Logical Styles When Possible</A></H3>
742
If physical and logical styles produce the same result on the screen,
743
why are there both? We devolve, for a couple of paragraphs, into the
744
philosophy of SGML, which can be summed in a Zen-like mantra: ``Trust
748
In the ideal SGML universe, content is divorced from presentation.
749
Thus, SGML tags a level-one heading as a level-one heading, but does
750
not specify that the level-one heading should be, for instance, 24-point
751
bold Times centered on the top of a page. The advantage of this approach
752
(it's similar in concept to style sheets in many word processors) is
753
that if you decide to change level-one headings to be 20-point left-justified
754
Helvetica, all you have to do is change the definition of the level-one
755
heading in the presentation device (i.e., your World Wide Web browser).
758
The other advantage of logical tags is that they help enforce consistency
759
in your documents. It's easier to tag something as <SAMP><H1></SAMP>
760
than to remember that level-one headings are 24-point bold Times or
761
whatever. The same is true for character styles. For example, consider
762
the <SAMP><STRONG></SAMP> tag. Most browsers render it in bold
763
text. However, it is possible that a reader would prefer that these
764
sections be displayed in red instead. Logical styles offer this flexibility.
766
<H4><A NAME = "A1.5.1.1">Logical Styles</A></H4>
768
<DT><SAMP><DFN></SAMP>
769
<DD>for a word being defined. Typically displayed in italics. (<DFN>NCSA
770
</DFN><DFN>Mosaic</DFN> is a World Wide Web browser.)
771
<DT><SAMP><EM></SAMP>
772
<DD>for emphasis. Typically displayed in italics. (<EM>Watch out for
773
pick</EM><EM>pockets</EM>.)
774
<DT><SAMP><CITE></SAMP>
775
<DD>for titles of books, films, etc. Typically displayed in italics.
776
(<CITE>A </CITE><CITE>Beginner's Guide to HTML</CITE>)
777
<DT><SAMP><CODE></SAMP>
778
<DD>for snippets of computer code. Displayed in a fixed-width font.
779
(The <SAMP><stdio.h></SAMP> header file)
780
<DT> <SAMP><KBD></SAMP>
781
<DD>for user keyboard entry. Should be displayed in a bold fixed-width
782
font, but many browsers render it in the plain fixed-width font.
783
(Enter <KBD>passwd</KBD> to change your password.)
784
<DT><SAMP><SAMP></SAMP>
785
<DD>for computer status messages. Displayed in a fixed-width font.
786
(<SAMP>Segmentation fault: Core dumped.</SAMP>)
787
<DT><SAMP><STRONG></SAMP>
788
<DD>for strong emphasis. Typically displayed in bold. (<STRONG>Important</STRONG>)
790
<DT><SAMP><VAR></SAMP>
791
<DD>for a ``metasyntactic'' variable, where the user is to replace
792
the variable with a specific instance. Typically displayed in italics.
793
(<KBD>rm</KBD> <VAR>filename</VAR> deletes the file.)
796
<H4><A NAME = "A1.5.1.2">Physical Styles</A></H4>
798
<DT><SAMP><B></SAMP>
800
<DT><SAMP><I></SAMP>
802
<DT><SAMP><TT></SAMP>
803
<DD>typewriter text, e.g. fixed-width font.
806
<H3><A NAME = "A1.5.2">Using Character Tags</A></H3>
808
To apply a character style,
811
<LI>Start with <SAMP><</SAMP><VAR>tag</VAR><SAMP>></SAMP>, where<SAMP>
812
</SAMP><VAR>tag</VAR> is the desired character formatting tag,
813
to indicate the beginning of the tagged text.
814
<LI>Enter the tagged text.
815
<LI>End the passage with <SAMP></</SAMP><VAR>tag</VAR><SAMP>></SAMP>.
818
<H3><A NAME = "A1.5.3">Special Characters</A></H3>
819
<H4><A NAME = "A1.5.3.1">Escape Sequences</A></H4>
821
Four characters of the ASCII character set -- the left angle bracket
822
(<), the right angle bracket (>), the ampersand (&) and the
823
double quote (") -- have special meaning within HTML and therefore
824
cannot be used ``as is'' in text. (The angle brackets are used to indicate
825
the beginning and end of HTML tags, and the ampersand is used to indicate
826
the beginning of an escape sequence.)
829
To use one of these characters in an HTML document, you must enter
830
its <DFN>escape </DFN><DFN>sequence</DFN> instead:
833
<DT><SAMP>&lt;</SAMP>
834
<DD>the escape sequence for <
835
<DT><SAMP>&gt;</SAMP>
836
<DD>the escape sequence for >
837
<DT><SAMP>&amp;</SAMP>
838
<DD>the escape sequence for &
839
<DT><SAMP>&quot;</SAMP>
840
<DD>the escape sequence for "
844
Additional escape sequences support accented characters. For example:
847
<DT><SAMP>&ouml;</SAMP>
848
<DD>the escape sequence for a lowercase o with an umlaut: ö
850
<DT><SAMP>&ntilde;</SAMP>
851
<DD>the escape sequence for a lowercase n with an tilde: ñ
852
<DT><SAMP>&Egrave;</SAMP>
853
<DD>the escape sequence for an uppercase E with a grave accent: È
858
<A HREF = "http://www.w3.org/hypertext/WWW/MarkUp/ISOlat1.html"> A full
859
list of supported characters</A> is available.
862
<STRONG>NOTE:</STRONG> Unlike the rest of HTML, the escape sequences
863
are case sensitive. You cannot, for instance, use &LT; instead
866
<H4><A NAME = "A1.5.3.2">Forced Line Breaks</A></H4>
868
The <SAMP><BR></SAMP> tag forces a line break with no extra space
869
between lines. (By contrast, most browsers format the <SAMP><P></SAMP>
870
paragraph tag with an additional blank line to more clearly indicate
871
the beginning the new paragraph.)
874
One use of <SAMP><BR></SAMP> is in formatting addresses:
877
National Center for Supercomputing Applications<BR>
878
605 East Springfield Avenue<BR>
879
Champaign, Illinois 61820-5518<BR>
882
<H4><A NAME = "A1.5.3.3">Horizontal Rules</A></H4>
884
The <SAMP><HR> tag </SAMP>produces a horizontal line the width
885
of the browser window.
887
<H2><A NAME = "A1.6">In-line Images</A></H2>
889
Most Web browsers can display in-line images (that is, images next
890
to text) that are in X Bitmap (XBM) or GIF format. Each image takes
891
time to process and slows down the initial display of the document,
892
so generally you should not include too many or overly large images.
895
To include an in-line image, use
898
<IMG SRC=<VAR>image_URL</VAR>>
902
where <VAR>image_URL</VAR> is the URL of the image file. The syntax
903
for <SAMP>IMG SRC </SAMP>URLs is identical to that used in an anchor
904
<SAMP>HREF</SAMP>. If the image file is a GIF file, then the filename
905
part of <VAR>image_URL </VAR><STRONG>must</STRONG> end with <SAMP>.gif</SAMP>.
906
Filenames of X Bitmap images must end with <SAMP>.xbm</SAMP>.
909
<IMG SRC = "Graphics/RandomPic.gif" ALT = "">By default the bottom
910
of an image is aligned with the text as shown in this paragraph.
913
<IMG SRC = "Graphics/RandomPic.gif" ALT = "" ALIGN = TOP>
914
Add the <SAMP>ALIGN=TOP</SAMP>
915
option if you want the browser to align adjacent text with the top
916
of the image as shown in this paragraph. The full in-line image tag
917
with the top alignment is:
920
<IMG ALIGN=top SRC=<VAR>image_URL</VAR>>
924
<IMG SRC = "Graphics/RandomPic.gif" ALT = "" ALIGN = MIDDLE>
925
<SAMP>ALIGN=MIDDLE</SAMP>
926
aligns the text with the center of the image.
928
<H3><A NAME = "A1.6.1">Alternate Text for Browsers That Can't Display Images</A></H3>
930
Some World Wide Web browsers, primarily those that run on VT100 terminals,
931
cannot display images. The <SAMP>ALT</SAMP> option allows you to specify
932
text to be displayed when an image cannot be. For example:
935
<IMG SRC = "UpArrow.gif" ALT = "Up">
939
where <SAMP>UpArrow.gif </SAMP>is the picture of an upward pointing
940
arrow. With NCSA Mosaic and other graphics-capable viewers, the user
941
sees the up arrow graphic. With a VT100 browser, such as lynx, the
942
user sees the word ``Up.''
944
<H2><A NAME = "A1.7">External Images, Sounds, and Animations</A></H2>
946
You may want to have an image open as a separate document when a user
947
activates a link on either a word or a smaller, in-line version of
948
the image included in your document. This is considered an external
949
image and is useful if you do not wish to slow down the loading of
950
the main document with large in-line images.
953
To include a reference to an external image, use
956
<A HREF = <VAR>image_URL</VAR>>link anchor</A>
960
Use the same syntax is for links to external animations and sounds.
961
The only difference is the file extension of the linked file. For example,
964
<SAMP><A HREF = "QuickTimeMovie.mov">link anchor</A></SAMP>
967
specifies a link to a QuickTime movie. Some common file types and their
971
<DT><STRONG>File Type</STRONG>
972
<DD><STRONG>Extension</STRONG>
974
<DD><SAMP>.txt</SAMP>
976
<DD><SAMP>.html</SAMP>
978
<DD><SAMP>.gif</SAMP>
980
<DD><SAMP>.tiff</SAMP>
982
<DD><SAMP>.xbm</SAMP>
984
<DD><SAMP>.jpg</SAMP> or <SAMP>.jpeg</SAMP>
988
<DD><SAMP>.aiff</SAMP>
992
<DD><SAMP>.mov</SAMP>
994
<DD><SAMP>.mpeg</SAMP> or <SAMP>.mpg</SAMP>
998
Make sure your intended audience has the necessary viewers. Most UNIX
999
workstations, for instance, cannot view QuickTime movies.
1001
<H2><A NAME = "A1.8">Troubleshooting</A></H2>
1002
<H3><A NAME = "A1.8.1">Avoid Overlapping Tags</A></H3>
1004
Consider this snippet of HTML:
1007
<B>This is an example of <DFN>overlapping</B> HTML tags.</DFN>
1011
The word ``overlapping'' is contained within both the <SAMP><B></SAMP>
1012
and <SAMP><DFN></SAMP> tags. How does the browser format it?
1013
You won't know until you look, and different browsers will likely react
1014
differently. In general, avoid overlapping tags.
1016
<H3><A NAME = "A1.8.2">Embed Anchors and Character Tags, But Nothing Else</A></H3>
1018
It is acceptable to embed anchors within another HTML element:
1021
<H1><A HREF = "Destination.html">My heading</A></H1>
1025
<EM>Do not</EM> embed a heading or another HTML element within an anchor:
1028
<A HREF = "Destination.html">
1029
<H1>My heading</H1>
1034
Although most browsers currently handle this example, it is forbidden
1035
by the official HTML and HTML+ specifications, and will not work with
1039
Character tags modify the appearance of other tags:
1042
<UL><LI><B>A bold list item</B>
1044
<LI><I>An italic list item</I>
1049
However, avoid embedding other types of HTML element tags. For example,
1050
it is tempting to embed a heading within a list, in order to make the
1054
<UL><LI><H1>A large heading</H1>
1056
<LI><H2>Something slightly smaller</H2>
1061
Although some browsers, such as NCSA Mosaic for the X Window System,
1062
format this construct quite nicely, it is unpredictable (because it
1063
is undefined) what other browsers will do. For compatibility with all
1064
browsers, avoid these kinds of constructs.
1067
What's the difference between embedding a <SAMP><B></SAMP> within
1068
a <SAMP><LI></SAMP> tag as opposed to embedding a <SAMP><H1></SAMP>
1069
within a <SAMP><LI></SAMP>? This is again a question of SGML.
1070
The semantic meaning of <SAMP><H1></SAMP> is that it's the main
1071
heading of a document and that it should be followed by the content
1072
of the document.Thus it doesn't make sense to find a <SAMP><H1></SAMP>
1076
Character formatting tags also are generally not additive. You might
1080
<B><I>some text</I></B>
1084
would produce bold-italic text. On some browsers it does; other browsers
1085
interpret only the innermost tag (here, the italics).
1087
<H3><A NAME = "A1.8.3">Check Your Links</A></H3>
1089
When an <SAMP><IMG></SAMP> tag points at an image that does not
1090
exist, a dummy image is substituted. When this happens, make sure that
1091
the referenced image does in fact exist, that the hyperlink has the
1092
correct information in the URL, and that the file permission is set
1093
appropriately (world-readable).
1095
<H2><A NAME = "A1.9">A Longer Example</A></H2>
1097
Here is a longer example of an HTML document:
1101
<TITLE>A Longer Example</TITLE>
1104
<H1>A Longer Example</H1>
1105
This is a simple HTML document. This is the first
1106
paragraph. <P>
1107
This is the second paragraph, which shows special effects. This is a
1108
word in <I>italics</I>. This is a word in <B>bold</B>.
1109
Here is an in-lined GIF image: <IMG SRC = "myimage.gif">.
1111
This is the third paragraph, which demonstrates links. Here is
1112
a hypertext link from the word <A HREF = "subdir/myfile.html">foo</A>
1113
to a document called "subdir/myfile.html". (If you
1114
try to follow this link, you will get an error screen.) <P>
1115
<H2>A second-level header</H2>
1116
Here is a section of text that should display as a
1117
fixed-width font: <P>
1119
On the stiff twig up there
1120
Hunches a wet black rook
1121
Arranging and rearranging its feathers in the rain ...
1123
This is a unordered list with two items: <P>
1125
<LI> cranberries
1126
<LI> blueberries
1128
This is the end of my example document. <P>
1129
<ADDRESS>Me (me@mycomputer.univ.edu)</ADDRESS>
1133
<A HREF=LongerExample.html>Click here</A> to see the formatted version.
1136
In addition to tags already discussed, this example also uses the <SAMP><HEAD>
1137
... </HEAD> </SAMP>and <SAMP><BODY> ... </BODY></SAMP>
1138
tags, which separate the document into introductory information about
1139
the document and the main text of the document. These tags don't change
1140
the appearance of the formatted document at all, but are useful for
1141
several purposes (for example, NCSA Mosaic for Macintosh 2.0, for example,
1142
allows you to browse just the header portion of document before deciding
1143
whether to download the rest), and it is recommended that you use these
1146
<H2><A NAME = "A1.10">For More Information</A></H2>
1148
This guide is only an introduction to HTML and not a comprehensive
1149
reference. Below are additional sources of information.
1151
<H3><A NAME = "A1.10.1">Fill-out Forms</A></H3>
1153
One major feature not discussed here is fill-out forms, which allows
1154
users to return information to the World Wide Web server. For information
1155
on fill-out forms, look at this
1156
<A HREF = "/SDG/Software/Mosaic/Docs/fill-out-forms/overview.html"> Fill-out
1159
<H3><A NAME = "A1.10.2">Style Guides</A></H3>
1161
The following offer advice on how to write ``good'' HTML:
1164
<LI><A HREF = "http://www.willamette.edu/html-composition/strict-html.html">
1165
<CITE>Composing Good HTML</CITE></A>
1167
<A HREF = "http://www.w3.org/hypertext/WWW/Provider/Style/Introduction.html">
1168
CERN's style guide for online hypertext</A>
1171
<H3><A NAME = "A1.10.3">Other Introductory Documents</A></H3>
1172
These cover similar information as this guide:
1174
<LI><A HREF = "http://www.ucc.ie/info/net/htmldoc.html">
1175
<CITE>How to Write HTML Files</CITE></A>
1176
<LI><A HREF = "http://melmac.corp.harris.com/about_html.html">
1177
<CITE>Introduction to HTML</CITE></A>
1180
<H3><A NAME = "A1.10.4">Additional References</A></H3>
1182
<LI><A HREF = "http://kuhttp.cc.ukans.edu/lynx_help/HTML_quick.html">
1183
<CITE>The HTML Quick Reference Guide</CITE></A>,
1184
which provides a comprehensive listing of HTML codes
1185
<LI><A HREF = "http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html">
1186
The official HTML specification</A>
1187
<LI><A HREF = "http://www.w3.org/hypertext/WWW/MarkUp/SGML.html">A
1188
description of SGML</A>, the Standard Generalized Markup Language
1190
= "http://www.ietf.cnri.reston.va.us/html.charters/html-charter.html">
1191
<cite>The HTML Working Group of the IETF</cite></A>.
1195
National Center for Supercomputing Applications / pubs@ncsa.uiuc.edu
added
removed
html/htmlprimer.htm
