Page 60 - Code & Click - 8
P. 60
You can change the colour of the links depending upon the action performed.
< style type=“text/css”>
a:link {color: red}
a:hover {color: green}
a:active {color: blue}
a:visited {color: purple}
< /style>
The given HTML code specifies the red colour for the unvisited link, green colour for the hover link,
blue colour for the active link, and purple colour for the visited link.
You can also use CSS rules for text and font properties to change the appearance of the hyperlinked text.
< style type=“text/css”>
a:link {color:green; text-decoration:none}
a:hover {color:red; font-style:italic}
a:active {color:orange}
a:visited {color:pink; font-family: Arial}
< /style>
The given HTML code specifies the colour, and font for the links.
Image Links
You can also use an image as a link. The image for a link is specified using the <img> tag within
<a>...</a> tags. When you click on an image link, the web browser jumps to the location specified by
the HREF attribute of the <a> tag.
Experiential Learning
Lab Activity 3
To link two web pages using an image as a hyperlink.
1. Open Notepad and create the HTML document as shown below.
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <title> Parts of Computer </title> </head> <head> <title> Keyboard </title> </head>
<style type= “text/css”> <style type= “text/css”>
h1 {color: blue; text-align: center; font-size: 40px; text- h1 {color: red; text-align: center; font-size:
decoration: underline} 40px; text-decoration: underline}
img {width: 100px; height: 100 px}
ol {list-style-position: outside; list-style-type: decimal} p {color: blue; text-align: left; font-size:
li {font-family: Calibri; color: blue; font-size: x-large}
p {color: brown; text-align: left; font-size: x-large} 30px}
a:link {color: blue} a:hover {color: orange} a:active a:link {color: blue} a:hover {color: orange}
{color: green} a:visited {color: purple} a:active {color: green} a:visited {color:
</style> purple}
<body> </style>
<h1> Parts of a Computer </h1> <body>
<p> The common parts of a computer are: </p> <h1> Keyboard </h1>
<ol> <p> <b> The Keyboard is the primary inpur
<li> <a href=“Keyboard2.html”> <img src=“Keyboard.jpg”> device for a computer. It lets you press
</a> </li> different keys to enter data and instructions.
<li> <a href=“Mouse2.html”> <img src=“Mouse.jpg”> There are 104 keys on a standard keyboard.
</a> </li>
<li> <a href=“Monitor2.html”> <img src=“Monitor.jpg”> </b> </p>
</a> </li> <p> <b> The keys of a keyboard are divided into
<li> <a href=“Printer2.html”> <img src=“Printer.jpg”> Number keys, Alphabet keys, and Special keys.
</a> </li> </b> </p>
</ol> <p> <a href=“Parts of Computer2.html”> Click to
<p> Click an image to view details about the part. </p> go back to original document. </a> </p>
</body> </body>
</html> </html>
58
