HTML Tutorial: HTML Tutorial

What is HTML?

HTML (HyperText Markup Language) is the standard language used to create web pages. It provides the structure for web content, such as headings, paragraphs, images, links, and more. HTML documents are plain text files with tags that define the elements of the page.

Basic Structure of an HTML Document

An HTML document is made up of tags, which are enclosed in angle brackets. Here's the basic structure of an HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph of text.</p>

</body>
</html>

Explanation:

<!DOCTYPE html>: This declaration defines the document type and version (HTML5 in this case).
<html>: This is the root element that contains the entire document.
<head>: Contains meta-information about the document like character set, title, and links to stylesheets or scripts.
<meta charset="UTF-8">: Specifies the character encoding for the document.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Makes the page responsive on mobile devices.
<title>: Sets the title of the webpage, which appears in the browser tab.
<body>: Contains the visible content of the webpage, such as text, images, and links.

Common HTML Elements

Here are some commonly used HTML tags:

Headings
HTML has six levels of headings, <h1> to <h6>, with <h1> being the largest.

<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>

Paragraphs
Use the <p> tag for paragraphs of text.
```
<p>This is a paragraph of text.</p>
```
Links
The <a> tag is used to create hyperlinks. The href attribute defines the destination URL.
```
html
<a href="https://www.example.com">Click here to visit Example</a>
```
Images
Use the <img> tag to embed images. The src attribute defines the image file, and alt provides alternative text.
```
html
<img src="image.jpg" alt="Description of the image">
```

Lists
HTML supports ordered and unordered lists.

Unordered List (bullets):

html
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Ordered List (numbered):

html
<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Tables
Use <table>, <tr>, <th>, and <td> to create tables.

html
<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

Forms
HTML forms are used to collect user input. Here's a simple form with a text input and a submit button:

html
<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <br>
    <input type="submit" value="Submit">
</form>

HTML Attributes

Attributes provide additional information about HTML elements. They are always written within the opening tag of an element.

class: Specifies one or more class names for an element (used for styling with CSS).
id: Specifies a unique identifier for an element.
href: Specifies the URL for a link.
src: Specifies the source file for images or videos.
alt: Provides alternative text for images.
style: Adds inline CSS styling to an element.

Example of using attributes:

html
<p id="intro" class="text-muted" style="color: blue;">This is a styled paragraph.</p>

HTML Forms and Inputs

Forms are essential for gathering user data, such as text inputs, checkboxes, radio buttons, and submit buttons.

html
<form action="/submit" method="post">
    <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="gender">Gender:</label>
    <input type="radio" id="male" name="gender" value="male"> Male
    <input type="radio" id="female" name="gender" value="female"> Female<br><br>

    <label for="newsletter">Subscribe to newsletter:</label>
    <input type="checkbox" id="newsletter" name="newsletter" value="yes"><br><br>

    <input type="submit" value="Submit">
</form>

HTML5 Features

HTML5 introduced several new features, such as:

Audio & Video
HTML5 includes native support for embedding audio and video.

html
<audio controls>
    <source src="audio.mp3" type="audio/mp3">
    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>

Canvas
The <canvas> element allows for drawing graphics via JavaScript.

html
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(50, 50, 150, 100);
</script>

Local Storage
HTML5 allows storing data locally in the browser.

html
<script>
    localStorage.setItem("name", "John");
    alert(localStorage.getItem("name"));
</script>

Conclusion

This is just an overview of HTML's basic structure and some common elements. As you dive deeper, you'll learn about more advanced topics like:

CSS for styling HTML elements
JavaScript for adding interactivity
Semantic HTML elements like <header>, <footer>, <article>, and <section>

If you want to get hands-on, you can start creating simple HTML pages and gradually experiment with more complex structures.

HTML Tutorial

Tuesday, December 17, 2024

HTML Tutorial

What is HTML?

Basic Structure of an HTML Document

Explanation:

Common HTML Elements

HTML Attributes

HTML Forms and Inputs

HTML5 Features

Conclusion

No comments:

Post a Comment

How can you refer to a CSS file in a web page?

Report Abuse

Labels