1) Develop a webpage which display’s the content “Hello World” with different sizes by using
different heading tags.
CODE:
file : HelloWorld.html
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
</body>
</html>
Output
2) Develop a webpage which contains some static content and some hyperlinks. On clicking
those hyper links, it should navigate to another webpage.
Hint: Use <a> tag
CODE:
file : HyperLink.html
<!DOCTYPE html>
<html>
<head>
<title>Rose</title>
</head>
<body>
<h1>Rose Flower</h1>
<a href="rose.jpg" target="_blank">Red Rose Image</a><br><br>
<a href="white_rose.jpg" target="_blank">White Rose Image</a>
</body>
</html>
Output
3)a) Develop a webpage which displays an image and it’s corresponding description
CODE:
file : Image.html
<!DOCTYPE html>
<html>
<head>
<title>Rose Image</title>
</head>
<body>
<h1>Rose</h1>
<img src="rose.jpg" alt="rose image">
<h2>Description</h2>
<p>
The rose is one of the most well known flowers in the world. It is popularly known as the
flower of love. Roses can be found in different colours but the red coloured rose is the most
favourite one for many people. It is one of the most beautiful flowers.<br><br>
The composition of a rose flower is one of nature’s best beauties. Even at the bud stage, it
looks extremely pretty like a ruby gemstone. When it blooms, the rose has many layers of
petals. It has a centre with stamen and pollen like all flowers. A rose bush typically has plenty
of thorns to protect the flower from animals. Roses come in many different colours and
varieties. Although the red rose is the most commonly found colour.<br><br>
Rose is most known for its sweet and refreshing fragrance. That’s why, people love
decorating roses in vases. The essence of the rose flower is used in many fragrances such as
perfumes, body soaps, room fresheners and many others.
</p>
</body>
</html>
Output
3)b) Improvise the above webpage by modifying the image as hyper image.
CODE:
file : HyperImage.html
<!DOCTYPE html>
<html>
<head>
<title>Rose Image</title>
</head>
<body>
<h1>Rose</h1>
<a href="Description.html" target="_blank">
<img src="rose.jpg" alt="rose image">
</a>
</body>
</html>
file : Description.html
<!DOCTYPE html>
<html>
<head>
<title>Rose Image</title>
</head>
<body>
<h1>Rose Description</h1>
<p>
The rose is one of the most well known flowers in the world. It is popularly known as the
flower of love. Roses can be found in different colours but the red coloured rose is the most
favourite one for many people. It is one of the most beautiful flowers.<br><br>
The composition of a rose flower is one of nature’s best beauties. Even at the bud stage, it
looks extremely pretty like a ruby gemstone. When it blooms, the rose has many layers of
petals. It has a centre with stamen and pollen like all flowers. A rose bush typically has plenty
of thorns to protect the flower from animals. Roses come in many different colours and
varieties. Although the red rose is the most commonly found colour.<br><br>
Rose is most known for its sweet and refreshing fragrance. That’s why, people love
decorating roses in vases. The essence of the rose flower is used in many fragrances such as
perfumes, body soaps, room fresheners and many others.
</p>
</body>
</html>
Output
4)Design a webpage using frames by dividing it into 3 row frames. In the top frame a hyper
image should be displayed, in the bottom frame it’s corresponding description should be
displayed whenever the image in the top frame was clicked.
CODE:
file : frames.html
<!DOCTYPE html>
<html>
<head>
<title>Frames</title>
</head>
<frameset rows="*, *, *" border="1">
<frame src="image.html" name="top">
<frame name="middle">
<frame name="bottom">
</frameset>
</html>
file: image.html
<!DOCTYPE html>
<html>
<head>
<title>Image</title>
</head>
<body>
<a href="Description.html" target="bottom">
<img src="rose.jpg" alt="Rose Image">
</a>
</body>
</html>
Output
5) Design a home page for an online shopping app in a manner like as shown below
CODE:
file : frames.html
<!DOCTYPE html>
<html>
<head>
<title>IEkart online shopping</title>
</head>
<frameset rows="10%, 5%, 80%" border="1">
<frame src="title.html" name="top">
<frameset cols="*, *, *, *, *" border="1">
<frame src="Home.html" name="Home">
<frame src="Categories.html" name="Categories">
<frame src="AboutUs.html" name="AboutUs">
<frame src="SignUp.html" name="SignUp">
<frame src="Login.html" name="Login">
</frameset>
<frame name="bottom">
</frameset>
</html>
file : title.html
<!DOCTYPE html>
<html>
<head>
<title>IEkart online shopping</title>
</head>
<body>
<h1>IEkart online shopping</h1>
</body>
</html>
file : home.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<a href="HomePage.html" target="bottom"><h3>Home</h3></a>
</body>
</html>
Output
6) Design a webpage in order to upload a video or audio file and give privilege to the user to
control the files by pausing, stopping and playing.
CODE:
file : AudioVideo.html
<!DOCTYPE html>
<html>
<head>
<title>Rose</title>
</head>
<body>
<h1>Rose</h1>
<video width="320" height="240" src="rose_video.mp4" controls></video><br>
<audio src="rose_audio.mp3" controls></audio>
</body>
</html>
Output
7) Design a webpage to display a table as follows:
CODE:
file : Table.html
<!DOCTYPE html>
<html>
<head>
<title>Table Layout</title>
</head>
<body>
<table border="1" style="width: 300px; border-collapse: collapse;">
<tr>
<td colspan="3" align="center"><b>2022</b></td>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" align="center"><b>FIESTA</b></td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Output
8) Design a webpage to display your class time table using tables.
CODE:
file : Timetable.html
<!DOCTYPE html>
<html>
<head>
<title>Class Timetable</title>
</head>
<body>
<h2>Class Timetable</h2>
<table border="2" style="border-collapse: collapse;">
<tr>
<th>DAY</th>
<th>1<br>8:40 - 9:40</th>
<th>2<br>9:40 - 10:30</th>
<th>3<br>10:40 - 11:30</th>
<th>4<br>11:30 - 12:20</th>
<th rowspan="7">LUNCH</th>
<th>5<br>1:00 - 1:50</th>
<th>6<br>1:50 - 2:40</th>
<th>7<br>2:50 - 3:35</th>
<th>8<br>3:35 - 4:20</th>
</tr>
<tr align="center">
<th>MON</th>
<td>CRT</td>
<td>EMI</td>
<td>EMI</td>
<td>CNS</td>
<td>CD</td>
<td colspan="3">ML LAB</td>
</tr>
<tr align="center">
<th>TUE</th>
<td>EMI</td>
<td>OOAD</td>
<td colspan="2">CRT</td>
<td>CD</td>
<td>EMI</td>
<td>ML</td>
<td>CNS</td>
</tr>
<tr align="center">
<th>WED</th>
<td colspan="4">MST</td>
<td>CRT</td>
<td>ML</td>
<td>CD</td>
<td>EMI</td>
</tr>
<tr align="center">
<th>THU</th>
<td>CNS</td>
<td>OOAD</td>
<td>OOAD</td>
<td>CNS</td>
<td>ML</td>
<td>CD</td>
<td>EMI</td>
<td>CD</td>
</tr>
<tr align="center">
<th>FRI</th>
<td colspan="3">CNS LAB</td>
<td>ML</td>
<td colspan="2">CRT-Assessment</td>
<td>OOAD</td>
<td>CNS</td>
</tr>
<tr align="center">
<th>SAT</th>
<td colspan="3">CD LAB</td>
<td>OOAD</td>
<td colspan="2">CRT</td>
<td>CD</td>
<td>ML</td>
</tr>
</table>
</body>
</html>
Output
9) Design a form with basic details.
CODE:
file : forms.html
<html>
<head>
<title>Sign Up</title>
</head>
<body align="center" color="blue">
<form action="eg.html">
<h2> Fill The Details</h2>
First Name: <input type="text" id="fname" placeholder="First Name"><br><br>
Last Name: <input type="text" id="lname" placeholder="Last Name"><br><br>
D.O.B: <input type="date" id="date" ><br><br>
<textarea rows="9" cols="15" placeholder="Enter your address here...">
</textarea><br><br>
Gender:<br>
<input type="radio" id="male" name ="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name ="gender" value="female">
<label for="female">Female</label><br>
<h4>Languages Known</h4>
<input type="checkbox" id="telugu" name ="lang" value="tel"> Telugu
<input type="checkbox" id="hindi" name ="lan" value="hin"> Hindi
<input type="checkbox" id="eng" name ="lan" value="eng"> English
<input type="checkbox" id="tamil" name ="lan" value="tamil"> Tamil<br><br>
Mail.Id: <input type="mailid" id="mail"><br><br>
Password: <input type="password" id="pwd"><br>
<input type="submit" id="submit" value="submit">
<input type="reset" id="reset" value="reset">
</form>
</body>
</html>
Output
10) Design a Validation form.
CODE:
file : Validate_forms.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form</title>
</head>
<body>
<h3>Form Validation</h3>
<form>
<p>Name:</p>
<input type="text" required placeholder="Enter your name">
<p>Email:</p>
<input type="email" required pattern="[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-zA-Z]{2,4}"
autocomplete="on" placeholder="Enter mailid" >
<p>Password:</p>
<input type="password" id="pwd" name="pwd" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).
{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at
least 8 or more characters">
<p>Ph No:</p>
<input type="text" required pattern="\d{10}"> <br>
<p>D.O.B:</p>
<input type="date" pattern="\d{2, 1}/\d{2, 1}/\d{4}">
<br>
<p>Address:</p>
<input type="text" required>
<br> <br>
<button style="margin-top: 5px;">
Submit
</button>
</form>
</body>
</html>
Output
