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