Scribd
Upload
166 views34 pages

Mehak WD - 2

The document is a practical file submitted by Mehak for the Web Designing Laboratory course. It contains 12 experiments conducted for the course, including creating simple HTML pages, designing web pages for a book index, college letterhead, and more. The file includes the output and code for each experiment.

Uploaded by

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

Mehak WD - 2

The document is a practical file submitted by Mehak for the Web Designing Laboratory course. It contains 12 experiments conducted for the course, including creating simple HTML pages, designing web pages for a book index, college letterhead, and more. The file includes the output and code for each experiment.

Uploaded by

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

GURU NANAK DEV ENGINEERING COLLEGE

DEPARTMENT OF COMPUTER APPLICATIONS

PRACTICAL FILE

WEB DESIGNING LABORATORY

(UGCA-1928)

Submitted to: Submitted by:

Prof.Harmandeep Kaur Mehak


2191037/2104941
BCA 4th sem
Index
Sr. No. List of Experiment Page Date of Date of Remarks
No. Practical Submission

1. Create a simple HTML page to


demonstrate the use of
different tags.

2. Design index page of a book on


web designing.

3. Display Letter Head of your


college on a web page.

4. Create a Hyperlink to move


around within a single page
rather than to load another page.

5. Display letter using different Text


formatting Tags.

6. Design Time Table of your


department and highlights of
most important periods.

7. Use Tables to provide layout to


your web page.

8. Divide a web page vertically and


horizontally and display
logo of your college in left pane
and logo of university in right
pane.

9. Create a student Bio- Data.

10. Design front page of hospital with


different style sheets.

11. 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.

12. Write an HTML code to create


your Institute
website/Department website/
Tutorial
website for specific subject. Also
use Java Script for validation.
Practical No 1
Create a simple HTML page to demonstrate the use ofdifferent tags.

<!DOCTYPE html>
<html>

<head>
<title>My Simple HTML Page</title>
<style>
img {
height: 10%;
width: 10%;
}

tr,
td {
border: 1px solid black;
}
</style>
</head>

<body>
<h1>Text Using h1</h1>
<p>This is a paragraph. Using paragraph tags</p>
<a href="https://www.example.com">This is a link</a>
<br>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
</ol>

<br><br>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message"></textarea><br><br>
<input type="submit" value="Submit">
</form>
</body>

</html>
Output:
Practical No 2
Design index page of a book on web designing.
<!DOCTYPE html>
<html lang="en">

<head>
<title>1st Practical</title>
<style>
h1 {
font-size: 55px;
font-family: 'Abhaya Libre';
background-color: black;
color: gold;
padding: 5px 10px;
border-radius: 30px;
MARGIN: 16px -7px;
text-align: center;
word-spacing: 20px;
}
table {
border: 4px solid black;
width: 70%;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
margin: auto;
}
td {
font-size: 25px;
border: 2px solid black;
padding: 10px 16px;
font-family: 'Merriweather';
}
th {
font-size: 23px;
border: 2px solid black;
}
</style>
</head>

<body>
<h1>INDEX OF A BOOK</h1>
<table>
<tr>
<th>SERIAL NO.</th>
<th>TOPIC</th>
<th style = width:10%;>PAGE NO.</th>
</tr>
<tr>
<td>1</td>
<td>Object Oriented Design - Interfaces and Abstract Classes, Exceptions</td>
<td>1-5</td>
</tr>
<tr>
<td>2</td>
<td>Fundamental Data Structures - Arrays, Singly Linked Lists, Doubly Linked Lists</td>
<td>6-10</td>
</tr>
<tr>
<td>3</td>
<td>Recursion - Designing Recursive Algorithms, Eliminating Tail Recursion</td>
<td>11-15</td>
</tr>
<tr>
<td>4</td>
<td>Stacksm Queues, and Double Ended Queues</td>
<td>16-20</td>
</tr>
<tr>
<td>5</td>
<td>List and Iterator ADTS - Array Lists, Iterators, Java Collection Framework</td>
<td>21-25</td>
</tr>
<tr>
<td>6</td>
<td>Trees - Binary Trees, Tree Transversal</td>
<td>26-30</td>
</tr>
<tr>
<td>7</td>
<td>Text - Pattern Matching, Tries, Dynamic Programming</td>
<td>30-25</td>
</tr>
<tr>
<td>8</td>
<td>Maps, HashTables, Sorted Maps, Sets, Multisets and Multimaps</td>
<td>21-25</td>
</tr>
<tr>
<td>9</td>
<td>Search Trees - Binary Search Trees, AVL Trees, Red-Black Trees</td>
<td>26-30</td>
</tr>
</table>
</body>

</html>

Output
Practical No 3
Display Letter Head of your college on a web page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Letter Head</title>
<style>
div{
border: 30px solid rgb(43, 43, 187);
padding: 0px 102px;
padding-bottom: 50px;
width: 640px;
}
img{
height: 94px;
width: 160px;
}
h3{
margin: 10px 0px;
}
#logo{
display: block;
height: 249px;
width: 300px;
margin-left: auto;
margin-right: auto;
padding: 10px 10px;
}
#address{
text-align: center;
margin: 0px;
padding: 0px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 20px;
}
h2{
color: rgb(43, 43, 187);
font-size: 23px;
}
p{
font-size: 18px;
}
h3{
color: rgb(43, 43, 187);
font-size: 17px;
}
</style>
</head>
<body>
<div id="dear">
<img src="gne.jpg" id = "logo">
<p id="address">
Gill Park, Gill Road, Ludhiana Punjab India 141006.
</p>
<h2>Dear Mehak</h3>

<p>Our goal is to change the world through education. It may sound idealistic, but this is precisely our
mission. It is what motivates the work of everyone at the institute, from faculty to staff to students.</p>
<p>We are driven by the belief that every child deserves a high quality education and that education
opportunity is a basic human right. Regardless of where a child is born, that child deserves a high quality
education.</p>
<p>We are witnessing an intersection of great challenge and great opportunity. At the moment far too
many students lack access to high quality education; still others are unable to achieve their full potential. Our
classrooms were designed for the 19th century, while technology continues to evolve at a rapid pace. And far
too often, ideology and politics trump evidence and common sense making it difficult to have honest
conversations about the best ways to fix what is broken in education.</p>
<br>Sincerely,
<br><br>
<img src="3-signature.png">
<h3>Leslie Williams,</h3>
<p style="margin: 0px"><b>Dean At GNDEC</b></p>
</div>
</body>
</html>
Output:
Practical No 4.
Create a Hyperlink to move around within a single page rather than to
load another page.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Section links</title>

<style>
*{
margin: 0;
padding: 0;
}

body {
width: 100vw;
height: 30vh;
}

.section {
width: 100vw;
height: 15vh;
background-color: #5A5A5A;
font-size: 20px;
color: white;
text-align: center;
margin: 10px 5px;
}

.one,
.three {
background-color: #D3D3D3;
}

.nav {
width: 100vw;
height: 8vh;

font-size: medium;
color: white;
text-align: center;
margin: 10px 5px;
display: flex;
flex-direction: row;
justify-content: space-around;
place-items: center;
}

.btn {
color: white;
background-color: #38CC77;
height: 15px;
width: 45px;
padding: 2px

border: 2px solid black;text-


decoration: none;
}
</style>
</head>

<body>
<div class="nav">
<a href="#section1" class="btn">1</a>
<a href="#section2" class="btn">2</a>
<a href="#section3" class="btn">3</a>
<a href="#section4" class="btn">4</a>
</div>
<div class="section one" id="section1">
section 1
</div>
<div class="section two" id="section2">
section 2
</div>
<div class="section three" id="section3">
section 3
</div>
<div class="section four" id="section4">
section 4
</div>
</body>
width: 45px;
padding: 2px

border: 2px solid black;text-


decoration: none;
}
</style>
</head>

<body>
<div class="nav">
<a href="#section1" class="btn">1</a>
<a href="#section2" class="btn">2</a>
<a href="#section3" class="btn">3</a>
<a href="#section4" class="btn">4</a>
</div>
<div class="section one" id="section1">
section 1
</div>
<div class="section two" id="section2">
section 2
</div>
<div class="section three" id="section3">
section 3
</div>
<div class="section four" id="section4">
section 4
</div>
</body>
Output:
Practical No 5.
Display letter using different Text formatting Tags.
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Letter</title>
<style>
*
h1{
font-size: 32px;
}
div{
margin-left: 10px;
font-size: 15px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
</style>
</head>

<body>
<div>
<h1>Letter For Requesting Refund</h1>
<p>
<br>From,
<br><b>Mohan Sharma</b>,
<br>B-32/2036,
<br>ABC Road, Ludhiana-141008
<br>9876543210
<br>[email protected]
<br><br><i>Date: March 13, 2023</i>
</p>
<p>
To,
<br><b>Aman Oswal,</b>
<br>Balaghat, Bhagpat,
<br>[email protected]
<br>9988776655
<br><br><b>Sub: Request to refund for Television</b>
<br><br><b>Dear Aman,</b>
<br> This is to state that I had ordered a television from your store, Oswal Electronics on 15th January.
We realized that the TV was a little small in size for our family, so we canceled the order. The model number is
<span style="font-style: italic; color: red;"> BWG40-RST</span> and the price of the product is <span
style="font-style: italic; color: rgb(55, 0, 255); font-weight: bolder;">23,445 Rs.</span> We processed the
payment in advance at the store at the time of order. It has been two months and we are still waiting for the
refund. If you please look into this request ungently I will be highly obliged.
<br><br>Sincerely,
<br>Mehak
</p>
</div>
</body>
</html>
Output:
Practical No 6
Design Time Table of your department and highlights ofmost important
periods.

<!DOCTYPE html>
<html lang="en">

<head>
<title>Time Table</title>
</head>
<style>
table,
th,
td {
border: 1px solid black;
}
.selab {
background-color: yellow;
}
</style>

<body>
<table>
<tr><th colspan="6">BCA IV Semester Time Table</th></tr>
<tr>
<th>Hours</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<td>8:30 - 9:30</td>
<td>--</td>
<td rowspan="2" class="selab">SE Lab</td>
<td>DBMS</td>
<td>OS</td>
<td rowspan="2">OS Lab</td>
</tr>
<tr>
<td>9:30 - 10:30</td>
<td>SE</td>
<td>SE</td>
<td>SE</td>
</tr>
<tr>
<td>10:30 - 11:30</td>
<td>OS</td>
<td>OS</td>
<td rowspan="2">OS Lab</td>
<td>DBMS</td>
<td>WD</td>
</tr>
<tr>
<td>11:30 - 12:30</td>
<td>--</td>
<td>--</td>
<td>WD</td>
<td>--</td>
</tr>
<tr>
<td>12:30 - 13:30</td>
<td rowspan="2">WD Lab</td>
<td>--</td>
<td>--</td>
<td>--</td>
<td>DBMS</td>
</tr>
<tr>
<td>13:30 - 14:30</td>
<td>OS</td>
<td>WD</td>
<td rowspan="2">SE Lab</td>
<td>SE</td>
</tr>
<tr>
<td>14:30 - 15:30</td>
<td>DBMS</td>
<td rowspan="2">DBMS Lab</td>
<td rowspan="2">DBMS Lab</td>
<td>MC</td>
</tr>
<tr>
<td>15:30 - 16:30</td>
<td>--</td>
<td>--</td>
<td>--</td>
</tr>
</table>
</body>

</html>

Output
Practical No 7
Use Tables to provide layout to your web page.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
width: ;
padding: 12px;
}
</style>

<body>
<table>
<tr>
<td><img src="https://www.edigitalagency.com.au/wp-content/uploads/Twitter-logo-png-1.png"
height="32px"
width="32px"></td>
<td colspan="2"><h1>We are a company. We deal in products</h1>
Contact: +91 9876543210
</td>
</tr>
<tr>
<td><b>Our Products Are:</b><br>
Product 1<br>
Product 2<br>
Product 1<br>
</td>
</td>
<td>
<h2>Para 1</h2>
Our Introduction<br>
Our Company is a company that helps people to get products.<p>
<h2>Para 2</h2>
Our dedicated team is passionate about helping, and serving. Since our founding in 1985, Company
has enabled target audience around the world to get products.
<p>
<h2>Para 3</h2>
We make product professional product Platform. Here we will provide you only interesting content,
which you will like very much. We're dedicated to providing you the best of product, with a focus on
dependability and product. We're working to turn our passion for product into a booming product</a>. We hope
you enjoy our product as much as we enjoy offering them to you.
<p>
</td>
<td>
123 Aman Nagar, Ludhiana
</td>
</tr>
</table>
</body>

</html>

Output
Practical No 8
Divide a web page vertically and horizontally and displaylogo of your
college in left pane and logo of university in right pane.

Main file

<html>

<head>
<title>Frame</title>
</head>

<frameset cols="50%,50%">
<frame src="8_college.html">
<frame src="8_uni.html">
</frameset>

</html>

College Frame (8_college.html)

<html>
<body>
GNE College Logo<br><br>
<img src="gne.jpg" width="150px" height="150px">

</body>
</html>

University Frame (8_uni.html)

<html>
<body>
PTU Logo<br><br>
<img src="ptu.gif" width="150px" height="150px">

</body>
</html>

Output
Practical No 9
Create a student Bio- Data.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<h1>Student Bio-Data Form</h1>
<form>
<label for="name">Enter Name:</label>
<input type="text" name="name" id="name"><br><br>
<label for="age">Enter Age:</label>
<input type="number" name="age" id="age"><br><br>
<label for="blood-group">Enter Blood Group:</label>
<input type="text" name="blood-group" id="blood-group"><br><br>
<label for="gender">Select Gender:</label><br>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female<br><br>
<label for="image">Select Image of Student:</label><br>
<input type="file" name="image" id="image" accept="image/*"><br><br>
<input type="submit" name="submit" value="Add New Student">
</form>
</body>

</html>

Output:
Practical No 10
Design front page of hospital with different style sheets.

Main file (index.html)

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">
<link rel="stylesheet" href="10_1.css">
<link rel="stylesheet" href="10_2.css">

<title>Hospital</title>
</head>

<body>
<div class="container">
<img src="10.jpg" alt="" srcset="" id="logo" />
<div id="logo_text">Medcare</div>

<navbar id="nav">
<ul>
<!-- <li id="logo_text">MEDCARE</li> -->
<li><a> HOME </a></li>
<li><a> ABOUT</a></li>
<li><a> DEPARTMENT</a></li>
<li><a> DOCTORS</a></li>
<li><a> CONTACT</a></li>
</ul>
</navbar>
</div>
<div class="main_body">
<img src="10_body_image.jpg" alt="Snow" style="width:100%;">
<div class="centered">Making Health
<br> Care Better Together
<p id="para">The Clinic module allows the clinicians and doctors to record the clinical data of the
patients like visits, examination, diagnosis, history, treatment, prescriptions etc., and to order, procedures and
medicines, to keep track of the treatment and other services provided to the patients.</p>
<button id="btn1">Make An Appointment</button>
<button id="btn2">View Department</button>
</div>
</div>
</div>
</body>
</html>
First CSS File (10_1.css)

body {
margin: 0;
padding: 0;

}
#logo {
float: left;
height: 73px;
width: 100px;
margin-top:5px;
margin-left:5px;
}
.container {
/* display: flex; */
/* background-color: aqua; */
}

#logo_text {
display: inline-block;
font-size: 40px;
margin: 10px;
font-family: 'Oswald', sans-serif;
color: #1b8ee8;
margin-top: 2px;
margin-left: 17px;
}
#nav {
float: right;
margin-right: 10px;
margin-top: 10px;
}
ul {
display: flex;
}
ul li{
list-style: none;
bottom: 4px;
}
ul li a {
padding: 13px;
font-size: 14px;
margin: 5px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: bold;
border-radius: 10px;
list-style: none;
}
Second CSS File (10_2.css)

ul li :hover{
cursor: pointer;
border: 2px solid black;
background-color: rgb(0, 0, 0);
color: #90ceff;
list-style: none;

}
.center_body{
position: relative;
}
#main_body {
background-repeat: no-repeat;
width: 100%;
margin: 0%

padding: 0%;

}
.main_body {
position: relative;
text-align: center;
color: white;
}

.centered {
color: black;
position: absolute;
top: 40%;
left: 29%;
transform: translate(-50%, -50%);
text-align: justify;
font-weight: bolder;
font-size: 35px;
width: 50%;
}

#para{
font-size: 13px;
}
button{
height: 38px;
width: 145px;
}
#btn1{
color: white;
background-color: #1b8ee8;
border: 1px solid black;
}
#btn2{
background-color: rgba(255, 255, 255 ,0.5);
border: 2px solid #1b8ee8;
}
Output:
Practical No 11

Write a code to create a Registration Form. On submittingthe form, the


user should be asked to login with the new credentials usingJavaScript.

Main File

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="14.css">
<title>Registration</title>
</head>

<body>
<section class="container">
<h1>CREATE ACCOUNT</h1>
<form>
<input type="text" name="" id="name" placeholder="Your Name">
<input type="text" name="" id="email" placeholder="Your Email">
<input type="text" name="" id="password" placeholder="Password">
<input type="text" name="" id="repassword" placeholder="Re-enter Password">
</form>
<p id="tc">I agree to all statements In the <a href=""><b>Terms Of Service</b> </a></p>
<button>SIGN UP</button>
<div class="footer">
<p id="footer">
Have Already An Account?
<a href="https://www.google.com/"><b>Login Here</b></a>
</p>
</div>
</section>
</body>

</html>

CSS File (14.css)

body{
background-image: url("14.jpg");
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container{
height: 543px;
width: 550px;
background-color: white;
border-radius: 5px;
}
h1{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-top: 50px;
text-align: center;

}
input{
margin-left: 40px;
width: 75%;
height: 40px;
margin-bottom: 15px;
border: 0px solid black;
border-radius: 10px;
box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.3);
padding-left: 20px;
outline-style: none;
font-weight: bold;
}
#tc{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

/* margin-left: 15%; */
text-align: center;
font-size: 0.9rem;
}
.footer{
height: 90px;
width: 100%;
display: flex;
justify-content: center;
}
#footer{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
align-self: flex-end;
}
a{
color: black;
}

Output:
Practical No 12.
Write an HTML code to create your Institute website/Department website/
Tutorial website for specific subject. Also useJava Script for validation.
<head>
<title>Bank</title>
<link rel="stylesheet" href="14-css.css">
</head>
<body>
<div id="banner">
<div class="container1">
<img src="14-yes-bank-logo.png" alt="" id="logo">
<div id="logoName">Queen’s University</div>
</div>
</div>
<div id="bigContainer">
<div id="container1">
</div>
<div id="container1">
<div id="border">
<h2>Please fill In The Following Details...</h2>
<svg height="10" width="910">
<line x1="0" y1="0" x2="910" y2="" style="stroke:rgb(0, 0, 0);stroke-width:2" />
</svg>

<div id="form1">
<span id="fName"> <b> First Name</b> :</span> <span id="lName"> <b> Last
Name</b> :</span>
<br> <input type="text" name="" id="fname">
<input type="text" name="" id="lname">

<br> <b>Gender:</b>
<input type="radio" name="gender" id="">Male
<input type="radio" name="gender" id="">Female
<input type="radio" name="gender" id="">Others
<br><br>
<b>Date Of Birth :</b>
<br>
<label for="birthday"></label>
<input type="date" id="DOB" name="birthday">
<br><br>
<b>Citizenship No:</b>
<br>
<input type="number" name="" id="citnum">
<br>
<div>

<span id="emailTxt"> <b> Email-ID</b> </span> <span id="phoneNum"> <b>Phone


No:</b></span>
<br> <input type="text" name="" id="email">
<input type="text" name="" id="phoneNum" min="0" >
</div>
<div id="address">
<b> Address:</b><br> <input type="text" id="text2">
</div>
<label for="cars"><b> Bank Branch:</b></label>
<select id="bank" name="cars">
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Punjab">Punjab</option>
<option value="Kolkata">Kolkata</option>
</select>
<br><br>
<b>Account No:</b>
<br>
<input type="number" name="" id="accNum" min="0">
<br>
</div>
<button onclick="submit()">Submit</button>

</div>
</div>
</div>
<script src="14-js.js"></script>
</body>

<!-- -->
</html>

14-js.js
function submit(){
let email = document.getElementById("email");

if(!(email.innerText.includes("@"))){
alert("Please enter valid email");

}
}
Output

You might also like