Hyperlinks Linking pagesHyperlinks q Hyperlink A clickable HTML

Hyperlinks

Linking pages…Hyperlinks q 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. ” Lecture 8 2

Hyperlinks q Use tags <a>…</a>, and href attribute v href = “a link destination” q example link destination <a href = “tutorial. html”> Tutorial </a> link label, visible on a Web page, where you will click Lecture 8 3

Specifying a Folder Path Lecture 8 4

Specifying a Folder Path q 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 q An absolute path specifies a file’s precise location within a computer’s entire folder structure q A relative path specifies a file’s location in relation to the location of the current document q If the file is in the same location as the current document, you do not have to specify the folder name q If the file is in a subfolder of the current document, you have to include the name of the subfolder Lecture 8 5

Specifying a Folder Path q 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 q 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 Lecture 8 6

Hyperlinks q Three type of Hyperlinks v Relative URL • links to a Web page on the same Web server • only need relative directory for the linked file v Absolute URL • links to a Web page on a different Web server • a complete URL should be used e. g. , http: //jjcweb. jjay. cuny. edu/ssengupta/ v Name id • links to a different location on the same Web page • links to a different location on the different Web page Lecture 8 7

Relative URL link destination <a href = “page 2. html”> My Page 2 </a> link label, visible on a Web page, where you will click link destination <a href = “. . /page 3. html”> My Page 3 </a> link label, visible on a Web page, where you will click Lecture 8 8

Covered so far in last class

Hyperlinks q Three type of Hyperlinks v Relative URL • links to a Web page on the same Web server • only need relative directory for the linked file v Absolute URL • links to a Web page on a different Web server • a complete URL should be used e. g. , http: //jjcweb. jjay. cuny. edu/ssengupta/ v Name id • links to a different location on the same Web page • links to a different location on the different Web page Lecture 8 10

Absolute URL link destination <a href=“http: //jjcweb. jjay. cuny. edu/ssengupta/”> Instructor’s website </a> link label, visible on a Web page, where you will click Lecture 8 11

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

Hyperlink to a certain location q id attribute assigns a name (or an ID) to an element q with the ID, an element can be referred to easily q syntax <tag id=“name”> content </tag> e. g. , <h 1 id=“welcome”> Welcome to MAT 279 </h 1> Lecture 8 13

Creating hyperlinks to locations in same document q use id attribute to identify the destination of the hyperlinks q syntax <a href=“#id_name ”> content </a> e. g. , <a href=“#welcome”> Go to the top of the page. </a> Lecture 8 14

Download assign 1. 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 q create a hyperlink specific location in another file with syntax <a href=“filename. html#id">content</a> v v v filename is the file name of destination HTML file id is the id name of an element in the destination file e. g <a href=“tutorial. html#para 2”>Go to the second paragraph of the tutorial </a> Lecture 8 16

Create a hyperlink in page 8. html and link it to Mathematics and Computer Science Department element in assign 1. html

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

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

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

Working with Linked Images and Image Maps q 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 q A client-side image map is inserted in an image q q q 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 q Define a hotspot using two properties: Its location in the image v Its shape v q Syntax of the hotspot element: <area shape=“shape” coords=“coordinates” href=“url” alt=“text” /> 23

Creating a Rectangular Hotspot q Two points define a rectangular hotspot: v the upper-left corner v the lower-right corner q A sample code for a rectangular hotspot is: <area shape="rect" coords="128, 132, 241, 179" href="http: //jjcweb. jjay. cuny. edu/ssengupta/"> v v v 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 q A circular hotspot is defined by the location of its center and its radius q A sample code for a circular hotspot is: <area shape="circle" coords="68, 211, 35" href="http: //www. google. com/"> v Coordinates are (68, 211), and it has a radius of 35 pixels v The hotspot is a hypertext link to google. com 25

Creating a Polygonal Hotspot q To create a polygonal hotspot, you enter the coordinates for each vertex in the shape q A sample code for a polygonal hotspot is: <area shape="polygon" coords="19, 44, 45, 11, 87, 37, 82, 76, 49, 98" href="http: //www. jjay. cuny. edu/"> v Coordinates are for each vertex in the shape v The hotspot is a hypertext link to JJ homepage 26

Creating a Default Hotspot q <area shape="default" coords="0, 0, 345, 325" href="http: //www. yahoo. com/"> where 345 is the width of the inline image in pixels and 325 is the image’s height q Any spot that is not covered by another hotspot will activate the default hotspot link 27

Creating a Client-Side Image Map <img src="streetsign. jpg" usemap="#green" border="0"> <map name="green"> <area shape="rect" coords="128, 132, 241, 179" href="http: //jjcweb. jjay. cuny. edu/ssengupta/"> <area shape="circle" coords="68, 211, 35" href="http: //www. google. com/"> <area shape="polygon" coords="19, 44, 45, 11, 87, 37, 82, 76, 49, 98" href="http: //www. jjay. cuny. edu/"> <area shape="default" coords="0, 0, 345, 325" href="page 10. html"> </map> 28

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