In this exercise you will create
a page that includes a data table in addition to text and images.
Text inside cells won't center correctly vertically and/or horizontally.
Cause: Using the Center toolbar button to center
text or images in a cell instead of using the cell properties dialog. The
Center button puts paragraph tags around the text. The alignment of the
paragraph overrides the cell alignment. A paragraph tag also adds some white
space around the text which affects the vertical alignment.
Solution: Remove the paragraph tags from the HTML
code by hand.
Where you are:
Lessons > Web
Before you start...
Project 1: Browser Basics
Project 2: HTML Basics
What You Need
Code by Hand
Images in HTML
Ex. 2- Data Table
4- Position Table
5- On Your Own
Exercise Web 2-2: Data Table
The page is about Ricardo's soccer team, Los Lobos. It
lists the team members and the results of their games in the previous
season. The background is the team logo.
|What you will do:
create background watermark
insert table for data
align text in table
format table text
or FrontPage Express
The folder you use to save your work depends on
whether you are using FrontPage or FPX.
- Open a new blank document in FrontPage or FPX.
Save as loslobos.htm to your Class disk
Change the title to "Los Lobos Game Results".
If you do not save
first, the image that you insert will have a full path.
- Background of page:
Use the image background-lobo.gif that you
copied to the web/Exercises folder of your
Class disk as a background and check the box Watermark.
Insert the image lobos.gif that is in the
- Format image:
ALT text = "Los Lobos logo".
Center image on the page.
Below the image, create a table with 4 columns and 7 rows.
- Properties of Row 2 Cell 2:
Vertical alignment = top
background color = Yellow
Number of rows spanned = 6.
You will have extra cells at the right after merging.
Remove the extra blank cells.
Hint: Select the column and delete cells.
Enter the text in the table as, shown below. Use a line break (SHIFT +
ENTER) instead of a new paragraph in a cell to keep the lines of text
- Format table:
Alignment = Center
Border color = Black
- Format cells: Use the toolbar and the Cell
Properties (from the Table menu or from the right click menu) to
format the cells.
All rows: font = Verdana
Row 1 - Bold; horizontal alignment = Center, vertical
alignment = Middle, background = Silver
Rows where Los Lobos lost or tied - horizontal alignment =
Center, vertical alignment = Middle, background color = White
Rows where Lobos won - horizontal alignment = Center, vertical
alignment = Middle, background color = Yellow
Below the table, type the text that is shown below. Use a line break
instead of a paragraph break between lines in the address (lines 2-5
|Los Lobos is a part of:
The Soccer League
President Juan Yomal
Cordoba 800 Argentina
Back to Ricardo's page
- Format text:
Change the font for the text you just typed to Verdana.
Reduce the size of the text in the first 5 lines (the address) by one
Make the name "The Soccer League" a hyperlink to
Make Ricardo's page a link back to ricardo.htm,
which is in the same folder as loslobos.htm.
- Horizontal line:
Insert a horizontal line above the line "Back to Ricardo's page". If
necessary, format the horizontal line to Default so that it is in gray
and delete any blank lines around the horizontal line.
- Page Setup:
Header = Exercise Web 2-2 &T your name
Footer = Page &P date
Look for errors. Fix any that you find and save again.
from FrontPage/FPX and close the document.
If the background prints, you should change IE settings:
| | to uncheck Print
background colors and images.
- Open loslobos.htm in IE and scroll. The
background stays in one place while the text moves! This is what a
Watermark does. It just does not behave that way while you are editing
- Close IE.