Вы находитесь на странице: 1из 7

LAB ACTIVITY 2B: Hypertext Markup Language

(HTML)
Duration: 2 Hours

Learning Outcomes

By the end of this tutorial session, you should be able to:


1. Create simple HTML file
2. Create hyperlink to navigate web page
3. Setting table properties

Hardware/ Software: Code Editor(e.g: Notepad++, Dreamweaver), server bundle(e.g: XAMPP)

Activity 2b(i)

Activity Outcome: Create a simple HTML web page

Procedure: Follow the instructions below carefully.

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>

3. Observe the output using web browser. Execute firstPage.html first.

Activity 2b(ii)

Activity Outcome: Set table properties

Procedure: Follow the instructions below carefully.

1. Type the following code in Notepad and save as courseList.html.

<!DOCTYPE HTML >


<html>
<body>
<table border="2" cellpadding="10"
cellspacing="5"> <tr bgcolor="blue">
<th> Subject Code </th>
<th> Subject Name </th>
</tr>

<tr bgcolor="yellow" >


<td> FP501</td>
<td> Open Source Operating System </td>
</tr>

<tr bgcolor= "yellow">


<td> FP511</td>
<td> Human Computer Interaction </td>
</tr>

<tr bgcolor= "yellow">


<td> FP512</td>
<td> Web Programming 1 </td>
</tr>
</table>

</body>
</html>

2. Execute the codes using web browser


Activity 2b(iii)

Activity Outcome: Set table properties

Procedure: Follow the instructions below carefully.

1. Type the following code in Notepad and save as programList.html.

<!DOCTYPE HTML >


<html>
<body>
<table border="0">
<tr bgcolor="#339900">
<th> Department </th>
<th> Program Code </th>
<th> Program Name </th>
</tr>

<tr bgcolor="#FF00FF" >


<td rowspan="3">JTMK</td>
<td> DIP</td>
<td> Dip in Information Technology
(Programming)</td> </tr>

<tr bgcolor= "#FF00FF">


<td> DNS</td>
<td> Dip in Information Technology (Networking)
</td> </tr>

<tr bgcolor= "#FF00FF">


<td> DIH</td>
<td> Dip in Information Technology (Digital Entertainment)
</td> </tr>

<tr bgcolor="#FF99FF">
<td rowspan="2">JKE</td>
<td> DTK</td>
<td> Dip in Electrical Engineering
(Computer)</td> </tr>

<tr bgcolor= "#FF99FF">


<td> DEP</td>
<td> Dip in Electrical Engineering (Communication)
</td> </tr>

</table>

</body>
</html>

2. Execute the codes using web browser


LAB ACTIVITY 3b: Hypertext Markup
Language (HTML)
Duration: 2 Hours

Learning Outcomes

By the end of this tutorial session, you should be able to:


1. Create frame and frameset
2. Create forms in a web page by using forms tools.

Hardware/ Software: Code Editor(e.g: Notepad++, Dreamweaver), server bundle(e.g: XAMPP)

Activity 3b(i)

Activity Outcome: Create a frame and form

Procedure: Follow the instructions below carefully.

1. Type the following code in Notepad. This page is the main page and consists of frames.

<!DOCTYPE HTML >


<html>
<head>
<title>My First Web Page</title>
</head>

<frameset rows="100,*,75" frameborder="0" border="1" >


<frame name="header" src="header.html">

<frameset cols="200,*" frameborder="0" border="0">


<frame name="menu" src="menuList.html" scrolling="auto" noresize>
<frame name="content" src="firstPage.html" scrolling="auto" noresize>

</frameset>
<frame name="footer" src="footer.html">
</frameset>
<noframes></noframes>
</html>

2. Save the file as mainPage.html.


3. Type the following code in Notepad and save as menuList.html.
<!DOCTYPE HTML >
<html>
<body bgcolor="yellow">

<a href="registerForm.html"; target="content">Course


Registration Form</a>
<a href="comment.html"; target="content">Comments Form</a><br>

</body>
</html>

4. Type the following code in Notepad and save as comment.html.

<!DOCTYPE HTML >


<html>
<body>
<H3> Comments Form </H3>

<form name="comment" method="POST" action="Page.php">

Name : <input type="text" name="txtName" id="txtName"><br>


Comments : <textarea name="txaComments" id=" txaComments ">
</textarea><br>

<input name="Submit" type="submit" value="Send">


<input name="Reset" type="reset" value="Reset">

</form></body>

</html>
5. Type the following code in Notepad and save as registerForm.html.

<!DOCTYPE HTML>

<html>
<body>
<H3> Course Registration Form </H3>

<form method="post" action="processdata.php">


<table border = "2">

<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.

<!DOCTYPE HTML >


<html>
<body style="background-color:#CC0000;color:white;font-
family:verdana; font-size:14px;">
<h3>Welcome to my first web page</h3>
</body>
</html>

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.

<!DOCTYPE HTML >


<html>
<body style="background-color:#000000;color:white;font-
family:verdana; font-size:12px;">
<h3><i>Copyright: yourname
2015</i></h3> </body>
</html>

9. Now you can execute your mainPage.html using your preferred browser and observe the
output.