HTML full course

HTML Overview

HTML (HyperText Markup Language) is the standard language used to create webpages. It structures the content by defining elements like text, images, links, and forms. HTML is made up of tags, which are enclosed in angle brackets (<.>) Most tags come in pairs: an opening tag (<tag>) and a closing tag (</tag>), with content placed between the two. Some tags, however, are self-closing.

Basic Structure of an HTML Document

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

<!DOCTYPE html>: Declares the document type and version of HTML.
<html>: The root element that wraps all other elements.
<head>: Contains metadata (e.g., title, charset, viewport).
<title>: Specifies the webpage title displayed on the browser tab.
<body>: Contains the main visible content of the webpage.

HTML Tags and Their Uses

1. Text Formatting Tags

<h1> to <h6>: Headings, <h1> being the largest and <h6> the smallest.
```
html
<h1>Main Heading</h1>
<h2>Subheading</h2>
```
<p>: Paragraph.
```
html
<p>This is a paragraph.</p>
```
<b> or <strong>: Bold text. <strong> also adds semantic meaning, indicating important content.
```
html
<strong>Important Text</strong>
```
<i> or <em>: Italic text. <em> indicates emphasis.
```
html
<em>Emphasized Text</em>
```

2. Links and Navigation

<a>: Creates a hyperlink. It uses the href attribute to define the destination.
```
html
<a href="https://www.example.com">Visit Example</a>
```

<nav>: Used to define navigation links.

html
<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
</nav>

3. Images

<img>: Embeds an image. It uses the src attribute for the image source and alt for alternative text.
```
html
<img src="image.jpg" alt="Description of the image">
```

4. Lists

<ul>: Creates an unordered (bulleted) list.

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

<ol>: Creates an ordered (numbered) list.

html
<ol>
  <li>Step 1</li>
  <li>Step 2</li>
</ol>

5. Tables

<table>: Creates a table. Used with <tr>, <th>, and <td> for rows, headers, and data cells respectively.

html
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

6. Forms and Input

<form>: Defines an HTML form for collecting user input.

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

<input>: Used for different types of user input (text, radio, checkbox, etc.).

html
<input type="text" name="username">
<input type="password" name="password">

7. Media Tags

<audio>: Embeds an audio player.

html
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<video>: Embeds a video player.

html
<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
</video>

Advanced HTML Tags and Features

1. Semantic HTML5 Tags

Semantic tags improve the readability of the HTML code by clearly defining the purpose of different sections:

<header>: Defines the header of a page or section.

html
<header>
  <h1>Website Title</h1>
  <nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
  </nav>
</header>

<section>: Groups related content.

html
<section>
  <h2>Section Title</h2>
  <p>Some content here...</p>
</section>

<article>: Defines independent, self-contained content (e.g., blog posts).

html
<article>
  <h2>Article Title</h2>
  <p>Article content...</p>
</article>

<footer>: Represents the footer of a page or section.

html
<footer>
  <p>&copy; 2024 Your Website</p>
</footer>

2. HTML5 Features

<canvas>: Allows dynamic, scriptable rendering of 2D shapes and bitmap images.
```
html
<canvas id="myCanvas"></canvas>
```

<svg>: Used to define vector-based graphics.

html
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

3. Interactive Elements

<details>: Defines additional details the user can view or hide.

html
<details>
  <summary>More Info</summary>
  <p>This is extra content.</p>
</details>

<dialog>: Creates a dialog box that can be opened and closed using JavaScript.
```
html
<dialog open>
  <p>This is a dialog box.</p>
</dialog>
```

Complex Examples

1. Form with Validation and Custom Inputs

html
<form action="/submit" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="dob">Date of Birth:</label>
  <input type="date" id="dob" name="dob">
  
  <label for="color">Favorite Color:</label>
  <input type="color" id="color" name="color">
  
  <input type="submit" value="Submit">
</form>

2. Responsive Layout with Flexbox

html
<div style="display: flex; flex-direction: row;">
  <div style="flex: 1; background-color: lightblue;">Column 1</div>
  <div style="flex: 1; background-color: lightgreen;">Column 2</div>
</div>

3. Embedding Media and Canvas Drawing

html
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.moveTo(0,0);
  ctx.lineTo(200,100);
  ctx.stroke();
</script>

Conclusion

HTML, as a markup language, allows the structure and presentation of content on the web. It starts with simple tags for text and links and progresses to complex structures like forms, media embedding, and interactive elements.

Thanks for more visit here and comment in which topic you have Doubt..

Search This Blog

INFOTECH