1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Draft//EN">
<HTML>
<HEAD>
<TITLE>A Beginner's Guide to HTML</TITLE>
</HEAD>
<BODY>
<H1>A Beginner's Guide to HTML</H1>
<P>
This is a primer for producing documents in HTML, the markup language
used by the World Wide Web.
<UL>
<LI><A HREF="#A1.1">Acronym Expansion</A>
<LI><A HREF="#A1.2">What This Primer Doesn't Cover</A>
<LI><A HREF="#A1.3">Creating HTML Documents</A>
<UL>
<LI><A HREF="#A1.3.1">The Minimal HTML Document</A>
<LI><A HREF="#A1.3.2">Basic Markup Tags</A>
<UL>
<LI><A HREF="#A1.3.2.1">Titles</A>
<LI><A HREF="#A1.3.2.2">Headings</A>
<LI><A HREF="#A1.3.2.3">Paragraphs</A>
</UL>
<LI><A HREF="#A1.3.3">Linking to Other Documents</A>
<UL>
<LI><A HREF="#A1.3.3.1">Relative Links Versus Absolute Pathnames</A>
<LI><A HREF="#A1.3.3.2">Uniform Resource Locator</A>
<LI><A HREF="#A1.3.3.3">Anchors to Specific Sections in Other Documents</A>
<LI><A HREF="#A1.3.3.4">Anchors to Specific Sections Within
the Current Document</A>
</UL>
</UL>
<LI><A HREF="#A1.4">Additional Markup Tags</A>
<UL>
<LI><A HREF="#A1.4.1">Lists</A>
<UL>
<LI><A HREF="#A1.4.1.1">Unnumbered Lists</A>
<LI><A HREF="#A1.4.1.2">Numbered Lists</A>
<LI><A HREF="#A1.4.1.3">Definition Lists</A>
<LI><A HREF="#A1.4.1.4">Nested Lists</A>
</UL>
<LI><A HREF="#A1.4.2">Preformatted Text</A>
<LI><A HREF="#A1.4.3">Extended Quotes</A>
<LI><A HREF="#A1.4.4">Addresses</A>
</UL>
<LI><A HREF="#A1.5">Character Formatting</A>
<UL>
<LI><A HREF="#A1.5.1">Physical Versus Logical:
Use Logical Tags When Possible</A>
<UL>
<LI><A HREF="#A1.5.1.1">Logical Styles</A>
<LI><A HREF="#A1.5.1.2">Physical Styles</A>
</UL>
<LI><A HREF="#A1.5.2">Using Character Tags</A>
<LI><A HREF="#A1.5.3">Special Characters</A>
<UL>
<LI><A HREF="#A1.5.3.1">Escape Sequences</A>
<LI><A HREF="#A1.5.3.2">Forced Line Breaks</A>
<LI><A HREF="#A1.5.3.3">Horizontal Rules</A>
</UL>
</UL>
<LI><A HREF="#A1.6">In-line Images</A>
<UL>
<LI><A HREF="#A1.6.1">Alternate Text for Viewers
That Can't Display Images</A>
</UL>
<LI><A HREF="#A1.7">External Images, Sounds, and Animations</A>
<LI><A HREF="#A1.8">Troubleshooting</A>
<UL>
<LI><A HREF="#A1.8.1">Avoid Overlapping Tags</A>
<LI><A HREF="#A1.8.2">Embed Anchors and Character Tags,
But Not Anything Else</A>
<LI><A HREF="#A1.8.3">Check Your Links</A>
</UL>
<LI><A HREF="#A1.9">A Longer Example</A>
<LI><A HREF="#A1.10">For More Information</A>
<UL>
<LI><A HREF="#A1.10.1">Fill-out Forms</A>
<LI><A HREF="#A1.10.2">Style Guides</A>
<LI><A HREF="#A1.10.3">Other Introductory Documents</A>
<LI><A HREF="#A1.10.4">Additional References</A>
</UL>
</UL>
<H2><A NAME = "A1.1">Acronym Expansion</A></H2>
<DL COMPACT>
<DT><I>WWW</I>
<DD>World Wide Web (or Web, for short).
<DT><I>SGML</I>
<DD>Standard Generalized Markup Language -- this is a standard for
describing markup languages.
<DT><CITE>DTD</CITE>
<DD>Document Type Definition -- this is a specific markup language,
written using SGML.
<DT><CITE>HTML</CITE>
<DD>HyperText Markup Language -- HTML is a SGML DTD. In practical
terms, HTML is a collection of styles (indicated by markup tags)
that define the various components of a World Wide Web document.
HTML was invented by Tim Berners-Lee while at CERN. He is now director
of the W3 Consortium.
</DL>
<H2><A NAME = "A1.2">What This Primer Doesn't Cover</A></H2>
<P>
This primer assumes that you have:
<UL>
<LI>at least a passing knowledge of how to use NCSA Mosaic or some
other Web browser
<LI>a general understanding of how Web servers and client browsers
work
<LI>access to a Web server for which you would like to produce HTML
documents, or that you wish to produce HTML documents for personal
use
</UL>
<H2><A NAME = "A1.3">Creating HTML Documents</A></H2>
<P>
HTML documents are in plain (also known as ASCII) text format and can
be created using any text editor (e.g., Emacs or vi on UNIX machines).
A couple of Web browsers (tkWWW for X Window System machines and CERN's
Web browser for NeXT computers) include rudimentary HTML editors in
a WYSIWYG environment. There are also some WYSIWIG editors available
now (e.g. HotMetal for Sun Sparcstations, HTML Edit for Macintoshes).
You may wish to try one of them first before delving into the details
of HTML.
<BLOCKQUOTE>
<I>You can preview a document in progress with NCSA Mosaic (and
some </I><I>other Web browsers). Open it with the </I><B>Open Local
</B><I>command under the </I><B>File</B><I> menu. </I>
<P>
<I>After you edit the source HTML file, save the changes. Return
to NCSA </I><I>Mosaic and </I><B>Reload</B><I> the document. The
changes are reflected in the on-</I><I>screen display.</I>
</BLOCKQUOTE>
<H3><A NAME = "A1.3.1">The Minimal HTML Document</A></H3>
<P>
Here is a bare-bones example of HTML:
<PRE>
<TITLE>The simplest HTML example</TITLE>
<H1>This is a level-one heading</H1>
Welcome to the world of HTML.
This is one paragraph.<P>
And this is a second.<P>
</PRE>
<A HREF=MinimalHTML.html>Click here</A> to see the formatted version
of the example.
<P>
HTML uses markup tags to tell the Web browser how to display the text.
The above example uses:
<UL>
<LI>the <SAMP><TITLE></SAMP> tag (and corresponding <SAMP></TITLE></SAMP>
tag), which specifies the title of the document
<LI>the <SAMP><H1></SAMP> header tag (and corresponding <SAMP></H1></SAMP>)
<LI>the <SAMP><P></SAMP> paragraph-separator tag
</UL>
<P>
HTML tags consist of a left angle bracket (<SAMP><</SAMP>), (a ``less
than'' symbol to mathematicians), followed by name of the tag and closed
by a right angular bracket (<SAMP>></SAMP>). Tags are usually paired,
e.g. <SAMP><H1></SAMP> and <SAMP></H1></SAMP>. The ending
tag looks just like the starting tag except a slash (/) precedes the
text within the brackets. In the example, <SAMP><H1></SAMP> tells
the Web browser to start formatting a level-one heading; <SAMP></H1></SAMP>
tells the browser that the heading is complete.
<P>
The primary exception to the pairing rule is the <SAMP><P></SAMP>
tag. There is no such thing as <SAMP></P></SAMP>.
<P>
<STRONG>NOTE:</STRONG><I> HTML is not case sensitive. </I><SAMP><title></SAMP><I>
is equivalent to </I><SAMP><TITLE></SAMP><I> or </I><SAMP><TiTlE></SAMP><I>.
</I>
<P>
Not all tags are supported by all World Wide Web browsers. If a browser
does not support a tag, it just ignores it.
<H3><A NAME = "A1.3.2">Basic Markup Tags</A></H3>
<H4><A NAME = "A1.3.2.1">Title</A></H4>
<P>
Every HTML document should have a title. A title is generally displayed
separately from the document and is used primarily for document identification
in other contexts (e.g., a WAIS search). Choose about half a dozen
words that describe the document's purpose.
<BLOCKQUOTE>
<I>In the X Window System and Microsoft Windows versions of NCSA
</I><I>Mosaic, the </I><B>Document Title</B><I> field is at the
top of the screen just below the </I><I>pulldown menus. In NCSA
Mosaic for Macintosh, text tagged as </I><SAMP><TITLE></SAMP>
<I>appears as the window title.</I>
</BLOCKQUOTE>
<H4><A NAME = "A1.3.2.2">Headings</A></H4>
<P>
HTML has six levels of headings, numbered 1 through 6, with 1 being
the most prominent. Headings are displayed in larger and/or bolder
fonts than normal body text. The first heading in each document should
be tagged <SAMP><H1></SAMP>. The syntax of the heading tag is:
<P>
<SAMP><H</SAMP><VAR>y</VAR><SAMP>></SAMP><VAR>Text of heading</VAR><SAMP>
</H</SAMP><VAR>y</VAR><SAMP> ></SAMP>
<P>
where <VAR>y</VAR> is a number between 1 and 6 specifying the level
of the heading.
<P>
For example, the coding for the ``Headings'' section heading above
is
<PRE>
<H3>Headings</H3>
</PRE>
<H5><A NAME = "A1.3.2.2.1">Title versus first heading</A></H5>
<P>
In many documents, the first heading is identical to the title. For
multipart documents, the text of the first heading should be suitable
for a reader who is already browsing related information (e.g., a chapter
title), while the title tag should identify the document in a wider
context (e.g., include both the book title and the chapter title, although
this can sometimes become overly long).
<H4><A NAME = "A1.3.2.3">Paragraphs</A></H4>
<P>
Unlike documents in most word processors, carriage returns in HTML
files aren't significant. Word wrapping can occur at any point in your
source file, and multiple spaces are collapsed into a single space.
(There are couple of exceptions; space following a <SAMP><P></SAMP>
or <SAMP><H</SAMP><VAR>y</VAR><SAMP>></SAMP> tag, for example,
is ignored.) Notice that in the bare-bones example, the first paragraph
is coded as
<PRE>
Welcome to HTML.
This is the first paragraph. <P>
</PRE>
<P>
In the source file, there is a line break between the sentences. A
Web browser ignores this line break and starts a new paragraph only
when it reaches a <SAMP><P></SAMP> tag.
<P>
<STRONG>Important:</STRONG> You must separate paragraphs with <SAMP><P></SAMP>.
The browser ignores any indentations or blank lines in the source text.
HTML relies almost entirely on the tags for formatting instructions,
and without the <SAMP><P></SAMP> tags, the document becomes one
large paragraph. (The exception is text tagged as ``preformatted,''
which is explained below.) For instance, the following would produce
identical output as the first bare-bones HTML example:
<PRE>
<TITLE>The simplest HTML example</TITLE><H1>This is a level
one heading</H1>Welcome to the world of HTML. This is one
paragraph.<P>And this is a second.<P>
</PRE>
<P>
However, to preserve readability in HTML files, headings should be
on separate lines, and paragraphs should be separated by blank lines
(in addition to the <SAMP><P></SAMP> tags).
<BLOCKQUOTE>
<I>NCSA Mosaic handles <P> by ending the current paragraph
and insert</I><I>ing a blank line. </I>
</BLOCKQUOTE>
<P>
In HTML+, a successor to HTML currently in development, <SAMP><P></SAMP>
becomes a ``container'' of text, just as the text of a level-one heading
is ``contained'' within<SAMP><H1> ... </SAMP><SAMP></H1></SAMP>:
<PRE>
<P>
This is a paragraph in HTML+.
</P>
</PRE>
<P>
The difference is that the <SAMP></P></SAMP> closing tag can
always be omitted. (That is, if a browser sees a <SAMP><P></SAMP>,
it knows that there must be an implied <SAMP></P></SAMP> to end
the previous paragraph.) In other words, in HTML+, <SAMP><P></SAMP>
is a beginning-of-paragraph marker.
<P>
The advantage of this change is that you will be able to specify formatting
options for a paragraph. For example, in HTML+, you will be able to
center a paragraph by coding
<PRE>
<SAMP><P ALIGN=CENTER></SAMP>
This is a centered paragraph. This is HTML+, so you can't do it yet.
</PRE>
<P>
This change won't effect any documents you write now, and they will
continue to look just the same with HTML+ browsers.
<H3><A NAME = "A1.3.3">Linking to Other Documents</A></H3>
<P>
The chief power of HTML comes from its ability to link regions of text
(and also images) to another document. The browser highlights these
regions (usually with color and/or underlines) to indicate that they
are hypertext links (often shortened to <DFN>hyperlinks</DFN> or simply
<DFN>links</DFN>).
<P>
HTML's single hypertext-related tag is <SAMP><A></SAMP>, which
stands for <DFN>anchor</DFN>. To include an anchor in your document:
<OL>
<LI>Start the anchor with <SAMP><A</SAMP> . (There's a space after
the <CODE>A</CODE>.)
<LI>Specify the document that's being pointed to by entering the parameter
<SAMP>HREF="</SAMP><VAR>filename</VAR><SAMP>"</SAMP>
followed by a closing right angle bracket: <SAMP>></SAMP>
<LI>Enter the text that will serve as the hypertext link in the current
document.
<LI>Enter the ending anchor tag: <SAMP></A></SAMP>.
</OL>
<P>
Here is an sample hypertext reference:
<PRE>
<A HREF="MaineStats.html">Maine</A>
</PRE>
<P>
This entry makes the word ``Maine'' the hyperlink to the document <SAMP>MaineStats.html</SAMP>,
which is in the same directory as the first document. You can link
to documents in other directories by specifying the <DFN>relative path</DFN>
from the current document to the linked document. For example, a link
to a file <SAMP>NJStats.html</SAMP> located in the subdirectory <SAMP>AtlanticStates</SAMP>
would be:
<PRE>
<A HREF="AtlanticStates/NJStats.html">New Jersey</A>
</PRE>
<P>
These are called <VAR>relative links</VAR>. You can also use the absolute
pathname of the file if you wish. Pathnames use the standard UNIX syntax.
<H4><A NAME = "A1.3.3.1">Relative Links Versus Absolute Pathnames</A></H4>
<P>
In general, you should use relative links, because
<OL>
<LI>You have less to type.
<LI>It's easier to move a group of documents to another location, because
the relative path names will still be valid.
</OL>
<P>
However, use absolute pathnames when linking to documents that are
not directly related. For example, consider a group of documents that
comprise a user manual. Links within this group should be relative
links. Links to other documents (perhaps a reference to related software)
should use full path names. This way, if you move the user manual to
a different directory, none of the links would have to be updated.
<H4><A NAME = "A1.3.3.2">Uniform Resource Locator</A></H4>
<P>
The World Wide Web uses Uniform Resource Locators (URLs) to specify
the location of files on other servers. A URL includes the type of
resource being accessed (e.g., gopher, WAIS), the address of the server,
and the location of the file. The syntax is:
<P>
<VAR>scheme</VAR><SAMP>://</SAMP><VAR>host.domain</VAR><SAMP>[:</SAMP><VAR>port</VAR><SAMP>]/</SAMP><VAR>path</VAR><SAMP>/</SAMP><VAR>filename</VAR>
<P>
where <VAR>scheme</VAR> is one of
<DL COMPACT>
<DT><SAMP>file</SAMP>
<DD>
<DT>
<DD>a file on your local system, or a file on an anonymous FTP server
<DT><SAMP>http</SAMP>
<DD>a file on a World Wide Web server
<DT><SAMP>gopher</SAMP>
<DD>a file on a Gopher server
<DT><SAMP>WAIS</SAMP>
<DD>a file on a WAIS server
<DT><SAMP>news</SAMP>
<DD>an Usenet newsgroup
<DT><SAMP>telnet</SAMP>
<DD>a connection to a Telnet-based service
</DL>
<P>
The <VAR>port</VAR> number can generally be omitted. (That means unless
someone tells you otherwise, leave it out.)
<P>
For example, to include a link to this primer in your document, you
would use
<PRE>
<A HREF = "http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html">
NCSA's Beginner's Guide to HTML</A>
</PRE>
<P>
This would make the text ``NCSA's Beginner's Guide to HTML'' a hyperlink
to this document.
<P>
For more information on URLs, look at
<UL>
<LI><A HREF = "http://www.w3.org/hypertext/WWW/Addressing/Addressing.html">
<CITE>WWW Names and Addresses, URIs, URLs, URNs</CITE></A>, written
by people at CERN
<LI><A HREF = "http://www.ncsa.uiuc.edu/demoweb/url-primer.html">
<CITE>A Beginner's Guide to URLs</CITE></A>, located on the NCSA Mosaic
<B>Help</B> menu
</UL>
<H4><A NAME = "A1.3.3.3">Links to Specific Sections in Other Documents</A></H4>
<P>
Anchors can also be used to move to a particular section in a document.
Suppose you wish to set a link from document A and a specific section
in document B. (Call this file <SAMP>documentB.html</SAMP>.) First
you need to set up a <DFN>named anchor</DFN> in document B. For example,
to set up an anchor named ``Jabberwocky'' to document B, enter
<PRE>
Here's <A NAME = "Jabberwocky">some text</a>
</PRE>
<P>
Now when you create the link in document A, include not only the filename,
but also the named anchor, separated by a hash mark (#).
<PRE>
This is my <A HREF = "documentB.html#Jabberwocky">link</A> to document B.
</PRE>
<P>
Now clicking on the word ``link'' in document A sends the reader directly
to the words ``some text'' in document B.
<H4><A NAME = "A1.3.3.4">Links to Specific Sections Within the Current Document</A></H4>
<P>
The technique is exactly the same except the filename is omitted.
<P>
For example, to link to the Jabberwocky anchor from within the same
file (Document B), use
<PRE>
This is <A HREF = "#Jabberwocky">Jabberwocky link</A> from within Document B.
</PRE>
<H2><A NAME = "A1.4">Additional Markup Tags</A></H2>
<P>
The preceding is sufficient to produce simple HTML documents. For more
complex documents, HTML has tags for several types of lists, preformatted
sections, extended quotations, character formatting, and other items.
<H3><A NAME = "A1.4.1">Lists</A></H3>
<P>
HTML supports unnumbered, numbered, and definition lists.
<H4><A NAME = "A1.4.1.1">Unnumbered Lists</A></H4>
<P>
To make an unnumbered list,
<OL>
<LI>Start with an opening list <SAMP><UL></SAMP> tag.
<LI>Enter the <SAMP><LI></SAMP> tag followed by the individual
item. (No closing <SAMP></LI></SAMP> tag is needed.)
<LI>End with a closing list <SAMP></UL></SAMP> tag.
</OL>
<P>
Below an example two-item list:
<PRE>
<UL>
<LI> apples
<LI> bananas
</UL>
</PRE>
<P>
The output is:
<UL>
<LI>apples
<LI>bananas
</UL>
<P>
The <SAMP><LI></SAMP> items can contain multiple paragraphs.
Just separate the paragraphs with the <SAMP><P></SAMP> paragraph
tags.
<H4><A NAME = "A1.4.1.2">Numbered Lists</A></H4>
<P>
A numbered list (also called an ordered list, from which the tag name
derives) is identical to an unnumbered list, except it uses <SAMP><OL></SAMP>
instead of <SAMP><UL></SAMP>. The items are tagged using the
same <SAMP><LI></SAMP> tag. The following HTML code
<PRE>
<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>
</PRE>
<P>
produces this formatted output:
<OL>
<LI>oranges
<LI>peaches
<LI>grapes
</OL>
<H4><A NAME = "A1.4.1.3">Definition Lists </A></H4>
<P>
A definition list usually consists of alternating a term (abbreviated
as <SAMP>DT</SAMP>) and a definition (abbreviated as <SAMP>DD</SAMP>).
Web browsers generally format the definition on a new line.
<P>
The following is an example of a definition list:
<PRE>
<DL>
<DT> NCSA
<DD> NCSA, the National Center for Supercomputing Applications,
is located on the campus of the University of Illinois
at Urbana-Champaign. NCSA is one of the participants in the
National MetaCenter for Computational Science and Engineering.
<DT> Cornell Theory Center
<DD> CTC is located on the campus of Cornell University in Ithaca,
New York. CTC is another participant in the National MetaCenter
for Computational Science and Engineering.
</DL>
</PRE>
<P>
The output looks like:
<DL COMPACT>
<DT>NCSA
<DD>NCSA, the National Center for Supercomputing Applications, is located
on the campus of the University of Illinois at Urbana-Champaign.
NCSA is one of the participants in the National MetaCenter for
Computational Science and Engineering.
<DT>Cornell Theory Center
<DD>CTC is located on the campus of Cornell University in Ithaca, New
York. CTC is another participant in the National MetaCenter for
Computational Science and Engineering.
</DL>
<P>
The <SAMP><DT></SAMP> and<SAMP> <DD></SAMP> entries can
contain multiple paragraphs (separated by <SAMP><P></SAMP> paragraph
tags), lists, or other definition information.
<H4><A NAME = "A1.4.1.4">Nested Lists</A></H4>
<P>
Lists can be arbitrarily nested, although in practice you probably
should limit the nesting to three levels. You can also have a number
of paragraphs, each containing a nested list, in a single list item.
<P>
An example nested list:
<PRE>
<UL>
<LI> A few New England states:
<UL>
<LI> Vermont
<LI> New Hampshire
</UL>
<LI> One Midwestern state:
<UL>
<LI> Michigan
</UL>
</UL>
</PRE>
<P>
The nested list is displayed as
<UL>
<LI>A few New England states:
<UL>
<LI>Vermont
<LI>New Hampshire
</UL>
<LI>One Midwestern state:
<UL>
<LI>Michigan
</UL>
</UL>
<H3><A NAME = "A1.4.2">Preformatted Text</A></H3>
<P>
Use the<SAMP> <PRE></SAMP> tag (which stands for ``preformatted'')
to generate text in a fixed-width font and cause spaces, new lines,
and tabs to be significant. (That is, multiple spaces are displayed
as multiple spaces, and lines break in the same locations as in the
source HTML file.) This is useful for program listings. For example,
the following lines
<PRE>
<PRE>
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
</PRE>
</PRE>
<P>
display as
<PRE>
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
</PRE>
<P>
Hyperlinks can be used within <SAMP><PRE></SAMP> sections. You
should avoid using other HTML tags within <SAMP><PRE></SAMP>
sections, however.
<P>
Note that because <, >, and & have special meaning in HTML,
you have to use their escape sequences (<SAMP>&lt;</SAMP>, <SAMP>&gt;</SAMP>,
and <SAMP>&amp;</SAMP>, respectively) to enter these characters.
See the section <A HREF = "#A1.5.3">
Special Characters</A> for more information.
<H3><A NAME = "A1.4.3">Extended Quotations</A></H3>
<P>
Use the <SAMP><BLOCKQUOTE></SAMP> tag to include quotations in
a separate block on the screen. Most browsers generally indent to separate
it from surrounding text.
<P>
An example:
<PRE>
<BLOCKQUOTE>
I still have a dream. It is a dream deeply rooted in the
American dream. <P>
I have a dream that one day this nation will rise up and
live out the true meaning of its creed. We hold these truths
to be self-evident that all men are created equal. <P>
</BLOCKQUOTE>
</PRE>
<P>
The result is:
<BLOCKQUOTE>
I still have a dream. It is a dream deeply rooted in the American
dream.
<P>
I have a dream that one day this nation will rise up and live out
the true meaning of its creed. We hold these truths to be self-evident
that all men are created equal.
</BLOCKQUOTE>
<H3><A NAME = "A1.4.4">Addresses</A></H3>
<P>
The <SAMP><ADDRESS></SAMP> tag is generally used to specify the
author of a document and a means of contacting the author (e.g., an
email address). This is usually the last item in a file.
<P>
For example, the last line of the online version of this guide is
<PRE>
<ADDRESS>
A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu
</ADDRESS>
</PRE>
<P>
The result is
<ADDRESS>A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu </ADDRESS>
<P>
<STRONG>NOTE:</STRONG> <SAMP><ADDRESS></SAMP> is <EM>not</EM>
used for postal addresses. See ``Forced Line Breaks'' on page 10 to
see how to format postal addresses.
<H2><A NAME = "A1.5">Character Formatting</A></H2>
<P>
You can code individual words or sentences with special styles. There
are two types of styles: logical and physical. <DFN>Logical styles</DFN>
tag text according to its meaning, while <DFN>physical styles</DFN>
specify the specific appearance of a section. For example, in the preceding
sentence, the words ``logical styles'' was tagged as a ``definition.''
The same effect (formatting those words in italics), could have been
achieved via a different tag that specifies merely ``put these words
in italics.''
<H3><A NAME = "A1.5.1">Physical Versus Logical: Use Logical Styles When Possible</A></H3>
<P>
If physical and logical styles produce the same result on the screen,
why are there both? We devolve, for a couple of paragraphs, into the
philosophy of SGML, which can be summed in a Zen-like mantra: ``Trust
your browser.''
<P>
In the ideal SGML universe, content is divorced from presentation.
Thus, SGML tags a level-one heading as a level-one heading, but does
not specify that the level-one heading should be, for instance, 24-point
bold Times centered on the top of a page. The advantage of this approach
(it's similar in concept to style sheets in many word processors) is
that if you decide to change level-one headings to be 20-point left-justified
Helvetica, all you have to do is change the definition of the level-one
heading in the presentation device (i.e., your World Wide Web browser).
<P>
The other advantage of logical tags is that they help enforce consistency
in your documents. It's easier to tag something as <SAMP><H1></SAMP>
than to remember that level-one headings are 24-point bold Times or
whatever. The same is true for character styles. For example, consider
the <SAMP><STRONG></SAMP> tag. Most browsers render it in bold
text. However, it is possible that a reader would prefer that these
sections be displayed in red instead. Logical styles offer this flexibility.
<H4><A NAME = "A1.5.1.1">Logical Styles</A></H4>
<DL COMPACT>
<DT><SAMP><DFN></SAMP>
<DD>for a word being defined. Typically displayed in italics. (<DFN>NCSA
</DFN><DFN>Mosaic</DFN> is a World Wide Web browser.)
<DT><SAMP><EM></SAMP>
<DD>for emphasis. Typically displayed in italics. (<EM>Watch out for
pick</EM><EM>pockets</EM>.)
<DT><SAMP><CITE></SAMP>
<DD>for titles of books, films, etc. Typically displayed in italics.
(<CITE>A </CITE><CITE>Beginner's Guide to HTML</CITE>)
<DT><SAMP><CODE></SAMP>
<DD>for snippets of computer code. Displayed in a fixed-width font.
(The <SAMP><stdio.h></SAMP> header file)
<DT> <SAMP><KBD></SAMP>
<DD>for user keyboard entry. Should be displayed in a bold fixed-width
font, but many browsers render it in the plain fixed-width font.
(Enter <KBD>passwd</KBD> to change your password.)
<DT><SAMP><SAMP></SAMP>
<DD>for computer status messages. Displayed in a fixed-width font.
(<SAMP>Segmentation fault: Core dumped.</SAMP>)
<DT><SAMP><STRONG></SAMP>
<DD>for strong emphasis. Typically displayed in bold. (<STRONG>Important</STRONG>)
<DT><SAMP><VAR></SAMP>
<DD>for a ``metasyntactic'' variable, where the user is to replace
the variable with a specific instance. Typically displayed in italics.
(<KBD>rm</KBD> <VAR>filename</VAR> deletes the file.)
</DL>
<H4><A NAME = "A1.5.1.2">Physical Styles</A></H4>
<DL COMPACT>
<DT><SAMP><B></SAMP>
<DD>bold text
<DT><SAMP><I></SAMP>
<DD>italic text
<DT><SAMP><TT></SAMP>
<DD>typewriter text, e.g. fixed-width font.
</DL>
<H3><A NAME = "A1.5.2">Using Character Tags</A></H3>
<P>
To apply a character style,
<OL>
<LI>Start with <SAMP><</SAMP><VAR>tag</VAR><SAMP>></SAMP>, where<SAMP>
</SAMP><VAR>tag</VAR> is the desired character formatting tag,
to indicate the beginning of the tagged text.
<LI>Enter the tagged text.
<LI>End the passage with <SAMP></</SAMP><VAR>tag</VAR><SAMP>></SAMP>.
</OL>
<H3><A NAME = "A1.5.3">Special Characters</A></H3>
<H4><A NAME = "A1.5.3.1">Escape Sequences</A></H4>
<P>
Four characters of the ASCII character set -- the left angle bracket
(<), the right angle bracket (>), the ampersand (&) and the
double quote (") -- have special meaning within HTML and therefore
cannot be used ``as is'' in text. (The angle brackets are used to indicate
the beginning and end of HTML tags, and the ampersand is used to indicate
the beginning of an escape sequence.)
<P>
To use one of these characters in an HTML document, you must enter
its <DFN>escape </DFN><DFN>sequence</DFN> instead:
<DL COMPACT>
<DT><SAMP>&lt;</SAMP>
<DD>the escape sequence for <
<DT><SAMP>&gt;</SAMP>
<DD>the escape sequence for >
<DT><SAMP>&amp;</SAMP>
<DD>the escape sequence for &
<DT><SAMP>&quot;</SAMP>
<DD>the escape sequence for "
</DL>
<P>
Additional escape sequences support accented characters. For example:
<DL COMPACT>
<DT><SAMP>&ouml;</SAMP>
<DD>the escape sequence for a lowercase o with an umlaut: ö
<DT><SAMP>&ntilde;</SAMP>
<DD>the escape sequence for a lowercase n with an tilde: ñ
<DT><SAMP>&Egrave;</SAMP>
<DD>the escape sequence for an uppercase E with a grave accent: È
</DL>
<P>
<A HREF = "http://www.w3.org/hypertext/WWW/MarkUp/ISOlat1.html"> A full
list of supported characters</A> is available.
<P>
<STRONG>NOTE:</STRONG> Unlike the rest of HTML, the escape sequences
are case sensitive. You cannot, for instance, use &LT; instead
of &lt;.
<H4><A NAME = "A1.5.3.2">Forced Line Breaks</A></H4>
<P>
The <SAMP><BR></SAMP> tag forces a line break with no extra space
between lines. (By contrast, most browsers format the <SAMP><P></SAMP>
paragraph tag with an additional blank line to more clearly indicate
the beginning the new paragraph.)
<P>
One use of <SAMP><BR></SAMP> is in formatting addresses:
<PRE>
National Center for Supercomputing Applications<BR>
605 East Springfield Avenue<BR>
Champaign, Illinois 61820-5518<BR>
</PRE>
<H4><A NAME = "A1.5.3.3">Horizontal Rules</A></H4>
<P>
The <SAMP><HR> tag </SAMP>produces a horizontal line the width
of the browser window.
<H2><A NAME = "A1.6">In-line Images</A></H2>
<P>
Most Web browsers can display in-line images (that is, images next
to text) that are in X Bitmap (XBM) or GIF format. Each image takes
time to process and slows down the initial display of the document,
so generally you should not include too many or overly large images.
<P>
To include an in-line image, use
<PRE>
<IMG SRC=<VAR>image_URL</VAR>>
</PRE>
<P>
where <VAR>image_URL</VAR> is the URL of the image file. The syntax
for <SAMP>IMG SRC </SAMP>URLs is identical to that used in an anchor
<SAMP>HREF</SAMP>. If the image file is a GIF file, then the filename
part of <VAR>image_URL </VAR><STRONG>must</STRONG> end with <SAMP>.gif</SAMP>.
Filenames of X Bitmap images must end with <SAMP>.xbm</SAMP>.
<P>
<IMG SRC = "Graphics/RandomPic.gif" ALT = "">By default the bottom
of an image is aligned with the text as shown in this paragraph.
<P>
<IMG SRC = "Graphics/RandomPic.gif" ALT = "" ALIGN = TOP>
Add the <SAMP>ALIGN=TOP</SAMP>
option if you want the browser to align adjacent text with the top
of the image as shown in this paragraph. The full in-line image tag
with the top alignment is:
<PRE>
<IMG ALIGN=top SRC=<VAR>image_URL</VAR>>
</PRE>
<P>
<IMG SRC = "Graphics/RandomPic.gif" ALT = "" ALIGN = MIDDLE>
<SAMP>ALIGN=MIDDLE</SAMP>
aligns the text with the center of the image.
<H3><A NAME = "A1.6.1">Alternate Text for Browsers That Can't Display Images</A></H3>
<P>
Some World Wide Web browsers, primarily those that run on VT100 terminals,
cannot display images. The <SAMP>ALT</SAMP> option allows you to specify
text to be displayed when an image cannot be. For example:
<PRE>
<IMG SRC = "UpArrow.gif" ALT = "Up">
</PRE>
<P>
where <SAMP>UpArrow.gif </SAMP>is the picture of an upward pointing
arrow. With NCSA Mosaic and other graphics-capable viewers, the user
sees the up arrow graphic. With a VT100 browser, such as lynx, the
user sees the word ``Up.''
<H2><A NAME = "A1.7">External Images, Sounds, and Animations</A></H2>
<P>
You may want to have an image open as a separate document when a user
activates a link on either a word or a smaller, in-line version of
the image included in your document. This is considered an external
image and is useful if you do not wish to slow down the loading of
the main document with large in-line images.
<P>
To include a reference to an external image, use
<PRE>
<A HREF = <VAR>image_URL</VAR>>link anchor</A>
</PRE>
<P>
Use the same syntax is for links to external animations and sounds.
The only difference is the file extension of the linked file. For example,
<P>
<SAMP><A HREF = "QuickTimeMovie.mov">link anchor</A></SAMP>
<P>
specifies a link to a QuickTime movie. Some common file types and their
extensions are:
<DL COMPACT>
<DT><STRONG>File Type</STRONG>
<DD><STRONG>Extension</STRONG>
<DT>Plain text
<DD><SAMP>.txt</SAMP>
<DT>HTML document
<DD><SAMP>.html</SAMP>
<DT>GIF image
<DD><SAMP>.gif</SAMP>
<DT>TIFF image
<DD><SAMP>.tiff</SAMP>
<DT>XBM bitmap image
<DD><SAMP>.xbm</SAMP>
<DT>JPEG image
<DD><SAMP>.jpg</SAMP> or <SAMP>.jpeg</SAMP>
<DT>PostScript file
<DD><SAMP>.ps</SAMP>
<DT>AIFF sound
<DD><SAMP>.aiff</SAMP>
<DT>AU sound
<DD><SAMP>.au</SAMP>
<DT>QuickTime movie
<DD><SAMP>.mov</SAMP>
<DT>MPEG movie
<DD><SAMP>.mpeg</SAMP> or <SAMP>.mpg</SAMP>
</DL>
<P>
Make sure your intended audience has the necessary viewers. Most UNIX
workstations, for instance, cannot view QuickTime movies.
<H2><A NAME = "A1.8">Troubleshooting</A></H2>
<H3><A NAME = "A1.8.1">Avoid Overlapping Tags</A></H3>
<P>
Consider this snippet of HTML:
<PRE>
<B>This is an example of <DFN>overlapping</B> HTML tags.</DFN>
</PRE>
<P>
The word ``overlapping'' is contained within both the <SAMP><B></SAMP>
and <SAMP><DFN></SAMP> tags. How does the browser format it?
You won't know until you look, and different browsers will likely react
differently. In general, avoid overlapping tags.
<H3><A NAME = "A1.8.2">Embed Anchors and Character Tags, But Nothing Else</A></H3>
<P>
It is acceptable to embed anchors within another HTML element:
<PRE>
<H1><A HREF = "Destination.html">My heading</A></H1>
</PRE>
<P>
<EM>Do not</EM> embed a heading or another HTML element within an anchor:
<PRE>
<A HREF = "Destination.html">
<H1>My heading</H1>
</A>
</PRE>
<P>
Although most browsers currently handle this example, it is forbidden
by the official HTML and HTML+ specifications, and will not work with
future browsers.
<P>
Character tags modify the appearance of other tags:
<PRE>
<UL><LI><B>A bold list item</B>
<UL>
<LI><I>An italic list item</I>
</UL>
</PRE>
<P>
However, avoid embedding other types of HTML element tags. For example,
it is tempting to embed a heading within a list, in order to make the
font size larger:
<PRE>
<UL><LI><H1>A large heading</H1>
<UL>
<LI><H2>Something slightly smaller</H2>
</UL>
</PRE>
<P>
Although some browsers, such as NCSA Mosaic for the X Window System,
format this construct quite nicely, it is unpredictable (because it
is undefined) what other browsers will do. For compatibility with all
browsers, avoid these kinds of constructs.
<P>
What's the difference between embedding a <SAMP><B></SAMP> within
a <SAMP><LI></SAMP> tag as opposed to embedding a <SAMP><H1></SAMP>
within a <SAMP><LI></SAMP>? This is again a question of SGML.
The semantic meaning of <SAMP><H1></SAMP> is that it's the main
heading of a document and that it should be followed by the content
of the document.Thus it doesn't make sense to find a <SAMP><H1></SAMP>
within a list.
<P>
Character formatting tags also are generally not additive. You might
expect that
<PRE>
<B><I>some text</I></B>
</PRE>
<P>
would produce bold-italic text. On some browsers it does; other browsers
interpret only the innermost tag (here, the italics).
<H3><A NAME = "A1.8.3">Check Your Links</A></H3>
<P>
When an <SAMP><IMG></SAMP> tag points at an image that does not
exist, a dummy image is substituted. When this happens, make sure that
the referenced image does in fact exist, that the hyperlink has the
correct information in the URL, and that the file permission is set
appropriately (world-readable).
<H2><A NAME = "A1.9">A Longer Example</A></H2>
<P>
Here is a longer example of an HTML document:
<PRE>
<HEAD>
<TITLE>A Longer Example</TITLE>
</HEAD>
<BODY>
<H1>A Longer Example</H1>
This is a simple HTML document. This is the first
paragraph. <P>
This is the second paragraph, which shows special effects. This is a
word in <I>italics</I>. This is a word in <B>bold</B>.
Here is an in-lined GIF image: <IMG SRC = "myimage.gif">.
<P>
This is the third paragraph, which demonstrates links. Here is
a hypertext link from the word <A HREF = "subdir/myfile.html">foo</A>
to a document called "subdir/myfile.html". (If you
try to follow this link, you will get an error screen.) <P>
<H2>A second-level header</H2>
Here is a section of text that should display as a
fixed-width font: <P>
<PRE>
On the stiff twig up there
Hunches a wet black rook
Arranging and rearranging its feathers in the rain ...
</PRE>
This is a unordered list with two items: <P>
<UL>
<LI> cranberries
<LI> blueberries
</UL>
This is the end of my example document. <P>
<ADDRESS>Me (me@mycomputer.univ.edu)</ADDRESS>
</BODY>
</PRE>
<A HREF=LongerExample.html>Click here</A> to see the formatted version.
<P>
In addition to tags already discussed, this example also uses the <SAMP><HEAD>
... </HEAD> </SAMP>and <SAMP><BODY> ... </BODY></SAMP>
tags, which separate the document into introductory information about
the document and the main text of the document. These tags don't change
the appearance of the formatted document at all, but are useful for
several purposes (for example, NCSA Mosaic for Macintosh 2.0, for example,
allows you to browse just the header portion of document before deciding
whether to download the rest), and it is recommended that you use these
tags.
<H2><A NAME = "A1.10">For More Information</A></H2>
<P>
This guide is only an introduction to HTML and not a comprehensive
reference. Below are additional sources of information.
<H3><A NAME = "A1.10.1">Fill-out Forms</A></H3>
<P>
One major feature not discussed here is fill-out forms, which allows
users to return information to the World Wide Web server. For information
on fill-out forms, look at this
<A HREF = "/SDG/Software/Mosaic/Docs/fill-out-forms/overview.html"> Fill-out
Forms Overview</A>
<H3><A NAME = "A1.10.2">Style Guides</A></H3>
<P>
The following offer advice on how to write ``good'' HTML:
<UL>
<LI><A HREF = "http://www.willamette.edu/html-composition/strict-html.html">
<CITE>Composing Good HTML</CITE></A>
<LI>
<A HREF = "http://www.w3.org/hypertext/WWW/Provider/Style/Introduction.html">
CERN's style guide for online hypertext</A>
</UL>
<H3><A NAME = "A1.10.3">Other Introductory Documents</A></H3>
These cover similar information as this guide:
<UL>
<LI><A HREF = "http://www.ucc.ie/info/net/htmldoc.html">
<CITE>How to Write HTML Files</CITE></A>
<LI><A HREF = "http://melmac.corp.harris.com/about_html.html">
<CITE>Introduction to HTML</CITE></A>
</UL>
<H3><A NAME = "A1.10.4">Additional References</A></H3>
<UL>
<LI><A HREF = "http://kuhttp.cc.ukans.edu/lynx_help/HTML_quick.html">
<CITE>The HTML Quick Reference Guide</CITE></A>,
which provides a comprehensive listing of HTML codes
<LI><A HREF = "http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html">
The official HTML specification</A>
<LI><A HREF = "http://www.w3.org/hypertext/WWW/MarkUp/SGML.html">A
description of SGML</A>, the Standard Generalized Markup Language
<LI><A HREF
= "http://www.ietf.cnri.reston.va.us/html.charters/html-charter.html">
<cite>The HTML Working Group of the IETF</cite></A>.
</UL>
<HR>
<ADDRESS>
National Center for Supercomputing Applications / pubs@ncsa.uiuc.edu
</ADDRESS>
</BODY>
|
