🌐 FULL STACK
DEVELOPMENT
SOLOLEARN-STYLE COURSE
MODULE 1: HTML — COMPLETE BEGINNER GUIDE
🟦 LESSON 1: WHAT IS HTML?
Lesson 1.1 — HTML meaning
HTML stands for HyperText Markup Language.
HTML is used to:
Create web pages
Structure content
HTML is NOT a programming language.
It does not think or calculate.
HTML only describes content.
Lesson 1.2 — What HTML does
HTML tells the browser:
This is a heading
This is text
This is an image
This is a button
The browser decides how to show it.
✅ Quick check
HTML is mainly used for:
A) Styling
B) Logic
C) Structure
Correct answer: C
🟦 LESSON 2: HTML FILES
Lesson 2.1 — HTML file extension
HTML files always end with:
.html
Examples:
[Link]
[Link]
[Link]
Lesson 2.2 — [Link]
[Link] is special.
When you open a folder as a website:
The browser looks for [Link] first
That’s why almost every website has it.
🟦 LESSON 3: HTML
DOCUMENT STRUCTURE
Lesson 3.1 — Basic HTML structure
Every HTML page follows this structure:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
Hello world
</body>
</html>
Lesson 3.2 — DOCTYPE
<!DOCTYPE html>
This tells the browser:
“This page uses modern HTML.”
Without it, browsers may act strangely.
Lesson 3.3 — <html> tag
<html></html>
Wraps the entire page
Everything must be inside it
Lesson 3.4 — <head> tag
<head></head>
The <head> contains:
Page title
Links to CSS
Page information
The user does NOT see it.
Lesson 3.5 — <title> tag
<title>My Website</title>
Appears on the browser tab
Important for bookmarks
Lesson 3.6 — <body> tag
<body></body>
Everything inside <body>:
Is visible to the user
✅ Quick check
Which tag contains visible content?
A) <head>
B) <title>
C) <body>
Correct answer: C
🟦 LESSON 4: HTML TAGS
Lesson 4.1 — What is a tag?
An HTML tag looks like this:
<tagname>content</tagname>
Example:
<p>Hello</p>
Lesson 4.2 — Opening and closing tags
<p> → opening tag
</p> → closing tag
Most tags must be closed.
Lesson 4.3 — Self-closing tags
Some tags do not wrap content.
Example:
<img><input>
They do not have closing tags.
🟦 LESSON 5: HTML
ATTRIBUTES (VERY
IMPORTANT)
Lesson 5.1 — What is an attribute?
An attribute gives extra information about a tag.
Attributes are written:
Inside the opening tag
Example:
<a href="[Link]
Here:
href is an attribute
"[Link] is its value
Lesson 5.2 — Attribute rules
Attributes use name="value"
Values are usually in quotes
A tag can have many attributes
Lesson 5.3 — Common attributes
Attribut
Purpose
e
href Link destination
src File source
alt Alternative text
id Unique identifier
class Group styling
type Input type
value Default value
🟦 LESSON 6: TEXT TAGS
Lesson 6.1 — Headings <h1> to <h6>
<h1>Main title</h1><h2>Subtitle</h2>
Rules:
<h1> is the biggest
<h6> is the smallest
Use headings in order
Lesson 6.2 — Paragraph <p>
<p>This is a paragraph.</p>
Used for normal text.
The browser adds spacing automatically.
Lesson 6.3 — Line break <br>
Hello<br>World
Moves text to the next line.
Lesson 6.4 — Bold and italic
<b>Bold</b><i>Italic</i>
Used to emphasize text.
🟦 LESSON 7: LINKS
Lesson 7.1 — Anchor tag <a>
<a href="[Link] to Google</a>
<a> creates a link
href tells where it goes
Lesson 7.2 — Opening link in new tab
<a href="[Link] target="_blank">Google</a>
target="_blank" opens a new tab.
🟦 LESSON 8: IMAGES
Lesson 8.1 — Image tag <img>
<img src="[Link]" alt="My photo">
Attributes:
src → image file
alt → text if image fails
Lesson 8.2 — Why alt is important
Helps screen readers
Helps if image doesn’t load
Very important for accessibility
🟦 LESSON 9: BUTTONS
Lesson 9.1 — Button tag
<button>Click me</button>
Buttons are interactive elements.
They are often controlled by JavaScript.
🟦 LESSON 10: INPUTS
Lesson 10.1 — Input tag
<input type="text">
<input> is self-closing.
Lesson 10.2 — Input types
<input type="password"><input type="email"><input
type="number">
The type attribute changes behavior.
Lesson 10.3 — Value attribute
<input type="text" value="Hello">
value sets default text.
🟦 LESSON 11: FORMS
Lesson 11.1 — Form tag
<form>
<input type="text">
<button>Submit</button></form>
Forms group inputs together.
Used to send data.
Lesson 11.2 — Form attributes (preview)
action → where data goes
method → how data is sent
(We will cover deeply later.)
🟦 LESSON 12: CONTAINERS
Lesson 12.1 — <div>
<div>
<p>Text</p></div>
Block-level container
Starts on a new line
Lesson 12.2 — <span>
<span>Word</span>
Inline container
Does NOT start new line
✅ Quick check
Which tag is inline?
A) <div>
B) <p>
C) <span>
Correct answer: C
🎯 📘 HTML LESSON: FORMS &
TABLES (SOLOLEARN STYLE)
🔹 PART 1: HTML TABLES
Tables are used to display data in rows and columns, like a spreadsheet.
Examples:
Student marks
Timetables
Price lists
Schedules
🧱 BASIC TABLE STRUCTURE
A table is made of rows and cells.
<table>
<tr>
<td>Item</td>
<td>Price</td>
</tr></table>
Explanation:
<table> → creates the table
<tr> → table row
<td> → table data (cell)
🔹 TABLE TAGS (VERY IMPORTANT)
1️⃣<table>
Creates the table container.
<table></table>
2️⃣<tr> – Table Row
Creates a horizontal row.
<tr></tr>
3️⃣<td> – Table Data
Creates a normal cell.
<td>Math</td>
4️⃣<th> – Table Header
Used for headings (bold by default).
<th>Subject</th>
🔹 COMPLETE TABLE EXAMPLE
<table border="1">
<tr>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Math</td>
<td>85</td>
</tr>
<tr>
<td>English</td>
<td>90</td>
</tr></table>
🔹 TABLE ATTRIBUTES (WITH
EXAMPLES)
✔ border
Adds a border around the table.
<table border="1">
✔ width
Sets table width.
<table width="100%">
or
<table width="500">
✔ cellpadding
Space inside cells.
<table cellpadding="10">
✔ cellspacing
Space between cells.
<table cellspacing="5">
🔹 TABLE SECTIONS (IMPORTANT BUT
OFTEN SKIPPED)
<thead> – Table head
<tbody> – Table body
<tfoot> – Table footer
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hope</td>
<td>11</td>
</tr>
</tbody></table>
🔹 MERGING CELLS
colspan – Merge columns
<td colspan="2">Total</td>
rowspan – Merge rows
<td rowspan="2">Math</td>
🧾 PART 2: HTML FORMS
Forms allow users to send data to a website.
Examples:
Login forms
Sign-up forms
Contact forms
Search bars
🧱 BASIC FORM STRUCTURE
<form></form>
🔹 FORM TAGS
1️⃣<form>
Wraps all input elements.
<form action="" method="">
🔹 FORM ATTRIBUTES (VERY
IMPORTANT)
✔ action
Where the form data is sent.
<form action="[Link]">
✔ method
How data is sent.
<form method="post">
Two types:
get → data visible in URL
post → data hidden (safer)
🔹 INPUT ELEMENTS
<input> – Most important form tag
🔸 TEXT INPUT
<input type="text">
🔸 PASSWORD INPUT
<input type="password">
🔸 EMAIL INPUT
<input type="email">
🔸 NUMBER INPUT
<input type="number">
🔸 RADIO BUTTONS
<input type="radio" name="gender"> Male<input type="radio"
name="gender"> Female
📌 Same name → only one can be selected
🔸 CHECKBOX
<input type="checkbox"> I agree
🔸 SUBMIT BUTTON
<input type="submit" value="Send">
🔹 INPUT ATTRIBUTES (DO NOT SKIP)
✔ name
Identifies the data.
<input type="text" name="username">
✔ placeholder
Shows hint text.
<input type="text" placeholder="Enter your name">
✔ required
Makes input compulsory.
<input type="email" required>
✔ value
Default value.
<input type="text" value="Hope">
✔ maxlength
Limits characters.
<input type="text" maxlength="10">
🔹 LABELS (VERY IMPORTANT)
<label>Username:</label><input type="text">
Better version:
<label for="user">Username:</label><input type="text"
id="user">
🔹 TEXTAREA (MULTI-LINE INPUT)
<textarea rows="4" cols="30"></textarea>
🔹 SELECT (DROPDOWN)
<select>
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option></select>
🔹 COMPLETE FORM EXAMPLE
<form method="post">
<label>Name:</label><br>
<input type="text" placeholder="Enter name"
required><br><br>
<label>Email:</label><br>
<input type="email" required><br><br>
<label>Gender:</label><br>
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female<br><br>
<input type="submit" value="Register"></form>
🧠 IMPORTANT NOTES (SOLOLEARN
STYLE)
✔ HTML does NOT process data
✔ Forms need backend (JavaScript, [Link]) later
✔ Tables are for data, not layout
✔ Attributes always go inside opening tags
📘 HTML LESSONS: SEMANTIC
TAGS, MULTIMEDIA &
ADVANCED ATTRIBUTES
🟦 LESSON 13: SEMANTIC HTML
Semantic HTML tags give meaning to content.
They make your website easier to read for:
Browsers
Search engines (SEO)
Screen readers
🔹 <header>
Used for the top section of a page or section.
<header>
<h1>My Website</h1>
<nav>Menu</nav></header>
Attributes:
Same global attributes as <div>: id, class, style, title
🔹 <nav>
Defines navigation links.
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">About</a></nav>
Attributes:
id → unique identifier
class → for styling
title → tooltip text
🔹 <section>
Groups related content.
<section>
<h2>About Me</h2>
<p>Details...</p></section>
Attributes:
id, class, style, title
🔹 <article>
Represents self-contained content.
<article>
<h2>Blog Post</h2>
<p>Content here</p></article>
🔹 <aside>
Used for sidebars or extra info.
<aside>
<h3>Tips</h3>
<p>Helpful notes</p></aside>
🔹 <footer>
For bottom section of page.
<footer>
<p>© 2026 My Website</p></footer>
✅ Quick check
Which tag is for sidebar info?
A) <footer>
B) <aside>
C) <section>
Correct answer: B
🟦 LESSON 14: HTML MULTIMEDIA
🔹 <img> — images
Already covered, but advanced attributes:
Attribut
Example Meaning
e
src <img src="[Link]"> File path
<img Text if image
alt
alt="Description"> missing
width <img width="200"> Image width in px
Attribut
Example Meaning
e
height <img height="100"> Image height in px
title <img title="Tip"> Tooltip text
🔹 <audio> — sound
<audio controls>
<source src="song.mp3" type="audio/mpeg"></audio>
controls → play/pause buttons
<source> → file & type
🔹 <video> — video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support video</video>
Attributes:
controls → show player
autoplay → start automatically
loop → repeat
muted → silent
poster → image before video starts
🔹 <iframe> — embed content
<iframe src="[Link] width="600"
height="400"></iframe>
Embeds another website or map
Attributes: src, width, height, title
🟦 LESSON 15: HTML LISTS
🔹 Ordered list <ol>
<ol>
<li>First</li>
<li>Second</li></ol>
Numbers items automatically
🔹 Unordered list <ul>
<ul>
<li>Apple</li>
<li>Banana</li></ul>
Bullet points
🔹 Description list <dl>
<dl>
<dt>HTML</dt>
<dd>Language for web pages</dd>
<dt>CSS</dt>
<dd>Style language</dd></dl>
<dt> → term
<dd> → description
🟦 LESSON 16: HTML COMMENTS
<!-- This is a comment -->
Not visible in browser
Good for notes
Can span multiple lines
🟦 LESSON 17: HTML ENTITIES
Some characters need special codes:
Charact
Code
er
< <
> >
&
&
;
"
""
;
&apo
'
s;
🟦 LESSON 18: HTML GLOBAL
ATTRIBUTES
Almost all tags can use these:
Attribute Example Meaning
id <div id="main"> Unique identifier
CSS group
class <p class="text">
styling
<h1
style Inline styling
style="color:red">
title <span title="Hello"> Tooltip text
hidden <div hidden> Hide element
contenteditabl <div
User can edit
e contenteditable>
🟦 LESSON 19: HTML BEST PRACTICES
1.
Always close tags (except self-closing)
2.
3.
Use semantic tags (header, section, article)
4.
5.
Use attributes properly (id, class, alt, title)
6.
7.
Use lowercase for tags and attributes
8.
9.
Indent nested tags for readability
10.
✅ Quick check
Which attribute shows tooltip text?
A) id
B) class
C) title
Correct answer: C
🟦 LESSON 20: FULL HTML EXAMPLE
<!DOCTYPE html><html><head>
<title>Complete HTML Example</title></head><body>
<header>
<h1>My Website</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav></header>
<section>
<h2>About Me</h2>
<p>Hello, I am a student learning HTML!</p></section>
<article>
<h2>My Blog Post</h2>
<p>This is my first blog post.</p></article>
<aside>
<h3>Tips</h3>
<p>Always practice HTML daily.</p></aside>
<footer>
<p>© 2026 My Website</p></footer>
<table border="1">
<tr>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Math</td>
<td>85</td>
</tr></table>
<form action="[Link]" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="username"
placeholder="Enter name" required><br><br>
<input type="submit" value="Send"></form>
</body></html>
✅ Congratulations! You have completed HTML fully.
You now know:
Basic tags (p, h1-h6, a, img, button, input, form, div, span)
Table structure (table, tr, td, th) and attributes (border, cellpadding)
Forms with all attributes (action, method, type, name, placeholder,
required)
Semantic tags (header, footer, section, article, aside, nav)
Multimedia (audio, video, iframe)
Lists (ul, ol, dl)
Comments, entities, and global attributes (id, class, title, style)