Module 02

Lesson 7: HTML Images

Learn how to display images, control image sizes, improve accessibility and create professional webpages using images.

What You Will Learn

What HTML Images Are
Image Tag
src Attribute
alt Attribute
Image Width and Height
Accessibility
Image Best Practices

Example 1

<img src="student.jpg" alt="Student">

Displays an image named student.jpg.

Example 2

<img src="logo.png" alt="Company Logo" width="300">

Displays a company logo with a width of 300 pixels.

Best Practices

Always use alt text.
Use descriptive file names.
Optimize image sizes.
Avoid extremely large images.

Watch Full Video Lesson Download Notes PDF

Lesson 8: HTML Lists

Learn how to organize information using ordered lists, unordered lists, and nested lists. Lists are widely used in menus, course outlines, product categories, and website navigation.

What You Will Learn

What HTML Lists Are
Ordered Lists
Unordered Lists
List Items
Nested Lists
Website Navigation Menus
List Best Practices

Example 1: Ordered List

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

Displays a numbered list.

Example 2: Unordered List

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Displays a bulleted list.

Example 3: Nested List

<ul>
    <li>Web Development
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
</ul>

Creates a list inside another list.

Real World Applications

Website Navigation Menus
Course Modules
Product Categories
Feature Lists
Service Lists

Best Practices

Use ordered lists for sequences.
Use unordered lists for general information.
Keep list items short and clear.
Use nested lists carefully.

Watch Full Video Lesson Download Notes PDF

Lesson 9: HTML Tables

Learn how to organize and display data using HTML tables. Tables are commonly used for student records, employee information, financial reports, product catalogs, and schedules.

What You Will Learn

What HTML Tables Are
Table Structure
Rows and Columns
Table Headers
Table Data Cells
Creating Professional Tables
Real World Applications

Example 1: Basic Table

<table border="1">

<tr>
<th>Name</th>
<th>Course</th>
</tr>

<tr>
<td>John</td>
<td>HTML</td>
</tr>

</table>

Creates a simple table with one student record.

Example 2: Student Information Table

<table border="1">

<tr>
<th>ID</th>
<th>Name</th>
<th>Course</th>
</tr>

<tr>
<td>001</td>
<td>Alice</td>
<td>Web Development</td>
</tr>

</table>

Displays student information in rows and columns.

Example 3: Product Table

<table border="1">

<tr>
<th>Product</th>
<th>Price</th>
</tr>

<tr>
<td>Laptop</td>
<td>$500</td>
</tr>

</table>

Displays products and prices.

Important Table Tags

<table> = Creates a table
<tr> = Table Row
<th> = Table Header
<td> = Table Data

Real World Applications

Student Records
Employee Lists
Accounting Reports
Payroll Data
Inventory Systems
Timetables

Best Practices

Use table headers for column titles.
Keep data organized.
Use tables only for data, not page layout.
Make tables easy to read.

Watch Full Video Lesson Download Notes PDF

Practice Exercises

Test your understanding before moving to the next module. Complete these exercises without looking at the notes.

Define HTML in your own words.
Create a webpage containing a heading and a paragraph.
Explain the difference between a web page and a website.
Identify five websites you visit regularly and explain their purpose.
Create a simple HTML document structure from memory.
Explain why HTML is called a markup language.
Create three different heading levels (H1, H2, H3).
Add a hyperlink that opens Google.
Insert an image into a webpage.
Challenge: Create your first personal profile webpage.

Download Full Exercise Pack

Module 02 HTML Fundamentals

Course Overview

Lesson 7: HTML Images

What You Will Learn

Example 1

Example 2

Best Practices

Lesson 8: HTML Lists

What You Will Learn

Module Lessons

Example 1: Ordered List

Example 2: Unordered List

Example 3: Nested List

Real World Applications

Best Practices

Lesson 9: HTML Tables

What You Will Learn

Example 1: Basic Table

Example 2: Student Information Table

Example 3: Product Table

Important Table Tags

Real World Applications

Best Practices

Watch Video Lesson

Example

Hello World

Example of paragraph

Example of website

Module Challenge

Practice Exercises

Download Complete Notes

Premium Materials