Overview

Images make the Web a colorful, interesting, and informative medium, but they are not part of HTML files. They are included in the files by text tags in both (X)HTML and CSS.

In this exercise we'll use both techniques to put images in files.

Save your XHTML template file as x26h.htm, and title the page, "Sarah Strong X26h" (changing Sarah Strong to your own name). Make sure your name is listed as author.

1. In your browser, open the Aesop's Fables text file (http://courses.wccnet.edu/computer/mod/aesop_fables.txt). Select the entire text, and paste it into the body of your x26h file.
2. Mark up each of the stories as follows:
   1. Title: Heading 2
   2. Story: Paragraph
   3. Moral: Paragraph, emphasis
3. Using the <img> tag, add the following images to the appropriate stories, at the beginning of the first paragraph:
   1. fox-crow.gif: http://courses.wccnet.edu/computer/mod/fox-crow.gif
      Align left, alternate "Fox and Crow, from PBS Kids "; determine the size and enter the correct parameters.
   To determine the size of an image, right-click it and select Properties from the pop-up menu. The dimensions will be given.
   2. sick-lion.jpg: http://courses.wccnet.edu/computer/mod/sick-lion.jpg
      Align right, alternate "Sick Lion"; determine the size and enter the correct parameters.
   3. donkey.gif: http://courses.wccnet.edu/computer/mod/donkey.gif
      Align left, alternate text " Angry Donkey"; enter a height of 231 and a width of 100, which is not the actual size, and results in a "squashing" effect.
   4. regal-lion.jpg: http://courses.wccnet.edu/computer/mod/regal-lion.jpg
      Align right, alternate text "Portrait of a Lion, by jojobegood"; determine the size and enter the correct parameters.
4. Double-check to make sure the file meets the requirements, and validate it as XHTML 1.o transitional.

1. In Notepad, open your home.htm file, created as part of assignment X10i. This file should have:
   Class and section numbers;
   Your name;
   A list of assignments, which you will link to the page as you complete on-line assignments. Use the on-line Class Schedule to compile this list
2. Insert the WCC logo from http://courses.wccnet.edu/computer/mod/wcctile.gif as the first thing in the body of the file. (Don't forget to include alternate text.)
3. Mark up the line with your class and section number as Heading 2.
4. Mark up your name as Heading 1. Using inline CSS, center the heading and select an image from the collection of graphic elements (or any other source) to be a background for the header.
   To put an image in the background of any block entity:

   • If the image is in the same directory as the XHTML file:
     style="background-image: url(blumrbl.jpg);"
   • If the image not in the same directory, use any relative or absolute URL, like this:
     style="background-image: url(http://courses.wccnet.edu/computer/mod/blucloud.jpg);"
5. Select another background image, and use inline CSS to set it as the background for the entire body.
6. Select a separator from the collection of graphic elements or elsewhere; insert it between the two headerings and the list of assignments, and also at the end of the file, just before </body>.
7. Double-check to make sure the file meets the requirements, and validate it as XHTML 1.o transitional.

When you're done, double-check that the assignment meets the specifications above, and that all links are functional.

Upload to your work to your WCC student Website, and send email to the instructor with the URI. Be sure your email meets the formal requirements: name, class, section and exercise (x26h), and that it follows standard business-email practice.