Practical – 1
Aim: Use the following tags with their attributes as mentioned to
create the HTML page: html, head, title, body, bgcolor, text, font,
color, p, tt, em, b, i, u, pre, sub, sup, h1 to h6, align, hr, size, img,
src, alt, width, height.
Code:
<html>
<head>
<title>GAME WORLD</title>
<style>
body
{
background-color: cyan;
}
</style>
</head>
<body>
<p><b>HEYY!!</b></p>
<hr style="width:50%;text-align:left;margin-left:0">
<p><i>GAMERS</i></p>
<p style="background-color:red">LISTS:</p>
<p><em>ABOVE</em> 100GB</p>
<p><b>BELOW</b><i>100GB</i></p>
<p><u>CLICK HERE</u></p>
<pre>CALL OF DUTY</pre>
<sub>GTA V</sub>
<sup>JUST CAUSE</sup>
<h1>DHRUV</h1>
<h2>DHRUV</h2>
Web Designing (IT4014)
<h3>DHRUV</h3>
<h4>DHRUV</h4>
<h5>DHRUV</h5>
<h6>DHRUV</h6>
<p align="left"> Left align Side </p>
<p align="Right"> Right align Side <br> <img style="height: 30%;width: 30%;"
src="header2.gif" alt="GAME WORLD" width="500" height="333"> </p>
</body>
</html>
Output:
Web Designing (IT4014)
Practical – 2
Aim: Introduce HTML and its basic tags and write a HTML code to
display the given list and hyperlink using following tags and
attributes: li, ol, ul, dl, type, a, href, target.
Code:
<html>
<body>
<h1>Restaurant</h1>
<p>The ol element Hot Breverages ordered list:</p>
<ol>
<li>TEA</li>
<li>COFFEE</li>
<li>LATTE</li>
</ol>
<p>The ul element defines an unordered list:</p>
<ul>
<li>COFFEE</li>
<li>TEA</li>
<li>LATTE</li>
</ul>
<dl>
<dt>COFFEE</dt>
<dd>Black hot drink</dd>
<dt>TEA</dt>
<dd>Brown Hot drink</dd>
<dt>LATTE</dt>
<dd>Brown cold drink</dd>
<h3>FILTER</h3>
</dl>
Web Designing (IT4014)
<form action="#" method="get">
DRINKS:<input type="text" name="uname">
<a href="https://www.youtube.com/watch?v=-eW8e6GJPaY" target="_blank">Visit
Youtube</a></p>
</form>
</body>
</html>
Output:
Web Designing (IT4014)
Practical – 3
Aim: Write a HTML code to display the given table using following
tags and attributes: table, tr, td, border, th, colspan, rowspan,
cellpadding, cellspacing, vspace, hspace, caption.
Code:
1:30 pm</td>
<th colspan="6">BREAK</th>
</tr> <html>
<head>
<style>
table, th, td
{
border: 1px solid black;
border-collapse: collapse;
}
</style>
<title>Time Table</title>
</head>
<body>
<h1>CE D2D 4th sem</h1>
<h2>TimeTable</h2>
<table style="width:80%">
<tr>
<th>TIME</th>
<th>MONDAY</th>
<th>Tuesday</th>
<th>WEDNESDAY</th>
<th>THRUSDAY</th>
Web Designing (IT4014)
<th>FRIDAY</th>
<th>SATURDAY</th>
</tr>
<tr>
<td>8:30 am to 9:30 am</td>
<td>DM</td>
<td>PYTHON</td>
<td>DM</td>
<td>OS</td>
<td>OS</td>
<td rowspan="2">MS</td>
</tr>
<tr>
<td>9:30 am to 10:30 am</td>
<td>MSD</td>
<td>MSD</td>
<td>PYTHON</td>
<td></td>
<td>PYTHON</td>
</tr>
<tr>
<td>10:30 am to 10:45 am</td>
<th colspan="6">BREAK</th>
</tr>
<tr>
<td>10:45 am to 11:45 am</td>
<td>DM</td>
<td rowspan="2">B1:OS<br> B2:PYTHON </td>
<td rowspan="2">B1:WD<br> B2:MSD </td>
<td>MSD</td>
Web Designing (IT4014)
<td rowspan="2">B1:MSD<br> B2:WD </td>
<td>MSD</td>
</tr>
<tr>
<td>11:45 am to 12:45 pm</td>
<td>OS</td>
<td></td>
<td>OS</td>
</tr>
<tr>
<td>12:45 pm to 1:30 pm</td>
<th colspan="6">BREAK</th>
</tr>
<tr>
<td>1:30 pm to 12:45 pm</td>
<td>PYTHON</td>
<td>OS</td>
<td>CPI</td>
<td rowspan="2">B1:PYTHON<br> B2:OS </td>
<td>DM</td>
<td>PYTHON</td>
</tr>
<tr>
<td>2:30 pm to 3:30 pm</td>
<td></td>
<td>MSD</td>
<td>CPI</td>
<td>DM</td>
<td>DM</td>
</tr>
Web Designing (IT4014)
</table>
</body>
</html>
Output:
Web Designing (IT4014)
Practical – 4
Aim: Write a HTML code to display the given form using following
tags and attributes: form, input, text, password, textarea, select,
checkbox, radio, file, value, selected, placeholder, button, submit,
reset, action, method, name, id.
Code:
<html>
<head>
<style>
form
{
border: 2px solid black;
width: 500px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
.button
{
padding: 5px 5px;
}
</style>
</head>
<body>
<form>
<center><h1>Employee Registration Form</h1></center>
<label for="MR">MR</label>
<input type="radio" id="MR" name="title" value="MR">
<label for="Mrs">Mrs</label>
<input type="radio" id="Mrs" name="title" value="Mrs">
Web Designing (IT4014)
<label for="Ms">Ms</label>
<input type="radio" id="Ms" name="title" value="Ms"><br><br>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="fname">Email 1:</label>
<input type="text" id="Email-1" name="Email-1"><br><br>
<label for="lname">Email 2:</label>
<input type="text" id="Email-2" name="Email-2"><br><br>
<label for="fname">City:</label>
<input type="text" id="City" name="City"><br><br>
<label for="State">State:</label>
<select name="State" id="cars">
<option value="Gujarat">Gujarat</option>
<option value="GoA">GoA</option>
<option value="Kerala">Kerala</option>
<option value="MP">MP</option>
</select><br><br>
<label for="Zipcodes">Zipcode:</label>
<input type="text" id="Zipcode" name="Zipcode"><br><br>
<label for="photo">Choose a photo!</label>
Web Designing (IT4014)
<input type="file" id="photo" name="photo" accept="image/*"><br><br>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required><br><br>
<h3>Language preferences:</h3>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> Gujarati</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label
for="vehicle2"> Hindi</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> English</label><br><br>
<p><label for="w3review">Addition information:</label></p>
<textarea id="w3review" name="w3review" rows="4" cols="50"></textarea><br><br>
<button class="button">Submit</button>
<button class="button">Reset</button>
</form>
</body>
</html>
Web Designing (IT4014)
Output:
Web Designing (IT4014)
