HTML - Web Page Design 1
Download
Report
Transcript HTML - Web Page Design 1
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.htm
glossary.htm
1.
2.
3.
4.
5.
6.
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.
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
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 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
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 <h2> tag insert the
following: <h2 id="A">A</h2>
Repeat this for all of the letters B through F
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.
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.
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.
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>
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>
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:
<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.
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 <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.
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>
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
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.
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.