Page 86 - Computer - 8
P. 86
2. Save the first document with the name ‘Parts of Computer 1.html’ and the second document
with the name ‘Keyboard.html’.
3. Open the ‘Parts of Computer 1.html’ document in Microsoft
Edge.
The document is displayed.
4. Click the ‘Keyboard’ hyperlink.
The document ‘Keyboard.html’ opens in the same tab.
5. Click the ‘Click to go back to original document.’ hyperlink.
The document ‘Parts of Computer 1.html’ opens in the same tab.
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.
Lab Activity 5 Experiential Learning
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> </b> </p>
<li> <a href=“Monitor2.html”> <img src=“Monitor.jpg”>
</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>
84
