HTML Course
Tags: webdev, html
Published: 2024-01-25 17:04:53

{% embed https://youtu.be/p7YcArEkJfg %}

#### Introduction to HTML

HTML (Hypertext Markup Language) is the standard language for creating web pages. It describes the structure of web pages using markup.

#### HTML Document Structure

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

- `<!DOCTYPE html>` declares the document type and version.
- `<html>` is the root element.
- `<head>` contains meta-information about the HTML document.
- `<meta charset="UTF-8">` sets the character encoding.
- `<meta name="viewport" content="width=device-width, initial-scale=1.0">` ensures proper rendering on various devices.
- `<title>` sets the title of the web page.
- `<body>` contains the content of the HTML document.
- `<h1>` to `<h6>` are heading tags.
- `<p>` is a paragraph tag.

#### HTML Elements and Attributes

HTML elements are the building blocks of a webpage, and they can have attributes.

```html
<a href="https://www.example.com" target="_blank">Visit Example</a>
<img src="image.jpg" alt="Description of the image">
```

- `<a>` is an anchor (link) element.
- `href` is an attribute specifying the link's destination.
- `target="_blank"` opens the link in a new tab.
- `<img>` is an image element.
- `src` is an attribute specifying the image source.
- `alt` provides alternative text for accessibility.

#### Lists and Tables

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

<ol>
    <li>First</li>
    <li>Second</li>
</ol>

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>
```

- `<ul>` creates an unordered list.
- `<ol>` creates an ordered list.
- `<li>` is a list item.
- `<table>` creates a table.
- `<tr>` defines a table row.
- `<th>` defines a table header cell.
- `<td>` defines a table data cell.

#### Forms and Input Elements

```html
<form action="/submit" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>

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

- `<form>` creates a form.
- `action` specifies where the form data should be sent.
- `method` defines the HTTP method (e.g., "post").
- `<label>` creates a label for an input field.
- `for` associates the label with the input field.
- `<input>` is an input element.
- `type` defines the input type (e.g., "text", "password").
- `id` provides a unique identifier.
- `name` specifies the name for form submission.
- `required` makes the input mandatory.
- `<submit>` is a submit button.

#### HTML5 Semantic Elements

HTML5 introduced semantic elements for better page structure.

```html
<header>
    <h1>Website 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>
    <article>
        <h2>Article Title</h2>
        <p>Content goes here.</p>
    </article>

    <article>
        <h2>Another Article</h2>
        <p>More content.</p>
    </article>
</section>

<footer>
    <p>&copy; 2024 My Website</p>
</footer>
```

- `<header>` defines a header for a section or a page.
- `<nav>` represents a navigation menu.
- `<section>` groups related content.
- `<article>` defines independent, self-contained content.
- `<footer>` contains footer information.

### Conclusion

I Hope this course provides a foundational understanding of HTML and HTML5. Practice by creating your own HTML pages in Visual Studio Code, exploring additional elements, and diving into CSS for styling will be our next watch out>> :). Happy coding!