html task
1. Create Your first Web Page - Add a tittles, heading, paragraph, and line break.
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>Hii</h1>
<p>This is my first web page<br>I am learning HTML. </p>
</body>
</html>
Output:
2.Simple Biography Page – Add your name, a short intro, and a horizontal line.
<html>
<head>
<title>My Biograpy</title>
</head>
<body>
<h1>Devika R</h1>
<P>I am Devika . I am pursing a Postgraduate degree in computer science. I am interested in working in the computer field</P>
<hr>
</body>
</html>
output:
3. Formate Pratice - Use <b>,<i>,<mark>,<sub>,<sup>,<tags> in a paragraph.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>formate pratice</title>
</head>
<body><h>Formate Pratice</h>
<p>
<b>Hello</b><br>
<i>Welcome</i><br>
<u>World</u><br>
<mark>page</mark><br>
H<sub>2</sub>O<br>
a<sup>2</sup><br>
</p>
</body>
</html>
Output:
4. Favorite Foods List - create ordered and unordered lists.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>favorite food list</title>
</head>
<body>
<h1>ordered list</h1>
<ol>
<li>Briyani</li>
<li>fried Rice</li>
<li>Noodles</li>
<li>Parotta</li>
</ol>
<h2>Unordered list</h2>
<ul>
<li>Ice cream</li>
<li>Chocolate</li>
<li>Burger</li>
<li>Pizza</li>
</ul>
</body>
</html>
Output:
5.Link to another Page - Add an <a> link to a website of your choice.
<!DOCTYPE html>
<html>
<head>
<title>link to page</title>
<body>
<h>Welcome to my page</h>
<p>This is my biograpy</p>
<a href="task2/biograpy.html">Visit my Page</a>
</body>
</head>
</html>
Output:
<!DOCTYPE html>
<html>
<head>
<title>Time table</title>
</head>
<body>
<h><b>CLASS TIME TABLE</b></h><br>
<table border="2">
<tr>
<th>Day</th>
<th>9:00 - 10.00</th>
<th>10:00 - 11.00</th>
<th>11:00 - 12:00</th>
<th>12:00 - 1:00</th>
<th>2:00 - 3:00</th>
</tr>
<tr>
<td><b>Monday</b></td>
<td>Tamil</td>
<td>Math</td>
<td>Computer</td>
<td>Break</td>
<td>Physics</td>
</tr>
<tr>
<td><b>Tuesday</b></td>
<td>Computer</td>
<td>Tamil</td>
<td>Lab</td>
<td>Break</td>
<td>Chemistry</td>
</tr>
<tr>
<td><b>Wednesday</b></td>
<td>Math</td>
<td>Physics</td>
<td>Computer</td>
<td>Break</td>
<td>Tamil</td>
</tr>
<tr>
<td><b>Thursday</b></td>
<td>Physics</td>
<td>Lab</td>
<td>Tamil</td>
<td>Break</td>
<td>Math</td>
</tr>
<tr>
<td><b>Friday</b></td>
<td>Tamil</td>
<td>Physics</td>
<td>Chemistry</td>
<td>Break</td>
<td>Computer</td>
</tr>
</body>
</html>
Output:
7.Image gallery - Display three images in a row.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Three Images</title>
</head>
<body>
<h1>Three Images</h1>
<img src="pexels-philippedonn-1133957.jpg"height="200"width="200"/>
<img src="pexels-pixabay-39517 copy.jpg"height="200"width="200"/>
<img src="pexels-pixabay-56866.jpg" height="200"width="200"/>
/body>
</html>
Output:
8. Video &audio Embed - add a video and audio player.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>viedo & audio embeded</title>
</head>
<body>
<audio src="technology-stream-30-seconds-352906.mp3" controls></audio> <br>
<iframe width="300" height="200"
src="203987-923133879_tiny.mp4"> title="video"></iframe>
</body>
</html>
Output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>navigation menu</title>
</head>
<body>
<h1>links</h1>
<nav>
<a href="biograpy.html">Home</a>
<a href="foods list.html">About</a>
<a href="formate.html">Service</a>
<a href="time table.html">contacts</a>
</nav>
</body>
</html>
Output:
