HTML Basics:
Web 2-4 Position 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 change the background of a page to a side border and use a table to keep the page's contents off of the border. One column of the table must be appear empty but be sized so that the text and images in the other column(s) will not overlay the border down the left side.

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/FPXTo subtopics
    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-4:  Position Table

What you will do:

change background to use a side border
put text in a table to keep text off border

Start with: Class disk  ergonomics2.htm open in FrontPage or FPX

  1. Open ergonomics2.htm in FPXText overlaps side border.
  2. Class disk Save as: 
    Use the name ergonomics3.htm  to save the file to the same folder of your Class disk.
     
  3. Page Background: 
    Change the background of the page to use the image border-computer.gif  from the Exercises folder on your Class disk.

    Where to find the image:
    On your hard drive in C:\My Documents\complit101\web\HTML\Exercises. Copy it to the Exercises folder on your Class disk.
        OR
    Download from the web site  and place in the Exercises folder on your Class disk.
        OR
    On your Class disk you may already have the image in the Exercises folder.

    Icon: FPXFPX: Notice that saving in FPX again lost the justification that you added by hand previously.
     

  4. Copy: 
    Select the whole page and copy the contents.
     
  5. Create table: 
    While the contents of the page is still selected, use the Table button to create a table with 1 row and 2 cells. This empty table replaces everything you had selected.
     
  6. Paste:
    Put the cursor in the second cell and paste. The text and image are now in cell 2. If there is one, delete the blank line at the top of the page.
     
  7. Table Properties:
    Set the border size to 0.
     
  8. Cell Properties: 
    Set the Cell Properties for cell 1 on the left to have width 110 pixels.
    Set the Cell Properties for cell 2 to not specify the width.
     
  9. ergonomics3.htm - doneClass disk Save and close.
     
  10. View in IE: Open the page ergonomics3.htm in IE. The text and image should be displayed without touching the left side border.
     
  11. Internet Options: Change the setting in Tools | Advanced to print the background colors and images.
     
  12. Page Setup:

    Header Exercise Web 2-4 your name &bPage &p of &P

    Footer: &u&b&d
     

  13. Print Check Print Preview. How many pages. Is all the text on one page? If not, reduce your margins or move the image up beside the headings.

    Why does the second page print with a colored background abut no text? Once the text stopped, the background remained for printing but not for screen display. Odd!

    This is why you should always check the number of pages in the Print Preview before you actually print.
     

  14. Print page 1.