HTML Lab Source Code
Activity No.1 [Link]
<HTML>
<HEAD>
<TITLE>HOME PAGE</TITLE>
<!-- Page created by Sujodh Shams on 28-Apr-2026 -->
</HEAD>
<BODY bgcolor="darkcyan">
<table border="1" width="80%" align="center">
<tr>
<td bgcolor="skyblue"><B>Page1</B></a></td>
<td><a href="[Link]">Page2</a></td>
<td><a href="[Link]">Page3</a></td>
<td><a href="[Link]">Page4</a></td>
<td><a href="[Link]">Page5</a></td>
</tr>
</table>
<!-- Here we discuss about bgcolor property, Heading, Paragraphs, Bold Italic Underline -->
<H1 align="center">MY FIRST WEBSITE</H1>
<P>This is my first paragraph</P>
<P>This is my second paragraph <BR>It is split into two lines</P>
<B>This text is bold</B> <BR>
<I>This text is italic</I> <BR>
<U>This text is underlined</U> <BR>
<B><I><U>This text is both bold, italic and underlined</U></I></B>
</BODY>
</HTML>
Activity No.2 [Link]
<HTML>
<HEAD>
<TITLE>PAGE 2</TITLE>
<!-- Page created by Sujodh Shams on 28-Apr-2026 -->
</HEAD>
<BODY bgcolor="darkorange">
<!-- Here we discuss about font Heading 1 to 6, hr tag, ol, ul, dl, anchor and image links -->
<table border="1" width="80%" align="center">
<tr>
<td><a href="[Link]"><img src="[Link]"/></a></td>
<td bgcolor="skyblue"><B>Page2</B></a></td>
<td><a href="[Link]">Page3</a></td>
<td><a href="[Link]">Page4</a></td>
<td><a href="[Link]">Page5</a></td>
</tr>
</table>
<BR><BR><BR><BR><BR><BR><BR>
<table border="1" width="80%" align="center">
<tr>
<td><a href="#section1">Section1</a></td>
<td><a href="#section2">Section2</a></td>
<td><a href="#section3">Section3</a></td>
<td><a href="#section4">Section4</a></td>
</tr>
</table>
<FONT face="Segoe UI" size="+2" color="#59FF5D">
<a name="section1">
<H1 align="center">MY SECOND WEBPAGE</H1>
<H2> This is the second page</H2>
<P>This is my first paragraph</P>
</a>
<BR><BR><BR><BR><BR><BR><BR>
<HR> <!-- horizontal rule -->
<a name="section2">
<H1>This is the largest heading, uses h1 tag</H1>
<H2>Heading Level 2</H2>
<H3>Heading Level 3</H3>
<H4>Heading Level 4</H4>
<H5>Heading Level 5</H5>
<H6>Heading Level 6</H6>
<BR><BR><BR><BR><BR><BR><BR>
<HR> <!-- horizontal rule -->
</a>
<a name="section3">
<UL>
<LI>List item 1</LI>
<LI>List item 2</LI>
<LI>List item 3</LI>
<LI>List item 4</LI>
<LI>List item 5</LI>
</UL>
</a>
<BR><BR><BR><BR><BR><BR><BR>
<HR> <!-- horizontal rule -->
<a name="section4">
<OL>
<LI>List item 1</LI>
<LI>List item 2</LI>
<LI>List item 3</LI>
<LI>List item 4</LI>
<LI>List item 5</LI>
</OL>
<BR><BR><BR><BR><BR><BR><BR>
<HR> <!-- horizontal rule -->
</a>
<DL>
<DT>HTML</DT>
<DD>Hyper Text Markup Language</DD>
<DT>JS</DT>
<DD>JavaScript</DD>
<DT>CSS</DT>
<DD>Cascading Style Sheets</DD>
</DL>
<HR> <!-- horizontal rule -->
<a href="[Link]
<img src="[Link]" height="10%" width="10%"/>
</a>
</FONT>
</BODY>
</HTML>
Activity No.3 [Link]
<HTML>
<HEAD>
<TITLE>PAGE 3</TITLE>
<!-- Page created by Sujodh Shams on 28-Apr-2026 -->
</HEAD>
<BODY background="[Link]">
<table border="1" width="80%" align="center">
<tr>
<td><a href="[Link]">Page1</a></td>
<td><a href="[Link]">Page2</a></td>
<td bgcolor="skyblue"><B>Page3</B></a></td>
<td><a href="[Link]">Page4</a></td>
<td><a href="[Link]">Page5</a></td>
</tr>
</table>
<!-- Here we discuss about adding a page background and also insert a picture -->
<P align="center">
<IMG src="[Link]" height="50%" width="50%" alt="lighter"/>
</P>
<BR><BR><BR>
</FONT>
</BODY>
</HTML>
Activity No.4 [Link]
<HTML>
<HEAD>
<TITLE>PAGE 4</TITLE>
</HEAD>
<BODY>
<!-- Here we discuss about tables, attributes, nesting tables -->
<table border="1" width="80%" align="center">
<tr>
<td><a href="[Link]">Page1</a></td>
<td><a href="[Link]">Page2</a></td>
<td><a href="[Link]">Page3</a></td>
<td bgcolor="skyblue"><B>Page4</B></a></td>
<td><a href="[Link]">Page5</a></td>
</tr>
</table>
<FONT face="Comic Sans MS" size="+1">
<TABLE border="1"> <!-- A table with 4 rows and 3 cols 4x3 table -->
<CAPTION>A table about cars</CAPTION>
<TR>
<TH>German Cars</TH>
<TH>Japanese Cars</TH>
<TH>Indian Cars</TH>
</TR>
<TR>
<TD>Audi</TD>
<TD>Honda</TD>
<TD>Mahindra</TD>
</TR>
<TR>
<TD>BMW</TD>
<TD>Toyota</TD>
<TD>Tata</TD>
</TR>
<TR>
<TD>Volvo</TD>
<TD>Mazda</TD>
<TD>Force</TD>
</TR>
</TABLE>
<BR><BR><BR><BR>
<TABLE align="center" border="2" cellpadding="10" cellspacing="10">
<TR>
<TD>Row 1 Column 1</TD>
<TD>Row 1 Column 2</TD>
</TR>
<TR>
<TD>Row 2 Column 1</TD>
<TD>Row 2 Column 2</TD>
</TR>
<TR>
<TD>Row 3 Column 1</TD>
<TD>Row 3 Column 2</TD>
</TR>
</TABLE>
<BR><BR><BR><BR>
<TABLE align="center" border="2" cellpadding="10"
cellspacing="10"
bgcolor="lime">
<TR>
<TH bgcolor="yellow" colspan="2">Table1 Row 1 Column 1</TH>
</TR>
<TR>
<TD>Table1 Row 2 Column 1</TD>
<TD>Table1 Row 2 Column 2</TD>
</TR>
<TR>
<TD>Table1 Row 3 Column 1</TD>
<TD>
<TABLE bgcolor="orange" border="1"> <!-- inner table -->
<TR>
<TD>Table2 Row 1 Column 1</TD>
<TD>Table2 Row 1 Column 2</TD>
</TR>
<TR>
<TD>Table2 Row 2 Column 1</TD>
<TD>Table2 Row 2 Column 2</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</FONT>
</BODY>
</HTML>
Activity No.5 [Link]
<html>
<body>
<table border="1" width="80%" align="center">
<tr>
<td><a href="[Link]">Page1</a></td>
<td><a href="[Link]">Page2</a></td>
<td><a href="[Link]">Page3</a></td>
<td><a href="[Link]">Page4</a></td>
<td bgcolor="skyblue"><B>Page5</B></a></td>
</tr>
</table>
<!-- Here we discuss about div, span, video -->
<font face="Segoe UI" size="+2">
<div style="background-color: lime; color:blue ;">
<p>This is some text in a div element.
<br>
This is split into two lines</p>
</div>
<p>My Mother have <span style="color: blue;">blue</span> eyes</p>
<video width="720" height="480" controls>
<source src="Video\HTML in 100 Seconds.mp4" type="video/mp4">
</video>
</font>
</body>
</html>
Activity No.6 [Link]
<html>
<head>
<title>Sample Frameset</title>
</head>
<!-- Here we discuss about frameset -->
<frameset rows="300,*" frameborder="2">
<frame name="topframe" src="[Link]" marginwidth="12" marginheight="12" scrolling="auto" resize>
<frame name="bottomframe" src="[Link]" marginwidth="12" marginheight="12" scrolling="auto"
resize>
</frameset>
</html>
Activity No.7 [Link]
<html>
<head>
<title>PAGE NAVIGATION</title>
</head>
<body>
<!-- Here we discuss about page navigation -->
<font face="Segoe UI" size="+2">
<table border="1" width="80%" align="center">
<tr>
<td><a href="[Link]">Page1</a></td>
<td><a href="[Link]">Page2</a></td>
<td><a href="[Link]">Page3</a></td>
<td><a href="[Link]">Page4</a></td>
<td><a href="[Link]">Page5</a></td>
</tr>
</table>
</font>
</body>
</html>
Activity No.8 [Link]
<html>
<head>
<title>Personal Information Page</title>
<!—A webpage about forms placed inside a table -->
</head>
<body bgcolor="silver">
<font face="Segoe UI" size="-1">
<h3><U>Personal Information</U></h3>
<fieldset>
<legend>Personal Information Form</legend>
<form>
<table border="1">
<tr>
<td align="right">Name</td>
<td><input type="text" size=30 maxlength=50 required/></td>
</tr>
<tr>
<td align="right">Username</td>
<td><input type="text" size=30 required/></td>
</tr>
<tr>
<td align="right">Password</td>
<td><input type="password" size=30 required/></td>
</tr>
<tr>
<td align="right">Confirm Password</td>
<td><input type="password" size=30 required/></td>
</tr>
<tr>
<td align="right">Email:</td>
<td><input type="email" size=30 required/></td>
</tr>
<tr>
<td align="right">Phone</td>
<td><input type="number" size=30 required/></td>
</tr>
<tr>
<td align="right">Gender</td>
<td>Male:<input type="radio" name="radio1" checked/>
Female:<input type="radio" name="radio1"/></td>
</tr>
<tr>
<td align="right">Are you above 18?</td>
<td>
<select>
<option>Select</option>
<option>Yes</option>
<option>No</option>
</select>
</td>
</tr>
<tr>
<td align="right">Tick your favourite sports</td>
<td>
Cricket:<input type="checkbox"></input>
Football:<input type="checkbox"></input>
Hockey:<input type="checkbox"></input> <br>
Basketball:<input type="checkbox"></input>
Tennis:<input type="checkbox"></input>
Baseball:<input type="checkbox"></input>
</td>
</tr>
<tr>
<td align="right">Comments</td>
<td><textarea rows="5" cols="32" required>
Enter your comments here
</textarea></td>
</tr>
<tr>
<td align="right"><input type="submit" value="Save" /></td>
<td><input type="reset" value="Clear"/></td>
</tr>
</table>
</form>
</fieldset>
</font>
</body>
</html>