Page 85 - Computer - 8
P. 85
Knowledge Discovery Subject Enrichment
The a:hover property must be set after the a:link property, while the a:active and a:visited properties
must be set after the a:hover property.
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} The given HTML code specifies the red colour for the
a:active {color: blue} unvisited link, green colour for the hover link, blue colour
for the active link, and purple colour for the visited link.
a:visited {color: purple}
< /style>
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.
Lab Activity 4 Experiential Learning
Open Notepad and type the code.
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; h1 {color: red; text-align: center; font-size: 40px;
text-decoration: underline}
ol {list-style-position: outside; list-style-type: text-decoration: underline}
decimal} img {
li {font-family: Calibri; color: blue; font-size: p {color: blue; text-align: left; font-size: 30px}
x-large} a:link {color: blue} a:hover {color: orange} a:active
p {color: brown; text-align: left; font-size: x-large} {color: green} a:visited {color: purple}
a:link {color: blue} a:hover {color: orange} a:active </style>
{color: green} a:visited {color: purple}
</style> <body>
<body> <h1> Keyboard </h1>
<h1> Parts of a Computer </h1> <p> The Keyboard is the primary inpur device for a
<p> The common parts of a computer are: </p> computer. It lets you press different keys to enter data
<ol> and instructions. There are 104 keys on a standard
<li> <a href=“Keyboard.html”> Keyboard </a> </li> keyboard. </p>
<li> <a href=“Mouse.html”> Mouse </a> </li> <p> The keys of a keyboard are divided into Number
<li> <a href=“Monitor.html”> Monitor </a> </li> keys, Alphabet keys, and Special keys. </p>
<li> <a href=“Printer.html”> Printer </a> </li>
</ol> <p> <a href=“Parts of Computer1.html”> Click to go back
<p> Click any name to view details about the part. </p> to original document. </a> </p>
</body> </body>
</html> </html>
83
