HTML
<!DOCTYPE HTML>
<html>
<head>
<title>This is the title</title>
</head>
<body>
<h1>This is the heading</h1>
<p>This is the paragraph tag</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<body>
<h1>This is the heading</h1>
<h2>This is the heading</h2>
<h3>This is the heading</h3>
<h4>This is the heading</h4>
<h5>This is the heading</h5>
<h6>This is the heading</h6>
</body>
</html>
<!DOCTYPE HTML>
<html>
<body>
<h1>This is the heading</h1>
<h2>This is the heading</h2>
<h3>This is the heading</h3>
<h4>This is the heading</h4>
<h5>This is the heading</h5>
<h6>This is the heading</h6>
<h7>This is the heading</h7>
<h8>This is the heading</h8>
</body>
</html>
<!DOCTYPE HTML>
<html>
<body>
<h1>This is the heading</h1>
<h2>This is the heading</h2>
<h3>This is the heading</h3>
<h4>This is the heading</h4>
<h5 style="color:blue;font-size:30px">This is the heading</h5>
<h6 style="font-size:50px">This is the heading</h6>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>This is some text. This is some text. This is some text.</p>
<hr>
<p>This is some text. This is some text. This is some text.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>This is some text. This is some text. This is some text.</p>
<hr style="width:50%;margin-left:100;border: 1px solid blue;">
<p>This is some text. This is some text. This is some text.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>lorem10</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<body>
<a href="[Link]
</body>
</html>
<!DOCTYPE HTML>
<html>
<body>
<img src="C:\Users\Ashoka Rajan\Downloads\[Link]" alt="bird image"
width=400" height=275">
</body>
</html>
<!DOCTYPE HTML>
<html>
<body>
<a href="[Link]
<img src="C:\Users\Ashoka Rajan\Downloads\[Link]" alt="bird image"
width=400" height=275" ismap>
</a>
</right>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of the browser window.
If you resize the browser window, the number of lines in this paragraph will
change.
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<pre>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</pre>
<pre>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</pre>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>என் முதல் HTML பக்கம்</title>
</head>
<body>
<h1>வணக்கம் ராஜகோபால்!</h1>
<p>இது என் முதல் HTML பக்கம்.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<marquee>
<h1> Web programming is fun to learn </h1>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<marquee direction="left"> I'm moving from right to left </marquee>
<marquee direction="right"> I'm moving from left to right</marquee>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<body>
<marquee direction="up"> Up </marquee>
<marquee direction="down"> Down</marquee>
</body>
</html>
<html>
<body>
<marquee behavior="scroll" direction="left">
<img src="C:\Users\Ashoka Rajan\Downloads\[Link]" width="120"
height="80" alt="Natural">
</marquee>
</body>
</html>
<html>
<body>
<marquee behavior="slide" direction="left">
<img src="C:\Users\Ashoka Rajan\Downloads\[Link]" width="120"
height="80" alt="Natural">
</marquee>
</body>
</html>
<html>
<body>
<marquee behavior="alternate" direction="left">
<img src="C:\Users\Ashoka Rajan\Downloads\[Link]" width="120"
height="80" alt="Natural">
</marquee>
</body>
</html>
<html>
<body>
<marquee behavior="scroll" direction="up">
<img src="C:\Users\Ashoka Rajan\Downloads\[Link]" width="120"
height="80" alt="Natural">
</marquee>
</body>
</html>
<html>
<body>
<marquee behavior="scroll" direction="left" scrollamount="5">
<img src="C:\Users\Ashoka Rajan\Downloads\[Link]" width="120"
height="80" alt="Natural">
</marquee>
<marquee behavior="scroll" direction="left" scrollamount="15">
<img src="C:\Users\Ashoka Rajan\Downloads\[Link]" width="120"
height="80" alt="Natural">
</marquee>
</body>
</html>
<html>
<body>
<marquee behavior="scroll" direction="right">
<marquee behavior="scroll" direction="up"> <img src="C:\Users\Ashoka Rajan\
Downloads\[Link]" width="120" height="80" alt="Natural">
</marquee>
</marquee>
</body>
</html>
<!DOCTYPE HTML>
<html>
<body>
<h1>This is my Page</h1>
<iframe src="[Link] width="600" height="300"></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>1</td>
<td>Alice</td>
<td>24</td>
<td>New York</td>
</tr>
<tr>
<td>2</td>
<td>Bob</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<style>
div {
background-color: yellow;
}
</style>
<body>
<h1>HTML DIV Example</h1>
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
<p>The yellow background is added to demonstrate the footprint of the DIV
element.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>Multiple DIV Elements</h1>
<div style="background-color:yellow;">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
<div style="background-color:green;">
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 600.000 inhabitants.</p>
</div>
<div style="background-color:blue;">
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has almost 3 million inhabitants.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<style>
div {
width: 300px;
margin: auto;
background-color: yellow;
}
</style>
<body>
<h1>Center align a DIV element</h1>
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>The span element</h1>
<p style="color:blue;">My mother has blue eyes</p>
<p>My mother has <span style="color:blue;">blue </span>eyes </p>
</body>
</html>
School Time Table
<!DOCTYPE html>
<html lang="en">
<body>
<table border="1" cellspacing="0">
<th colspan="6">Time Table</th>
<tr>
<th rowspan="6">Hours</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
</tr>
<tr>
<td>Math</td>
<td>Science</td>
<td>Math</td>
<td>Science</td>
<td>Arts</td>
</tr>
<tr>
<td>Math</td>
<td>Science</td>
<td>Math</td>
<td>Science</td>
<td>Arts</td>
</tr>
<tr>
<th colspan="5">Lunch</th>
</tr>
<tr>
<td>Math</td>
<td>Science</td>
<td>Math</td>
<th colspan="2" rowspan="2">Project</th>
</tr>
<tr>
<td>Math</td>
<td>Science</td>
<td>Math</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
{% lorem 50 w %}
</body>
</html>
Pasta Recipe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Delicious Pasta Recipe</title>
</head>
<body>
<header>
<h1 style="text-align: center;">Delicious Pasta Recipe</h1>
<p style="text-align: center;">A quick and easy recipe for a classic Italian
dish!</p>
</header>
<hr>
<main>
<div style="text-align: center;">
<img src="[Link]" alt="Pasta Dish" width="30%" height="50%">
</div>
<h2>Ingredients</h2>
<ul>
<li>200g spaghetti</li>
<li>2 cloves of garlic, minced</li>
<li>3 tablespoons olive oil</li>
<li>200g cherry tomatoes, halved</li>
<li>Salt and pepper to taste</li>
<li>Fresh basil leaves for garnish</li>
<li>Grated Parmesan cheese (optional)</li>
</ul>
<h2>Instructions</h2>
<ol>
<li>Cook the spaghetti according to the package instructions. Drain and
set aside.</li>
<li>Heat olive oil in a pan over medium heat.</li>
<li>Add minced garlic and sauté until fragrant.</li>
<li>Stir in the cherry tomatoes and cook for 5 minutes.</li>
<li>Add the cooked spaghetti to the pan and toss to combine.</li>
<li>Season with salt and pepper to taste.</li>
<li>Garnish with fresh basil leaves and serve with Parmesan cheese if
desired.</li>
</ol>
<h2>Nutrition Information</h2>
<table border="1" width="100%">
<tr>
<th>Nutrient</th>
<th>Amount (per serving)</th>
</tr>
<tr>
<td>Calories</td>
<td>350</td>
</tr>
<tr>
<td>Protein</td>
<td>10g</td>
</tr>
<tr>
<td>Carbohydrates</td>
<td>50g</td>
</tr>
<tr>
<td>Fat</td>
<td>12g</td>
</tr>
</table>
</main>
<hr>
<footer>
<p style="text-align: center;">© 2024 Delicious Recipes. All rights
reserved.</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Delicious Pasta Recipe</title>
</head>
<body>
<header>
<h1 style="text-align: center;">Delicious Pasta Recipe</h1>
<p style="text-align: center;">A quick and easy recipe for a classic Italian
dish!</p>
</header>
<hr>
<main>
<div style="text-align: center;">
<img src="[Link]" alt="Pasta Dish" width="30%" height="50%">
</div>
<h2>Ingredients</h2>
<ul>
<li>200g spaghetti</li>
<li>2 cloves of garlic, minced</li>
<li>3 tablespoons olive oil</li>
<li>200g cherry tomatoes, halved</li>
<li>Salt and pepper to taste</li>
<li>Fresh basil leaves for garnish</li>
<li>Grated Parmesan cheese (optional)</li>
</ul>
<h2>Instructions</h2>
<ol>
<li>Cook the spaghetti according to the package instructions. Drain and
set aside.</li>
<li>Heat olive oil in a pan over medium heat.</li>
<li>Add minced garlic and sauté until fragrant.</li>
<li>Stir in the cherry tomatoes and cook for 5 minutes.</li>
<li>Add the cooked spaghetti to the pan and toss to combine.</li>
<li>Season with salt and pepper to taste.</li>
<li>Garnish with fresh basil leaves and serve with Parmesan cheese if
desired.</li>
</ol>
<h2>Nutrition Information</h2>
<table border="1" width="100%">
<tr>
<th>Nutrient</th>
<th>Amount (per serving)</th>
</tr>
<tr>
<td>Calories</td>
<td>350</td>
</tr>
<tr>
<td>Protein</td>
<td>10g</td>
</tr>
<tr>
<td>Carbohydrates</td>
<td>50g</td>
</tr>
<tr>
<td>Fat</td>
<td>12g</td>
</tr>
</table>
</main>
<hr>
<footer>
<p style="text-align: center;">© 2024 Delicious Recipes. All rights
reserved.</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<table border="1" align="center" width="450" height="100" text-
align="center">
<tr>
<td rowspan="2">A</td>
<td >B</td>
<td rowspan="3">D</td>
<td colspan="2">E</td>
<td colspan="2">F</td>
</tr>
<tr>
<td>C</td>
<td rowspan="2">G</td>
<td rowspan="2">H</td>
<td rowspan="2">I</td>
</tr>
<td colspan="2">J</td>
<tr>
<td colspan="3">K</td>
<td>L</td>
<td colspan="2">M</td>
</tr>
</table>
</body>
</html>
<style>
table {
width: 80%; /* Set table width to 80% of the container */
}
th, td {
padding: 10px;
text-align: center;
</style>
<!DOCTYPE html>
<html>
<head>
<title>Chessboard</title>
</head>
<body>
<h1>Multi-Dimensional Chessboard</h1>
<table border="1" cellpadding="5" cellspacing="0">
<!-- Chessboard headers -->
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
</tr>
<!-- Row 8 -->
<tr>
<th>8</th>
<td bgcolor="#FFFFFF">♖</td>
<td bgcolor="#000000" style="color: white;">♘</td>
<td bgcolor="#FFFFFF">♗</td>
<td bgcolor="#000000" style="color: white;">♕</td>
<td bgcolor="#FFFFFF">♔</td>
<td bgcolor="#000000" style="color: white;">♗</td>
<td bgcolor="#FFFFFF">♘</td>
<td bgcolor="#000000" style="color: white;">♖</td>
</tr>
<!-- Row 7 -->
<tr>
<th>7</th>
<td bgcolor="#000000" style="color: white;">♙</td>
<td bgcolor="#FFFFFF">♙</td>
<td bgcolor="#000000" style="color: white;">♙</td>
<td bgcolor="#FFFFFF">♙</td>
<td bgcolor="#000000" style="color: white;">♙</td>
<td bgcolor="#FFFFFF">♙</td>
<td bgcolor="#000000" style="color: white;">♙</td>
<td bgcolor="#FFFFFF">♙</td>
</tr>
<!-- Row 6 -->
<tr>
<th>6</th>
<td bgcolor="#FFFFFF"></td>
<td bgcolor="#000000"></td>
<td bgcolor="#FFFFFF"></td>
<td bgcolor="#000000"></td>
<td bgcolor="#FFFFFF"></td>
<td bgcolor="#000000"></td>
<td bgcolor="#FFFFFF"></td>
<td bgcolor="#000000"></td>
</tr>
<!-- Row 5 -->
<tr>
<th>5</th>
<td bgcolor="#000000"></td>
<td bgcolor="#FFFFFF"></td>
<td bgcolor="#000000"></td>
<td bgcolor="#FFFFFF"></td>
<td bgcolor="#000000"></td>
<td bgcolor="#FFFFFF"></td>
<td bgcolor="#000000"></td>
<td bgcolor="#FFFFFF"></td>
</tr>
<!-- Row 4 -->
<tr>
<th>4</th>
<td bgcolor="#FFFFFF"></td>
<td bgcolor="#000000"></td>
<td bgcolor="#FFFFFF"></td>
<td bgcolor="#000000"></td>
<td bgcolor="#FFFFFF"></td>
<td bgcolor="#000000"></td>
<td bgcolor="#FFFFFF"></td>
<td bgcolor="#000000"></td>
</tr>
<!-- Row 3 -->
<tr>
<th>3</th>
<td bgcolor="#000000"></td>
<td bgcolor="#FFFFFF"></td>
<td bgcolor="#000000"></td>
<td bgcolor="#FFFFFF"></td>
<td bgcolor="#000000"></td>
<td bgcolor="#FFFFFF"></td>
<td bgcolor="#000000"></td>
<td bgcolor="#FFFFFF"></td>
</tr>
<!-- Row 2 -->
<tr>
<th>2</th>
<td bgcolor="#FFFFFF">♙</td>
<td bgcolor="#000000" style="color: white;">♙</td>
<td bgcolor="#FFFFFF">♙</td>
<td bgcolor="#000000" style="color: white;">♙</td>
<td bgcolor="#FFFFFF">♙</td>
<td bgcolor="#000000" style="color: white;">♙</td>
<td bgcolor="#FFFFFF">♙</td>
<td bgcolor="#000000" style="color: white;">♙</td>
</tr>
<!-- Row 1 -->
<tr>
<th>1</th>
<td bgcolor="#000000" style="color: white;">♜</td>
<td bgcolor="#FFFFFF">♞</td>
<td bgcolor="#000000" style="color: white;">♝</td>
<td bgcolor="#FFFFFF">♛</td>
<td bgcolor="#000000" style="color: white;">♚</td>
<td bgcolor="#FFFFFF">♝</td>
<td bgcolor="#000000" style="color: white;">♞</td>
<td bgcolor="#FFFFFF">♜</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<style>
table
{
border-collapse: collapse;
margin:auto;
width:60%;
}
td
{
text-align:center;
}
</style>
<table border="1" cellpadding="5" bgcolor="violet">
<tr>
<th colspan="6">Time Table</th>
</tr>
<tr>
<td rowspan="6">Hours</td>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
</tr>
<td>Science</td>
<td>Maths</td>
<td>Science</td>
<td>Maths</td>
<td>Arts</td>
<tr>
<td>Science</td>
<td>Maths</td>
<td>Science</td>
<td>Maths</td>
<td>Arts</td>
</tr>
<tr>
<th colspan="5">Lunch</th>
</tr>
<tr>
<td>Science</td>
<td>Maths</td>
<td>Science</td>
<td>Maths</td>
<td rowspan="2">Project</td>
</tr>
<tr>
<td>Science</td>
<td>Maths</td>
<td>Science</td>
<td>Maths</td>
</tr>
</table>
</html>
<!DOCTYPE html>
<html>
<body>
<table border="1" cellpadding="20" cellspacing="0">
<tr bgcolor="lightblue">
<th>[Link]</th>
<th>Name</th>
<th>Dept</th>
</tr>
<tr>
<td bgcolor="yellow" style="color: red;"> Red Text</td>
<td bgcolor="lightgreen" style="color: blue;">Blue Text</td>
<td bgcolor="pink" style="color: black;">Black Text</td>
</tr>
<tr>
<td bgcolor="white" style="color: green;">Green Text</td>
<td bgcolor="Darkgray" style="color: darkred;">Dark Red Text</td>
<td bgcolor="Olive" style="color: navy;">Navy Text
</td>
</tr>
</table>
</body>
</html>
Intresting animation
[Link]
[Link]
v=tg8e6t5dikw&list=PLvLn_SK_rpKSh114VoIc7y2mGG4341_sB&index=4
Animation1 using HTML
<html>
<head>
<title>Animation</title>
<style>
body {
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
marquee {
padding-top: 58vh;
}
</style>
</head>
<body background="[Link]">
<marquee direction="right" scrollamount="10">
<img src="[Link]" width="22%" />     
<img src="[Link]" width="11%" />     
<img src="[Link]" width="4%" />     
</marquee>
</body>
</html>
Animation2 using HTML
<html>
<head><title>Animation</title>
<style>
body{
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
</style>
</head>
<body background="[Link]">
<marquee scrollamount="16">
<img src="[Link]" width="16%"/>
</marquee>
<br><br><br><br><br><br><br>
<marquee direction="right" scrollamount="35">
<img src="[Link]" width="26%"/>
<img src="[Link]" width="22%"/>
<img src="[Link]" width="16%"/>
<img src="[Link]" width="30%"/>
</marquee>
</body>
</html>
Round Football
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Round Football Using Tables</title>
<style>
table {
border-collapse: collapse;
margin: 20px auto;
}
td {
width: 20px;
height: 20px;
}
.black {
background-color: black;
}
.white {
background-color: white;
}
.empty {
background-color: transparent;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Round Football Pattern Using Table</h1>
<table>
<!-- Row 1 -->
<tr>
<td class="empty"></td>
<td class="empty"></td>
<td class="black"></td>
<td class="black"></td>
<td class="black"></td>
<td class="empty"></td>
<td class="empty"></td>
</tr>
<!-- Row 2 -->
<tr>
<td class="empty"></td>
<td class="black"></td>
<td class="white"></td>
<td class="black"></td>
<td class="white"></td>
<td class="black"></td>
<td class="empty"></td>
</tr>
<!-- Row 3 -->
<tr>
<td class="black"></td>
<td class="white"></td>
<td class="black"></td>
<td class="white"></td>
<td class="black"></td>
<td class="white"></td>
<td class="black"></td>
</tr>
<!-- Row 4 -->
<tr>
<td class="black"></td>
<td class="black"></td>
<td class="white"></td>
<td class="black"></td>
<td class="white"></td>
<td class="black"></td>
<td class="black"></td>
</tr>
<!-- Row 5 -->
<tr>
<td class="black"></td>
<td class="white"></td>
<td class="black"></td>
<td class="white"></td>
<td class="black"></td>
<td class="white"></td>
<td class="black"></td>
</tr>
<!-- Row 6 -->
<tr>
<td class="empty"></td>
<td class="black"></td>
<td class="white"></td>
<td class="black"></td>
<td class="white"></td>
<td class="black"></td>
<td class="empty"></td>
</tr>
<!-- Row 7 -->
<tr>
<td class="empty"></td>
<td class="empty"></td>
<td class="black"></td>
<td class="black"></td>
<td class="black"></td>
<td class="empty"></td>
<td class="empty"></td>
</tr>
</table>
</body>
</html>
<frameset cols = "25%,50%,25%">
<frame name = "left" src = "[Link] />
<frame name = "center" src = "[Link] />
<frame name = "right" src = "[Link] />
</frameset>
<frameset cols="*,*,*,*">
<frame src=“[Link]">
<frame src="[Link]">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
<frameset rows="*,*,*,*">
<frame src=“[Link]">
<frame src="[Link]">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
<html>
<frameset rows="50%,50%">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
</html>
<html>
<frameset rows="50%,50%">
<frame src="[Link]" name="topFrame">
<frameset cols="50%,50%">
<frame src="bottom_left.html">
<frame src="bottom_right.html">
</frameset>
</frameset>
</html>
<html>
<h2>Audio Example</h2>
<audio controls>
<source src="audio.mp3">
</audio>
</html>
<html>
<audio controls autoplay>
<source src="audio.mp3">
</audio>
</html>
<html>
<h2>Audio Example</h2>
<audio controls muted>
<source src="audio.mp3">
</audio>
</html>
<html>
<h2>Audio Example</h2>
<audio controls preload="metadata">
<source src="audio1.mp3">
</audio>
</html>
Mute
Loop
Autoplay
Autoplay mute loop
<html>
<body>
<h2>Video with Subtitles</h2>
<video controls width="800" height="400">
<source src="E:\Speed Maths\L6.mp4">
</video>
</body>
</html>
[Link]
<form>
<label>Enter first name</label><br>
<input type="text" name="firstname"><br>
<label>Enter last name</label><br>
<input type="text" name="lastname"><br>
</form>
<form>
<label>Enter User name</label><br>
<input type="text" name="firstname"><br>
<label>Enter Password</label><br>
<input type="Password" name="password"><br>
<br><input type="submit" value="submit">
</form>
<form action="[Link]
<label>Enter User name</label><br>
<input type="text"><br>
<label>Enter Password</label><br>
<input type="Password"><br>
<br><input type="submit" value="submit">
</form>
<form>
<label>User id: </label>
<input type="text">
<label>Password: </label>
<input type="password"><br><br>
<input type="submit" value="login">
<input type="reset" value="Reset">
</form>
<form>
<p>Kindly Select your favorite color</p>
<input type="radio"> Red <br>
<input type="radio"> blue <br>
<input type="radio">green <br>
<input type="radio">pink <br>
<input type="submit" value="submit">
</form>
<form>
<p>Kindly Select your favourite sports</p>
<input type="checkbox" value="cricket">Cricket<br>
<input type="checkbox" value="tennis">Tennis<br>
<input type="checkbox" value="football">Football<br>
<input type="checkbox" value="baseball">Baseball<br>
<input type="checkbox" value="badminton">Badminton<br><br>
<input type="submit" value="submit">
</form>
<form>
<input type="button" value="Clcik me " onclick="alert('you are learning
HTML')">
</form>
<form>
<label>Select file to upload:</label>
<input type="file">
<input type="submit" value="submit">
</form>
<html>
<p>We can create an image as submit button</p>
<form>
<label>User id:</label><br>
<input type="text"><br><br>
<input type="image" alt="Submit" src="[Link]" width="100px">
</form>
</html>
<form>
Pick your Favorite color: <br><br>
<input type="color"> Upclick<br><br>
</form>
<form>
Select Start and End Date: <br><br>
<input type="date"> Start date:<br><br>
<input type="date"> End date:<br><br>
<input type="submit">
</form>
<html>
<form>
<label>
Select date & time: <input type="datetime-local"> <br><br>
</label>
<input type="submit">
</form>
</html>
<form>
<table>
<tr>
<td><label>single email</label></td>
<td><input type="email" required>
<input type="submit"></td>
</tr>
<tr>
<td><label>Enter multiple Email-addresses</label></td>
<td><input type="email" multiple>
<input type="submit"></td>
</tr>
</table>
</form>
<form>
<label>Enter your Birth Month-year: </label>
<input type="month" name="newMonth">
<input type="submit">
</form>
<form>
<label>Enter your age: </label>
<input type="number" min="50" max="80">
<input type="submit">
</form>
<form>
<label>Enter your website URL: </label>
<input type="url" placeholder="[Link]
<input type="submit" value="send data">
</form>
<form action="[Link]" method="POST">
<label>Upload Resume:</label>
<input type="file" accept=".pdf,.docx" required><br><br>
<button type="submit">Upload</button>
</form>
<!DOCTYPE html>
<head>
<title>My Blog</title>
</head>
<body>
<!-- Header -->
<header>
<h1>Welcome to My Blog</h1>
<p>Your daily dose of interesting articles</p>
</header>
<!-- Navigation -->
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#blog">Blog</a> |
<a href="#contact">Contact</a>
</nav>
<!-- Main Content Area -->
<div>
<!-- Main Section -->
<main>
<!-- Blog Section -->
<section>
<h2>Latest Articles</h2>
<!-- Article 1 -->
<article>
<h3>How to Learn Web Development</h3>
<p>Web development is a valuable skill in today's world. Here’s a
step-by-step guide to start your journey...</p>
<a href="#readmore1">Read More</a>
</article>
<!-- Article 2 -->
<article>
<h3>10 Tips for Better Productivity</h3>
<p>Boosting productivity can be challenging. Follow these 10 tips
to make the most of your day...</p>
<a href="#readmore2">Read More</a>
</article>
</section>
</main>
<!-- Sidebar -->
<aside>
<h3>About Me</h3>
<p>Hello! I’m a passionate blogger sharing my thoughts on technology,
productivity, and lifestyle.</p>
</aside>
</div>
<!-- Footer -->
<footer>
<p>© 2025 My Blog | All Rights Reserved</p>
</footer>
</body>
</html>
<html>
<body>
<h1>Contact Form</h1>
<form action="[Link]" method="post">
<fieldset>
<legend>Contact Information</legend>
<label>Name:</label>
<input type="text" required><br><br>
<label>Email:</label>
<input type="email" required><br><br>
<label>Message:</label><br>
<textarea rows="4" cols="50" required></textarea><br><br>
</fieldset>
<input type="submit" value="Submit">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Inputs Example</title>
</head>
<body>
<h1>Fill the Following Details</h1>
<form action="#" method="post">
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18"
max="100"><br><br>
<label for="gender">Gender:</label><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><br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob"><br><br>
<label for="color">Favorite Color:</label>
<input type="color" id="color" name="color"><br><br>
</fieldset>
<fieldset>
<legend>Additional Information</legend>
<label for="website">Website URL:</label>
<input type="url" id="website" name="website"><br><br>
<label for="comment">Comment:</label><br>
<textarea id="comment" name="comment" rows="4"
cols="50"></textarea><br><br>
<label for="file">Upload File:</label>
<input type="file" id="file" name="file"><br><br>
<label for="newsletter">Subscribe to Newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter"
value="yes" checked><br><br>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select><br><br>
</fieldset><br>
<input type="submit" value="Submit">
</form>
<footer>
<p>© 2025 Example Company. All rights reserved.</p>
<p>Contact us at: <a
href="[Link]
</footer>
</body>
</html>