LAB ACTIVITY 2B: Hypertext Markup Language (HTML) : Duration: 2 Hours Learning Outcomes
LAB ACTIVITY 2B: Hypertext Markup Language (HTML) : Duration: 2 Hours Learning Outcomes
(HTML)
Duration: 2 Hours
Learning Outcomes
Activity 2b(i)
1. Type the following HTML code in Notepad ++. Save as firstPage.html. You can save
your file on the desktop or my documents.
<html>
<html>
<head>
<title>My page title</title>
</head>
<body>
<h1>My headline</h1>
<p>My paragraph.</p>
<a href="page2.html">page2</a>
</body>
</html>
2. Type the following HTML code in new Notepad ++ file. Save as page2.html.
<!DOCTYPE html>
<html>
<body bgcolor="gray">
<h2> Welcome to Page 2 </h2>
</body>
</html>
Activity 2b(ii)
</body>
</html>
<tr bgcolor="#FF99FF">
<td rowspan="2">JKE</td>
<td> DTK</td>
<td> Dip in Electrical Engineering (Computer)</td>
</tr>
</table>
</body>
</html>
Learning Outcomes
Activity 3b(i)
1. Type the following code in Notepad. This page is the main page and consists of frames.
</frameset>
<frame name="footer" src="footer.html">
</frameset>
<noframes></noframes>
</html>
</body>
</html>
</form></body>
</html>
5. Type the following code in Notepad and save as registerForm.html.
<!DOCTYPE HTML>
<html>
<body>
<H3> Course Registration Form </H3>
<tr>
<td> Name: </td>
<td> <input type="text" name="name" size="40"/> </td>
</tr>
<tr>
<td> Registration Number: </td>
<td> <input type="text" name="regno" size="40"/> </td>
</tr>
<tr>
<td> Program: </td>
<td> <input type="radio" name="program" value="DIP" checked>Male
<br>
<input type="radio" name="program" value="DNS">Female </td>
</tr>
<tr>
<td> Course Code: </td>
<td> <input type="checkbox" name="option1" value="Milk">
FP501<br>
<input type="checkbox" name="option2" value="Butter">
FP511<br>
<input type="checkbox" name="option3" value="Cheese">
FP512<br>
</td>
</tr>
<tr>
<td><input type="submit" value="submit data" /><td>
</tr>
</form>
</body>
</html>
6. Now create a new page and save it as content.html.
<!DOCTYPE HTML >
<html>
<body style="background-color:#CCC000;color:white;font-family:verdana;
font-size:14px;">
<h1>My headline</h1>
<p>My paragraph.</p>
</body>
</html>
7. Create a new page and save it as header.html. Type the following code.
8. Create a new page and save it as footer.html. Type the following code. In line 5, change
copyright yourname to your full name.
9. Now you can execute your mainPage.html using your preferred browser and observe the
output.