Web Page Advanced Design

International Association of Boards
of Examiners in Optometry

Web Page Advanced Design

How to use this document

This document continues the discussion begun in the Web Page Authoring Basics document. By now, you've done some work on a Web page, with good basic results. Now you're ready to learn a few advanced techniques that will help you make the page you've imagined a reality. This document discusses Web page design, including advanced paragraph and text formatting and the incorporation of multi-media.

The Basic Tools for Fine-Tuning Your Page: Attributes

Much of what you'll learn in this document involves adding "attributes" to tags you're already using. Attributes allow you to customize certain HTML tags to achieve specific formatting effects: to control alignment and spacing, for instance, or to manipulate text size. Once you've mastered these options, you'll have better control over the "look" of your page. Some attributes require you to use values with them. For spacing, you might specify the exact number of pixels, or a percentage value; for alignment, a directional or positional "value"; for size attributes, your options may be either numeric or relational values. You'll see examples of attributes and values in the rest of this document.

Special Formatting for Graphical Browsers

Most graphical browsers, such as Netscape, can display special formatting like different font and horizontal rule (line) sizes, optional bullet and number types within lists, special table formatting, and text, link, and background colors. If you use this formatting, keep in mind that text-only browsers do not display these special effects, nor are all special formatting attributes recognized by all graphical browsers. Some of the tags and attributes we'll discuss in this document only work with Netscape version 1.1 or higher. We include these here because, in many cases, the functions performed by these Netscape extensions to HTML 2.0 (the current standard) will be included in HTML 3. There is no guarantee, however, that HTML 3 will use the current Netscape tags for these functions--one more reason why Web authors need to keep abreast of new developments.

If a Browser Does not Understand a Tag Will Something Terrible Happen?

When a browser doesn't understand a tag, it simply ignores it and goes on to the next one. For example, Lynx ignores any text color tags you use, as well as the special table formatting tags you'll learn about in this document.

Adding Comments to Your Page

To make Web pages easier to trouble-shoot and modify, Web authors should develop the habit of adding comments to complex sections of their pages. For example, it's a good idea to label the beginning and end of a table (tables are discussed la ter in this document.) The standard format for comments is:
	<!--comment-->
In addition to announcing complex sections, comments can remind you of changes you want to make to your page in the future. For example, you might have a comment like this:
	<!--I'm going to put a sound file here as soon as I find it.-->
Putting comments in a consistent format makes it easy to find them all later.

Although comments do not display on your Web page, keep in mind that they are available to the public: anyone who visits your page on the Web can also look at your source code and view your comments.

Controlling the Look of Text

Alignment

The default alignment for text is flush left. To center text, you have several options. Most browsers will recognize the align=center attribute added to the basic paragraph tag set, like this:
	<p align=center>text</p>
Or, you can use <center></center> tag set, which is an HTML extension devised by the folks at Netscape, and is specific to that browser. A third option is to design a borderless table and center your text within the center table cell. For right alignment, use tabs and preformatting, or use table formatting to place text in a right-aligned table cell. (Tables are discussed later in this document).

Changing Font Sizes

If you are designing your page for Netscape, you can control relative font sizes with font-specific tags. Specify the font size used throughout the document with the <basefont> tag (no end-tag required). The basefont default, which is whatever the reader has set as his/her browser preference, is assigned a value of 3. To increase or decrease the basefont size for your document, add a tag in this format: <basefont size = value>, where value is a whole number from 1-7. The size value you choose will adjust the font size relative to the default value of 3: a value of 2 will make your text one font size smaller, while a value of 6 will make it three sizes larger. Since these are relative values, you may have to do some fine-tuning to achieve the effect you want. Remember that most folks use Times 12 point as their default text.

Netscape also allows you to control the font size of particular text sections, paragraphs, lines--even individual characters--with the <font></font> tag set. Use this format:

<font size = value >Text</font>
where value is either: You'll notice that font sizes in HTML are not measured in points. Experiment to find the best font relationships for your page. You may even want to set up a style sheet of text and headings (<h2>, for example) in all font sizes before you use them on your page.

Made to Order: Tailoring Your Ordered and Unordered Lists

Refer to the Web Page Authoring Basics document for an introduction to ordered and unordered lists. Netscape extensions allow you to control numbering in ordered lists (<ol>) with the type attribute and different letter values associated with it. For example, to use uppercase letters in your ordered list (ABC), start the list with the tag <ol type = A>. Other values for type in ordered lists are a (lowercase letters), I (uppercase roman numerals), i (lowercase roman numerals), and 1 (arabic numerals, the default type).

You can also use the type attribute to control the bullet shape in unordered lists (<ul>). To specify circular bullets in an unordered list, start the list with the tag <ul type= circle>. Use the same format to make your bullets disc or square.

Creating Tables in HTML

If you set up a table in your word-processor using tabs between items, you can pre-format it (<pre></pre>) and put it right on your Web page (see the Authoring Basics handout for details on pre-formatting text). People with either text-only or graphical browsers can then see your table. Since pre-formatted text appears in a plain fixed font, however, you may decide you want your table to be nicer looking. To create more elegant tables for graphical browsers to read, you can use special table tags and attributes.

Note: The table element is another Netscape 1.1 extension to HTML, but some other browsers recognize it. Tables will be included as a standard in HTML 3.

Define your table with the <table></table> tag set. In between these tags, you will also have to specify each particular element of the table and its contents, from rows to captions to individual cells. Use the following tags to define these details:


To specify Use these tags: And keep these this element: points in mind:
Row <tr>row details</tr> Use a set of row tags for each row in the table.
Cell <td>table cell Use cell tags for each details</td> cell in the table.
Heading <th>column or row You can have column or row heading</th> headings. Default is formatted as bold and centered.
Table title <caption>Table You can control the Title</caption> caption style with heading tags: <caption> <h1>text</h1></caption>
Here's an example of an extremely simple table:

<table> <caption><h2>Some ACC Rivals</h2></caption> <tr> <th>University</th> <th>City</th> <th>Mascot</th> <th>Team Name</th> </tr> <tr><td>UNC-CH</td> <td>Chapel Hill</td> <td>Ram</td> <td>Tar Heels</td> </tr> <tr> <td>Duke</td> <td>Durham</td> <td>Blue Devil</td> <td>Blue Devils</td> </tr> <tr> <td>NCSU</td> <td>Raleigh</td> <td>Wolf</td> <td>Wolfpack</td></tr> </table>
which looks like this:

Some ACC Rivals

University City Mascot Team Name
UNC-CH Chapel Hill Ram Tar Heels
Duke Durham Blue Devil Blue Devils
NCSU Raleigh Wolf Wolfpack

If you look at this ACC rivals table with a browser, you'll probably want to make it look better. To improve the look of your table, add attributes to the tags. For example, to put a border around the table, add the border attribute to the table tag, this way: <table border>. The following table lists several attributes and how to use them:


To control | Add this | To one | And add | Examples: this | attribute:| of these | these | formatting: | | tags: | values: |
Border | border | <table> | Border width in | <table border> | | | pixels (Default | or <table | | | with border | border = 6> | | | attribute is 1 | | | | pixel.) |
Table width | width | <table> | Number of | <table | | | pixels, or | width=440> or | | | percentage | <table | | | value (not all | width=60%> | | | browsers) |
Horizontal | align | <tr>, <th>, | left, center, | <td align = alignment | | <td> | right, justify, | right> or within an | | | decimal (for | <tr align element | | | caption, | = center> | | | default | | | | horizontal | | | | alignment is | | | | center) |
Vertical | valign | <tr>, <th>, | top, middle, | <tr valign = align-ment | align | <td> | bottom, | baseline> or within an | | <caption> | baseline top, | <th valign = element | | | bottom | top> <caption | | | | align = bottom>
The width of a | colspan | <th>, <td> | Number of | <td colspan = 2> cell, measured | | | columns | in columns | | | (default = 1) |
The height of a | rowspan | <th>, <td> | Number of rows | <th rowspan = 3> cell, measured | | | (default = 1) | in rows | | | |
As a practice exercise, try adding some of the above attributes to the North Carolina Rivals table example presented earlier. For more table attributes and information, go to the Tables in Netscape 1.1 page at
http://home.netscape.com/assist/net_sites/tables.html
and the Table Sampler page at
http://home.netscape.com/assist/net_sites/table_sample.html
You may have already realized that creating tables with table tags can be time-consuming. You'll probably decide to use them sparingly.

Controlling Horizontal Rules

The basic tag for a horizontal rule (line) is <hr> (no end-tag). You can add attributes to the following features of horizontal rules: Here's an example of a horizontal rule with special formatting:
	<hr size=6 width=50% align=right noshade>
which produces this line:

Changing Text Color

To change the color of text, add the text attribute and a color value to the <body> tag at the beginning of your document, like this:
 <body text ="#rrggbb">Your entire page</body>
Instead of #rrggbb, put in a color value, which you can select from the Background Colors page:
http://www.infi.net/wwwimages/colorindex.html
For example, if you want your page to have bronze-colored text, add this tag to the beginning:
<body text ="#8C7853">The Illustrated Story of My Life</body>
You can also change the color of the three different types of links by adding several Netscape extension attributes to the <body> tag: Here's an example that shows text and link colors:

<body text="#00FFFF" link="#FFFF00" vlink="#FFFFFF" alink="#FF00FF"> My life really changed when I discovered <a href="http://www.ncsa.uiuc.edu/demoweb/html-primer.html">World Wide Web authoring</a>. I wanted to read <a href="http://www.yahoo.com/Computers_and_Internet/Software/Data_Formats/ HTML/Guides_and_Tutorials/">everything I could find about HTML</a>.</body>
If you look at that text with a browser, you'll see that it's not easy to read. The text doesn't contrast enough with the background. Let's look at how to fix that next.

Changing Backgrounds

Specify a background color with the bgcolor attribute in the <body> tag. This attribute is another Netscape 1.1 extension. To change the background to a solid color, use the same type of color codes you use for text and link colors. If you want to make a black background, for example, you'd use this tag: <body bgcolor= "#000000">. Try adding that background to the text color example used earlier.

Instead of a solid color, you might want to use a pattern or other graphic as your background. You can find an assortment of background graphics at this Background Sampler page:

http://home.netscape.com/assist/net_sites/bg/backgrounds.html
Better yet, feel free to design your own. To use graphics as backgrounds, add the background attribute to the <body> tag, and include the location of the graphic file. Here's an example:
<body background="http://home.netscape.com/assist/net_sites/bg/
marble/purpleblue_marble.gif">
Keep in mind that, by using a background image, you will be slowing down the speed at which any graphical browser will load your page. For the sake of your readers, especially those using modems, try to keep things simple: a JPEG image, for example, will load faster than a GIF because the JPEG format uses less memory (see the section below on Adding Multi-Media).

Combine background, text, and link attributes in the <body> tag to create the page you want. Again, however, be aware of browser differences when using colors or backgrounds images. It's your page, so you don't have to design for the lowest common denominator (in terms of technology), but some of your special effects may be lost on your viewing public. Of course, there's always the disclaimer route: "This page was designed for viewing with [Netscape Navigator] [Mosaic] [whatever] version X.x or above."

Adding Multi-Media to Your Page

Multi-media refers to graphics, sound, video, and animation for your Web page. As we discuss some of the tools you can use to handle multi-media files, keep these points in mind: In this document, we'll concentrate on how to put graphics on your page, but we'll also take a brief look at other multi-media file types.

Graphics Files for the Web

As you may know, many types of digital graphics are out there: GIFs, tiffs, and bmps (bitmaps) are among the file types you'll hear discussed. When you add graphics to your page, use file types that most browsers can read or that freeware or shareware helper applications can read. For crisp, sharp in-line graphics, we recommend GIF files. For scanned photographs and other realistic images, we recommend either JPEG or GIF. Note: not all browsers can read JPEG in-line images.

To check your graphics with a browser, you may need helper applications. You can download a number of browser helper applications from The University of North Carolina's PC Helper Application Shareware page at

http://http://shareware.unc.edu/subpages/pchelpers.html

How Do I Get Graphics for the Web?

You can convert files, copy them, or create them. We'll discuss converting and copying files; you can also use numerous software packages to create them.

You may need to convert graphics from one file type to GIF or JPEG. Here are two shareware programs you can use to convert existing files to GIFs, or GIFs to another format:

You can copy graphics from other pages on the Web. As a rule of thumb, only copy and use graphics displayed on pages that are set up specifically for that purpose. YAHOO lists several sources on its Clip Art page at

http://www.yahoo.com/Computers_and_Internet/Multimedia/Pictures/Clip_Art/

In Netscape, a pop-up menu allows you to copy or save an in-line Web graphic. You display the menu one of two ways:

The steps for saving or copying the file are fairly straightforward once you get the menu.

Making Buttons & Other Graphics into Links

To transform a simple graphic, such as a button, into a link, provide the anchor reference tag first, then the reference to the graphic, or image, like this:
<a href="URL you want to go to ">
<img src="your graphics file.gif"></a>
Don't forget to add a separate text link for text-only browsers. One way to provide the link is to add the alt attribute to the <img> tag, like this:
<img SRC="familyatplay.gif" 
alt ="I wish you could see what a good looking family I have."></a>
The link for Text-browsers will be the text that follows alt=.

Positioning the Graphic on the Page

You can align a graphic on your page by adding the align attribute to the <img> tag, as in this example:
<img src = "mydog&me.gif" align=right>
The following table describes other alignment possibilities. Those that are Netscape-specific are marked with an asterisk *:

To align the image. . . Add this attribute to your <img> tag:
With the left margin, with align=left subsequent text wrapping to right of image
With the right margin, with align=right subsequent text wrapping to the left of image
With the tallest item in the align=top * line
With the tallest text item in align=texttop * the line
Middle to the middle of current align=absmiddle * line
Middle to the baseline of align=middle * current line
Bottom to the baseline of align=baseline * current line
Bottom to the bottom of current align=absbottom * line

Speed Up Page Loading with Sizing Attributes

Graphics can frustrate visitors to your page because they can slow page loading. You can speed things up by specifying the graphic's size in pixels. When you add the width and height attributes to your <img> tag, Netscape inserts a place holder the size you specify, and continues to load the rest of the page as the graphic is loading. Here's an example:
<img height=36 width= 57 src="myfirstgradeteacher.gif">
If the size you specify is different from the image file, Netscape scales the image to fit the placeholder. Size attributes for images are included in the proposed HTML 3 standard.

Combining Attributes to Get Things Just Right

You can combine multiple attributes in the <img> tag. For example, your tag might look like this:
<img src="Picture 1.GIF" width = 100 height = 75 align=right
top alt="I wish you could see this picture of my graduation from
UNC-CH.">

Special Effects

Making Graphics Transparent

Normally, a graphic's background is like the mat that framers put around a picture, and the mat blocks out your page's background. If you want your page background to be the graphic's background, you can use shareware programs to make the graphic's background transparent. Currently, the ) with the low resolution attribute (lowsrc). When you combine these attributes, one graphic replaces another over the time it takes both graphics to load. The attribute combination was designed to slowly replace low resolution graphics, which load quickly, with high resolution graphics, which load more slowly. You can also use them, for example, to change from a black and white to a color graphic, as we might do on a Wizard of Oz page, or from one graphic to another, which you can use for simple animation. Here's how a tag looks using these attributes:
<img src="babypicture.gif" lowsrc="UNC-CHgrad.gif">.
Try it out, and you'll soon find that you're not in Kansas anymore.
Note: HTML 3 proposes a combination of the new <fig></fig> and <overlay> tags as an improvement upon the lowsrc Netscape extension. Refer to the HTML Reference Manual URL at the end of this document.

Other Multi-Media: Movies & Sound Files

You need special equipment and software to digitize photographs, movies, and sound files. Computer stores stock cameras, scanners, and software you need to create these multi-media files. If you produce your own files, use the following file formats so that your page is accessible to as many people as possible:

Even More Possibilities

Web pages give you endless possibilities for creativity. We can't cover everything here, but we wanted you to be aware of a few more options: There's a world of Web authoring help available to you on the Web itself. The most useful help site for HTML we know of is the HTML Reference Manual at:
http://www.sandia.gov/sci_compute/html_ref.html
Of course, you'll continue to learn more about Web page by studying the source code for pages that impress you, and as you gain experience developing your own pages.


The IAB Data Collection thanks the University of North Carolina for provding the basic layout for these web pages. The original document was a web page from the The Office of Information Technology at The University of North Carolina that has been modified/updated for general use. The information contained in these pages is intended to help beginning internet users to use the World Wide Web (WWW). It is written to help IAB members, State Board Members, and others find and use information on the internet. Please send any comments/suggestions to Ernie_Patterson@unc.edu.