HTML day 1

 Mastering HTML: Day 1 - The Basics of HTML

Welcome to your first day of learning HTML! HTML, or HyperText Markup Language, is the standard language used to create web pages. It’s the backbone of the web, providing structure to content. Today, we'll cover the basics to get you started on your journey to mastering HTML.

What is HTML?

HTML stands for HyperText Markup Language. It's used to create web pages and web applications. HTML describes the structure of a webpage using markup. HTML elements are the building blocks of HTML pages, represented by tags.

Setting Up Your Environment

Before we dive into writing HTML, let’s set up a simple environment for coding:

  1. Text Editor: Use a simple text editor like Notepad (Windows) or TextEdit (Mac). For a more robust experience, you can use editors like Visual Studio Code, Sublime Text, or Atom.
  2. Browser: You’ll need a web browser to view your HTML files. Common browsers include Chrome, Firefox, Safari, and Edge.

The Basic Structure of an HTML Document

An HTML document has a basic structure that includes several key elements. Here’s what a simple HTML document looks like:

<!DOCTYPE html>

<html>

<head>

    <title>My First HTML Page</title>

</head>

<body>

    <h1>Welcome to My First HTML Page</h1>

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

</body>

</html>

Let’s break this down:

  • <!DOCTYPE html>: This declaration defines the document type and version of HTML.
  • <html>: The root element that contains all other HTML elements.
  • <head>: Contains meta-information about the HTML document, like its title and links to scripts and stylesheets.
  • <title>: Sets the title of the webpage, which appears in the browser tab.
  • <body>: Contains the content of the HTML document, such as text, images, links, etc.

Your First HTML Elements

Now, let’s look at some basic HTML elements you’ll use frequently.

  1. Headings

    html

    <h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<!-- And so on up to <h6> -->

  2. Paragraphs

    html

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

  3. Links

    html

    <a href="https://www.example.com">This is a link</a>

  4. Images

    html

    <img src="image.jpg" alt="Description of image">

  5. Lists

    • Ordered List
      html

      <ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>
    • Unordered List
      html

      <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

Creating Your First Webpage

Let’s put it all together. Create a new file called index.html and add the following code:

html

<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Welcome to My First HTML Page</h1>
    <p>This is a paragraph of text.</p>
    <a href="https://www.example.com">Visit Example.com</a>
    <img src="image.jpg" alt="Sample Image">
    <h2>My Favorite Foods</h2>
    <ul>
        <li>Pizza</li>
        <li>Burgers</li>
        <li>Sushi</li>
    </ul>
</body>
</html>

Save the file and open it in your web browser. You should see a webpage with a heading, paragraph, link, image, and list.

Summary

Today, you’ve learned the basics of HTML, including:

  • Setting up your coding environment
  • The basic structure of an HTML document
  • Common HTML elements like headings, paragraphs, links, images, and lists

Congratulations on completing Day 1! Tomorrow, we’ll dive deeper into more complex HTML elements and attributes. Happy coding!