HTML5 Course in Roman Hindi/Urdu - Lecture 3: Images, Paragraphs aur Div Tags - Fully Detailed
Images Tag (img) - Full Details
HTML5 mein images add karne ke liye <img> tag use karte hain. Yeh self-closing tag hai, matlab closing tag nahi chahiye. Yeh binary files (jaise .jpg, .png, .gif, .svg) ko display karta hai. HTML5 mein naye features hain jaise responsive images aur better formats support (WebP, AVIF).
Basic img Tag Structure
Purpose: Image ko page par show karna.
Core Attributes:
src: Image ka path ya URL, must hai. Local: "images/photo.jpg", External: "https://example.com/image.png".alt: Alternative text, accessibility ke liye (screen readers padhte hain) aur SEO ke liye. Agar image load na ho, toh yeh text dikhega.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Basic - Lecture 3</title>
</head>
<body>
<img src="my-image.jpg" alt="Ek sundar photo">
</body>
</html>Browser mein image dikhegi. Agar src galat ho, toh alt text dikhega.
Important Attributes for img
width aur height: Pixels mein size set kare. Example: width="300" height="200". Aspect ratio maintain karo warna image stretch hogi. HTML5 mein CSS se better control.
title: Hover par tooltip dikhega, jaise title="Yeh image ka description".
loading: "lazy" (page scroll par load, performance ke liye), "eager" (default, turant load). HTML5 feature.
decoding: "async" (parallel decode, fast rendering).
fetchpriority: "high" (priority load, hero images ke liye).
usemap aur ismap: Image maps ke liye (clickable areas, advanced).
referrerpolicy: Security, jaise "no-referrer".
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>img Attributes Detailed - Lecture 3</title>
</head>
<body>
<h1>Images in HTML5</h1>
<img src="logo.png" alt="HTML5 Logo" width="200" height="100" loading="lazy" title="HTML5 Official Logo" decoding="async" fetchpriority="high">
<!-- Yeh image lazy load hogi, fast decode, high priority. -->
</body>
</html>Yeh attributes se image optimized hogi.
Responsive Images in HTML5
HTML5 mein <picture> element use karo different sizes ke liye. Yeh srcset aur sizes attributes ke saath.
<picture>
<source srcset="large.jpg" media="(min-width: 800px)">
<source srcset="medium.jpg" media="(min-width: 400px)">
<img src="small.jpg" alt="Responsive Image" style="width:100%;">
</picture>Browser screen size ke hisab se image choose karega – mobile friendly.
Tip: Alt hamesha meaningful rakho, blank mat chhodo.
Paragraphs aur Text Elements (p, br, hr) - Har Ek Ki Details
Text ko organize karne ke liye yeh tags hain. <p> main paragraph, <br> line break, <hr> horizontal line.
p Tag - Paragraph
Purpose: Text blocks ko separate karna. Browser automatically margins add karta hai.
Attributes: id/class (styling), dir ("rtl" for Urdu/Arabic). HTML5 mein global attributes.
Kab use karein: Stories, articles mein.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paragraph Example - Lecture 3</title>
</head>
<body>
<h1>Text Content</h1>
<p id="intro" class="main-para" dir="ltr">Yeh ek paragraph hai. HTML5 mein text asani se format hota hai. Yeh line automatically wrap hogi.</p>
<p>Yeh doosra paragraph hai. Har p tag nayi line shuru karta hai.</p>
</body>
</html>Do paragraphs mein space hoga.
br Tag - Line Break
Purpose: Text ke andar nayi line, paragraph nahi. Self-closing.
Attributes: id/class. Avoid overuse – semantic nahi hai.
Kab use karein: Addresses, poems mein.
<p>Address: <br>Line 1, Street Name <br>City, Pincode</p>Yeh lines break karega bina extra space ke.
hr Tag - Horizontal Rule
Purpose: Thematic break, jaise section divider. Self-closing.
Attributes: id/class, HTML5 mein size/color CSS se.
Kab use karein: Page sections alag karne ke liye.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>br and hr - Lecture 3</title>
</head>
<body>
<h2>Section 1</h2>
<p>Yeh content hai.</p>
<hr id="divider" class="section-line">
<h2>Section 2</h2>
<p>Poem: <br>Roses are red, <br>Violets are blue.</p>
</body>
</html>Hr line dikhegi, br poem lines break karega.
Tip: <p> semantic hai, <br> sirf zaroorat par.
Div Tag - Container Element
<div> generic container hai, koi specific meaning nahi. Yeh grouping ke liye use hota hai, baad mein CSS se style.
Basic div Structure
Purpose: Elements ko wrap karna, layout banane ke liye. Block-level, nayi line leta hai.
Attributes: id (unique, jaise #header), class (multiple, jaise .container), global attributes.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Basic - Lecture 3</title>
</head>
<body>
<div id="header">
<h1>Header Section</h1>
</div>
<div class="content">
<p>Yeh content div mein hai.</p>
</div>
</body>
</html>Divs sections banayenge.
div Ke Advanced Uses
Nesting: Div andar div, complex layouts ke liye.
Inline Equivalent: <span> text ke liye inline container.
HTML5 Semantic Alternative: <div> ke bajaye <section>, <article>, <aside> use karo (baad ki lectures mein).
Attributes Details: data-* custom data store, jaise data-user="123". JS ke liye useful.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Nested - Lecture 3</title>
</head>
<body>
<div id="main-container" class="page-wrapper" data-theme="light">
<div id="sidebar">
<h2>Menu</h2>
<ul>
<li>Home</li>
</ul>
</div>
<div id="main-content">
<img src="image.jpg" alt="Content Image">
<p>Yeh main area hai.</p>
</div>
</div>
</body>
</html>Yeh layout banayega – sidebar aur content.
Tip: Div overuse mat karo, semantic tags prefer karo readability ke liye.
Practice Tasks (Detailed with Steps)
- Images Practice: "images-detail.html" banao. 3 images add karo: Ek basic, ek with attributes (width, loading=lazy), ek responsive picture. Alt sab mein daalo. Browser test: Lazy load check karo (slow network mode).
- Paragraphs Practice: "text-detail.html" mein 4 paragraphs banao, 2 br ke saath (poem), 1 hr ke saath divider. Dir="rtl" ek par try karo Urdu text ke liye.
- Div Practice: "div-detail.html" mein nested divs banao (header, sidebar, main, footer). Data-* attribute add karo ek mein. Inspect se structure dekho.
- Combined: Ek full page banao jisme img, p/br/hr, aur divs mix ho (jaise blog post). 25 minutes mein complete karo.
FAQ (Common Doubts with Details)
- Q: Alt attribute kyun zaroori?
- A: Accessibility (blind users ke liye) aur SEO (Google images mein rank). Empty alt sirf decorative images ke liye.
- Q: Picture vs img for responsive?
- A: Picture advanced hai, different sources ke liye; img simple srcset ke saath bhi kaam karta hai.
- Q: br ya p use karein?
- A: Br sirf short breaks ke liye; p semantic paragraphs ke liye, better SEO.
- Q: Div vs semantic tags?
- A: Div generic; semantic (section etc.) meaning dete hain, accessibility badhaate hain.
Next Lecture Teaser
Lecture 4: Tables (table, tr, td) aur Forms Basic (form, input) – Structure aur validation details.
Yeh lecture complete. Ab aap images, text aur containers master kar chuke ho.
