Stage 1: Zen of Coding
Basic introduction to HTML
  • Basic introduction to HTML

    HTML (HyperText Markup Language) is the standard markup language used to create web pages. It's the foundation of the web, and it's used to structure and display content on the internet. If you're new to web development, learning HTML is the first step to building websites and web applications. HTML is a markup language, which means that it uses tags to define the structure and content of web pages. Tags are enclosed in angle brackets, like this: <tag>. Most tags have an opening tag and a closing tag, like this: <tag>content</tag>. The content between the tags is what's displayed on the web page. Here are some of the most basic HTML tags you'll need to know:

    • <html>: This tag defines the start and end of an HTML document.
    • <head>: This tag defines the head section of an HTML document, which contains information about the document such as the title, meta information, and links to stylesheets.
    • <title>: This tag defines the title of the document, which is displayed in the browser's title bar or tab.
    • <body>: This tag defines the body of the document, which contains the main content of the web page.
    • **div** and **span**
    • <h1> to <h6>: These tags define headings of different levels, with <h1> being the highest-level heading and <h6> being the lowest.
    • <p>: This tag defines a paragraph of text.
    • <a>: This tag creates a hyperlink to another web page or to a specific location on the same page.
    • <img>: This tag inserts an image into the web page.
    • <ul> and <li>: These tags create an unordered list, with each item in the list being defined using a <li> tag.
    • <ol> and <li>: These tags create an ordered list, with each item in the list being defined using a <li> tag.
    • <table>, <tr>, <th>, and <td>: These tags create tables for organizing data.
    • <form>, <input>, and <label>: These tags are used to create forms for collecting user input. Here's an example of a basic HTML page that includes a table, a form, an unordered list, and an ordered list:
    <!DOCTYPE html>
    <html>
      <head>
        <title>My First HTML Page</title>
      </head>
      <body>
        <h1>Welcome to my website!</h1>
        <p>This is my first web page. I hope you like it!</p>
        <table>
          <tr>
            <th>Product</th>
            <th>Price</th>
          </tr>
          <tr>
            <td>Apples</td>
            <td>$1.99/lb</td>
          </tr>
          <tr>
            <td>Oranges</td>
            <td>$0.99/lb</td>
          </tr>
        </table>
        <form>
          <label for="name">Name:</label>
          <input type="text" id="name" name="name" /><br />
          <label for="email">Email:</label>
          <input type="email" id="email" name="email" /><br />
          <input type="submit" value="Submit" />
        </form>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
        <ol>
          <li>Step 1</li>
          <li>Step 2</li>
          <li>Step 3</li>
        </ol>
      </body>
    </html>

    Learn more: Learn HTML (opens in a new tab)