Jan's Working with the Web

Exercise Web 2-1:  Format Text & Images

---

What you will do:

Title the page Create an internal style sheet Format the page Insert an image Create a text link & an image link Apply heading tags Add styles to an internal style sheet Adjust text wrapping Add and style a horizontal rule Insert a timestamp from Notepad Print from Notepad and the browser

---

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

Start with: , Notepad or other text editor

1. In Notepad, open the page ricardo.htm that is in the folder Exercises on your Class disk.
   [your removable drive]:/my docs/web/HTML/Exercises/

   The graphics that you will insert below are also in the folder. These files may also be on your hard disk if you copied the web resource files there. They are also available online at http://www.jegsworks.com/Lessons/resources/web resources/html.

2. Save as ricardo-yourname.htm to the folder my docs/family/ricardo on your Class disk.
   (Create the folder if it does not exist)
   In the lessons you created a link to this page from Hector's page.
   

3. In Windows Explorer, Copy and Paste the images sasha.jpg and icon-lobos.gif from the Exercises folder to the ricardo folder.

4. Create an internal style sheet to make the following formatting changes:
   

   • Page: 
     Title tag = Ricardo's Page by Your Name
     (using your own name, of course)

     Background Color - Custom color (red =255 green=200 blue=145)

     Text color = Green

   • Text styles: 
     Heading 1 = green, font-family = Trebuchet MS, Tahoma, sans-serif

     Heading  2 = green, font-family = Trebuchet MS, Tahoma, sans-serif

     regular paragraphs = green, font-family = Comic Sans MS, Arial, sans-serif

   • Text:
     Make the first line of text Heading 1 and the second line Heading 2.

     Add paragraphs at the bottom:

     Los Lobos - my team
     Back to Hector's page

5. Images: 
   (Use Windows Explorer to find out the dimensions of the two images.)
   

   Place sasha.jpg at the beginning of the first regular paragraph. Use an inline style to make it float at the left with 10px margin all around. 
   ALT text = "Sasha"

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

6. Wrapping: 
   First paragraph wraps around on the right beside Sasha's photo.

   Make the second paragraph start below the image.

7. Links: 
   Use relative links to make icon-lobos.gif and the text "Los Lobos" links to the page loslobos-yourname.htm, which will be in this same folder.
   (You will create this page in Exercise Web 2-2.)

   Use a relative link to make "Hector's page" a link back to your last version of Hector's page, hector25-yourname.htm which is NOT in the same folder as Ricardo's page. It's two levels up and then down to the web folder:

    <a href="../../web/hector25-yourname.htm">Hector's page</a>
8. Horizontal rule: 
   Insert a horizontal line between the second regular paragraph and the Los Lobos link.
   Add a style to the internal style sheet that makes the horizontal rule green. You will need to set the background-color and the border to the same color.
   

9. Timestamp: 
   At the bottom of the page, add a new paragraph and insert from Notepad's Edit menu the time and date.
   (Don't forget to update this before printing.)

10. Page Setup for text editor: 
    Header > include your own name and today's date and the text "Exercise Web 2-1".

    Footer > Page &p
    

11. Save.
    [ricardo2.htm]. 
    

12. Print from Notepad.
    (Yours may look different from the illustration, depending on blank lines, spaces, and indentions.)
    

13. Open the page in your browser.

14. Test the link to Hector's page by clicking on it. Return to Ricardo's page with the Back button.
    If the link does not work, edit it.
    (There is no page yet for Los Lobos so you cannot test that link.)
    

15. Print from the browser.
    You can print in color if you wish (and you have a color printer!) but don't print the background.