HTML मास्टर गाइड: कोडिंग की शुरुआत यहीं से करें
क्या आप अपनी खुद की वेबसाइट बनाना चाहते हैं ? HTML का पूरा ज्ञान यहाँ पाएं !
1. HTML क्या है ? (The Basics)
HTML (HyperText Markup Language) इंटरनेट की भाषा है। जब भी आप ब्राउज़र पर कोई वेबसाइट देखते हैं, तो वह HTML के जरिए ही तैयार की जाती है। HTML ब्राउज़र को यह बताता है कि पेज पर क्या दिखाना है—जैसे हेडिंग्स, पैराग्राफ, इमेजेस या लिंक्स।
2. कोडिंग के लिए तैयारी (Setup)
कोडिंग शुरू करने के लिए आपको सिर्फ दो चीजों की जरूरत है:
- Text Editor: मैं आपको VS Code (Visual Studio Code) इस्तेमाल करने की सलाह दूंगा। यह फ्री है और कोडिंग को बहुत आसान बनाता है।
- Web Browser: Google Chrome या Firefox.
3. HTML डॉक्यूमेंट का ढांचा (Structure)
हर वेबसाइट का एक फिक्स स्ट्रक्चर होता है। इसे रट लें, यह हमेशा ऐसा ही दिखेगा:
<!DOCTYPE html>
<html>
<head>
<title>वेबसाइट का टाइटल</title>
</head>
<body>
<h1>यह पेज की हेडिंग है</h1>
<p>यहाँ अपना कंटेंट लिखें...</p>
</body>
</html>
<html>
<head>
<title>वेबसाइट का टाइटल</title>
</head>
<body>
<h1>यह पेज की हेडिंग है</h1>
<p>यहाँ अपना कंटेंट लिखें...</p>
</body>
</html>
4. जरूरी HTML टैग्स जो आपको आने चाहिए
अ. टेक्स्ट फॉर्मेटिंग
हेडिंग्स और पैराग्राफ के लिए:
<h1>से<h6>: हेडिंग के लिए (H1 सबसे बड़ी)।<p>: पैराग्राफ लिखने के लिए।<b>या<strong>: शब्दों को बोल्ड करने के लिए।
ब. लिस्ट और लिंक
<ul>और<li>: बुलेट पॉइंट्स वाली लिस्ट।<a href="https://google.com">: दूसरे पेज का लिंक देने के लिए।<img src="image.jpg" alt="Description">: फोटो लगाने के लिए।
5. प्रो-टिप: Semantic HTML का इस्तेमाल करें
आजकल के आधुनिक वेब डेवलपर्स <div> का इस्तेमाल कम और इन टैग्स का ज्यादा करते हैं:
| टैग | काम |
|---|---|
<header> |
वेबसाइट का ऊपरी हिस्सा। |
<footer> |
वेबसाइट का निचला हिस्सा (कॉपीराइट आदि)। |
6. HTML Attributes: कोडिंग की असली पावर
सिर्फ टैग लगाने से काम नहीं चलता, हमें उन्हें और जानकारी (Information) देनी पड़ती है। इसे Attributes कहते हैं।
- id: यह एक यूनिक पहचान है। जैसे एक क्लास में एक रोल नंबर।
- class: यह कई चीजों को एक जैसा स्टाइल देने के काम आता है।
- href: लिंक के अंदर एड्रेस बताने के लिए।
- src: इमेज का सोर्स बताने के लिए।
उदाहरण: <a href="https://yourwebsite.com" target="_blank"> यहाँ target="_blank" का मतलब है कि लिंक नए टैब में खुलेगा।
7. HTML Forms: यूजर से जानकारी लेना
अगर आपको लॉगिन पेज या कांटेक्ट फॉर्म बनाना है, तो आपको Forms की जरूरत पड़ेगी।
<form>
<label>नाम:</label>
<input type="text" name="name">
<button type="submit">भेजें</button>
</form>
<label>नाम:</label>
<input type="text" name="name">
<button type="submit">भेजें</button>
</form>
8. HTML और SEO: Google को कैसे बताएं कि आपकी पोस्ट क्या है?
शायद ही कोई ब्लॉगर ये बताता है, पर HTML के जरिए आप अपनी वेबसाइट की SEO में जान डाल सकते हैं। <head> टैग के अंदर ये Meta Tags जरूर जोड़ें:
- Title Tag: सर्च रिजल्ट में दिखने वाला नाम।
- Meta Description: ये वो छोटी लाइन है जो Google पर आपके लिंक के नीचे दिखती है। कोड:
<meta name="description" content="यहाँ अपनी पोस्ट का शॉर्ट समरी लिखें"> - Viewport Tag: यह सुनिश्चित करता है कि आपकी वेबसाइट मोबाइल पर सही दिखे।
9. Comments का जादू
कोडिंग में खुद को याद दिलाने के लिए या दूसरों को समझाने के लिए हम Comments लिखते हैं। ये ब्राउज़र पर नहीं दिखते, सिर्फ कोड में दिखते हैं।
कोड: <!-- यह मेरा होमपेज है -->
10. शुरुआत में होने वाली गलतियां
- Closing Tags भूलना: हर
<h1>को</h1>से बंद करना ही पड़ता है। - Case Sensitivity: हमेशा छोटे अक्षरों (lowercase) का इस्तेमाल करें।
<H1>गलत तरीका है,<h1>सही है। - Missing Alt Tag: इमेज के साथ हमेशा
altटैग लगाएं (जैसेalt="लड़की की फोटो"), ताकि Google को पता चले कि इमेज किस बारे में है।
HTML Tags की पूरी List (A - Z)
Agar aap HTML me bilkul naye hain ya aapko quick reference ki jarurat hai, toh yeh list A se Z tak ke sabhi important HTML tags ko cover karti hai. HTML ke basic structure ko samajhne ke liye yeh guide aapke liye bahut helpful rahegi.
Basic Tags aur Introduction
-
<!DOCTYPE html>
Yeh document ko as an HTML5 declare karta hai, jisse browser ko pata chalta hai ki page ko kaise render karna hai. -
<html>
Yeh ek HTML document ka main root element hota hai. -
<head>
Isme page ki metadata information, title aur stylesheet hoti hai. -
<body>
Iske andar page ka pura visible content likha jata hai. -
<h1> to <h6>
Yeh heading tags hote hain, jo h1 (sabse bada) se h6 (sabse chhota) tak hote hain. -
<p>
Yeh paragraph define karne ke liye use hota hai.
HTML Tags (A - Z)
-
<abbr>
Yeh abbreviation ya acronym ko define karta hai, aur hover karne par uska full meaning dikhata hai. -
<address>
Contact information ko store karne ke liye use hota hai. -
<a> (Anchor)
Ek page se dusre page par jane ke liye hyperlink create karta hai. -
<area>
Image map ke andar clickable area define karta hai. -
<article>
Blog post ya news jaise independent content ko represent karta hai. -
<aside>
Sidebar ya advertisement jaise side wale content ke liye use hota hai. -
<audio>
Audio content (jaise songs ya podcast) play karne ke liye use hota hai. -
<base>
Page ke sabhi relative links ke liye ek default URL set karta hai. -
<bdi>
Text direction ko isolate karta hai taaki baki text ko affect na kare. -
<bdo>
Text ki reading direction ko manually override karta hai (LTR ya RTL). -
<blockquote>
Kisi dusri website ya source ke bade quotes ko display karne ke liye use hota hai. -
<b> (Bold)
Text ko bold karne ke kaam aata hai, bina extra importance diye. -
<br>
Line break (new line) dalne ke liye use hota hai. -
<button>
Ek clickable button create karta hai. -
<canvas>
Graphics aur animation draw karne ke liye use hota hai. -
<caption>
Table ke liye ek title ya heading deta hai. -
<cite>
Kisi creative work (jaise book, movie) ka title specify karta hai. -
<code>
Programming code ko display karne ke liye use hota hai. -
<col> aur <colgroup>
Table ke columns ko style karne aur group karne ke liye use hota hai. -
<data>
Content ko machine-readable value ke sath connect karta hai. -
<datalist>
Input element ke liye pre-defined autocomplete options deta hai. -
<dd>, <dl>, <dt>
Description lists banane ke liye use hota hai. -
<del>
Delete kiye gaye text ko strikethrough karke dikhata hai. -
<details>
Ek collapsible section banata hai jise click karke expand ya collapse kiya ja sakta hai. -
<dialog>
Ek popup ya modal dialog box define karta hai. -
<div>
Elements ko group karne aur style karne ke liye ek generic container deta hai. -
<em>
Text ko emphasize (emphasis/zor) dene ke liye use hota hai. -
<embed>
External applications aur interactive content ko page me embed karta hai. -
<fieldset>
Form ke andar related controls ko group karta hai. -
<figure> aur <figcaption>
Image ya illustration ko caption ke sath display karta hai. -
<footer>
Section ya document ka footer define karta hai. -
<form>
User input lene ke liye form create karta hai. -
<header>
Introductory content ya heading section define karta hai. -
<hr>
Horizontal line (divider) create karta hai. -
<iframe>
Kisi dusre webpage ko apne page ke andar embed karta hai. -
<img>
Image display karne ke liye use hota hai. -
<input>
Form me user input field (text, radio, checkbox) banata hai. -
<ins>
Page me insert kiye gaye text ko underline karke dikhata hai. -
<i> (Italic)
Text ko italic (tirha) style me show karta hai. -
<kbd>
Keyboard input ko display karne ke liye use hota hai. -
<label>
Form control ke liye text label deta hai. -
<link>
External resource (jaise CSS file) ko connect karta hai. -
<li>
Ordered (ol) aur unordered (ul) list ka ek item banata hai. -
<main>
Page ka main content area represent karta hai. -
<mark>
Text ko highlight karta hai. -
<meta>
Metadata jaisa page description, character set, viewport store karta hai. -
<meter>
Ek specific range ke andar value display karta hai. -
<nav>
Website ke main navigation links ko group karta hai. -
<noscript>
Jab user ka browser javascript off rakhta hai, tab yeh content show hota hai. -
<object>
Multimedia content ko page me embed karne ke liye use hota hai. -
<ol>
Ek ordered (1, 2, 3...) list create karta hai. -
<optgroup>
Dropdown menu ke andar options ko category wise group karta hai. -
<option>
Dropdown list (select tag) ke andar item create karta hai. -
<output>
Javascript calculation ka result show karta hai. -
<pre>
Preformatted text display karta hai, jisme spaces aur line breaks preserve rahte hain. -
<progress>
Task completion ka progress bar display karta hai. -
<q>
Chhota quotation (" ") lagane ke liye use hota hai. -
<ruby>, <rt>, <rp>
Asian characters ke upar pronunciation guide (Ruby annotation) show karne ke liye hain. -
<s>
Strikethrough text (cross line) lagane ke kaam aata hai. -
<samp>
Program ya computer ka sample output display karta hai. -
<script>
Client-side scripts (jaise JavaScript) run karne ke liye use hota hai. -
<section>
Page ka ek standalone theme section represent karta hai. -
<small>
Text ka font size chhota karta hai. -
<source>
Audio ya video media ke liye file sources define karta hai. -
<span>
Inline content ko color ya style karne ke liye ek chhota container hai. -
<strong>
Text ko strong (bold) meaning dene ke liye use hota hai. -
<style>
HTML file ke andar CSS code likhne ke kaam aata hai. -
<sub>
Subscript text (jaise $H_2O$) create karta hai. -
<sup>
Superscript text (jaise $x^2$) create karta hai. -
<svg>
Scalable Vector Graphics display karta hai. -
<table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>
Inn tags ka use rows aur columns me table create karne ke liye kiya jata hai. -
<template>
JavaScript ke sath reuse karne ke liye HTML fragments store karta hai. -
<time>
Machine-readable date aur time store karne ke kaam aata hai. -
<title>
Browser tab me show hone wala title set karta hai. -
<u> (Underline)
Text ke niche line (underline) deta hai. -
<var>
Mathematical formula ya code ka variable represent karta hai. -
<video>
Video file ko page me embed aur play karne ke kaam aata hai. -
<wbr>
Line break karne ki ek safe position suggest karta hai.
आपका लर्निंग रोडमैप (Roadmap)
HTML तो बस नींव है, असली जादू आगे है:
- Step 1: HTML (अभी आप सीख रहे हैं).
- Step 2: CSS (वेबसाइट को रंगीन और सुंदर बनाना).
- Step 3: JavaScript (वेबसाइट में दिमाग डालना - बटन्स क्लिक, कैलकुलेशन).
प्रो टिप: कोडिंग सीखने का सबसे अच्छा तरीका 'प्रोजेक्ट बनाना' है। बस पढ़ना मत, अपने कंप्यूटर पर कोड लिखना शुरू करो!
अगला कदम:
HTML सीख लिया? अब बारी है इसे स्टाइल (Design) करने की, जिसके लिए हम सीखेंगे CSS. क्या आप तैयार हैं? अगर आप इसे प्रैक्टिकल करते देखना चाहते हैं, तो मेरे YouTube Channel पर जाकर "HTML Crash Course" देखें। नीचे दिए गए बटन पर क्लिक करें!
YouTube पर देखेंReady to test your Web Development skills? Practice with this interactive HTML quiz covering 20 essential questions. Perfect for beginners looking to master the basics of coding.
Web Development Quiz
How was your score? Let us know in the comments below!