Scribd
Upload
334 views

LAB ACTIVITY 2B: Hypertext Markup Language (HTML) : Duration: 2 Hours Learning Outcomes

This document provides instructions for two lab activities to learn HTML. The first activity teaches how to create simple web pages with hyperlinks and set table properties. The second activity teaches how to create frames and forms. Learners will create several HTML files to display in frames, including a menu page with links to forms, and forms for course registration and comments. The activities aim to teach creating frames and forms in HTML.

Uploaded by

Sudersen Lekshmikanth
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
334 views

LAB ACTIVITY 2B: Hypertext Markup Language (HTML) : Duration: 2 Hours Learning Outcomes

This document provides instructions for two lab activities to learn HTML. The first activity teaches how to create simple web pages with hyperlinks and set table properties. The second activity teaches how to create frames and forms. Learners will create several HTML files to display in frames, including a menu page with links to forms, and forms for course registration and comments. The activities aim to teach creating frames and forms in HTML.

Uploaded by

Sudersen Lekshmikanth
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 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.

You might also like