Prac cal – 1
Aim :- Write HTML code to develop a web page with red back ground tle
“My first page” & give your details.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First page</title>
</head>
<body bgcolor="#8CFFDA">
<h3>Hello This is a Practical 1 of Subject WD.</h3>
</body>
</html>
Prac cal – 2
Aim :- Create a page to show different attributes of font formatting tags.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Font tags </title>
</head>
<body bgcolor="#ECE7E4">
<font size="5">Web Development</font>
<br>
<font size="10" color="red">Web Development</font>
<br>
<font size="15" color="green" face="cursive">
Web Development </font>
<br>
<font size="20" color="blue" face="fantasy">
Web Development </font>
</body>
</html>
Prac cal – 3
Aim :- Write HTML document which display image in center and use link.
<html lang="en">
<head>
<title>Image tag</title>
</head>
<body>
<center>
<a href="https://www.mercedes-
benz.co.in/passengercars/models/suv/g-class/overview.html">
<img src="https://www.mercedes-
benz.co.in/content/india/en/passengercars/models/suv/g-
class/overview/_jcr_content/root/responsivegrid/tabs_573903383_co
py/tabitem/highlight/slider/image_copy_186896078_122130157.compon
ent.damq5.3376226764555.jpg/cavansite_blue_metallic.jpg"
width="550px" height="300px" alt="G-wagon">
</a>
</center>
</body>
</html>
Prac cal – 4
Aim :- Write HTML document using different character en es.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Character entities</title>
</head>
<body bgcolor = "#ECFFE6">
<center>
<table border=2>
<tr>
<th align="center">Result</th>
<th align="center">Description</th>
<th align="center">Entity Name</th>
</tr>
<tr>
<td> </td>
<td>non-breaking space</td>
<td> </td>
</tr>
<tr>
<td><</td>
<td>less than</td>
<td><</td>
</tr>
<tr>
<td>></td>
<td>greater than</td>
<td>></td>
</tr>
<tr>
<td>&</td>
<td>amperand</td>
<td>&</td>
</tr>
<tr>
<td>¢</td>
<td>cent</td>
<td>¢</td>
</tr>
<tr>
<td>£</td>
<td>pound</td>
<td>£</td>
</tr>
<tr>
<td>¥</td>
<td>yen</td>
<td>¥</td>
</tr>
<tr>
<td>€</td>
<td>euro</td>
<td>€</td>
</tr>
<tr>
<td>§</td>
<td>section</td>
<td>§</td>
</tr>
<tr>
<td>©</td>
<td>copyright</td>
<td>©</td>
</tr>
<tr>
<td>®</td>
<td>register trademark</td>
<td>®</td>
</tr>
<tr>
<td>™</td>
<td>trademark</td>
<td>™</td>
</tr>
</table>
</center>
</body>
</html>
Prac cal – 5
Aim-1 :- Create a webpage showing an ordered list of your five friends with
different type.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Order List</title>
</head>
<body bgcolor="#E2BFD9">
<div>
<ol type="1">
<li>Daksh</li>
<li>Tirth</li>
<li>Dhruvi</li>
<li>Trupt</li>
<li>Devansh</li>
</ol>
</div>
<div>
<ol type="i">
<li>Noopur</li>
<li>Krupal</li>
<li>Jeel</li>
<li>Heet</li>
<li>Dhariya</li>
</ol>
</div>
<div>
<ol type="I">
<li>Janvi</li>
<li>Aaryan</li>
<li>Jay</li>
<li>Daksh</li>
<li>Fenil</li>
</ol>
</div>
<div>
<ol type="a">
<li>Prachi</li>
<li>Urvish</li>
<li>Priyam</li>
<li>Dharshit</li>
<li>Dev</li>
</ol>
</div>
<div>
<ol type="A">
<li>Zarana</li>
<li>Ketul</li>
<li>Arya</li>
<li>Janu</li>
<li>Chaitry</li>
<li>Panchul</li>
</ol>
</div>
</body>
</html>
Aim-2 :- Display restaurant menu with different category with their items
using <DL> <DT> <DD> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Definition List</title>
</head>
<body bgcolor="#DFD3C3">
<div>
<h4>
<i>A Definition List:</i>
</h4>
</div>
<div>
<dl>
<dt>
<b><i>Welcome drink</i></b>
</dt>
<dd>Mojito-Mint</dd>
<dt>
<b><i>Starter</i></b>
</dt>
<dd>PaneerChilli</dd>
<dd>Kebab</dd>
<dd>Mexican-Rice</dd>
<dt>
<b><i>Main Course</i></b>
</dt>
<dd>Casturd-Basundi</dd>
<dd>Veggies-Bowl</dd>
<dd>Paneer-Angara</dd>
<dd>Cultured-Undhiyu</dd>
<dd>Chinesse-StuffRoll</dd>
<dd>Garlic-Naan</dd>
<dd>Butter-Rotti</dd>
<dd>Dal-Tadka and Jeera-Rice</dd>
<dd>Fried-Crunchies</dd>
<dt>
<b><i>Dessert</i></b>
</dt>
<dd>Banarsi-Pan</dd>
<dd>Belgian Dark Chocolate</dd>
</dl>
</div>
</body>
</html>
Aim-3 :- Display and unordered list of name of your five friends with
different type.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Unorder List</title>
</head>
<body bgcolor="#EADBC8">
<div>
<ul type="disk">
<li>Daksh</li>
<li>Tirth</li>
<li>Dhruvi</li>
<li>Trupt</li>
<li>Devansh</li>
</ul>
</div>
<div>
<ul type="square">
<li>Noopur</li>
<li>Krupal</li>
<li>Jeel</li>
<li>Heet</li>
<li>Dhariya</li>
</ul>
</div>
<div>
<ul type="circle">
<li>Janvi</li>
<li>Aaryan</li>
<li>Jay</li>
<li>Daksh</li>
<li>Fenil</li>
</ul>
</div>
</body>
</html>
Prac cal – 6
Aim-1 :- Write a HTML code to create atable.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table</title>
</head>
<body bgcolor="#FFE8C8">
<table border="4">
<tr>
<th align="center">Sr No.</th>
<th align="center">Name</th>
<th align="center">Enrollment</th>
<th align="center">Email</th>
</tr>
<tr>
<td>01</td>
<td>Khushi</td>
<td>200030213467</td>
<td>[email protected]</td>
</tr>
<tr>
<td>02</td>
<td>Devangh</td>
<td>200030213479</td>
<td>[email protected]</td>
</tr>
<tr>
<td>03</td>
<td>Sunaam</td>
<td>200030213525</td>
<td>[email protected]</td>
</tr>
<tr>
<td>04</td>
<td>Dhruvi</td>
<td>200030213738</td>
<td>[email protected]</td>
</tr>
</table>
</body>
</html>
Aim-2 :- Write a HTML code to create a Nestedtable.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Nested table</title>
</head>
<body bgcolor="#FFFBDA">
<table border="3">
<tr>
<td> Cell One </td>
<td> Cell Two </td>
</tr>
<tr>
<td>
Cell Three
<table border="2">
<tr>
<td>Cell one</td>
<td>Cell two</td>
</tr>
<tr>
<td>Cell three</td>
<td>Cell four</td>
</tr>
</table>
</td>
<td> Cell Four </td>
</tr>
</table>
</body>
</html>
Prac cal – 7
Aim :- Create a simple HTML form for Login in Div.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login Form</title>
</head>
<body bgcolor="#B3C8CF">
<form>
<div align = "center">
<table border="3">
<tr>
<th colspan=2>LOG IN FORM</th>
</tr>
<tr>
<td>Login Id </td>
<td>
<input type="text" placeholder="Login
Id">
</td>
</tr>
<tr>
<td>Password </td>
<td>
<input type="password"
placeholder="Password">
</td>
</tr>
<tr>
<th colspan=2>
<input type="submit">
</th>
</tr>
</table>
</div>
</form>
</body>
</html>
Prac cal – 8
Aim :- Create a simple HTML form for Registra on in Table.
<!DOCTYPE html>
<html lang="en">
<head>
<title>table</title>
</head>
<body bgcolor="#F4D9D0">
<form>
<table align="center">
<tr>
<td colspan="2" align="center">Registration
Form</td>
</tr>
<tr>
<td>Name:</td>
<td>
<input type="text" name="fname"
placeholder="First name">
</td>
<td><input type="text" name="lname"
placeholder="Last name"></td>
</tr>
<tr>
<td>Address:</td>
<td>
<textarea rows="4" cols="30"></textarea>
</td>
</tr>
<tr>
<td>Contact Number:</td>
<td><input type="text" name="phone"
placeholder="Enter your number" maxlength=10></td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type="text"
name="email" placeholder="Enter your ID">
</td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password"
value=""></td>
</tr>
<tr>
<td>Confirm Password:</td>
<td><input type="password" name="cPassword"
value=""></td>
</tr>
<tr>
<td>Date ofBirth:</td>
<td>
<input type="date" name="DOB">
</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="m1"
value="male">Male
<input type="radio" name="m1"
value="female">Female
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit">
</td>
</tr>
</table>
</form>
</body>
</html>
Prac cal – 9
Aim :- Create a simple HTML form for feedback.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Feedback Form</title>
</head>
<body bgcolor="#F1EAFF">
<form>
<div align = "center">
<table border="3">
<tr>
<th colspan=2>FEEDBACK FORM</th>
</tr>
<tr>
<td>Name</td>
<td>
<input type="text" name="fname"
placeholder="Full name">
</td>
</tr>
<tr>
<td>Email Id</td>
<td>
<input type="text" placeholder="E-mail Id">
</td>
</tr>
<tr>
<td>Contact no</td>
<td>
<input type="text" placeholder="Phone no. ">
</td>
</tr>
<tr>
<td>Feedback </td>
<td>
<textarea name="feedback" rows="5"
cols="20"></textarea>
</td>
</tr>
<tr>
<th colspan=2>
<input type="submit">
</th>
</tr>
</table>
</div>
</form>
</body>
</html>
Prac cal – 10
Aim :- Create a 3 page website for an organiza on.
prc10_home.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="prc10.css">
<title>Home</title>
</head>
<body>
<div class="topnav">
<a class="active" href="prc10_home.html">Home</a>
<a href="prc10_service.html">Service</a>
<a href="prc10_contact.html">Contact</a>
</div>
<div style="padding-left:16px">
<h2>Home Page</h2>
</div>
</body>
</html>
prc10_service.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="prc10.css">
<title>Service</title>
</head>
<body>
<div class="topnav">
<a href="prc10_home.html">Home</a>
<a class="active" href="prc10_service.html">Service</a>
<a href="prc10_contact.html">Contact</a>
</div>
<div style="padding-left:16px">
<h2>Service Page</h2>
</div>
</body>
</html>
prc10_contact.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="prc10.css">
<title>Contact</title>
</head>
<body>
<div class="topnav">
<a href="prc10_home.html">Home</a>
<a href="prc10_service.html">Service</a>
<a class="active" href="prc10_contact.html">Contact</a>
</div>
<div style="padding-left:16px">
<h2>Contact Page</h2>
</div>
</body>
</html>
prc10.css
.topnav {
overflow: hidden;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #60bcf1;
color: white;
}
Prac cal – 11
Aim :- Create a sample product website.
prc11.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="prc10.css">
<link rel="stylesheet" href="prc11.css">
<title>Home</title>
</head>
<body bgcolor="#EEEEEE">
<div class="topnav">
<a class="active" href="prc11.html">Home</a>
<a href="">Service</a>
<a href="">Contact</a>
</div>
<div class="card-container">
<div class="card">
<img src="vegetable.jpg" alt="vegetable">
<h1>vegetables</h1>
<p>Veggies: Nature's Superheroes</p>
<p><button>Add to Cart</button></p>
</div>
<div class="card">
<img src="plants.jpg" alt="plants">
<h1>Plants</h1>
<p>Plant a green tree and live younger</p>
<p><button>Add to Cart</button></p>
</div>
<div class="card">
<img src="fruits.jpg" alt="fruit">
<h1>Fruits</h1>
<p>Fruit Power: Fuel for Life</p>
<p><button>Add to Cart</button></p>
</div>
</div>
</body>
</html>
prc11.css
.card-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding-left: 16px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: 16px;
text-align: center;
font-family: Arial, sans-serif;
position: relative;
}
.card img {
width: 100%;
}
.card button {
border: none;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
width: 100%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}
Prac cal – 12
Aim :- Create a webpage using frame, nested frame & inline frame.
<!DOCTYPE html>
<html>
<head>
<title>A frameset Tag</title>
</head>
<frameset cols="20%,60%,20%">
<frameset rows="*,400">
<frame src="prc1.html">
<frame src="prc2.html">
</frameset>
<frame src="prc3.html">
<frame src="prc7.html">
</frameset>
</html>
