Staff Handbook: Skills: HTML tips and tricks

Skills

Tools

Tasks

DLA Home

Staff Handbook: Skills : HTML and General Design Guidelines

Reference Materials

Web Monkey is a quick reference on the basics of HTML and includes a lot of links to other sites.

The World Wide Web Consortium (W3C) sets the standards for markup languages. Everything you need to know should be here.

A Simple Guide to HTML is an easy site to get around. Has good information on Style Sheets, JavaScript, and DHTML.

There are two really good books on the shelf that will help you out. They are the O'Reilly books on HTML and DHTML.

Common Mistakes

The biggest mistake while doing ejournals is copying and pasting from one journal to another. While copying the header and footer from a previous journal saves a lot of time there are a few things that you should watch out for:

Make sure that the closing </HTML> and </BODY> tags are outside of the  comment
In many of the journals the header will contain information specific to that journal only. Things such as the date or volume number must be changed with every journal.
The title will also be changed with every journal. This is very easy to miss since it is at the very top of the document.
If you do copy the header and footer make sure you only copy these parts and not any content of the journal. For the header only copy down to  and for the footer only copy from the  down.
Another thing to watch out for are deprecated tags. These are tags that will not be used in later versions of the HTML standard. The two most common of these are the underline <u> tag and the font <font> tag. For more information on these two tags and how to correct them take a look at the O'Reilly HTML book on pages 85 and 90.

HTML Standards

There have been four versions of HTML so far. The latest out right now is HTML 4.01. This version released in December 1999 fixes bugs that were in HTML 4.0. A list of these changes can be found here. To read more on all of the versions of HTML you can go here on the World Wide Web Consortium's web site.
At the top of your HTML documents you should include a Document Type Definition (DTD). This message makes sure that your document is compliant with the standards of the W3C. There are different versions of DTD's. Some are more restrictive than others and not all browsers support all of the DTD's. An easy way to insert this message into your document when using BBEdit is to go to:
Markup >
Document Type...
A window will come up with a default DOCTYPE like the one below.

This is the DOCTYPE that you will want to use. Just click on Apply and the message will be inserted in the document. If for some reason you want to use another standard click on the arrows next to the DOCTYPE. You will then be given a list of different DTDs that you can use.

Web Safe Colors

You can put colors in your document with a six-digit hexadecimal number. This number represents red, green, and blue. The first two digits correspond to the red component of the color. The next two correspond to the green and the last two correspond to the blue. A value of 00 means that the color is completely off and a value of FF means that it is completely on. An example on how to set a color for a visited link is below.
<body vlink = "#6666FF"> This is the color
BBEdit has a web safe color palette that you can use to insert the color into your document. To access the palette go to:
Windows
Web Safe Colors
Below is the window that will come up.

As the window explains all you need to do is click on the color you want and it will insert the six-digit hexadecimal number wherever your cursor is in the document. These web safe colors will work in any browser.

Style Sheets

Style Sheets can be used to control text font styles and sizes, colors, backgrounds, alignments, and so on. More importantly style sheets allow you to impose these things uniformly over the entire document or a collection of documents. An example is given below.
<style type = "text/css">
body {font-size: 14pt}
</style>
This example would set all of the text in the <BODY> tags to 14 point. This is also a good example to show you how you can get around using the <font> tags.
Another good thing about style sheets is the fact that it is not case sensitive. A really good reference for style sheets is in the O'Reilley HTML book. It is chapter 9, Cascading Style Sheets, on page 270.

<blockquote> tags

The text inside blockquote tags are set off from the regular document text. The text usually has indented left and right margins and sometimes italicized. Browsers handle the blockquote differently. Many times you will use this for long quotations in a document. Below is an example of a blockquote.
<blockquote>
This text is blockquoted. Notice how it is set off from the regular document text.
</blockquote>
Not only is this feature nice for quotations, but you can use this to blockquote an entire document. Actually it is preferred if you do blockquote every document that you make. Notice how this page is entirely in blockquotes.

ALT option for <IMG> tags

The ALT option in <IMG> tags specifies alternative text the browser may show if the image is not displayed or if it is disabled by the user. You should use this option in every image you put in a document. By doing this will give the user some indication of what the image is if it is not available. An example of the ALT option is below. The text that would show up if the image was not available is in blue.
<img src = "http://scholar.lib.vt.edu/staff/handbook/images/ex.gif"> alt = "Example">
Graphical browsers ignore the ALT option if the image is available. Nongraphical, text-only web browsers put the ALT text directly into the content flow of the document.

http://scholar.lib.vt.edu/staff/handbook/skills/html/tips_and_tricks.html
Last updated on: Monday, 30-Jul-2001 16:47:30 EDT

Display the print-ready version of this document.