Afternoon Module 4
Advanced HTML
by Nate Springer
Topics
Tables
Frames
Good web publishing techniques
What you should know at the end of the day
You should be able to add frames and tables to your page, as well as, have the ability to create a web page that is both
technically and visually pleasing.
Tables
Tables make it possible to format text, data, images, or some combination in such a way as to align them in a
sensible manner. An HTML table consists of several container tags: <table>, <tr>, <td>, and
<th>.
<table>
This tag is the wrapper that surrounds the other tags that make up the table. The <table> tag is nessisary
in ever table, without it or the ending </table> all the interior tags will be ignored.
<tr>
The Table Row tag, <tr>..<tr>, denotes the beginning of a row of the table. The </tr> tag must be used to
end each row. The total number of <tr> tags specifies the number of rows contained within a table.
<td>
The Table Data tag, <td>..</td>, contains the actual data of the table. The <td> tag may only
appear within a table row, <tr>, tag. Each data tag is called a cell and it is not necessary to have
the same number of cells in each row -- the short rows will be filled with blank cells.
<th>
The Table Header tag, <th>..<th>, acts the same as the <td> tag except that, by default, all data
within the cell is aligned to the center and is boldface.
An example of a simple table:
<table>
<tr><th>Name</th><th>BA</th><th>HR</th></tr>
<tr><td>Larkin</td><td>.300</td><td>3</td></tr>
<tr><td>Morris</td><td>.290</td><td>6</td></tr>
</table>
becomes
| Name | BA | HR |
|---|
| Larkin | .300 | 3 |
| Morris | .290 | 6 |
As with most other tags, it is possible to change the appearance of a table through the use of attributes. Each table
tag has its own attributes with some attributes having the ability to be used in more than one tag. The following is
a description of each attribute and the table tags it can be used in.
border (<table> only)
The border attribute controls the size of the border surrounding the table. The size is represented by a pixel value
with the default being 0, or no border.
<table border=2>
<tr><th>Name</th><th>BA</th><th>HR</th></tr>
<tr><td>Larkin</td><td>.300</td><td>3</td></tr>
<tr><td>Morris</td><td>.290</td><td>6</td></tr>
</table>
becomes
| Name | BA | HR |
|---|
| Larkin | .300 | 3 |
| Morris | .290 | 6 |
cellpadding and cellspacing (<table> only)
These attributes control the space between table elements. The cellpadding attribute controls the amount of space
between cell data and the cell wall. The cellspacing attribute controls the space between the cells of a table. The
size is represented by a pixel value.
<table border=2 cellpadding=5 cellspacing=5>
<tr><th>Name</th><th>BA</th><th>HR</th></tr>
<tr><td>Larkin</td><td>.300</td><td>3</td></tr>
<tr><td>Morris</td><td>.290</td><td>6</td></tr>
</table>
becomes
| Name | BA | HR |
|---|
| Larkin | .300 | 3 |
| Morris | .290 | 6 |
align (All)
The align attribute controls the alignment of text to the left, center, or right inside a cell. Valid values for this
attribute are align=right, align=center, and align=left. If the attribute is used in the <table>
tag, all cells in the table are aligned accordingly. If used in the <tr> tag, all cells in that specific row will
be aligned accordingly. If used within either the <th> or <th> tag, only that cell will be aligned.
<table border=2>
<tr><th>Player Name</th><th>Batting Avg.</th><th>Home Runs</th></tr>
<tr align=center><td>Larkin</td><td>.300</td><td align=right>3</td></tr>
<tr><td align=center>Morris</td><td>.290</td><td>6</td></tr>
</table>
becomes
| Player Name | Batting Avg. | Home Runs |
|---|
| Larkin | .300 | 3 |
| Morris | .290 | 6 |
valign (All)
The valign attribute controls the vertical alignment of the text within a cell. Valid values for this attribute are
valign=top, valign=middle, and valign=bottom. As with align, what cells the attribute affects
is based on what tag it is used in. If the attribute is used in the <table> tag, all cells in the table are aligned
accordingly. If used in the <tr> tag, all cells in that specific row will be aligned accordingly. If used within
either the <th> or <th> tag, only that cell will be aligned.
<table border=2>
<tr><th>Player Name</th><th>Batting Avg.</th><th>Home Runs</th></tr>
<tr><td>Barry<br>Larkin</td><td valign=top>.300</td><td>3</td></tr>
<tr><td>Hal<br>Morris</td><td valign=bottom>.290</td><td valign=middle>6</td></tr>
</table>
becomes
| Player Name | Batting Avg. | Home Runs |
|---|
Barry
Larkin | .300 | 3 |
Hal
Morris | .290 | 6 |
bgcolor (All)
The bgcolor attribute controls the background color of the cells. The color can be represented by either the actual color
name (i.e. "red") or its hexadecimal value (i.e. #FF0000 = red). If the attribute is used in the <table> tag, all
cells in the table are colored accordingly. If used in the <tr> tag, all cells in that specific row will be colored
accordingly. If used within either the <th> or <th> tag, only that cell will be colored.
<table border=2 bgcolor="red">
<tr bgcolor="#00FF00"><th>Player Name</th><th>Batting Avg.</th><th>Home Runs</th></tr>
<tr><td>Barry<br>Larkin</td><td>.300</td><td bgcolor="gray">3</td></tr>
<tr><td>Hal<br>Morris</td><td>.290</td><td bgcolor="gray">6</td></tr>
</table>
becomes
| Player Name | Batting Avg. | Home Runs |
|---|
Barry
Larkin | .300 | 3 |
Hal
Morris | .290 | 6 |
width and height (<table>, <td>, and <th>)
The width and height attributes control the size of the table elements. The sizes are represented as either pixel sizes or
a relative percentage. If the attribute is used in the <table> tag, the width and height control the size of the
entire table. A percentage, in this case, is relative to the width and height of the entire web page. If used 300</td><td>3</td></tr>
<tr><td>Morris</td><td>.290</td><td height=50>6</td></tr>
</table>
becomes
| Name | BA | HR |
|---|
| Larkin | .300 | 3 |
| Morris | .290 | 6 |
colspan and rowspan (<td> and <th> only)
The colspan and rowspan attributes control the number of columns and rows (respectively) a single cell spans. The value
represented by the number of columns or rows the cell should span. The results are the same when this attribute is used
in either tag.
<table border=2 cellpadding=3>
<tr><td colspan=4 bgcolor="red">Cincinnati Reds Stats</td></tr>
<tr><th>Name</th><th>BA</th><th>HR</th><th>RBI</th></tr>
<tr><td>Larkin</td><td>.300</td><td>3</td><td rowspan=2>40</td></tr>
<tr><td>Morris</td><td>.290</td><td>6</td></tr>
</table>
becomes
| Cincinnati Reds Stats |
| Name | BA | HR | RBI |
|---|
| Larkin | .300 | 3 | 40 |
| Morris | .290 | 6 |
Frames
An HTML frame is an advanced formatting technique that allows a web page to be split up into sub-areas that each hold a
separate HTML document. Each sub-area, or frame, retains the full functionality of a non-frame HTML document with the added
ability to interact with the other frames. Here is an example of a framed page.
Structure of a frame
Every framed HTML page begins with a frame document, that tells the browser exactly how to load each frame and where
to place it on the screen. A frame document is exactly the same as a normal web page except that the <body> tag is
replaced by the <frameset> tag. Let's examine, line-by-line, the frame document of the example framed page:
<html>
<head><title>Frames Example</title></head>
<frameset rows="50%,*" border=1>
<frameset cols="50%,*">
<frame src="tile1.html">
<frame src="tile2.html">
</frameset>
<frameset cols="60%,*">
<frame scrolling="yes" src="tile3.html">
<frame src="tile4.html" name=four>
</frameset>
</frameset>
</html>
<frameset rows="50%,*" border=1>
This tag begins by setting the size of the two rows, in this case. By specifying '50%' the first row will be half the size of
the screen. The '*' means 'the rest of', since in this case the first row takes up half the screen, the remainder of the screen
is used by the second row. It is possible to specify a pixel value for the size, but since screen size may vary it is often
better to give relative values.
<frameset cols="50%,*">
This tag, since it is nested within the other frameset, will split the top row into, in this case, two pieces. This tag is
setting the column size to half the screen, therefore both frames will be the same size.
<frame src="tile1.html">
<frame src="tile2.html">
These two frame tags are loading the html pages that will appear in the top two columns. The first instance of the frame tag
loads the first HTML file, while the remaining instances load pages into the frames in the order that they are listed.
</frameset>
This ending tag closes the first row. Therefore, at this point, there are two pages loaded in the first row and the second
row is blank.
<frameset cols="60%,*">
This frameset tag will now control the second (bottom) row. This time it sets the first column of the second row to 60%, thus
the second column will be 40% the size of the screen.
<frame scrolling="yes" src="tile3.html">
This frame tag loads the HTML document 'tile3' into the first column of the second row. The scrolling attribute
controls the frames ability to be scrollable (as well as whether it has a scrollbar). Since the attribute is set to 'yes' this
frame is scrollable.
<frame src="tile4.html" name=four>
This tag loads the final HTML document, placing it into the second row, second column. The name attribute gives the
frame a name. This is used to load documents into a frame using a link contained within a separate frame. This is accomplished
through the use of the target attribute of the <a href ... > tag. For example:
<a href="doc1.html" target="frame2">
This tag will load the HTML document 'doc1' into the frame named 'frame2'. This is how the example was able to change frame
#4 to frame #5. Also, in order to load a document full screen instead of inside a frame, use the target value "_top".
<a href="fullscreen.html" target="_top">
Good Web Publishing Techniques
In order to create effective web pages, it is not enough to know how to program in HTML. It is also important to understand
what is included in well designed web pages. The design and layout of a web page is as important as the information it
contains. The following is a list of things to consider when designing an effective web page:
- Design first - Sit down before you start coding the page and layout what you want the page to look like.
The worst thing you can do is 'improvise' your web site.
- Have a purpose - Make sure you have a reason for creating each page. It can be as simple as "I want people
to know about me." (No, "just because" is not a good reason) Make sure the information on the page follows and compliments
the purpose.
- Choose good backgrounds - Make sure when, or if, you decide to use a background color or image that it does
not interfere with either the text or images contained within the page. Also, choose backgrounds that are easy on the
eyes; neon yellow text on an orange background is sure to make any visitor to your page run screaming to the optometrist.
- No Spelling and Grammar Errors - Avoid spelling and grammatical errors. Check and double check your page for both.
No one will take any of your information seriously if it is riddled with lazy errors.
- Put the most important information first - Only about 10% of all web visitors scroll through an entire page.
Not many people will wade through an ocean of background or unrelated information to get to the good stuff hidden three
pages down.
- Don't put too much (or too little) information on a page - If one page is fifteen screens long, it is a good
bet that no one will take the time to get to the bottom. Likewise, it is a waste of bandwidth to have one page contain
only a couple of sentences. Break up pages by topic trying to keep them between one and four screens long.
- Don't clutter - Make sure to keep everything spaced logically. It makes viewing and understanding the page
much easier when the visitor does not have to fight the layout of the page.
- Make sure all links work - Make sure when including links to other pages that you have linked to a stable page.
Check the links contained within your page often to make sure they still work. There is nothing worse than clicking
on a link and being rewarded with a "404 - Page not found" error.
- Include a link to your main page - Always include a link to your main (front) page on all your pages. This is
especially helpful if your main page contains a site map, the web equivalent of a table of contents.
- Avoid long download times - Always keep in mind that most people do not have fast connections to the web, therefore
make sure that all of your images and other data is as small as possible. Most people will lose patience and stop loading a
page after more than a minute.
- No graphics larceny - Please do not steal original pictures or images from other peoples' web pages for use
on your own. Take the time to design your own graphic, it will make your page more individual.
- Always use the alt attribute - Not everyone who will visit your site uses a graphical browser. By including
the alt attribute within the image tag everyone who visits your site can enjoy and understand it.
- Always use the "target=_top" attribute when using frames - If you use frames on any of your pages, always use the
'target=_top' attribute in <a href...> tags to link to outside pages. There is nothing worst than clicking on a link
within a framed page that is supposed to go to an outside site and having the page load within that frame.
- Last but not least, TEST YOUR PAGE!!! - Before you finalize your page, make sure you test it on many different
browsers, at several different screen resolutions, and (if possible) on several different modem speeds.
Goto Lab