In lesson 2 you learned how to use fonts and colours, how to place graphics on a document and you learned how to link documents together. In this lesson we will cover the following topics:
- Using tables to format a document.
- Using frames.
- Using cascading style sheets.
Using Tables To Format A Document
When using one of the modern word processors such as Microsoft Word or Corel Word Perfect precise format over the format of a document is easy because these programs use a WISIWIG environment (what I see is what I get). When a web browser renders an HTML document it receives the document as a string of characters. In most cases the browser ignores extra spaces and line breaks.
In lesson 1 we saw a few ways a document can be formatted such as the use of paragraph, heading and list tags, and the use of the <pre> tag. While these mechanisms provide some measure of control over the format of a document, clearly more precise format control is required in most situations. More precise control of a document's format is possible through the use of tables.
A table is simply a series of rows an columns, much like a spreadsheet. You start a table with a <table> tag, use other tags to define rows and columns working top to bottom, left to right and then signal the end of the table with a </table> tag. You will find that tables are used in creative ways that might surprise you at first. For example, when creating this document, I used a two column table to place the "For-The-People" sidebar down the extreme left side of the page and place all of the text on the right.
There are four tags that are use in creating HTML tables that I will discuss here. These tags are:
- The <table> tag signals the start of a table.
- The <tr> tag signals the start of a table row.
- The <th> tag signals a new cell with a column heading.
- The <td> tag signals a new table cell.
A much more complete discussion of the creation of HTML tables can be found in chapter 11 of your textbook. For now, let's dive into an example. The following example is a two column table showing celsius temperatures in increments of 5 degrees and their fahrenheit equivalents.
<html> <head> <title> A Sample HTML Table </title> </head> <body> <p> The following table lists celsius temperatures in increments of 5 degrees and their fahrenheit equivalents from the freezing point of water to the boiling point. <p> <table> <tr> <th>Celsius<th>Fahrenheit <tr> <td>0<td>32 <tr> <td>5<td>41 <tr> <td>10<td>50 <tr> <td>15<td>59 <tr> <td>20<td>68 <tr> <td>25<td>77 <tr> <td>30<td>86 <tr> <td>35<td>95 <tr> <td>40<td>104 <tr> <td>45<td>113 <tr> <td>50<td>122 <tr> <td>55<td>131 <tr> <td>60<td>140 <tr> <td>65<td>149 <tr> <td>70<td>158 <tr> <td>75<td>167 <tr> <td>80<td>176 <tr> <td>85<td>185 <tr> <td>90<td>194 <tr> <td>95<td>203 <tr> <td>100<td>212 </table> </body> </html>
In the above example, we began the table of Celsius/Fahrenheit temperatures with the <table> tag. To signal new column headings we used the <th> tag. We used the <tr> tag each time we wanted to signal a new row and we used a <td> tag to signal a new cell. Now let's view the table as it would appear on your document.
The following table lists celsius temperatures in increments of 5 degrees and their fahrenheit equivalents from the freezing point of water to the boiling point.
| Celsius | Fahrenheit |
|---|---|
| 0 | 32 |
| 5 | 41 |
| 10 | 50 |
| 15 | 59 |
| 20 | 68 |
| 25 | 77 |
| 30 | 86 |
| 35 | 95 |
| 40 | 104 |
| 45 | 113 |
| 50 | 122 |
| 55 | 131 |
| 60 | 140 |
| 65 | 149 |
| 70 | 158 |
| 75 | 167 |
| 80 | 176 |
| 85 | 185 |
| 90 | 194 |
| 95 | 203 |
| 100 | 212 |
By default, table column headings (<th> tag) have their contents aligned to the centre of the cell and the contents are displayed bolded and emphasized (italicized). All other cells have their contents left justified and the contents are displayed in normal font. You can override cell alignment like this:
<tr align=right> An entire row where contents of all cells are right justified. <th align=right> A right justified column heading. <td align=center> A cell with contents centered.
The contents of cells can be vertically aligned to the top, middle or bottom of the cell. The default for vertically aligning the contents of cells is middle. You can vertically align the contents of whole rows or individual cells like this:
<tr valign=top>Contents of entire row are aligned to the top of the cell. <th valign=bottom>A column heading with contents aligned to the bottom of the cell. <td valign=middle>A cell with contents aligned to the middle.
Although the <tr>, <th> and <td> tags are containers, it isn't necessary that you include a matching closing tag. Simply specifying an <tr>, <th> or <td> tag ends the previous row or cell.
Many of the tags you have already seen can be included in a table cell. Within a cell you can include headings, create new paragraphs, make ordered and unordered lists, use fonts and colours, include images and so on. For example, you might want a cell to contain your photograph that you have scanned or taken from a digital camera. Include an image in a cell like this:
<td><img src="myphoto.jpg" alt="My Photograph"></td>
Of course the closing </td> tag wasn't really necessary but could be included. It is also possible to specify the overall width and height of an entire table or the width and height of a column within a table. You specify the width and height of an overall table like this:
<table width=600 height=450>
The width of the table in the above example would be 600 pixels and the height would be 450 pixels. It's a good idea to avoid using pixels as your scale of measurement since different video cards allow different numbers of pixels to be displayed on a screen. The higher the resolution (more pixels on the screen) the smaller the table in our previous example would appear to be when displayed on the user's computer screen. A better way of defining the width and height of a table would be:
<table width="75%" height="75%">
In the above example, the width and height of the table is expressed as a percentage of the width and height of the entire screen. The width and height of the table would appear to be the same regardless of the screen resolution.
The width and height can be specified for a given cell like this:
<td width="15%" height="5%">
The height can be specified for a given row like this:
<tr height="5%">
If the text in a cell is two large for the width of the cell the text will be wrapped to the next line. You can prevent this behaviour from occuring by including something like the following:
<td nowrap>A cell with non wrapping text
You can display a border around your table like this:
<table border=1>
In the above example, a border one pixel wide is displayed. The default is for no border to be displayed. When a border is requested but the size is omitted as in:
<table border>
The border is displayed with a width of 1 pixel.
Another useful formatting technique is the use of column and row spanning. Column spanning is where one column of a given row occupies the space that would normally be occupied by two or more columns. Row spanning is where one row of a given column occupies the space that would normally be occupied by two or more rows. Here is an example of a document with a table using both column and row spanning.
<html> <head> <title> An Example Of Column And Row Spanning </title> </head> <body> <table> <tr> <th colspan=3>List Of Chemistry Student Letter Grades <tr> <tr> <th>Student <th>Letter Grade <tr> <td>Joe Blow <td>A <td rowspan=6> Note - Letter grades range from A through F.<br> The following is a list of letter grades<br> and corresponding numeric ranges in percentages: <br> A - 90%-100%, B - 80%-89%, <br> C - 70%-79%, D - 60%-69%, <br> E - 50%-59%, F - 0%-49% <tr> <td>Richard Roe <td>B <tr> <td>Herbert Hoe <td>C <tr> <td>Mary Moe <td>A <tr> <td>Johny Joe <td>D <tr> <td>Teresa Toe <td>E <tr> <td>Joe Schmuck <td>F </table> </body> </html>
In the above example, the table heading "List Of Chemistry Student Letter Grades" was spanned across 3 columns and a description of the letter grades and numeric ranges occupies one cell that spans 7 rows. Now here is what the table looks like when displayed on your browser.
| List Of Chemistry Student Letter Grades | ||
|---|---|---|
| Student | Letter Grade | |
| Joe Blow | A |
Note - Letter grades range from A through F. The following is a list of letter grades and corresponding numeric ranges in percentages: A - 90%-100%, B - 80%-89%, C - 70%-79%, D - 60%-69%, E - 50%-59%, F - 0%-49% |
| Richard Roe | B | |
| Herbert Hoe | C | |
| Mary Moe | A | |
| Johny Joe | D | |
| Teresa Toe | E | |
| Joe Schmuck | F | |
using frames
You can enhance the look and navigation of your site significantly by dividing your pages into frames. A frame is a portion of the screen you reserve and then populate with a document or image. Frames can be arranged vertically, horizontally or both. Frames can be scrolling or non scrolling.
When creating a page with frames, the first order of business is to define the frameset using the <frameset> tag. The <frameset> tag is a container and you must always supply the closing </frameset> tag. Inside the frameset you define the frames themselves with the <frame> tag where you supply the file names of the documents or images that will populate those frames. The frameset always exists in its own document and only contains the frame definitions. Once you have defined the frameset and the individual frames, you then go about creating the other documents and images refered to in the frame definitions (<frame> tags). Finally, you can optionally create a noframes definition in the document defining the frameset for those with browsers unable to display pages with frames. With all of the above said, let's dive into an example of a document which illustrates what we have been discussing.
<html> <head> <title>A Sample Document With A frameset</title> </head> <frameset rows="25%,50%,25%"> <frame src="header.htm" name="header frame"> <frame src="body.htm" name="body frame"> <frame src="footer.htm" name="footer frame"> </frameset> <noframes> <body> <p> Your browser is unable to display frames </body> </noframes> </html>
In the above example, we used a <frameset> tag to reserve space on the screen for 3 frames aligned vertically. The first frame takes up 25% of the available space on the screen, the second 50% and the third takes up the final 25%. Inside the <frameset> container, we include 3 frames by using the <frame> tag. The first frame is filled with the document header.htm, the second with the document body.htm and the third with footer.htm. You might choose to use header.htm and footer.htm in all pages to make common headers and footers throughout your site. Finally we include a noframes section for those browsers not capable of working with frames.
The name attribute in the <frame> tags give the individual frames names that can be used when linking to a document. For example, you could link to a document and have the browser position the user to a specific frame like this:
<a href="myframes.htm" target="body frame">
Frames can be nested to create a useful effect. Here is an example taken from chapter 12 of your textbook:
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="25%,50%,25%">
<FRAME SRC="header.htm">
<FRAMESET COLS="25%,75%">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>
<FRAME SRC="footer.htm">
</FRAMESET>
<NOFRAMES>
Your browser cannot display frames.
</NOFRAMES>
</HTML>
In the first frameset, we reserve 3 rows, the first occupying 25% of the screen, the second 50% and the third the final 25%. So far this is just like the first example. After the first frameset is defined we include the first frame where we display the document header.htm. The second frameset overlays the first starting after the first frame. Here we overlay the second row, the 50% in the middle of the screen with a two column frameset. One column occupies the first 25% horrizontally and the second column occupies the remaining 75%. On the lefhand column or frame we place the document label.htm. On the right han column or frame we place the document info.htm. Finally after the inner frameset is closed we drop down to the final 25% of the screen where we place the document footer.htm. So what we have here is a one column header section follow by a two column body followed by a single column footer.
You can create a tiled look by doing something like this:
<html> <head> <title>A Tiled Look</title> </head> <frameset rows="25%,50%,25%" cols="50%,50%"> <frame src="topleft.htm"> <frame src="topright.htm"> <frame src="midleft.htm"> <frame src="midright.htm"> <frame src="bottomleft.htm"> <frame src="bottomright.htm"> </frameset> <noframes> Your browser is unable to display frames. </noframes> </html>
In the above example we have 6 frames, 3 frames high and 2 frames wide.
It's possible to set the sizes of your frameset's rows and colums using measurements other than percentages. Another common way of sizing the rows and columns is allocating space by fractions of the screen. Using the above example of a frameset 3 rows high and 2 columns wide we could get the exact same result by including the following:
<html> <head> <title>A Tiled Look</title> </head> <frameset rows="*,2*,*" cols="*,*"> <frame src="topleft.htm"> <frame src="topright.htm"> <frame src="midleft.htm"> <frame src="midright.htm"> <frame src="bottomleft.htm"> <frame src="bottomright.htm"> </frameset> <noframes> Your browser is unable to display frames. </noframes> </html>
In the above example we defined our frameset as:
<frameset rows="*,2*,*" cols="*,*">
To determine the sizes of the rows and columns here we add the numbers in front of the asterisks (*) together. Where there is no number in front of an asterisk we assume the number is 1. So in our above example, for the rows attribute we would add 1 + 2 + 1 giving 4. So therefore, the first row would occupy 1 quarter of the height of the screen, the second row 2 quarters or 1 half and the third row 1 quarter. Using the same method, The columns would each occupy 1 half of the width of the screen.
You can also size your columns and rows using pixels as your measurement as in:
<frameset rows="200,400,200">
I recommend that you avoid using pixels as your measurement scale because different screens contain different numbers of pixels. Note that whenever the vertical or horizontal sizes of the rows or columns do not add up to the vertical or horizontal size of the entire screen, the unused space will be distributed among the rows and columns in equal amounts. In the example:
<frameset cols="30%,30%,30%">
The percentages for the columns only add up to 90%. The remaining 10% would be distributed over the 3 columns equally.
Using Cascading Style Sheets
The use of cascading style sheets is a vast topic that could easily occupy an entire lesson and then some. Here however, I will only touch on the topic and show you a style sheet example. Chapter 17 in your textbook has a very good explanation of how style sheets are used.
Style sheets are used to set common attributes like fonts, colours and a whole host of browser behaviours. Style sheets give your site a consistent look and feel. You define your style sheet once and then use it to set attributes in all your documents.
Style sheets can be embedded in a document or they may reside in their own separate file with a .css extension. if you want to embed a style sheet in a document, place it between the <html> and the <body> tag. It's better to save your style sheet in its own file so that it can be used by all of your documents. Here is an example of a typical style sheet:
<style type=text/css>
<!-- for regular text links -->
a{font-family:arial,helvetica,geneva;font-size:10pt;color:#0033cc;}
<!-- for ie -->
a:hover{color:#ff6600}
<!-- for content text -->
body{font-family:arial,helvetica,geneva;font-size:10pt;color:#000000;}
<!-- for paragraph text -->
p{font-family:arial,helvetica,geneva;font-size:10pt;color:#000000;}
<!-- for table text -->
td{font-family:arial,helvetica,geneva;font-size:10pt;color:#000000;}
<!-- for table heading text -->
th{font-family:arial,helvetica,geneva;font-size:10pt;color:#000000;}
<!-- for heading 1 text -->
h1{font-family:arial,helvetica,geneva;color:#000000;}
<!-- for heading 2 text -->
h2{font-family:arial,helvetica,geneva;color:#000000;}
<!-- for heading 3 text -->
h3{font-family:arial,helvetica,geneva;color:#000000;}
<!-- for heading 4 text -->
h4{font-family:arial,helvetica,geneva;color:#000000;}
<!-- for heading 5 text -->
h5{font-family:arial,helvetica,geneva;color:#000000;}
</style>
In the above style sheet example we are setting the font choices and colours for body text, links, paragraph text, table headers and table cells and subheadings. The choices of attributes you can set in a style sheet is enormous. You can find a complete list of all the style sheet attributes you can set in appendix b of your textbook.
When a style sheet is saved as a separate file its file name must have a .css extension. You link your document to a .css file by putting a <link> tag in the header section of your document like this:
<html>
<head>
&title>An Example Of Linking A Style Sheet To A Document</title>
<link rel=stylesheet media=screen href="mystyle.css">
</head>
<body>
<p>
This is the body section.
</body>
</html>
In the above example we used the <link> tag to link a document to a style sheet stored on an external file.
Conclusion
In this lesson you learned how to format your document using tables, you learned about the use of frames and you learned a little about setting common attributes for your site using cascading style sheets. You'll find that chapters 11, 12 and 17 in your textbook provide useful background material on these topics and I recommend that you read these chapters.
In the next lesson you will learn how to add multi-media to your documents, how to publish your site using ftp and how to add a guestbook to your site. You will also learn how to list your site in the major search engines.
| Lesson 4 | For-The-People | Back To Course Home Page |