Scribd
Upload
4 views4 pages

HTML Basics: Structure, Tags, and Forms

This document provides a comprehensive introduction to HTML, covering its purpose, basic structure, and essential elements such as text formatting, lists, links, images, tables, forms, and semantic HTML. Each section includes specific goals and activities to reinforce learning, culminating in a mini project to apply the acquired skills. Best practices for writing HTML are also highlighted to ensure clean and effective coding.

Uploaded by

Muhammad Ahmed Raza
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views4 pages

HTML Basics: Structure, Tags, and Forms

This document provides a comprehensive introduction to HTML, covering its purpose, basic structure, and essential elements such as text formatting, lists, links, images, tables, forms, and semantic HTML. Each section includes specific goals and activities to reinforce learning, culminating in a mini project to apply the acquired skills. Best practices for writing HTML are also highlighted to ensure clean and effective coding.

Uploaded by

Muhammad Ahmed Raza
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML

1. Introduction to HTML
Goal: Understand what HTML is and why we use it

What is HTML?
What websites are made of (HTML, CSS, JS – high level only)
How browsers read HTML
Basic tools:
Any browser (Chrome)
Simple editor (Notepad / VS Code)

Activity:
Open a .html file in a browser

2. Basic HTML Structure


Goal: Learn the skeleton of an HTML page

<!DOCTYPE html>
<html> , <head> , <title> , <body>
How tags work (opening & closing tags)
Indentation (good habits)

Activity:
Create a basic HTML page with a title and text

3. Text Content & Formatting


Goal: Display text properly

Headings: <h1> to <h6>


Paragraph: <p>
Line break: <br>
Bold & Italic: <b> , <i> , <strong> , <em>

Activity:
Create a “My Introduction” page
4. Lists
Goal: Organize content

Ordered list <ol>


Unordered list <ul>
List items <li>

Activity:
Create:

Favorite foods list


Daily routine list

5. Links & Images


Goal: Add navigation and media

Links: <a href="">


Open link in new tab
Images: <img src="" alt="">
Image paths (same folder)

Activity:
Create a page with:

A link to Google
A personal image

6. Tables
Goal: Display data in rows & columns

<table> , <tr> , <th> , <td>


Simple table structure

Activity:
Create a timetable or marks table
7. Forms
Goal: Collect user input

<form>
<input> (text, password, radio, checkbox)
<label>
<textarea>
<button>

Activity:
Create a simple registration form

8. Semantic HTML
Goal: Write meaningful HTML

<header> , <footer>
<nav> , <section> , <article>
Why semantic tags matter

Activity:
Convert an old page into semantic layout

Containers

<div>
<span>

9. Basic HTML Best Practices


Proper nesting
Use of alt in images
Clean formatting
Commenting: <!-- -->

10. Mini Project


Goal: Apply everything learned
Project ideas:

Personal profile page

You might also like