PUNJAB COLLEGE OF TECHNICAL
EDUCATION
Practical File
WEB DESIGNING LABORATORY
SUBJECT CODE: UGCA-1928
Submitted To: Ms. Ishika Prashad
Submitted By: Harshit Verma
Roll Number: 2329213
Class: BCA 3rd Semester
Section: ‘E’
PRACTICAL: 1
Create a simple HTML page to demonstrate the use of different tags.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Web page</title>
</head>
<body>
<h1>
<p style="background-color: rgb(192, 53, 53);color: rgb(251, 255, 255);text-align: center;">Welcome to my sample HTML
Page</p>
</h1>
<h2><b>TEXT FORMATING TAG:-</b></h2>
<h3><b>1.BOLD:</b></h3><b><p> This statement is written in Bold tag.</p></b>
<h3><b>2.ITALIC:</b></h3><i><p> This statement is written in Italic tag.</p></i>
<h3><b>3.UNDERLINE:</b></h3><u><p> This statement is written in Underline tag.</p></u>
<br>
<h2><b>TEXT STYLING TAG:-</b></h2>
<h3><b>1.TEXT_COLOR:</b></h3><p style="color:rgb(36, 15, 70)"> This statement is written in color Style tag.</p>
<h3><b>2.BACKGROUND-COLOR:</b></h3><p style="background-color:rgb(167, 131, 226)"> This statement is written in
Background-color Style tag.</p>
<h2><b>TABLE TAG:-</b></h2>
<table border="1">
<tr>
<th>S.NO.</th>
<th>Name</th>
<th>Class</th>
<th>Marks</th>
</tr>
<tr>
<td>1</td>
<td>Harshit</td>
<td>BCA2E</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>Sumit</td>
<td>BCA2E</td>
<td>75</td>
</tr>
</table>
</body>
</html>
Output:
PRACTICAL: 2
Design index page of a book on web designing.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
color: black;
background-color: rgb(216, 211, 211);
</style>
</head>
<body>
<h1 style="text-align: center">CONTENT</h1>
<ol type="1">
<li><b>Unit: <a href="https://www.geeksforgeeks.org/introduction-machine-learning/" target="_blank">Introduction to
Machine learning</a></b></li><p><i>DR. VDevendran, Lovely Professional University</i><b><span style="margin-left:
200px;">1</span></b></p><br>
<li><b>Unit: <a href="https://www.geeksforgeeks.org/python-basics/" target="_blank">Python
basics</a></b></li><p><i>DR. VDevendran, Lovely Professional University</i><b><span style="margin-left:
200px;">11</span></b></p><br>
<li><b>Unit: <a href="https://www.geeksforgeeks.org/data-preprocessing-in-data-mining/" target="_blank">Data Pre-
processing</a></b></li><p><i>DR. VDevendran, Lovely Professional University</i><b><span style="margin-left:
200px;">31</span></b></p></p><br>
<li><b>Unit: <a href="https://www.geeksforgeeks.org/data-preprocessing-machine-learning-python/"
target="_blank">Implementation of Pre-Processing</a></b></li><p><i>DR. VDevendran, Lovely Professional
University</i><b><span style="margin-left: 200px;">42</span></b></p></p><br>
<li><b>Unit: <a href="https://www.geeksforgeeks.org/physical-layer-in-osi-model/" target="_blank">Physical
Layer</a></b></li><p><i>DR. Rajni Bhalla, Lovely Professional University</i><b><span style="margin-left:
200px;">56</span></b></p></p><br>
<li><b>Unit: <a href="https://www.geeksforgeeks.org/introduction-to-numpy/" target="_blank">Introduction to
Numpy</a></b></li><p><i>DR. Rajni Bhalla, Lovely Professional University</i><b><span style="margin-left:
200px;">73</span></b></p></p><br>
<li><b>Unit: <a href="https://www.geeksforgeeks.org/getting-started-with-classification/"
target="_blank">Classification</a></b></li><p><i>DR. VDevendran, Lovely Professional University</i><b><span style="margin-
left: 200px;">87</span></b></p></p><br>
<!--<li><b>Unit: <a href="https://www.geeksforgeeks.org/machine-learning-algorithms/" target="_blank">Classification
Algorithms</a></b></li><p><i>DR. Rajni Bhalla, Lovely Professional University</i><b><span style="margin-left:
300px;">99</span></b></p></p><br>
<li><b>Unit: <a href="https://www.geeksforgeeks.org/getting-started-with-classification/" target="_blank">Classification
Implementation</a></b></li><p><i>DR. VDevendran, Lovely Professional University</i><b><span style="margin-left:
300px;">112</span></b></p></p><br>-->
</ol>
<h3 style="text-align: end;">By Harshit Verma</h3>
</body>
</html>
Output:
PRACTICAL: 3
Create a Hyperlink to move around within a single page rather than to load
another page.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Name Directory</title>
</head>
<body>
<h1 style="background-color: rgb(244, 165, 55);color: rgb(251, 255, 255);text-align: center;">NAME DIRECTORY</h1>
<a href="#A">Names starting with 'A'</a><br>
<a href="#B">Names starting with 'B'</a><br>
<a href="#C">Names starting with 'C'</a><br>
<a href="#D">Names starting with 'D'</a><br><br>
<h2 id="A">Names starting with 'A'</h2>
<ul>
<li>Adam</li>
<li>Alice</li>
<li>Andrew</li>
<li>Angela</li>
<li>Anthony</li>
<li>Anna</li>
<li>Arthur</li>
<li>Ashley</li>
<li>Albert</li>
<li>Amanda</li>
</ul>
<h2 id="B">Names starting with 'B'</h2>
<ul>
<li>Benjamin</li>
<li>Barbara</li>
<li>Brian</li>
<li>Brenda</li>
<li>Blake</li>
<li>Betty</li>
<li>Bruce</li>
<li>Brittany</li>
<li>Brad</li>
<li>Bianca</li>
</ul>
<h2 id="C">Names starting with 'C'</h2>
<ul>
<li>Charles</li>
<li>Charlotte</li>
<li>Christopher</li>
<li>Catherine</li>
<li>Colin</li>
<li>Carmen</li>
<li>Carl</li>
<li>Christina</li>
<li>Connor</li>
<li>Cindy</li>
</ul>
<h2 id="D">Names starting with 'D'</h2>
<ul>
<li>David</li>
<li>Diana</li>
<li>Daniel</li>
<li>Deborah</li>
<li>Dominic</li>
<li>Daisy</li>
<li>Donald</li>
<li>Denise</li>
</ul>
</body>
</html>
Output:
PRACTICAL: 4
Display letter using different Text formatting Tags.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title>
</head>
<body>
<h1>Text Formatting Example for the Letter "A"</h1>
<p>This is <strong>bold</strong>: <strong>A</strong></p>
<p>This is <em>italic</em>: <em>A</em></p>
<p>This is <u>underlined</u>: <u>A</u></p>
<p>This is <mark>highlighted</mark>: <mark>A</mark></p>
<p>This is <small>small text</small>: <small>A</small></p>
<p>This is <del>deleted text</del>: <del>A</del></p>
<p>This is <sub>subscript</sub>: A<sub>2</sub></p>
<p>This is <sup>superscript</sup>: A<sup>2</sup></p>
</body>
</html>
Output:
PRACTICAL 5
Design Time Table of your department and highlights of most important
periods.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
td,th,tr{
border: solid 2px BLACK;
border-collapse: collapse;
padding: 3px;
text-align: center;
}
table{
border-collapse: collapse;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<table>
<h1 style=" text-align: center;">TIME TABLE</h1>
<tr style="background-color: rgb(245, 198, 170);">
<th rowspan="2">DAY</th>
<th rowspan="2" style="width: fit-content;">CLASS</th>
<th colspan="3">I (09:00 - 10:00)</th>
<th colspan="3">II (10:05 - 11:05)</th>
<th rowspan="2">(11:05-11:25)</th>
<th colspan="3">III (11:25 - 12:25)</th>
<th colspan="3">IV (12:30 - 01:30)</th>
<th colspan="3">V (01:35 - 02:35)</th>
<th colspan="3">VI (02:40 - 03:40)</th>
<th colspan="3">VII (03:40 - 04:40)</th>
</tr>
<tr style="background-color: rgb(245, 198, 170);">
<th>LECTURE</th>
<th>FACULTY</th>
<th>VENUE</th>
<th>LECTURE</th>
<th>FACULTY</th>
<th>VENUE</th>
<th>LECTURE</th>
<th>FACULTY</th>
<th>VENUE</th>
<th>LECTURE</th>
<th>FACULTY</th>
<th>VENUE</th>
<th>LECTURE</th>
<th>FACULTY</th>
<th>VENUE</th>
<th>LECTURE</th>
<th>FACULTY</th>
<th>VENUE</th>
<th>LECTURE</th>
<th>FACULTY</th>
<th>VENUE</th>
</tr>
<tr style="background-color: rgb(193, 192, 219);">
<td rowspan="5" style="background-color: rgb(223, 210, 98);">MONDAY</td>
<td style="background-color: rgb(228, 171, 97);">BCA-2A</td>
<td>OS LAB</td>
<td>NRN</td>
<td>PHCL</td>
<td>OS LAB</td>
<td>NRN</td>
<td>PHCL</td>
<th rowspan="25" style="background-color: rgb(164, 221, 231);">TEA BREAK</th>
<td>SE</td>
<td>PRS</td>
<td>ET-402</td>
<th colspan="3" style="background-color: rgb(221, 124, 121);">LUNCH BREAK</th>
<td>SE LAB</td>
<td>PRS</td>
<td>ETCC-407</td>
<td>SE LAB</td>
<td>PRS</td>
<td>ETCC-407</td>
<td>OS</td>
<td>NRN</td>
<td>ET-101</td>
</tr>
<tr style="background-color: rgb(193, 192, 219);">
<td style="background-color: rgb(228, 171, 97);">BCA-2B</td>
<td>OS</td>
<td>PRJ</td>
<td>ET-501</td>
<td>SE</td>
<td>GVA</td>
<td>ET-501</td>
<td>SE LAB</td>
<td>GVA</td>
<td>MTCL-2</td>
<td>SE LAB</td>
<td>GVA</td>
<td>MTCL-2</td>
<th colspan="3" style="background-color: rgb(221, 124, 121);">LUNCH BREAK</th>
<td>WD LAB</td>
<td>ANK</td>
<td>HMCL</td>
<td>WD LAB</td>
<td>ANK</td>
<td>HMCL</td>
</tr>
<tr style="background-color: rgb(193, 192, 219);">
<td style="background-color: rgb(228, 171, 97);">BCA-2C</td>
<td>DBMS LAB</td>
<td>AKG</td>
<td>HMCL</td>
<td>DBMS LAB</td>
<td>AKG</td>
<td>HMCL</td>
<td>DBMS</td>
<td>AKG</td>
<td>ET-510</td>
<th colspan="3" style="background-color: rgb(221, 124, 121);">LUNCH BREAK</th>
<td>WD LAB</td>
<td>PNT</td>
<td>HMCL</td>
<td>SE</td>
<td>GVA</td>
<td>ET-103</td>
<td>WD</td>
<td>PNT</td>
<td>ET-103</td>
</tr>
<tr style="background-color: rgb(193, 192, 219);">
<td style="background-color: rgb(228, 171, 97);">BCA-2D</td>
<td>SE</td>
<td>PRK</td>
<td>ET-203</td>
<td>DBMS</td>
<td>PRT</td>
<td>ET-203</td>
<td>WD</td>
<td>HSK</td>
<td>ET-403</td>
<th colspan="3" style="background-color: rgb(221, 124, 121);">LUNCH BREAK</th>
<td>WD LAB</td>
<td>HSK</td>
<td>MTCL-3</td>
<td>SE LAB</td>
<td>PRK</td>
<td>MTCL-3</td>
<td>SE LAB</td>
<td>PRK</td>
<td>MTCL-3</td>
</tr>
<tr style="background-color: rgb(193, 192, 219);">
<td style="background-color: rgb(228, 171, 97);">BCA-2E</td>
<td>OS</td>
<td>ANK</td>
<td>ET-403</td>
<td>SE</td>
<td>PRT</td>
<td>ET-403</td>
<td>WD LAB</td>
<td>ISK</td>
<td>HMCL</td>
<td>WD LAB</td>
<td>ISK</td>
<td>HMCL</td>
<th colspan="3" style="background-color: rgb(221, 124, 121);">LUNCH BREAK</th>
<td>DBMS</td>
<td>NRN</td>
<td>ET-303</td>
<td colspan="3"></td>
</tr>
<tr style="background-color: rgb(188, 216, 151);">
<td rowspan="5" style="background-color: rgb(223, 210, 98);">TUESDAY</td>
<td style="background-color: rgb(228, 171, 97);">BCA-2A</td>
<td>OS LAB</td>
<td>NRN</td>
<td>PHCL</td>
<td>OS LAB</td>
<td>NRN</td>
<td>PHCL</td>
<td>SE</td>
<td>PRS</td>
<td>ET-402</td>
<th colspan="3" style="background-color: rgb(221, 124, 121);">LUNCH BREAK</th>
<td>SE LAB</td>
<td>PRS</td>
<td>ETCC-407</td>
<td>SE LAB</td>
<td>PRS</td>
<td>ETCC-407</td>
<td>OS</td>
<td>NRN</td>
<td>ET-101</td>
</tr>
<tr style="background-color: rgb(188, 216, 151);">
<td style="background-color: rgb(228, 171, 97);">BCA-2B</td>
<td>OS</td>
<td>PRJ</td>
<td>ET-501</td>
<td>SE</td>
<td>GVA</td>
<td>ET-501</td>
<td>SE LAB</td>
<td>GVA</td>
<td>MTCL-2</td>
<td>SE LAB</td>
<td>GVA</td>
<td>MTCL-2</td>
<th colspan="3" style="background-color: rgb(221, 124, 121);">LUNCH BREAK</th>
<td>WD LAB</td>
<td>ANK</td>
<td>HMCL</td>
<td>WD LAB</td>
<td>ANK</td>
<td>HMCL</td>
</tr>
<tr style="background-color: rgb(188, 216, 151);">
<td style="background-color: rgb(228, 171, 97);">BCA-2C</td>
<td>DBMS LAB</td>
<td>AKG</td>
<td>HMCL</td>
<td>DBMS LAB</td>
<td>AKG</td>
<td>HMCL</td>
<td>DBMS</td>
<td>AKG</td>
<td>ET-510</td>
<th colspan="3" style="background-color: rgb(221, 124, 121);">LUNCH BREAK</th>
<td>WD LAB</td>
<td>PNT</td>
<td>HMCL</td>
<td>SE</td>
<td>GVA</td>
<td>ET-103</td>
<td>WD</td>
<td>PNT</td>
<td>ET-103</td>
</tr>
<tr style="background-color: rgb(188, 216, 151);">
<td style="background-color: rgb(228, 171, 97);">BCA-2D</td>
<td>SE</td>
<td>PRK</td>
<td>ET-203</td>
<td>DBMS</td>
<td>PRT</td>
<td>ET-203</td>
<td>WD</td>
<td>HSK</td>
<td>ET-403</td>
<th colspan="3" style="background-color: rgb(221, 124, 121);">LUNCH BREAK</th>
<td>WD LAB</td>
<td>HSK</td>
<td>MTCL-3</td>
<td>SE LAB</td>
<td>PRK</td>
<td>MTCL-3</td>
<td>SE LAB</td>
<td>PRK</td>
<td>MTCL-3</td>
</tr>
<tr style="background-color: rgb(188, 216, 151);">
<td style="background-color: rgb(228, 171, 97);">BCA-2E</td>
<td>OS</td>
<td>ANK</td>
<td>ET-403</td>
<td>SE</td>
<td>PRT</td>
<td>ET-403</td>
<td>WD LAB</td>
<td>ISK</td>
<td>HMCL</td>
<td>WD LAB</td>
<td>ISK</td>
<td>HMCL</td>
<th colspan="3" style="background-color: rgb(221, 124, 121);">LUNCH BREAK</th>
<td>DBMS</td>
<td>NRN</td>
<td>ET-303</td>
<td colspan="3"></td>
</tr>
</table>
</body>
</html>
Output:
PRACTICAL 5
Create a student Bio- Data.
Program:
<!DOCTYPE html>
<html>
<head>
<title>PERSONAL_PORTFOLIO</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table,tr,th,td{
border: 2px solid black;
border-collapse: collapse;
padding: 5px;
text-align: center;
}
a{
color:green
}
a:hover{
background-color: rgb(142, 238, 116);
}
h2{
border: 3px solid rgb(17, 58, 103);
padding: 5px;
}
body{
background-image: url();
background-size: cover;
}
</style>
</head>
<body>
<header style="Background-color: rgb(43, 161, 208); border: 5px solid rgb(17, 58, 103);padding: 1px;">
<h1 style=" text-align: center; color: rgb(246, 239, 239);">Harshit Verma</h1>
<h2 style=" text-align: center; color: rgb(241, 233, 233); border:0px;">( Web Developer )</h2>
</header>
<h2 style="Background-color: rgb(43, 161, 208);color:white;">ABOUT ME</h2>
<p>I am Student of <b>BCA in <i>Punjab Collage of Technical Education.</i></b><br>
I have completed my <b>12th from CBSE Board in <i>Non-Medical stream.</i></b></p><hr>
<h2 style="Background-color: rgb(43, 161, 208);color:white;">MY SKILLS</h2>
<h3>* Hobbies</h3>
<ul>
<li>Reading Books</li>
<li>Playing Volleyball</li>
<li>Listen to Music</li>
</ul>
<h3>* Technical Sills</h3>
<ol>
<li>Programming Languages</li>
<ul>
<li>C++</li>
<li>Python</li>
</ul>
<li>Front-End Languages</li>
<ul>
<li>HTML, CSS, Java Script</li>
</ul>
</ol><hr>
<h2 style="Background-color: rgb(43, 161, 208);color:white;">WEEKLY SCHEDULE</h2>
<table>
<tr style="background-color: rgb(168, 166, 166);">
<th>Day</th>
<th>9:00am - 5:00pm </th>
<th>6:00pm - 7:30pm </th>
<th>8:00pm - 8:30pm </th>
<th>9:00pm - 10:30pm </th>
</tr>
<tr style="background-color: rgb(43, 161, 208);color:white;">
<td>Monday</td>
<td>Collage</td>
<td>Gym</td>
<th style="background-color: rgb(71, 158, 201);" rowspan="7"><h3>Dinner</h3></th>
<td>DBMS</td>
</tr>
<tr style="background-color: rgb(54, 101, 152);color:white;">
<td>Tuesday</td>
<td>Collage</td>
<td>Gym</td>
<td>Web Development</td>
</tr>
<tr style="background-color: rgb(43, 161, 208);color:white;">
<td>Wednesday</td>
<td>Collage</td>
<td>Gym</td>
<td>Programming-Problems</td>
</tr>
<tr style="background-color: rgb(54, 101, 152);color:white;">
<td>Thursday</td>
<td>Collage</td>
<td>Gym</td>
<td>Data-Structure</td>
</tr>
<tr style="background-color: rgb(43, 161, 208);color:white;">
<td>Friday</td>
<td>Collage</td>
<td>Gym</td>
<td>Problem-Solving</td>
</tr>
<tr style="background-color: rgb(54, 101, 152);color:white;">
<td>Saturday</td>
<td>Collage</td>
<td>Gym</td>
<td>Self-improvement</td>
</tr>
</table>
<!--<h2 style="Background-color: rgb(43, 161, 208)">PROJECTS</h2>
<ol>
<li>Bank Management System Using <b>C++</b> </li>
<br><img src="Screenshot 2024-12-17 194429.png" alt="Face_Recognitionsrc=" width="270px" height="150px">
<br>
<br><li>Face Recognition System Using <b>Python</b> </li>
<br><img src="Screenshot (90).png" alt="Bank_Management" width="270px" height="180px">
</ol>
<hr>
<h2 style="Background-color: rgb(43, 161, 208)">PROJECT LINKS</h2>
<ol>
<h4>
<li><a href="main.py" target="_blank">Face Recognition Attendance System</a></li>
<li><a href="https://www.geeksforgeeks.org/python-basics/" target="_blank">Python Basics from
GeeksforGeeks</a></li>
</h4>
<br><a href="https://www.geeksforgeeks.org/introduction-machine-learning/" target="_blank"><img
src="https://tse4.mm.bing.net/th?id=OIP.9EpMdgmdRO48As0fk0pB7QHaFM&pid=Api&P=0&h=220"></a>
</ol>
<hr>-->
<br><br>
<footer style="text-align: center;color:white; Background-color: rgb(43, 161, 208); border: 5px solid rgb(17, 58, 103);padding:
1px;">
<h3>I hereby state that the above content is 100% correct as per my Knowledge.</h3>
<h3><i>Harshit Verma</i></h3>
<h4>( Copyrights Received )</h4>
</footer>
</body>
</html>
Output:
