एचटीएमएल क्या है

इस लेख में हम जानेंगे के HTML क्या है (What is HTML in Hindi) सबको HTML की पूरी जानकारी होती नहीं है और जो लोग अपना Career Blogging में शुरू करना चाहते हैं और एक सफल ब्लॉगर बनना चाहते हैं. तो उनको इस ज्ञान का होना बहुत ही आवश्यक है.आज इस लेख में आपको यही बताने वाला हूं कि HTML में विशेषता क्या है? और इसे webpage या website बनाने के लिए ही बनाया गया है.

HTML क्या है?

HTML  एक Markup language है। HTML का पूरा रूप क्या है जिसे Hypertext markup language कहा जाता है। Html Web pages बनाने में सबसे ज्यादा इस्तेमाल की जाती है । 
Html language का use करके हम Browser को यह समझाते है कि, हमारे Webpage की information user को कैसी दिखनी चाहिए। आप अभी जिस Website को पढ़ रहे है इसका भी Structure Html language के इस्तेमाल से ही किया गया है। Hypertext और markup यह दो अलग शब्द है, जिनकी परिभाषा कुछ इस प्रकार है।

• Hypertext दो web pages को आपस मे एक text के अंदर जोड़े रखता है । ताकि जब कोई user उस text  के ऊपर क्लिक करे तो वह उसे अगले webpage पर पंहुचा दे। इस प्रकार, Web pages पर उपलब्ध लिंक को hypertext कहा जाता है।
• Markup language किसी भी web page के Structure को बनाने के काम में आती है। Html के अलावा DHTML, XHTML, XML XSLT etc. भी markup language है। परन्तु Html सबसे ज्यादा इस्तेमाल होने वाली language है।

HTML का इतिहास

HTML की शुरुवात 1990 में Tim-Berners-Lee (जो कि भौतिक विज्ञानी Contractor के रूप में एक French Organization में कार्यरत थे) ने की थी। शुरुवात में Html language का इस्तेमाल Document Sharing के लिये किया जाता था। कुछ समय बीतने के बाद आखिरकार Lee ने html को Specified करते हुए Browser और Software को लिखा। उसके बाद अब तक Webpage Create करने में Html language का ही use होता आ रहा है। अगर आप Html language अच्छे से सिख जाये तो एक Website बनाना आपके लिये आसान हो जायेगा। अब क्योंकि Html सबसे ज्यादा use की जाने वाली markup language है

                    HTML में Tag क्या है

HTML Tag एक साधारण शब्द या अक्षर होता है. जो Angular Brackets (< >) से घिरा रहता है. इस प्रकार एक साधारण शब्द/अक्षर और Angular Brackets से एक HTML Tag का निर्माण होता है. नीचे कुछ उदाहरण दिए गए है. आप इन्हे पढकर आसानी से HTML Tag को समझ जाऐंगे.

Example 1

Form एक साधारण शब्द है. HTML Document में Form बनाने के लिए Form Tag का उपयोग किया जाता है. HTML Language में Form Tag बनाने के लिए Form शब्द को Less Than और Greater Than के बीच लिखने से HTML Form Tag का निर्माण होता है. जिसे इस प्रकार लिखा जाएगा.

…

HTML Tag का Syntax

एक HTML Tag के तीन भाग होते है:

1. Opening Tag
2. Text
3. Closing Tag

Opening Tag

Opening Tag को Start Tag भी कहा जाता है. Start Tag का कार्य Browser को बताना है कि अब ये Rule Define हो रहा है. ताकि ब्राउजर उस Tag को सही तरह से Read कर सके. Opening Tag को इस प्रकार लिखा जाता है.

Text या Content

Text वह जानकारी होती है; जो Webpage में लिखनी होती है. आप जो सूचना या जानकारी अपने Users को बताना चाहते है. वह Text यहाँ लिखा जाता है. Text लिखने के बाद Syntax कुछ इस प्रकार दिखाई देता है.

Text

Closing Tag

Closing Tag को End Tag भी कहते है. End Tag से ब्राउजर को Opening Tag द्वारा Define Rule की समाप्ती के बारे में बताया जाता है. ये तीन Elements मिलकर एक HTML Tag का Syntax बनाते है. इन्हे एक साथ इस प्रकार लिखा जाता है. यह एक HTML Tag का पूरा Syntax है.

Text

Closing Tag को Opening Tag से अलग बनाने के लिए Forward Slash (/) का उपयोग किया जाता है.

सभी HTML Tags का Syntax एक जैसा नही होता है. ऊपर बताया गया Syntax Paired Tags में Use किया जाता है. लेकिन, कुछ HTML Tags अकेले होते है. इन्हे Empty Tag कहते है. Empty Tag का Syntax इस प्रकार लिखा जाता है.

HTML Tag के प्रकार

HTML Language में विभिन्न प्रकार के Tags होते है. प्रत्येक Tag का उपयोग अलग-अलग Elements को Define करने के लिये किया जाता है. HTML Tags के दो प्रकार होते है:

1. Paired HTML Tag
2. Unpaired HTML Tag

1. Paired HTML Tags

Paired HTML Tags वे HTML Tags होते है. जिनको जोडे यानि Pair में लिखा जाता है. एक Paired Tag के दो भाग होते है. पहला Opening Part होता है. जिसे इस प्रकार लिखा जाता है.

दूसरा भाग Closing Part होता है. इस भाग को Content यानि Text के बाद लिखा जाता है. इस भाग को इस प्रकार Define किया जाता है.

HTML में अधिकतर Tag Paired Tag ही होते है. लेकिन, हर चीज की तरह इनके भी अपवाद होते है – Unpaired Tag.

2. Unpaired HTML Tag

Unpaired Tag को Singular HTML Tag भी कहा जाता है. ये Tag अकेले होते है. Singular Tag का साथी Tag नही होता है. एक Unpaired Tag में Opening Part और Closing Part को एक साथ ही लिखा जाता है. एक Singular Tag को HTML Document में इस प्रकार Define किया जाता है.

 है.

HTML Element क्या है?

HTML Element, HTML Tags और Content का Combination होता है. यानि Opening HTML Tag और Closing HTML Tag तक सबकुछ एक HTML Element ही होता है. एक Start HTML Tag, End HTML Tag और इनके बीच Content को सामुहिक रूप से HTML Element कहते है.

HTML Element को समझने के लिये हमने एक उदाहरण तैयार किया है. जिसे पढकर आप HTML Element को बेहतर समझ पायेंगे.

Example को समझिए

ऊपर दिए गए उदाहरण में कुल 4 HTML Elements है. आइए प्रत्येक HTML Element को समझते है.

1. HTML Element एक HTML Document का Root Element होता है. इस Element से Browser को पता चलता है कि यह एक HTML Document है. Opening  Tag, अन्य HTML Elements (Body, Heading और Paragraph), और Closing 

 Tag तीनो मिलकर HTML Element का निर्माब करती है.

Body Element में HTML Document का Visible Part लिखा जाता है. Opening  Tag, अन्य HTML Elements (Heading और Paragraph), और Closing 

 Tag से एक Body Element का निर्माण होता है.

Heading Element का उपयोग Heading बनाने के लिए किया जाता है. Opening 

 Tag, Heading Text, और Closing 

 Tag से एक Heading Element का निर्माण होता है.

Paragraph Element का उपयोग HTMl Document में Paragraph लिखने के लिए किया जाता है. Opening  Tag, Paragraph Text, और Closing 

 Tag से एक Paragraph Element का निर्माण होता है.

अब आप इस उदाहरण से HTML Element को समझ चुके है HTML Tags और HTML Elements के बीच अंतर को पढकर आप HTML Element के Concept को पूरी तरह से समझ जायेंगे.

Tag और Element में अंतर

बहुत लोगो द्वारा HTML Element और HTML Tag को एक दूसरे के लिये उपयोग किया जाता है. जो बिल्कुल भी सही नही है. क्योंकि HTML Tag और HTML Element दोनो एक दूसरे से भिन्न है. इन दोनों को एक दूसरे के लिये उपयोग करना सही Approach नही है. इसलिये हमने नीचे इन दोनों के बीच उपलब्ध सूक्ष्म अंतर के बारे मे बताया है. ताकि आपकी Confusion दूर हो जाए.

HTML Tag एक साधारण शब्द या अक्षर होता है, जो Angular Brackets (< >) से घिरा रहता है. इस साधारण शब्द या अक्षर को एक विशेष अर्थ Define करने के लिये Mark किया जाता है. जैसे; ऊपर की फोटो में 

 एक Opening Heading Tag है. और 

 एक Closing Heading Tag है.

HTML Element का निर्माण HTML Tags से होत है. एक Element का अलग से कोई अस्तित्व नही है. एक Opening Tag, Closing Tag और इनके बीच Content को सामुहिक रूप में Element कहा जाता है. प्रत्येक HTML Tag एक HTML Element हो सकता है. और अपनी अलग पहचान रखता है.

Nested HTML Element

HTML Document की ईंट HTML Tag होता है. एक HTML Tag के बीच में अन्य HTML Tags को लिखा जा सकता है. इस प्रक्रिया को HTML Elements को Nested करना कहते है. जैसे; ऊपर उदाहरण में HTML Element के बीच में Body Element, Heading Element और Paragraph Element को लिखा गया है. यहाँ HTML Parent Element है और Body, Heading और Paragraph Child Element है.

जिस क्रम में HTML Elements को Open किया जाता है. इसके विपरीत क्रम में इनको Close किया जाता है. मतलब सबसे पहले वाला Element सबसे बाद में Close होता है. जैसे; ऊपर के ऊदाहरण में हमने क्रमश: पहले HTML Element, Body Element, Heading Element और Paragraph Element को Open किया है. लेकिन, Heading Element को सबसे पहले Close किया है. इसके बाद Paragraph को Close किया है. इसके बाद क्रमश: Body और HTML Element को Close किया गया है.

Empty HTML Element

कुछ HTML Tags का साथी Tag यानि Closing Tag नही होता है. इनका सिर्फ Opening Part या Start Tag ही होता है. इन Tags में किसी Content को नही लिखा जाता है. ऐसे HTML Element को Empty Element कहा जाता है.

Empty Element में एक Tag के दोनो भाग यानि Opening Part एवं Closing Part एक ही Tag में शामिल होते है. जैसे; hr एक Empty Element है. जिसका उपयोग Document के End में एक Horizontal Line (आडि रेखा) लिखने के लिये किया जाता है. इस Tag को सही रूप में इस तरह लिखा जाता है – 
.

सबसे पहले इस Tag को भी Opening Tag कि तरह ही Open किया जाता है. फिर इस Tag को Close करने के लिये एक Space देकर Forward Slash लगा दिया जाता है. इस तरह एक ही Tag के भीतर दोनो भाग लिख जाते है. और HTML Standard का भी उलंघन नही होता है. यह पूरी तरह नियम से ही लिखा जाता है.

HTML Attribute क्या है?

HTML language सीखने का हमारा purpose यही होता है, कि हम एक awsome web page create कर पाए। अब चूंकि, html tags एक web page को simple Structure देते है। इसीलिये उसके additional improvement के लिए हमे इन element के attributes की knowledge होना बहुत जरूरी है।

अभी तक आप html document बनाते वक्त किसी html element का उपयोग कैसे करते है? जाहिर है, उसके सरल रूप में। For example अगर आप किसी Web page में Image Add करते है, तो आप उसे  इस तरह से लिखेंगे । परन्तु अगर आपको उस image की height, width, url, alt text etc. set करना हो तो आप क्या करेंगे।यहां पर काम आते है, html element के यह attributes . कुल मिलाकर अगर देखा जाए तो html attribute एक html element (tag) को extra configure या कहे उस element के बारे में additional information provide करता है।

अच्छे से समझे तो html element की विशेषताओं को define करने के लिए एक attribute का उपयोग किया जाता है। इन attributes को html tag के opening tag के भीतर रखा जाता है।

Example-:

All attributes दो parts से मिलकर बनते है । a. name and b. value .

• name एक property है, जिसे आप set करना चाहते है। for example – image को extra configure करने के लिए src attribute का use किया जाता है। तो यहां पर image tag के attribute का name src है। जिसका उपयोग हम image को extra configure करने के लिए करेंगे।
• value वह है, जो आप property के द्वारा उस element में Set करना चाहते है। value को हमेशा quotation (” “) के भीतर लिखा जाता है। उप्पर उदाहरण में  image attribute  की value url है, जहाँ पर image का url set करने पर web page में image show होने लगती है।

All html tags के Attribute name व value को हमेशा small latter में ही लिखा जाता है।

Example-;

अब तक तो शायद आपको समझ आ गया होगा की html attribute क्या होता है? और इसका उपयोग हम html element को additional information provide करने के लिए कैसे कर सकते है।

Basic HTML Tags

All html tags जो एक web page की बुनियाद रखते है । यानी उस वेब पेज के ऊपरी भाग (head area) से लेकर मध्य भाग (Content area) व निचले भाग (Footer area) को बनाने में Use किये जाते है। Basic html tags कहलाते है। नीचे सभी basic tags को उनके example के साथ समझाया गया है।

1. <! DOCTYPE> ― यह Doctype tag किसी भी Browser को यह बताता है, कि Run की गई Document file किस type (html, xml etc.) में है। इसका पूरा नाम Document Type Definition है।
2.  ― यह टैग html element का Root element होता है। यह browser को बताता है, कि Run की गई file html document में है।
3.  ― यह tag बाकी head element’s का Container element होता है। head element में Document की important information enclosed रहती है। title, style, base, link, meta, script, noscript जैसे element’s इसी टैग के भीतर लिखे जाते है।
4.  ― यह टैग Document की Body को परिभाषित करता है। किसी web page में show होने वाला Content area इसी head element की मदद से Creat किया जाता है। body element में Document का सारा Content जैसे – text, hyperlink, images, tables, lists etc. को शामिल किया जाता है

html attribute

3.Alt Attribute

Alternative text specify करने के लिए alt attribute का use किया जाता है। Alt attribute किसी image के लिए alternative information provide करता है। अगर किसी कारणवश image web page पर show नही होती है, तो इससे user अपना mouse चित्र के ऊपर ले जा कर वह image किस बारे में है। यह पता कर सकता है।

html attribute

                              4.href Attribute

Html Link को से define किया जाता है। tag में link को specified करने के लिए href attribute का use होता है।

Example-:

html attribute

                           5.lang Attribute

एक document की language को html tag में lang attribute की help से declared  किया जाता है। Accessibility applications और serch engine के लिए html document की language set करना अनिवार्य है।

Example-:

<! DOCTYPE html>

....

                              6.Style Attribute

Style attribute का उपयोग किसी element के Style ( Colour,Font,Size etc.) को specify करने के लिए किया जाता है।

Example-:

<! DOCTYPE html>

paragraph

                             7.title Attribute

title Attribute किसी element के बारे में extra information provide करता है। जब mouse उस element के ऊपर ले जाया जाता है, जिसमे title attribute use हुआ है, तो set की गयी जानकारी tooltip text के रूप में show होती है।

Example-:

<! DOCTYPE html>

this is title attribute

आज हमने जाना के, HTML क्या है (What is HTML in Hindi), केसे काम करता है और उसके कुछ basic tags. एक ब्लॉगर के लिए इसका ज्ञान होना जरूरी है ताकि वो अपने website को अच्छे से design कर सके. आशा करता हूं कि इस लेख से आपको HTML के बारे में कुछ सीखने को मिला होगा।