Unit 2. Tutorial 2- CAMshots

Tutorial 2 CAMshots

Tutorial 2

CAMshots

1.    Open the hometxt.htm, tipstxt.htm and glosstxt.htm  files from CAMshots file in the Student data file.  Go to the comment section in each file and add your name and the date.  Save the files as home.htm, tips.htm and glossary.htm, respectively.

2.    Open each page in your web browser and view the current layout and appearance of the web pages.

3.    We are going to create a navigation list which is a list containing links to the main topic areas of the site.  Go to the home.htm file.  At the top of the file directly below the closing </header> element, insert the following code:

</header>

<nav>

         <ul>

                  <li>Home</li>

                  <li>Tips</li>

                  <li>Glossary</li>

         </ul>

</nav>

Save the changes.  Open the home.htm file and see your changes.

4.    Open the tips.htm file and repeat step 3.  Save your changes.

5.    Open the glossary.htm file and repeat step 3.  Save your changes.

Open the tips.htm and glossary.htm files in your web browser to verify that the navigation lists appear directly below the page headers.

6.    We are now going to link these navigation lists using the <a> tags.  Go to the home.htm file and add the following to the navigation lists:

<li><a href= “home.htm”>Home</a></li>

                  <li><a href= “tips.htm”>Tips</a></li>

                  <li><a href= “glossary.htm”>Glossary</a></li>

Save your changes.

7.    Open the tips.htm file and repeat step 6.  Save your changes.

8.    Open the glossary.htm file and repeat step 6.  Save your changes.

Go back to the home.htm file and open it to test those links.

9.    We are going to add a navigation list to the glossary.htm file. Go to this file and insert the following navigation list below the <section <h1>:

<nav>

         [A]         [B]         [C]

         [D]         [E]         [F]

         [G]         [H]         [I]

         [J]         [K]         [L]

         [M]         [N]         [O]

         [P]         [Q]         [R]

         [S]         [T]         [U]

         [V]         [W]         [X]

         [Y]         [Z]

</nav>

Save your changes.  View the glossary.htm file to see your changes.

10.To enable users to jump to a specific location within a document, you need to mark that location using the id= attribute. For learning purposes, we are going to mark the sections in the glossary corresponding to the letters A through F.  Locate the <h2> tag for the letter A and insert the following:

<h2 id= “A”>A</h2>

Continue adding the id attributes to B through F. 

Save your changes.

11.For long documents like the Glossary page, it is helpful to enable users to jump directly from the bottom to the top of the page, rather than having to scroll back up.  With that in mind, you’ll also add an id= attribute marking the <header> at the top of the page by adding the following:

<header id= “top”>

Save your changes.

12. Now we have to link the navigation list on the glossary.htm file.  Go to this file and insert the following:

<nav>

         [<a href= “#A”>A</a>] [<a href= “#B”>B</a>] [<a href= “#C”>C</a>]

[<a href= “#D”>D</a>] [<a href= “#E”>E</a>] [<a href= “#F”>F</a>]

Save your changes.  Open the glossary.htm page in your browser and check to see that the A through F links jump you to the correct areas of the page.

13.  We also need to link the Return to the top. Scroll down to the bottom of the glossary.htm file to locate the text Return to the top.    Add the following after the <div> tag:

<div><a href= "#top">Return to Top</a> &#8657;</div>

Save your changes and open the file to verify that it works.

13.On the home.htm there is a Photo of the Month.  Along with that photo are the digital camera settings used in taking the photo.  Many of the camera settings are described on the Glossary page.  We are going to create a link between the setting name and the glossary entry for 5 settings.  The five entries that we are going to link are F-stop, Exposure, Focal Length, Aperture and Flash Mode.  The first step is to mark these entries in the glossary using an id= attribute.  Go to the glossary.htm file and add the following id= attributes:

<dt id= “aperature”><b>Aperature</b></dt>

<dt id= “exposure”><b>Exposure</b></dt>

<dt id= “f-stop”><b>F-stop</b></dt>

<dt id= “flash_mode”><b>Flash Mode</b></dt>

<dt id= “focal_length”><b>Focal Length</b></dt>

Save your changes.

14.Now we have to create links to these glossary entries.  Go to the home.htm file and scroll down and locate the F-stop term in the unordered list.  Mark F-stop as a link by using the following code:

<li><a href= “glossary.htm#f-stop”>F-stop</a>:

Mark Exposure as a link using the following code:

<li><a href= “glossary.htm#exposure”>Exposure</a>:

Mark the remaining three entries in the unordered list as links.

Save your changes.  Open the home.htm file and verify that the links work.

15.The Photo of Month can be linked so that when clicked on by the user, will come up larger in another window.  Go to the home.htm file and link the photo image by enclosing the <img> tag with a set of <a> tags as follows:

<a href= “rainbow_lg.png”>

         <img src= “rainbow.png” alt= “Photo”/>

</a>

Save the changes. Open the home.htm file in your browser to verify the change.

16.You can mark an image or image map as a link.  An image can be divided into different zones or hotspots, each linked to a different destination.  We are going to do this with the image in the CAMshots header.  If a user clicks within the circle of the CAMshots circle, the user jumps to the Home page.  If the user clicks on the text Tips, the user jumps to the Tips page, and on the Photo Glossary, to the Glossary page.   Go to the home.htm file and insert the following directly below the <img> tag for the CAMshots header.

<map name= “logomap”>

<area shape= “circle” coords= “82, 82, 80” href= “home.htm” alt= “Home Page”/>

<area shape= “rect” coords= “235, 120, 310, 150” href= “tips.htm” alt= “Tips”/>

<area shape= “rect” coords= “340, 120, 510, 150” href= “glossary.htm” alt= “Glossary”/>

</map>

17.To apply an image map to an image, you add the usemap attribute.  Add the following to the <img  in the header:

<header>

         <img src= “camshots.jpg” alt= “CAMshots” usemap= “#logomap” />

Save your changes. Open the home.htm file in your web browser and click anywhere within the Tips in the header image and verify that the browser opens the Tips page.

Return to the Home page and click within the words Photo Glossary in the header image to verify that the browser opens the Glossary page.

18.We now have to add the image maps to the other Web pages.  Go to the tips.htm and repeat steps 16 and 17.  Save your changes.

19.Go to the glossary.htm repeat steps 16 and 17.  Save your changes.

Go to the home.htm file and open it in your web browser.  Click on the new links to make sure they work back and forth from each page.

20.We are going enable users to link to a resource on the internet from this web site.  Go to the tips.htm file and scroll to the bottom.  Locate the definition list containing the list of web sites.  We are going to link the entry for Apogee Photo using the following code:

dt>&#9758; <a href= "http://www.apogeephoto.com">Apogee Photo</a></dt>

For the Outdoor Photographer:

<dt>&#9758; <a href= "http://www.outdoorphotographer.com">Outdoor Photographer</a></dt>

For the Digital Photo:

<dt>&#9758; <a href= "http://www.dpmag.com">Digital Photo</a></dt>

For the Popular Photography and Imaging:

<dt>&#9758; <a href= "http://www.popphoto.com">Popular Photography and Imaging</a></dt>

Save your changes.  Open the tips.htm file on your web browser and verify that each link takes you to the respective web site.

21.We will now link an e-mail address on the Home page.  Go to the home.htm file. Find the first paragraph and locate the text contact me.  Add the following code to mark the text contact me as a link:

<a href= “mailto:ghayward@camshots.com?subject= “CAMshots%20Message”>

Contact me

</a>

Save your changes.  Open the home.htm file and click on contact me to verify that your e-mail program displays a message with ghayward@camshots.com as the recipient and CAMshots Message as the subject.

22.Go back to the tips.htm file. We are going to make the web site links open in another window when clicked on.  This makes it easy for the user to return to the home page because it does not close.  The target= attribute will be added to each of the four web links as follows:

dt>&#9758; <a href= “http://www.apogeephoto.com” target= “new”>Apogee Photo</a></dt>

Add this target= attribute to all four web sites.

Save your changes.  Open the tips.htm file in your web browser and verify that each link opens in a new window.

23. Metadata optimizes a Web site for search engines to notice it when someone is searching for particular data.  By adding this information, your web site will be more likely to be noticed.  We will add this metadata to the home.htm file.  Go to the home.htm file and add the following meta elements directly below the <meta charset= “UTF-8”/>

<meta name= “author” content= “Gerry Hayward”/>

<meta name= “description” content= “A site for sharing information on digital photography and cameras”/>

<meta name= “keywords” content= “photography, cameras, digital imaging” />

Save your changes.