📚 GRADE 7 · FINAL TERM
Introduction to HTML — Complete
Study Guide
Chapters 8 · 9 · 10 | Study Notes · Tag Reference · Q&A · Tasks
📖 Theory Notes 🏷️All Tags & Attributes 💻 Practical Tasks ❓ Q&A Bank 📋 Study Plan
📋 Study Plan Ch 8: Intro HTML Ch 9: Elementary HTML Ch 10: Forms 🏷️Tag Reference
❓ Theory Q&A 💻 Practical Tasks ✅ Checklist
📋
Last-Class Study Plan
Use the remaining class time wisely!
🕐 0–15 min · Revision 🕐 15–30 min · Practical 1 🕐 30–45 min · Practical 2
Read tag reference table Write basic HTML page Create ordered list
Revise HTML structure Use all formatting tags Create unordered list
Container vs Empty tags Add a horizontal rule Insert a table (3 cols)
🕐 45–60 min · Practical 3 🕐 60–80 min · Practical 4 🕐 80–90 min · Theory Drill
Insert an image + link Create a simple form Answer Q&A section
Internal + external links Add text, radio, checkbox Tick off checklist
Change font color/size Add submit + reset button Peer-check code
Chapter 8 – Introduction to HTML
8️⃣
Pages 94–121 of your textbook
🌐 What is HTML?
HTML = Hypertext Markup Language. It is a markup language (NOT a programming
language) used to create web pages. Commands in HTML are called tags.
HTML files are saved with .htm or .html extension. HTML is not case sensitive — <HTML> ,
💡
<html> , and <Html> all work the same.
✏️HTML Editors
WYSIWYG Editor Text Editor
"What You See Is What You Get" — no need to write You write HTML code manually. Examples:
tags. Example: Adobe Dreamweaver Notepad, WordPad
Steps to create: Open Notepad → Type code → Save As [Link] → Open in browser (Internet
Explorer / Chrome)
🏷️HTML Tags — Key Concepts
Tags are keywords enclosed in angle brackets < > . There are two types:
Container Tags Empty Tags (Self-closing)
Have an opening AND a closing tag. The closing Have only an opening tag — NO closing tag.
tag has a /. <BR> <HR> <IMG>
<B>Bold text</B>
The tag that opens first should be closed last.
⚠️
✅ <B><U>text</U></B> ❌ <B><U>text</B></U>
🔧 Tag Attributes
Attributes give extra information to a tag. Format: attribute_name="value"
<IMG src="[Link]" align="left" width="50%">
Multiple attributes are separated by a space. Attribute values go inside double quotes. Attribute names
are not case sensitive.
🏗️Structure of an HTML Document
<HTML> ← Root element (container tag)
<HEAD> ← Head element (info about page)
<TITLE>My Page</TITLE> ← Shows on title bar
</HEAD>
<BODY text="Blue" bgcolor="Green"> ← Page content
Your visible content goes here.
</BODY>
</HTML>
Element Purpose Type
<HTML> Root / start & end of the page Container
<HEAD> Holds page info (title, style) Container
<TITLE> Text shown on the browser title bar Container
<BODY> All visible page content Container
BODY attributes: text (text color), bgcolor (background color), background (image), leftmargin ,
topmargin
🔠 HTML Headings — <H1> to <H6>
HTML has 6 levels of headings. H1 = largest, H6 = smallest. All are container tags.
<H1>First level heading</H1>
<H2>Second level heading</H2>
<H3>Third level heading</H3>
Use heading tags ONLY for headings — not to make text big or bold.
✅
📄 Paragraph Tag — <P>
Used to define a paragraph. Leaves a blank line after the paragraph. Container tag.
<P align="center">This is a paragraph.</P>
Align attribute values: "left" · "right" · "center" · "justify"
↩️Line Break — <BR> 🚫 No Break — <NOBR>
Gives a single line break. It is an EMPTY tag Prevents any line breaks in the text. Text may
— no closing tag needed. Inserts a new line scroll horizontally. It is a container tag.
without extra spacing.
<NOBR>This long text
Line one<BR> will NOT break</NOBR>
Line two
✨ Formatting Tags
Tag Name Effect Type
<B> Bold Bold text Container
<I> Italics Italic text Container
<U> Underline Underlined text Container
<STRIKE> Strikethrough Struck-through Container
<SUP> Superscript X2 Container
<SUB> Subscript H2 O Container
<CENTER> Center Centers content Container
<STRONG> also makes text bold. <DEL> can replace <STRIKE> .
📝
➖ Horizontal Rule — <HR>
Draws a horizontal line to separate content. It is an EMPTY tag.
<HR size="4" width="50%" align="center" noshade>
Attribute Effect
size Thickness of the line
width Length (% or pixels)
align Left / center / right
color Color of the line
noshade Makes it a solid line
💬 Comment Tag
Used to insert notes in HTML code. Comments are NOT shown on the web page. Container
tag.
<!-- This is a comment, invisible on the webpage -->
🖼️Inserting Images — <IMG>
<IMG> is an EMPTY tag. Images can be BMP, GIF, or JPEG format.
<IMG src="[Link]" align="left" width="30%" height="30%" border="2" alt="Image
Attribute Purpose
src Location / filename of the image
align left / right / top / bottom / middle
width / height Size of the image
border Border thickness in pixels
alt Alternative text if image not found
Default alignment for images is "bottom" . If the image is in the same folder as the HTML
💡
file, just use the image name.
🔗 Hyperlinks — <A> (Anchor Tag)
The Anchor tag creates clickable links. It is a container tag.
<A href="[Link] target="_blank" title="Go to Google">Click here<
Attribute Purpose
href URL of the destination page
target="_blank" Opens link in a new window
name Names a section for internal linking
title Tooltip text on hover
Internal Linking External Linking
Links to a section within the same document using Links to a different HTML file or website.
# .
<A href="[Link]">
Go to Page 2
</A>
<A name="top"></A>
<A href="#top">Go to top</A>
Link colours in <BODY>: link (default blue #0000FF), vlink (visited — purple #800080), alink
(active — red #FF0000)
Chapter 9 – Elementary HTML
9️⃣
Pages 122–139 · Lists, Tables, Font
📋 Creating Lists
Unordered List <UL> Ordered List <OL>
Order doesn't matter. Marked with bullets by default. Order matters. Marked with numbers by default.
<UL type="disc"> <OL type="1">
<LI>Swimming <LI>First item
<LI>Reading <LI>Second item
</UL> </OL>
type: "disc" (●) · "circle" (○) · "square" (■) type: "1" · "A" · "a" · "I" · "i"
Description List <DL>
A list of terms with descriptions. Uses <DT> (term) and <DD> (description).
<DL>
<DT>HTML
<DD>HyperText Markup Language
</DL>
Nested List = a list inside another list. Any list type can be nested inside any other.
🔗
📊 Inserting Tables
Tables display data in rows and columns.
<TABLE border="1" width="50%" bgcolor="orange" bordercolor="green" cellpadding="
<CAPTION align="top">Table Title</CAPTION>
<TR bgcolor="cyan">
<TH>Name</TH> <TH>Age</TH>
</TR>
<TR>
<TD colspan="2">Merged Cell</TD>
</TR>
</TABLE>
Tag Purpose Key Attributes
<TABLE> Creates the table border, width, bgcolor, bordercolor, cellpadding,
cellspacing, align, height
<CAPTION> Table title/caption align (top/bottom)
<TR> Table row align, valign, bgcolor
<TH> Table header cell colspan, rowspan, align, valign
(bold)
<TD> Table data cell colspan, rowspan, align, valign
colspan = merges columns. rowspan = merges rows. Empty cell: <TD> </TD>
�Ì
🔤 Changing Text Font — <FONT>
<FONT> is a container tag used to change text appearance.
<FONT face="Arial" size="5" color="red">Hello World</FONT>
face — changes the font style size — 1 (smallest) to 7 (largest)
Arial, Courier New, Comic Sans MS… Default size is 3
color — color name or hex code Page margins — set in <BODY>
"red", "#FF0000", "#0000FF"… leftmargin , rightmargin , topmargin ,
bottommargin
Common hex colors: Red=#FF0000 · Blue=#0000FF · Green=#00FF00 · Black=#000000 ·
🎨
White=#FFFFFF · Lime Green=#32CD32
Chapter 10 – Creating Forms in HTML
🔟
Pages 140–156
📝 What are Forms?
Forms collect information from the user through a GUI (Graphical User Interface). They are
used for surveys, login, shopping, etc. The <FORM> tag is placed inside the <BODY> tag.
<FORM action="[Link] method="post" name="myForm">
... form elements go here ...
</FORM>
Attribute Purpose
action Where form data is sent (URL or email)
method "get" (data visible in URL) or "post" (data hidden)
name Names the form (for multiple forms)
⌨️The <INPUT> Tag
Used to create different controls inside a form. Requires a type attribute. It is an EMPTY tag.
type value Creates Example
"text" Single-line text box <INPUT type="text" name="nm" size="20"
maxlength="30">
"password" Password box (shows <INPUT type="password" name="pw" size="10">
***)
"checkbox" Checkbox (multiple <INPUT type="checkbox" name="cb" checked>
select)
"radio" Radio button (one only) <INPUT type="radio" name="rg" value="Y"
checked>
"submit" Submit button <INPUT type="submit" value="Send">
"reset" Reset button <INPUT type="reset" value="Clear">
"button" Command button <INPUT type="button" value="Click Me">
"file" File upload (Browse <INPUT type="file" name="f1">
button)
"image" Image submit button <INPUT type="image" src="[Link]" alt="Go">
For Radio Buttons: all options in the same group must share the same name. Only one can
�Ì
be selected at a time.
📋 Textarea, Select & Option
TEXTAREA — multi-line text box SELECT + OPTION — drop-down list
<TEXTAREA name="cm" cols="50" rows="4"> <SELECT name="city" size="3" multiple>
Default text <OPTION value="dhk" selected>Dhaka</OPTION>
</TEXTAREA> <OPTION value="ctg">Chittagong</OPTION>
</SELECT>
Attributes: name, cols, rows, readonly
size =visible rows · multiple =multi-select ·
selected =default choice
🏷️
Complete Tag Reference
All tags from Chapters 8–10 | Color-coded by type
Tag Type Color Key:
🏗️ Structure ✨ Formatting 📐 Layout/Display ⚡ Empty (no end tag) 📝 Form
📋 Lists & Tables
End
Tag Full Name Type? Key Attributes
Tag?
<HTML> Root Element Structure ✅ Yes —
<HEAD> Head Element Structure ✅ Yes —
<TITLE> Title Structure ✅ Yes —
<BODY> Body Element Structure ✅ Yes text, bgcolor, background,
leftmargin, topmargin, link, vlink,
alink
<H1>–<H6> Headings Layout ✅ Yes align
<P> Paragraph Layout ✅ Yes align (left/right/center/justify)
<BR> Line Break Empty ❌ No —
<NOBR> No Break Layout ✅ Yes —
<HR> Horizontal Empty ❌ No size, width, align, color, noshade
Rule
<B> Bold Formatting ✅ Yes —
<I> Italics Formatting ✅ Yes —
<U> Underline Formatting ✅ Yes —
<STRIKE> Strikethrough Formatting ✅ Yes —
<SUP> Superscript Formatting ✅ Yes —
<SUB> Subscript Formatting ✅ Yes —
<CENTER> Center Layout ✅ Yes —
<!-- --> Comment Formatting — —
<IMG> Image Empty ❌ No src, align, width, height, border,
alt
<A> Anchor (Link) Layout ✅ Yes href, name, target, title
<FONT> Font Formatting ✅ Yes face, size, color
<UL> Unordered List ✅ Yes type (disc/circle/square)
List
<OL> Ordered List List ✅ Yes type (1/A/a/I/i)
<LI> List Item List ✅ Yes —
<DL> Description List ✅ Yes —
List
<DT> Description List ✅ Yes —
Term
<DD> Description List ✅ Yes —
Detail
<TABLE> Table Table ✅ Yes border, width, height, align,
bgcolor, bordercolor, cellpadding,
cellspacing
<CAPTION> Table Caption Table ✅ Yes align
<TR> Table Row Table ✅ Yes align, valign, bgcolor
<TH> Table Header Table ✅ Yes colspan, rowspan, align, valign
<TD> Table Data Table ✅ Yes colspan, rowspan, align, valign
<FORM> Form Form ✅ Yes action, method, name
<INPUT> Input Empty ❌ No type, name, value, size,
maxlength, checked, src, alt,
border, width, height
<TEXTAREA> Text Area Form ✅ Yes name, cols, rows, readonly
<SELECT> Select Form ✅ Yes name, size, multiple
(Dropdown)
<OPTION> Option (in Form ✅ Yes value, selected
Select)
Theory Questions & Answers
❓
Click each question to reveal the answer
▶ Q1. What is HTML? What are the key points to remember about HTML?
▶ Q2. What are the two types of HTML editors? Give examples.
▶ Q3. What is the difference between Container tags and Empty tags?
▶ Q4. What are tag attributes? Give an example.
▶ Q5. Explain the structure of an HTML document.
▶ Q6. What are HTML heading tags? How many levels are there?
▶ Q7. What is the difference between <BR> and <NOBR>?
▶ Q8. What are formatting tags? Name at least five with their function.
▶ Q9. What is the <HR> tag? What are its attributes?
▶ Q10. What are hyperlinks? Explain internal and external linking.
▶ Q11. How do you create lists in HTML? Explain all types.
▶ Q12. What are forms in HTML? What are the main attributes of the FORM tag?
▶ Q13. What are the different types of buttons available in HTML forms?
▶ Q14. Explain <SELECT> and <OPTION> tags with attributes.
▶ Q15. What is <TEXTAREA>? List its attributes.
💻
Practical Tasks
In-class coding exercises — try all of these!
🖥️Task 1 — Basic HTML Page Structure
Goal: Write a complete HTML page titled "My School" with body background colour
lightblue , text colour darkblue . Add an H1 heading centered, then a paragraph left-
aligned, then a <HR> line (size=3, width=70%, centered).
<HTML>
<HEAD><TITLE>My School</TITLE></HEAD>
<BODY bgcolor="lightblue" text="darkblue">
<CENTER><H1>Welcome to My School</H1></CENTER>
<P align="left">This is my school webpage.</P>
<HR size="3" width="70%" align="center">
</BODY>
</HTML>
🖥️Task 2 — Formatting Tags Practice
Goal: Create a page that shows: bold text, italic text, underlined text, strikethrough text,
superscript (X²+Y²), subscript (H₂O), and centered text.
<BODY>
<B>This is Bold</B><BR>
<I>This is Italic</I><BR>
<U>This is Underlined</U><BR>
<STRIKE>This is Strikethrough</STRIKE><BR>
X<SUP>2</SUP>+Y<SUP>2</SUP><BR>
H<SUB>2</SUB>O<BR>
<CENTER>Centered Text</CENTER>
</BODY>
🖥️Task 3 — Lists (Unordered + Ordered + Nested)
Goal: Create a page with a nested list of "School Subjects" where main list is ordered (Roman
numerals) and sub-list is unordered (square bullets).
<BODY>
<H3>School Subjects</H3>
<OL type="I">
<LI>Science
<UL type="square">
<LI>Physics
<LI>Chemistry
<LI>Biology
</UL>
<LI>Social Science
<UL type="square">
<LI>History
<LI>Geography
</UL>
</OL>
</BODY>
🖥️Task 4 — Creating a Table
Goal: Create a student marks table with 3 columns (Roll No., Name, Marks), a caption at the
top, and at least 3 rows of data. Use border=2, headerrow in cyan bgcolor.
<TABLE border="2" width="60%" cellpadding="5">
<CAPTION align="top"><B>Student Results</B></CAPTION>
<TR bgcolor="cyan">
<TH>Roll No.</TH>
<TH>Name</TH>
<TH>Marks</TH>
</TR>
<TR>
<TD>01</TD>
<TD>Ayesha</TD>
<TD>88</TD>
</TR>
</TABLE>
🖥️Task 5 — Images & Hyperlinks
Goal: Insert an image ([Link], width=40%, aligned right, with alt text). Add a hyperlink to
"[Link]" that opens in a new tab.
<BODY>
<IMG src="[Link]" width="40%"
align="right" alt="School Photo" border="2">
<BR>
<A href="[Link]
target="_blank"
title="Go to Google">Search on Google</A>
</BODY>
🖥️Task 6 — HTML Form (Complete)
Goal: Create a "Friends Club" registration form with: Name (text), Password, Gender (radio),
Hobbies (checkbox), City (dropdown), Comments (textarea), Submit and Reset buttons.
<BODY bgcolor="#f0f4ff">
<CENTER><H2>Friends Club Registration</H2></CENTER>
<FORM method="post">
<P>Name: <INPUT type="text" name="nm" size="25"></P>
<P>Password: <INPUT type="password" name="pw" size="12"></P>
<P>Gender:
<INPUT type="radio" name="gen" value="M"> Male
<INPUT type="radio" name="gen" value="F"> Female
</P>
<P>Hobbies:
<INPUT type="checkbox" name="h1"> Reading
<INPUT type="checkbox" name="h2"> Sports
<INPUT type="checkbox" name="h3"> Music
</P>
<P>City:
<SELECT name="city">
<OPTION value="dhk" selected>Dhaka</OPTION>
<OPTION value="syl">Sylhet</OPTION>
</SELECT>
</P>
<P>Comments:<BR>
<TEXTAREA name="cm" cols="40" rows="3"></TEXTAREA>
</P>
<INPUT type="submit" value="Register">
<INPUT type="reset" value="Clear">
</FORM>
</BODY>
✅
Final Exam Checklist
Tick each topic when you feel confident!
☐ I know what HTML stands for and what it is used for
☐ I can explain the difference between WYSIWYG and Text editors
☐ I know the difference between Container and Empty tags
☐ I can write the full HTML document structure (HTML, HEAD, TITLE, BODY)
☐ I know all BODY tag attributes (text, bgcolor, background, leftmargin, topmargin)
☐ I can use all 6 heading tags (H1–H6)
☐ I can use the <P> tag with align attribute
☐ I know the difference between <BR> and <NOBR>
☐ I can use all formatting tags (B, I, U, STRIKE, SUP, SUB, CENTER)
☐ I can use the <HR> tag with its attributes
☐ I can insert a comment with <!-- -->
☐ I can insert an image using <IMG> with src, align, width, height, border, alt
☐ I can create a hyperlink using <A href>
☐ I know the difference between internal and external linking
☐ I can create ordered and unordered lists
☐ I can create a nested list
☐ I can create a description list (DL, DT, DD)
☐ I can create a table with TABLE, CAPTION, TR, TH, TD
☐ I understand colspan and rowspan
☐ I can use the <FONT> tag (face, size, color)
☐ I can set page margins in BODY
☐ I know all INPUT types (text, password, radio, checkbox, submit, reset, button, file, image)
☐ I can create a FORM with action and method attributes
☐ I can use TEXTAREA, SELECT, and OPTION
☐ I can design a complete registration form
Grade 7 IT · Final Term 2025 | Chapters 8, 9 & 10 | Introduction to HTML, Elementary HTML & Creating Forms
Prepared for classroom use · Good luck on your exam! 🌟