HTML

1
HTML

• For the World Wide Web

2
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.
• Garys website will contain several pages that he
  wants to link together. He needs our help to
  design his site.

3
Site Map
4
Collect Your Files

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.

5
Creating Hypertext Links

• To create links between pages we will use the ltagt
  tag.
• The general syntax to create a hypertext link is
• lta href"reference"gtcontentlt/agt
• Where reference is the URL or file name of the
  target page and content is what will be displayed
  as the active hypertext link

6
Create Hypertext Links

• Return to the home.htm file in Notepad and locate
  the second ltdivgt element in the top of the file.
  The ltdivgt tag is used to create divisions in your
  file.
• Create a hypertext link for the Home page by
  inserting the following after the second ltdivgt
  tag.
• lta href"home.htm"gtHomelt/agt

7
Tips and Glossary Links

• Create links for the Tips and Glossary pages in
  the same way as the Home page link using ltagt
  tags. Use the name of the files for each page
  and the name of the pages for the content.
• lta href"tips.htm"gtTipslt/agt
• lta href"glossary.htm"gtGlossarylt/agt
• Save your file and place the links to these pages
  in the other two files (tips.htm and
  glossary.htm) after the second ltdivgt tag

8
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.

9
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 lth2gt tag insert the following
  lth2 id"A"gtAlt/h2gt
• Repeat this for all of the letters B through F

10
Mark the Top of the page

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

11
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 ltagt tag we can enable users to jump
  from one part of the page to another
• lta href"id"gtcontentlt/agt
• Where id is te value of the id attribute and
  content is what is displayed on the web page.

12
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
• lta href"A"gtAlt/agt
• 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.

13
Defined List

• A defined list ltdlgtworks like an
• ordered list ltolgt or unordered list ltulgt
• and allows for each defined term ltdtgt to be
  defined using a definition ltddgt
• ltdlgt
• ltdtgtterm 1lt/dtgt
• ltddgtdefinition of term 1lt/ddgt
• ltdtgtterm 2lt/dtgt
• ltddgtdefinition of term 2lt/ddgt
• lt/dlgt

14
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
• ltdt id"aperture"gtltbgtAperturelt/bgtlt/dtgt
• Do the same for the term exposure
• ltdt id"exposure"gtltbgtExposurelt/bgtlt/dtgt

15
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

16
Create links to Glossary on the Home Page

• Open the home.htm file in Notepad
• Click Edit gt 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
• ltligtlta href"glossary.htmf-stop"gtF-stoplt/agt
• nbspnbspnbspnbspnbspnbspnbs
  pnbspnbspnbsp f/7.1lt/ligt
• Save the home.htm file and check the F-stop link.

17
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.

18
Linked Images

• It is standard practice to turn the website logo
  into a hypertext link pointing to the sites 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.

19
Define the hotspots

• Create hotspots using the ltareagttag. Find the
  ltareagt tag on p. 430 of the HTML book.
• Go to the page referenced to read about the
  ltareagt 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.

20
Make the Hotspots on the Home Page

• Return to the home.htm file in Notepad
• Directly below the ltimggt tag for the CAMshots
  logo, insert the following
• ltmap id"logomap" name"logomap"gt
• ltarea shape"circle" coords"82, 78, 80"
  href"home.htm" alt"Home"/gt
• ltarea shape"rect" coords"168, 110, 225, 145"
  href"tips.htm" alt"Tips" /gt
• ltarea shape"rect" coords"240, 110, 402, 145"
  href"glossary.htm" alt"Glossary" /gt
• lt/mapgt

21
Apply the logomap

• Insert the following attribute to the ltimggt tag
  for the CAMshots logo
• ltimg src"camshots.jpg" alt"CAMshots"
  usemap"logomap" /gt
• 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

22
Remove the border

• You may see a border around the hotspots. We can
  remove them with the following code in the
  home.htm file
• ltimg src"camshots.jpg" alt"CAMshots"
  usemap"logomap" style"border-width 0"/gt
• Save the file and refresh your page.

23
Add Image Maps to the other pages

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