Creating Your First HTML Page

Tutorial 3 of 5

1. Introduction

Tutorial's Goal

In this tutorial, we aim to take you through the process of creating your first HTML page from scratch. We will start with understanding the basic structure of an HTML document and then gradually move towards adding different elements to the page.

What Will You Learn

By the end of this tutorial, you will be familiar with:
- HTML document structure
- Basic HTML tags and their usage
- Creating a simple webpage

Prerequisites

No prior knowledge of HTML is required. This tutorial is designed for absolute beginners.

2. Step-by-Step Guide

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It's used to describe the structure of web content. HTML consists of a series of elements, which you use to enclose different parts of your content to make it appear or act a certain way.

HTML Tags

HTML tags represent the root of an HTML document. All HTML documents must start with a document type declaration: <!DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>.

HTML Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading, while <h6> defines the least important heading.

HTML Paragraphs

Paragraphs are defined with the <p> tag.

HTML Links

Links are defined with the <a> tag. The link's destination is specified in the href attribute.

Here are some best practices and tips:
- Always close your tags.
- Use comments to describe your code. You can add comments to your HTML code with the following syntax: 
- Keep your code clean and organized. It will help you and others understand it better.

3. Code Examples

Let's create a simple webpage that includes a heading, a paragraph, and a link.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome to My First Web Page!</h1>
    <!-- This is a heading -->

    <p>This is a paragraph.</p>
    <!-- This is a paragraph -->

    <a href="https://www.google.com">This is a link</a>
    <!-- This is a link -->
  </body>
</html>

In the above code:
- <!DOCTYPE html>: This declaration helps with the proper rendering and functioning of web elements.
- <html>: This is the root of an HTML document.
- <head>: This contains metadata (data about data) about the document like its title.
- <title>: The content inside this tag will be displayed on the browser tab.
- <body>: This contains the content visible to web users.
- <h1>: This is the main header.
- <p>: This is a paragraph.
- <a href="https://www.google.com">: This is a link to Google's homepage. The href attribute is used to specify the link's destination.

4. Summary

In this tutorial, you learned about the basic structure of an HTML document, and how to use different HTML tags to create a simple webpage.

Next Steps

The next step in learning HTML is to start experimenting with more HTML tags, like <img> for adding images, <ul> and <ol> for adding lists, and <table> for creating tables.

Additional Resources

For further learning, you can refer to:
- Mozilla Developer Network
- W3Schools

5. Practice Exercises

Now, let's practice what you've learned:

Create an HTML page with two paragraphs and a heading.
Create an HTML page with a link to your favourite website.
Create an HTML page with a heading, two paragraphs, and two links.

Solutions

HTML page with two paragraphs and a heading:

<!DOCTYPE html>
<html>
  <head>
    <title>Practice Exercise 1</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>This is my first paragraph.</p>
    <p>This is my second paragraph.</p>
  </body>
</html>

HTML page with a link to your favourite website:

<!DOCTYPE html>
<html>
  <head>
    <title>Practice Exercise 2</title>
  </head>
  <body>
    <a href="https://www.yourfavouritewebsite.com">Link to my favourite website</a>
  </body>
</html>

HTML page with a heading, two paragraphs, and two links:

<!DOCTYPE html>
<html>
  <head>
    <title>Practice Exercise 3</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>This is my first paragraph.</p>
    <p>This is my second paragraph.</p>
    <a href="https://www.yourfavouritewebsite.com">Link to my favourite website</a>
    <a href="https://www.secondfavouritewebsite.com">Link to my second favourite website</a>
  </body>
</html>

Remember, practice is key to mastering any new skill! Happy coding!