Chapter 3 - Responsive Web Design with HTML5 & CSS 9th edition

Consider This: Your Turn

1 Add Images and Links to Your Personal Portfolio Website Personal

Part 1: In Chapter 2, you created a webpage template and a home page for your personal portfolio website. You now need to add an image to your home page and template, add page links, create two new pages, add a list, and embed a map.

1 Create a subfolder within your portfolio website folder and name the new folder images. Save a picture of yourself within the images folder. Ensure that the image file has an appropriate file name, such as your name. Use all lowercase and no spaces.

2 Review the image file properties to ensure that the image size and file size are not too large. If your image size is greater than 500 500 pixels, use photo-editing software, such as Paint, to adjust the image size. Likewise, if the file size is greater than 1 MB, use an online image file compression tool to reduce the file size.

3 Add a picture of yourself within the header element on your home page and your template file. Be sure to include all necessary attributes within the img element; src, alt, height, and width.

4 Open your template.html file and add anchor elements to create text links within the navigation area. Though the other pages do not yet exist, use an appropriate file name for each text link. For example, if you have a navigation link for About Me, use about.html as the file name. Update the navigation area on your home page to match the navigation area on your template.

5 Add your student email address to the footer element and include an email hyperlink to your email address. Update the footer area on your home page to match the footer area on your template.

6 Review your site map and then use your template to create a new webpage for your website. Save your new page with an appropriate file name. For example, if you create a new page for About Me, use about.html as the file name.

7 Update the comment and the title element on your new page. Nest a div element with an id attribute and appropriate value within your main element. Add relevant content to the div element and include a list with content relevant to the page. Use at least one ordered list, unordered list, or a description list. If using one list, it should include a minimum of five list items.

8 Create another new webpage using your template file. Use this new page for your contact information. Save the new file with an appropriate file name, such as contact.html.

9 Update the comment and the title element on your new page. Nest a div element with an id attribute and appropriate value within your main element. Add relevant contact information to the div element. Embed an online location map with the location of your educational institution.