Practical File
Of
Web Designing
SUBMITTED TO: SUBMITTED BY:
Ms. Sandeep Kaur Name: Emandeep Kaur
Assistant Professor BCA 4th Semester
IET Bhaddal, Roopnagar Uni. Roll no: 2211014
1
Index
Sr Experiments Page Date of Teacher
No. No. Submission Signature
1 Create a simple HTML page to demonstrate the 3
use of different tags.
2 Design index page of a book on web designing. 4
3 Display Latter Head of your college on a web page. 5
4 Create a hyperlink to move around within a single 6
page rather than to load another page.
5 Display letter using different Text formatting tags. 7
6 Design Time Table of your department and 8-10
highlights of most important periods.
7 Use Tables to provide layout to your web page. 11-12
8 Embed Audio and Video into your web page. 13
9 Divide a web page vertically and horizontally and 14-15
display logo of your college in left pane and logo
of university in right pane.
10 Create a student Bio data. 16-17
11 Design front page of hospital with different styles 18-21
sheets.
12 Design a web page and display two different pages 22-23
at a time.
13 Write a program to create a login form. On 24-26
submitting the form, the user should get
navigated to a profile page using JavaScript.
14 Write a code to create a Registration Form. On 27-28
submitting the form, the user should be asked to
login with the new credentials using JavaScript.
15 Write an HTML code to create your Institute 29
website/ Department website/ Tutorial website
for specific subject. Also use JavaScript for
validation.
2
Experiment 1: Create a simple HTML page to demonstrate the use of
different tags.
Code:
<html>
<head>
<title>
simple HTML page
</title>
</head>
<body>
Create a simple HTML page to demonstrate the use of different tags.
<p> This is my <b>first web page</b></p>
<p>In this page we will discuss how we use <bb>different tags </b>in HTML</p>
<p>We use i tag for <i> italics tag </i> in HTML </P>
<p>We use mark tag for <mark> heightlight</mark>in HTML</p>
<p>We use u tag for <u>underline</u></p>
</body>
</html>
Output:
3
Experiment 2: Design index page of a book on web designing.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Index page of book
</title>
</head>
<body>
<h1 align="left">Table of Content</h1>
<ol>
<li>Introduction of HTML.................................1</li>
<li>Information file creation.............................2-4</li>
<li>Web server vs Web browser..............................5-9</li>
<li>HTML Tags & Types of tags...............................10-15</li>
<li>Commonly used HTML commands.............................16-20</li>
<li>Title & footer............................................21-22</li>
<li>Text formatting..........................................23-24</li>
<li>List & Types of list......................................25-28</li>
<li>Tables....................................................29-30</li>
<li>Frames....................................................31-32</li>
</ol>
</body>
</html>
Output:
4
Experiment 3: Display Letter Head of your college on a web page.
Code:
<html>
<head>
<title>letter head </title>
</head>
<body>
<h1> IET Bhaddal Technical Campus Ropar </h1>
<p>Address: village: Bhaddal , district: Ropar, Punjab </p>
<p>Phone:9876543210</p>
<p>E-mail: [email protected]</p>
</body>
</html>
Output:
5
Experiment 4: Create a Hyperlink to move around within a single page rather
than to load another page.
Code:
<html>
<head>
<title>
Hyperlink
</title>
</head>
<body link = colour blue >
<a href="style.html">visit my page </a>
</body>
</html>
Output:
6
Experiment 5: Display letter using different Text formatting Tags.
Code:
<html>
<head>
<title>
Text formating
</title>
</head>
<body>
Creating a letter for text formatting
<p>My name is <em>Emandeep kaur </em></p>
<p>I am student of <strong>BCA 4th </strong></p>
<p>I study in <mark>IET Bhddal campus<ins>ropar</ins></mark></p>
<p>I live in <small>village</small><b><u>rampur</b></u></p>
Output:
7
Experiment 6: Design time table of your department and highlights of most
important periods.
Code:
<html>
<head>
<title>
BCA 4th Semester
</title>
</head>
<body>
<table bg color="black" ; cellspacing="0px"; cell padding ="2px"; border collapse:collapse;
width=100%;>
<th colspan="10px"><b> IET BHADDAL CAMPUS</b></th>
<tr>
<th>Instuitue name:</th>
<th>GCSIVS Bhaddal</th>
<th colspan="2px".<b>TIME TABLE</b></th>
<th>Branch</th>
<th colspan="5px">BCA</th>
</tr>
<tr>
<th>Semester:</th>
<th>4th</th>
<th>Course:</th>
<th>W.E.F:</th>
<th colspan="5px">25/02/2024</th>
</tr>
<tr>
<td>Class Incharge</td>
<td colspan="2px">MS. Nisha Choudhary</td>
<td>Session;</td>
<td colspan="2px">Jan to May</td>
<td>Room no</td>
<td colspan="5px">212</td>
</tr>
<tr>
<td bgcolor="blue"><b>Time</b></td>
<td bgcolor="blue">9:30-10:15</td>
<td bgcolor="blue">10:15-11:00</td>
<td bgcolor="blue">11:00-11:45</td>
<td bgcolor="blue">11:45-12:30</td>
<td bgcolor="blue">12:30-01:15</td>
8
<td bgcolor="blue">01:15-02:45</td>
<td bgcolor="blue">02:45-04:15</td>
</tr>
<tr>
<td bgcolor="blue">Period</td>
<td bgcolor= "darkblue">1</td>
<td bgcolor= "darkblue">2</td>
<td bgcolor= "darkblue">3</td>
<td bgcolor= "darkblue">4</td>
<td bgcolor= "darkblue"> </td>
<td bgcolor= "darkblue">5</td>
<td bgcolor= "darkblue">6</td>
<td bgcolor= "darkblue">7</td>
<td bgcolor= "darkblue">8</td>
</tr>
<tr>
<td bgcolor="blue"><b>Monday</b></td>
<td>SE</td>
<td>WD</td
<td>OS</td>
<td bgcolor="red">B</td>
<td colspan="2px"><mark>OS LAB</mark></td>
<td colspan="2px">DBMS LAB </td>
</tr>
<tr>
<td bgcolor="blue"><b>Tuesday</b></td>
<td>SE</td>
<td>DBMS</td
<td>OS</td>
<td bgcolor="red">R</td>
<td colspan="2px"><mark>SE LAB</mark></td>
<td colspan="2px">NET LAB </td>
</tr>
<tr>
<td bgcolor="blue"><b>Wednesday</b></td>
<td>DBMS</td>
<td>WD</td
<td>NET LAB</td>
<td bgcolor="red">E</td>
<td colspan="2px">SE LAB</td>
<td colspan="2px"><mark>DBMS LAB</mark> </td>
</tr>
<tr>
<td bgcolor="blue"><b>Thursday</b></td>
9
<td>SE</td>
<td>WD</td
<td>OS</td>
<td bgcolor="red">B</td>
<td colspan="2px"><mark>WD LAB</mark></td>
<td colspan="2px">SE LAB </td>
</tr>
<tr>
<td bgcolor="blue"><b>Friday</b></td>
<td>SE</td>
<td><marK>WD</mark></td
<td>OS</td>
<td bgcolor="red">B</td>
<td colspan="2px">OS LAB</td>
<td colspan="2px">WDLAB </td>
</tr>
</table>
<h2>H.O.D. Dr. Parvneet Kaur</h2>
</body>
</html>
Output:
10
Experiment 7: Use Tables to provide layout to your web page.
Code:
<html>
<head>
<title>Student record</title>
</head>
<body>
<table border="8" width=20% height=10%>
<tr>
<th>Student Name</th>
<th>Branch</th>
<th>Rollno</th>
<th colspan="2px">Subject</th>
</tr>
<tr>
<td>Eman</td>
<td>BCA 4th</td>
<td>2211014</td>
<td>Web designing</td>
<td>Operating system</td>
</tr>
<tr>
<td>Anmol</td>
<td>BCA 4th</td>
<td>2211007</td>
<td>Web designing</td>
<td>Operating system</td>
</tr>
<tr>
<td>Anish</td>
<td>BCA 4th</td>
<td>2211006</td>
<td>Web designing</td> <td>Operating system</td> </tr>
<tr>
<td>Parminder</td>
<td>BCA 4th</td>
<td>2211041</td>
<td>Web designing</td> <td>Operating system</td> </tr>
<tr>
<td>Rohit</td>
<td>BCA 4th</td>
<td>2211046</td>
<td>Web designing</td> <td>Operating system</td> </tr>
<tr>
<td>Parneet</td>
11
<td>BCA 4th</td>
<td>2211042</td>
<td>Web designing</td> <td>Operating system</td> </tr>
<tr>
<td>Kesar</td>
<td>BCA 4th</td>
<td>2211031</td>
</tr>
<<td>Web designing</td>
<td>Operating system</td>
<tr>
<td>BCA 4th</td>
<td>2211047</td>
<td>Web designing</td>
<td>Sandeep</td>
<td>Operating system</td>
</tr>
</table>
</body>
</html>
Output:
12
Experiment 8: Embed Audio and Video into your web page.
Code:
<html>
<head>
<title>Experiment 8 </title>
</head>
<body>
<h2>Click play button to play song </h2>
<audio src ="C:\Users\Admin\Pictures\_Street Dreams - Album by DIVINE & Karan Aujla -
Apple Music_filesauth-bridge.js.download" controls>
</audio>
<h2> Click play button to play video</h2>
<video src="C:\Users\Admin\Videos\CapturesMP4 File (.mp4)"
type="video_file_type"controls>
</video>
</body>
</html>
Output:
13
Experiment 9: Divide a web page vertically and horizontally and display logo
of your college in left pane and logo of university in right pane.
Code:
<html>
<head>
<title>Vertical and Horizontal Divider</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
display: flex;
height: 100vh;
}
.left-pane, .right-pane {
flex: 1;
overflow: hidden;
position: relative;
}
.horizontal-divider {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
background-color: #000;
}
.vertical-divider {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
background-color: #000;
}
.logo {
max-width: 80%;
max-height: 80%;
display: block;
margin: auto;
14
}
</style>
</head>
<body bgcolor="pink">
<div class="container">
<div class="left-pane">
<img class="logo" src="https://ietbhaddal.edu.in/img/logos/Logos-IET-
Bhaddal_01.png" alt="IET Bhaddal Campus Ropar">
<div class="horizontal-divider"></div>
</div>
<div class="right-pane">
<img class="logo"
src="https://www.bing.com/th?id=OIP.xnmKvp1D5dqr19FevbI1TAHaIo&h=220&c=11&rs=1
&qlt=90&bgcl=ececec&o=6&pid=PersonalBing&p=0" alt="IKG University PTU">
</div>
<div class="vertical-divider"></div>
</div>
</body>
</html>
Output:
15
Experiment 10: Create a student Bio data.
Code:
<html>
<head>
<title>BIODATA</title>
</head>
<marquee>
<body bgcolor="white"><font color="black"><font size=30>Biodata</font>
</marquee>
<hr>
<body><font size=5><font color="blue">
<img src="C:\Users\Admin\Pictures\myphoto.png" align="right" height=100 width=100
1px>
Name:Ms.Emandeep Kaur<br>
Father's name:S.Harnek Singh<br>
Mothers's name:Sukhwinder Kaur<br>
DOB:04:12:2000<br>
Address:vill-Rampur district:Ropar,punjab<br>
Mobile no:1234566543<br>
Religion:Sikhism<br>
Nationality:Indian<br>
Gender:Female<br>
Qualification:BCA<br>
<table style="width:50%"border=3>
<tr>
<th>semester</th>
<th>grade</th>
<th>cpga %</th>
</tr>
<tr>
<th>1</th>
<th>S</th>
<th>80%</th>
</tr>
<tr>
<th>2</th>
<th>A</th>
<th>78 %</th>
</tr>
</body>
</html>
16
Output:
17
Experiment 11: Design front page of hospital with different styles sheets.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hospital Front Page</title>
<!-- Linking different style sheets -->
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
<!-- CSS for centering the "About Us" section -->
<style>
.main-content {
text-align: center; /* Align text center */
margin-top: 50px; /* Adjust top margin as needed */
}
.main-content h2 {
color: #333; /* Optional: Add color to the heading */
}
.main-content p {
font-size: 18px; /* Optional: Adjust font size */
line-height: 1.6; /* Optional: Adjust line height */
}
</style>
</head>
<body>
<!-- Header Section -->
<header>
<h1>Welcome to Our Hospital</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
18
</header>
<!-- Main Content Section -->
<section class="main-content">
<h2>About Us</h2>
<p>Welcome to our hospital! We strive to provide the best medical care to our
patients.</p>
<p>Our team of experienced doctors and staff are dedicated to ensuring your well-
being.</p>
</section>
<!-- Footer Section -->
<footer>
<p>© 2024 Our Hospital. All rights reserved.</p>
</footer>
</body>
</html>
/* style1.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #007bff;
color: #fff;
padding: 20px;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
19
color: #fff;
text-decoration: none;
}
.main-content {
padding: 20px;
}
footer {
background-color: #007bff;
color: #fff;
text-align: center;
padding: 10px 0;
}
/* style2.css */
body {
font-family: 'Roboto', sans-serif;
background-color: #fff;
color: #333;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
20
.main-content {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
Output:
21
Experiment 12: Design a web page and display two different pages at a time.
Code:
<html >
<head>
<title>Two Pages Display</title>
</head>
<body>
<iframe src="page1.html" width="50%" height="100%" style="float: left; border:
none;"></iframe>
<iframe src="page2.html" width="50%" height="100%" style="float: right; border:
none;"></iframe>
</body>
</html>
Page1.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page 1</title>
</head>
<body>
<h1>Welcome to Page 1</h1>
<p>This is the content of Page 1.</p>
</body>
</html>
Page2.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page 2</title>
</head>
<body>
22
<h1>Welcome to Page 2</h1>
<p>This is the content of Page 2.</p>
</body>
</html>
Output:
23
Experiment 13: Write a program to create a login form. On submitting the
form, the user should get navigated to a profile page using JavaScript.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<form id="loginForm" onsubmit="validateForm(event)">
<h2>Login</h2>
<div class="input-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Login</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
Styles sheet of CSS code:
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
max-width: 400px;
margin: 100px auto;
24
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.input-group {
margin-bottom: 15px;
}
.input-group label {
display: block;
margin-bottom: 5px;
}
.input-group input {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
display: block;
width: 100%;
padding: 10px;
border: none;
background-color: #007bff;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
JavaScript code:
function validateForm(event) {
event.preventDefault(); // Prevent form submission
// Get form values
25
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// You can replace this with your actual authentication logic
// For demonstration purposes, let's just check if username and password are not empty
if (username && password) {
// If credentials are valid, navigate to profile page
window.location.href = "profile.html";
} else {
alert("Invalid username or password. Please try again.");
}
}
Output:
26
Experiment 14: Write a code to create a Registration Form. On submitting the
form, the user should be asked to login with the new credentials using
JavaScript.
Code:
<html>
<head><title.Registration Form</title>
</head>
<body bgcolor="lightskyblue">
<h1>Student Registration Form </h1>
<br>
<form>
<label>First name:</label>
<input type ="text"name="first name" size="15"/><br><br>
<label>Middle name:</label>
<input type ="text"name="Middle name" size="15"/><br><br>
<label>Last name:</label>
<input type ="text"name="Last name" size="15"/><br><br>
<lable>Course:</label>
<select>
<option value ="course">Course</option>
<option value ="BCA">BCA</option>
<option value ="MCA">MCA</option>
</select>
<br>
<br>
<label>Gender</label><br>
<input type ="radio" name ="male"/>Male<br>
<input type ="radio" name ="female"/>Female<br>
<input type ="radio" name ="other"/>Other<br>
<br>
<label>Phone:</label>
<input type ="text" name="Country code" value="+91" size"2"/>
<input type="text" name="Phone" size="10"/>
<br><br>
<p>Address:</p>
<br>
<textarea cols ="80" rows="5" value="Address">
</textarea><br><br>
Email
<input type="Email" id = "Email" name ="Email"/><br><br><br>
Password:
<input type ="Password" id = "pass" name ="pass"><br><br><br>
27
Re-type password:
<input type="Password"id="repass" name="repass"><br><br>
<input type="button"value="Submit"/>
</form>
</body>
</html>
Output:
28
Experiment 15: Write an HTML code to create your Institute website/
Department website/ Tutorial website for specific subject. Also use
JavaScript for validation.
Code:
<html>
<head>
<title> IET Bhaddal College</title>
<body>
<marquee direction="right"><h1>IET Bhaddal Campus Ropar</h1></marquee>
<h2> About us </h2>
<p>The Institute strive to provide quality education using modern aids.we are into a
Memorandum of undertanding for curriculum development, training,research and
development and student & faculty exchange with various universities/colleges.</p>
<img
src="https://th.bing.com/th?id=OIP.mi9EBVbzCN8jneY6twb0NgAAAA&w=176&h=176&c=8
&rs=1&qlt=90&o=6&pid=3.1&rm=2">
<ul>courses
<li>BCA</li>
<li>B.Tech></li>
<li>MCA</li>
</ul>
<footer>Contact us for admissions<br>
Mobile no: 01881 244 245<br>
email id:[email protected]</br>
</footer>
</body>
</html>
Output:
29
