General <HTML> ... </HTML> Encloses the entire document and overrides other filetyping mechanisms. <HEAD> ... </HEAD> Encloses the header (TITLE) <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 <!-- Comments go here --> 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. FREE MARS
<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.
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.
<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.
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.
Fill-out Forms Overview
The following offer advice on how to write ``good'' HTML: