1 Linking Web Pages Why is Hypertext Hyper? Storyboarding Page Links (Site Map) Sequential and Indexed-Sequential Designs Hierarchical Design Custom Design.

Slides:

Advertisements

Similar presentations

HTML Lesson 4 Hyper Text Markup Language. Assignment Part 3  Save your last html file as “FirstName3.htm”  Set the title as “FirstName LastName Third.

Advertisements

XP 1 Developing a Basic Web Site Tutorial 2: Web Site Structures & Links.

Developing a Web Site: Links Using a link is a quicker way to access information at the bottom of a Web page than scrolling down A user can select a link.

Links and Comments.

HTML Introduction (cont.) 10/01/ Lecture 8, MAT 279, Fall 2009.

LIST- HYPERLINK- IMAGES

XP Adding Hypertext Links to a Web Page. XP Objectives Create hypertext links between elements within a Web page Create hypertext links between Web pages.

Web Structure Create Links Using HTML. 2 Objectives List different types of Web site structures and how to employ them Create element ids to mark specific.

Lecture Navigation. What is Navigation? Hypertext – creates links Process of linking from a page to: –Another page in the same website –Another page on.

CM143 - Web Week 2 Basic HTML. Links and Image Tags.

1 Linking Web Pages Why is Hypertext Hyper? Storyboarding Page Links (Site Map) Path to Files Various Links Click Here :( Page Footers.

Announcement #1 1 Lecture 9. Announcement #2  Midterm exam will be on Oct. 12 (Tuesday)  pm – 1.45 pm  Exam will cover all materials till Oct.

Lecture 13. A Very Brief Introduction to HTML and XHTML, part II Instructor: Jie Yang Department of Computer Science University of Massachusetts Lowell.

XP 1 Developing a Basic Web Site Creating a Chemistry Web Site Tutorial 2.

CORE 2: Information systems and Databases HYPERTEXT/ HYPERMEDIA.

XP Tutorial 2New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Developing a Basic Web Site Creating a Chemistry Web Site Tutorial 2.

HTML Links and Anchors.

CNIT 132 – Week 3 HTML (2). Working with Links Using a link is a quicker way to access information at the bottom of a Web page than scrolling down. A.

Links in HTML. Hyperlinks or links Millions of linked web pages make up the World Wide Web Used to connect a web page to another web page on the same.

Review: How do you change the border color of an image?

PIZZA WEB PAGE May 28, FOR TODAY  Review Vocabulary Words (take out your worksheets!)  Pizza Web Page  Research more tags  Turn in your homework!

HTML Essentials HyperText. Why HyperText ? Hypertext is text or pictures which reference other pages which the reader can immediately access Hypertext.

Lesson 6 Links. Creating Folders  For every web site/page, you need to create a separate folder  The computer cannot find links if they are not stored.

WEB DESIGN USING DREAMWEAVER. The World Wide Web –A Web site is a group of related files organized around a common topic –A Web page is a single file.

Informatics Computer School CS114 Web Publishing HTML Lesson 2.

Web Design (5) Navigation (1). Creating a new website called ‘Navigation’ In Windows Explorer, open the folder “CU3A Web Design Group”; and then the sub-folder.

Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Project 4: Creating Hyperlinks Kelly L.

CHAPTER 3 USING HYPERLINKS TO CONNECT CONTENT. LEARNING OBJECTIVES How to use the and anchor tag pair to create a text-based hyperlink. How to use the.

Internet Applications Development Lecture 5 L. Obead Alhadreti.

CP2022 Multimedia Internet Communication1 HTML and Hypertext The workings of the web Lecture 7.

Linking web pages Wah Yan College (Hong Kong) Mr. Li C.P.

Developing a Web Site. Web Site Navigational Structures A storyboard is a diagram of a Web site’s structure, showing all the pages in the site and indicating.

 The tag to create a link is called, which stands for anchor.  You put the address of the page to link to in quotes after href=, like the following:

Tutorial 4: Working with Hyperlinks. Objectives Session 4.1 – Place bookmarks on a Web page – Create a link to a bookmark – Create a link to another Web.

1.  Use the anchor element to link from page to page  Configure absolute, relative, and hyperlinks  Configure relative hyperlinks to web pages.

Tutorial 2 Developing a Basic Web Site. XP Objectives Learn how to storyboard various Web site structures Create links among documents in a Web site Understand.

Unit 3 Day 6 FOCS – Web Design. Journal Unit #3 Entry #4 Write the source code that would make the following display on a rendered page: Shopping List.

Adding Links Learning Web Design: Chapter 6. Lesson Overview Using the anchor tag Linking to other pages with relative or absolute pathnames Linking to.

INTRODUCTORY Tutorial 6 Using Links on a Web Page.

XHTML Hyperlinks. Creating Links to Other Web Pages A link, or hyperlink, is a specially formatted Web page object that the user can click to open a different.

XP 1 Developing a Basic Web Site Creating a Chemistry Web Site Tutorial 2.

Tutorial 2 Developing a Web Site. XP Objectives Learn how to storyboard various Web site structures Create links among documents in a Web site Understand.

XP 1 HTML Tutorial 2: Developing a Basic Web Site.

Links in HTML What you need to know….. Hyperlinks or links Millions of linked web pages make up the World Wide Web Used to connect a web page to another.

HTML Links HTML uses a hyperlink to another document on the Web.

Lesson 6 Links. Creating Folders  For every web site/page, you need to create a separate folder  The computer cannot find links if they are not stored.

Hit125 application concepts Types of links File paths & directory structures.

1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page.

Developing a Basic Web Site HTML Tutorial 2. Objectives Define links and how to use them. Create element ids to mark specific locations within a document.

REEM ALMOTIRI Information Technology Department Majmaah University.

Links and Images. Links HTML uses a hyperlink to link to another document on the Web A hyperlink can be either text or a picture Links are created with.

Hyperlink ● Anchor tag and its attributes ● Four Types of URL ─ ─ Absolute addressing ─ Relative addressing ─ Intrapage ● Attributes -- link, vlink,

Session: 4. © Aptech Ltd. 2Creating Hyperlinks and Anchors / Session 4  Describe hyperlinks  Explain absolute and relative paths  Explain how to hyperlink.

`. Lecture Overview HTML Body Elements Linking techniques HyperText references Linking images Linking to locations on a page Linking to a fragment on.

XP 1 Charles Edeki AIU Live Chat for Unit 2 ITC0381.

HTML And the Internet. HTML and the Internet ► HTML: HyperText Markup Language  Language in which all pages on the web are written  Not Really a Programming.

Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 2 Creating Links.

Objective % Select and utilize tools to design and develop websites.

Links and Comments in HTML5

Links and Comments.

Hyperlink Anchor tag and its attributes Four Types of URL

Objective % Select and utilize tools to design and develop websites.

Web Design and Development

Hyperlink Anchor tag and its attributes Four Types of Hyperlink

CNIT 131 HTML5 – Anchor/Link.

Links and Comments.

Hyperlink Anchor tag and its attributes Four Types of URL

Lesson 4: Hyperlinks.

Links and Comments.

Links and Comments.

Presentation transcript:

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, ) Click Here Page Footers Review Questions Exercise

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 List potential design elements for page footers

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 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 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 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 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 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 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 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 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 The “Click Here” click here to go to the next page Click here to send me You can go to the next page See pictures of my son Send me some

13 mailto: protocol mailto: is one type of Internet Protocol

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 title It is used to display description of a link when it is pointed: Bilkent University bilkent.edu.tr

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

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 link? 8.What tags must be written to built intrapage links?