The Web Wizards Guide to HTML Chapter Four All About Hyperlinks.

Slides:



Advertisements
Similar presentations
The Web Wizards Guide to HTML Chapter Eight Publishing on the Web.
Advertisements

Copyright © 2003 Pearson Education, Inc. Slide 6-1 Created by Cheryl M. Hughes, Harvard University Extension School Cambridge, MA The Web Wizards Guide.
HTML III. Learning Objectives HTML Links Structuring Pages with Frames Introduction to Cascading Style Sheets (CSS)
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.
Linking Your Web Pages Together. Links… index.htmunit4.htm Evaluation of web graphics GIF vs. JPEG Web photo album To link the lines in index.htm to the.
In this lecture, you will learn: ❑ How to link between pages of your site ❑ How to link to other sites ❑ How to structure the folders on your web site.
Hyperlink & Form Pertemuan 11 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 5: Hyperlinks.
Relative and Absolute Relative Absolute.  In web-page design, a hyperlink (or link) is a reference to a document that the reader can directly follow,
Creating hyperlinks with the tag Skills: using the tag IT concepts: tag, attribute This work is licensed under a Creative Commons Attribution-Noncommercial-Share.
HTML Introduction (cont.) 10/01/ Lecture 8, MAT 279, Fall 2009.
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.
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.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Hyperlinks.
Internal and External Links Web Design – Section 3-6 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
HTML Links and Anchors.
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.
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.
Hyperlinks. Linking pages…Hyperlinks 2 Lecture 8  Hyperlink “A clickable HTML element that will direct the web browser to display a different Web page.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Tutorial 30 – Bookstore Application: Client Tier Introducing.
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.
Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.
Linking web pages Wah Yan College (Hong Kong) Mr. Li C.P.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 6: Links.
1.  Use the anchor element to link from page to page  Configure absolute, relative, and hyperlinks  Configure relative hyperlinks to web pages.
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.
The Web Wizard’s Guide to HTML Chapter One World Wide Web Basics.
Adding Links Learning Web Design: Chapter 6. Lesson Overview Using the anchor tag Linking to other pages with relative or absolute pathnames Linking to.
The Web Wizard’s Guide to HTML Chapter Seven Frames.
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.
Creating Links. The Anchor Element: The anchor tag can be used in three different ways: 1.External link – to link to a web page outside your own website.
Internal and External Links Web Design – Section 3-6 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
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.
Introduction to Programming the WWW I CMSC Summer 2003 Lecture 3.
XP 1 HTML Tutorial 2: Developing a Basic Web Site.
HTML Basic. What is HTML HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it.
Internal and External Links Web Design – Section 3-6 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Chapter 6 Links. 3 Parts of Links 1. Destination: defines what happens when a user clicks the link. 2. Label: this is the text (or possibly an image)
HTML Links HTML uses a hyperlink to another document on the Web.
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.
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.
XP 1 Charles Edeki AIU Live Chat for Unit 2 ITC0381.
CIS 228 The Internet Day 4, 9/8/11 Getting on the Internet.
Lecture 8 Introduction to Web Programming. Announcement  First In-class exam will be on Oct. 10 (Wednesday)  2.50pm – 4.05pm  Exam will cover all materials.
Chapter 8 Adding Multimedia Content to Web Pages HTML5 & CSS 7 th Edition.
1 3/2/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: Hyperlinks.
Hyperlinks Links for Other Pages. Hyperlink (aka Link) Text (or image) user can click Takes user to different location In general, location can be: On.
Lecture 6, MAT 279, Fall HTML Introduction (cont.) 9/17/2009.
HTML5 and CSS3 Illustrated Unit E: Inserting and Working with Links.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 4.
HTML Links CS 1150 Spring 2017.
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
Internal and External Links
Internal and External Links
Hyperlink Anchor tag and its attributes Four Types of URL
LINKS.
Web Design and Development
Hyperlink Anchor tag and its attributes Four Types of Hyperlink
HTML Introduction Lecture 8.
Hyperlink Anchor tag and its attributes Four Types of URL
HTML Links.
Pertemuan 1b
Lesson 4: Hyperlinks.
Adding Links Chapter 6 4/9/2019.
HTML LINKS
HTML Links CS 1150 Fall 2016.
Presentation transcript:

The Web Wizards Guide to HTML Chapter Four All About Hyperlinks

Chapter Objectives Introduce three types of hyperlinks Explain how to add absolute URLs Explain how to add relative URLs Explain how to add named anchors Examine the problem of link maintenance

Different Types of Hyperlinks Absolute URLs point to Web pages on other Web servers Relative URLs point to Web pages on the same Web server Named Anchors point to a different location on the current Web page

All Hyperlinks Have Two Parts The Link Label is the visible element that the user points to and clicks (link labels can be text segments or images) The Link Destination is the location that the link takes you to when you click on the link Only the link destinations are handled differently for absolute URLs, relative URLs, and named anchors

Anchor Tags All hyperlinks are created with the anchor tag: this is a link label The href attribute is used to specify the link destination:

Absolute URLs All absolute URLs use complete URL addresses for their link destinations: UMass-Amherst Any Web page can be referenced by an absolute URL as long as you have its correct address

Relative URLs A relative URL need only specify a file name for its link destination: tree houses This assumes the destination file is in the same directory as the HTML file containing the link If the file is in a different directory, pathing information must be added to the href value

Named Anchors A named link destination specifies a location that has been marked by an anchor tag with a name attribute Some Good Lumber some good lumber The href value is prefaced with the # character but the name value is not

Named Anchors Combined with Other Links A named anchor can be added to an absolute or relative link as long as the destination being referenced contains that named anchor Some Good Lumber Just add a # followed by the anchors name to the end of the file name in the href value

Link Maintenance An absolute link that works today may not work tomorrow Dead links frustrate visitors and detract from your Web pages To keep all of your links operational, you have to test them periodically and update any that have died

Automated Link Checkers If you have a large number of links, you should automate the process of link testing You can subscribe to a Web-based service for link testing and weekly or monthly link reports You can obtain your own link testing software and run it yourself