Download
1 / 23
230 likes | 442 Views
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 contai
E N D
1. HTML For the World Wide Web
2. 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. CAMshots Website
3. Site Map
4. 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.
Collect Your Files
5. 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 Creating Hypertext Links
6. 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>
Create Hypertext Links
7. 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 Tips and Glossary Links
8. 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. Check ALL of your links
9. 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
Jump to Locations in a Document
10. 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. Mark the Top of the page
11. 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.
Linking to an id
12. 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. Change the list of letters to Hypertext Links
13. 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> Defined List
14. 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> Jumping to terms in the Glossary
15. 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
More id for defined terms
16. 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. Create links to Glossary on the Home Page
17. 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. Check the other links
18. 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. Linked Images
19. 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. Define the hotspots
20. 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> Make the Hotspots on the Home Page
21. 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
Apply the logomap
22. 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. Remove the border
23. 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. Add Image Maps to the other pages
