other publications


HTML Checklist

  1. HTML (hypertext markup language) is written in (ASCII) text and encoded with tags surrounded by less-than (<) and greater-than (>) brackets.

  2. Web pages are often created on a local computer (not necessarily online) and uploaded to an internet server using an FTP program.

  3. File names should be less than 8 characters with a 3-letter extension (.htm); e.g. "filename.htm"

  4. Tags are usually "opened" and "closed": <command></command>. Failure to close a tag will leave that feature on. Spacing and tag syntax are important in most cases. Tags are not case-sensitive.

  5. The code to begin a basic webpage:

    <html> <head> <title>Top line of browser window </title> <meta content, title> </head>
    <body>Content </body> </html>

  6. You can view the code for any web page by selecting Source in the browser View menu.

  7. Use the <title> tag to describe your page for the top of the browser window.

  8. Use <meta> tags to describe the content of the page for search engines.

  9. Body tags include:
    • bgcolor (US spelling, background color)
    • background (inserts tiled background image)
    • text (text color)
    • link (color for an external link)
    • alink (active link, color when link is selected)
    • vlink (visited link).
    Colors can be defined by hexadecimal numbers (eg., #000000=black, #FFFFFF=white) or words (text=black bgcolor=white).

  10. Browser-safe Color Chart (www.mala.bc.ca/~soules/nhue.gif): the colors on this chart will display the same for both PCs and MACs.

    colour cube

  11. The body tag for this page: <body bgcolor="#FFFFFF" text="#000000" LINK="#CC3300" ALINK="#666666" VLINK="#990000">

  12. Decide what size screen resolution (in pixels per inch) you are designing your page for: 640 x 480, 800 x 600, 1024 x 768 are common. Screen resolution can be changed by the user.

  13. Use tables for layout. The code for a simple centered table that fills 80% of the screen looks like this:

    <center><table width=80%><tr><td>Place contents here</td></tr></table></center>

    This table will adjust to the user's screen resolution and create margins of 10% on both sides of the content. The size of the table can be given an absolute value in pixels as well: <table width=600>

  14. TR = table row, and starts building the table horizontally from left to right. TD = table define, and creates a cell along the row. The code for a table with 3 rows of 3 cells each:

    <center><table width=80%>
    <tr><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
    <tr><td>cell 4</td><td>cell 5</td><td>cell 6</td></tr>
    <tr><td>cell 7</td><td>cell 8</td><td>cell 9</td></tr> </table></center>

  15. Tables can be nested (built inside one another).

  16. Table cells can have different background colors:

  17. External links: <a href="URL">Name of link, or Universal Resource Locator</a>

  18. Images are inserted with the <img src> tag. A typical tag for inserting an image:

    <img src="image.gif" alt="description of image" width="x pixels" height="y pixels" hspace="horizontal space of image from text" vspace="vertical space from text" border="width of border if image is also a link" align="left or right">

  19. There are two common formats for images on the web: JPEG (.jpg) for photographs and GIF (.gif) for illustrations.

  20. HTML files are written in text; images are in binary code. Any images on a webpage must be included as separate files, usually found in the same folder as the .htm file.

  21. PCs display images at 96 ppi (pixels per inch); MACs at 72 ppi. When preparing images for webpages, save image files at one of these resolutions.

  22. Keep image files as small as possible to reduce latency: the speed at which a page will display in the browser.

  23. Most html composers (FrontPage etc) automatically insert the path name for images. When you change the location of your html files--for example, by FTPing to a server--you need to change the path name for the images in a text editor.

    © Marshall Soules 2002
    Fair Dealing applies.