Lesson 1: Introduction to HTML and Webpages

This is a lesson plan for one of my students in 6th grade without prior knowledge of programming.

1. What is HTML?

HTML (HyperText Markup Language) is the standard language used to create and design webpages. It defines the structure and layout of a webpage by using various elements and tags. When viewed in a web browser, HTML allows users to see formatted text, images, videos, links, and more, making it the backbone of web development.

2. What is a Webpage and a Website?

Webpage: A webpage is a single document that can be displayed on the web. It typically consists of HTML content and is viewed using a web browser.
Website: A website is a collection of multiple interconnected webpages hosted on the same domain. Think of it as a book, where each webpage is like a page, and the website is the entire book.

3. Overview of HTML Structure: Tags, Elements, and Attributes

HTML Tags: HTML documents are built using tags, which are enclosed in angle brackets < >. Each tag usually comes in pairs: an opening tag (e.g., <p>) and a closing tag (e.g., </p>).
HTML Elements: An element consists of the opening tag, content (optional), and closing tag. For example, <p>Hello World!</p> is a paragraph element where <p> is the opening tag, Hello World! is the content, and </p> is the closing tag.
Attributes: Attributes provide additional information about elements. They are written inside the opening tag and usually consist of a name and a value. For example, <a href="https://example.com">Link</a> contains the href attribute that specifies the URL for a link.

4. Basic HTML Tags

Here are some essential HTML tags you'll use when building webpages:

<html>: This is the root element that encloses the entire HTML document.
<head>: Contains meta-information about the webpage (e.g., title, character set, linked stylesheets).
<title>: Defines the title of the webpage, which appears in the browser tab.
<body>: Contains the visible content of the webpage, such as text, images, and links.

5. Creating Your First Webpage: "Hello World!"

Let’s create a simple webpage using basic HTML tags to display a message.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first webpage using HTML.</p>
  </body>
</html>

Explanation:
- <!DOCTYPE html>: Declares the document type as HTML5.
- <html>: The root tag of the HTML document.
- <head>: Contains the webpage's meta-information, including the title.
- <title>: Displays "My First Webpage" on the browser tab.
- <body>: The visible content includes a heading (<h1>) and a paragraph (<p>).
- <h1>: Defines a large, bold heading with the text "Hello World!".
- <p>: Defines a paragraph with the text "This is my first webpage using HTML."

6. Activity: Create a Simple Webpage

Open a text editor (such as Notepad, VS Code, or Sublime Text).
Copy the following HTML code:

<!DOCTYPE html>
<html>
  <head>
    <title>My Simple Webpage</title>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <p>This is my first webpage created with HTML!</p>
  </body>
</html>

Save the file as index.html.
Open the file in a web browser to view your first webpage.

7. Assignment: Extend Your Webpage

Add another heading (<h2>) and a paragraph (<p>) to your existing webpage.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Extended Webpage</title>
  </head>
  <body>
    <h1>Welcome to My Extended Webpage</h1>
    <p>This is my first webpage created with HTML!</p>
    <h2>About This Page</h2>
    <p>This page is built to practice basic HTML skills.</p>
  </body>
</html>

Instructions:
- Save the HTML file and refresh it in your web browser to see the changes.
- Practice editing, saving, and viewing your webpage.

Key Takeaways:

HTML is used to structure webpages.
A webpage is a single HTML document, while a website is a collection of webpages.
HTML tags, elements, and attributes are the building blocks of HTML.
Basic tags include <html>, <head>, <title>, and <body>.
You can easily create and edit HTML files using a text editor and view them in your browser.

Blog