1. Tutorial 1: Developing a Basic Web site
Session 2.2

2. Objectives Learn more about identifying a file path
Create named anchors
Create image maps
Add metadata

3. Do you know the path? http://www.gcsu.edu/business/index.htm
or deanwelcome.htm
Do You Know the Path game?
Place child.htm, flower.htm, and scenic.htm in a photo subfolder => paths from contest.htm to those three files (internal links).
Place the child.htm in a portrait subfolder => Path from contest.htm to this file (internal links).

4. Creating Name Anchors Purpose: Link to a different level on a page.
Two-step process
Syntax: Use of the id attribute
Example:
Creating the named anchor (level):
<h3 id=“intro”>Belleview Bed & Breakfast</h3>
Creating the link to the named anchor (reach the level):
<a href=“index.html#intro”>Back to the top of the page</a>

5. Review Practice – Named Anchors
On the Child page, locate the three h2 elements naming the three child photo winners. Assign the h2 elements to the ids photo1, photo2, and photo3, respectively.
On the Contest page, scroll down to the three child photo thumbnails (thumb1.jpg, thumb2.jpg, and thumb3.jpg). Link each inline image to the corresponding h2 heading in the child.html file identified in #1 (above).

6. Using Image Maps
Purpose
What is a hotspot?

7. Using Image Maps Rectangular hotspots: <map name=“text”>
<area shape=“rect” coords=“x1, y1, x2, y2” href=“reference” alt=“text” /> …
</map>

8. Using Image Maps Example:
<map name=“usamap”> <area shape=“rect” coords=“245, 125, 300, 180” href= “ alt=“Colorado” />
</map>

9. <meta name="text" content="text” />
Working with Metadata
Web authors often turn to search engine optimization (SEO) tools to make their sites appear more prominently in search engines.
Information about the site is called metadata
Add metadata to your Web pages by adding a meta element to the head section of the document
Syntax:
<meta name="text" content="text” />

10. Working with Metadata

11. Working with Metadata Store the name of the Web page’s author:
<meta name=“author” content=“John Doe”/>
Add a description of the Web site:
<meta name="description" content="Expect more pay less with Target. Spend $50, get free shipping on over 500K items. Chose from a wide selection of furniture, baby, electronics, toys, shoes" />
Add a list of keywords:
<meta name="keywords" content=“Target, furniture, baby, electronics, toys, shoes, apparel, video games, kitchen, bedding, sporting goods, appliances, free shipping" />

12. Review Practice - Metadata
In index.html (homepage of Web site),
add the keywords and description of your
choice.

13. Summary Use Named Anchors to reach a specific level on a page.
Use image map to create some hotspots associated with hyperlinks on an image.
Use metadata for SEO and make your site more visible.