Hyperlinks. Linking pages…Hyperlinks 2 Lecture 8  Hyperlink “A clickable HTML element that will direct the web browser to display a different Web page.

Slides:



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

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.
Chapter 5 Creating an Image Map.
Image Maps and Graphics Internet Basics and Far Beyond! Mrs. Wilson.
New Perspectives on Creating Web Pages with HTML
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.
Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 3: Hyperlinks and Images.
Tutorial 2 Developing a Basic Web Site
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.
CIS101 Introduction to Computing HTML Project Two.
COS 125 DAY 15. Agenda Assignment 4 Posted –Due March 25 Assignment 5 posted –Due April 1 (no joke!) Left to do –5 Assignments (9 total) One per week.
COS 125 DAY 16. Agenda Second Capstone Progress Report Due March 23 (next class ) Assignment #4 assigned –Due Tuesday March 23 Exam #3 will March 26 –Castro.
COS 125 DAY 15. Agenda Second Capstone Progress Report Due Mar 24 Assignment #4 assigned –Due Thursday, March 24 Exam #3 will be on March 24 –Castro Chaps.
Hyperlinks. Working with Linked Images  A standard practice on the Web is to turn the Web site’s logo into a hypertext link pointing to the home page.
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.
XP 1 Developing a Basic Web Site Creating a Chemistry Web Site Tutorial 2.
Tags through Forms. This element is required for all HTML pages It must be at the top of every page of every website We’ll see later on why it is important.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
XP Tutorial 2New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Developing a Basic Web Site Creating a Chemistry Web Site Tutorial 2.
Tutorial 2 Developing a Web Site
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.
Tutorial 2 Developing a Basic Web Site. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Learn how to storyboard various.
CSCE Chapter 5 (Links, Images, & Multimedia) CSCE General Applications Programming Benito Mendoza 1 By Benito Mendoza Department.
HTML Overview Part 4 – Tables 1. HTML Tables  Tables are defined with the tag pair.  A table is divided into rows with tag pairs. o tr stands for "table.
XP 1 New Perspectives on Creating Web Pages with HTML Adding Hypertext Links to a Web Page.
Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –
Chapter 5 Creating an Image Map.
XHTML Louise Soe updated September 2009.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
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.
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.
HTML, CSS, and XML Tutorial 2 Developing a Web Site.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 6: Links.
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.
Creating Links – Lesson 31 Creating Links Lesson 3.
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.
Developing a Basic Web Site
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.
XP 1 HTML Tutorial 2: Developing a Basic Web Site.
 You can also divide an image into regions that link to different documents depending on where someone clicks.  This is called an imagemap, and any.
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.
XP INFT 140 – Chapter 2 1 Developing a Basic Web Site Creating a Chemistry Web Site.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
1 Mapping Coordinates Find the x- and y- coordinates for the images, relative to the x-axis and y-axis In a coordinate pair, the first number is the x-coordinate.
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.
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.
Session: 4. © Aptech Ltd. 2Creating Hyperlinks and Anchors / Session 4  Describe hyperlinks  Explain absolute and relative paths  Explain how to hyperlink.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
© ExplorNet’s Centers for Quality Teaching and Learning 1 Objective % Understand advanced production methods for web-based digital media.
`. Lecture Overview HTML Body Elements Linking techniques HyperText references Linking images Linking to locations on a page Linking to a fragment on.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
XP 1 Charles Edeki AIU Live Chat for Unit 2 ITC0381.
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.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 2 Creating Links.
Lecture 6, MAT 279, Fall HTML Introduction (cont.) 9/17/2009.
HTML5 and CSS3 Illustrated Unit E: Inserting and Working with Links.
Developing a Basic Web Site
Creating Links – Lesson 3
CNIT 131 HTML5 – Anchor/Link.
HTML Introduction Lecture 8.
Presentation transcript:

Hyperlinks

Linking pages…Hyperlinks 2 Lecture 8  Hyperlink “A clickable HTML element that will direct the web browser to display a different Web page or a different location on the current Web page.”

Hyperlinks Lecture 8 3  Use tags …, and href attribute  href = “a link destination”  example Tutorial link label, visible on a Web page, where you will click link destination

Specifying a Folder Path 4 Lecture 8

Specifying a Folder Path  To create a link to a file located in a different folder than the current document, you must specify the file’s location, or path  An absolute path specifies a file’s precise location within a computer’s entire folder structure  A relative path specifies a file’s location in relation to the location of the current document  If the file is in the same location as the current document, you do not have to specify the folder name  If the file is in a subfolder of the current document, you have to include the name of the subfolder 5 Lecture 8

Specifying a Folder Path  If you want to go one level up the folder tree, you start the relative path with a double period (..), a forward slash, and then provide the name of the file  To specify a different folder on the same level, known as a sibling folder, you move up the folder tree using the double period (..) and then down the tree using the name of the sibling folder 6 Lecture 8

Hyperlinks  Three type of Hyperlinks  Relative URL links to a Web page on the same Web server only need relative directory for the linked file  Absolute URL links to a Web page on a different Web server a complete URL should be used e.g.,  Name id links to a different location on the same Web page links to a different location on the different Web page 7 Lecture 8

Relative URL Lecture 8 8 My Page 2 link label, visible on a Web page, where you will click link destination My Page 3 link label, visible on a Web page, where you will click link destination

Covered so far in last class

Hyperlinks  Three type of Hyperlinks  Relative URL links to a Web page on the same Web server only need relative directory for the linked file  Absolute URL links to a Web page on a different Web server a complete URL should be used e.g.,  Name id links to a different location on the same Web page links to a different location on the different Web page 10 Lecture 8

Absolute URL Lecture 8 11 Instructor’s website link label, visible on a Web page, where you will click link destination

Linking to locations within same document  To jump to a specific location within a document, you first need to mark that location  One way to identify elements in an HTML document is to use the “id” attribute  id names must be unique  id names are not case sensitive 12

Hyperlink to a certain location  id attribute assigns a name (or an ID) to an element  with the ID, an element can be referred to easily  syntax content e.g., Welcome to MAT Lecture 8

Creating hyperlinks to locations in same document  use id attribute to identify the destination of the hyperlinks  syntax content e.g., Go to the top of the page. 14 Lecture 8

Download assign1.html from course website and create hyperlinks to locations inside the same document complete this assignment as per instructor’s instruction

Creating hyperlinks between documents  create a hyperlink specific location in another file with syntax content  filename is the file name of destination HTML file  id is the id name of an element in the destination file  e.g Go to the second paragraph of the tutorial 16 Lecture 8

Create a hyperlink in page8.html and link it to Mathematics and Computer Science Department element in assign1.html

Working with Hypertext Attribute (target) 18  You can force a document to appear in a secondary window or tab by adding the target attribute to the tag tag Lecture 8

Working with Linked Images  A standard practice on the Web is to turn the Web site’s logo into a hypertext link pointing to the home page  Link the JJ streetsign image to JJ homepage 19

Working with Linked Images and Image Maps  Earlier, entire image linked to the same destination  HTML also allows you to divide an image into different zones, or hotspots, each linked to a different destination  A single image can be linked to several locations 20

Working with Linked Images and Image Maps  To define these hotspots, you create an image map that matches a specified region of the inline image to a specific destination 21

Client-Side Image Maps  A client-side image map is inserted in an image into the HTML file  The browser locally processes the image map  Because all of the processing is done locally, you can easily test Web pages  More responsive than server-side maps  The browser’s status bar displays the target of each hotspot  Older browsers do not support client-side images 22

Creating Hotspots  Define a hotspot using two properties:  Its location in the image  Its shape  Syntax of the hotspot element: 23

Creating a Rectangular Hotspot  Two points define a rectangular hotspot:  the upper-left corner  the lower-right corner  A sample code for a rectangular hotspot is:  first two numbers represent the coordinates for the upper-left corner of the rectangle, and  the second two numbers indicate the location of the lower-right corner  The hotspot is a hypertext link to course website 24

Creating a Circular Hotspot  A circular hotspot is defined by the location of its center and its radius  A sample code for a circular hotspot is:  Coordinates are (68, 211), and it has a radius of 35 pixels  The hotspot is a hypertext link to google.com 25

Creating a Polygonal Hotspot  To create a polygonal hotspot, you enter the coordinates for each vertex in the shape  A sample code for a polygonal hotspot is:  Coordinates are for each vertex in the shape  The hotspot is a hypertext link to JJ homepage 26

Creating a Default Hotspot  where 345 is the width of the inline image in pixels and 325 is the image’s height  Any spot that is not covered by another hotspot will activate the default hotspot link 27

Creating a Client-Side Image Map 28

As an exercise, create 4 different rectangular hotspots in the image in assign1.html and link them to 4 department homepages