Welcome to www.MyCoolSchool.ca

Help Files and Tutorials for Computer Users

HTML Tips

This page includes various HTML formatting tips. Although many popular web-page programs, such as DreamWeaver and FrontPage do this for you, it is good to have a basic understanding of HTML so that you can customize your web pages.

Select a Topic from the Menu below

Menu

Creating Links:

Bookmarks

To link from one area of a web page to another area on the same page we create an anchor point, a bookmark in this case, where we want to link to and create an regular link where we want to link from.

Code

Example

This is where I put the "Top of Page" bookmark. You can link to this spot from the bottom of the page.

<a href="#anchor_at_bot">Links to Bottom of page</a>

Links to Bottom of page where I placed the bookmark named "#anchor_at_bot".

Images

The code shows the source of the image to be in a folder named "images" on the same directory level as the page itself.

Sample Web Page

Back to Top

This is a sample web page demonstrating some random aspects of html. Compare the html code to the left with what you see in the actual page.

Click here to see the actual page

Horizontal Frames

Back to Top

A Frame page uses a "Frameset" to enclose other html pages into one visual page. The procedure is being replaced with CSS (Cascading Style Sheets).

<HTML>
<HEAD>
<TITLE>THIS IS MY FIRST FRAMES DEMO PAGE</TITLE>
</HEAD>

<FRAMESET ROWS="33%,33%,*">
        <FRAME SRC="frames1.html">
        <FRAME SRC="frames2.html">
        <FRAME SRC="frames3.html">

</FRAMESET>
</HTML>

This page uses three frames. Each frame links to a separate page.

Click here to see the actual page

<HTML>
<HEAD>
<TITLE>THIS IS MY FIRST FRAMES DEMO PAGE</TITLE>
</HEAD>
<BODY BGCOLOR="#0080FF">
<PRE>
        <FONT SIZE="+2">This is PAGE 1 sample
of a page using frames. </font></PRE>
</BODY>
</HTML>

This is the "frames1.html" page. The other example pages have similar coding.

Vertical Frames

Back to Top

<HTML>
<HEAD>
<TITLE>THIS IS MY SECOND FRAMES DEMO PAGE</TITLE>
</HEAD>
<FRAMESET COLS="33%,*,33%">
        <FRAME SRC="frames1.html">
        <FRAME SRC="frames2.html">
        <FRAME SRC="frames3.html">
</FRAMESET>
</HTML>

This page uses three vertical frames. Each frame links to a separate page.

Click here to see the actual page

Image Map

Back to Top

An image map uses a defined graphic image with specified coordinates as "hotspots" in place of buttons or text links.

Move the mouse over the doors and windows of the house image to see the "hotspot" links. The code for the page is shown below with the coordinates identified.

Click here to see the actual page

The coordinates are similar to working with a graph, except that the "y" axis is positive as you move down. For example, the corner of the window outlined in RED starts 32 pixels to the right of zero and 220 pixels Down from zero.

The following line of HTML code defines the hotspot for the living room window, which links to the lr.html page:

The top left corner of the rectangle starts at 32 pixels to the right, and 220 pixels down from zero. The bottom right corner of the rectangle is the next set of coordinates, so the rectangle ends at 102 pixels to the right, and 330 pixels down from zero.

The following defines the hotspot for a circular hotspot:

The center of the circle is located 338 pixels to the right and 114 pixels down from zero, and has a radius of 16 pixels.

A polygon hotspot has a pair of coordinates for each point of the polygon.

Tables

Back to Top

A table can be used to help organize text and graphics on your website. Below is an example of a table with one column, and three rows.

This is the first row

This is the second row

This is the third row

Below is a simple web page with the html tags for the table shown above.

<html>
<head>
<title>Table with Rows</title>
</head>

<body>

<div align="center">
<center>

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="50%">
   <tr>
         <td width="100%">This is the first row</td>
   </tr>
   <tr>
         <td width="100%">This is the second row</td>
   </tr>
   <tr>
         <td width="100%">This is the third row</td>
   </tr>
</table>

</center>
</div>

</body>

</html>

Click here to see the sample

This is a table with one row and three columns:

First column

Second column

Third column

Below is the html coding for this example:

<html>
<head>
<title>Table with Columns</title>
</head>

<body>
<div align="center">
<center>

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="50%">
   <tr>
        <td width="33%">First column</td>
        <td width="33%">Second column</td>
        <td width="34%">Third column</td>
   </tr>
</table>

</center>
</div>
</body>

</html>

Click here to see the sample

Here is an example of a table with rows and columns:

Below is the html coding for this example:

<html>
<head>
<title>Table with Columns and Rows</title>
</head>

<body>
<div align="center">
<center>