HTML
HTML Basics – Lesson 1:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="This is my first webpage.">
<meta name="keywords" content="HTML, web, tutorial">
<title>Document</title>
</head>
<body>
</body>
</html>
Explain :-
<!DOCTYPE html> :- aa ek declaration che je sabit kare che ke aa
page html ma banelu che.
<html lang="en"> :- lang="en" aa ek attribute che je document ni
language batave che.
<head> :- aa tag html ni ander body tag start thai eni pela lakhai
che ama aa tag ni ander meta tag , title, css file link, js file link
lakhva ma ave. ani ander je kai pan lakhiye te page par na dekhai.
1. <meta> :- meta tag ni ander link nu name ,description and key
words add karva na hoi che. Apde browser par kai pan search kariye
jem ke apde search kariyu ke top 5 song to browser ma badhi link
ave ae link ma je lakhiyu hoi te and eni niche paragraph ma lakhelu
description ae meta tag ni ander ave .
2. <title>:- title ma lakhelu page ma upper je tab ave tema lakhelu
dekhai.
3. <link> ;- link ma css file js file and favicon add kari sakai.
4. Favicon :- <link rel="icon" href="[Link]" type="image/x-
icon"> avi rite favicon lakhai favicon atle page ma upper je tab ave
tya title ni baju ma ek small img dekhai che ene favicon kevai.
<body> ;- body tab head tag puro thai pasi lakhai body tag ni ander
je kai pan lakhiye te webpage par show thai che
Remember HTML Format with a Story :-
jaem koi college start karvu hoi to pela govt pase thi permission letter
levu pade ej rite html ni saruaat ma <!DOCTYPE html> lakhvu pade.
pachi college no main gate bane, gate par board hoy ke english medium
college che = <html lang="en">
tyar baad principal office ma ek admin tame badhi info leva jav cho tya
tamne college mate badhi mahiti ape (description), subject list
(keywords), college nu name board par (title) <head> ma ave head atle
principal kya to admin aa only bar na loko ne college vise jankari ape che.
ane last ma asli college life start thay – classrooms, lectures, students aa
badhu webpage na <body> ma ave jya student jose and use karse (aa
part user ne visible thay che) .
Lesson 2 – Text Tags :-
1. Headings :-
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
👉 Heading 1 is the biggest, Heading 6 is the smallest.
👉 Heading 1 atle <h1> hamesa 1 page par 1 j var use thai.
2. Paragraph :-
<p>This is a simple paragraph. We can write normal text here.</p>
Lesson 3 – Links & Images :-
1. Links (<a>) :-
college ma notice board hoy che, ena upar ek arrow hoy che → “library
ma jao”, “lab ma jao” etc.
👉 aa arrow students ne biji jagya sudhi lai jai che.
HTML ma pan links (anchor tag) aevaj arrows che → users ne ek page
thi biji page sudhi lai jai che.
Syntax:
<a href="[Link] to Google</a>
href = destination (jae link lai jai che)
text between <a> ... </a> = joi ne click karva nu
Example:
<a href="[Link] YouTube</a>
👉 user jya click kare, ena screen par biji jagya open thase.
2. Images (<img>) :-
college ma notice board TV par images mukvama aave che jethi students
ne clear idea male.
👉 HTML ma images use karva mate <img> tag hoy che.
Syntax:
<img src="[Link]" alt="My Photo">
src = image no address (path / link) apvi jo aa apiya pasi pan jo
page par img show na thai to code ma avi ne ctrl key press Kareli
rakhvi and [Link] par click karvu to vs img open na thai to eno
matlab ke path kyato link khoti che. Hamesa img ne tame je folder
me html file save karo cho aej folder ma rakhi ne aakhu folder j
vscode ma open karva nu.
alt = backup text (jya image load na thay tya text show thase,
screen readers ma helpful)
Example:
<img src="[Link] alt="Sample Image">
🔹 Both Together
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lesson 3</title>
</head>
<body>
<h1> Links & Images</h1>
<p>Click here to open Google:</p>
<a href="[Link] to Google</a>
<p>Here is a sample image:</p>
<img src="[Link] alt="Sample Picture">
</body>
</html>
Lesson 4 – Lists :-
1. Unordered List (<ul>) :-
jaem canteen ma menu board hoy che jema items bullet points ma
lakhya hoy che:
Samosa
Idli
Pizza
👉 aa bullet style list HTML ma <ul> (unordered list) + <li> (list item)
sathe banay che.
Example:
<ul>
<li>Samosa</li>
<li>Idli</li>
<li>Pizza</li>
</ul>
👉 Output:
Samosa
Idli
Pizza
2. Ordered List (<ol>) :-
exam ma rank list hoy che – 1st, 2nd, 3rd …
👉 aa numbering wali list HTML ma <ol> (ordered list) + <li> sathe banay
che.
Example:
<ol>
<li>Aarav</li>
<li>Riya</li>
<li>Sukhi</li>
</ol>
👉 Output:
1. Aarav
2. Riya
3. Sukhi
3. Nested List (list inside list) :-
jaem college timetable ma ek subject niche topics lakhya hoy:
Computer
o HTML
o CSS
Science
o Physics
o Chemistry
Example:
<ul>
<li>Computer
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Science
<ul>
<li>Physics</li>
<li>Chemistry</li>
</ul>
</li>
</ul>
navbar banava ma pan mostly <ul> ane <li> use thay
che, karan ke navbar pan ek type ni list of links che.
Lesson 5 – Navbar (Menu Bar with Submenu):-
jaem college ni main building ma notice boards hoy che – ek board par
different sections nu list hoy che:
Home
About
Courses
Contact
👉 aa ek navbar che.
pachhi “Courses” niche sub-courses ni list hoy che:
HTML
CSS
JavaScript
👉 aa submenu che.
HTML ma aa banava mate <ul> + <li> use thay che. Links mate <a>
mukay che.
🔹 Example Code – Simple Navbar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Navbar Example</title>
<style>
/* Navbar design */
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
overflow: hidden;
li {
float: left;
li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
li a:hover {
background-color: #111;
/* Submenu design */
li ul {
display: none;
position: absolute;
background-color: #444;
min-width: 160px;
li:hover ul {
display: block;
li ul li {
float: none;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Courses ▾</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
Output:-
Double click
Lesson 6 – Tables:-
jaem college ma timetable hoy che ke marksheet hoy:
Student name
Subjects
Marks / Timing
👉 aa table ma data rows ane columns ma organize thay che.
HTML ma table banava mate <table> use thay, ane andar:
<tr> = table row
<th> = table header (column title)
<td> = table data (cell)
Lesson 7 – Forms:-
This is most important forms badhi website ma most off use thai che.
Imagine college ma admission / feedback form che.
1. Form kon manage kare?
<form> tag = form nu akhu structure apde html ma start ma
<html> tag lakhiye emj form ma start karva <form> tag lakhai
Form ma user ni sari information collect karva mate banay che.
2. Input Fields – <input> :-
<input> ek single line input field che. type attribute thi decide thay che
ke user shu enter karse.
Most important types & example:
Type Example / Use Extra Attributes
placeholder, required,
text Name, City
maxlength
number Roll No, Age min, max, step
email Email ID placeholder, required
password Password placeholder, required
date Date of Birth min, max
Type Example / Use Extra Attributes
checkbox Interests / Hobbies checked
radio Gender selection name same for group, checked
Upload photo /
file accept (file types)
documents
submit Submit button value (text on button)
reset Reset form value (text on button)
Example:
<form action="[Link]" method="post">
<label>Name:</label>
<input type="text" name="name" placeholder="Enter your name"
required>
<label>Roll No:</label>
<input type="number" name="roll" min="1" max="100" required>
<label>Email:</label>
<input type="email" name="email" placeholder="Enter your email">
<label>Gender:</label>
<input type="radio" name="gender" value="Male" checked> Male
<input type="radio" name="gender" value="Female"> Female
<label>Hobbies:</label>
<input type="checkbox" name="hobby1" value="Reading"> Reading
<input type="checkbox" name="hobby2" value="Sports"> Sports
<label>Profile Photo:</label>
<input type="file" name="photo" accept="image/*">
<label>Message:</label>
<textarea name="message" placeholder="Write something..."
rows="4"></textarea>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
3. Important Attributes – Summary:-
Attribute Use
name Field no name, data identify karva
placeholder Input box ma hint (example)
required Mandatory field
maxlength Max characters
min / max Number / date range limit
checked Default selected checkbox / radio
Button or checkbox default
value
text/value
accept File type allowed (images, pdf etc.)
rows / cols Textarea size
4. Story analogy :-
Form = College admission desk
1. Input fields = pen / paper students fill kare
2. type="text" = naam / city (simple line)
3. type="number" = roll no / age
4. type="radio" = gender (ek select kare)
5. type="checkbox" = hobbies (multi-select)
6. type="file" = photo upload
7. textarea = special notes / messages
8. submit = form send karva button (data admin pase jaye)
9. reset = khali karva button
Lesson 8 – Div, Class, ID:-
1. <div> – College Building Rooms
Imagine college building ma different rooms che:
o Library
o Classroom
o Lab
HTML ma <div> ek container che jema ek j section nu content
muki sako.
<div> tag website ma game etli var use kari sakai
Example:
<div>
<h2>Library</h2>
<p>Books and study tables.</p>
</div>
<div>
<h2>Classroom</h2>
<p>Students and teacher.</p>
</div>
🔹 2. class – Room Type
Ek college building ma similar rooms hoy che (multiple
classrooms)
class attribute = ek type of room specify kare
ek j class ni multiple divs par use thai sake and alg alg class name
pan api sakiye
Example:
<div class="classroom">
<h2>Classroom 1</h2>
<p>Students learning HTML.</p>
</div>
<div class="classroom">
<h2>Classroom 2</h2>
<p>Students learning CSS.</p>
</div>
Ane CSS ma pachhi (.) thi target karso: .classroom { ... }
🔹 3. id – Room Number
College ma ek unique room number hoy – ek j id ek div par use
thay
id = unique identifier
Example:
<div id="library">
<h2>Library</h2>
<p>Books, magazines, and newspapers.</p>
</div>
CSS ma pachhi # thi target karso: #library { ... }
HTML Tips & Tricks – Professional Coding Style:-
1. Headings <h1> to <h6> :-
Rule: <h1> = page no main title → only 1 per page
<h2> → section title
<h3> → subsection
Tip: hierarchy maintain karo → SEO friendly & accessible code lage
2. Use Semantic Tags :-
Use semantic tags: <header>, <footer>, <nav>, <main>,
<section>, <article>
Professional websites ma <div> ni jagya par semantic tags use thay
che → cleaner & accessible code
3. Alt Text for Images :-
Always <img alt="description"> use karo
Screen readers / SEO friendly / professional standard
4. Form Best Practices :-
<label> tag use karo input fields mate → accessibility mate
Always name attribute specify karo
Required fields mark karo → <input required>
Placeholder text short & meaningful rakho
Example:
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your
name" required>
5. Comments :-
Code ma comments hamesha add karo → future maintenance easy
Professional code ma comment hovi jaruri che
And tamne pan khaber pade aa kayo section start thayo
<!-- This is the main header section -->
<header>
<h1>My Website</h1>
</header>
6. Use IDs & Classes Wisely :-
id → unique element (1 per page)
class → multiple elements same style
Professional standard → avoid using inline styles (style="")
7. Avoid Deprecated Tags :-
Don’t use <font>, <center>, <b> for styling
Use CSS instead → modern & professional
8. File & Folder Organization :-
Separate folders for css, images, js
Example:
project/
[Link]
css/
[Link]
images/
[Link]
Professional developers ma standard practice
9. section structure :-
1. Section → ek major part of page
o jaem Header, About, Services, Contact
o HTML: <section>
o Section ma 2 css use karai padding top and padding bottom
2. Container → section ni andar ek main wrapper hoi, content center
ma rakhe
o HTML: <div class="container">
o Tip: container thi content screen ni width ma properly align
thay
3. Main Wrapper / Mainwrap → container ni andar main layout
o Example: left content + right sidebar , display:flex act
o HTML: <div class="mainwrap">
4. Inner Divs → mainwrap ma individual components
o jaem hero image, text content, buttons, cards
o HTML: <div class="hero">, <div class="cards">, <div
class="button-section">
Example – College Website Structure :-
<section id="about">
<div class="container">
<div class="mainwrap">
<div class="hero">
<h1>Welcome to Our College</h1>
<p>Learn HTML, CSS, and JavaScript</p>
</div>
<div class="cards">
<div class="card">Web Development</div>
<div class="card">App Development</div>
<div class="card">SEO Services</div>
</div>
<div class="button-section">
<button>Join Now</button>
</div>
</div>
</div>
</section>
Tips to Make it Professional :-
1. Section → ek page ma multiple sections rakho (header, about,
services, contact)
2. Container → section ni andar, maximum width + center alignment
(max-width: 1200px; margin: 0 auto;)
3. Mainwrap → layout decide karva mate (left-right / grid)
4. Inner Divs → content alag alag rakho, naming class meaningful
rakho (hero, cards, button-section)
5. Classes & IDs → meaningful name rakho, CSS ma easily style karva
mate