Hole in the boiler room wallThe Boiler RoomHole in the boiler room wall

Tips on HTML Pagework

HTML stands for HyperText Markup Language. It is the method of encoding the text files which carry information and format the pages seen on the World Wide Web. HTML commands, known as <tags>, are embedded in the text of a page. A Web browser, such as Firefox, Safari, Chrome or Internet Explorer, translates HTML-encoded pages to display informative text, graphics and links on your computer monitor. Here are some helpful tips on how to design your own cool Web pages.

You may click one of these shortcuts or scroll down the page:
| Home Page | Graphics | Photographs | Navigation | Frames | Styles | Tutorial | Colors |

What you need to get started
Creating your own Web page is not difficult. First, you add HTML <tags> to an information document, then you save the document somewhere on your computer as a plain-text file, and finally you take a peek at the document to see how it looks as a Web page.

Home page theme
Keep your home page interesting. Base it around a theme or story.

Small home page
Make your home page accessible to everyone by making it quick to download. Keep your images small – under 10K in filesize. Keep the background image simple and small. This will speed the loading of your page and help keep the text over top of the background easy to read. Even better, use a background color rather than a background image. Limit your entire home page to under 40K.

Premixed Colors
The words, links and backgrounds on your page can be shown in different colors. Colors are specified by a six-digit "number." For instance, the color Blue is represented by 0000FF. To make things easier, several widely-used colors have been given common names. Now, identifying a color by name is equivalent to identifying it by number. Here is a list of predefined color names with color swatches.

Should you beg, borrow or steal artwork?

It's fun to browse the Web for fresh images for your pages. A quick search will turn up a gazillion freebies in the public domain for your use. Public domain means nobody owns the artwork. Many Web artists have published pages of their art and placed those artworks in the public domain for use by anyone. Otherwise, when using graphic-image files downloaded from the Internet, bear in mind the possible legal implications. Of course, you can't own information, only the way it's presented. And, U.S. and international copyright treaties allow you to download files from Web pages. However, those U.S. and international rules control how you use the files. In particular, if you wish to use copyrighted graphics or text from someone's Web page, contact the page publisher and ask for permission (unless the publisher has posted a notice permitting use of artworks on other pages).

Image URLs

You know that a graphic image on a Web page is assigned its own address (Uniform Resource Locator). To find the URL for a particular graphic, Windows users right-click the mouse over the image and choose "Properties." Macintosh users click and hold down the mouse button on the image and choose "Copy Image Location."

Transparent GIFs
To make an image blend into the background on a Web page, make the .GIF image file transparent. That is, make the background color of the image match the background color of your Web page as closely as possible, then make that background color the transparent color in the .GIF image.

Small buttons
Keep buttons, icons and other small graphics for a Web page under 5K. That way, on a 28.8 Kbps modem connection, each graphic will load in a second or less.

Small graphics
Make images small and, therefore, fast to download. Lower the "resolution" or color depth of the image to 256 or fewer colors (8-bit color or 72 dpi). Reducing the number of bits per pixel lowers the size of the file.

Dithering system colors
Dithering means simulating colors on a computer screen by putting pixels of different colors together. Most computer operating systems offer 216 colors which will not dither. Use the 216 colors for a clean, even look on your Web pages.

Almost all graphic images on the Web are saved as .GIF or .JPG/.JPEG files. In fact, most are .GIF images. If an image is more like a drawing or painting than a photo, save it as a .GIF file. If it is an actual photograph, save it as a .JPG file. If the photo .JPG looks bad, re-save the original as a .GIF file. Remember, JPEG file throw away image data so be sure not to try to re-work the .JPG file. Work with the original, uncompressed image.

Blurry JPEGs
If a JPEG graphic on a Web page looks blurry, the JPEG may have been squeezed to a very low compression ratio. To correct the problem, take the original, uncompressed image and re-save it as a JPEG with a higher compression ratio – 75% or higher should work fine. JPEG files save space by throwing away image data so be sure not to work with the too-compressed image file. Work with the original, uncompressed image.

Reducing photographs
Photographs, which often are very large files displaying thousands or millions of colors, can be reduced without extreme loss of quality. Lower the "resolution" or color depth of the image to 256 or fewer colors (8-bit color or 72 dpi).

Simple graphic navigation bar
Here's how to design a simple graphic navigation bar (navbar) without using image maps:
  1. Make a navbar image in your favorite graphic-creation program.
  2. Use the graphic program to cut the navbar into blocks.
  3. Save each cut-apart block as a separate file.
  4. In HTML, assign each cut-apart graphic an A HREF link.
  5. Use the ALIGN="center" and BORDER="0" attributes in the graphic's IMG SRC tag.
  6. Avoid putting extra HTML tags or text between the cut-apart graphics.
  7. If your navbar uses more than one row of buttons, use the BR tag to separate rows.

While some computer nerds are enthralled by them, lots of Web-browsing folks are bugged by Frames. If you simply must use Frames in your HTML page, use as few as possible and give your visitors the option to choose between Frames and no-Frames versions of your pages. Frames sometimes help organize a page so you can have a standard, consistent interface, but Frames take longer to load because you load separate HTML documents for each Frame and because the extra Frames take more time to draw on the screen. Remember, many people prefer to have Frames turned off for faster downloading or they use browsers that don't support Frames.

Style sheets
You can use "Cascading Style Sheets" – a new addition to the HTML standard – to define exactly which fonts, colors, sizes and styles to use for each element in a Web page. Read more about style sheets at http://www.w3.org/pub/WWW/TR/REC-CSS1

HTML Tutorials Online

Here are some good, free HTML tutorials on the Web:

Top of this page Ask Questions The Boiler Room Search STO E-mail STO cover

Copyright 2011 Space Today Online