Html
Program 1:
HTML Headings
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
HTML Paragraphs
<!DOCTYPE html>
<html>
<body>
<p> I love my country and I am proud of its rich and varied heritage. I shall always strive to be worthy of it. I shall give my parents, teachers and all elders respect and treat everyone with courtesy..</p>
</body>
</html>
HTML Formatting Elements
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
Ex:
<!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>
</body>
</html>
Program 2:
The HTML <video> Element
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
The HTML <audio> Element
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Program 3:
HTML Links
<!DOCTYPE html>
<html>
<body>
<h1>HTML Links</h1>
<p><a href="https://www.w3schools.com/">Visit W3Schools.com!</a></p>
</body>
</html>
Program 4:
HTML Tables
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
Program 5:
Ordered HTML List
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Unordered HTML List
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Program 7:
Develop a webpage with a form to collect user data (e.g., feedback form).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<title>Responsive Form Card</title>
<style>
body {
margin: 0;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
height: 100vh;
background-color: #3399ff;
font-family: 'Poppins', sans-serif;
}
</style>
</head>
<body>
<h3>Feedback Form </h3>
<form>
<label for="uname">
Name
</label>
<input type="text" id="uname"
name="uname" required> <br><br>
<label for="email">
Email Address
</label>
<input type="email" id="email"
name="email" required> <br><br>
<label for="phone">
Phone No
</label>
<input type="tel" id="phone"
name="phone" required> <br><br>
<label>
Do you satisfy with our service?
</label>
<div class="radio-group">
<input type="radio" id="yes"
name="satisfy" value="yes" checked>
<label for="yes">Yes</label>
<input type="radio" id="no" name="satisfy" value="no">
<label for="no">No</label>
</div> <br><br>
<label for="msg">
style="margin-right: 3px;"></i>
Write your Suggestions:
</label> <br><br>
<textarea id="msg" name="msg"
rows="4" cols="25" required>
</textarea> <br><br>
<button type="submit">
Submit
</button>
</form>
</body>
</html>
Program 10:
Write names of countries in a paragraph and link them to individual HTML pages for detailed information (University Program).
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<title>My Countries Website</title>
</head>
<body>
<header>
<div class="d-flex justify-content-center">
<ul class="nav">
<li class="m-2"><a class="current" href="index.html">Home</a></li>
<li class="m-2"><a href="countries/main.html">Countries</a></li>
</ul>
</div>
<h1>My Countries Website</h1>
</header>
</body>
</html>
Countries/main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../style.css" rel="stylesheet">
<link href="style-country.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<title>My Favourite Countries </title>
</head>
<body>
<header>
<nav class="d-flex justify-content-center">
<ul class="nav">
<li class="m-2"><a href="../index.html">Home</a></li>
<li class="m-2"><a class="current" href="main.html">Countries</a></li>
</ul>
</nav>
<h1>My Countries</h1>
</header>
<main>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<ul class="sidebar">
<li><a href="india.html">INDIA</a></li>
<li><a href="egypt.html">EGYPT</a></li>
<li><a href="swiz.html">SWITZERLAND</a></li>
</ul>
</div>
<div class="col-md-10">
<h2>INDIA</h2>
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/125px- Flag_of_India.svg.png">
<p>India, officially the Republic of India (Hindi: Bhārat Gaṇarājya),[24] is a country in South Asia. It is the seventh-largest country by area, the second-most populous country, and the most populous democracy in the world. Bounded by the Indian Ocean on the south, the Arabian Sea on the southwest, and the Bay of Bengal on the southeast, it shares land borders with Pakistan to the west;[f] China, Nepal, and Bhutan to the north; and Bangladesh and Myanmar to the east. In the Indian Ocean, India is in the vicinity of Sri Lanka and the Maldives; its Andaman and Nicobar Islands share a maritime border with Thailand, Myanmar and Indonesia.</p>
</div>
</div>
</div>
</main>
</body>
</html>
Countries/ Indial.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../style.css" rel="stylesheet">
<link href="style-country.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<title>My Favourite Countries </title>
</head>
<body>
<header>
<nav class="d-flex justify-content-center">
<ul class="nav">
<li class="m-2"><a href="../index.html">Home</a></li>
<li class="m-2"><a class="current" href="main.html">Countries</a></li>
</ul>
</nav>
<h1>My Favourite Countries</h1>
</header>
<main>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<ul class="sidebar">
<li><a href="india.html">INDIA</a></li>
<li><a href="egypt.html">EGYPT</a></li>
<li><a href="swiz.html">SWITZERLAND</a></li>
</ul>
</div>
<div class="col-md-10">
<h2>INDIA</h2>
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/125px- Flag_of_India.svg.png">
<p>India, officially the Republic of India (Hindi: Bhārat Gaṇarājya),[24] is a country in South Asia. It is the seventh-largest country by area, the second-most populous country, and the most populous democracy in the world. Bounded by the Indian Ocean on the south, the Arabian Sea on the southwest, and the Bay of Bengal on the southeast, it shares land borders with Pakistan to the west;[f] China, Nepal, and Bhutan to the north; and Bangladesh and Myanmar to the east. In the Indian Ocean, India is in the vicinity of Sri Lanka and the Maldives; its Andaman and Nicobar Islands share a maritime border with Thailand, Myanmar and Indonesia.</p>
</div>
</div>
</div>
</main>
</body>
</html>
Comments
Post a Comment