Share Your Travel Photos
This project correspond to practice Hands-on practice projects are present in many chapters throughout this textbook and relate the content matter back to a few overarching examples: an art store, a travel website, and a customer relationship management (CRM) portal for a book representative. These projects come with images, databases, and other files, and are included with your purchase of this textbook.
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 so that it appears similar to that shown in Figure 3.28, page 84.
Follow the instruction to complete the project and include screen shots of your final pages in your PA.
INSTRUCTIONS
- Open chapter03-project01.html ( the above project) in the editor of your choice, so you can start making changes.
- Open a browser and direct it to the same file (or double click the file in most operating systems). You should see a page similar to Figure 3.10 .
- Start by adding an image to the
<h1>heading. The image is in theimagesfolder. - In the unordered list, add links to the
<h2>headings. This will require referencing in thehreftheidattribute of those headings. - Add a new section for the related photos. In this new section, add three images from the ones provided in the
imagesfolder. Use the small images related-square1.jpg, related-square2.jpg, and related-square3.jpg, but link to the large images with almost the same names. - Add an additional review.
TEST
- Firstly, test your page by seeing if it looks like the one in Figure 3.28 .
- Now check that the links at the top of the page work correctly and that clicking on the related images brings up the larger versions.
- Validate the page by either using a built-in tool in your editor, or pasting the HTML into http://validator.w3.org or https://html5.validator.nu and ensure that it displays a message that indicates it contains no errors.
0 comments