Download
1 / 23
E N D
HTML For the World Wide Web
CAMshots Website • 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.
Collect Your Files • Open Notepad and then one at a time, open the hometxt.htm, tipstxt.htm, and glosstxt.htm files located on the class website. • Within each file, go to the comment section at the top of the file and add your name and the date. • Save the files as home.htm, tips.htm and glossary.htm in a folder called camshots. • Copy the image files camshots, pearlake, and thirds to your camshots folder from the class website. • Review the HTML code in each file so that you understand the structure and content of the files. • Start your web browser, and one at a time open the home.htm, tips.htm and glossary.htm files.
Creating Hypertext Links • To create links between pages we will use the <a> tag. • The general syntax to create a hypertext link is: <a href="reference">content</a> Where reference is the URL or file name of the target page and content is what will be displayed as the active hypertext link
Create Hypertext Links • Return to the home.htm file in Notepad and locate the second <div> element in the top of the file. The <div> tag is used to create divisions in your file. • Create a hypertext link for the Home page by inserting the following after the second <div> tag. <a href="home.htm">[Home]</a>
Tips and Glossary Links • Create links for the Tips and Glossary pages in the same way as the Home page link using <a> tags. Use the name of the files for each page and the name of the pages for the content. <a href="tips.htm">[Tips]</a> <a href="glossary.htm">[Glossary]</a> Save your file and place the links to these pages in the other two files (tips.htm and glossary.htm) after the second <div> tag
Check ALL of your links • 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.
Jump to Locations in a Document • 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 <h2> tag insert the following: <h2 id="A">A</h2> • Repeat this for all of the letters B through F
Mark the Top of the page • Find the opening <body> tag in the glossary.htm file. • Directly below the <body> tag insert an id attribute in the <div> tag <div id="top"> This gives us a way to allow users to jump back to the top of the list.
Linking to an id • Once you have marked an element with an id attribute you an create a hypertext link to that element. • Using the <a> tag we can enable users to jump from one part of the page to another [<a href="#id">content</a>] Where id is te value of the id attribute and content is what is displayed on the web page.
Change the list of letters to Hypertext Links • Locate the letter [A] in the list of letters at the top of the glossary.htm file. • Insert the following: [<a href="#A">A</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.
Defined List • A defined list <dl>works like an ordered list <ol> or unordered list <ul> and allows for each defined term <dt> to be defined using a definition <dd> <dl> <dt>term 1</dt> <dd>definition of term 1</dd> <dt>term 2</dt> <dd>definition of term 2</dd> </dl>
Jumping to terms in the Glossary • 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: <dt id="aperture"><b>Aperture</b></dt> Do the same for the term “exposure” <dt id="exposure"><b>Exposure</b></dt>
More id for defined terms • 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
Create links to Glossary on the Home Page • 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: <li><a href="glossary.htm#f-stop">F-stop</a>: f/7.1</li> Save the home.htm file and check the F-stop link.
Check the other links • 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.
Linked Images • 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.
Define the hotspots • Create hotspots using the <area>tag. Find the <area> tag on p. 430 of the HTML book. • Go to the page referenced to read about the <area> 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.
Make the Hotspots on the Home Page • Return to the home.htm file in Notepad • Directly below the <img> tag for the CAMshots logo, insert the following: <map id="logomap" name="logomap"> <area shape="circle" coords="82, 78, 80" href="home.htm" alt="Home"/> <area shape="rect" coords="168, 110, 225, 145" href="tips.htm" alt="Tips" /> <area shape="rect" coords="240, 110, 402, 145" href="glossary.htm" alt="Glossary" /> </map>
Apply the logomap • Insert the following attribute to the <img> tag for the CAMshots logo: <img src="camshots.jpg" alt="CAMshots" usemap="#logomap" /> • 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
Remove the border • You may see a border around the hotspots. We can remove them with the following code in the home.htm file: <img src="camshots.jpg" alt="CAMshots" usemap="#logomap" style="border-width: 0"/> Save the file and refresh your page.
Add Image Maps to the other pages • Copy the entire section identified by the first <div> in the home.htm file and paste it into the tips.htm and glossary.htm files replacing the first <div> sections. This will create the hotspots on all of the pages. • Save all of your files and test the hotspots on all three pages.
