<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
<!DOCTYPE html> declaration defines the document type and version of HTML. <p>This is a paragraph.</p>
name="value". <a href="https://www.example.com">This is a link</a>
<h1> to <h6>. <h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<p> element defines a paragraph. <p>This is a paragraph.</p>
<a> element (anchor) is used to create hyperlinks. <a href="https://www.example.com">Visit Example.com</a>
<img> element is used to embed images.src attribute specifies the path to the image. <img src="image.jpg" alt="Description of image">
<ol>), unordered lists (<ul>), and definition lists (<dl>). <ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<dl>
<dt>Term 1</dt>
<dd>Definition of Term 1</dd>
<dt>Term 2</dt>
<dd>Definition of Term 2</dd>
</dl>
<table> element is used to create tables. <table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<input type="submit" value="Submit">
</form>
<header>Header content</header>
<nav>Navigation links</nav>
<section>Section content</section>
<article>Article content</article>
<footer>Footer content</footer>
<audio> and <video> elements for media playback. <audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<canvas> element is used to draw graphics via scripting (usually JavaScript). <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<button onclick="getLocation()">Try It</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>
This tutorial covered the basics of HTML, including document structure, common elements, forms, semantic HTML, and HTML5 features. HTML is a fundamental technology for web development, and understanding it is crucial for creating well-structured, accessible, and functional web pages. Keep practicing and exploring more advanced topics to enhance your HTML skills. Happy coding!