HTML Tutorial: Advanced Formatting

Navigation Buttons | Image Maps | Table Layout | Frames | Style Sheets

Overview

Navigation buttons can give your pages clarity and style, offering users easily visible ways to move among the pages of your site and complementing the color and layout choices you have made.
Image maps allow you to make "hot spots" on a given image, so that as users mouse-over defined regions of interest, you can direct them to additional information, to pages or files within your site, or to other online materials.
Table Layout involves arranging the text and image content of your pages according to the relatively fixed properties associated with tables, so that you define various background colors, dimensions, and arrangements that give your pages clean, readable structures.
Frames, though somewhat outdated stylistically, may be useful as you put the sections of your site together, allowing for a menu frame, for example, to be navigated separately from a target (main content) frame.
Style Sheets allow for consistent control over the style(s) of your multiple pages, so that you can edit one stylesheet file and alter, among other things, font sizes, colors, and faces.

Navigation Buttons

Creating Images

Get access to software (e.g., Photoshop, Paint Shop Pro) that allows you to create and edit images and to insert text onto the images.
Once you have the image you like, use a text color that contrasts sufficiently with the image color, so that users can easily read the navigation buttons.
Some software allows you to anti-alias the text, making the edges just blurred enough that the text does not appear jagged--this is not as effective with very small font sizes.

Reminders for Encoding

Once you have the images saved as .jpg or .gif files, insert the code for the images into your .html file.

Remember that border="0" keeps the browser from displaying a link-colored border around the image, and that spacing around the image is determined by hspace="" and vspace="" attributes.

Make the image a link by surrounding it with link code.

<p><a href="url"><img src="home.gif" border="0" hspace="10"></a>
<a href="url"><img src="staff.gif" border="0" hspace="10"></a>
<a href="url"><img src="project.gif" border="0" hspace="10"></a>
<a href="url"><img src="links.gif" border="0" hspace="10"></a></p>

Javascript Rollovers

Copy and paste the following script into the "head" section of your file (after "title").
This is the programming that works with the code inside your link information.
Each link for your images will reference this script in order to handle the mouseover event.

<script>

</script>

Copy and paste the following link code into your file.
Note that the name 'image1' corresponds to the name="image1" portion of the image code and not to the name of the file itself.
The image file for what users see before the mouseover is named "image1_out.gif".
The image file for what users see during the mouseover is named "image1_in.gif".
Name each image something that makes sense numerically and that identifies it as "out" (for what users see when the mouse is outside the boundaries of the image) or as "in" (for what users see when the mouse is inside the boundaries of the image).
The onMouseOver code references the image during the rollover, while OnMouseOut references the original image before and after the mouseover event.

<a href="link.html" OnMouseOver="move_in('image1','image1_in.gif')" OnMouseOut="move_out('image1','image1_out.gif')">
<img src="image1_out.gif" alt="UK Home Page" name="image1">
</a>

Rollover the image below to see how it works.

Use this kind of link code for each navigation button, creating 2 images ('out' and 'in') per button, naming them according to the incremental convention used in the script.

top

Image Maps

Copy and paste the following image map code into your .html file.
Notice that the name for the map is "menu" and that in the image code it is referenced like an internal link: usemap="#menu">.
The rectangular hot spot is defined by the x,y coordinates, with the first pair identifying the upper-left corner of the region of interest and the second pair identifying the bottom-right corner.
The software used for creating and editing the image should allow you to see the coordinates of a given point as mouseover the image.
The alt="text" portion of the area code gives users a message when they mouseover the region.

<map name="menu">
<area shape="rect" coords="24,0 66,20" alt="Home" href="url">
<area shape="rect" coords="93,0 130,20" alt="Staff" href="url">
<area shape="rect" coords="155,0 208,20" alt="Project" href="url">
<area shape="rect" coords="235,0 273,20" alt="Links" href="url">
<img src="menu.gif" border="0" usemap="#menu"> </map>

top

Table Designs

Tables can be used to organize the areas of the page, provide margins for text, align images consistently, arrange color schemes, and offer users a clean format through which to view your content.
Set the alignment of a table on the screen or within another table with the align="" attribute, the value being either "left", "center", or "right".
Maintain cross-browser consistency by keeping the cellspacing="0" and cellpadding="0", so that Nescape and Internet Explorer will render the arrangement of the tables within one another in the same way.
You may want to define background colors for the various tables using the bgcolor="" attribute, keeping the color the same when you embed a slightly smaller table within another in order to provide consistent margins for the content.
You can divide the table up into rows and columns, splitting the columns up with the td tag and defining the width of each column with the width="" attribute.
Keep everything aligned properly with the align="" attribute, the value being either "left", "center", or "right"; and valign="top" helps when the content of you cells is of varying lengths.
When you want a given cell to span the length of multiple columns or rows, use the colspan="" attribute and the rowspan="" attribute, respectively.
It is often useful to insert a <br clear="left" /> tag after a table when you embed it within another table; this ensures that the subsequent content does not get rendered improperly.
Examine the abbreviated code sample and the combination of tables below to see how this might work.

<table width="600" align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#000066">
<tr>
<td colspan="3" bgcolor="#CCCCCC">
</td>
</tr>
<td width="100" align="left" valign="top" bgcolor="#CCCCCC">
</td>
<td width="400" align="center" valign="top" bgcolor="#FFFFFF">
<table width="380" align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFFFF">
<tr>
<td align="left" valign="top">
</td>
<td align="left" valign="top">
</td>
</tr>
<tr>
<td align="center" valign="top" colspan="2">
</td>
</tr>
</table>
<br clear="left" />
</td>
<td valign="top" align="left" bgcolor="#CCCCCC">
</td>
</tr>
<tr>
<td colspan="3" valign="top" align="center" bgcolor="#CCCCCC">
</td>
</tr>
</table>
<br clear="left" />

Logo and Menu

content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content

Menu

top

Frames

You can use frames to separate navigation links and viewable content into different windows.
Create a file (index.html works well) that will serve as the main or start page for your site.
This "master" file will govern the layout of the frames that will have your other .html pages loaded in them.
The <frameset> tag bookends the <frame> tags.
The cols="" attribute determines the width of the columns, while the rows="" attribute defines the width of the rows, each value separated with a comma.
Set the frameborder="" attribute to either "yes" or "no".
Use integers to set the width at a given pixel width (e.g., 200 for 200 pixels wide), percentages to set the width at a given percentage of the screen (e.g., 20% for 20 percent of the screen), and an asterisk to set the width at the remainder of the screen when a given width is supplied for the other row(s) or column(s) (e.g., 200, *).
Set the scrolling="" attribute to either "yes", "no", or "auto" to define whether or not a given window will be scrollable; "auto" is safe, since you cannot predict the width of users' screens.
Identify the source file that will be loaded in a given frame with the src="" attribute.
Name each frame with the name="" attribute, so that when you link from a menu frame to a content frame, the page will load in the proper frame (e.g., <a href="home.html" target="window2">Home</a>).
Nest a frameset within another frameset in order to divide a given frame into multiple frames.
Examine the examples below to see how they work.

<frameset cols="170, *" rows="100%" frameborder="no">
<frame scrolling="auto" src="menu.html" name="window1">
<frame scrolling="auto" src="home.html" name="window2">
</frameset>

<frameset rows="140, *" cols="100%" frameborder="no">
<frame scrolling="auto" src="menu.html" name="window1">
<frame scrolling="auto" src="home.html" name="window2">
</frameset>

<frameset rows="140, *" cols="100%" frameborder="no">
<frame scrolling="auto" src="menu.html" name="window1">

<frameset rows="100%" cols="50%,50%" frameborder="yes">
<frame scrolling="auto" src="left.html" name="window2">
<frame scrolling="auto" src="right.html" name="window3">
</frameset>
</frameset>

top

Style Sheets

Use stylesheets to define the properties of common tags, so that you can edit a single stylesheet and affect the appearance of multiple pages.
Each page to which the stylesheet should be applied must refer to the stylesheet in the <head> section of the code.
Copy and paste the example below, naming the file and the stylesheet.

<link rel="stylesheet" type="text/css" href="name.css" title="namestylesheet" />

The stylesheet file itself is a series of text instructions for the browser, where each tag is given a list of associated values.
Define different properties for a given class of tag with something like the .small class for paragraphs shown below; in the .html code for the web page, use <p class="small"> to reference this property in the .css file.
Set the background to an image with the background-image: url (file.src); property.
The margin-left: 10px; and margin-right: 10px; properties would indent each instance of a given tag 10 pixels from the left and right, respectively.
Copy and paste the code below and choose color, font size and face values, and alignment properties that work for your pages.

a:link { color:#000066; }
a:vlink { color:#000066; }
a:alink { color:#000066; }

body {
background-color: #000066;
}

.bodytext {
font-family: verdana, arial, helvetica, sans serif;
color: #000000;
font-size: 10pt;
}

h1 { color: #000000;
font-family: verdana, arial, helvetica, sans serif;
font-size: 15pt;
font-weight: bold;
text-align: center;
}

h2 {
color: #000000;
font-family: verdana, arial, helvetica, sans serif;
font-size: 14pt;
font-weight: bold;
}

h3 {
color: #000000;
font-family: verdana, arial, helvetica, sans serif;
font-size: 11pt;
font-weight: bold;
}

h4 {
color: #000000;
font-family: verdana, arial, helvetica, sans serif;
font-size: 11pt;
font-weight: bold;
}

p {
font-family: verdana, arial, helvetica, sans serif;
color: #000000;
font-size: 10pt;
}

.small {
font-family: verdana, arial, helvetica, sans serif;
color: #000000;
font-size: 8pt;
}

ul {
font-family: verdana, arial, helvetica, sans serif;
color: #000000;
font-size: 10pt;
}

ol {
font-family: verdana, arial, helvetica, sans serif;
color: #000000;
font-size: 10pt;
}

table {
font-family: verdana, arial, helvetica, sans serif;
color: #000000;
font-size: 10pt;
}

tr {
font-family: verdana, arial, helvetica, sans serif;
color: #000000;
font-size: 10pt;
}

td {
font-family: verdana, arial, helvetica, sans serif;
color: #000000;
font-size: 10pt;
}

th {
font-family: verdana, arial, helvetica, sans serif;
color: #000000;
font-size: 10pt;
}

top