HTML H T M L   G u i d e
The Ultimate Reference Guide to Hypertext Markup Language
The HTML Writers Guild and the World Wide Web Consortium

1. Getting Started 2. HTML Tags 3. Minimal HTML Document 4. Page Options 5. Character Formatting
6. Lists 7. Hyperlink to URL 8. Including Images 9. Images, Sound & Animation 10. Client-Side Image Maps
11. Meta Tags 12. Tables 13. Forms 14. Frames 15. NOSCRIPT


External Images
You may choose to have an image open as a separate document from a text link or link from a smaller 'thumbnail' image; this prevents the slow loading of your document from many large images.
Example: To include a reference to an external image, enter:

<A HREF="logo.gif">link to image</A>
Example: To use a smaller image as a link to a larger image, enter:
<A HREF="logo.gif">
<IMG SRC="small_logo.gif">

Sounds The syntax for linking to external images, movies and sounds is the same; the only difference is the file extension of the linked file.

<A HREF="hello.wav">link</A>
<A HREF="">link</A>

Common File Types & Extensions
Plain text:
.txt or .rtf (rich text format)
Images: GIF (Graphical Interchange Format): .gif, JPEG (Joint Photographers Expert Group): .jpg, .bmp (Bitmap), .cur (Cursor), .ico (Icon), .png (Portable Network Graphics), .tiff (Tagged Image File Format)
Sound files: MIDI (Musical Instrument Digital Interface): .mid, .wav (Waveform Audio File Format), .mp3 (Motion Pictures Expert Group, layer-3), .au (Audio file format), .aiff (Audio Interchange File Format), .aac (Advanced Audio Coding), .ra or .ram (RealAudio Media). wma (Windows Media Audio), .avi (Audio Video Interleave), flac (Free Lossless Audio Codec), .ac3 (Dolby Digital)
Movie files: .mpg (Motion Pictures Expert Group), .flv (Flash Video), .mov (QuickTime), .ra or .ram (RealAudio media), .mp4 (Motion Pictures Expert Group, layer-4), .wmv (Windows Media Video), .avi (Audio Video Interleave), .swf (Shockwave Flash), .mkv (Matroska), .vob (DVD video object)
Web files: HTML: .htm or .html, JavaScript: .js, PHP (Hypertext Preprocessor): .php, CGI (Common Gateway Interface) script: .cgi, XML (Extensible Mark-up Language): .xml, DHTML (Dynamic HTML): .dhtml, cHTML (Compact HTML): .chtml, CSS (Cascading Style Sheet): .css
Microsoft Office files: Word document (.doc or .docx), Excel Spreadsheet (.xls or .xlsx), PowerPoint Slideshow Presentation (.ppt or .pptx), Publisher (.pub)
Windows Applications (a.k.a. 'Win-apps'): .exe (Executable program files), .dll (Dynamic Linking Library), .scr (Screen Saver), .oca (Visual Basic control type library cache), .ocx (Object Linking and Embedding/OLE control), .zip (compressed downloaded files)

Note: Keep the capabilities and limitations of your intended viewers in mind; not all format are supported by every system and/or browser...this means that in order to view/hear any of these file types, the user must have software for those corresponding file types installed on their system! Thus, for compatibiltiy across all 5 major browsers (and WebTV/MSN-TV users), for images I stick with .gif and .jpg; for sound files I stick with .mid or .wav; for movie files I stick with .wmv, .mpg, or .mov; and for everything else the user can download such content and to do so, use hyperlinks! Keep in mind that any of these extensions can be capitalized...

I recommend downloading Flash Video Downloader Suite, which is safe, FREE, easy to use, and allows you to download virtually any video file from the Web (such as embedded ones from YouTube). I think the most beneficial feature of this suite is its Converter section, which allows you to change various media files into other media files that your system is compatible with! If you are looking to compress large files (such as .avi files from FlipVideo) to a smaller file size that Apple's QuickTime player is compatible with, then you will need to install/upgrade to QuickTime Pro which cost me $30.

Background Sounds
Background sounds can be inserted by adding the BGSOUND SRC= attribute within the <HEAD> of your document; the LOOP attribute and the associated number value specifies how many times the sound file will repeat: (1 and greater, -1 is continuous); Example:
<BGSOUND SRC="sound.mid" LOOP="number of loops"">

Note: There is no end tag for the BGSOUND tag. Also, notice I chose to use a MIDI file, which are usually small and practically all system sound cards support a result, they load up fast even on slow connections. All of this is pointless if the background sound is either annoying, does not have anything to do with the site, or if the user's volume is disable/turned down. In addition, only Microsoft Internet Explorer and WebTV (MSN-TV) users will hear this as those are the only browsers that support the BGSOUND tag.

For Google Chrome, Opera, Mozilla Firefox, and Apple Safari users you will have to use the EMBED tag, which is to be placed anywhere in the BODY of your document...doing so will automatically leave space for a default sound object to appear (which looks like blank space). Therefore, I suggest placing the EMBED tag just before the closing </BODY> tag, with both a Paragraph <P> and a forced line break <BR> tag above it to sort of 'space' it away from other elements of your page. However, because you have already placed the BGSOUND tag within the HEAD tags of your document (for MSIE and WebTV/MSN-TV users), you will need a little extra code that tells the MSIE and WebTV/MSN-TV browsers to ignore the following EMBED tag:
<![if ! IE]>

Note: Again, Apple Safari, Mozilla Firefox, Opera, and Google Chrome all support the EMBED tag, but not all of those 4 browsers support each of those attributes you see above; such as HIDDEN, which some browsers such as Google Chrome will ignore. The AUTOSTART attribute with a value of TRUE obviously indicates that the sound file will automatically play when the page loads, and in this case, the LOOP attribute as two possible values: TRUE or FALSE.

Back To Top


Client-Side Image Maps <MAP></MAP>
Image maps create mouseable regions in an image called 'hotspots' or 'hot-zones' defined in HTML by coordinates. By associating URLs with hotspots, one image can contain hyperlinks to URLs; this is useful for graphical navigational menus and toolbars.

Note: By associating URLs with hotspots, one image can contain multiple hyperlinks to URLs.

In the HTML source, the client-side image map consists of three parts:

  1. The <MAP></MAP> element has one attribute: NAME which is used to associated a name with a map; this name is then used by the USEMAP attribute on the <IMG> element to reference the map via a URL.
    Note: the value of the NAME attribute is case sensitive (as are all values for attributes within HTML, even though the elements such as tags and their corresponding attributes themselves are not case sensitive).

  2. The <AREA> element, which can take the following attributes: SHAPE, COORDS, HREF, NOHREF and ALT.
    Note: The SHAPE and COORDS attributes define a region on the image; if no shape is specified, the default shape RECTANGLE is used.

    Possible Shape Attributes
    shape=rect coords="leftx, topy, rightx, bottomy"
    shape=circle coords="centerx, centery, radius"
    shape=poly coords="x1,y1, x2,y2, x3,y3, ..."

    Note: x and y are measured in pixels from the left/top of the associated image.

  3. The <IMG> element is used to include the image in the page with an ISMAP attribute or the USEMAP attribute set to the name of the image map.

The image used in the illustration (below) is a single graphics file. In the image, each colored shape is associated to a different action; the circle is linked is linked to; the square is linked to the page of that Web site called 'about me'; the polygon is linked to the page called 'digital'.

Programs such as Mapedit allow loading the GIF image into a window; polygons, circles, and rectangles can be drawn on the image and URL's designated for each shape forming a hotspot; it also allows you to add, edit or delete hot spots; Mapedit will create the map file and comes with an on-line help manual; download a copy of Mapedit from for $15.

Example HTML Code for Hotspot


Meta tags can be used for more than just page effects; they also have more practical uses, such as forwarding the user to another page or allowing search engines to read keywords; below are some examples of each.

The refresh tag automatically forwards the user to a new page; this is commonly used in intro pages--also referred to as splash pages--to let the user see an introduction to the site before being guided to the real home page; another common use of the refresh meta tag is to forward users from out-of-date links; this is important for keeping pages that are already registered on search engines, even though the domain may have transferred; the search engines often contain many dead links that place higher than functional ones; it is important to keep all the pages that you've registered with the search engines because the links will show up on the search engines anyway; it is better to have them forward to the correct domain; this way, you can be sure that your site is getting more visitors, and it is much easier than having to re-register a new set of pages; the refresh meta tag goes inside the <head> of the document, like this:

<META http-equiv="REFRESH" CONTENT="6;URL=">
<P ALIGN="CENTER">&nbsp;</P>
<FONT FACE="Arial" SIZE="2" COLOR="#000000">
This page automatically forwards you to our home page in 6 seconds...

Note: You may have noticed that in the middle of the code up there I used an escape sequence: &nbsp; which inserts a single space. Use this escape sequence whenever you need to insert some (horizontal) space between text and images, or some space between images/text and the edge of a table or the browser window itself (especially necessary if your text/images etc. are not centered and therefore left-aligned, and/or if you prefer a little space before the right edge of the browser window if you have right-justified your elements). You can insert multiple space by just repeating this escape sequence (consecitively).

The amount of time the page takes to refresh is specified in the value of the CONTENT attribute, after 'REFRESH'; in this case, the page refreshes after six seconds.

Here are more examples of common meta tags:


  • A way to indentify yourself as the author of the document.

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

  • Specifies the default style sheet language.

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=characterSetName">

  • Specifies the document character set in use on the page.

<META NAME="date" CONTENT="date">

  • Tells when the page was created (replace the 'date' value of the CONTENT attribute only with the date you created or last edited/modifed the document).

<META HTTP-EQUIV="Content-Script-Type" CONTENT="type">

  • Specifies the scripting language used (use only if using one such as JavaScript, PHP, Perl, CGI, VB, etc.).

To place high on the search engines for specific keywords, you must first create keyword meta tags; in this example, the keywords concern HTML and Web design; you can place as many keywords as you wish, though they should be related to the contents of the page; using copyrighted names and other trademarks is prohibited.

<META NAME="keywords" CONTENT="HTML, HTML tutorials, Web tutorials, Web building, Web design">

It is also common to include a separate tag for a description of the page:

<META NAME="description" CONTENT="This is a tutorial to help you learn HTML and Web page design.">

Meta Robots Tag
There may be certain pages in the same folder as the ones registered with search engines that you do not want indexed by the search engine spiders; to prevent these pages from being indexed, use the meta robots tag:

<META NAME="robots" CONTENT="noindex,nofollow">
<META NAME="description" CONTENT="This page ...">

Back To Top


Tables are very useful for presenting tabular information and organizing complex Web pages; a table consists of heads to explain what is included in columns and/or rows, rows for information and cells for each item. Tables are also used for organizing various elements of a Web page to be displayed in a way that is not only logical (makes sense) but is easy to read and navigate for the user. This is accomplished by grouping similar elements in a table which in turn allows you to properly align such elements (text, hyperlinks, images, etc.) so that they are properly spaced. Many Web pages use tables for this very purpose and because such tables may not have borders, you probably did not even know that such a table exists!

Table Elements
The <TABLE></TABLE> tag defines a table in HTML (use the BORDER= attribute to specify border thickness).
<CAPTION> defines a caption for the title of the table; the default position is top-center, but the attribute ALIGN=BOTTOM will position the caption below the table. An end tag is required for CAPTION.
<TR> specifies a table row within a table (rows are horizontal); you may specify the default attributes for the entire row (see Table Attributes). An end tag </TR> is required for TR.
<TH> defines a table header cell; the text in this cell is bold and centered by default; table header cells can contain other attributes (see Table Attributes for more information). An end tag </TH> is required for TH.
<TH> defines a table data cell; the text in this cell is aligned left and centered vertically by default; table data cells can contain other attributes (see Table Attributes for more information). An end tag </TD> is required for TD.

Table Attributes
ALIGN (LEFT, RIGHT, or CENTER values): the horizontal alignment of a cell.
VALIGN (TOP, MIDDLE, or BOTTOM values): the vertical alignment of a cell.
COLSPAN=n specifies the number (n) of columns a cell spans.
ROWSPAN=n specifies the number (n) of rows a cell spans.
NOWRAP turns off word wrapping within a cell.

Tables with Images
Use a table with no borders <TABLE BORDER="0"> to create the appearance of one image with multiple images; interesting displays can also be created by using table borders.

Code Example        Browser Output

Back To Top


Forms allow you to structure input from the user, such as customer response...such feedback is not only necessary for e-commerce (companies that also do business on the Internet through Web sites), but being interactive is and always has been one of the most crucial aspects of the Internet: Never underestimate the importance of allowing your visitors the opportunity to submit comments, suggestions, etc. After all, even if you have a storefront location and provide visitors of your Web site with such address and phone number--that assumes that you instead wish for them to visit your physical location or call you. Just as someone who is on the phone with customer service or actually frequents a place of business does not want to be told to go to the company's Web site for further assistance (Hello--they are talking to you now!), you do not necessarily want to direct your visitors away from your site by pushing other contact information. Instead, (since they are trafficking your Web pages) offer a way for users to fill out a form and submit all information in a standard (everyone has filled out forms that ask for name, address, and phone info, so follow conventions when designing such forms) format. Even if your site is not for business, having forms indicates the sincerity and professionalism (knowledge) of what you do.

Constructing a form is a two-part process:

  1. The form must be created within your HTML document.
  2. A program (usually C, Unix or Perl) must be created; this program is called CGI (Common Gateway Interface); CGI receives the data from your form and implements the action specified within the program.

Note: Most companies that offer Web site hosting (the business you upload all such Web pages and associated files to be stored on a server) usually have pre-formatted CGI scripts, so that you do not have to learn Perl. Search their Web site (or contact them if you are paying for their services) to learn which CGI scripts they have that will suit your needs for forms...essentially, these scripts are necessary once a user clicks your 'Submit' button so that all info entered in the form you created in HTML is processed and can therefore be submitted to say, your designated e-mail address in a pre-defined format based on the design of your form.

The syntax for creating forms consists of 3 distinct elements between the <FORM></FORM> tags:

  1. INPUT elements are the basis for various button types and text inputs.
    • Text: single line text box:
    • Radio: a group of buttons in which only one may be chosen.
    • Checkbox: a box (or many boxes) that can be checked or unchecked (numerous boxes can be checked).
    • Reset: a button set to clear form values.
    • Submit: a button to send the form data to the CGI on the server.

  2. SELECT elements create a pull-down menu:
    • OPTION elements define the menu choices.
    • The SELECTED attribute in the OPTION element specifies the default menu item to be displayed.

  3. TEXTAREA elements specify a multi-line text field.
    • The COLUMNS and ROWS attributes between the <TEXTAREA></TEXTAREA> tags specify the default value of the field.

How a Form Works
When the 'submit' button is clicked, the data from the form field is send to a program (CGI) of the URL specified by the ACTION attribute in the <FORM> tag; the NAME attribute is matched to the corresponding VALUE attribute and the program takes its action (such as sending teh data to you as Email).

Forms Code Example and Browser Output

Back To Top


Frames pages are a way to include multiple pages together within a single browser window or tab; each frames page, or frameset, acts as a template that loads pre-existing pages into their specified positions or frames; by keeping the pages in a frameset, each new page loads independently of the others; this allows you to keep the site's navigation separate from the main content or any other features you may wish to include on each page.

The use of frames pages in a Web site is also a convenient way to manage and edit the site's contents; for instance, if the navigation buttons were on the same page as the main content, you would have to change the navigation on every page whenever it needed an update; however, by using a single page as the main navigation, you only have to make changes on that page.

Simply put, visiting a site that uses frames is a page whose code only consists of displaying two or more other pages, and that code just instructs the browser how to partition the window (or tab) into columns and/or rows--where each row and/or column is a different page that occupies a specified amount of the browser window, either in pixels or as a percentage of the total height (rows) and/or width (columns). Similar to tables, using frames allows you to display many elements of your entire site and organizes them in a way that, if no border is set, probably is not even noticed by the visitor. Common uses of frames, for example, are:

  • Banner advertisements: Usually at the top of the browser window, it expands the entire (or almost) width of the screen, but also usually no more than 10-15% of the total height of the screen. Most of my sites, including this one about JavaScript (this HTML guide exists as two pages within that site which is linked to my main homepage), have such a frame--it is a separate page as you can see that actually has a borderless table inside of it to align the time/date, welcome greeting as well as any appropriate images that may or may not be clicked as hyperlinks. Banner pages are considered a frame row, and not a frame column.
  • Sidebars: Usually located along the left edge of the browser window, sidebars are considered a frame column. However, they can also exist along the right side of the browser window, if aligned to do so. These frames usually occupy most of it not all of the height of the window. Such content typically includes a menu of hyperlinks that either open in a new window (or tab) if they are separate sites, or they may link to individual pages that can be displayed within another frame currently visible. As you can see from browsing most of my site(s), I seem to prefer to use sidebars more for aesthetic appeal--they serve no other actual purpose.
  • Main content: This frame usually occupies the majority of the browser window, and therefore may be the only frame within a frameset that is allowed to have scrollbars.
  • Links: Most professional sites (especially those of large companies) may have sidebars that include hyperlinks in addition to separate frames for banner advertisements at the top and of course their main content frame, but usually also have a series of hyperlinks at the bottom of their site, as do I. Having a frame with links that is separate from the main content allows visitors to always have access to elements of your site that is beneficial for navigational purposes, such as a link for 'Contact' or one that returns the visitor back to the main page, and more. Never leave your guests wandering through your pages in order to find basic elements that should always be accessible!

Contents Frame
This will serve as the site's global navigation, which is the page containing all the main buttons, as well as other links and e-mail addresses, for navigating through the site; contact information is usually placed somewhere on this page as well; this is convenient because it offers the user easy access to the navigation, rather than having to scroll back and forth to find links; the contents frame can also be used for displaying banners, which are graphic links to other sites; each link you click on will open a page in the main frame; this is a way to open any external links (links to other Web sites) inside your site; in a normal non-frames page, linking to another Web site will cause the user to leave your site; by keeping the external site within a frameset, the user won't leave your site.

Code Example:
<TITLE>Left Frame</TITLE>
<FONT FACE="Arial">
This is the Left Frame for navigation.
<A HREF="main_frame.htm" TARGET="Main">
<A HREF="second_page.htm" TARGET="Main">
Page 2

Browser Output

Note: The Code Example above shows use of the <BASE> tag (which has no end tag). The purpose for this tag is to tell the browser which frame to load pages into from links clicked from any other page within the giving one particular frame a name of 'Main' and instructing the browser (with the BASE tag), then all hyperlinks will open only in the frame named 'Main'. However, you can bypass this with the TARGET attribute of the anchor tag (I waited until now and not earlier when first discussing hyperlinks so as not to confuse what TARGET would even be used for). Using the TARGET attribute is only applies to frames, as each frame is given a name in the FRAMESET tag (discussed further below). By specifying a name such as 'Main' as a value for the TARGET attribute, all links are opened/loaded into the 'Main' frame...but even if the BASE tag specifies a default TARGET, use of individual achor tags (Hyper-Reference = 'link') that also use the TARGET attribute can instead open a link in a different frame, or in a new window (or tab) altogether, by using the following value:

<A HREF="different_site.html" TARGET&61;"_BLANK">Open link in a new window</A>

Main Frame
This will be the main page, where the bulk of your content will go; all links from the contents frame will open in the main frame including links to other sites, if you choose.

Code Example
<TITLE>Main Frame</TITLE>
<BASE TARGET="_self">
<FONT FACE="Arial">
This is the main frame.

You can even create frames inside the main frame; floating frames or in-line frames appear inside the page; simply place the following tag inside the body of the document, specifying the page to be loaded:

<IFRAME SRC="iframe1.htm"></IFRAME>

Browser Output

Ir is important to keep the users from completely leaving your site when you offer links to other sites; normally, without frames, this is done by opening a new browser window (or tab), which may leave your site open but obscures it with the new window; frames pages allow you to open a page from another site within your own site; to do this, simply link the external pages to open in the 'Main' frame.

Now that you have the individual pages already built, you need to create the frameset, which will load both pages into one, as separate frames; there are many ways to layout a frameset; with a header or a footer, with a banner and contents, and even with in-line frames; in this instance, where the frames are divided vertically between the 'contents' frame and the 'Main' frame, they are treated as columns; you can set the size of the frameset columns in the first tag, based on a percentage of the entire page:

<FRAMESET COLS="20%,80%">

The <FRAMESET></FRAMESET> tags will replace the <BODY></BODY> tags found in normal HTML documents; the entire page should look like this:

<FRAMESET COLS="20%,80%">
<FRAME NAME="contents" TARGET="Main" SRC="LeftFrame.htm">
<FRAME NAME="Main" SRC="main_frame.htm" SCROLLING="AUTO">
This page uses frames, but your browser doesn't support them.

Note: The example above uses columns (as per the COLS attribute), but if your frames consists of horizontal rows, then replace that attribute with ROWS. Also, notice that no end tag is used for the FRAME tags. In addition, you may have noticed the second FRAME tag the use of the SCROLLING attribute: You may or may not want vertical or horizontal scroll bars to appear, therefore the SCROLLING attribute has 3 possible values: TRUE, FALSE, or AUTO (FALSE prevents scroll bars from appearing, even if the content of such frame extends beyond what is visible in the frame; and the AUTO value becomes TRUE only in the event that such frame has enough content to warrant such scrollbars).

The <NOFRAMES></NOFRAMES> tags should be placed before the </FRAMESET> tag whenever frames are used, in the event that the user's browser does not support frames (or if you somehow messed up in your code and therefore such frame info will not be displayed). Therefore, using the <BODY></BODY> tags are necessary at the point to establish a body for your Web page with such text notice...

When building framesets, it is important to make sure they look the same in different browsers; just because a page looks good in Microsoft Internet Explorer doesn't mean it will work in other browsers! Recall what I mentioned about downloading all 5 major browsers (Microsoft Internet Explorer, Apple Safari, Mozilla Firefox, Google Chrome, and Opera), as they are all free, safe, do not take up large amounts of space, easy to find on-line and install, and will allow you to check your pages for compatibility. If you have both a Mac and system running Windows, download all 5 of these browsers on both platforms (especially if there is a difference in screen resolution between computers), as well as viewing your work on browsers from mobile devices (e.g., cell phone Web browsers, iPod Touch, iPad, etc.).

By default, there will be borders on the frames; to eliminate the borders, you must specify the following inside the initial <FRAMESET> tag:


Floating Frames

Floating frames (windowless, inline frames) are great when you have a lot of text but don't want the design of the page to scroll.

To create an inline floating frame, use the <IFRAME></IFRAME> tags:

<IFRAME NAME="Frame1" SRC="frame.htm">

The IFRAME tags creates a floating frame at its location in the HTML file; Microsoft Internet Explorer renders the frame inline; the SRC (source) attribute specifies the content to be displayed within the frame.

You can also place content into the previous IFRAME tag by using a frame destination as follows:

<A HREF="" TARGET="Frame1">
Visit Neil's Site!

Back To Top


The NOSCRIPT element provides alternate content for a client-side script that was not executed; a script will fail to execute if the browser does not support the scripting language or if the user has disabled client-side scripting; NOSCRIPT should follow the SCRIPT element for which it provides alternate content.

Basically, from here on, I hope you have learned much from my HTML guide...more importantly, my intent is that you are actually using this content to your advantage by creating your own Web pages to complete a site and have a presence on the Internet. While I have other pages dedicated towards learning about the history of computers, about JavaScript, and also about programming languages such as COBOL, Visual Basic and QuickBasic, I do not have any (and probably never will) tutorials on how to design and code using them. Thus, if you wish to learn JavaScript (for example, because you are within my JavaScript site) then you should know that JavaScript code can be inserted within HTML using the <SCRIPT LANGUAGE="JavaScript"></SCRIPT> tags.

If you have any questions, concerns, comments, or need help--then please do not hesitate to contact me by clicking the link at the bottom of your browser...
Thanks for visiting and good luck coding! Let me know how you do by visiting YOUR site! Remember to update your pages often!

Back To Top


 Castro, E. (2000). HTML 4 for the world wide web (4th ed.). Berkeley, CA: Peachpit Press.