Web Page Exercise

  1. This week make a web page for your auto repair shop
  2. Using Microsoft Windows XP, go to "start ->My Documents"
  3. Create a folder with the name "Week_5_HTML" ( File-New-Folder)
  4. Double-click to open the folder. The folder should be empty
  5. While in the Week_5_HTML folder, create a folder with the name "images" but do not open the folder
  6. Start Textpad
  7. Copy and paste this doctype at the top of your web page
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  8. Create all of the basic web page tags starting with the <html> tag
  9. Create a title of "Your Name Auto Repair" (use your name)
  10. Create style tags (see page 29 in your textbook)
  11. Within the style element enter the following for the body tag (see page 30 in your textbook):
    1. background-color: #d2b48c (you may change this color)
    2. margin-left: 10%
    3. margin-right: 10%
    4. font-family: Arial
  12. Within the style element enter a second style, this time for h1 element:
    1. color: #003366
    2. font-weight: bold
    3. font-size: 200%
  13. Starting within the body tags, Create an large heading "Welcome to 'Your Name' Garage
  14. Create a horizontal line under the welcome
  15. Right-click on the following picture and download (save this picture) to your images folder.
  16. Insert this picture into your web page and change the width to 139 pixels and height to 120 pixels with the alternate text of "Joe's Picture "
  17. Type in information about your garage repair service. You may use this text or you may use your own words
  18. Create a "List of Services" heading but using a smaller heading size (not heading size 1)
  19. Add a list of services offered by your garage to include: Car Washing, Test Drives, Engine Repair, Car Detailing and Diagnostic Services
  20. Create a "Cars for Sale " heading
  21. Insert the following graphic change the height to 120 and width to 200 the alternate text should be "Show Car"
  22. Type in information about cars which you have repaired and will sell.
  23. The last paragraph in your web page is a link to cars.com. It should read, "For a full listing of our cars, go to Cars.com". The words Cars.com will be hyperlinked to http://www.cars.com. Also, this link will open in a new window (page 158 in your textbook)
  24. For extra credit, create a link to carwash.com using this gif When the user clicks on this graphic, they will be linked to http://www.carwash.com
  25. All done? Go to Start, My Documents and browse to find the Week_5_HTML folder. Right-click on the folder Week_5_HTML and Send To a compressed file. Can you find your .zip file?
  26. Rename and save the file as firstInitial_lastName_week5.zip. (e.g.: b_ray_week5.zip)
  27. Submit this exercise and the quiz as the Week 5 homework