Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 5: Hyperlinks.

Slides:



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

HTML III. Learning Objectives HTML Links Structuring Pages with Frames Introduction to Cascading Style Sheets (CSS)
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 3: XHTML Coding © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page.
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,
Links and Comments.
New Perspectives on Creating Web Pages with HTML
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.
Computer Science 1611 Internet & Web Creating Webpages Hypertext and the HTML Markup Language.
1 Linking Web Pages Why is Hypertext Hyper? Storyboarding Page Links (Site Map) Sequential and Indexed-Sequential Designs Hierarchical Design Custom Design.
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.
Hyperlinks in HTML How to “throw an anchor”, or to create a hyperlink in raw HTML.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: Frames © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page Design.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames.
The Internet & The World Wide Web Notes
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.
IT Introduction to Website Development Welcome!
Mohammed Mohsen Links Links are what make the World Wide Web web-like one document on the Web can link to several other documents, and those.
XHTML Introductory1 Linking and Publishing Basic Web Pages Chapter 3.
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.
Agenda Links External and Internet Links Anchor Tag Text Hyperlinks Image Hyperlinks Images Image Attributes: src, alt, width, height, align, border.
Hyperlinks. Linking pages…Hyperlinks 2 Lecture 8  Hyperlink “A clickable HTML element that will direct the web browser to display a different Web page.
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.
XHTML Louise Soe updated September 2009.
Department of Information Technology Chapter 8 - Creating Hypertext links Lecturer: Ms Melinda Chung.
 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.
XP Mohammad Moizuddin Creating Web Pages with HTML Tutorial 2 1 New Perspectives on Creating Web Pages With HTML Tutorial 2: Adding Hypertext Links to.
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.
Adding Links Learning Web Design: Chapter 6. Lesson Overview Using the anchor tag Linking to other pages with relative or absolute pathnames Linking to.
Web software. Two types of web software Browser software – used to search for and view websites. Web development software – used to create webpages/websites.
IT Website Development Welcome!. Welcome to Unit 5! Working with Navigation This week’s reading: Chapter 10: Working with Navigation This Chapter.
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.
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 HTML. Today’s Discussion What is HTML ? What is HTML ? What is Web Page ? What is Web Page ? Web Server Web Server Web Browser Web Browser.
HTML BTEC National in Computing Section5. Create Information “HTML: defining HTML, discussing HTML uses and demonstrating HTML basics, HTML structure…..
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 HTML uses a hyperlink to another document on the Web.
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.
Site Development Foundations © 2004 ProsoftTraining All rights reserved.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.
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.
HTML5 and CSS3 Illustrated Unit E: Inserting and Working with Links.
Finally getting to html and CSS… Tim Berners-Lee, the writer of the software program that makes him the inventor of the WWW, defines the Internet as a.
HTML Links CS 1150 Spring 2017.
Links and Comments in HTML5
Internal and External Links
Links and Comments.
Hyperlink Anchor tag and its attributes Four Types of URL
Creating Links.
LINKS.
Hyperlink Anchor tag and its attributes Four Types of Hyperlink
Links and Comments.
Hyperlink Anchor tag and its attributes Four Types of URL
Creating Links.
Lesson 4: Hyperlinks.
Links and Comments.
Adding Links Chapter 6 4/9/2019.
Links and Comments.
Creating Links.
Presentation transcript:

Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 5: Hyperlinks

Lesson 5 Objectives Define and use the anchor tag Reference full and partial URLs Create local hyperlinks Create external hyperlinks Use images as hyperlinks Create internal hyperlinks Manage hyperlinks

The Anchor Tag The tag creates a hyperlink A container tag that encompasses the text or image (or both) to be used as a link The syntax for using the anchor tag to create a link is as follows: linked text or image (or both)

The Anchor Tag (cont'd) A fully qualified URL specifies an entire path A partial URL assumes a path relative to the file's current location Type of Reference DescriptionExamples Fully qualified URL (also called absolute URL) A URL (i.e., URI) that contains a full path to a resource, including the protocol indicator. Also known as a hard link. or or c:\inetpub\wwwroot\ccyp\syb\syb.html Partial URL (also called relative URL) A URL that assumes the current document's path. All references are made from the document's current directory. syb.html: Specifies a file in the current directory../css/stylesheet.css: Specifies a file one directory up from the current page pub/images/mybullet.gif: Specifies a file in a subdirectory

The Anchor Tag (cont'd) You can specify various protocols ProtocolHyperlink HTML Example HTTP Visit the CIW site. HTTPS (Secure HTTP) Visit our secure CIW site. FTP Download the file from our FTP server. You can send to us at Telnet Please visit our Telnet server.

The Anchor Tag (cont'd) Make sure that you: – Use a closing anchor tag – Place quotation marks around the value – Include the closing bracket at the end of the opening tag Various issues to troubleshoot with hyperlinks – Text and images disappear – All successive Web page text is a hyperlink – Garbled code appears on screen – Code will not validate due to a problem tag

The Anchor Tag (cont'd) Creating local hyperlinks Creating external hyperlinks Using images as hyperlinks Creating internal links – On a long page, a link to another point lower on the page – Internal links require internal bookmarks Example: target anchor text or image (or both) … other page content here … text/images linking to targetArea1

Accessing an External File's Internal Link Link to a specific point in another page without first accessing the top of that page To link to an internal anchor inside of another file, use the following syntax: link text/image

Managing Hyperlinks All hyperlinks need to be verified – Verify that the URL or other reference is valid – Verify that the target page or location is accessed Hyperlinks also need to be managed – Over time, URLs (and content) change – "Dead" links frustrate users Manually check links Automatic link-checking software: – Linklint ( – Link Controller ( – Checkbot ( Link should still be reviewed manually to verify relevance of linked content

Lesson 5 Summary Define and use the anchor tag Reference full and partial URLs Create local hyperlinks Create external hyperlinks Use images as hyperlinks Create internal hyperlinks Manage hyperlinks