Scribd
Upload
26 views31 pages

WD Lab - Merged

Uploaded by

rohannegi10ep
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
26 views31 pages

WD Lab - Merged

Uploaded by

rohannegi10ep
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/ 31

PRACTICAL FILE

OF
WEB DESIGNING(LAB)(UGCA1928)

SUBMITTED TO : SUBMITTED BY :

MS. RUPESH KUMAR YADAV


NAVPREET VERMA BCA-IV
2212006
TABLE OF CONTENTS
S.NO. EXPERIMENTS PAGE REMARKS
NO.
1 Create a simple HTML page to demonstrate the use of different tags 3-4

2 Design index page of a book on web designing. 5-6

3 Display Letter Head of your college on a web page. 7

4 Create a Hyperlink to move around within a single page rather than to 8-9
load another page.
5 Display letter using different Text formatting Tags. 10-11

6 Design Time Table of your department and highlights of most important 12-15
periods.

7 Use Tables to provide layout to your web page. 16-17

8 Divide a web page vertically and horizontally and display logo of your 18
college in left pane and logo of university in right pane.
9 Create a student Bio- Data. 19-20

10 Design front page of hospital with different style sheets. 21-24

11 Design a web page and display two different pages at a time. 25

12 Write a program to create a login form. On submitting the form, the user 26-31
should get navigated to a profile page using JavaScript.
1. Create a simple HTML page to demonstrate the use of different tags.

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<header>
<h1>Welcome!</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
</header>

<main>
<section id="about">
<h2>About Us</h2>
<p>We create beautiful and functional websites for our clients.</p>
</section>

<section id="services">
<h2>Our Services</h2>
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>SEO</li>
</ul>
</section>

<section id="contact">
<h2>Contact Us</h2>
<form>
<label>Name:</label>
<input type="text" name="name"> <br> <br>
<label>Email:</label>
<input type="email" name="email"> <br> <br>
<label>Message:</label>
<textarea name="message"></textarea> <br> <br>

3
<input type="submit" value="Submit"> <br>
</form>
</section>
</main>

<footer>
<p>&copy; 2023 Harmeet Singh. All rights reserved.</p>
</footer>
</body>
</html>

4
2. Display index page of a book on web designing.

<!DOCTYPE html>
<html>
<head>
<title>Web Designing Book - Index Page</title>
</head>
<body>
<h1>Web Designing Book</h1>
<table border="1" cellpadding="15">
<thead>
<tr>
<th>Chapter</th>
<th>Title</th>
<th>Page</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Internet Basics</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>HTML Basics</td>
<td>15</td>
</tr>
<tr>
<td>3</td>
<td>CSS Basics</td>
<td>35</td>
</tr>
<tr>
<td>4</td>
<td>Responsive Design</td>
<td>57</td>
</tr>
<tr>
<td>5</td>
<td>User Experience Design</td>
<td>83</td>
</tr>
<tr>

5
<td>6</td>
<td>Advanced CSS Techniques</td>
<td>107</td>
</tr>
<tr>
<td>7</td>
<td>JavaScript Basics</td>
<td>139</td>
</tr>
<tr>
<td>8</td>
<td>Advanced JavaScript </td>
<td>167</td>
</tr>
</tbody>
</table>
</body>
</html>

6
3. Display Letter Head of your college on a web page.
<html>

<head>
<title>

Head Letter
</title>
</head>

<body>
<image src="pics/gnimt.png"width=100 align="left">

<center><font color="brown" size="6"><b>Guru Nanak Institute of


Management And Technology</b></font>
<br>
Gujarkhan Campus, Gujarkhan Road, Model Town, Ludhiana 141002(India)

<br>
<font color="green">
(An AICTE approved Institute affiliated with IKG PTU, Jalandhar)

<br>
(Granded Punjab A++ Institute)</font>
</center>

<hr size="2" color="brown">


<font color="Green">Ref.:
<div style="text-align:right">Date.: </div></font>
</body>
</html>

7
4. Create a Hyperlink to move around within a single page rather than to
load another page.
<!DOCTYPE html>
<html lang="en">
<head>
<style>

ol li {

padding-bottom: 20px;
}
img{
height: 200px;
width: 200px;
}
</style>

</head>
<body>
<ul>
<li><a href="#p1">Go To Image 1</a></li>
<li><a href="#p2">Go To Image 2</a></li>

<li><a href="#p3">Go To Image 3</a></li>


</ul>

<ol>
<li id="p1"><img src="/pics/pic1.jpg" alt="/"></li>
<li id="p2"><img src="/pics/pic2.jpg" alt="/"></li>
<li id="p3"><img src="/pics/pic3.jpg" alt="/"></li>
</ol>
</body>

</html>

8
9
5. Display letter using different Text formatting Tags
<!DOCTYPE html>

<html>
<head>

<title>Letter Example</title>
</head>
<body>
<p>

<span style="color: red">GNIMT</span> <br />


Model Town <br />

Ludhiana <br />


</p>
<h2>Dear Priyanka,</h2>
<p>

<strong>I hope this letter finds you well.</strong>


<em>I wanted to thank you for your</em> <br />
<u> help with the project last week.</u>

<s>It was greatly appreciated</s>.


</p>
<p>
As you know, we have a <mark>meeting</mark> coming up next
<abbr title="Tuesday">Tues</abbr> to discuss the budget for the next
quarter. <br />
<cite> I'm looking forward to your input on this matter. </cite>
</p>
<p>
<code>Once again, thank you for your assistance and hard work.</code>

<kbd> I look forward to seeing you next week. </kbd>


</p>

10
<p>Sincerely,</p>
<p>Harmeet Singh</p>
</body>
</html>

11
6. Design Time Table of your department and highlights of most important
periods.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>

</head>
<style>
body{
text-align: center;
}
</style>

<body>
<P> <strong>Time Table of BCA 4</strong> </P>
<table border="1" cellspacing="0" width="100%">
<tr>

<th>Timmings</th>
<th>9:15-10:00</th>
<th>10:00-10:45</th>

<th>10:45-11:30</th>
<th>11:30-12:15</th>
<th>12:15-1:00</th>
<th>R</th>
<th>1:30-2:15</th>

<th>2:15-3:00</th>
</strong>
</tr>

<tr>
<td><strong>MONDAY</strong></td>

12
<td>Software Engineering</td>
<td>OS</td>
<td>DBMS</td>
<td colspan="2">Web Designing Lab</td>

<th>E</th>
<td>Web Designing</td>
<TD></TD>

</tr>
<tr>
<td><strong>TUESDAY</strong></td>
<td>Software Engineering</td>
<td>OS</td>

<td>DBMS</td>
<td colspan="2">Web Designing Lab</td>
<th>C</th>
<td>Web Designing</td>
<TD></TD>

</tr>
<tr>

<td><strong>WEDNESSDAY</strong></td>
<td>Software Engineering</td>
<td>Web Designing</td>
<td>OS</td>
<td colspan="2">OS Lab</td>
<th>C</th>

<td>Mentoring & PD</td>


<td>DBMS</td>
<TD></TD>
</tr>

13
<tr>
<td><strong>THURSDAY</strong></td>
<td>Software Engineering</td>
<td>Web Designing</td>

<td>OS</td>
<td colspan="2">OS Lab</td>
<th>E</th>

<td>Mentoring & PD</td>


<td>DBMS</td>
<TD></TD>
</tr>
<tr>

<td><strong>FRIDAY</strong></td>
<td>Web Designing</td>
<td>Software Engineering</td>
<td>OS</td>
<td colspan="2">DBMS Lab</td>

<th>S</th>
<td>Tutorial</td>

<td>DBMS</td>
<TD></TD>
</tr>
<tr>
<td><strong>FRIDAY</strong></td>
<td>Web Designing</td>

<td>Software Engineering</td>
<td>OS</td>
<td colspan="2">DBMS Lab</td>
<th>S</th>

14
<td>Tutorial</td>
<td>DBMS</td>
<TD></TD>
</tr>

</table>
</body>
</html>

15
7. Use Tables to provide layout to your web page.
<!DOCTYPE html>

<html>
<head>

<title>Full Page Table Example</title>


<style>
body {

margin: 0;
padding: 0;
}
table {
width: 100%;

height: 100vh;
border-collapse: collapse;
}
td {

padding: 20px;
text-align: center;
}
.col1 {
background-color: aqua;
}
.col2 {
background-color: palevioletred;

}
</style>
</head>

<body>
<table>

16
<tr>
<td class="col1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla ratione
vel quo autem quod voluptates aliquam tenetur debitis error fuga.</td>

<td class="col2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla ratione
vel quo autem quod voluptates aliquam tenetur debitis error fuga.</td>
</tr>
<tr>

<td class="col2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla ratione
vel quo autem quod voluptates aliquam tenetur debitis error fuga.</td>

<td class="col1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla ratione
vel quo autem quod voluptates aliquam tenetur debitis error fuga.</td>
</tr>
</table>
</body>
</html>

17
8. Divide a web page vertically and horizontally and display logo of your college
in left pane and logo of university in right pane.
<html>
<head>

<title>
Document
</title>

</head>
<frameset cols="50%, 50%" rows="50%, 50%" >
<frame name="top" src="/pics/gnimt.png">
<frame name="bottom" src="/pics/ptu.png">
</frameset>

</html>

18
9. Create a student Bio- Data.
<!DOCTYPE html>

<html>
<head>

<title>Table Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;

max-width: 500px;
margin: auto;
}

th, td {
padding: 8px;

text-align: center;
border: 1px solid black;
}
</style>

</head>
<body>
<table>
<tr>
<th colspan="2">Particulars</th>

</tr>

<tr>
<td>Name</td>
<td>Harmeet Singh</td>
</tr>
<tr>

19
<td>Class</td>
<td>BCA - 4</td>
</tr>
<tr>

<td>Roll no</td>
<td>2112118</td>
</tr>

<tr>
<td>Father's Name</td>
<td>Gurpreet Singh</td>
</tr>
<tr>

<td>Mother,s Name</td>
<td>Parmjit Kaur</td>
</tr>
<tr>
<td>D.O.B.</td>

<td>17-Feb-2003</td>
</tr>

</table>
</body>
</html>

20
10. Design front page of hospital with different style sheets.
<html>

<head>
<style>

*{
padding: 0;
margin: 0;
}

.navbar {
display: flex;

padding: 10px;
justify-content: space-evenly;

background-color: white;
width: 100%;
}
ul {

list-style: none;
display: flex;
}
a{

text-decoration: none;
font-size: 16px;
color: black;

font-family:Verdana, Geneva, Tahoma, sans-serif;


margin: 16px;

}
img {
height: 50px;
}

21
button{
margin-left: 20px;

padding: 15px;
border-radius: 5px;

font-size: 16px;
text-align: center;
}
.blue-button {

background-color: #0072c6;
color: white;

border: none;
}

.white-button{
background-color: transparent;
border: 2px solid #0072c6;

color: #0072c6;
}
.home{

background: linear-gradient(#00519d91, #ffffff6e), url("pics/medical.jpg");


height: 100vh;
background-size: cover;

text-align: center;
position: fixed;
}
h1{

font-size: 40px;
color: white;

margin-top: 150px;
}

22
p{
font-size: 26px;

color: white;
}
</style>

</head>
<body>
<div class="navbar">
<img src="/pics/hospital_logo.png" alt="/" />

<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>About</li></a>

<a href="#"><li>Service</li></a>
<a href="#"><li>Pricing</li></a>
<a href="#"><li>Our Departments</li></a>
<a href="#"><li>Contact</li></a>
</ul>
<button class="blue-button">Make an Appointment</button>

</div>
<div class="home">
<div class="content">
<h1>
We Care For Your Health Every Moment.
</h1>

<br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque laudantium
quibusdam unde iste quidem quia illum dolorum similique, ex reprehenderit. Autem
cumque ipsum qui libero quos vitae possimus placeat architecto.</p>
<br>
<button class="blue-button" style="background-color: #0095ff;">Get Started</button>

23
<button class="white-button">Contact Us</button>
</div>
</div>
</body>

</html>

24
11. Design a web page and display two different pages at a time.
<html>

<head>
<title>

Document
</title>
</head>

<body>
<iframe src="/7.html" style="height: 500px; width: 600px;"></iframe>

<iframe src="/9.html" style="height: 500px; width: 600px;"></iframe>


</body>
</html>

25
12. Write a program to create a login form. On submitting the form, the user
should get navigated to a profile page using JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login Form</title>

<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.login-box {
width: 400px;
background-color: #fff;
margin: 80px auto;

border-radius: 5px;
padding: 20px;

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);


}
h2 {

text-align: center;
color: #333;
}
label {

display: block;
font-weight: bold;
margin-bottom: 5px;

}
input[type="text"],

26
input[type="password"] {
width: 100%;

padding: 10px;
border-radius: 3px;
border: none;
margin-bottom: 20px;
box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.1);

}
button[type="submit"] {

background-color: #4CAF50;
color: #fff;

border: none;
padding: 10px 32px;

border-radius: 3px;
}
</style>
</head>
<body>
<div class="login-box">

<h2>Login Form</h2>
<form id="loginForm">
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Enter your
username">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your
password">
<button type="submit">Login</button>

</form>
</div>

27
</body>
<script>

document.getElementById("loginForm").addEventListener("submit", function(event){
event.preventDefault();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username === "myusername" && password === "mypassword") {

window.location.href = "profile.html";

} else {
alert("Invalid username or password");
}
});

</script>
</html>

28
<!DOCTYPE html>
<html>
<head>
<title>Profile Page</title>

<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;

}
.profile {

max-width: 800px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
display: flex;

flex-direction: column;
align-items: center;
}

h1 {
color: #333;
margin-bottom: 20px;
}

.profile-picture {
width: 200px;
height: 200px;
border-radius: 50%;

background-color: #ccc;

29
margin-bottom: 20px;
background-image: url("https://www.w3schools.com/howto/img_avatar.png");

background-size: cover;
background-position: center;
}
.profile-info {
display: flex;

flex-direction: column;
align-items: center;
text-align: center;

}
.profile-info p {
margin-bottom: 10px;
}
.button {

background-color: #4CAF50;
color: #fff;

border: none;
padding: 10px 20px;
border-radius: 3px;
margin-top: 20px;
font-size: 16px;
}
</style>

</head>
<body>
<div class="profile">

<div class="profile-picture"></div>
<div class="profile-info">

30
<h1>Welcome back!</h1>
<p>You are now logged in to your profile. Here's some information about you:</p>
<p><strong>Name:</strong> Harmeet Singh</p>
<p><strong>Email:</strong> [email protected]</p>

<p><strong>Age:</strong> 20</p>
<button class="button">Logout</button>
</div>

</div>
</body>
</html>

31

You might also like