... <TITLE> The title of the document <BODY> ... </BODY> Encloses the body of the document. <Hn> ... </Hn> Section heading, n=1 (biggest) to 6 <PRE> ... </PRE> Encloses block of text to be shown verbatim. (Fixed width font; line feeds are honored.) <BLOCKQUOTE> ... </BLOCKQUOTE> Encloses block of text that is a quote. <ADDRESS> ... </ADDRESS> Information about the author, last update, etc. Lists <UL><LI>... </UL> Unordered list <OL><LI>... </OL> Ordered list <MENU><LI>... </MENU> Menu list <DIR><LI>... </DIR> Directory list <LI> Precedes each item in the above lists <DL><DT>... <DD>... </DL> Definition list <DT> Precedes each item title in DL <DD> Precedes each item definition in DL Anchors/Links <A NAME="..." HREF="URL"> ... </A> Creates a link (HREF) or anchor (NAME) or both. Inlined image <IMG ALIGN="..." SRC="URL" ALT="..."> Inserts an image from SRC, or text from ALT if the image can't be used. ALIGN is one of top, middle, bottom (default) Text flow <BR> Force a line break <P> Add a paragraph break <HR> Horizontal rule (pseuedo page break) Generic Font Changes <DFN> ... </DFN> Word to be introduced/defined <EM> ... </EM> Emphasis <CITE> ... </CITE> Citation of book, article, movie, etc. <CODE> ... </CODE> Piece of computer code <KBD> ... </KBD> Example of keyboard entry <SAMP> ... </SAMP> Example of computer output <STRONG> ... </STRONG> Strong emphasis. <VAR> ... </VAR> Emphasized font. Specific Font Changes <B> ... </B> Bold font. <I> ... </I> Italic font. <TT> ... </TT> Typewriter font. Special Characters & & < < > > Comments  Stuff in a tag like this is ignored. (It's not really a tag, its length is unlimited) It can NOT include other HTML tags. Indexing/Forms <ISINDEX> This document is a searchable index. This is used separately from forms. <FORM ...> ... </FORM> Encloses the entire form. ACTION= URL to use when form is complete METHOD= GET or POST (must be uppercase) ENCTYPE= encoding, mostly unused <INPUT ...> Some type of input field TYPE= textarea, password, checkbox, radio, select, button, submit, reset, hidden, jot (must be lowercase) NAME= name of the field VALUE= value of button (label for submit and reset) CHECKED (checkbox/radio) this item selected by default SIZE= displayed field width, in characters MAXLENGTH= maximum field width, in characters <SELECT ...><OPTION ...> ... </SELECT> A list of items to select NAME= name of the field SIZE= use scrollable list with size elements MULTIPLE multiple selections allowed <OPTION ...> Precedes each item in the option list SELECTED This option is selected by default <TEXTAREA ...> ... </TEXTAREA> A multiline text field, enclosed text is the default value displayed. NAME= name of the field ROWS= number of displayed rows COLS= number of displayed columns URLs protocol://host:port/path#anchor protocol is one of http, gopher, ftp, file, telnet, wais, news, mailto #anchor is optional, :port defaults to 80 if left out. path#anchor Uses the protocol, host, and port of the current document. #anchor Jump to another place in the current document. ------------------------------------------------------------------------ Additional Information Note that much of the above information is on the de facto behaviour of Mosaic 2.4, particularly the stuff relating to the FORMS. General Rules Anything not enclosed in special tags is interpreted as a continous stream of text with no line breaks. HTML tags are enclosed in angle brackets tags are case insensitive tag parameters are case insensitive (or should be - the forms GET/POST at least isn't, also other FORMS parameters.) Extra spaces are ignored if there is more than one in a row. Line feeds are always ignored (note that many examples below include line feeds while others don't. This is because I've used what I feel looks natural, but it is not necessary). You will get different results on different browsers. When a browser finds a tag it doesn't recognize, it is supposed to ignore it. Basic document Of the stuff below, only the title is absolutely necessary. And the HTML tag is useful if you don't want to name your file *.html. <HTML> <HEAD> </HEAD> <TITLE>Title of the document<TITLE> <BODY> Body of the document </BODY> </HTML> Keep in mind that it is common to repeat the TITLE as a header for the document. This is because Mosaic set a de facto standard that titles are not shown in the document. Let us all bow and kiss Mosaic's feat. Headings In Mosaic for X, the 1-3 are large enough to be considered headers, other browsers use much larger fonts than Mosaic for X. Almost all browsers separate the header onto a line of its own. Anchors/Links Quotes around the NAME and the HREF parameters aren't usually necessary, but are a good habit to get into (especially for HREFs). Originally the NAME was an absolute requirement. Nowadays, apparently you can get by without it. If used, the name should always start with a letter. Names are case sensitive (I think). People recommend relative links, I recommend caution. You have to change relative links less often, but when you do have to change them, it's harder to do. I'm happy with absolute path names, because I know I can write a script to fix things if I move things around. Also keep in mind that the way .. works is still both server and client dependent. In general, .. will be in terms of the logical web file system, rather than the physical file system. This is true because the client should convert things to full path names before making the request. If you can, use cut and paste to include an HREF; this protects against typos. If you only want an anchor, but not a link, don't include any HREF. Lists Just a couple of clearer examples. <OL> <LI>This is an item. <LI>This is another item. ... </OL> <DL> <DT>This is an item. <DD>This is an item description. <DT>This is another item. <DD>This is another item description. ... </DL> MENU and DIR have fallen out of favor, even though they are useful. They would normally be displayed as multi-column lists, which Mosaic doesn't support, which is why they aren't used. Also, Mosaic screwed up the DL lists, as the DD starts on a different line than the DT. Mosaic is the web, all bow to Mosaic. Lists can be nested, with nice results on most browsers. Inlined Images The orignal idea was that inlined images would be used to produce special characters and such, in a similar size as the font. That's why they are inlined, rather than a separate block. Well, people use them as figures, big surprise. Gifs are most universally accepted. X11 bitmaps are allegedly supported by all Mosaic browsers, though I haven't seen this. Remember that for any 8 bit display, the inlined image will be shown with very few colors (especially if there are alot of images), whereas external images will show with the maximum available colors. This is also browser dependent. In general, if you are going for high-resolution images, inline only a small sample (thumbnail) as a link to the full size image. Too many inlined images take forever to load. Remember, they'll always load fastest from your own site, everyone else will have it worse than you. Also, smaller images load faster. Use thumbnails. A single larger image will also load faster than several smaller images. Preformatted Text Strangely, the line feed immediately following the <PRE> tag is ignored, as is the one immediately preceding the </PRE> tag. While this is common, it is strictly a choice of the browser, and can even be interpeted as incorrect behaviour. But it is so common that I doubt it will ever be changed. Font Changes The generic font changes usually map to one of the three specific font changes. The generic font changes are recommended. Forms You can't make forms work without being able to modify and/or configure the web server that the form points at. Jot is an undocumented feature. It seems the the INPUT types of "select" and "textarea" correspond to the SELECT and TEXTAREA tags, although since INPUT has no ending tag, this isn't clear to me how they work. TYPE=hidden is used to store state, in the VALUE parameter. All of the types must be lower case. ------------------------------------------------------------------------ For More Information Lots of good sources of information on HTML are on the web. Below are additional sources of information. Introductory Documents A Beginner's Guide to HTML How to Write HTML Files Introduction to HTML Fill-out Forms Fill-out Forms Overview Style Guides The following offer advice on how to write ``good'' HTML: Composing Good HTML CERN's style guide for online hypert Additional References The HTML Quick Reference Guide, which provides a comprehensive listing of HTML codes The official HTML specification A description of SGML, the Standard Generalized Markup Language Dan Connolly's HTML Design Notebook. Dan Connolly is one of the originators of HTML. ------------------------------------------------------------------------ Written by Tom Fine, who likes and uses Mosaic, despite the attitude. The section on other sources was largely stolen from NCSA's Beginner's guide to HTML.

HTML Quicker Reference General ... Encloses the entire document and overrides other filetyping mechanisms. ... Encloses the header (TITLE) ... <TITLE> The title of the document <BODY> ... </BODY> Encloses the body of the document. <Hn> ... </Hn> Section heading, n=1 (biggest) to 6 <PRE> ... </PRE> Encloses block of text to be shown verbatim. (Fixed width font; line feeds are honored.) <BLOCKQUOTE> ... </BLOCKQUOTE> Encloses block of text that is a quote. <ADDRESS> ... </ADDRESS> Information about the author, last update, etc. Lists <UL><LI>... </UL> Unordered list <OL><LI>... </OL> Ordered list <MENU><LI>... </MENU> Menu list <DIR><LI>... </DIR> Directory list <LI> Precedes each item in the above lists <DL><DT>... <DD>... </DL> Definition list <DT> Precedes each item title in DL <DD> Precedes each item definition in DL Anchors/Links <A NAME="..." HREF="URL"> ... </A> Creates a link (HREF) or anchor (NAME) or both. Inlined image <IMG ALIGN="..." SRC="URL" ALT="..."> Inserts an image from SRC, or text from ALT if the image can't be used. ALIGN is one of top, middle, bottom (default) Text flow <BR> Force a line break <P> Add a paragraph break <HR> Horizontal rule (pseuedo page break) Generic Font Changes <DFN> ... </DFN> Word to be introduced/defined <EM> ... </EM> Emphasis <CITE> ... </CITE> Citation of book, article, movie, etc. <CODE> ... </CODE> Piece of computer code <KBD> ... </KBD> Example of keyboard entry <SAMP> ... </SAMP> Example of computer output <STRONG> ... </STRONG> Strong emphasis. <VAR> ... </VAR> Emphasized font. Specific Font Changes <B> ... </B> Bold font. <I> ... </I> Italic font. <TT> ... </TT> Typewriter font. Special Characters & & < < > > Comments  Stuff in a tag like this is ignored. (It's not really a tag, its length is unlimited) It can NOT include other HTML tags. Indexing/Forms <ISINDEX> This document is a searchable index. This is used separately from forms. <FORM ...> ... </FORM> Encloses the entire form. ACTION= URL to use when form is complete METHOD= GET or POST (must be uppercase) ENCTYPE= encoding, mostly unused <INPUT ...> Some type of input field TYPE= textarea, password, checkbox, radio, select, button, submit, reset, hidden, jot (must be lowercase) NAME= name of the field VALUE= value of button (label for submit and reset) CHECKED (checkbox/radio) this item selected by default SIZE= displayed field width, in characters MAXLENGTH= maximum field width, in characters <SELECT ...><OPTION ...> ... </SELECT> A list of items to select NAME= name of the field SIZE= use scrollable list with size elements MULTIPLE multiple selections allowed <OPTION ...> Precedes each item in the option list SELECTED This option is selected by default <TEXTAREA ...> ... </TEXTAREA> A multiline text field, enclosed text is the default value displayed. NAME= name of the field ROWS= number of displayed rows COLS= number of displayed columns URLs protocol://host:port/path#anchor protocol is one of http, gopher, ftp, file, telnet, wais, news, mailto #anchor is optional, :port defaults to 80 if left out. path#anchor Uses the protocol, host, and port of the current document. #anchor Jump to another place in the current document. ------------------------------------------------------------------------ Additional Information Note that much of the above information is on the de facto behaviour of Mosaic 2.4, particularly the stuff relating to the FORMS. General Rules Anything not enclosed in special tags is interpreted as a continous stream of text with no line breaks. HTML tags are enclosed in angle brackets tags are case insensitive tag parameters are case insensitive (or should be - the forms GET/POST at least isn't, also other FORMS parameters.) Extra spaces are ignored if there is more than one in a row. Line feeds are always ignored (note that many examples below include line feeds while others don't. This is because I've used what I feel looks natural, but it is not necessary). You will get different results on different browsers. When a browser finds a tag it doesn't recognize, it is supposed to ignore it. Basic document Of the stuff below, only the title is absolutely necessary. And the HTML tag is useful if you don't want to name your file *.html. <HTML> <HEAD> </HEAD> <TITLE>Title of the document<TITLE> <BODY> Body of the document </BODY> </HTML> Keep in mind that it is common to repeat the TITLE as a header for the document. This is because Mosaic set a de facto standard that titles are not shown in the document. Let us all bow and kiss Mosaic's feat. Headings In Mosaic for X, the 1-3 are large enough to be considered headers, other browsers use much larger fonts than Mosaic for X. Almost all browsers separate the header onto a line of its own. Anchors/Links Quotes around the NAME and the HREF parameters aren't usually necessary, but are a good habit to get into (especially for HREFs). Originally the NAME was an absolute requirement. Nowadays, apparently you can get by without it. If used, the name should always start with a letter. Names are case sensitive (I think). People recommend relative links, I recommend caution. You have to change relative links less often, but when you do have to change them, it's harder to do. I'm happy with absolute path names, because I know I can write a script to fix things if I move things around. Also keep in mind that the way .. works is still both server and client dependent. In general, .. will be in terms of the logical web file system, rather than the physical file system. This is true because the client should convert things to full path names before making the request. If you can, use cut and paste to include an HREF; this protects against typos. If you only want an anchor, but not a link, don't include any HREF. Lists Just a couple of clearer examples. <OL> <LI>This is an item. <LI>This is another item. ... </OL> <DL> <DT>This is an item. <DD>This is an item description. <DT>This is another item. <DD>This is another item description. ... </DL> MENU and DIR have fallen out of favor, even though they are useful. They would normally be displayed as multi-column lists, which Mosaic doesn't support, which is why they aren't used. Also, Mosaic screwed up the DL lists, as the DD starts on a different line than the DT. Mosaic is the web, all bow to Mosaic. Lists can be nested, with nice results on most browsers. Inlined Images The orignal idea was that inlined images would be used to produce special characters and such, in a similar size as the font. That's why they are inlined, rather than a separate block. Well, people use them as figures, big surprise. Gifs are most universally accepted. X11 bitmaps are allegedly supported by all Mosaic browsers, though I haven't seen this. Remember that for any 8 bit display, the inlined image will be shown with very few colors (especially if there are alot of images), whereas external images will show with the maximum available colors. This is also browser dependent. In general, if you are going for high-resolution images, inline only a small sample (thumbnail) as a link to the full size image. Too many inlined images take forever to load. Remember, they'll always load fastest from your own site, everyone else will have it worse than you. Also, smaller images load faster. Use thumbnails. A single larger image will also load faster than several smaller images. Preformatted Text Strangely, the line feed immediately following the <PRE> tag is ignored, as is the one immediately preceding the </PRE> tag. While this is common, it is strictly a choice of the browser, and can even be interpeted as incorrect behaviour. But it is so common that I doubt it will ever be changed. Font Changes The generic font changes usually map to one of the three specific font changes. The generic font changes are recommended. Forms You can't make forms work without being able to modify and/or configure the web server that the form points at. Jot is an undocumented feature. It seems the the INPUT types of "select" and "textarea" correspond to the SELECT and TEXTAREA tags, although since INPUT has no ending tag, this isn't clear to me how they work. TYPE=hidden is used to store state, in the VALUE parameter. All of the types must be lower case. ------------------------------------------------------------------------ For More Information Lots of good sources of information on HTML are on the web. Below are additional sources of information. Introductory Documents A Beginner's Guide to HTML How to Write HTML Files Introduction to HTML Fill-out Forms Fill-out Forms Overview Style Guides The following offer advice on how to write ``good'' HTML: Composing Good HTML CERN's style guide for online hypert Additional References The HTML Quick Reference Guide, which provides a comprehensive listing of HTML codes The official HTML specification A description of SGML, the Standard Generalized Markup Language Dan Connolly's HTML Design Notebook. Dan Connolly is one of the originators of HTML. ------------------------------------------------------------------------ Written by Tom Fine, who likes and uses Mosaic, despite the attitude. The section on other sources was largely stolen from NCSA's Beginner's guide to HTML.