Linking Web Pages Why is Hypertext Hyper Storyboarding

Linking Web Pages Why is Hypertext Hyper? Storyboarding Page Links (Site Map) Sequential and Indexed-Sequential Designs Hierarchical Design Custom Design Source Anchors Path to Files Various Links (internal, external, intrapage, e-mail) Click Here Page Footers Review Questions Exercise 1

Objectives • Explain how storyboards are used to develop professional-looking Web pages • Create storyboards that outline hierarchical, sequential, and indexed sequential Web page design • Use anchor tags to create intrasystem and intersystem hyperlinks • Establish intrapage target names in HTML code and use these names as hyperlink references • Give some ways to avoid the “click here” • Create a hyperlink that opens the user’s e-mail • List potential design elements for page footers 2

Why is Hypertext is Hyper? A Hypertext Document <-- Links Activates a particular part of the screen perform some action; • Moving to another part of the document • Opening another document on the same Web Site • Opening a document on a Web Site somewhere else in the world. 3

Storyboarding Page Links A Storyboard is a diagram Illustrates how two or more Web pages, or sections of a Web page, relate to each other. • Sequential Design • Indexed-Sequential Designs • Hierarchical Design 4

Storyboarding Page Links Home Link Pg 1 Link Home Link pg 1 Link Hierarchical Link pg 1 pg 2 pg 3 Link pg 4 pg 2 Link pg 3 pg 1 Link Sequential Link Custom Indexed Sequential pg 3 Home Link pg 4 Link pg 2 Link 5

Storyboarding Page Links Sequential Link one page to another Indexed -Sequential Link sections of text within a page Hierarchical related text does not need to be read in any particular order Custom Design A subject requires a unique set of links 6

Anchor <a>anchor<a> Description: provides data to link images, sounds, another area within the page, or to another Web page Type: Container Link sections of text within a page Some Attributes: href, name, target, title, . . . 7

Source Anchors Used to indicate the origin of a link The following source anchor container identifies a link to the target HTML documeny frost. html <a href = “frost. html”>Robert Frost</a> (link to a Web page) Link will be seen as Robert Frost 8

href Every source anchor contains the special attribute Href, which stands for “Hypertext Reference” The href identifies the pointer, pathway, to the target of the link. Example; <a href = “poetry. html#RF”>Robert Frost</a> (link to RF section of the Web page) Link will be seen as Robert Frost 9

targets • Intrapage link: a link to a different location within the same Web page <a href = “poetry. html#RF”>Robert Frost</a> • Intrasystem link: link to other web pages stored on the same Web server <a href = “http: //www. bim. bilkent. edu. tr/~nsaglam/index. html” >Nur Sağlam</a> • Intersystem link: link to Web pages in other Web server <a href = “http: //www. metu. edu. tr”>METU</a> 10

Intrapage targets Intrapage Target NAME and Source Anchors <a name = “RF”>Robert Frost</a> (name of the target part of the Web page) <a href = “poetry. html#RF”>Robert Frost</a> (link of the target part of the Web page) or <a href = “http: //poetry. org/poets/poetry. html#RF”>Robert Frost</a> DO NOT forget to define your folder structure relatively! DO NOT forget how to write nested tags! 11

The “Click Here” click here to go to the next page Click here to send me e-mail You can go to the next page See pictures of my son Send me some e-mail 12

mailto: protocol mailto: is one type of Internet Protocol <a href = “mailto: aikinci@bilkent. edu. tr”>e-mail</a> 13

Page Footers Interesting list of links must appear at the end of every HTML document – page footer • Organization’s name • Logo • Street Address • Telephone Number • Fax Number • Web weaver’s name • Date page was last updated • Links to related pages 14

title It is used to display description of a link when it is pointed: <a href = http: //www. bilkent. edu. tr title = “Bilkent University Home Page”>Bilkent University</a> 15

Key Terms New Tags Intersystem Link <a>. . . </a> Intrapage Link Intrapage Target Name Intrasystem Link Page Footer Source New Attributes href name title Storyboarding 16

Review Questions 1. Define each of the key term 2. Why Storyboard is useful? 3. What is the basic code for a source anchor container that creates a hyperlink? 4. What are three different types of links found in a HTML document? 5. What identifies an absolute path? (previous lecture) 6. Why is it better to use a relative path? (previous lecture) 7. What is the basic code for e-mail link? 8. What tags must be written to built intrapage links? 17