Scribd
Upload
96 views

HTML5 Notes

Uploaded by

leeminhoking1312
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
96 views

HTML5 Notes

Uploaded by

leeminhoking1312
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Introduction

HTML Kya Hai?

HTML (HyperText Markup Language) ek markup language hai jo web pages banane ke liye
istemal hoti hai. Iska kaam content ko structure dena hota hai. Jaise ek kitaab mein headings,
paragraphs, aur images hoti hain, waisa hi HTML mein bhi content ko organize kiya jata hai.

Real Life Example: Socho, aap ek kitaab likh rahe hain. Aapko chapters, headings, aur pages ka
structure banana hai. Yahi kaam HTML karta hai web pages par.

CSS Aur JS Kya Hai?

CSS (Cascading Style Sheets) ka kaam HTML pages ko design aur layout dena hai. Ye pages
ko sundar aur visually appealing banata hai.

Real Life Example: Jaise ek kitaab ka cover page, uski design aur layout ko beautiful banata
hai, waisa hi CSS website ke elements ko stylish banata hai.

JavaScript (JS) ek programming language hai jo web pages ko interactive banata hai. Ye user
ke actions par response dene ke liye istemal hota hai.

Real Life Example: Jaise ek kitaab mein agar aap kisi question ka answer dekhna chahte hain,
to aap uski index me jate hain, wahi kaam JS karta hai, user ke actions ke hisaab se content ko
change karta hai.

Beautiful Analogy

Web development ko aise samjho jaise ek restaurant kholna.

• HTML: Ye restaurant ka structure hai, jaise tables aur chairs.


• CSS: Ye restaurant ki decoration hai, jaise wall colors aur table settings.
• JavaScript: Ye restaurant ka staff hai, jo customers ki zarooraton ka khayal rakhta hai
aur unka response karta hai.

Installing VS Code

VS Code (Visual Studio Code) ek code editor hai jahan aap HTML, CSS, aur JavaScript likhte
hain. Iski installation process bilkul waise hi hai jaise aap kisi software ko install karte hain.

Real Life Example: Socho, aap ek tools ka box kholte hain jisme sab tools hain jo aapko kaam
karne ke liye chahiye. VS Code aise tools ka box hai jisme coding ke liye saare zaroori tools
hain.

Notepad Aur VS Code


Notepad: Ye ek simple text editor hai. Aap isse basic HTML likh sakte hain, lekin iska interface
aur features limited hain.

VS Code: Ye advanced features provide karta hai jaise syntax highlighting, auto-completion, aur
debugging tools, jo coding ko asan aur efficient banate hain.

Chapter 1: Creating Our First Website

A Basic HTML Page

Ek basic HTML page kuch aise dikhai deta hai:

Example:
<!DOCTYPE html>
<html>
<head>
<title>Meri Pehli Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Ye meri pehli website hai!</p>
</body>
</html>

Explanation:

• <!DOCTYPE html>: Browser ko batata hai ki ye ek HTML5 document hai.


• <html>: Ye HTML document ka starting point hai.
• <head>: Isme metadata hota hai, jaise title.
• <title>: Ye page ka title define karta hai.
• <body>: Ye wo area hai jahan actual content hota hai.
• <h1>: Ye heading hai, jo sabse bada hota hai.
• <p>: Ye paragraph tag hai.

Diagram: Ek basic structure ko aise samjha sakte hain:

Example
[HTML Document]
├── [Head]
│ └── Title
└── [Body]
├── H1 (Heading)
└── P (Paragraph)

Comments in HTML

HTML mein comments likhna aasan hai. Aap comments ko is tarah likhte hain:
Example
<!-- Ye ek comment hai -->

Real Life Example: Jaise aap kisi kitaab mein notes ya reminders likhte hain jo dusre log nahi
dekh sakte, waisa hi HTML comments code ko samajhne mein madad karte hain.

Case Sensitivity

HTML case sensitive nahi hai, lekin best practice ye hai ki aap tags ko lowercase mein likhen.

Real Life Example: Socho aap ek checklist bana rahe hain aur aapko sab items ko uniform
rakha hai, is tarah aapko easily items mil jaate hain.

Practice Sets

1. HTML ka structure samjho: Jaise kisi kitaab ka chapter kaise structured hota hai.
2. Comments ka istemal karo: Code mein explanations daal kar, jisse aap khud ya dusre
samajh saken.
3. Case sensitivity ka dhyan rakho: Tags ko consistent rakho, jisse readability badh jaaye.

Chapter 2: Basics HTML Tags

HTML Elements

HTML elements wo components hain jo web page par content ko represent karte hain.

Real Life Example: Jaise ek building ki bricks, jo milkar structure banati hain.

HTML Attributes

Attributes elements ki properties hoti hain. Example ke liye, <a> tag ka href attribute URL
batata hai.

Example
<a href="https://www.example.com">Click Here</a>

Real Life Example: Jaise aapka address aapko define karta hai, waise hi attributes elements ko
specific details dete hain.

The Headings Tags

Headings <h1>, <h2>, <h3>, etc. content ko organize karte hain. <h1> sabse important hota hai,
jabki <h6> sabse kam.
Real Life Example: Jaise ek kitaab mein chapters aur sub-chapters hote hain, wahi kaam
headings HTML mein karti hain.

The Paragraph Tag

Example
<p>Ye ek paragraph hai.</p>

Real Life Example: Jaise ek kitaab ka paragraph text ko organize karta hai, waise hi HTML
mein <p> tag karta hai.

The Anchor Tag

Example
<a href="https://www.example.com">Ye ek link hai</a>

Real Life Example: Jaise kisi kitaab mein index hota hai jahan se aap dusre pages tak ja sakte
hain, waise hi anchor tags link provide karte hain.

The Image Tag

Example
<img src="image.jpg" alt="Description of image">

Real Life Example: Jaise ek poster mein images use hoti hain taake wo dekhne mein interesting
lage, waise hi images web pages ko visually appealing banate hain.

Bold, Italics, Underline Tags

Example
<strong>Bold</strong>
<em>Italics</em>
<u>Underline</u>

Real Life Example: Jaise aap kisi kitaab mein important points ko underline karte hain ya bold
karte hain, waise hi ye tags content ko emphasize karte hain.

BR Tags

Example
<p>Line 1<br>Line 2</p>

Real Life Example: Jaise ek list mein items ke beech mein space chhodte hain, waise hi <br>
tag line breaks ke liye istemal hota hai.

Big and Small Tags

Example
<big>Ye bada text hai</big>
<small>Ye chhota text hai</small>

Real Life Example: Jaise aap kisi event ka poster banate hain aur kuch text ko bada aur kuch ko
chhota rakhte hain, waise hi ye tags text size control karte hain.

HR Tags

Example
<hr>

Real Life Example: Jaise ek kitaab mein sections ko alag karne ke liye lines hoti hain, waise hi
<hr> tag use hota hai.

Subscript and Superscript

Example
H<sub>2</sub>O (Water)
E = mc<sup>2</sup>

Real Life Example: Jaise kisi formula ya chemical equation mein specific notation use hoti hai,
waise hi subscript aur superscript ka istemal hota hai.

Pre Tags

Example
<pre>
Ye ek preformatted text hai.
</pre>

Real Life Example: Jaise aap kisi poem ya code ko specific formatting ke sath likhte hain, waise
hi <pre> tag formatting ko maintain karta hai.

Practice Set

1. Alag-alag tags ka istemal karo: HTML elements ko use karke ek basic page banao.
2. Comments likho: Code mein apne thought processes ko include karo.
3. Formatting ka dhyan rakho: Text ko highlight karne ke liye bold, italic, aur underline
ka istemal karo.

Chapter 3: Creating a Page Layout

Header, Footer, Nav, Main

Ek website ka layout kuch is tarah hota hai:

Example
<header>
<h1>Website Title</h1>
</header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>
<main>
<section>
<article>Content goes here...</article>
</section>
</main>
<footer>
<p>Footer Information</p>
</footer>

Real Life Example: Jaise ek newspaper mein header, content, aur footer hote hain, waise hi
HTML mein header aur footer use hote hain.

Links Attributes

Links ke different attributes hote hain, jaise href, jo destination URL define karta hai.

The Div Tags

Example
<div>This is a division</div>

Real Life Example: Jaise ek room ko alag-alag divisions mein baanta jata hai, waise hi <div>
content ko divide karta hai.

The Span Tags

Example
<span>This is a span</span>

Real Life Example: Jaise ek paragraph ke beech mein kuch words ko highlight karte hain, waise
hi <span> inline elements ke liye use hota hai.

Practice Set

1. Layout ka dhyan rakho: Header, footer, aur nav ko use kar ke ek basic structure banao.
2. Div aur span ka use samjho: Sections aur inline content ko manage karo.
3. Links ko style karo: CSS se links ka color aur appearance change karo.
Chapter 4: Lists, Tables, and Forms

Lists: Unordered List and Ordered List

Unordered List (<ul>) aur Ordered List (<ol>) web pages par content ko list format mein
dikhane ke liye use hoti hain.

• Unordered List: Ismein items ke aage bullets aate hain.


o Real Life Example: Jaise shopping list mein aapko bas items ka naam likhna
hota hai, chahe unka order important ho ya nahi.
• Ordered List: Ismein items ke aage numbering hoti hai.
o Real Life Example: Jaise aapko ek step-by-step recipe likhni hai, toh items ko
numbered order mein rakhte hain.

Example
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>

Tables

Tables HTML mein data ko rows aur columns mein organize karne ke liye use hoti hain. Ek
basic table ko define karte hain:

Example
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ali</td>
<td>25</td>
</tr>
</table>

• Real Life Example: Jaise school ki attendance sheet jisme rows aur columns ke zariye
data dikhaya jata hai (students ke naam aur unka attendance).

Colspan Attribute: Ye attribute kisi cell ko multiple columns cover karne ke liye use hota hai.

Example
<td colspan="2">Combined Cell</td>
• Real Life Example: Jaise ek table mein do column ko merge karke ek single header bana
diya jaye. Socho, aap class mein ek assignment list bana rahe hain jisme kuch students ko
combined category mein dal diya.

HTML Forms

Forms user se data lene ke liye use hote hain, jaise naam, email, ya kisi survey ka jawab.

Real Life Example: Socho, jab aap kisi website par sign up karte hain toh aap ek form bharte
hain jo aapki personal information leta hai.

Example
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>

• Real Life Example: Jaise aap bank mein form fill karte hain apna naam aur details dalne
ke liye, waise hi HTML forms digital data ko collect karte hain.

Input Element

Input elements user se specific information lete hain, jaise text box, radio button, checkbox, etc.

• Real Life Example: Socho, jab aap ek survey form bharte hain jahan aapko apna gender
select karna hota hai (radio button) ya multiple preferences choose karni hoti hain
(checkbox).

Textarea Element

Example
<textarea rows="4" cols="50">
Type your message here...
</textarea>

• Real Life Example: Jaise feedback form mein aapko apna detailed feedback likhna hota
hai, waise hi textarea element use hota hai long text input ke liye.

Select Element

Example
<select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>

• Real Life Example: Jaise aap kisi drop-down menu se apni country select karte hain jab
aapko ek account banana ho, waise hi select element use hota hai.
Embedded Video

HTML mein video ko embed karne ke liye <video> tag use hota hai.

Example
<video controls>
<source src="movie.mp4" type="video/mp4">
</video>

• Real Life Example: Jaise aap YouTube video apne blog par dikhana chahte hain, waise
hi embedded video ka use hota hai.

Audio

Audio files ko embed karne ke liye <audio> tag use hota hai.

Example
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>

• Real Life Example: Jaise aap ek website par podcast ya music play karte hain, waise hi
audio tag ka use hota hai.

Chapter 4 Practice Set

1. Forms banayein: Different input types ko use karke ek survey form banayein.
2. Table banayein: Colspan aur rowspan ko use karke ek timetable banayein.
3. Lists ko use karein: Ordered aur unordered lists ke zariye content ko organize karein.

Chapter 5: SEO (Search Engine Optimization)

SEO Kya Hai?

SEO ka matlab hai Search Engine Optimization, jisme techniques ka use karke aap apni website
ko search engines mein rank karwate hain.

• Real Life Example: Socho aap ek dukaan chala rahe hain aur aapko chahte hain ki log
aapke dukaan ka pata jaldi dhoondh lein, waise hi SEO website ko dhoondhne mein
madad karta hai.

Types of SEO

1. On-Page SEO: Ye website ke andar content ko optimize karta hai.


o Real Life Example: Jaise aap apni dukaan ka andar ka setup sundar aur
organized banate hain taake log aayen.
2. Off-Page SEO: Ye website ke bahar activities jaise backlinks aur social media
promotions se related hota hai.
o Real Life Example: Jaise aapke dukaan ki publicity bahar poster ya TV ads se
hoti hai.
3. Technical SEO: Isme website ke technical aspects ko optimize kiya jata hai jaise website
speed aur mobile-friendliness.
o Real Life Example: Jaise aap apni dukaan ka infrastructure improve karte hain
taake log easily aapke paas pahunchein.

HTML SEO: 10 Points

1. Title Tag: Har page ka unique aur relevant title hona chahiye.
o Real Life Example: Jaise aap apne dukaan ka unique aur attractive naam rakhte
hain.
2. Meta Description: Short description jo search results mein dikhai deti hai.
o Real Life Example: Socho, aap apni dukaan ka ek tagline banate hain jo logon ko
attract karta hai.
3. Heading Tags: Proper headings (<h1>, <h2>) ka use karein.
o Real Life Example: Jaise aap apni dukaan mein alag sections banate hain,
headings ussi tarah content ko categorize karte hain.
4. Alt Text for Images: Har image ka descriptive alt text hona chahiye.
o Real Life Example: Jaise aap apne products ka description dete hain, waise hi
images ka alt text hota hai.
5. URL Structure: Clean aur user-friendly URLs banayein.
o Real Life Example: Jaise aap apni dukaan ka pata easy aur simple rakhte hain
taake log easily pahunchein.
6. Internal Linking: Aapki website ke dusre pages ke links hone chahiye.
o Real Life Example: Jaise aapke dukaan ke andar har product ke display ko aapas
mein connect rakhte hain.
7. Mobile Optimization: Website mobile-friendly honi chahiye.
o Real Life Example: Jaise aap apni dukaan ka setup aisa banate hain ki
wheelchair aur cycle users bhi easily aayen.
8. Page Load Speed: Website ki speed fast honi chahiye.
o Real Life Example: Jaise aap apni dukaan ka entry smooth rakhte hain taake log
andar jaldi aa saken.
9. Sitemap: Ek XML sitemap banayein jo search engines ko guide karta hai.
o Real Life Example: Jaise aap ek roadmap banate hain taake logon ko pata chale
kaunsi cheez kahan rakhi hai.
10. SSL Certificate: Secure website ka use karein, jisme HTTPS ho.
o Real Life Example: Jaise aap apni dukaan ke liye security guard lagate hain,
waise hi SSL website ko secure karta hai.

You might also like