Scribd
Upload
27 views

Kush Web

Uploaded by

Aman Parmar
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
27 views

Kush Web

Uploaded by

Aman Parmar
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/ 13

A

Practical
FileOn
Web Designing Lab
(BCA-307)

Submitted By: Submitted to:


Kush Khurana mrs Himanshi Gauri
BCA 3rd C Ass. Professor
Roll No. 1323186 MMICT&BM(MMDU)

M.M. Institute of Computer Technology & Business Management


Maharishi Markandeshwar (Deemed to be University), Mullana–Ambala
(Established under Section 3 of the UGC Act,
1956)(Accredited by NAAC with Grade ‘A++’)
Web Designing Lab(BCA-307) 1323186

Index

S.No. Program List Page No Date Sign

1. Create a web page depicting your resume using basic


HTML tags and list tags.

2. Create a format divided into 3 sections.

3. Write HTML code using Nested list.

4. Add the links in the webpage for, Play an Audio file, play a
Video file, Download an Audio file Write a program to
implement linear search.

5. Create a Menu or Table of Contents webpage. Each menu


item should load a different webpage.

6. Create a form for student registration which have all field


required for student registration.

7. Design a single-page website for a university containing a


description of the courses offered, it should also contain
some general information about the university such as its
history, the campus and its unique features the page should
be colored and each section should have a
different Color/ Background.
8. Demonstrate use of multimedia tags (Video & Audio) in
HTML document.

9. Write HTML documents using Style Sheet for Inline,


Internal and External types.
10. Create a Calculator using JS

11. WAP to display date and time using different JS date


formats.

1
Web Designing Lab(BCA-307) 1323186

PRACTICAL-1
Ques. Create a web page depicting your resume using basic HTML tags and list tags.
SOLUTION:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1><b><u>PROFILE</u></b></h1>
<b>Krishan</b>
<br>
<b>Computer application student.</b>
<br>
<b>I consider myself a responsible and orderly person.</b>
<br>
<b>I am looking forward for some word that enhances my skills and knowledge.</b>
<h2><b><u>CONTACT ME</u></b></h2>
<b>&#128222;+91 8607xxxxxx</b>
<br>
<b>&#9993;[email protected]</b>
<br>
<b>LOCATION: 1846 vishnu colony, Kurukshetra </b>
<ul>
<li><b>EDUCATION</b></li>
</ul>
<b>MAHARISHI MARKANDESHWAR(DEEMED TO BE)UNIVERSITY</b>
<br>
<b>mullana-ambala</b>
<br>

2
Web Designing Lab(BCA-307) 1323186

<SMALL>Bachelor's in computer applications in progress</SMALL>


<br>
<b>Maharana Pratap public school, Kurukshetra</b>
<br>
<small>12 , CBSE(2022-23)</small>
<br>
<ul>
<li>
<b>LANGUAGE</b>
</li>
</ul>
<ol>
<li><b>English</b></li>
<li><b>Hindi</b></li>
</ol>
<ul>
<li>
<b> COMPUTER SKILLS</b>
</li>
</ul>
<SMALL> Comupter languages such as C , C++,
HTML And Alot more
</SMALL>
<br>
<small>Slide Presentation</small>
<br>
<small>Spreadsheet</small>
</body>
</html>

3
Web Designing Lab(BCA-307) 1323186

OUTPUT:

4
Web Designing Lab(BCA-307) 1323186

PRACTICAL-2
Ques. Create a format divided into 3 sections.
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<h1>Section 1</h1>
<p>This is a content for sec1</p>
</div>
<hr>

<div>
<h1>Section 2</h1>
<p>This is a content for sec2</p>
</div>
<hr>
<div>
<h1>Section 3</h1>
<p>This is a content for sec3</p>
</div>
<hr>
</body>
</html>

5
Web Designing Lab(BCA-307) 1323186

OUTPUT:

6
Web Designing Lab(BCA-307) 1323186

PRACTICAL-3
Ques. Write HTML code using nested list.
SOLUTION:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
CODE FOR NESTED LIST...
</h1>
<ul>
<li>
science
<ul>
<li>
biology
</li>
<li>
chemistry
</li>
<li>
physics
</li>
</ul>
</li>

</ul>
<ul>

7
Web Designing Lab(BCA-307) 1323186

<li>
Social science
<ul>
<li>history</li>
<li>
civics
</li>
<li>
geography
</li>
<li>
economics
</li>
</ul>
</li>
</ul>
</body>
</html>

OUTPUT:

8
Web Designing Lab(BCA-307) 1323186

PRACTICAL-4
Ques. Add the links in the webpage for Play an audio file, play a video file, download an
audio file.
SOLUTION:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Links</title>
</head>
<body>
<h1>Media Links</h1>

<!-- Play an audio file -->


<h2>Play Audio</h2>
<audio controls>
<source src="path-to-your-audio-file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<br>

<!-- Play a video file -->


<h2>Play Video</h2>
<video controls width="500">
<source src="path-to-your-video-file.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
<br>

<!-- Download an audio file -->


<h2>Download Audio</h2>

9
Web Designing Lab(BCA-307) 1323186

<a href="path-to-your-audio-file.mp3" download>Download Audio File</a>


</body>
</html>

OUTPUT:

10
Web Designing Lab(BCA-307) 1323186

Practical-5
1. Create a Menu or Table of Contents webpage. Each menu item should
load a different webpage.
Sol:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Table of Contents</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f9f9f9;
}

h1 {
text-align: center;
}

.menu {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: white;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

ul {
list-style-type: none;
padding: 0;
}

li {
margin: 10px 0;
}

a{
text-decoration: none;
11
Web Designing Lab(BCA-307) 1323186

color: #007BFF;
font-size: 18px;
padding: 10px;
display: block;
background-color: #f1f1f1;
border-radius: 5px;
transition: background-color 0.3s ease;
}
a:hover {
background-color: #007BFF;
color: white;
}
</style>
</head>
<body>

<h1>Table of Contents</h1>

<div class="menu">
<ul>
<li><a href="page1.html">Introduction to HTML</a></li>
<li><a href="page2.html">CSS Styling Guide</a></li>
<li><a href="page3.html">JavaScript Basics</a></li>
<li><a href="page4.html">Responsive Web Design</a></li>
<li><a href="page5.html">Web Development Tools</a></li>
</ul>
</div>

</body>
</html>

OUTPUT:-

12

You might also like