Scribd
Upload
22 views17 pages

Reference WD Practical

The document is a practical file for a Web Designing Laboratory course at Punjab College of Technical Education, submitted by a BCA student. It includes various HTML programs demonstrating different web design concepts such as creating simple web pages, hyperlinks, text formatting, and a timetable. Each practical section provides code examples and expected outputs for the tasks assigned.

Uploaded by

vishesh01327
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
22 views17 pages

Reference WD Practical

The document is a practical file for a Web Designing Laboratory course at Punjab College of Technical Education, submitted by a BCA student. It includes various HTML programs demonstrating different web design concepts such as creating simple web pages, hyperlinks, text formatting, and a timetable. Each practical section provides code examples and expected outputs for the tasks assigned.

Uploaded by

vishesh01327
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

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:

You might also like