For the World Wide Web

 Gary Hayward is an amateur photographer and digital camera enthusiast. He has decided to create a website named CAMshots, where he can offer advice and information to people who are just getting started with digital photography or who are long-time hobbyists like himself.  Gary’s website will contain several pages that he wants to link together. He needs our help to design his site.

home.htm tips.htmglossary.htm

1. Open Notepad and then one at a time, open the hometxt.htm, tipstxt.htm, and glosstxt.htm files located on the class website. 2. Within each file, go to the comment section at the top of the file and add your name and the date. 3. Save the files as home.htm, tips.htm and glossary.htm in a folder called camshots. 4. Copy the image files camshots, pearlake, and thirds to your camshots folder from the class website. 5. Review the HTML code in each file so that you understand the structure and content of the files. 6. Start your web browser, and one at a time open the home.htm, tips.htm and glossary.htm files.

 To create links between pages we will use the tag.  The general syntax to create a hypertext link is: content Where reference is the URL or file name of the target page and content is what will be displayed as the active hypertext link

 Return to the home.htm file in Notepad and locate the second element in the top of the file. The tag is used to create divisions in your file.  Create a hypertext link for the Home page by inserting the following after the second tag. [Home]

 Create links for the Tips and Glossary pages in the same way as the Home page link using tags. Use the name of the files for each page and the name of the pages for the content. [Tips] [Glossary] Save your file and place the links to these pages in the other two files (tips.htm and glossary.htm) after the second tag

 Open the home.htm file in your browser and click on the Tips hypertext link. Verify that the Tips page displays.  Click the Glossary link. Verify that the Glossary page displays.  Click the Home link. Verify that the Home page displays.  Check all three links on each page to verify that they all work.  If any of the links do not work go to the file for the page and check the code for errors.

 Gerry wants users to be able to jump to the beginning of each section in the Glossary by clicking on the letters at the top of the Glossary page.  To do this we need to create an identification using the id attribute.  Open the glossary.htm file and find the h2 heading for the A section of the glossary. Within the opening tag insert the following: A  Repeat this for all of the letters B through F

 Find the opening tag in the glossary.htm file.  Directly below the tag insert an id attribute in the tag This gives us a way to allow users to jump back to the top of the list.

 Once you have marked an element with an id attribute you an create a hypertext link to that element.  Using the tag we can enable users to jump from one part of the page to another [ content ] Where id is te value of the id attribute and content is what is displayed on the web page.

 Locate the letter [A] in the list of letters at the top of the glossary.htm file.  Insert the following: [ A ]  Do the same for [B] [C] [D] [E] [F] in the list of letters.  Save your changes and render the Glossary page. Test your links to be sure that they all work. Click on the Return to Top link to be sure it works too.

 A defined list works like an ordered list or unordered list and allows for each defined term to be defined using a definition term 1 definition of term 1 term 2 definition of term 2

 Gerry wants users to be able to jump to the definitions of key terms found on the home page. To do this we need to create an id in the glossary for the key terms.  In the glossary.htm file, find the term “aperture” and insert the following: Aperture Do the same for the term “exposure” Exposure

 Add an id for the following terms: ◦ F-stop with the id f-stop ◦ Flash Mode with the id flash_mode ◦ Focal Length whit the id focal_length  Save the glossary.htm file

 Open the home.htm file in Notepad  Click Edit > Find in the tool bar  Type F-stop in the box and click find next  Insert the following hypertext link to the f-stop id in the glossary.htm file: F-stop : f/7.1 Save the home.htm file and check the F-stop link.

 Return to the home page and check the hypertext links for the other terms in the list of photo settings. Verify that they take you to the correct definition on the Glossary page.

 It is standard practice to turn the website logo into a hypertext link pointing to the site’s home page. To do this we need to create an image map. This creates a “hotspot” on the image that is a hypertext link.  Gary wants the CAMshots logo to link to the home page and the Tips and Photo Glossary text in the header to be links to the pages.

 Create hotspots using the tag. Find the tag on p. 430 of the HTML book.  Go to the page referenced to read about the tag attributes and function.  We must decide on the shape of the hotspot for each of the three links we want to create.  The CAMshots logo is a circle  The Tips and Photo Glossary links will be rectangles.  We need to tell the browser the coordinates of each of these areas.

 Return to the home.htm file in Notepad  Directly below the tag for the CAMshots logo, insert the following:

 Insert the following attribute to the tag for the CAMshots logo:  Save the home.htm file and refresh the home page.  Click on the Tips hotspot and verify that you go to the Tips page  Return to the home page and verify the Photo Glossary hotspot

 You may see a border around the hotspots. We can remove them with the following code in the home.htm file: Save the file and refresh your page.

 Copy the entire section identified by the first in the home.htm file and paste it into the tips.htm and glossary.htm files replacing the first sections. This will create the hotspots on all of the pages.  Save all of your files and test the hotspots on all three pages.