Lesson Practice 2-2:
Say It With Pictures!

Task 1: Acquiring Image Files

1. Your folder named 'images' will contain all picture/image files associated with your web pages.
2. Visit various free clipart web sites, choose and save the following images to your Lesson Site images folder:
   1 simple, unobtrusive background tile or border graphic
   1 decorative horizontal line or bar
   3 interesting graphics/pictures (not too large)
   2 button-style graphics

Task 2: Using Images on Web Pages

1. Open your template.htm in notepad++.
2. In the title element, add the title: Using Images
3. Add an h1 element with the page title: Improve Page Presentation with Images
   
   
4. Adding a background image:
   1. For the time being, you will use an attribute to add the tile or border graphic as a background image to the opening body tag. Later you will replace this setting with a CSS control.
      
   2. To the opening body tag, add the attribute background=" "
      
   3. As the value between the quotes, type a relative to your image.
      
      
5. Add text content:
   1. Add a paragraph element containing the image of your horizontal line or bar, using the src=" " attribute in the img element. Use a relative path to the image.
   2. Add a several paragraph elements with a lot of nonsense text, to fill 2-3 screens in preview. This is to simulate real text in paragraphs. It might be easiest to open the Lorem Ipsum file, which contains some pseudo-text you can copy and paste as your page content. Be sure to create a separate paragraph element for each paragraph of text.
   3. Save the file in the graphicfiles folder as imagetest.htm.
   4. Resave the file in the same location as buttontest.htm.
      
      
6. Add image content
1. Reopen the imagetest file if necessary.
2. Just before the beginning of the paragraph text, add one of your images in an image element. Add the align="right" attribute, to align the image to the right. Make the source a relative path to your image.
3. Use PhotoEditor or some other imaging program to check the dimensions, in pixels, of your image. If you need help with this, ask Mrs. Pangman.
4. Add attribute to the img element to set this height and width.
5. Move to the beginning of a paragraph about 1/3 of the way down the text on your page, add the same image, this time left aligned, with attributes set to half the original height and width.
6. About another 1/3 down, between two paragraphs, add a different image, at default size, with no alignment specified. Include height and width attributes.
7. At the end of the text, add another paragraph element. Insert your third image here, with height and width.
8. Add the alt=" " attribute to each of your images, using appropriate text to describe/explain the picture.
9. Save your work and preview it in the browser. Make any line break and spacing adjustments you need, and when you are satisfied, save and close the file.

Task 3: Using Images in Links

1. Add buttons and create image links:
   1. Change the title and h1 elements to read:
      Use Images as Links
   2. At the end of the page of text, add a paragraph element containing an image element using one of your button graphics. Add one or two spaces to the right of the image, then the text:
      Click here to go to … (include wherever you choose at the ... , a page, a site, or your email).
   3. Make a hyperlink using both the button and the text together.
   4. Add one more paragraph element and add the other button graphic. Make a hyperlink from this second button, adding space as before and the text
      Click the button to return to the top
   5. Add the appropriate attribute to the opening tag of the h1 element to create a top of page bookmark.
   6. Create a hyperlink, but this time, just use the image and link to the bookmark.
      
      
2. Preview in the browser, and test the links in your document. Add horizontal or vertical spacing to any image you think needs it. Make any line break and spacing adjustments as needed and when you are satisfied save and close.

Task 4: Add Image File-links to your Home Page

1. Open your file index.htm.
2. In the Image Pages section, add two paragraph elements.
3. Link to one of the image files in each paragrah element, using the page title for the link text.
4. Add the title=" " attribute to each, using the filename of the page.
5. Save and preview, testing the links, and making any adjustments needed.
   
   
6. Publish your new files, as well as your updated index file to your folder of the class Share file.
7. Open the index file in the new location and test your links.