Day 1: Getting Started with HTML
Tags: html, css, javascript, beginners
Published: 2024-05-29 02:31:47

Welcome to the first day of your journey to mastering HTML and CSS! In this blog post, we'll cover the basics of HTML, the fundamental language for creating web pages. By the end of this post, you'll have created your very first HTML page.

#### What is HTML?

HTML (HyperText Markup Language) is the standard language used to create and design documents on the web. It structures the content, which includes text, images, links, and other media, to be displayed in web browsers.

#### Structure of an HTML Document

Every HTML document has a basic structure, which includes several essential elements. Here's a simple example 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>My First HTML Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>Welcome to my first HTML page.</p>
</body>
</html>
```

Let's break down the components:

- `<!DOCTYPE html>`: This declaration defines the document type and version of HTML.
- `<html lang="en">`: The root element of an HTML page, with the `lang` attribute specifying the language.
- `<head>`: Contains meta-information about the document, such as the character set and the title.
- `<meta charset="UTF-8">`: Specifies the character encoding for the document.
- `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: Ensures the webpage is responsive on different devices.
- `<title>`: Sets the title of the webpage, which appears in the browser tab.
- `<body>`: Contains the content of the webpage, visible to users.

#### Creating Your First HTML Page

1. **Set Up Your Environment**:
   - You only need a text editor (like Notepad on Windows or TextEdit on Mac) and a web browser (like Chrome, Firefox, or Safari).

2. **Write Your HTML**:
   - Open your text editor and type the HTML code shown above.

3. **Save Your File**:
   - Save the file with an `.html` extension. For example, `index.html`.

4. **Open Your HTML File in a Browser**:
   - Double-click the saved file or right-click and choose "Open with" and select your browser.

You should see a page with the heading "Hello, World!" and a paragraph that says, "Welcome to my first HTML page."

#### Basic HTML Tags

Here are some fundamental HTML tags you'll use frequently:

- **Headings**: Define headings with `<h1>` to `<h6>`.
  ```html
  <h1>Main Heading</h1>
  <h2>Subheading</h2>
  ```

- **Paragraphs**: Define paragraphs with `<p>`.
  ```html
  <p>This is a paragraph.</p>
  ```

- **Links**: Create hyperlinks with `<a>`.
  ```html
  <a href="https://www.example.com">Visit Example</a>
  ```

- **Images**: Embed images with `<img>`.
  ```html
  <img src="image.jpg" alt="Description of image">
  ```

#### Summary

In this first blog post, we introduced HTML and its basic structure. You learned how to create a simple HTML document and understood the purpose of essential HTML tags. In the next post, we'll dive deeper into text formatting and links, helping you build more structured content.

Stay tuned for Day 2, where we'll continue our HTML journey. Happy coding!

---

*Follow me for more tutorials and tips on web development. Feel free to leave comments or questions below!*

#### Follow and Subscribe:
- **Website**: [Dipak Ahirav] (https://www.dipakahirav.com)
- **Email**: dipaksahirav@gmail.com
- **Instagram**: [devdivewithdipak](https://www.instagram.com/devdivewithdipak)
- **YouTube**: [devDive with Dipak](https://www.youtube.com/@DevDivewithDipak)
- **LinkedIn**: [Dipak Ahirav](https://www.linkedin.com/in/dipak-ahirav-606bba128)