About Lesson
Sure! Here’s an extensive list of HTML examples covering various aspects:
- Basic HTML Structure:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>- HTML Attributes:
<a href="https://www.example.com" target="_blank">Link</a>
<img src="image.jpg" alt="Image">
<input type="text" id="name" class="input-field">- Headings and Paragraphs:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph of text.</p>- Styles and Text Formatting:
<p style="color: blue; font-size: 18px;">Blue text with font size 18px</p>
<strong>Bold text</strong>
<em>Italicized text</em>- Quotations and Citations:
<blockquote>
<p>This is a quotation.</p>
<footer>- Author</footer>
</blockquote>
<q>This is a short quotation.</q>
<cite>Source of the quotation</cite>- Comments:
<!-- This is a comment -->- HTML with CSS:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Heading with red color</h1>
</body>
</html>- Links:
<a href="https://www.example.com">Visit Example.com</a>- Images:
<img src="image.jpg" alt="Image description">- Tables:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
</table>- Lists:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>- Block and Inline Elements:
<div>This is a block element.</div>
<span>This is an inline element.</span>- Classes and IDs:
<p class="highlight">This paragraph has a class.</p>
<div id="container">This div has an ID.</div>- Layout:
<header>
<h1>My Website</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<section>
<h2>About</h2>
<p>About content goes here.</p>
</section>
<footer>
<p>© 2023 My Website</p>
</footer>- IFrame:
<iframe src="https://www.example.com"></iframe>- Head Elements:
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css">
<script
src="script.js"></script>
</head>- Scripts:
<script>
alert("Hello, world!");
</script>- Computer code elements:
<p>Inline code: <code>var x = 5;</code></p>
<pre>
<code>
function greet() {
console.log("Hello, world!");
}
</code>
</pre>- Forms:
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<input type="submit" value="Submit">
</form>- Form Elements:
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<textarea id="message" name="message" rows="4" cols="30"></textarea>- Input Types:
<input type="text">
<input type="email">
<input type="password">
<input type="checkbox">
<input type="radio">
<input type="submit">
<input type="reset">- Input Attributes:
<input type="text" placeholder="Enter your name" autocomplete="off">
<input type="number" min="1" max="100" step="2" value="1">
<input type="date" required>- Canvas Graphics:
<canvas id="myCanvas" width="200" height="100"></canvas>- SVG Graphics:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>- Media:
<audio src="music.mp3" controls></audio>
<video src="video.mp4" controls></video>- Geolocation:
<button onclick="getLocation()">Get Location</button>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
alert("Latitude: " + position.coords.latitude + "\nLongitude: " + position.coords.longitude);
}
</script>- Local Storage:
<button onclick="saveData()">Save Data</button>
<button onclick="retrieveData()">Retrieve Data</button>
<script>
function saveData() {
localStorage.setItem("name", "John");
}
function retrieveData() {
var name = localStorage.getItem("name");
alert("Name: " + name);
}
</script>These are just a few examples to give you a wide range of HTML elements and features. Feel free to explore and experiment with them further!
Join the conversation