SIR CHHOTU RAM INSTITUTE OF
ENGINEERING & TECHNOLOGY
Practical File
on
Web Designing
Branch – Computer Science / 3rd Semester
Session: 2023 - 2024
––––––
Submitted By: Submitted to:
Jitendra Kumar Er. Amit Sharma
Roll no. (100230140) (Assistant professor)
Table of Contents
[Link] Content Page No.
1. Create a web page using Anchor tag with its 1
attributes for external links.
2. Create a web page, showing an ordered list of all 2
second semester courses
3. Create a web page, showing an unordered list of 3
names of all the Programs (Branches) in your
institution.
4. WAP in html to create a webpage with four frames 4-6
(Picture, table, list hyperlink, and).
5. Embed Audio and Video into your HTML web 7-8
page.
6. Insert an image and create a link such that clicking 9
on image takes user to other page.
7. WAP in html to design a Bio-Data 10-11
8. Create table in HTML with Dummy Data 12-13
9. WAP in html to create a webpage to show different 14-15
hobbies.
10. Create links on the words e.g. ―Wi-Fi and ―LAN‖ 16
to link them to Wikipedia pages
1. Create a web page using Anchor tag with its attributes for external links.
<html>
<head>
<title>Practical 1</title>
</head>
<body>
<h1>Practical 1 Using Anchor Tags to link to external
website</h1>
<div style="display: flex; flex-direction: column;">
<a href="[Link] target="_blank">
Visit Google
</a>
<a href="[Link] target="_blank">
Visit Facebook
</a>
<a href="[Link] target="_blank">
Visit Instagram
</a>
<a href="[Link] target="_blank">
Visit [Link]
</a>
</div>
</body>
</html>
1
2. Create a web page, showing an ordered list of all second semester courses.
<html>
<head>
<title>Second Semester Courses</title>
</head>
<body>
<h1>Second Semester Courses</h1>
<ol>
<li>Course 1 Web Design</li>
<li>Course 2 Data Structures</li>
<li>Course 3 COA</li>
<li>Course 4 Discrete Structures and Thoery of Logic</li>
<li>Course 5 Digital Electronics</li>
</ol>
</body>
</html>
2
3. Create a web page, showing an unordered list of names of all the
Programmes (Branches) in your institution.
<html>
<head>
<title>Programmes in Institution</title>
</head>
<body>
<h1>Programmes in Institution</h1>
<ul>
<li>[Link]</li>
<li>[Link]</li>
<li>[Link]</li>
<li>[Link]</li>
</ul>
</body>
</html>
3
4. WAP in html to create a webpage with four frames (Picture, table, list, and
hyperlink).
<html>
<head>
<title>Webpage with Frames</title>
</head>
<style>
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.frame {
min-width: 400px;
border-radius: 20px;
padding: 20px;
border: 2px;
border-style: solid;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
h2 {
font-family: Arial, sans-serif;
font-size: 20px;
color: #333;
}
th,
td {
padding: 10px;
text-align: left;
border: 1px solid black;
}
th {
background-color: #f2f2f2;
}
</style>
4
<body>
<h1 style="text-align: center;">Hobbies of mine</h1>
<main class="container">
<section class="frame">
<h2>As an image</h2>
<img src="[Link]" alt="coding image" width="200px"
height="200px">
<img src="[Link]" alt="cricket image"
width="200px" height="200px">
</section>
<section class="frame">
<h2>As a table</h2>
<table>
<tr>
<th>Serial Number</th>
<th>Title</th>
<th>How much I love it</th>
</tr>
<tr>
<td>1</td>
<td>Coding</td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td>Reading</td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>Playing Guitar</td>
<td> </td>
</tr>
</table>
</section>
<section class="frame">
<h2>As a list</h2>
<ul>
<li>Coding</li>
<li>Reading</li>
<li>Playing Guitar</li>
<li>Swimming</li>
<li>Hiking</li>
</ul>
</section>
<section class="frame">
<h2>As hyperlinks</h2>
5
<ul>
<li><a
href="[Link]
<li><a
href="[Link]
<li><a
href="[Link]
Guitar</a></li>
<li><a
href="[Link]
<li><a
href="[Link]
</ul>
</section>
</main>
</body>
</html>
6
5. . Embed Audio and Video into your HTML web page.
<html>
<head>
<title>Media</title>
</head>
<body>
<h1>Media</h1>
<div>
<h2>Audio Example</h2>
<audio controls>
<source src="[Link]
type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div>
<h2>Video Example</h2>
<video controls width="400px">
<source src="[Link]
bucket/sample/BigBuckBunny.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</div>
</body>
</html>
7
8
6. Insert an image and create a link such that clicking on image takes user to
other page.
<html>
<head>
<title>Image</title>
</head>
<body>
<h1>Image</h1>
<div>
<h2>Image Insertion</h2>
<a href="[Link]
<img
src="[Link]
alt="Image" width=”500px”>
</a>
</div>
</body>
</html>
9
7. Insert an image and create a link such that clicking on image takes user to
other page.
<html>
<head>
<title>Bio-Data</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
.personal-info {
margin-bottom: 20px;
}
.personal-info p {
margin: 5px 0;
}
.education {
margin-bottom: 20px;
}
.education h3 {
margin-bottom: 5px;
}
.skills {
margin-bottom: 20px;
}
.skills ul {
list-style-type: none;
padding: 0;
}
.skills li {
margin-bottom: 5px;
}
</style>
</head>
<body>
<h1>Bio-Data</h1>
<div class="personal-info">
<h2>Personal Information</h2>
<p>Name: Chaman Prash</p>
<p>Date of Birth: January 1, 1990</p>
<p>Address: SCRIET MEERUT</p>
<p>Email: Chaman@prash@[Link]</p>
<p>Phone: 123-456-7890</p>
</div>
10
<div class="education">
<h2>Education</h2>
<h3>AALO TECH UNIVERSITY</h3>
<p>Course: Bachelor of Science</p>
<p>Year of Completion: 2022</p>
</div>
<div class="skills">
<h2>Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Python</li>
</ul>
</div>
</body>
</html>
11
8. Create a table ion html with dummy data.
<html>
<head>
<title>Student Record</title>
</head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
tr:hover {
background-color: #f5f5f5;
}
</style>
<body>
<h1>Student Record</h1>
<table>
<tr>
<th>Registration No</th>
<th>Student Name</th>
<th>Year Semester</th>
<th>Date of Admission</th>
</tr>
<tr>
<td>67890</td>
<td>Chota Bheem</td>
<td>2022 - Semester 1</td>
<td>2022-02-01</td>
</tr>
<tr>
<td>98765</td>
<td>Doraemon</td>
<td>2022 - Semester 1</td>
<td>2022-02-15</td>
</tr>
12
<tr>
<td>24680</td>
<td>Ninja Hattori</td>
<td>2022 - Semester 1</td>
<td>2022-03-01</td>
</tr>
</table>
</body>
</html>
13
9. WAP in html to create a webpage to show different hobbies..
<html>
<head>
<title>My Hobbies</title>
<style>
.card {
display: inline-block;
width: 200px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 10px;
}
.card img {
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<h1>My Hobbies</h1>
<div class="card">
<h3>Playing cricket</h3>
<p>A fun sport played with a bat and ball.</p>
<img src="[Link]" alt="Hobby 1">
</div>
<div class="card">
<h3>Playing football</h3>
<p>A popular team sport played with a ball.</p>
<img src="[Link]" alt="Hobby 2">
</div>
<div class="card">
<h3>Coding</h3>
<p>You should know it if you want to be my friend.</p>
<img src="[Link]" alt="Hobby 3">
</div>
</body>
</html>
14
15
10. Create links on the words e.g. ―Wi-Fi and ―LAN‖ to link them to
Wikipedia pages.
<html>
<head>
<title>Wifi</title>
</head>
<body>
<h1>More about Wifi</h1>
<p>
<a href="[Link] WiFi</a>
is a wireless networking technology that allows devices to
connect to the internet or communicate with eachother
without the need for wired connections.
</p>
</body>
</html>
16