HTML Basics:
Web 2-2 Data Table

Title: Jan's Illustrated Computer Literacy 101
españolIcon: Change web
Did you want IE9+, Chrome, Firefox; Notepad? Icon: Change web

In this exercise you will create a page that includes a data table in addition to text and images. 

TipProblem: 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. 

You need some resource files to create the web pages in the exercises. If you have not already installed these on your Class disk, do so now. 

Individual files can be found at http://www.jegsworks.com/Lessons/resources/web resources/HTML/Exercises/ They should be copied to your Class disk in the folder A:\my docs\web\Exercises

Full floppy disk How to handle a full disk
 

 


Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser BasicsTo subtopics

Project 2: HTML Basics
    HTML CodeTo subtopics
    About HTML
    What You Need
    Code by HandTo subtopics
    WYSIWYG
    FrontPage/FPX
    Images in HTMLTo subtopics
    FormattingTo subtopics
    TablesTo subtopics
    Print
    ConvertTo subtopics
    Summary
    Quiz
    Exercises Arrow - Subtopic open
    ExerciseEx. 1- Format
    ExerciseEx. 2- Data Table
    ExerciseEx. 3- Convert
    ExerciseEx. 4- Position Table
    ExerciseEx. 5- On Your Own

Search 
Glossary  
Appendix

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
format table text
print

Start with: Class disk FrontPage or FrontPage Express

The folder you use to save your work depends on whether you are using FrontPage or FPX.

  1. Open a new blank document in FrontPage or FPX.
     
  2. Class disk Save as loslobos.htm to your Class disk in:
      Icon: FPX the web/Exercises folder 
      Icon: FrontPage the web hector
    Change the title to "Los Lobos Game Results". 
    Warning If you do not save first, the image that you insert will have a full path.
     
  3. 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.
     
  4. Image: 
    Insert the image lobos.gif that is in the Exercises folder.
     
  5. Format image: 
    Border size=1. 
    ALT text = "Los Lobos logo". 
    Center image on the page.
     
  6. Table: 
    Below the image, create a table with 4 columns and 7 rows.
     
  7. Properties of Row 2 Cell 2: 
    Horizontal alignment=left
    Vertical alignment = top
    background color = Yellow
    Number of rows spanned = 6. 
    You will have extra cells at the right after merging.
     
  8. Table: 
    Remove the extra blank cells.
    Hint: Select the column and delete cells.
     
  9. Text: 
    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 close together.
     
    Data for table
  10. Format table:
    Alignment = Center
    Border size=1
    Border color = Black
     
  11. 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
     

  12. Text: 
    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 below).
    Los Lobos is a part of:

    The Soccer League
    President Juan Yomal
    Belgrano 2185
    Cordoba 800 Argentina

    Back to Ricardo's page
  13. 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 size.
     
  14. Links: 
    Make the name "The Soccer League" a hyperlink to http://www.ligafutbol.org.

    Make Ricardo's page a link back to ricardo.htm, which is in the same folder as loslobos.htm.
     

  15. 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.
     
  16.  Page Setup:

    Header = Exercise Web 2-2 &T your name

    Footer = Page &P date
     

  17. Los Lobos page with formatted tableClass disk Save.


  18. Print out of loslobos.htmPrint Preview: 
    Look for errors. Fix any that you find and save again.
     
  19. Print Print from FrontPage/FPX and close the document.
     
    If the background prints, you should change IE settings:
     Internet Options  |  Advanced  | Printing  to uncheck Print background colors and images.
     
  20. 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 in FrontPage/FPX. 
     
  21. Close IE.