Links in HTML

This lecture notes is based on Prof Doreen De Leon's lectures.

Reading

Sebesta Section 2.6

Absolute and Relative URLs

absolute URL -- the complete address of a resource
relative URL -- provide an abbreviated document address that, when automatically combined with a "base address" (usually the URL of the document containing the relative URL) by the system, becomes a complete address for the document

Creating Hyperlinks

The `<a>` tag

Can use images, text, etc. to link.
Use with href attribute to create a hypertext link to another place in the same document or to another document.
href used to specify the URL of the target of the link.
Example: See <a href="http://www.math.ucla.edu"> UCLA Math Dept.</a> for more details.
Example: Back to <a href="handouts/htmlintro.html">Introduction to HTML<a/>

Creating a reference within a document

Use the id attribute (associated with headings, paragraphs, lists, etc.)
Example: <h2 id="hyperlinks">Creating Hyperlinks</h2>
To link from within the document to that section, do, e.g.,
Back to <a href="#hyperlinks">Creating Hyperlinks</a>
To link from another document to that section, do, e.g.,
See <a href="links.html#hyperlinks">Creating Hyperlinks</a>

Example

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>My favorite</title></head>
<body>
<h2>My favorite web sites</h2>
<a href="http://www.cnn.com">CNN</a><br />
<a href="http://www.latimes.com">LA times</a>
</body>
</html>

My favorite web sites

CNN
LA times

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Car</title></head>
<body>
<h2>Cars</h2>
Click the icon to <i>cars.com</i>
<a href="http://www.cars.com"><img src="cars.gif" alt="car" /></a>
</body>
</html>

Cars

Click the icon to cars.com

<h2 id="reading">Reading</h2>

Click <a href="#reading">here</a> to go to the Reading section.

Click here to go to the Reading section.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Link</title></head>
<body>
<a href="index2.html">Link index2.html</a>
</body>
</html>

Link index2.html

Links in HTML

Reading

Absolute and Relative URLs

Creating Hyperlinks

The <a> tag

Creating a reference within a document

Example

My favorite web sites

Cars

The `<a>` tag