Hole in the boiler room wallHow To Create HTML PagesHole in the boiler room wall
Tips and tricks for encoding pages for the Web

HTML stands for HyperText Markup Language. It is the method of encoding text files which carry information and format 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 | Tutorials | 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 with the filename extension .html, and finally you take a peek at the document by dropping it onto a browser 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 20K in filesize, if at all possible. 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 50K, if at all possible.

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. Otherwise, when using graphic-image files downloaded from the Internet, bear in mind the possible legal implications such as theft of intellectual property. U.S. and international copyright treaties allow you to download files from Web pages. Image URLs

Each graphic image on a Web page, no matter how large or small it appears, is assigned its own address (Uniform Resource Locator). To find the URL for a particular graphic . . . Transparent GIFs
To make an image blend into the background on a Web page, make the .GIF image file transparent. Small buttons
Keep the file size of buttons, icons and other small graphics for a Web page under 5K. That way, each graphic will load in a fraction of a second.

Small graphics
Make the file size of images small and, therefore, fast to download. Dithering system colors
Dithering means simulating colors on a computer screen by putting pixels of different colors together.

Almost all graphic images on the Web are saved as .GIF or .JPG or .PNG files. Blurry JPEGs
If a JPG graphic on a Web page looks blurry, the JPG may have been squeezed to a very low compression ratio. Reducing photographs
Photographs, which often are very large files displaying millions of colors, can be reduced without extreme loss of quality.

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.

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.

Style sheets
You can use "Cascading Style Sheets" – the CSS addition to the HTML standard – to define exactly which fonts, colors, sizes and styles to use for each element in a Web page.

HTML Tutorials Online

Here are some good, free HTML tutorials on the Web:
Resources for Courses »

© 2013 Dr. Anthony Curtis, Mass Communication Dept., University of North Carolina at Pembroke    email    home page