W3D1 Activity

Instructions

1. Create an “images” folder inside of the practice folder
2. Download/Save the following images into the new images folder (Right click and choose “save link as”)
   • logo.png
   • beekeeping.jpg
   • foraging.jpg
   • hive.jpg
   • pollen.jpg
3. Open the logo.png file in Photoshop and re-size it proportionally to 399px wide (Resizing images will be on the test). Watch the video on this page to see how to do this.  (transcript)
4. Open the index.html file in TextWrangler (or comparable code editor).
5. View the Week 3 Day 1 Screenshot on this page. Use this screenshot to guide you through marking up the text (Right click and select “view image” to see a larger version of the screenshot).
6. Add semantic markup around the appropriate content (header, nav, article, section, footer, etc)
7. Take note of how to make a copyright symbol (This will be on the test).
8. Indent the nested tags
9. Validate your document (http://validator.w3.org/)
10. Update this index.html file on your website. Upload the images folder to the practice folder on your website (yourWebsiteName.com/practice)
11. Open the types.html document and update the logo image, add the semantic markup, indent nested tags, validate the document, and update the types.html file on your website.

 

Sizing/Saving Images for the web