In this lecture we're going to explore link creation within our html document. We will be creating both textual links as well as image links.
Let's start with adding a link on the images we inserted in the last lecture. We will link each vacation picture to a relevant website.
To do so, we will be using the
Add the following code around our first image:
<a href="http://www.miami.com"> - the corresponding closing
</a> tag must be placed at the end of the image code block. Your final result should look like this:
<a href="http://www.miami.com"><img src="Florida.JPG" width="333" height="250"></a>
Now save your file and refresh your browser. You will notice that the first image is now a clickable link. The link will open “Miami.com” in your existing browser window. Click the back button to go back to your original page.
In our next example, we will attaching a link to the second image. This time, we will make it so the link opens in a new browser window using the “target” attribute.
Add the following code around the second image code block:
<a href="http://www.lasvegas.com/" target="_blank"> <img src="Los Vegas.jpg" width="375" height="250"></a>
The "_blank" value tells the browser to open this link in a new browser window.
Now save the changes and refresh your browser. This time when you click on the second image, "lasvegas.com" will open in a new browser window. This can sometimes be more convenient for your end user because they can easily close this new browser window and revert back to the original without pressing the back button.
Now let's add links to the remaining images:
<a href="http://www.newyork.com/"><img src="New York.jpg" width="374" height="250"></a>
<a href="http://www.houston.com/"><img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Houston_night.jpg" width="389" height="250"></a>
With the links added, let's create some text links. The process is identical.
Create a few lines of text to apply the links to:
Next, add the links with the target set to "_blank":
<a href="http://www.florida.com" target="_blank">Florida.com</a><br>
<a href="http://www.lasvegas.com/" target="_blank">Lasvegas.com</a><br>
<a href="http://www.newyork.com/" target="_blank">Newyork.com</a><br>
<a href="http://www.houston.com/" target="_blank">Houston.com </a><br>
Now save the page and refresh your browser window to test out the links.
One important thing to notice is the links have changed color. Visited links are purple, unvisited links are blue, and active links are orange.
These are the default link colors that are set when you have not defined custom link colors. In the next section of this course we will explore setting custom link colors using CSS.