ACTIVITY 1
<html>
<head>
<title>Activity 1</title>
<body>
<h1>this is example of heading one</h1>
<h2>this is example of heading two</h2>
<h3>this is example oof heading three</h3>
<h4>this is example os heading four </h4>
<h5>this idsthe example of heading five</h5>
<h6>this is examle os heading six</h6>
</body>
this is examle of typer <textarea name="" id="" cols="30" rows="10"></textarea>
<b>this is example of bold</b>
<i>this is example of italic</i></head>
</html><br />
thid is example of<sup>superscript</sup><br />
this is example of<sub>subscript</sub></br>
<strong> this is example of strong</strong></br>
<emp>this is the example of emphasis</emp></br>
<mark>this is the example of mark</mark></br>
<del>this is the example of delete</del></br>
</head>
</html>
ACTIVITY 2
<ul>
<li>Web Designing Tools</li>
<ul>
<li>HTML</li>
<ul>
<li>HTML 4</li>
<li>HTML 5</li> </ul>
<li>CSS</li>
<ul>
<li>CSS 1.0 (released in 17 December 1996 by Hakon Wium Lie and Bert Bos)</li>
<li>CSS 2.0 (released in May 1998)</li>
<li>CSS 2.1 (released in 7 June 2011)</li>
<li>CSS 3.0 (released in June 2012)</li>
</ul>
<li>Javascript</li> <ul>
<li>Responsive (released in 19 June 2012)</li> </ul> </ul>
<li>Web Development Tools</li> <ul>
<li>PHP</li>
<li>.Net</li>
<ul>
<li>C#.Net</li>
<li>[Link]</li>
<li>[Link]</li>
<li>JSP</li>
</ul> </ul></ul>
ACTIVITY 3
<table>
<tr>
<th>Country</th>
<th>Population (In Crores)</th>
</tr>
<tr>
<td>INDIA</td>
<td>1998</td>
<td>85</td>
</tr>
<tr>
<td>INDIA</td>
<td>1999</td>
<td>90</td>
</tr>
<tr>
<td>INDIA</td>
<td>2000</td>
<td>100</td>
</tr>
<tr>
<td>USA</td>
<td>1998</td>
<td>30</td>
</tr>
<tr>
<td>USA</td>
<td>1999</td>
<td>35</td>
</tr>
<tr>
<td>USA</td>
<td>2000</td>
<td>40</td>
</tr>
<tr>
<td>UK</td>
<td>1998</td>
<td>25</td>
</tr>
<tr>
<td>UK</td>
<td>1999</td>
<td>30</td>
</tr>
<tr>
<td>UK</td>
<td>2000</td>
<td>35</td>
</tr>
</table>
ACTIVITY 4
<html>
<head>
<title>
HTML5 Forms Hands-on Exercise #2
</title>
<!-- Insert meta elements here -->
<meta name="description" content="24X7 Fitness Club Courts Reservation">
</head>
<body>
<header>
Welcome to the 24x7 Fitness Club : Courts Reservation Page!!
</header>
<section>
<!-- Create the HTML form here -->
<form name="courtsresv">
<fieldset name="memberdemo">
<legend>Member Demographics</legend>
<label for="fullname">Player Name:</label>
<input id="fullname" type="text" pattern="" placeholder="Firstname Lastname" required><br>
<label for="memberornot">Are you a member?</label>
<input id="member" type="radio" name="member" value="member">
<label for="member">Member</label>
<input id="nonmember" type="radio" name="member" value="nonmember">
<label for="nonmember">Non-member</label><br>
<label for="email">Email:</label>
<input id="email" type="email" placeholder="johndoe@[Link]"><br>
</fieldset>
<fieldset name="reserve">
<legend>Courts Reservation</legend>
<label for="facility">Facility:</label>
<select id="facility" name="facility" required>
<option value="default" disabled selected>-Please select a facility-</option>
<option value="badminton">Badminton</option>
<option value="squash">Squash</option>
<option value="racquetball">Racquetball</option>
</select><br>
<label for="start_dt">Start time:</label>
<input id="start_dt" type="datetime-local" name="starttime" placeholder="mm/dd/yyyy
hh:mm AM" required><br>
<label for="end_dt">End time:</label>
<input id="end_dt" type="datetime-local" name="endtime" placeholder="mm/dd/yyyy hh:mm
AM" required><br>
<input id="terms" type="checkbox" value="agreeterms" required>
<label for="terms">I agree to the club’s reservation policy.</label>
</fieldset>
<input type="submit" value="Reserve">
</form>
</section>
</body>
</html>
ACTIVITY 5
<style>
form {
background: #e8f3f8;
h1 {
font-size: 50px;
color: steelblue;
input {
margin-bottom: 25px;
border: 2px steelblue;
background: gray;
input:focus {
background: white;
input[type="radio"]:checked+label {
font-weight: bold;
button[type="submit"] {
background: steelblue;
color: white;
height: 45px;
}
button[type="submit"]:active {
background: white;
color: steelblue;
border: 2px steelblue;
</style>
<form>
<h1>Form Heading</h1>
<input type="text" placeholder="first name"><br>
<input type="text" placeholder="last name"><br>
<input type="email" placeholder="Email"><br>
<input type="password" placeholder="Password"><br>
<input type="password" placeholder="Confirm Password"><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<button type="submit">Submit</button>
</form>
ACTIVITY 6
<!DOCTYPE html>
<html>
<head>
<style>
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
nav ul li {
position: relative;
nav ul li a {
display: block;
padding: 0 20px;
line-height: 35px;
background: red;
color: white;
text-decoration: none;
border-radius: 20px;
}
nav ul li a:hover {
background: blue;
nav ul li ul {
position: absolute;
top: 35px;
left: 0;
display: none;
flex-direction: column;
nav ul li:hover ul {
display: flex;
nav ul li ul li {
border-top: 1px solid white;
nav ul li ul li a {
background: red;
width: 120px;
nav ul li ul li a:hover {
background: blue;
nav ul li:last-child ul {
right: 0;
left: auto;
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
</ul>
</li>
<li><a href="#">Australia</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>