2.

7 Chapter Summary 91

PROJECT 1: Share Your Travel Photos

Overview
This project is the first step in the creation of a travel photo sharing website. The page
you are given is augmented by this project to add a Related Photos section to the page.
Instructions HANDS-ON
EXERCISES
1. Open chapter02-project01.html in the editor of your choice, so you can start
PROJECT 2.1
making changes.
2. Open a browser and direct it to the same file (or double click the file in most
operating systems). You should see a page like the top part of Figure 2.23

Link to Related Photos

Each of these should be

Use the same structure

These links can just

Enclose these within <time> elements

3. Start by adding a link to Related Photos, in the unordered list that currently
contains Descriptions and Reviews. (You can make the href attribute point to
# for the moment.)
4. Now go down to the bottom of the page and add the new Related Photos
<section>.
5. In the new section add three images from the ones provided in the images
folder. Use the small images related-square1.jpg, related-square2.jpg, and
related-square3.jpg in the src of your <img> tag, but link to the large images
with almost the same names.
Test
1. Firstly, test your page by seeing if it looks like the one in Figure 2.23.
2. Now check that the link correctly links the Related Photos link to the newly
defined section, and that clicking on the related images brings up the larger
versions.
3. Validate the page by either using a built-in tool in your editor, or pasting the
HTML into http://validator.w3.org/ and ensure that it displays the message:
This document was successfully checked as HTML5!

PROJECT 2: Book Rep Customer Relations Management

DIFFICULTY LEVEL: Intermediate

Overview
This project is the first step in the creation of a CRM website. In this project you
will be augmenting the provided page to use semantic HTML5 tags.
HANDS-ON
EXERCISES Instructions
PROJECT 2.2 1. Open chapter02-project02.html in the editor of your choice, and in a browser.
In this project the look of your page will remain unchanged from how it looks
at the start as shown in Figure 2.24.
2. Reflect on why adding semantic markup is a worthwhile endeavor, even if the
final, rendered page looks identical.
3. Replace and supplement generic HTML tags like <div> with semantic tags like
<article>, <nav>, or <footer> (for example). Some parts make sense to wrap
inside a tag such as <section> or <figure>.
Test
1. Firstly, test your page side by side with the original in a browser to make sure
it looks the same.
2. Validate the page by either using a built-in tool in your editor, or pasting
the HTML into http://validator.w3.org/ and seeing if it passes. You will
notice to pass it must do many extra things like have alt attributes on <img>
tags.
 2.7 Chapter Summary 93

FIGURE 2.24 Completed Project 2

PROJECT 3: Art Store

DIFFICULTY LEVEL: Advanced

Overview
This project is the first step in the creation of an art store website. Unlike the previ-
HANDS-ON
ous exercises, your task is to create an HTML page from scratch based on the image EXERCISES
in Figure 2.25. PROJECT 2.3
94 CHAPTER 2 Introduction to HTML

Instructions
1. Define your own chapter02-project03.html file in the editor of your choice,
and open it in a browser.
2. Add markup and content, making best guesses as to what HTML markup to
use.
3. Remember to try and get in the habit of using semantic markup, since it adds
meaning and has no visual impact.
Test
1. Display your page in a browser, and determine if it looks like Figure 2.25.
2. Validate the page by pasting the HTML into http://validator.w3.org/ and
seeing if it passes.

Note the accent on the

Link to larger version.

All links can just

FIGURE 2.25 Completed Project 3