1<!-- beginners.html --> 2<HEAD> 3<TITLE> A Beginner's Guide to HTML </TITLE> 4<BODY> 5 6 7<H1>A Beginner's Guide to HTML 8 9</H1>This is a primer for producing documents in HTML, the markup language used by the World Wide Web. 10 11<UL> 12<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#Acronyms" NAME=14>Acronym expansion - the World Wide Web alphabet soup</A> 13 14<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#MinimalHTML" NAME=15>The minimal HTML document</A> 15<UL> 16<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#Titles">Titles</A> 17 18<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#Headings">Headings</A> 19 20<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#Paragraphs">Paragraphs</A> 21</UL> 22<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#Links" NAME=18>Linking to other documents</A> 23<UL> 24<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#URL" NAME=19>Uniform Resource Locator (URL)</A> 25 26<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#NamedAnchorOther" NAME=20>Anchors to specific sections in other documents</A> 27 28<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#NamedAnchorSame" NAME=21>Anchors to specific sections in the same document</A> 29</UL> 30<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#MoreTags" NAME=22>Additional markup tags</A> 31<UL> 32<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#Lists" NAME=23>Lists</A> 33<UL> 34<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#UnnumberedLists" NAME=24>Unnumbered lists</A> 35 36<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#NumberedLists" NAME=25>Numbered lists</A> 37 38<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#DescriptiveLists" NAME=26>Descriptive lists</A> 39 40<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#NestedLists" NAME=27>Nested Lists</A> 41</UL> 42<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#Preformatted" NAME=28>Preformatted text</A> 43 44<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#Blockquote" NAME=29>Extended quotes</A> 45 46<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#CharFormat" NAME=30>Character formatting</A> 47 48<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#SpecialChar" NAME=31>Special characters</A> 49</UL> 50<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#InlineImage" NAME=32>Inline images</A> 51 52<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#ExternalImage" NAME=33>External images</A> 53 54<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#Troubleshooting" NAME=34>Troubleshooting</A> 55 56<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#ExtendedExample" NAME=35>A longer example</A> 57 58<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#MoreInfo" NAME=36>For more information</A> 59</UL> 60<A NAME=Introduction> 61<H2 NAME=Introduction>Introduction 62 63</H2> 64</A> 65<A NAME=Acronyms> 66<H3 NAME=Acronyms>Acronym expansion 67 68</H3> 69</A> 70<DL><DT><I>WWW </I> 71<DD>World Wide Web 72<I><DT>SGML </I> 73<DD>Standard Generalized Markup Language - This is perhaps best be thought of as a programming language for style sheets. 74<I><DT>DTD </I> 75<DD>Document Type Definition - This is a specific implementation of document description using SGML. One way to think about this is: Fortran is to a computer program as SGML is to a DTD. 76<I><DT>HTML </I> 77<DD>HyperText Markup Language - HTML is a SGML DTD. In practical terms, HTML is a collection of styles used to define the various components of a World Wide Web document. 78<DT> 79<DD> 80</DL> 81<A NAME=NotCovered> 82<H3 NAME=NotCovered>What this primer doesn't cover 83 84</H3> 85</A>This primer assumes that you have: 86 87<UL> 88<LI> at least a passing knowledge of how to use NCSA Mosaic or other WWW browser 89 90<LI> a general understanding of how World Wide Web servers and client browsers work and 91 92<LI> access to a World Wide Web server for which you would now like to produce HTML documents 93</UL> 94<A NAME=CreatingHTML> 95<H3 NAME=CreatingHTML>Creating HTML documents 96 97</H3> 98</A>HTML documents are in plain text format and can be created using any text editor (e.g., Emacs or vi on Unix machines). A couple of WWW browsers (tkWWW for X Window System machines and CERN's WWW browser for the NeXT) do include rudimentary HTML editors in a WYSIWYG environment, and you may want to try one of them first before delving into the details of HTML. 99 100<P> 101 102<I>You can preview documents in progress with NCSA Mosaic (and some other WWW browers). Open the document using the Open Local option under the 103<B>File 104</B> menu. Use the Filters, Directories, and Files fields to locate the document or enter the path and name of the document in the Name of Local Document to Open field. Press OK. If you see edits you want to make, enter them in the source file. Save the changes. Return to NCSA Mosaic and press the 105<B>Reload 106</B> button on the bottom menu. The edits are reflected in the on-screen display. 107 108<P> 109 110</I> 111<A NAME=MinimalHTML> 112<H2 NAME=MinimalHTML>The minimal HTML document 113 114</H2> 115</A>Here is a barebones example of HTML: 116 117<P> 118____________________________________________________________________ 119 120<PRE> 121 <TITLE>The simplest HTML example</TITLE> 122 123 <H1>This is a level one heading</H1> 124 125 Welcome to the world of HTML. 126 This is one paragraph.<P> 127 128 And this is a second.<P> 129 130</PRE>____________________________________________________________________ 131 132 133<A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/MinimalHTML.html" NAME=10>Click here 134</A> to see the formatted version of the example. 135 136<P> 137HTML uses 138<DFN>tags 139</DFN> to tell the World Web viewer how to display the text. The above example uses 140 141<UL> 142<LI> the <CODE><TITLE></CODE> tag (which has a correspondinging <CODE></TITLE></CODE> tag), which specifies the title of the document, 143 144<LI> the <CODE><H1></CODE> header tag (with corresponding <CODE></H1></CODE>), and 145 146<LI> the <CODE><P></CODE> end-of-paragraph tag. 147</UL>HTML tags consist of a left angular bracket ( 148<CODE>< 149</CODE>), known as a ``less than'' symbol to mathematicians, followed by some text (called the 150<DFN>directive 151</DFN>) and closed by a right angular bracket ( 152<CODE>> 153</CODE>). Tags are usually paired, e.g. 154<CODE><H1> 155</CODE> and 156<CODE></H1> 157</CODE>. The ending tag looks just like the starting tag except a slash (/) precedes the text within the brackets. In the example, 158<CODE><H1> 159</CODE> tells the viewer to start formatting a top level heading; 160<CODE></H1> 161</CODE> tells the viewer that the heading is complete. 162 163<P> 164The primary exception to the pairing rule is the 165<CODE><P> 166</CODE> end-of-paragraph tag. There is no such thing as 167<CODE></P> 168</CODE>. 169 170<P> 171 172<STRONG>Note: 173</STRONG> HTML is 174<EM>not 175</EM> case senstive. 176<CODE><title> 177</CODE> is completely equivalent to 178<CODE><TITLE> 179</CODE> or 180<CODE><TiTlE> 181</CODE>. 182 183<P> 184Not all tags are supported by all World Wide Web browsers. If a browser does not support a tag, it should just ignore it, though. 185 186<P> 187 188<A NAME=Titles> 189<H3 NAME=Titles>Titles 190 191</H3> 192</A>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. 193<I>In NCSA Mosaic, the Document Title field is at the top of the screen just below the pulldown menus. 194 195<P> 196 197</I>The directive for the title tag is 198<CODE><title> 199</CODE>. The title generally goes on the first line of the document. 200 201<P> 202 203<A NAME=Headings> 204<H3 NAME=Headings>Headings 205 206</H3> 207</A>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 the normal body text. The first heading in each document should be tagged 208<CODE><H1> 209</CODE>. The syntax of the heading tag is: 210 211<PRE> 212 <H<VAR>y </VAR>><VAR>Text of heading </VAR></H<VAR>y </VAR>> 213 214<P> 215</PRE>where 216<VAR>y 217</VAR> is a number between 1 and 6 specifying the level of the heading. 218 219<P> 220For example, the coding for the ``Headings'' section heading above is 221 222<PRE> 223 <H3>Headings</H3> 224 225</PRE> 226<STRONG>Title versus first heading 227</STRONG>: In many documents (including this one), the first heading is identical to the title. For multi-part 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 node in a wider context (e.g., include both the book title and the chapter title). 228 229<P> 230 231<A NAME=Paragraphs> 232<H3 NAME=Paragraphs>Paragraphs 233 234</H3> 235</A>Unlike documents in most word processors, carriage returns and white space 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. Notice that in the barebones example, the first paragraph is coded as 236 237<P> 238 239<PRE> 240 Welcome to HTML. 241 This is the first paragraph. <P> 242 243</PRE>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 244<CODE><P> 245</CODE> tag. 246 247<P> 248 249<STRONG>Important: 250</STRONG> You must end each paragraph with 251<CODE><P> 252</CODE>. The viewer ignores any indentations or blank lines in the source text. Without the 253<CODE><P> 254</CODE> tags, the document becomes one large paragraph. HTML relies almost entirely on the tags for formatting instructions. (The exception is text tagged as ``preformatted,'' explained 255<A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#Preformatted" NAME=12>below 256</A>.) For instance, the following would produce identical output as the first barebones HTML example: 257 258<P> 259________________________________________________________________________ 260 261<PRE> 262 <TITLE>The simplest HTML example</TITLE><H1>This is a level 263 one heading</H1>Welcome to the world of HTML. This is one 264 paragraph.<P>And this is a second.<P> 265 266</PRE>________________________________________________________________________ 267 268However, to preserve readability in HTML files, headings should be on separate lines, and paragraphs should be separated by blank lines. 269 270 271<A NAME=Links> 272<H2 NAME=Links>Linking to other documents 273 274</H2> 275</A>The chief power of HTML comes from its ability to 276<DFN>link 277</DFN> regions of text (and also images) to another document (or an image). These regions are typically highlighted by the browser to indicate that they are hypertext links. 278<I>In NCSA Mosaic, hypertext links are in color and underlined by default. It is possible to modify this in the Options menu as well as in your .Xdefaults file. 279</I>HTML's single hypertext-related directive is 280<CODE>A 281</CODE>, which stands for anchor. To include anchors in your document: 282 283<P> 284 285<OL> 286<LI> Start by opening the anchor with the leading angle bracket and the anchor directive followed by a space: <CODE><a</CODE> 287 288<LI> Specify the document that's being pointed to by giving the parameter <CODE>href="filename.html" </CODE>followed by a closing angle bracket: <CODE>></CODE> 289 290<LI> Enter the text that will serve as the hypertext link in the current document (i.e., the text that will be in a different color and/or underlined) 291 292<LI> Enter the ending anchor tag: <CODE></A></CODE> 293</OL>Below is an sample hypertext reference: 294 295<P> 296 297<PRE> 298 <a href="MaineStats.html">Maine</a> 299 300</PRE>This entry makes ``Maine'' the hyperlink to the document 301<SAMP>MaineStats.html 302</SAMP>. 303 304<P> 305 306<A NAME=URL> 307<H3 NAME=URL>Uniform Resource Locator 308 309</H3> 310</A>A Uniform Resource Locator (URL) refers to the format used by WWW documents to locate other files. A URL gives the type of resource being accessed (e.g., gopher, WAIS) and the path of the file. The format used is: 311 312<P> 313 314<PRE> 315<VAR>scheme </VAR>://<VAR>host.domain </VAR>[:<VAR>port </VAR>]/<VAR>path </VAR>/<VAR>filename </VAR> 316 317<P> 318</PRE>where 319<DFN>scheme 320</DFN> is one of: 321 322<DL><DT><CODE>file</CODE> 323<DD>a file on your local system, or a file on an anonymous ftp server 324<CODE><DT>http</CODE> 325<DD>a file on a World Wide Web server 326<CODE><DT>gopher</CODE> 327<DD>a file on a Gopher server 328<CODE><DT>WAIS</CODE> 329<DD>a file on a WAIS server 330</DL>The scheme can also be 331<CODE>news 332</CODE> or 333<CODE>telnet 334</CODE>, but these are used much less often than the above. The port number can generally be omitted from the URL. 335 336<P> 337For example if you wanted to insert a link to this primer, you would insert 338 339<PRE> 340 <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html"> 341 NCSA's HTML Primer</A> 342 343</PRE>into your document. This would make the text ``NCSA's HTML Primer'' a hyperlink leading to this document. 344 345Refer to the 346<A HREF="http://info.cern.ch/hypertext/WWW/Addressing/Addressing.html">Addressing 347</A> document prepared by CERN for additional information about URLs. 348<CITE>A Beginner's 349<A HREF="http://www.ncsa.uiuc.edu/demoweb/url-primer.html">Guide 350</A> to URLs 351</CITE> is located on the NCSA Mosaic Help menu. 352 353<P> 354 355<A NAME=NamedAnchorOther> 356<H3 NAME=NamedAnchorOther>Anchors to Specific Sections in Other Documents 357 358</H3> 359</A>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. First you need to set up what is called a 360<DFN>named anchor 361</DFN> in document B. For example, to add an anchor named ``Jabberwocky" to document B, you would insert 362 363<PRE> 364 Here's <A NAME="Jabberwocky">some text</a>. 365 366</PRE>Now when you create the link in document A, you include not only the filename, but also the named anchor, separated by a hash mark(``#''): 367 368<PRE> 369 This is my <A HREF="documentB.html#Jabberwocky">link</a>. 370 371</PRE>Now clicking on the word ``link'' in document A would send the reader directly to the words ``some text'' in document B. 372<A NAME=NamedAnchorSame> 373 374<H3 NAME=NamedAnchorSame>Anchors to Specific Sections within the Current Document 375 376</H3> 377</A>The technique is exactly the same except the file name is now omitted. 378 379<P> 380 381<STRONG>Note: 382</STRONG> The NCSA Mosaic 383<B>Back 384</B> button does not work for an anchor within a document because the 385<B>Back 386</B> button is designed to move to a previous document. Move back manually within the document using the scroll bar. (The 387<B>Back 388</B> button will return to the start of a hyperlink effective with Version 2.0 of NCSA Mosaic.) 389 390<P> 391 392<A NAME=MoreTags> 393<H2 NAME=MoreTags>Additional markup tags 394 395</H2>The above is sufficient to produce simple HTML documents. For more complex documents, HTML also has tags for several types of lists, extended quotes, character formatting and other items, all described below. 396</A> 397<A NAME=Lists> 398 399<H3 NAME=Lists>Lists 400 401</H3> 402</A>HTML supports unnumbered, numbered, and descriptive lists. For list items, no paragraph separator is required. The tags for the items in the list terminate each list item. 403<A NAME=UnnumberedLists> 404 405<H4 NAME=UnnumberedLists>Unnumbered Lists 406 407</H4> 408</A> 409<OL> 410<LI> Start with an opening list <CODE><ul></CODE> tag. 411 412<LI> Enter the <CODE><li></CODE> tag followed by the individual item. (Remember that no closing tag is needed.) 413 414<LI> End with a closing list <CODE></ul></CODE> tag. 415</OL>Below an example two-item list: 416 417<P> 418 419<PRE> 420 <UL> 421 <LI> apples 422 <LI> bananas 423 </UL> 424 425</PRE>The output is: 426 427 428<UL> 429<LI> apples 430 431<LI> bananas 432</UL> 433<P> 434 435<P> 436Note that different viewers display an unordered list differently. A viewer might use bullets, filled circles, or dashes to show the items. 437 438<P> 439 440<A NAME=NumberedLists> 441<H4 NAME=NumberedLists>Numbered Lists 442 443</H4> 444</A>A numbered list (also called an ordered list, from where the abbreviation comes) uses the 445<CODE><ol> 446</CODE> directive to start a list rather than the 447<CODE><ul> 448</CODE> directive. The items are tagged using the same 449<CODE><li> 450</CODE> tag as for a bulleted list. For example: 451 452<P> 453 454<PRE> 455 <OL> 456 <LI> oranges 457 <LI> peaches 458 <LI> grapes 459 </OL> 460 461</PRE>The list looks like this online: 462 463 464<OL> 465<LI> oranges 466 467<LI> peaches 468 469<LI> grapes 470</OL> 471<P> 472 473<P> 474 475<A NAME=DescriptiveLists> 476<H4 NAME=DescriptiveLists>Descriptive Lists 477 478</H4> 479</A>A description list usually consists of alternating a 480<DFN>description title 481</DFN> (abbreviated as dt) and a 482<DFN>description description 483</DFN> (abbreviated as dd). The description generally starts on a new line, because the viewer allows the full line width for the contents of the dt field. 484 485<P> 486Below is an example description list as included in your source file: 487 488<P> 489 490<PRE> 491 <DL> 492 <DT> National Center for Supercomputing Applications 493 <DD> NCSA is located on the campus of the University 494 of Illinois at Urbana-Champaign. NCSA is a one of 495 four member institutions in the National Metacenter for 496 Computational Science and Engineering. 497 <DT> Cornell Theory Center 498 <DD> CTC is located on the campus of Cornell 499 University in Ithaca, New York. CTC is another member 500 of the National Metacenter for Computational Science 501 and Engineering. 502 </DL> 503 504</PRE>The output looks like this: 505 506 507<DL><DT>National Center for Supercomputing Applications 508<DD>NCSA is located on the campus of the University of Illinois at Urbana-Champaign. NCSA is a one of four member institutions in the National Metacenter for Computational Science and Engineering. 509<DT>Cornell Theory Center 510<DD>CTC is located on the campus of Cornell University in Ithaca, New York. CTC is another member of the National Metacenter for Computational Science and Engineering. 511</DL>The 512<CODE><DT> 513</CODE> and 514<CODE><DD> 515</CODE> entries can contain multiple paragraphs (separated by paragraph tags), lists, or other description information. 516 517<P> 518 519<A NAME=NestedLists> 520<H4 NAME=NestedLists>Nested Lists 521 522</H4> 523</A>Lists can be arbitrarily nested. A list item can itself contain lists. You can also have a number of paragraphs, each themselves containing nested lists, in a single list item, and so on. 524 525<P> 526Remember that the display of an unordered list varies with the viewer. A browser may not provide successive levels of indentation or modify the bullets used at each level. 527<I>NCSA Mosaic indents the second level in the following list and changes the ``bullet'' from a bullet to a small box. 528 529<P> 530 531</I>An example nested list: 532 533<P> 534 535<PRE> 536 <UL> 537 <LI> A few New England states: 538 <UL> 539 <LI> Vermont 540 <LI> New Hampshire 541 </UL> 542 <li> One Midwestern state: 543 <UL> 544 <LI> Michigan 545 </UL> 546 </UL> 547 548</PRE>The nested list is displayed as 549 550 551<UL> 552<LI> A few New England states: 553<UL> 554<LI> Vermont 555 556<LI> New Hampshire 557</UL> 558<LI> One Midwestern state: 559<UL> 560<LI> Michigan 561</UL> 562</UL> 563<A NAME=Preformatted> 564<H3 NAME=Preformatted>Preformatted Text 565 566</H3> 567</A>Use the 568<CODE>pre 569</CODE> tag (which stands for ``preformatted'') to include text in a fixed-width font and to cause spaces, new lines, and tabs to be significant. This is useful for program listings. For example, the following lines in your source file: 570 571<P> 572 573<PRE> 574<PRE> 575 #!/bin/csh 576 cd $SCR 577 cfs get mysrc.f:mycfsdir/mysrc.f 578 cfs get myinfile:mycfsdir/myinfile 579 fc -02 -o mya.out mysrc.f 580 mya.out 581 cfs save myoutfile:mycfsdir/myoutfile 582 rm * 583</PRE> 584 585</PRE>display as: 586 587<PRE> 588 #!/bin/csh 589 cd $SCR 590 cfs get mysrc.f:mycfsdir/mysrc.f 591 cfs get myinfile:mycfsdir/myinfile 592 fc -02 -o mya.out mysrc.f 593 mya.out 594 cfs save myoutfile:mycfsdir/myoutfile 595 rm * 596 597</PRE>Hypertext references (and other HTML tags) can be used within <pre> sections. 598<A NAME=Blockquote> 599 600<H3 NAME=Blockquote>Extended quotes 601 602</H3> 603</A>Use the 604<CODE><blockquote> 605</CODE> and 606<CODE></blockquote> 607</CODE> tags to include quotations in a separate block on the screen. 608 609<P> 610For example 611 612<PRE> 613 <blockquote> 614 Let us not wallow in the valley of despair. I say to you, my 615 friends, we have the difficulties of today and tomorrow. <P> 616 617 I still have a dream. It is a dream deeply rooted in the 618 American dream. <P> 619 620 I have a dream that one day this nation will rise up and 621 live out the true meaning of its creed. We hold these truths 622 to be self-evident that all men are created equal. <P> 623 </blockquote> 624 625</PRE>The result is Let us not wallow in the valley of despair. I say to you, my friends, we have the difficulties of today and tomorrow. 626 627I still have a dream. It is a dream deeply rooted in the American dream. 628 629I 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. 630 631 632<A NAME=Addresses> 633<H3 NAME=Addresses>Addresses 634 635</H3> 636</A>The 637<CODE><ADDRESS> 638</CODE> tag is generally used within HTML documents to specify the author of a document and provides a means of contacting the author (e.g., an email address). This is usually the last item in a file and generally starts on a new, left-justified line. 639 640<P> 641For example, the last part of the HTML file for this primer is 642 643<PRE> 644 <ADDRESS> 645 A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu 646 </ADDRESS> 647 648</PRE>The result is: 649 650 651<ADDRESS>A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu 652 653</ADDRESS> 654<P> 655 656<P> 657 658<A NAME=CharFormat> 659<H3 NAME=CharFormat>Character formatting 660 661</H3> 662</A>Individual words or sentences can be put in special styles. 663<DFN>Logical 664</DFN> styles are those that are configured by your viewer. For example, 665<CODE><CITE> 666</CODE> may be defined as italic by your viewer. Each time you enter 667<CODE><CITE> 668</CODE> tags, the viewer automatically displays the text in italics. 669 670<P> 671A 672<DFN>physical 673</DFN> style is one that you determine, and the viewer displays what you have coded. For example 674<CODE><I> 675</CODE> tells the viewer to display your text in italics. 676 677<P> 678For HTML-coded documents, you should use logical styles whenever possible. Future implementations of HTML may not implement physical styles at all. 679 680<P> 681 682<UL> 683<LI> Italic 684<UL> 685<LI> <CODE><I>text</i></CODE> puts text in italics (<I>HTML Primer </I>) 686 687<LI> <CODE><em>text</em></CODE> also italicizes text (only <EM>one</EM> viewer) 688 689<LI> <CODE><cite>text</cite></CODE> is used for citations of names of manuals, sections, or books (<CITE>HTML Primer </CITE>) 690 691<LI> <CODE><var>text</var></CODE> indicates a variable (<VAR>filename </VAR>) 692</UL> 693<LI> Bold 694<UL> 695<LI> <CODE><b>text</b></CODE> puts text in bold (<B>Important</B>) 696 697<LI> <CODE><strong>text</strong></CODE> also emphasizes text (<STRONG>Note:</STRONG>) 698</UL> 699<LI> Fixed width font 700<UL> 701<LI> <CODE><tt>text</tt></CODE> puts text in a fixed-width font (<TT>1 SU = 1 CPU hour</TT>) 702 703<LI> <CODE><code>text</code></CODE> also puts text in a fixed-width font (<CODE>1 SU = 1 CPU hour</CODE>) 704 705<LI> <CODE><samp>text</samp></CODE> formats text for samples (<SAMP>-la</SAMP>) 706 707<LI> <CODE><kbd>text</kbd></CODE> displays the names of keys on the keyboard (<KBD>HELP</KBD>) 708</UL> 709<LI> Other (the following special tag currently does not display in NCSA Mosaic) 710<UL> 711<LI> <CODE><dfn>text</dfn></CODE> displays a definition in italics 712</UL> 713</UL> 714<A NAME=SpecialChar> 715<H3 NAME=SpecialChar>Special Characters 716 717</H3> 718</A>Three 719<A NAME=characters>characters 720</A> out of the entire ASCII (or ISO 8859) character set are 721<I>special 722</I> and cannot be used ``as-is'' within an HTML document. These characters are left angle bracket ( 723<CODE>< 724</CODE>), right angle bracket ( 725<CODE>> 726</CODE>), and ampersand ( 727<CODE>& 728</CODE>). 729 730<P> 731The angle brackets are used to specify HTML tags (as shown above), while the ampersand is used as the escape mechanism for these and other characters: 732 733<UL> 734<LI> <CODE><</CODE> is the <I>escape sequence </I> for <CODE><</CODE> 735 736<LI> <CODE>></CODE> is the escape sequence for <CODE>></CODE> 737 738<LI> <CODE>&</CODE> is the escape sequence for <CODE>&</CODE> 739</UL>Note that ``escape sequence'' means that the given sequence of characters represents the single character in an HTML document and that the semicolon is required. The conversion to the single character itself takes place when the document is formatted for display by a reader. 740 741<P> 742There are additional escape sequences, such as a whole set of sequences to support 8-bit character sets (ISO 8859-1). For example: 743 744<UL> 745<LI> <CODE>ö</CODE> is the escape sequence for a lowercase <CODE>o</CODE> with an umlaut: � 746 747<LI> <CODE>ñ</CODE> is the escape sequence for a lowercase <CODE>n</CODE> with an tilde: � 748 749<LI> <CODE>È</CODE> is the escape sequence for an uppercase <CODE>E</CODE> with a grave mark: � 750</UL>Many such escapes exist and are available in a 751<A HREF="http://info.cern.ch/hypertext/WWW/MarkUp/ISOlat1.html" NAME=2>listing 752</A> from CERN. 753 754<P> 755 756<A NAME=InlineImage> 757<H2 NAME=InlineImage>Inline Images 758 759</H2> 760</A>NCSA Mosaic is can display X Bitmap (XBM) or GIF format images inside documents. 761<I>Each image takes time to process and slows down the initial display of the document 762</I>. Using a particular image multiple times in a document causes very little performance degradation compared to using the image only once. 763 764<P> 765 766<B>NOTE: 767</B> The 768<CODE><img> 769</CODE> tag is an HTML extension first implemented in NCSA Mosaic. Currently it is not understood by most other World Wide Web browsers. 770 771<P> 772To include an inline image in your document, enter: 773 774<P> 775 776<PRE> 777 <IMG SRC="filename.GIF"> 778 779</PRE> 780 781 782<IMG>? 783By default the bottom of an image is aligned with the text as shown in this paragraph. 784 785<P> 786 787<IMG>? 788Include the 789<CODE>align=top 790</CODE> parameter if you want the viewer to align adjacent text with the top of the image as shown in this paragraph. The full inline image tag with the top alignment is: 791 792<PRE> 793 <IMG ALIGN=top SRC="filename.GIF"> 794 795</PRE> 796 797If you have a larger image (i.e., one that fills most of your screen), you should insert an end of paragraph tag ( 798<CODE><p> 799</CODE>) before inserting the image parameter. End with another paragraph tag. (Or you might want to have the image open a new window, which is explained below.) 800<A NAME=ExternalImage> 801 802<H3 NAME=ExternalImage>External Images 803 804</H3> 805</A>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 version of the image that you have inlined into your document. This is considered an external image and is particularly useful because (assuming you use a word for your hypertext link) you do not have any processing time degradation in the main document. Even if you include a small image in your document as the hyperlink to the larger image, the processing time for the ``postage stamp'' image is less than the full image. 806 807<P> 808To include a reference to a graphic in an external document, use 809 810<PRE> 811 <A HREF = "filename.gif">link anchor</A> 812 813</PRE> 814 815Make certain the image is in GIF, TIFF, JPEG, RGB, or HDF format. 816<A NAME=Troubleshooting> 817 818<H2 NAME=Troubleshooting>Troubleshooting 819 820</H2> 821</A> 822<UL> 823<LI> While certain HTML constructs can be nested (for example, you can have an anchor within a header), they cannot be overlapped. For example, the following is <I>invalid </I> HTML: 824<PRE> 825 826<LI> is <a name="foo">invalid HTML.</h1></a> 827 828</PRE> 829<LI> many current HTML parsers aren't very good at handling invalid HTML, avoid overlapping constructs. 830 831 832<LI> In NCSA Mosaic, when an <CODE><img></CODE> tag points at an image that does not exist or cannot be otherwise obtained from whatever server is supposed to be serving it, the NCSA logo is substituted. For example, entering <CODE><img href="DoesNotExist.gif"> </CODE>(where "DoesNotExist.gif" is a nonexistant file) causes the following to be displayed: <IMG>? 833 834 835<LI> this happens to you, first make sure that the referenced image does in fact exist and that the hyperlink has the correct information in the link entry. Next verify that the file permission is set appropriately (world-readable). 836</UL> 837<A NAME=ExtendedExample> 838<H2 NAME=ExtendedExample>A Longer Example 839 840</H2> 841</A>Here is a longer example of a HTML document: 842 843<P> 844________________________________________________________________________ 845 846<PRE> 847 <TITLE>A Longer Example</TITLE> 848 <H1>A Longer Example</H1> 849 850 This is a simple HTML document. This is the first 851 paragraph. <P> 852 853 This is the second paragraph, which shows special effects. This is a 854 word in <I>italics</I>. This is a word in <B>bold</B>. 855 Here is an inlined GIF image: <IMG SRC="myimage.gif">. 856 <p> 857 858 This is the third paragraph, which demonstrates links. Here is 859 a hypertext link from the word <A HREF="subdir/myfile.html">foo</A> 860 to a document called "subdir/myfile.html". <P> (If you 861 try to follow this link, you will get an error screen.) 862 863 <H2>A second-level header</H2> 864 865 Here is a section of text that should display as a 866 fixed-width font: <P> 867 868 <PRE> 869 On the stiff twig up there 870 Hunches a wet black rook 871 Arranging and rearranging its feathers in the rain ... 872 </PRE> 873 874 This is a unordered list with two items: <P> 875 876 <UL> 877 <LI> cranberries 878 <LI> blueberries 879 </UL> 880 881 This is the end of my example document. <P> 882 883 <address>Me (me@mycomputer.univ.edu)</address> 884 885</PRE>________________________________________________________________________ 886 887 888<A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/LongerExample.html" NAME=37>Click here 889</A> to see the formatted version. 890 891<P> 892 893<A NAME=MoreInfo> 894<H2 NAME=MoreInfo>For More Information 895 896</H2> 897</A>More 898<A NAME=information>information 899</A> on HTML is available through the following hyperlinks. 900 901<P> 902 903<UL> 904<LI> <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/Grobe.html">HTML Quick Reference Guide</A>, which gives a comprehensive listing of HTML codes 905 906<LI> the official HTML <A HREF="http://info.cern.ch/hypertext/WWW/MarkUp/MarkUp.html" NAME=3>specs </A> 907 908<LI> the in-development HTML <A HREF="http://info.cern.ch/hypertext/WWW/MarkUp/HTML.html" NAME=6>RFC</A> (Request for Comments) 909 910<LI> a description of <A HREF="http://info.cern.ch/hypertext/WWW/MarkUp/SGML.html" NAME=4>SGML</A>, the Standard Generalized Markup Language 911 912<LI> the <A HREF="http://info.cern.ch/hypertext/WWW/Addressing/Addressing.html" NAME=5>URL (Uniform Resource Locator) specification</A> 913 914<LI> the <A HREF="http://info.cern.ch/hypertext/WWW/Provider/Style/Overview.html" NAME=8>style guide</A> for online hypertext document structures 915</UL> 916<P> 917 918<P> 919____________________________________________________________________ 920 921<ADDRESS>A Beginner's Guide to HTML/ NCSA / pubs@ncsa.uiuc.edu 922</ADDRESS>