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

Slides:



Advertisements
Similar presentations
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
Advertisements

Tutorial 1: Developing a Basic Web site
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.
Web Development & Design Foundations with XHTML
Chapter 2 HTML Basics Key Concepts
XP 1 Developing a Basic Web Site Tutorial 2: Web Site Structures & Links.
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.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
External Site Links by Awnya Boam. Links are found… …almost everywhere on the internet. They allow users to travel from one site to another.
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.
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.
1 XHTML continued Use the anchor tag to link from page to pageUse the anchor tag to link from page to page Create absolute and relative linksCreate absolute.
CIS101 Introduction to Computing HTML Project Two.
Lecture Navigation. What is Navigation? Hypertext – creates links Process of linking from a page to: –Another page in the same website –Another page on.
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.
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
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.
Basic HTML Hyper text markup Language. Re-cap  … - The tag tells the browser that this is an HTML document The html element is the outermost element.
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.
Adding Hyperlinks To a Web Page. Hyperlink and Its Add-Ons Main way to connect web pages and move throughout a web site. Uses the Anchor Tag which is.
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.
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.
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Linking web pages Wah Yan College (Hong Kong) Mr. Li C.P.
1 Web Developer Foundations: Using XHTML Chapter 3 XHTML Hyperlinks and Tables.
1 Web Developer & Design Foundations with XHTML Chapter 3 Key Concepts.
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 Development & Design Foundations with XHTML Chapter 2 HTML/XHTML Basics.
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.
HTML 58.51A LINKING & LISTS Linking to local files name of destination.... anchor tag HREF attribute. This attribute identifies the location of the link.
XP 1 HTML Tutorial 2: Developing a Basic Web Site.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
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)
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.
Links Building a Website Lesson 5. Links There are various ways to use links on a website: Link to other sites Link to other pages on the same site .
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2- part 2 Key Concepts 1 Copyright © Terry Felke-Morris.
REEM ALMOTIRI Information Technology Department Majmaah University.
Session: 4. © Aptech Ltd. 2Creating Hyperlinks and Anchors / Session 4  Describe hyperlinks  Explain absolute and relative paths  Explain how to hyperlink.
© ExplorNet’s Centers for Quality Teaching and Learning 1 Objective % Understand advanced production methods for web-based digital media.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.
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.
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.
Links and Comments in HTML5
Web Development & Design Foundations with HTML5 8th Edition
Links and Comments.
Creating Links.
LINKS.
Links and Comments.
Creating Links.
HTML Links.
Lesson 4: Hyperlinks.
Links and Comments.
Links and Comments.
Basics of Web Design Chapter 2 HTML Basics Key Concepts
Basics of Web Design Chapter 2 HTML Basics Key Concepts
Creating Links.
Presentation transcript:

1

 Use the anchor element to link from page to page  Configure absolute, relative, and hyperlinks  Configure relative hyperlinks to web pages in folders within a website  Configure a hyperlink to a named fragment internal to a web page

The anchor element Inline-level element Specifies a hyperlink reference (href) to a file Text between the and is displayed on the web page. Contact Us href Attribute  Indicates the file name or URL Web page document, photo, pdf, etc. 3

 Absolute link › Link to other websites Yahoo  Relative link › Link to pages on your own site › Relative to the current page Home 4

Shampoo Home Dog Bathing 5 Relative links from the collars page in the products folder

 The target attribute on the anchor element opens a link in a new browser window or new browser tab. Yahoo! 6

 Automatically launch the default mail program configured for the browser  If no browser default is configured, a message is displayed 7

A link to a part of a web page Also called named fragments, fragment ids Two components: 1. The element that identifies the named fragment of a Web page. This requires the id attribute. ….. 2. The anchor tag that links to the named fragment of a Web page. This uses the href attribute. Back to Top 8 Note the use of the # in the anchor tag!

9

 This part of chapter 2 provided an overview of using the anchor element to code hyperlinks.