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

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

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

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

5. 5 Home Link pg1 Link pg2 Link pg3 Link Pg1 Link Home Link pg1 Link pg2 Link pg3 Link pg4 Link Home Link pg1 Link pg2 Link pg3 Link pg4 Link Sequential Indexed Sequential Hierarchical Custom Storyboarding Page Links

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

7. 7 Anchor anchor 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,.....

8. 8 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 Robert Frost (link to a Web page) Link will be seen as Robert Frost

9. 9 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; Robert Frost (link to RF section of the Web page) Link will be seen as Robert Frost

10. 10 targets Intrapage link: a link to a different location within the same Web page Robert Frost Intrasystem link: link to other web pages stored on the same Web server Nur Sağlam Intersystem link: link to Web pages in other Web server METU

11. 11 Intrapage targets Intrapage Target NAME and Source Anchors Robert Frost (name of the target part of the Web page) Robert Frost (link of the target part of the Web page) or Robert Frost DO NOT forget to define your folder structure relatively! DO NOT forget how to write nested tags!

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

13. 13 mailto: protocol mailto: is one type of Internet Protocol e-mail mailto:aikinci@bilkent.edu.tr

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

15. 15 title It is used to display description of a link when it is pointed: Bilkent University http://www. bilkent.edu.tr

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

17. 17 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?