anchal_082750 (1)

A
PRACTICAL FILE
ON
WEB DESIGNING AND
FUNDAMENTALS LAB,
(BCA-307)
Summited By: Summited To:
Name: Sujjal Ms. Ritu Aggarwal
Roll No: 1321035 (Assistant Professor)
Class: BCA 3rd ‘A’

Practical No:1
Aim: Create a Webpage depicting your own Resume using basic HTML tags
and list tags.
Source Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<html>
<head>
<title>Resume</title>
</head>
<body>
<h1>
<p align="center"><u>C V</u></p>
</h1>
<h3><b>sujjal</b></h3>
<address>
<p>2431/3 ambala city</p>
</address>
<P>[email protected]</P>
7082026166</a>
<br>
<p><b> Qualification:</b></p>
<table border="2">
<tr align="center">
<th>S.NO.</th>
<th>Qualification</th>
<th>School/Collage</th>
<th>University/Board</th>
<th>Year of passing</th>
<th>Stream</th>
<th>Marks/CGPA</th>
</tr>
<tr align="center">
<td>1.</td>
<td>10th</td>
<td>PKR jain public school</td>
<td>CBSE</td>
<td>2019</td>
<td>All</td>
<td>89%</td>
</tr>
<tr align="center">
<td>2.</td>
<td>12th</td>
<td>PKR jain public school</td>
<td>CBSE</td>
<td>2021</td>
<td>commerce</td>
<td>87%</td>
</tr>
</table>
<p>
<p><b>Hobbies</b></p>
<ul>
<li>gaming</li>
<li>coding</li>
<li>bhangra</li>
</ul>
<p><b> Declaration</b></p>
<input type="checkbox"> I Hearebly agree that the information that i have given resume
is correct as per my best
knowledges
<p align=" right"><b>Signatcure</b></p>
</body>
</html>
Output:-
Practical No: 2
Aim: Create a format divided into 3 sections.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 1px;
padding: 0px;
box-sizing: border-box;
}
.section {
color: white;
float: left;
width: 33vw;
height: 20vh;
padding: 10px;
}
.title h2 {
text-align: center;
}
.section h2 {
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-size: 6rem;
}
p{
text-align: center;
padding: 20px;
font-size: 5rem;
}
</style>
</head>
<body>
<div class="title">
<h2>Create a format divided into three sections</h2>
<br>
</div>
<div class="row">
<div class="section" style="background-color:red;">
<h2>Section 1</h2>
<p>Hello </p>
</div>
<div class="section" style="background-color:green;">
<h2>Section 2</h2>
<p>Everyone </p>
</div>
<div class="section" style="background-color:blue;">
<h2>Section 3</h2>
<p>Good morning</p>
</div>
</div>
</body>
</html>
Output:
Practical No:3
Aim: Write HTML code using Nested list.
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Orderd / Unorderd List</title>
</head>
<body style="font-family: Arial; margin:30px " ;>
<h1 style="text-align:center;">Practical 3</h1>
<h2 style="text-align:center;">Write HTML code using Nested list.</h2>
<h3>Unorderd List</h3>
<hr>
<ul style="list-style-type:disk" ;>
<li>INDIA
<ul style="list-style-type:circle;">
<li>Micromax Informatics</li>
<li>Lava International</li>
<li>Onida Electronics</li>
<li>Intex Technologies</li>
<li>Spice Digital</li>
</ul>
</li>
<br>
<li>UNITED STATE
<ul style="list-style-type:circle" ;>
<li>Apple</li>
<li>Google</li>
<li>Motorola Mobility</li>
<li>BLU Products</li>
<li>InfoSonics</li>
</ul>
</li>
<br>
<li>CHINA
<ul style="list-style-type:circle" ;>
<li>Xiomi</li>
<li>OnePlus</li>
<li>Vivo</li>
<li>Realme</li>
<li>Honor</li>
</ul>
</li>
</ul>
<h3>Orderd List</h3>
<hr>
<ol type="1">
<li>INDIA
<ol type="A">
<li>Micromax Informatics</li>
<li>Lava International</li>
<li>Onida Electronics</li>
<li>Intex Technologies</li>
<li>Spice Digital</li>
</ol>
</li>
<br>
<li>UNITED STATE
<ol type="A">
<li>Apple</li>
<li>Google</li>
<li>Motorola Mobility</li>
<li>BLU Products</li>
<li>InfoSonics</li>
</ol>
</li>
<br>
<li>CHINA
<ol type="A">
<li>Xiomi</li>
<li>OnePlus</li>
<li>Vivo</li>
<li>Realme</li>
<li>Honor</li>
</ol>
</li>
</ol>
</body>
</html>
Output:-
Practical No:4
Aim: Add the links in the webpage for
 Play an Audio file
 Play a Video file
 Download an Audio file JavaScript program for arithmetic operations.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Audio And Video</title>
</head>
<body>
<div class="heading">
<h2 align="center">Audio tag and Video</h2>
</div>
<div class="audio">
<h2>Audio</h2>
<audio controls>
<source src="Miss_You_Ena_Sara_-_Navjeet_(DjPunjab.Com).mp3"
type="audio/mp3">
</audio>
</div>
<br>
<br>
<div class="video">
<h3>Video </h3>
<video controls>
<source
src="y2mate.com - Og Prem Dhillon Whatsapp Status Og Prem Dhillon
Status New Punjabi Songs_v720P.mp4"
type="video/mp4">
</video>
</div>
</body>
</html>
Output:

anchal_082750 (1)

Uploaded by

Copyright:

Available Formats

anchal_082750 (1)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

anchal_082750 (1)

Uploaded by

Copyright:

Available Formats

A

Summited By: Summited To:

Name: Sujjal Ms. Ritu Aggarwal

Roll No: 1321035 (Assistant Professor)

Class: BCA 3rd ‘A’

You might also like