Html Lessons for Beginners

Beginner HTML Lessons

Beginner HTML Lessons for ESL Students

Lesson 1: Introduction to HTML

Objective: Students will learn what HTML is and how to create a basic HTML document.

Key Vocabulary:

  • HTML (HyperText Markup Language)
  • Tag
  • Element
  • Webpage
  • Browser

Example:


<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Activity:

Create your first HTML file and open it in a browser.

Lesson 2: Adding Headings and Paragraphs

Objective: Students will learn how to use headings and paragraphs to structure text.

Key Vocabulary:

  • Heading
  • Paragraph
  • Content

Example:


<h1>This is a Main Heading</h1>
<h2>This is a Subheading</h2>
<p>This is a paragraph. It contains some text.</p>

Activity:

Create a webpage with one main heading, two subheadings, and three paragraphs.

Lesson 3: Adding Links and Images

Objective: Students will learn how to add links and images to their webpages.

Key Vocabulary:

  • Link
  • Image
  • Source (src)
  • Hyperlink

Example:


<a href="https://www.example.com">Visit Example Website</a>
<img src="image.jpg" alt="A description of the image">

Activity:

Create a webpage with one link and one image.

Lesson 4: Creating Lists

Objective: Students will learn how to create ordered and unordered lists.

Key Vocabulary:

  • List
  • Ordered list
  • Unordered list

Example:


<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>

Activity:

Create a webpage with an unordered list of your favorite foods and an ordered list of your daily routine.

Lesson 5: Styling with Basic CSS

Objective: Students will learn how to add basic styles using CSS.

Key Vocabulary:

  • CSS (Cascading Style Sheets)
  • Style
  • Color
  • Font

Example:


<style>
    h1 {
        color: blue;
    }
    p {
        font-size: 20px;
    }
</style>

Activity:

Add styles to your webpage to change the color of the heading and the font size of the paragraphs.

Lesson 6: Review and Mini-Project

Objective: Students will review what they’ve learned and create a simple personal webpage.

Activity:

Create a personal webpage that includes:

  • A heading with your name.
  • A paragraph about yourself.
  • A list of your hobbies.
  • A link to your favorite website.
  • An image of something you like.

Lesson 7: Creating Tables

Objective: Students will learn how to create tables to organize data.

Key Vocabulary:

  • Table
  • Row
  • Column
  • Header

Example:


<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>Anna</td>
        <td>25</td>
        <td>New York</td>
    </tr>
</table>

Activity:

Create a webpage with a table that includes a header row and at least three rows of data.

Lesson 8: Adding Forms

Objective: Students will learn how to create forms to collect user input.

Key Vocabulary:

  • Form
  • Input
  • Label
  • Submit

Example:


<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>
    <button type="submit">Submit</button>
</form>

Activity:

Create a webpage with a form that includes a text field, an email field, and a submit button.

Lesson 9: Embedding Videos and Maps

Objective: Students will learn how to embed videos and maps.

Key Vocabulary:

  • Embed
  • Video
  • Map
  • Iframe

Example:


<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen></iframe>

Activity:

Create a webpage with an embedded YouTube video and a Google Map.

Lesson 10: Review and Final Project

Objective: Students will review what they’ve learned and create a comprehensive webpage.

Activity:

Create a personal webpage that includes:

  • A heading with your name.
  • A paragraph about yourself.
  • A table of your weekly schedule.
  • A form for visitors to contact you.
  • An embedded video or map.

Lesson 11: Using <pre> and <code> Tags

Objective: Students will learn how to use <pre> and <code> tags to display code snippets.

Key Vocabulary:

  • Preformatted text
  • Code snippet
  • Indentation

Example:


<pre>
<code>
<html>
    <head>
        <title>My Webpage</title>
    </head>
    <body>
        <h1>Welcome to My Webpage</h1>
        <p>This is a paragraph.</p>
    </body>
</html>
</code>
</pre>

Activity:

Create a webpage that includes a code snippet using <pre> and <code> tags.