Class VIII HTML - 2026
- Get link
- X
- Other Apps
Advanced HTML Masterclass
Class VIII Computer · Interactive Smart Classroom Lesson. Pick a module below to open its slides — for teacher-led classes or independent student study.
Advanced HTML Masterclass
Interactive Smart Classroom Lesson — Facilitated by Your Teacher
What You'll Learn
By the end of this masterclass, you will be able to build a complete website from scratch using HTML5.
HTML5 Basics
Structure of every web page.
Formatting
Bold, italic, mark & more.
Images
Galleries with alt text.
Tables
Marksheets & timetables.
Forms
Collect real user input.
Multimedia
Audio, video & YouTube.
Semantic HTML
header, nav, main, footer.
Mini Project
A full school website.
Why Learn HTML?
HTML (HyperText Markup Language)
A markup language used to structure content on the web. It is not a programming language — it does not calculate or make decisions. It simply labels each piece of content (heading, paragraph, image, link) so the browser knows how to display it.
Where is HTML used?
- Every website you visit
- Mobile app web-views
- Emails & newsletters
- Games built with web tech
Real Websites Built With HTML
💼 Career Path
Web Developer, UI Designer, App Developer, and even Game Developer all start by learning HTML first!
HTML Introduction
Tag & Element
A tag is a keyword inside angle brackets, like <p>. Most tags come in pairs: an opening tag and a closing tag (which has a forward slash). The opening tag, its content, and its closing tag together form an element.
Think of a tag like a food wrapper: the opening tag is where the wrapper starts, the content is the food inside, and the closing tag is where the wrapper ends. Nothing is ever left half-wrapped!
<p>This is a paragraph.
</p>The HTML Document Structure
Document Structure
Every HTML file follows the same skeleton: <!DOCTYPE html> declares the version, <html> wraps the whole page, <head> holds invisible page info, and <body> holds everything visible.
Compare it to a human body: DOCTYPE is like your birth certificate proving "I am HTML5", <html> is the skin covering everything, <head> is the brain (thinking, unseen), and <body> is the visible parts everyone sees.
Tells the browser "this is HTML5".
The root element — wraps everything.
<head> vs <body>
<head> and <body>
The <head> holds information ABOUT the page (title, links to stylesheets) that is not shown on the page itself. The <body> holds everything the visitor actually sees.
Think of a book: the <head> is like the spine label showing the book's title, while the <body> is all the pages people actually read.
🧠 Quick Check
Where would you put the page's browser-tab title — <head> or <body>? Discuss with your partner.
Headings: <h1> to <h6>
Heading elements
Headings (<h1>–<h6>) create a hierarchy of importance. <h1> is the biggest and most important — usually the page's main title — and <h6> is the smallest. Use only one <h1> per page.
Like a newspaper: <h1> is the giant front-page headline, and <h6> is the tiny caption under a small photo.
Paragraphs, Line Breaks & Rules
<p>, <br>, <hr>
<p> defines a paragraph of text. <br> forces a single line break inside a block without starting a new paragraph. <hr> draws a horizontal rule to separate sections. Both <br> and <hr> are self-closing — they never wrap content.
<p> is starting a new paragraph in your notebook. <br> is like pressing Enter mid-sentence without starting a new paragraph. <hr> is drawing a line across the page to separate two topics.
🎯 Practical Activity — Create Your First Webpage
Using everything from Module 1, write an HTML page and tick off each point as you complete it:
- Starts with <!DOCTYPE html> and wraps everything in <html>
- Has a <head> with a <title> shown on the browser tab
- Has a <body> containing one <h1> with your name
- Includes at least one smaller heading, e.g. <h2>
- Two <p> paragraphs about yourself
- One <br> used inside a paragraph for a line break
- One <hr> separating the two paragraphs
✅ End of Module 1
Great work! Module 2 continues with Text Formatting. Open it from the module table any time.
Bold Text: <b> and <strong>
<b> vs <strong>
Both display text in bold. <b> is purely visual — it carries no extra meaning. <strong> tells the browser and screen readers that the text is genuinely important, which matters for accessibility.
<b> is like highlighting a word just because it looks nice. <strong> is like circling a word in red because it's genuinely important — e.g. "Exam tomorrow!"
Italic & Underline
<i>, <em>, <u>
<i> italicises text for style (like a book title). <em> italicises text to add spoken emphasis/meaning. <u> underlines text — use sparingly, since underlines usually signal a link.
<i> is slanting your handwriting for style. <em> is like raising your voice on a word while speaking. <u> is underlining a keyword the way a teacher does on the blackboard.
Highlight, Small, Superscript & Subscript
<mark>, <small>, <sup>, <sub>
<mark> highlights text with a yellow background. <small> shrinks text, often for fine print. <sup> raises text above the line (powers, footnotes). <sub> lowers text below the line (chemical formulas).
<mark> is a yellow highlighter pen. <small> is the tiny fine print at the bottom of an advertisement. <sup> is the little power number in maths (x²). <sub> is the little number in a chemistry formula (H₂O).
Highlights text
Fine print
Below baseline
Above baseline
Practical Activity: "About Me"
Build a formatted "About Me" section
Tick off each formatting tag as you use it in your page:
- <strong> around one truly important word
- <b> used somewhere just for visual style
- <em> for one emphasised phrase
- <u> under one keyword
- <mark> highlighting a fun fact
- <small> for a fine-print line
- <sup> or <sub> used correctly (e.g. a date or formula)
✅ End of Module 2
Module 3 continues with Lists & Hyperlinks. Open it from the module table any time.
Ordered Lists: <ol>
<ol> and <li>
An ordered list (<ol>) numbers its items automatically. Each item is written inside an <li> (list item) tag. Use it when the sequence matters — steps, rankings, instructions.
Just like a recipe — you must follow numbered steps in exact order, or the dish won't turn out right!
Unordered & Nested Lists
<ul> and nesting
An unordered list (<ul>) shows items with bullet points instead of numbers — use it when order doesn't matter. A list can be nested by placing a whole <ul> or <ol> inside an <li>.
A <ul> is like a shopping list with bullet points where order doesn't matter. Nesting is like a cupboard with shelves — each shelf (sub-list) holds its own group of items inside the bigger cupboard.
Hyperlinks: <a>
<a> (anchor tag)
The anchor tag creates a clickable link. The href attribute (Hypertext REFerence) tells the browser where the link should go. The target="_blank" attribute opens the link in a new tab.
A link is like a magic door — when you knock on it (click), it teleports you to a completely different page.
🌐 What is a URL?
A URL (Uniform Resource Locator) is the full address of a page on the internet — same idea as a home address telling a postman exactly where to deliver a letter.
https://wikipedia.orgThe complete address — works from anywhere.
about.htmlA shortcut to a page on the same site.
#contactJumps to a section on the same page.
The destination URL.
Opens the link in a new tab.
Practical Activity: Favourite Subjects Page
Build a "Favourite Subjects" page
Tick off each point as you complete it:
- An <ol> numbered list ranking your top 3 subjects
- A <ul> bullet list of 4 favourite subjects
- At least one nested list (e.g. topics inside a subject)
- One <a href> link to a learning website
- One link that opens in a new tab using target="_blank"
✅ End of Module 3
Module 4 continues with Images. Open it from the module table any time.
The <img> Tag
<img>, src, alt
<img> embeds an image and is self-closing — it has no separate closing tag. src (source) points to the image file or URL. alt (alternative text) describes the image for screen readers and shows if the image fails to load.
It's like pasting a photo into your notebook. The <code>alt</code> text is the caption you write underneath — so if the photo ever falls off the page, people still know what it was.
Sizing Images & Tooltips
width, height, title
width and height set the image's display size in pixels, preventing the page from jumping while it loads. title shows a small tooltip when the visitor hovers over the image.
It's like deciding how big to cut a photo before pasting it in your notebook, and sticking a small note behind it that only shows when someone lifts the corner (hovers).
Sets the display size in pixels.
Tooltip shown on hover.
Text shown if image fails to load.
Lazy Loading Images
loading="lazy"
This attribute tells the browser to only load an image when it is about to scroll into view, instead of loading everything immediately. This makes long pages load noticeably faster.
Like a waiter who only brings a dish to your table when you actually reach that part of the menu — not all 50 dishes at once!
🧠 Why it matters
A page with 50 photos loads much faster when only the visible ones load first!
Practical Activity: School Photo Gallery
Build a 3-photo gallery with captions
Tick off each attribute as you add it to your images:
- 3 images, each inside its own <figure>
- Every image has a meaningful <code>alt</code> description
- Every image has <code>width</code> and <code>height</code> set
- At least one image has a <code>title</code> tooltip
- Every image uses <code>loading="lazy"</code>
- Every <figure> has a <figcaption> describing the photo
✅ End of Module 4
Module 5 (Tables) is next. Ask for it whenever you're ready.
Table Basics: <table>, <tr>, <td>
<table>, <tr>, <td>
A table is built from <table> (the container), <tr> (table row), and <td> (table data — a single cell). Every row is a <tr>, and every cell inside that row is a <td>.
A table is like a chessboard: rows go across, and each row is divided into little squares (cells) where the data sits.
<th> and <caption>
<th> and <caption>
<th> (table header) works like <td> but is bold and centered by default, marking a cell as a column or row label. <caption> adds a title above the whole table, describing what it shows.
<th> is like the underlined header row you write at the top of a notebook table listing subject names. <caption> is the title you write above the whole table.
Merging Cells Vertically: rowspan
rowspan
The rowspan attribute makes a single cell stretch down and occupy the space of multiple rows. It is written as a number, e.g. rowspan="2" merges 2 rows into one cell.
Imagine one long sticky note stretched down the side of two notebook rows because the same subject applies to both — that's exactly what rowspan does.
Merging Cells Horizontally: colspan
colspan
The colspan attribute makes a single cell stretch across and occupy the space of multiple columns. It is commonly used for a title row that spans the full width of the table.
Like a banner stretched across the top of several columns in your notebook — one wide cell instead of several separate ones.
border, cellpadding & cellspacing
border, cellpadding, cellspacing
border sets the table's border thickness in pixels. cellpadding adds space INSIDE each cell, between the border and the content. cellspacing adds space BETWEEN cells.
<code>border</code> is the picture frame around your table. <code>cellpadding</code> is the soft cushion inside each box. <code>cellspacing</code> is the gap left between boxes on a shelf.
Practical Activity: Marksheet & Timetable
Part A — Student Marksheet
Tick off each point as you build your marksheet:
- <table> with a <caption> naming the marksheet
- A header row built with <th>, not <td>
- At least 4 subject rows with marks
- <border> and <cellpadding> attributes set for readability
Part B — School Timetable
Tick off each point as you build your timetable:
- A <caption> titled "School Timetable"
- One header row listing period numbers using <th>
- At least one <rowspan> for a subject repeated on consecutive days
- One <colspan> row for a special event (e.g. Assembly spanning all periods)
✅ End of Module 5
Module 6 (Forms) is next. Ask for it whenever you're ready.
Form Basics: <form>
<form>
A <form> is a container that collects user input and sends it somewhere (e.g. a server) when submitted. Everything a visitor can type or click to submit goes inside it.
A form is like a paper application form at school — it has blank spaces to fill in, and once you're done, you hand the whole sheet to the office. The <form> tag is that paper; the inputs inside are the blank spaces.
<label> and <input>
<label> and <input>
<input> creates a single-line field for typing (its <code>type</code> attribute decides what kind — text, email, number...). <label> attaches a readable caption to an input, so clicking the label also focuses the field.
The <label> is the printed word "Name:" on a form, and the <input> is the blank line right next to it where you write your answer.
placeholder & required
placeholder, required
<code>placeholder</code> shows faint example text inside an empty input that disappears when you start typing. <code>required</code> blocks form submission until that field is filled in.
A placeholder is like a light pencil hint written inside a blank ('e.g. Asha Patil') that vanishes once you write your real answer in ink. 'Required' is like a form that beeps and won't let you submit until every starred field is filled.
<textarea>
<textarea>
<textarea> creates a multi-line text box — used when the answer is longer than one line, like a comment or address. Unlike <input>, it needs a closing tag.
If <input> is a single blank line on a form, <textarea> is the big empty box at the bottom that says 'Additional Comments' — room to write several lines.
<select> and <option>
<select> and <option>
<select> creates a dropdown menu. Each choice inside it is written as an <option>. This is useful when you want the user to pick exactly one item from a fixed list.
A <select> is like a school class-selection dropdown at admission time — you can't type your own class, you must pick one from the list of classes that actually exist.
<button>
<button>
<button> creates a clickable button. Inside a form, <code>type="submit"</code> sends the form's data, while <code>type="button"</code> does nothing on its own until JavaScript is attached to it.
The submit button is the 'hand in your paper' moment — once clicked, everything written on the form gets collected and sent off.
Practical Activity: Student Registration Form
Build a complete Student Registration Form
Tick off each element as you add it:
- <form> wrapping the whole registration form
- A <label>+<input type="text"> pair for Full Name, marked required
- An <input type="email"> with a placeholder
- An <input type="number"> for Age
- A <select> dropdown for choosing the Class
- A <textarea> for Address
- A <button type="submit"> to finish the form
✅ End of Module 6
Module 7 (Multimedia) is next. Ask for it whenever you're ready.
Practice & Self-Test
Test everything you've learned across all 6 modules. Click a tab, attempt each question, then reveal the answer to check yourself.
Column A
Column B
A → 8 (<img> = Inserts an image)
B → 9 (<a> = Creates a hyperlink)
C → 10 (<table> = Creates a table)
D → 1 (<ul> = Bulleted list)
E → 2 (<ol> = Numbered list)
F → 3 (<form> = Collects user input)
G → 4 (<textarea> = Multi-line text box)
H → 5 (<select> = Dropdown menu)
I → 6 (<th> = Table header cell)
J → 7 (<hr> = Horizontal rule / line)
CSS Basics
Style the HTML you've just learned — colors, fonts, layout.
JavaScript Intro
Make your pages interactive — buttons that do things.
Responsive Design
Make webpages look great on any screen size.
Web Accessibility
Build pages usable by everyone, including screen-reader users.
Web Hosting
How your finished HTML file becomes a real, live website.
SEO Basics
How search engines read and rank your HTML pages.
🏆 Great work!
You've completed the full HTML masterclass practice set. Score yourself honestly and revisit any module you're unsure about.
Pro Tips & Tricks
Small habits that separate beginner code from professional code. These aren't new tags — they're how experienced developers actually work.
Use Comments to Leave Notes
<!-- This is a comment, invisible on the page --> Comments help you (or teammates) remember what a section of code does. The browser completely ignores them.
Indent Consistently
Always indent nested tags by 2 or 4 spaces. Messy indentation is the #1 reason beginners can't find their own bugs — a clean structure makes errors jump out visually.
Use Lowercase Tags & Attributes
Write <div> not <DIV>, and href not HREF. It's not required by HTML5, but it's the universal convention — mixing cases makes code harder to read and search.
Never Skip Heading Levels
Go h1 → h2 → h3 in order. Jumping from h1 straight to h4 confuses screen readers and hurts SEO, even though the browser won't show an error.
Prefer Semantic Tags Over <div>
Use <nav>, <header>, <article> instead of generic <div> everywhere. Semantic tags tell browsers and search engines what content actually means.
Always Close Every Tag
An unclosed <p> or <div> can silently break your entire layout below it. When something looks wrong, check for a missing closing tag first.
Never Leave alt Empty on Purpose
If an image is purely decorative, use alt="" (empty) — never omit it completely. Missing alt attributes fail accessibility checks.
Validate Your HTML
Paste your code into the free W3C Markup Validator online. It catches missing tags, bad nesting, and typos instantly — professionals use it before publishing.
Learn F12 (DevTools)
Press F12 in any browser to inspect a live webpage's HTML and CSS. It's the fastest way to learn how professional sites are actually built.
Save Often, Preview Often
Get in the habit: Ctrl+S to save, then refresh the browser (Ctrl+R) to see changes. Small, frequent checks catch mistakes early instead of all at once.
Add a Favicon
<link rel="icon" href="favicon.ico"> inside <head> adds the small tab icon browsers show next to your page title — a nice professional touch.
Always Include the Viewport Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1"> makes your page resize properly on phones — without it, mobile users see a tiny desktop layout.
🌟 You now code like a pro-in-training!
Apply these habits in the Exercise Zone and your Mini Project — small habits, big difference.
- Get link
- X
- Other Apps
Comments
Post a Comment