1. Introduction to HTML
HTML is not a programming language but a markup language used to create the structure of web pages. It consists of a series of elements, which you use to enclose or wrap different parts of the content.
2. HTML Document Structure
Every HTML document should start with a <!DOCTYPE html> declaration, followed by the <html>, <head>, and <body> tags.
html<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
3. HTML Elements and Tags
HTML elements are the building blocks of HTML pages. An HTML element usually consists of a start tag, content, and an end tag.
html<p>This is a paragraph.</p>
4. Text Formatting
HTML provides various tags for formatting text such as <b>, <strong>, <i>, <em>, <u>, <sub>, and <sup>.
html<p><strong>This text is bold.</strong> <em>This text is italicized.</em></p>
5. Links and Anchors
Links are created using the <a> element. The href attribute specifies the URL of the page the link goes to.
html<a href="https://www.example.com">Visit our website</a>
6. Images
Images are displayed using the <img> element. The src attribute specifies the URL of the image.
html<img src="image.jpg" alt="Description of the image">
7. Lists
HTML supports ordered lists (<ol>), unordered lists (<ul>), and definition lists (<dl>).
html<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
8. Tables
Tables are created using the <table>, <tr>, <td>, and <th> elements.
html<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
9. Forms
Forms are used to collect user input. Form elements include <input>, <textarea>, <select>, and <button>.
html<form action="/submit-form" method="post">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<button type="submit">Submit</button>
</form>
10. Semantic HTML
Semantic HTML elements provide meaning to the content, making it more understandable for browsers and developers. Examples include <header>, <footer>, <nav>, <article>, <section>, and <aside>.
html<header>
<h1>Website Header</h1>
</header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<section>
<h2>About Us</h2>
<p>...</p>
</section>
<footer>
<p>© 2024 MyWebsite. All rights reserved.</p>
</footer>
11. HTML5 Multimedia
HTML5 introduced new elements for embedding multimedia content such as audio and video.
html<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
12. HTML5 Semantic Elements
HTML5 introduced several semantic elements that provide more meaning to the structure of a web page, aiding accessibility and search engine optimization.
html<header>
<h1>Main Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<h2>Article Section</h2>
<article>
<h3>Article Title</h3>
<p>Article content...</p>
</article>
</section>
<aside>
<h2>Sidebar</h2>
<p>Additional content...</p>
</aside>
<footer>
<p>© 2024 MyWebsite. All rights reserved.</p>
</footer>
13. HTML Forms (Continued)
HTML forms support various input types such as text, password, email, number, date, checkbox, radio buttons, etc.
html<form action="/submit-form" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="birthdate">Date of Birth:</label>
<input type="date" id="birthdate" name="birthdate" required>
<label for="gender">Gender:</label>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<label for="agree">I agree to the terms and conditions</label>
<input type="checkbox" id="agree" name="agree" required>
<button type="submit">Submit</button>
</form>
14. HTML Meta Tags
Meta tags provide metadata about the HTML document, such as character set, viewport settings, description, keywords, etc.
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is my website">
<meta name="keywords" content="HTML, CSS, JavaScript">
<title>My Website</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
15. HTML Comments
HTML comments are used to add notes to the code for future reference or to temporarily disable part of the code.
html<!-- This is a comment -->
<p>This is a paragraph.</p>
16. HTML Entities
HTML entities are special characters that cannot be easily typed directly into a web page. Instead, they are represented by their entity name or entity number.
html<p>© 2024 MyWebsite. All rights reserved.</p>
<p><p>This is a paragraph</p></p>
17. HTML5 Canvas
The <canvas> element is used to draw graphics, animations, or other visual images on the fly using JavaScript.
html<canvas id="myCanvas" width="200" height="100" style="border:1px solid black;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
18. HTML5 Geolocation
HTML5 provides a Geolocation API that allows a user's location to be accessed through their browser.
html<button onclick="getLocation()">Get Location</button>
<p id="demo"></p>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
document.getElementById("demo").innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
document.getElementById("demo").innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
}
</script>
19. HTML5 Web Storage
HTML5 introduced two new storage objects, localStorage and sessionStorage, which allow web applications to store data locally within the user's browser.
html<script>
// Store data in local storage
localStorage.setItem("username", "John");
// Retrieve data from local storage
var username = localStorage.getItem("username");
document.getElementById("demo").innerHTML = "Welcome, " + username + "!";
</script>
20. HTML5 Drag and Drop
HTML5 introduces native drag and drop functionality, allowing users to drag elements and drop them onto target areas.
html<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.png" draggable="true" ondragstart="drag(event)" width="88" height="31">
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
0 Comments