9 HTML Basics-3-11-2022

HTML Basics for Beginners in Hindi
HTML एक स्टै ण्डडड माकड-अप भाषा है जिसमें ज्यादातर वेबसाइटें लिखी िाती हैं। HTML की सबसे
बनु ियादी एचटीएमएि टै ग और एचटीएमएि एलिमें ट होते हैं, ये दोिों HTML में कोई भी कोड लिखते
समय अत्यंत महत्वपर्
ू ड हैं। ये टै ग वेब पेिों पर कंटें ट की स्रक्चर और प्रदर्डि में मदद करते हैं।
एक हाइपरटे क्स्ट माकडअप िैंग्वेि, या एचटीएमएि, ऐसे टै ग का उपयोग करता है िो प्िेि टे क्स्ट से िुडे
होते हैं। टै ग बताते हैं कक टे क्स्ट कैसा ददखिा चादहए और टे क्स्ट कैसे काम करें ग।े वेब ब्राउज़र टै ग्स को
दे खता है और उसी के अिस
ु ार उन्हें प्रदलर्डत करता है ।
HTML के बेसिक टै ग
“टै ग” वेब ब्राउज़र को वेब पेि के बारे में निदे र् प्रदाि करते हैं, िैसे कक इमेिेि को कहााँ प्रदलर्डत करिा
है , और डॉक्यम
ू ें ट कैसे किएट करिा है । HTML Tag एक HTML कोड है िो HTML पेि पर प्रत्येक स्रक्चर को
पररभाषषत करता है, जिसमें टे क्स्ट और images और हाइपरटे क्स्ट लिंक की नियजु क्त र्ालमि है ।
Tag को ब्राउज़र पढता है और प्रत्येक एलिमें ट में <> एंगि ब्रैकेट में एन्क्िोज़्ड एक टै ग िेम होता है । एक
वैलिड HTML डॉक्यम
ू ें ट की आवश्यकता है कक सभी टै ग ठीक से त्रदु ट मक्
ु त लिखा होिा चादहए । कई
बेलसक एलिमेंट टै ग का पररचय है िो HTML में उपिब्ध हैं और िो एक वेब पेि बिाते हैं।
आम तौर पर, HTML में टै ग दो प्रकार के होते हैं:
 Container tag
 Non-Container or Empty Tag
Container tags in HTML
टै ग िो कंटें ट को ओपनिंग और क्िोजिंग टै ग के साथ एन्क्िोज़्ड करते हैं, उसे कंटे िर टै ग कहा िाता हैं।
कंटे िर टै ग को आम तौर पर तीि भागों में षवभाजित ककया िाता है , यािी, Opening tag, Content (िो
ब्राउज़र पर प्रदलर्डत होगा), और Closing tag।
कंटें ट पाटड में, उिमें कुछ अन्य टै ग भी हो सकते हैं। उदहारर् के लिए :
<p> HTML Tutotial </p>
यहााँ,< P >, पैराग्राफ टै ग, एक कंटे िर टै ग है । p यानि पैराग्राफ यह <> एंगि ब्रैकेट से स्टाटड होता है , और
कीबोडड के फॉरवडड स्िैर् </> के साथ एंगि ब्रैकेट टै ग क्िोि होता है । िहााँ टै ग Starting और Ending होगा,
उसे Container tag कहा िाता है ।
Non-Container tags or Empty Tags in HTML

HTML टै ग्स िो ककसी भी कंटें ट को एन्क्िोज़्ड िहीं करते हैं, और जििका कोई एन्ड टै ग िहीं है , उन्हें
िॉि-कंटे िर टै ग के रूप में िािा िाता है । उदहारर् के लिए :
<p> HTML<br>Tutotial </p>
यहााँ <br> एक िॉि कंटे िर या एम्पप्टी टै ग है, टै ग है जिसे हम कंटें ट के बबच में दे रहे है इसका एन्ड टै ग
िहीं होता, < br > टै ग पैराग्राफ में िाइि ब्रेक डाििे के लिए उपयोगी है ।
HTML Basic Structure
एक HTML डॉक्यम
ू ें ट का बेलसक स्रक्चर होता है । सभी वेबपेि एक वैध HTML दस्तावेज़ के लिए समाि
मािक साझा करते हैं। HTML एक वेब पेि की स्रक्चर का वर्डि करता है, जिसमे HTML में एलिमें ट की
एक series होती है । HTML एलिमें ट ब्राउज़र को कंटें ट प्रदलर्डत करिे का तरीका बताते हैं।
इससे पहिे कक आप अपिे डॉक्यम

ू ें ट में कंटें ट डाििा र्रू
ु करें , एक बनु ियादी स्रक्चर है जिसे आपको
अपिी फाइि में सेट करिे की आवश्यकता होती है । यह स्रक्चर ि केवि आपके दस्तावेज़ के अिप
ु ािि
के लिए आवश्यक है, बजकक आपको अपिे डॉक्यम
ू ेंट के बारे में उपयोगी िािकारी प्रदाि करिे की भी
अिम
ु नत दे गी। ककसी भी HTML डॉक्यम
ू ें ट की मि
ू स्रक्चर में निम्पिलिखखत सेक्र्ि या एलिमें ट होते हैं:
1. < !DOCTYPE HTML >
2. < html >
3. < head >
4. < Title>
5.< body >
!DOCTYPE HTML
<!DOCTYPE> एक वेब डॉक्यम

ू ें ट को लिखिे से पहिे डडक्िेरेर्ि दे िा पडता है यह ब्राउज़र को सचू चत
करता है कक यह वास्तव में एक HTML 5 डॉक्यम
ू ें ट है । हािांकक अन्य प्रकार के DOC प्रकार हैं, यह सबसे
अचधक उपयोग की िािे वािी घोषर्ा है ।
<!DOCTYPE html>
html
HTML Document स्वयं <html> से start होता है और </html> पर end होता है । <html> element HTML पेि
का रुट एलिमें ट है । इसके अंदर बाकक सारे सेक्र्ि आते है िैसे की <head> <body> यह एक वेब डॉक्यम
ू ें ट
के अन्य सारे एलिमें ट इसके अंदर आते है । यह <html> टै ग ब्राउज़र पर दीखता िहीं है ।
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
head
<head> Element में HTML डॉक्यम

ू ें ट के बारे में Meta Information होती है । Meta Information एक
अनतररक्त िािकारी होती है िो यि
ू र को िहीं दीखता िेककि उसे सचड इंिि पढता है । मेटा एलिमें ट का
उपयोग एचटीएमएि दस्तावेज़ के प्रॉपटीि का वर्डि करिे वािे िाम को र्ालमि करिे के लिए ककया िा
सकता है , िैसे िेखक, समाजप्त नतचथ, कीवडड की सच
ू ी, दस्तावेज़ िेखक इत्यादद।
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML information">
<meta name="keywords" content="HTML, Structure of HTML">
<meta name="author" content="Ambuj.B">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Title
<title> एलिमें ट <head> टै ग में रहता है और वेब पेि के िाम को पररभाषषत करता है । आपको पेि का
टाइटि दे खिा हो यह ब्राउज़र के टै ब में प्रदलर्डत होता है । यह एक कंटे िर टै ग है और इसलिए <title> से
र्रू
ु होता है और </title> पर खत्म होता है ।
<head>
<meta charset="UTF-8">
<meta name="description" content="Free HTML tutorials">
<title> HTML First Web Page </title>
</head>
body
< body > टै ग दस्तावेज़ के मख्

ु य भाग को पररभाषषत करता है । < body > एलिमें ट में HTML डॉक्यम
ू ें ट की
सभी कंटें ट होती है , िैसे कक है डडंग, पैराग्राफ, इमेि, हाइपरलिंक, टे बि, lists, आदद। यह ब्राउज़र में ददखिे
वािा मख्
ु य एलिमें ट है । आपके द्वारा ब्राउज़र में प्रस्तत
ु की गई सभी कंटें ट इस एलिमें ट के भीतर
सजम्पमलित होती है ।
<!DOCTYPE html>
<html>
<head>
<title>HTML First Web Page </title>
</head>
<body>
<h1>HTML Heading Example</h1>
<h2>Welcome to Heading Second Level</h2>
<h3>Learn html Heading Three</h3>
<p> This is Paragraph Example <br> you can easily learn HTML Tags in step by step manner. </p>
</body>
</html>
HTML Headings
अब हम वेब पेि बिा रहे है तो उसका है डडंग लिखिा होता है यह वेब पेि के मैि कंटें ट के अंदर आता
है तो यह < body > एलिमें ट के अंदर होगा। हे डडंग टै ग हमें अपिे वेब पेि की कंटें ट में है डडंग लिखिे में
सक्षम बिाते हैं। HTML 5 में h1 से h6 तक 6 बनु ियादी है डडंग प्रदाि करता है, प्रत्येक एक अिग फॉन्ट-साइि
और वेट के साथ होती है, h1 सबसे बडा है डडंग और h6 सबसे कम होता है ।
<!DOCTYPE html>
<html>
<head>
<title>HTML Basics </title>
</head>
<body>
<h1>HTML Heading 1 </h1>
<h2>HTML Heading 2</h2>
<h3> HTML Heading 3 </h3>
<h4> HTML Heading 4</h4>
</body>
</html>
यहााँ लिखा हुआ कोड को कॉपी कीजिये। और आपके कंप्यट

ू र पर िोटपैड में पेस्ट कीजिये। अब HTML पेि
को सेव कीजिये। इसके लिए आपको Save As में िािा होगा क्यों के िोटपैड डडफॉकट रूप से प्िैि टे क्स्ट
में सेव करता है । आप अपिे फाइि का िाम HTML heading दीजिये, आप Save As Type में All Files को
सेिेक्ट कीजिये और इसके बाद .html लिख के सेव कीजिये, जिस से आपका फाइि HTML पेि बि
िायेगा।
यह फाइि को कफर से एडडट करिे के लिए आप िोटपैड पर आप ओपि कर के एडडट कर सकते है ।

इसका आउटपट
ु हम गग
ू ल के क्रोम ब्राउज़र में दे ख रहे है ।
HTML Paragraphs
HTML पैराग्राफ को <p> टै ग से पररभाषषत ककया िाता है , अब एक है डडंग लिखिे के बाद हम वेब पेि में
पैराग्राफ लिखते है यह भी एक कंटे िर टै ग है िो की < p > टै ग से र्रू
ु होता है < /p > से समाप्त होता है ।
<!DOCTYPE html>
<html>
<head>
<title>HTML First Web Page</title>
</head>
<body>
<h1>HTML H1 Heading Tag Example</h1>
<p>HTML Paragraph is here</p>
</body>
</html>
एक पैराग्राफ हमेर्ा एक िई िाइि पर र्रू

ु होता है, और ब्राउज़र स्वचालित रूप से पैराग्राफ के पहिे और
बाद में कुछ सफेद स्थाि (माजिडि) िोड दे ता हैं।
HTML Line-Break
िाइि-ब्रेक टै ग < br >एक िॉि-कंटे िर टै ग है , और हम इसका उपयोग टे क्स्ट िाइिों को ब्रेक दे िे के लिए
करते हैं। उदाहरर् के लिए यह एक िम्पबा िाइि वािा टे क्स्ट को निचे के िाइि में िािा, और अगिी
िाइि की कंटें ट के साथ वो िारी रहता है ।
<!DOCTYPE html>
<html>
<head>
<title>HTML Home Page</title>
</head>
<body>
<h1>HTML Heading One Example </h1>
<p>In this Paragraph<br> you will see the effect of line break</p>
</body>
</html>
HTML Links
HTML लिंक को <a> टै ग से पररभाषषत ककया िाता है , आप ककसी टे क्स्ट के ऊपर लिंक दे िा चाहते है ,
तो <a> टै ग का उपयोग होता है लिंक का स्थाि <href> Attribute में उकिेखखत ककआ िाता है ।
<!DOCTYPE html>
<html>
<head>
<title>HTML Home Page</title>

</head>
<body>
<h1>HTML Anchor Tag Example</h1>
<p>In this example <br> you will see use of anchor tag</p>
<a href="http://www.mittalcareercentre.com">Gita Mittal Website</a>
</body>
</html>
HTML Images
HTML में इमेि को <img> टै ग से पररभाषषत ककया िाता है । वेब पेि पर इमेि रें डर करिे के लिए
टै ग का उपयोग ककया िाता है । इमेि को वास्तव में एक वेब पेि में िहीं डािा िाता है , बजकक इसके
बिाय वे वेब पेिों से िुडे होते हैं। <img> टै ग image के लिए एक स्थाि बिाता है जिसे src Attribute का
उपयोग करके इमेि का सोसड लिंक ककया िाता है एक इमेि टै ग में उपयोग होिे वािे Attribute होते है :
1. src– सोसड फाइि या इमेि के URL को निददड ष्ट करिे के लिए उपयोग ककया िाता है ।
2. alt– इमेि से संबचं धत कुछ alternative text निददड ष्ट करिे के लिए उपयोग ककया िाता है ।
3. height -षपक्सेि में छषव की ऊंचाई निददड ष्ट करिे के लिए उपयोग ककया िाता है ।
4. width -षपक्सेि में छषव की चौडाई निददड ष्ट करिे के लिए उपयोग ककया िाता है ।
<!DOCTYPE html>
<html>
<head>
<title>HTML Home Page </title>
</head>
<body>
<h1>HTML Image Example</h1>
<p>Now you are learning basic tags<br> Here is example of img tag</p>
<a href="http://www.mittalcareercentre.com">Gita Mittal Centre’s Website<br> </a>
<img src="C:\Users\info\OneDrive\Desktop/gmcdc.png" alt="GMCDC Jaipur" height="80px"

width="120px">
</body>
</html>
HTML Document Image element Output
Note : अगर इमेि वेब पेि के समाि फोकडर में है, तो src Attribute में परू ा िोकेर्ि निददड ष्ट करिे की
कोई आवश्यकता िहीं है । आप डायरे क्टिी ऐसा लिख सकते है ।< img src=” GMCDC.png” alt=”GMCDC,
Jaipur ” height=”80 px” width= “120 px” >
Paragraph tag p
HTML में पैराग्राफ टै ग का बहुत ज्यादा यि

ू ककया िाता हैं । ककसी भी वेबसाइट में कंटें ट बहुत िरूरी
होता हैं ताकक उस वेबसाइट के पेि के बारे में यि
ू र पढ़ सकते हैं । HTML paragraph tag में टे क्स्ट को
लिखा िाता हैं ।
साधारर् भाषा में कहे तो िैसे हम कोई भी पैराग्राफ लिखते हैं और उसको बाद पढ़ते हैं । परन्तु HTML
िैंग्वेि में वो पैराग्राफ में लिखा िाता हैं। एक पेि में ककतिे भी पैराग्राफ हो सकते हैं। सभी पैराग्राप के
लिए HTML पैराग्राफ टै ग का यि
ू ककया िाता हैं ।
उदाहरर् से समझते हैं -
<!DOCTYPE html>
<html>
<head>
<title>Type of Heading Tags </title>
</head>
<body>
<p> Paragraph goes here . </p>
</body>
</html>
ऊपर ददए गए उदाहरर् में आप दे ख सकते हैं की HTML example में एक पैराग्राफ
टै ग का यि
ू ककया गया हैं ।
उसे पैराग्राफ टै ग का एक closing टै ग
हैं ।
paragraph टै ग के अंदर पैराग्राप टे क्स्ट(text) को लिखा िाता हैं ।
माि िीजिये एक HTML पेि के 3 पैराग्राफ हैं तो उि paragraph को को यि

ू करिे का तरीका कुछ इस
प्रकार होता हैं ।
पहिे paragraph का टे क्स्ट (text)। कुछ भी टे क्स्ट(text) हो सकता हैं ।

दस
ू रे paragraph का टे क्स्ट । कुछ भी टे क्स्ट हो सकता हैं ।
तीसरे paragraph का टे क्स्ट । कुछ भी टे क्स्ट हो सकता हैं ।
इस प्रकार पेि पर ककतिे भी paragraph हो सकते हैं उि सब के लिए ककतिे भी पैराग्राप टै ग को यि
ू
ककया िा सकता हैं ।

9 HTML Basics-3-11-2022

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

9 HTML Basics-3-11-2022

Uploaded by

Copyright:

Available Formats

HTML Basics for Beginners in Hindi

आम तौर पर, HTML में टै ग दो प्रकार के होते हैं:

 Non-Container or Empty Tag

Container tags in HTML

<p> HTML Tutotial </p>

Non-Container tags or Empty Tags in HTML

<p> HTML<br>Tutotial </p>

HTML Basic Structure

इससे पहिे कक आप अपिे डॉक्यम

1. < !DOCTYPE HTML >

2. < html >

3. < head >

5.< body >

<!DOCTYPE> एक वेब डॉक्यम

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<head> Element में HTML डॉक्यम

<meta name="description" content="HTML information">

<meta name="keywords" content="HTML, Structure of HTML">

<meta name="author" content="Ambuj.B">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title> HTML First Web Page </title>

< body > टै ग दस्तावेज़ के मख्

<title>HTML First Web Page </title>

<h1>HTML Heading Example</h1>

<h2>Welcome to Heading Second Level</h2>

<h3>Learn html Heading Three</h3>

<title>HTML Basics </title>

<h1>HTML Heading 1 </h1>

<h2>HTML Heading 2</h2>

<h3> HTML Heading 3 </h3>

<h4> HTML Heading 4</h4>

<h5> HTML Heading 5</h5>

<h6> HTML Heading 6</h6>

यहााँ लिखा हुआ कोड को कॉपी कीजिये। और आपके कंप्यट

यह फाइि को कफर से एडडट करिे के लिए आप िोटपैड पर आप ओपि कर के एडडट कर सकते है ।

<title>HTML First Web Page</title>

<h1>HTML H1 Heading Tag Example</h1>

<p>HTML Paragraph is here</p>

एक पैराग्राफ हमेर्ा एक िई िाइि पर र्रू

<title>HTML Home Page</title>

<h1>HTML Heading One Example </h1>

<title>HTML Home Page</title>

<h1>HTML Anchor Tag Example</h1>

<a href="http://www.mittalcareercentre.com">Gita Mittal Website</a>

<title>HTML Home Page </title>

<h1>HTML Image Example</h1>

<a href="http://www.mittalcareercentre.com">Gita Mittal Centre’s Website<br> </a>

<img src="C:\Users\info\OneDrive\Desktop/gmcdc.png" alt="GMCDC Jaipur" height="80px"

HTML Document Image element Output

HTML में पैराग्राफ टै ग का बहुत ज्यादा यि

<title>Type of Heading Tags </title>

<p> Paragraph goes here . </p>

माि िीजिये एक HTML पेि के 3 पैराग्राफ हैं तो उि paragraph को को यि

पहिे paragraph का टे क्स्ट (text)। कुछ भी टे क्स्ट(text) हो सकता हैं ।

You might also like