HTML Basics:
Web 2-1 Format Text & Images

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

Now that you have gone through the Step-by-Step exercises, it's time to practice what you have learned. The following exercises will not have as much detail in the directions.

Look back at the Step-by-Step pages if you need a refresher on how to do something. There are new methods and information in these exercises. They are not just review!

In the following exercises you will practice your skills by creating some web pages. Include all of the parts and characteristics. The directions assume you are writing in FrontPage Express. You can, of course, create the same pages using Notepad and writing the tags, attributes, and values yourself. Or you could use an HTML editor.

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-1:  Format Text & Images

What you will do:

insert an image
create a text link & an image link
format the page background
title the page
format text
adjust text wrapping
insert a timestamp

You will format a simple page for Hector's son Ricardo. 

Start with: Class disk

  1. In FrontPage or FPX, open the page ricardo.htm in the folder a:/my docs/web/hector/ on your Class disk. This folder should already contain copies of the HTML file. The graphics that you will insert below are in the folder a:/my docs/web/Exercises.

    Make the following changes to format and arrange this page.
     

  2. Ricardo's pagePage: 
    Background Color - Custom (red =255 green=200 blue=145)

    Text color = Green

    Title = Ricardo's Page
     

  3. Text: 
    Line 1 = Heading 1, green, font = Trebuchet MS

    Line 2 = Heading 2, green, font = Trebuchet MS

    Other text = Normal, green, font = Comic Sans MS

    Add text at the bottom:

    Los Lobos - my team
    Back to Hector's page

     

  4. Images: 
    Insert sasha.jpg at the beginning of the first paragraph and align left, horizontal space 10, vertical space 10. 
    ALT text = "Sasha"

    Insert icon-lobos.gif at the left of the line "Los Lobos - my team". 
    ALT text = Los Lobos
     

  5. Wrapping: 
    First paragraph is on the right beside the image.

    Second paragraph starts below the image. (Hint: clear left)
     

  6. Links: 
    icon-lobos.gif and the text "Los Lobos" are links to the page lobos.htm which will be in this same folder.

    The phrase "Hector's page" is a link back to hector21.htm

    These pages are in the same folder so the links can be relative links.
     

  7. Horizontal rule: 
    Insert a horizontal line between the second paragraph and the Los Lobos link. Format it green.
     
  8. Timestamp: 
    At the bottom of the page, insert the date that the page was last updated.
    Icon: FPXFPX: use Button: WebBot the WebBot button on the toolbar and select Timestamp.
     Icon: FrontPage FrontPage: From menu Insert | Date andTime

    Format it like the paragraphs.
     

  9. Page Setup: 
    Use your own name and today's date.

    Header = Exercise Web 2-1 &T your name

    Footer = Page &P 
     

  10. Print-out of Ricardo's pageClass disk Save as ricardo2.htm. 
     
  11. Print Print. You can print in color if you wish (and you have a color printer!).
     
    The photo may not print as well from FrontPage or FPX as it would from IE.