HTML5 Course in Roman Hindi/Urdu - Lecture 1: HTML5 Ki Introduction (Fully Detailed)
HTML5 Kya Hai? (Pura Detail)
HTML5 web pages ki structure banane ki markup language hai. Iska full form HyperText Markup Language version 5 hai. Yeh text, images, videos, forms jaise content ko organize karta hai taake browser usse sahi tarah se display kar sake. HTML5 sirf structure deta hai – colors, fonts ya animations ke liye CSS aur user interactions ke liye JavaScript use hote hain.
- Markup Language Kyun? Markup matlab tags se content ko mark karna, jaise
<p>paragraph ko define karta hai. Yeh human-readable hai, browser machine-readable banata hai. - HTML5 Ke Key Features:
- Native support for multimedia:
<video>aur<audio>tags bina plugins ke (Flash ki zaroorat nahi). - Semantic elements:
<header>,<footer>,<article>– code ko meaningful banate hain, SEO aur accessibility ke liye behtar. - Canvas API: Graphics drawing ke liye (JS ke saath).
- Offline storage: LocalStorage, IndexedDB – apps bina internet ke chal sake.
- Form enhancements: New input types jaise email, date, range.
- Better mobile support: Responsive design ke liye viewport meta tag.
- Native support for multimedia:
HTML5 1999 ke HTML 4.01 ka successor hai, lekin yeh XML-based XHTML se alag hai – forgiving syntax allow karta hai (jaise unclosed tags). Yeh W3C standard hai, 2014 mein final hua, lekin continuously evolve hota hai.
Browser Compatibility: Sab modern browsers (Chrome, Firefox, Safari, Edge) full support karte hain. Purane IE ke liye polyfills use kar sakte ho.
HTML5 Ki History (Timeline Ke Saath)
HTML ki shuruaat 1991 mein Tim Berners-Lee ne CERN mein ki, World Wide Web ke liye. Yeh SGML (Standard Generalized Markup Language) par based tha.
- 1993: HTML 1.0 – Basic tags jaise headings, paragraphs, links.
- 1995: HTML 2.0 – IETF standard, forms add hue.
- 1997: HTML 3.2 – Tables, applets.
- 1999: HTML 4.01 – Strict, Transitional, Frameset versions. CSS separation shuru.
- 2000: XHTML 1.0 – XML syntax, strict rules.
- 2004: HTML5 Shuru – WHATWG (Web Hypertext Application Technology Working Group) ne start kiya, Apple, Mozilla, Opera, Google ke saath. W3C ne 2007 mein join kiya.
- 2014: HTML5 Recommendation – Official release. Features jaise video, canvas live hue.
- Post-2014: HTML Living Standard – Continuous updates, jaise 2020 mein dialog element, 2023 mein improved forms.
Kyun Important? Aaj 98%+ websites HTML5 use karti hain. Yeh web apps (PWAs) ko possible banata hai, jo native apps jaise behave karte hain.
HTML5 Document Ki Basic Structure (Har Part Ki Detail)
Har HTML5 file ek tree structure follow karti hai. Yeh strict outline hai: DOCTYPE, html root, head (metadata), body (content).
DOCTYPE Declaration
Purpose: Browser ko batata hai ki yeh HTML5 document hai. Yeh tag nahi, declaration hai – pehli line mein hona chahiye.
Syntax: <!DOCTYPE html> – Simple aur case-insensitive.
Kyun Zaroori? Bina iske, browser Quirks Mode mein jaata hai (purana rendering), jisse layout toot sakta hai. HTML5 mein yeh shortest hai (purane versions mein lambi thi).
Placement: File ki bilkul shuruaat, koi space ya comment pehle nahi.
<!DOCTYPE html>html Tag - Root Element
Purpose: Poore document ka container. Yeh sabse outer tag hai.
Attributes:
lang: Language code, jaiselang="hi"Hindi ke liye (SEO, screen readers ke liye). ISO 639-1 codes use karo.xmlns: Namespace, XHTML ke liyexmlns="http://www.w3.org/1999/xhtml", lekin HTML5 mein optional.manifest: App cache ke liye (deprecated ab).
Closing: Hamesha close karo </html>.
Tip: Yeh block-level hai, andar sirf head aur body.
<html lang="hi">
<!-- Head aur body yahan -->
</html>head Tag - Metadata Section
Purpose: Invisible info, browser ko configure karta hai. Content nahi dikhta screen par.
Common Child Elements:
<title>: Page title, browser tab mein dikhta hai (SEO ke liye 50-60 chars).<meta>: Key-value pairs.charset="UTF-8": Encoding, special chars (Hindi/Urdu) ke liye must.name="viewport" content="width=device-width, initial-scale=1.0": Mobile responsive, zoom control.name="description" content="Page ka short summary": SEO snippet.name="keywords" content="html5, tutorial, hindi": Purana, ab kam use.http-equiv="refresh" content="5;url=newpage.html": Auto redirect.
<link>: External resources, jaise<link rel="stylesheet" href="style.css">(CSS ke liye).<style>: Inline CSS.<script>: JS,<script src="script.js"></script>.<base>: Base URL for relative links.
Attributes: profile (deprecated).
Tip: Head mein 10-15 lines se zyada mat rakho, performance ke liye.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTML5 Introduction Lecture 1">
<title>HTML5 Ki Introduction - Lecture 1</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style> body { font-family: Arial; } </style>
</head>body Tag - Visible Content
Purpose: Jo screen par dikhega – text, images, etc.
Attributes:
onload,onunload: JS events.background: Deprecated, CSS use.- Global:
id,class,style.
Child Elements: Sab visible tags jaise h1, p, img.
Closing: </body> file ke end mein.
Tip: Body mein nesting sahi rakho, warna validation fail.
<body>
<h1>Welcome to HTML5</h1>
<p>Yeh content dikhega.</p>
</body>Apna Pehla HTML5 Document Banana (Step-by-Step Code)
Ab practical: Ek complete file banao. Text editor (VS Code ya Notepad) use karo.
Step 1: File Create Karein
Naya file: "lecture1.html". Extension .html zaroori.
Encoding: UTF-8 save karo (Hindi chars ke liye).
Step 2: Pura Structure Likhein
Yeh full detailed example hai, copy-paste karo:
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTML5 ka pehla document example">
<title>Mera Pehla HTML5 Page - Lecture 1</title>
<link rel="stylesheet" href="basic-style.css"> <!-- Optional CSS -->
</head>
<body>
<h1>Assalam-o-Alaikum! HTML5 Seekhna Shuru</h1>
<p>Yeh mera pehla paragraph hai. HTML5 ki structure samajh aayi?</p>
<p>Doosra paragraph: History se introduction tak sab cover kiya.</p>
</body>
</html>Explanation Line-by-Line:
- Line 1: DOCTYPE – HTML5 mode on.
- Line 2: html lang="hi" – Root, language set.
- Line 3-8: head – Charset (encoding), viewport (mobile), description (SEO), title (tab), link (external).
- Line 9: body – Content start.
- Line 10: h1 – Main heading.
- Line 11-12: p tags – Paragraphs, auto margins.
- Line 13: /body aur /html – Close.
Step 3: Test Aur Debug
Save karo.
Browser mein open: Double-click ya drag-drop.
Inspect: Right-click > Inspect Element – Structure dekho.
Common Errors:
- Missing DOCTYPE: Page weird dikhega.
- Wrong charset: Hindi chars ? ban jaayenge.
- Unclosed tags: Browser auto-close karega, lekin validate mat.
Validator: W3C online tool se check karo (html5.validator.nu).
Advanced Tip: Emmet in VS Code use karo – "!" type karo tab press, full boilerplate ban jaayega.
HTML5 Ke Basic Rules Aur Best Practices
- Validation: Code sahi ho – tags properly nested, attributes quoted.
- Accessibility: Alt texts, lang attributes, semantic tags.
- Performance: Head mein sirf zaroori meta, body lightweight.
- Version Differences: HTML5 forgiving hai, lekin strict code likho future-proof ke liye.
- Tools: VS Code extensions: Live Server (auto refresh), HTMLHint (errors).
Yeh lecture complete. Ab aap basic structure master kar chuke ho.
