Tutorial 1: Developing a Basic Web site Session 2.2

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

Do you know the path? http://www.gcsu.edu/business/index.htm http://www.gcsu.edu/business/deanswelcome.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).

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>

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

Using Image Maps Purpose What is a hotspot?

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

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

<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” />

Working with Metadata

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" />

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

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.