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

Slides:



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

XP 1 Developing a Basic Web Site Tutorial 2: Web Site Structures & Links.
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.
HTML5 and CSS3 Illustrated Unit E: Inserting and Working with Links
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,
Links and Comments.
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.
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.
1 Linking Web Pages Why is Hypertext Hyper? Storyboarding Page Links (Site Map) Path to Files Various Links Click Here :( Page Footers.
1 Linking Web Pages Why is Hypertext Hyper? Storyboarding Page Links (Site Map) Sequential and Indexed-Sequential Designs Hierarchical Design Custom Design.
ETT 429 Spring 2007 Web Design I.
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.
Explanation of Web 6, Web 7 and Web 9 at my site Please be sure to bring up the speaker notes for the explanation Intro - Web 6, Web 7 and Web 9.
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.
Shows the entire path to the file, including the scheme, server name, the complete path, and the file name itself. Same idea of stating your full name,
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?
Should have seen something like this last week What does do? stands for table row and starts a new row in the table.
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.
HTML (Hypertext Markup Language ). Hyperlinks Hyperlinks from text to other sites Write the link, which is visible at the screen Example: Hyperlink to.
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.
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.
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.
XHTML Louise Soe updated September 2009.
Linking web pages Wah Yan College (Hong Kong) Mr. Li C.P.
 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:
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 HTML Tutorial 2: Developing a Basic Web Site.
Web Site Design & Management Class Three February 12, 2003 Pam Scanlon.
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 (Hyper Text Markup Language) Lecture II. Review Writing HTML files for web pages – efficient compact – fundamental. Text files with htm extension.
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.
1 Creating the Home Page. 2 Creating a Table Table attributes  Two rows and two columns  No border  Left-aligned Change the vertical alignment of the.
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.
HTML Comprehensive Concepts and Techniques Second Edition Project 2 Creating a Web Site with Links.
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.
Session: 4. © Aptech Ltd. 2Creating Hyperlinks and Anchors / Session 4  Describe hyperlinks  Explain absolute and relative paths  Explain how to hyperlink.
Chapter 5 BIE2313 | Web design. ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
Revision Webpage design HTML.   FACE  Attributes  Marquee  Define the following terms.
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.
HTML Links CS 1150 Spring 2017.
Links and Comments in HTML5
Sec (4.3) The World Wide Web.
Links and Comments.
Hyperlink Anchor tag and its attributes Four Types of URL
Web Design and Development
Hyperlink Anchor tag and its attributes Four Types of Hyperlink
Links.
Hyperlink Anchor tag and its attributes Four Types of URL
HTML Links.
Hyperlinks, Images and Tables
Lesson 4: Hyperlinks.
HTML LINKS
IDT Links in HTML What you need to know….
HTML Links CS 1150 Fall 2016.
Hyperlinks Anchor Tags.
Presentation transcript:

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

Anchor Tag and its Attribute Hyperlink or Anchor Hyperlink or Anchor is represented by text or image that is linked to another Web page, either on the same site or in another Web site. Clicking on the link will take the user to another Web page, or to another place on the same page. To create a link, use anchor tag and href attribute text/image

Link Text is used as link Click here to my Image is used as link

Absolute addressing Link Absolute addressing Absolute addressing is entire path of where a file exists; Full description of the address –Absolute address of a Web page on the internet –Absolute address of a Web page on a local system A:/Webfolder/index.html

Relative addressing Link Relative addressing Relative addressing is a special addressing method that applies only when the address you'd like to link to is on the same server or system as the web page that the link appears. Relative addressing requires only a partial pathname. This partial pathname only needs to contain enough information to set it from the current directory to the file you’d like to link to.

Relative addressing Link The simplest example would be the case where the webpage you’d like to link to are in the same system and directory. my link Partial pathname is expressed in notations –\ go to the main directory –..\ go one directory up in hierarchy –.\ the current directory

Intrapage Link Intrapage link directs or goes to a particular spot on a given Web page Two parts to Intrapage link –Naming a region –Linking to the region

Intrapage Link Naming a Region For an intrapage to work, we need to name the position within the page that we’d like to go. To name a region within a Web page, we use the anchor tag with a name attribute. my region

Intrapage Link Linking to the region To link to an identified region, use the anchor tag and href attribute. hash or pound symbol The value for the href attribute must begin with a hash or pound symbol, followed by the name of the region Go to a particular region

Attributes -- link, vlink, alink link, vlink, alink are attributes of body tag. Each effects the color of links at different stages. link attribute effects the color of an unvisited link vlink attribute effects the color of a visited link alink attribute effects the color an activated link