Presentation on theme: "Tutorial 1: Developing a Basic Web site"— Presentation transcript:
1 Tutorial 1: Developing a Basic Web site Session 2.2
2 Objectives Learn more about identifying a file path Create named anchorsCreate image mapsAdd metadata
3 Do you know the path? http://www.gcsu.edu/business/index.htm or deanwelcome.htmDo 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 processSyntax: Use of the id attributeExample: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).
9 <meta name="text" content="text” /> Working with MetadataWeb 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 metadataAdd metadata to your Web pages by adding a meta element to the head section of the documentSyntax:<meta name="text" content="text” />
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 yourchoice.
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.