Scribd
Upload
21 views18 pages

Jitendra WD

The document is a practical file for a Web Designing course at Sir Chhotu Ram Institute of Engineering & Technology, detailing various HTML projects. It includes tasks such as creating web pages with anchor tags, lists, frames, media embedding, and bio-data forms. Each task is accompanied by sample HTML code demonstrating the required functionality.

Uploaded by

as3577496
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
21 views18 pages

Jitendra WD

The document is a practical file for a Web Designing course at Sir Chhotu Ram Institute of Engineering & Technology, detailing various HTML projects. It includes tasks such as creating web pages with anchor tags, lists, frames, media embedding, and bio-data forms. Each task is accompanied by sample HTML code demonstrating the required functionality.

Uploaded by

as3577496
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/ 18

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

S.No 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="https://www.example.com" target="_blank">
Visit Google
</a>
<a href="https://www.example.com" target="_blank">
Visit Facebook
</a>
<a href="https://www.example.com" target="_blank">
Visit Instagram
</a>
<a href="https://www.example.com" target="_blank">
Visit devangspsingh.github.io
</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>B.Tech</li>
<li>M.Tech</li>
<li>B.Sc</li>
<li>B.Pharma</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="coding.jpeg" alt="coding image" width="200px"
height="200px">
<img src="cricket.jpeg" 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="https://en.wikipedia.org/wiki/Coding">Coding</a></li>
<li><a
href="https://en.wikipedia.org/wiki/Reading">Reading</a></li>
<li><a
href="https://en.wikipedia.org/wiki/Playing_guitar">Playing
Guitar</a></li>
<li><a
href="https://en.wikipedia.org/wiki/Swimming">Swimming</a></li>
<li><a
href="https://en.wikipedia.org/wiki/Hiking">Hiking</a></li>
</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="https://example.com/audio.mp3"
type="audio/mpeg">

Your browser does not support the audio element.


</audio>

</div>

<div>
<h2>Video Example</h2>
<video controls width="400px">

<source src="https://storage.googleapis.com/gtv-videos-
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="https://devangspsingh.github.io">
<img
src="https://devangspsingh.github.io/assets/main.80e4f85a.png"
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@[email protected]</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="cricket.jpeg" alt="Hobby 1">
</div>

<div class="card">
<h3>Playing football</h3>
<p>A popular team sport played with a ball.</p>
<img src="football.jpeg" 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="coding.jpeg" 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="https://en.wikipedia.org/wiki/Wi-Fi"> 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

You might also like