HTML Introduction
नमस्ते! अगर आप Web डेवलपमेंट की दुनिया में कदम रख रहे हैं, तो HTML को समझना आपके लिए सबसे पहली और सबसे महत्वपूर्ण सीढ़ी है। चलिए, इसे बहुत ही आसान भाषा में समझते हैं।
(01) 🌐 HTML Introduction
HTML का फुल Form HyperText Markup Language है। इसे समझने के लिए इसके नाम को तीन हिस्सों में तोड़ते हैं:
[i] HyperText: इसका मतलब है "Text के अंदर Text"। आसान शब्दों में, वह Text जिस पर Click करने से आप किसी दूसरे Page पर पहुँच जाते हैं (जैसे कि Links)।
[ii] Markup: इसका मतलब है Content को "Mark" करना। यह Browser को बताता है कि कौन सा हिस्सा heading है, कौन सा Paragraph है और कहाँ image लगानी है।
[iii] Language: यह एक भाषा है जो कंप्यूटर और Web Browser के बीच Communication का काम करती है।
{A} 🦴 HTML को एक Example से समझें
कल्पना कीजिए कि आप एक इमारत (Building) बना रहे हैं:
[i] HTML: यह उस इमारत का ढांचा (Skeleton) है। यह तय करता है कि दीवारें कहाँ होंगी, दरवाजे कहाँ लगेंगे और छत कहाँ होगी।
[ii] CSS: यह उस इमारत का पेंट और डिजाइन है (रंग-रूप)।
[iii] JavaScript: यह उस इमारत की कार्यक्षमता (Functionality) है (जैसे लिफ्ट का बटन दबाने पर लिफ्ट का ऊपर आना)।
याद रखें: बिना HTML के कोई भी Website अस्तित्व में नहीं रह सकती। दुनिया की हर छोटी-बड़ी Website (चाहे वो Google हो या Facebook) का आधार HTML ही है।
{B} 🚀 HTML की मुख्य विशेषताएं
[i] सीखने में आसान: इसका Syntax (लिखने का तरीका) बहुत सरल है।
[ii] Platform Independent: यह किसी भी Operating system (Windows, Mac, Linux) पर चल सकता है।
[iii] Browser Friendly: सभी Web Browser (Chrome, Safari, Firefox) इसे आसानी से समझते हैं।
[iv] Multimedia Support: आप इसमें आसानी से वीडियो, ऑडियो और Image जोड़ सकते हैं।
{C}🛠️ HTML कैसे काम करता है?
जब आप HTML Code लिखते हैं और उसे .html File के रूप में Save करते हैं, तो आपका Web Browser (जैसे Chrome) उस File को पढ़ता है। Browser Code को नहीं दिखाता, बल्कि उस Code के निर्देशों का पालन करते हुए एक सुंदर Web Page Render (प्रदर्शित) करता है।
📝Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<h1> Welcome To My Blog Website. </h1>
<p>Learning HTML is a lot of fun.</p>
</body>
</html>
इस Code में <h1> Browser को बता रहा है कि यह एक बड़ी heading है और <p> बता रहा है कि यह एक Paragraph है।
(02)📜 History of HTML
HTML का इतिहास Internet के विकास के साथ जुड़ा हुआ है। इसे किसी एक दिन में नहीं बनाया गया, बल्कि यह दशकों की मेहनत का परिणाम है।
{A}. शुरुआत (1989 - 1991): आविष्कार का दौर
HTML की कहानी CERN (European Organization for Nuclear Research) की लैब से शुरू होती है।
[i] 1989: मशहूर वैज्ञानिक Tim Berners-Lee ने World Wide Web (WWW) का आविष्कार किया। उनका मुख्य उद्देश्य वैज्ञानिकों के बीच Research Papers और जानकारी को आसानी से Share करना था।
[ii] 1991: Tim Berners-Lee ने HTML का पहला Version पेश किया, जिसमें सिर्फ 18 Tags थे। उस समय यह बहुत ही बेसिक था और इसमें Designing के लिए कोई खास Options नहीं थे।
{B}. मानकीकरण (Standardization) की ओर (1993 - 1997)
जैसे-जैसे लोग Internet का इस्तेमाल करने लगे, HTML में सुधार की जरूरत महसूस हुई।
[i] 1993: HTML+ का ड्राफ्ट आया, जिसमें Form और Table जैसे Features जोड़ने की कोशिश की गई।
[ii] 1995: HTML 2.0 Release हुआ। यह HTML का पहला आधिकारिक मानक (Standard) Version बना, जिसे सभी Browsers ने मानना शुरू किया।
[iii] 1997: HTML 3.2 आया। इसमें Table, Image Alignment और Font style जैसे Features जोड़े गए, जिससे Websites थोड़ी सुंदर दिखने लगीं।
{C}. आधुनिक युग की नींव (1999 - 2000)
[i] 1999: HTML 4.01 Release हुआ। इसने Web Page के Content और उसकी Designing (CSS) को अलग करने पर जोर दिया। यह Version बहुत सालों तक Internet पर राज करता रहा।
[ii] 2000: XHTML 1.0 आया। यह HTML और XML का मिश्रण था, जिसके नियम बहुत सख्त थे (जैसे हर Tag को Close करना अनिवार्य था)।
{D}. HTML5: Web क्रांति (2008 - वर्तमान)
Websites को और अधिक इंटरैक्टिव बनाने के लिए WHATWG और W3C ने मिलकर काम शुरू किया।
WHATWG:Web Hypertext Application Technology Working Group
W3C : World Wide Web Consortium
[i] 2008: HTML5 का पहला ड्राफ्ट पेश किया गया। इसने Web की दुनिया बदल दी।
[ii] 2014: HTML5 को आधिकारिक तौर पर पूरी दुनिया के लिए लागू कर दिया गया।
क्यों खास है HTML5? इसमें वीडियो प्लेयर, ऑडियो प्लेयर, और मोबाइल फोन के लिए खास Featuresबिना किसी बाहरी सॉफ्टवेयर (जैसे Flash) के चलने लगे।
{E}⏳ HTML History
HTML के इतिहास को जानने के बाद, अब हम समझ सकते हैं कि आज जो हम सुंदर Websites देखते हैं, उनके पीछे कितनी लंबी यात्रा रही है।
(03)💻 What You Need to Run HTML Code
HTML Code लिखने और उसे रन करने के लिए आपको बहुत ही बेसिक टूल्स की जरूरत होती है। HTML की सबसे अच्छी बात यह है कि इसके लिए आपको किसी भारी हार्डवेयर या महंगे सॉफ्टवेयर की जरूरत नहीं है। आप अपने साधारण कंप्यूटर या लैपटॉप पर भी Web डेवलपमेंट शुरू कर सकते हैं। इसके लिए मुख्य रूप से दो चीजों की जरूरत होती है
{A} Text Editor (जहाँ आप Code लिखेंगे)
Text Editor एक ऐसा सॉफ्टवेयर है जिसमें आप अपना HTML Code टाइप करते हैं। यहाँ कुछ लोकप्रिय विकल्प दिए गए हैं:
[i] Notepad (Windows) / TextEdit (Mac): ये आपके कंप्यूटर में पहले से ही मौजूद होते हैं। शुरुआती दौर में सीखने के लिए ये अच्छे हैं।
[ii] VS Code (Visual Studio Code): यह आज के समय में Developers का सबसे पसंदीदा फ्री सॉफ्टवेयर है। इसमें Code ऑटो-कम्पलीट (Auto-complete) हो जाता है, जिससे Codeिंग आसान हो जाती है।
[iii] Sublime Text: यह बहुत हल्का और तेज चलने वाला एडिटर है।
{B} Web Browser (जहाँ आप आउटपुट देखेंगे)
HTML Code को रन करने के लिए आपको एक Browser की जरूरत होती है। Browser आपके Code को पढ़ता है और उसे एक सुंदर Web Page में बदल देता है।
[i] Google Chrome (सबसे ज्यादा इस्तेमाल होने वाला)
[ii] Mozilla Firefox
[iii] Microsoft Edge
[iv] Safari
{C}📝 How to Create and Run Your First HTML File
अगर आप अभी अपना पहला Code रन करना चाहते हैं, तो इन 4 स्टेप्स को फॉलो करें:
Step-1: Open Text Editor: अपने कंप्यूटर में Notepad या VS Code खोलें।
Step-2: Write Code: नीचे दिया गया Code उसमें टाइप करें:
Step-3: Save the File: सबसे महत्वपूर्ण स्टेप! File को Save करते समय उसका नाम कुछ भी रखें, लेकिन आखिर में .html जरूर लगाएं।
Example: index.html या mycode.html
Step-4:Run the File: जहाँ आपने File Save की है, वहाँ जाकर उस पर डबल-Click करें। वह आपके Browser में खुल जाएगी और आपको अपना बनाया हुआ Page दिखाई देगा।
{D}💡 Pro Tip: Live Server
अगर आप VS Code इस्तेमाल कर रहे हैं, तो आप "Live Server" नाम का एक Extension Download कर सकते हैं। इससे फायदा यह होता है कि जैसे ही आप Code में कोई बदलाव करके Save करते हैं, Browser अपने आप अपडेट हो जाता है—आपको बार-बार Refresh करने की जरूरत नहीं पड़ती।
(04)🏷️ What is an HTML Tag?
अगर HTML एक भाषा है, तो Tags उसके व्याकरण (Grammar) हैं। Tags ही वह जरिया हैं जिनसे हम Web Browser (जैसे Chrome) को यह बताते हैं कि Screen पर क्या दिखाना है।
HTML Tag एक विशेष Keyword होता है जो Angle Brackets < > के अंदर बंद होता है। यह Browser के लिए एक निर्देश (Instruction) की तरह काम करता है। Browser इन Tags को खुद नहीं दिखाता, बल्कि इनके अंदर लिखे Content को फॉर्मेट करके दिखाता है।
{A}HTML Tag : Syntax
ज्यादातर HTML Tags जोड़ी (Pair) में आते हैं:
Opening Tag: यह बताता है कि कोई प्रभाव कहाँ से शुरू हो रहा है।
Example: <html>, <h1>, <p>।
Closing Tag: यह बताता है कि प्रभाव कहाँ खत्म हो रहा है। इसमें Tag के नाम से पहले एक Forward slash(/) लगाया जाता है।
Example: </html>, </h1>, </p>।
{B} Types of HTML Tags
HTML में Tags को मुख्य रूप से दो श्रेणियों में बांटा गया है:
[i] Paired Tags (जिन्हें Container Tags भी कहते हैं)
ये वे Tags हैं जिन्हें बंद करना अनिवार्य होता है। इनके बीच में कुछ Text या अन्य Tagsस लिखे जाते हैं।
Example: <b> This text will be in bold. </b>
यहाँ <b>Open हुआ और <b> पर Close हुआ।
[ii] Unpaired Tags (जिन्हें Empty या Self-Closing Tags भी कहते हैं)
इन Tags को बंद करने की जरूरत नहीं होती क्योंकि इनके अंदर कोई Text नहीं रखा जाता। ये अकेले ही अपना काम कर देते हैं।
Example 1: <br> (Line Break के लिए - अगली Line पर जाने के लिए)।
Example 2: <hr> (Horizontal Rule के लिए - एक सीधी Line खींचने के लिए)।
Example 3: <img> (Image लगाने के लिए)।
{C} कुछ महत्वपूर्ण Tags और उनके काम (Commonly Used Tags)
{D} Tags इस्तेमाल करते समय ध्यान रखने वाली बातें
[i] Case Sensitivity: HTML एक "Case Insensitive" भाषा है। यानी आप <P> लिखें या <p>, दोनों का मतलब एक ही है। लेकिन प्रोफेशनल तरीके से हमेशा lowercase (छोटे अक्षरों) में लिखना ही सही माना जाता है।
[ii] Nesting: Tags के अंदर tags लिखे जा सकते हैं, लेकिन उन्हें सही क्रम में बंद करना जरूरी है।
सही तरीका: <p><b> Text </b></p>
गलत तरीका: <p><b> Text </p></b>
Note: Tags Browser के "Secret Code" हैं। आप जितने ज्यादा Tags सीखेंगे, उतनी ही बेहतर Website बना पाएंगे।
(05) 🏗️ HTML Element
अक्सर लोग Tag और Element को एक ही समझ लेते हैं, लेकिन Coding की दुनिया में इनमें एक बारीक और बहुत जरूरी अंतर होता है।
एक HTML Element वह पूरी इकाई (Unit) है जो किसी Web Page के एक हिस्से को बनाती है। अगर Tags 'ईंटें' हैं, तो Element वह 'दीवार' है जो उन ईंटों और सीमेंट (Content) से मिलकर बनी है।
एक Element मुख्य रूप से तीन चीजों से मिलकर बनता है:
[i] Start Tag (Opening Tag): यहाँ से Element शुरू होता है।
[ii] Content: वह जानकारी (Text, Image, या अन्य Elements) जो आप स्क्रीन पर दिखाना चाहते हैं।
[ii] End Tag (Closing Tag): यहाँ Element खत्म होता है।
Element = Opening Tag + Content + Closing Tag
मान लीजिए हम एक Paragraph लिखना चाहते हैं:
<p> Welcome to my Blog </p>
[i] यहाँ <p> क्या है? — यह Opening Tag है।
[ii] यहाँ Welcome to my Blog क्या है? — यह Content है।
[iii] यहाँ </p> क्या है? — यह Closing Tag है।
लेकिन यह पूरी Line क्या है? — यह एक Paragraph Element है।
{A} Types of Elements
Elements को समझने के लिए, Elements को उनकी व्यवहार (Behavior) के आधार पर दो भागों में बांटा गया है:
[i] Block-level Elements
ये वे Elements हैं जो हमेशा एक नई Line से शुरू होते हैं और पूरी उपलब्ध चौड़ाई (Width) को घेर लेते हैं।
Features: इनके अगल-बगल में कोई दूसरा Element तब तक नहीं आ सकता जब तक आप CSS का इस्तेमाल न करें।
Example:
[1]<address> [2]<article> [3] <aside> [4]<blockquote> [5]<canvas> [6] <dd> [7]<div> [8]<dl> [9]<dt> [10]<fieldset> [11]<figcaption> [12]<figure> [13]<footer> [14]<form> [15]<h1>-<h6> [16]<header> [17]<hr> [18]<li> [19]<main> [20]<nav> [21]<noscript> [22]<ol> [23]<p> [24]<pre> [25]<section> [26]<table> [27]<tfoot> [28] <ul> [29] <video> [30] </video>
[ii] Inline Elements
ये Elements नई Line से शुरू नहीं होते। ये केवल उतनी ही जगह लेते हैं जितनी इनके अंदर के Content को जरूरत होती है।
Features: ये दूसरे Elements के साथ एक ही Line में फिट हो जाते हैं।
Example:
[1]<a> [2]<abbr> [3]<acronym> [4]<b> [5]<bdo> [6]<big> [7]<br> [8]<button> [9]<cite> [10]<code> [11]<dfn> [12]<em> [13]<i> [14]<img> [16]<input> [17]<kbd> [18]<label> [19]<map> [20]<object> [21]<output> [22]<q> [23]<samp> [24]<script> [25]<select> [26]<small> [27]<span> [28]<strong> [29]<sub> [30]<sup> [31]<textarea> [32]<time> [33]<tt> [34]<var>
{B} Nested HTML Elements (Element के अंदर Element)
HTML में एक Element के अंदर दूसरा Element रखा जा सकता है। इसे Nesting कहते हैं।
Example: > <p> यह एक <b> बोल्ड </b> शब्द है। </p>
यहाँ <p> एक "Parent Element" है और <b> उसका "Child Element" है।
{C} Empty Elements (बिना Content वाले Element)
कुछ Element ऐसे होते हैं जिनमें कोई Content नहीं होता और न ही उन्हें Closing Tag की जरूरत होती है। इन्हें Void Elements भी कहा जाता है।
जैसे:
[i] <br> (Line break)
[ii] <hr> (Line draw)
[iii] <img> (Photo)
इनमें आप कोई Text नहीं भर सकते, इसलिए ये सीधे Tag के रूप में ही Element कहलाते हैं।
💡 Tag vs Element Difference
Interview या Professional काम में यह अंतर बहुत काम आता है
[i] Tag: केवल वह Code है जो < > के अंदर है (जैसे <h1>)।
[ii] Element: वह पूरा पैकेज है जो शुरू से अंत तक चलता है (जैसे <h1> Content </h1>)।
Elements ही वे बिल्डिंग Blocks हैं जिनसे आपका पूरा Web Page तैयार होता है। अब आप समझ गए होंगे कि Browser किसी Tag को नहीं, बल्कि पूरे Element को Render (Show) करता है।
(06) 🛠️ HTML Attributes: Element की Extra Power
अगर Element एक कार है, तो Attributes उसके Features हैं, जैसे उसका रंग, मॉडल, और इंजन की ताकत। attributes किसी भी HTML Element के बारे में Extra Information देते हैं और उसके व्यवहार को बदलते हैं।
{A} attributeके मुख्य नियम (Rules to Remember)
किसी भी attributeको इस्तेमाल करने के 3 पक्के नियम हैं:
[i] ये हमेशा Opening Tag में ही लिखे जाते हैं।
[ii] ये हमेशा Name/Value की जोड़ी में आते हैं।
[iii] इनकी वैल्यू हमेशा Double Quotes (" ") के अंदर लिखी जाती है।
{B} attributes का Syntax (Syntax)
attributeलिखने का सही तरीका यह है:
<tag name="value"> Content </tag>
Example:
<p align="center"> This is Paragraph </p>
[i] यहाँ align attributeका नाम है।
[ii] यहाँ "center" attributeकी वैल्यू है।
{C} सबसे ज्यादा इस्तेमाल होने वाले महत्वपूर्ण attributes
आइए कुछ ऐसे attributes को गहराई से समझते हैं जिनके बिना Website बनाना नामुमकिन है:
[i] href attribute(लिंक के लिए)
यह <a> (Anchor) Tag के साथ इस्तेमाल होता है। यह बताता है कि लिंक पर Click करने पर यूजर किस Website पर जाएगा।
Code:
<a href="https://prodevcode.blogspot.com/">Pre Dev Code</a>
[ii] src, alt, width और height (Image के लिए)
जब हम <img> Tag का इस्तेमाल करते हैं, तो हमें कई attributes की जरूरत पड़ती है:
[i] src: फोटो का रास्ता (Path) बताता है।
[ii] alt: अगर फोटो Load न हो, तो उसकी जगह क्या लिखा आए (Alternative Text)।
[iii] width/height: फोटो का आकार तय करने के लिए।
Code:
<img src="logo.jpg" alt="My Logo" width="200" height="200">
[iii] Title Attribute(टूलटिप के लिए)
जब आप किसी Element पर माउस ले जाते हैं, तो एक छोटा सा बॉक्स दिखता है। यह title attributeकी वजह से होता है।
Code:
<p title="I am a paragraph.">Bring the mouse here. </p>
[iv] style attribute(Designing के लिए)
यह सबसे पावरफुल attributes में से एक है। इससे आप सीधे HTML के अंदर CSS लिख सकते हैं।
Code:
<h1 style="color: red; font-size: 50px;"> Red heading </h1>
[v] lang attribute(भाषा के लिए)
यह हमेशा <html> Tag में लिखा जाता है ताकि Browser और सर्च इंजन (Google) को पता चले कि Website किस भाषा में है।
Code: (en मतलब English और hi मतलब हिंदी)
<html lang="hi">
<html lang="en">
{D} Global Attributes (जो हर Tag पर चलते हैं)
कुछ attributes ऐसे होते हैं जिन्हें आप लगभग हर HTML Tag के साथ इस्तेमाल कर सकते हैं:
[i] id: किसी Element को एक यूनिक (Unique) नाम देने के लिए।
[ii] class: एक जैसे कई Elemenst को एक ग्रुप में रखने के लिए (CSS में बहुत काम आता है)।
[iii] hidden: किसी Element को स्क्रीन से गायब करने के लिए।
{E} केस स्टडी: एक साथ कई Attributes
एक ही Tag में हम कई attributes का इस्तेमाल कर सकते हैं:
<a href="https://prodevcode.blogspot.com/p/contact-us.html" title="Contact Me" target="_blank" style="color: blue;">
Contact Us
</a>
यहाँ हमने लिंक का पता, टूलटिप, नया Tab खोलने का निर्देश और रंग—चारों चीजें एक साथ दी हैं।
(07) 🏗️ HTML Mini Project
इस प्रोजेक्ट में हम उन सभी चीजों का इस्तेमाल करेंगे जो हमने सीखी हैं:
[i] Introduction: Page का स्ट्रक्चर।
[ii] Tags: Heading, Paragraph, Links, और Images।
[iii] Elements: Block-level और Inline का सही Combination.
[iv] Attributes: href, src, style, और alt का प्रयोग।
स्टेप 1: Code को कॉपी करें
अपने Notepad या VS Code को खोलें और नीचे दिया गया Code पेस्ट करें। अपने Text Editor (Notepad/VS Code) में नीचे दिया गया Code टाइप करें।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Professional Portfolio</title>
<style>
body{
background-color: #f0f2f5;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0; padding: 0;
}
header{
background-color: #1a237e;
color: white; padding: 40px;
text-align: center;
}
header h1{
margin: 0;
font-size: 36px;
}
header p{
font-size: 18px;
opacity: 0.9;
}
main{
max-width: 900px;
margin: 30px auto;
background-color: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.logo{
text-align: center;
margin-bottom: 30px;
}
.logo img{
border-radius: 50%;
border: 4px solid #1a237e;
width: 150px;
}
section h2{
color: #1a237e;
border-bottom: 2px solid #e0e0e0;
padding-bottom: 10px;
}
section a{
background-color: #1a237e; color: white;
padding: 12px 25px;
text-decoration: none;
border-radius: 5px;
display: inline-block;
font-weight: bold;
margin-top: 10px;
}
footer{
text-align: center;
padding: 20px;
color: #757575;
font-size: 14px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Profile</h1>
<p>Learning Web Development with Passion</p>
</header>
<main>
<div class="logo"><img src="img/mylogo.png" alt="myLOGO" ></div>
<section>
<h2>About Me</h2>
<p>I am a beginner web developer currently learning the fundamentals of
<b>HTML5</b>. I enjoy structuring web pages and understanding how the internet works.
My goal is to build responsive and user-friendly websites.</p>
</section>
<section style="margin-top: 30px;">
<h2>My Skills</h2>
<ul style="line-height: 2;">
<li><b>HTML5 Structure:</b> Tags, Elements, and Document Flow</li>
<li><b>Attributes:</b> Configuring elements using id, class, and src</li>
<li><b>Project Management:</b> Saving and running local HTML files</li>
</ul>
</section>
<section style="margin-top: 40px; text-align: center;">
<h2 style="color: #1a237e;">Get In Touch</h2>
<p>If you want to collaborate on a project, feel free to contact me.</p>
<a href="mailto:prodevcode@gm.com" > Send Me an Email </a>
</section>
</main>
<footer> Designed by a Future Developer © 2026 </footer>
</body>
</html>
Step 2: Save and Run
[i] इस Code को profile.html के नाम से Save करें।
[ii] File पर Right Click करें और Open with Google Chrome चुनें।
—————— ✦✦✦ ——————
.png)
Comments
Post a Comment