The code below shows you how to create a link.
<!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>Web Development Tutorials.com</title>
</head>
<body>
<p>
<a href="
http://webdevelopmenttutorials.com/">http://webdevelopmenttutorials.com/</a>
</p>
</body>
</html>
The code above creates the link below.
http://webdevelopmenttutorials.com/
What is a Hypertext Link?
A hypertext link are text, images, or files that take you from one web page to another web page,
another part of the same web page or to a specific part of another web page when they are clicked on.
The text that comprises a link is called hypertext
The HTML tag that is used to create hypertext links is the openning and closing anchor tag (<a> </a>).
The href="" attribute specifies where the link is pointing to.
Use the text editor below to practice what you have learned.
The code example below shows you how to create a link that opens in a new web browser.
<!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>Web Development Tutorials.com</title>
</head>
<body>
<p>
<a href="http://webdevelopmenttutorials.com/"
target="_blank">http://webdevelopmenttutorials.com/</a>
</p>
</body>
</html>
The code above creates the link below.
http://webdevelopmenttutorials.com/
The target="" attribute with a value of _blank is used to open web page in a new web browser.
You can link to another part of the same web page by adding an id attribute to almost any HTML tag, for example <p id="gohere">this is where you end up</p>, and then link to it like this <a href="#gohere">you click here</a>. Clicking on the link will take you to the HTML element with that id.
The code example shows you how to link to another part of the same web page.
<!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>Web Development Tutorials.com</title>
</head>
<body>
<p>
<a href="#part15">Go to part 15</a>
</p>
<p>
Part 1
Web Development Tutorials.com
</p>
<p>
Part 2
Web Development Tutorials.com
</p>
<p>
Part 3
Web Development Tutorials.com
</p>
<p>
Part 4
Web Development Tutorials.com
</p>
<p>
Part 5
Web Development Tutorials.com
</p>
<p>
Part 6
Web Development Tutorials.com
</p>
<p>
Part 7
Web Development Tutorials.com
</p>
<p>
Part 8
Web Development Tutorials.com
</p>
<p>
Part 9
Web Development Tutorials.com
</p>
<p>
Part 10
Web Development Tutorials.com
</p>
<p>
Part 11
Web Development Tutorials.com
</p>
<p>
Part 12
Web Development Tutorials.com
</p>
<p>
Part 13
Web Development Tutorials.com
</p>
<p>
Part 14
Web Development Tutorials.com
</p>
<p>
<a id="part15">Part 15</a>
Web Development Tutorials.com
</p>
</body>
</html>
This link will take you a working example of linking within the same web page
The code example below shows you how to use an image as a link.
<!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>Web Development Tutorials.com</title>
</head>
<body>
<p>
<a href="myimage.jpg">
<img border="0" src="image.jpg" width="244" height="33" /></a>
</p>
</body>
</html>
The code above produces the image below which is used as a link.