HTML सीखें हिंदी में
HTML क्या है?
HTML एक Markup language है। जिसे 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 में 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 के तीन भाग होते है:
- Opening Tag
- Text
- 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 कुछ इस प्रकार दिखाई देता है.
Closing Tag
Closing Tag को End Tag भी कहते है. End Tag से ब्राउजर को Opening Tag द्वारा Define Rule की समाप्ती के बारे में बताया जाता है. ये तीन Elements मिलकर एक HTML Tag का Syntax बनाते है. इन्हे एक साथ इस प्रकार लिखा जाता है. यह एक HTML Tag का पूरा Syntax है.
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 के दो प्रकार होते है:
- Paired HTML Tag
- 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 को समझते है.
- HTML Element एक HTML Document का Root Element होता है. इस Element से Browser को पता चलता है कि यह एक HTML Document है. Opening
<html>Tag, अन्य HTML Elements (Body, Heading और Paragraph), और Closing</html>Tag तीनो मिलकर HTML Element का निर्माब करती है. - Body Element में HTML Document का Visible Part लिखा जाता है. Opening
<body>Tag, अन्य HTML Elements (Heading और Paragraph), और Closing</body>Tag से एक Body Element का निर्माण होता है. - Heading Element का उपयोग Heading बनाने के लिए किया जाता है. Opening
<h1>Tag, Heading Text, और Closing</h1>Tag से एक Heading Element का निर्माण होता है. - Paragraph Element का उपयोग HTMl Document में Paragraph लिखने के लिए किया जाता है. Opening
<p>Tag, Paragraph Text, और Closing</p>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 किया जाता है. जैसे; ऊपर की फोटो में <H1> एक Opening Heading Tag है. और </H1> एक 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 को सही रूप में इस तरह लिखा जाता है – <br />.
सबसे पहले इस 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 के साथ समझाया गया है।
- <! DOCTYPE> ― यह Doctype tag किसी भी Browser को यह बताता है, कि Run की गई Document file किस type (html, xml etc.) में है। इसका पूरा नाम Document Type Definition है।
- <Html> ― यह टैग html element का Root element होता है। यह browser को बताता है, कि Run की गई file html document में है।
- <head> ― यह tag बाकी head element’s का Container element होता है। head element में Document की important information enclosed रहती है। title, style, base, link, meta, script, noscript जैसे element’s इसी टैग के भीतर लिखे जाते है।
- <Body> ― यह टैग Document की Body को परिभाषित करता है। किसी web page में show होने वाला Content area इसी head element की मदद से Creat किया जाता है। body element में Document का सारा Content जैसे – text, hyperlink, images, tables, lists etc. को शामिल किया जाता है
- <title> ― यह टैग Document के title को define करता है। हर html document के लिये title tag required होता है। title tag को head element के भीतर लिखा जाता है।
- <meta> ― <meta> tag html document के बारे में metadata provide करता है। metadata page पर show नही होगा, लेकिन machine parsable होगी। meta element आमतौर पर page description, keyword, author of the document, last modified, and other matadata specify करने के लिए use किये जाते है।
HTML Text Tags
All html tags जो Web page के Content Area को Design करते है, उन्हें Text Tags कहा जाता है। नीचे दिए गए text tags का उपयोग करके आप html Document में text को अपने हिसाब से Control कर सकते है।
- <heading> ― यह टैग html heading को define करता है। एक html document में <h1> से लेकर <h6> तक heading tag use किये जाते है। <h1> document की most important heading को define करता है। वही <h2>,<h3>,<h4>,<h5>,<h6> least important heading को define करते है
- <p> ― यह टैग Document के paragraph define करता है। एक html document में कई paragraph element use किये जा सकते है। document में इस element को लिखने पर प्रत्येक <p> element के पहले व उसके बाद में browser automatically कुछ स्थान जोड़ते है।
- <br> ― यह टैग Single line break element को define करता है। document में paragraph line को अलग करने के लिये line break element का use किया जाता है।
- <strong> — Strong tag एक phrase tag है। important text को Define करने के लिये इस element का use किया जाता है।
- <DIV> ― Division element document में एक Section को define करता है। Style container के रूप में भी इस element को use किया जाता है।
- <B> ― यह टैग Bold text को define करता है। इसके इस्तेमाल से Document में किसी Important text को Bold ( गहरा ) किया जा सकता है।
- <!– –> ― यह Comment tag है।Source code में Comment add करने के लिये Comment element use किया जाता है।
- <code> ― Code element एक phrase tag है। यह Computer code text को define करता है।
- <samp> ― Sample element एक phrase tag है। यह एक Computer program से sample output को define करता है।
- <q> ― q element एक Short quotation को define करता है। Browser normally quotation के चारो ओर quotation marks डालते है
- <Blockquote> ― blockquote element किसी अन्य source से quoted एक section को specified करता है।
- <del> ― delete element किसी document में से हटाए गए पाठ (deleted text) को define करता है। इस टैग की help से document के किसी भी text को delete किया जा सकता है।
- <ins> ― inserted element किसी document में सम्मिलित पाठ (inserted text) को define करता है । इस टैग की मदद से पुराने text को delete करके नया text insert किया जाता है।
- <span> ― Span tag किसी Document में एक Section को define करता है। Span element के use से किसी text का Color Change किया जाता है
- <font size=” ” color=” “> ― Font element किसी font का Size व Color specify करता है।
- <big><small> ― Big element Define करता है, big text को व Small element Define करता है, Small text को।
- <i> ― i element define करता है, italic text को। i tag का use technical term एक thought या किसी खास नाम इत्यादि को indicate करने के लिए किया जाता है।
- <pre> ― Pre element का use preformatted text को indicate करने के लिए किया जाता है। pre tag का use करने से text एक fixed-width font में displayed होता है।
- <address> ― Contact information define करने के लिए Address element का use किया जाता है। इस <address> element का use हम address detail show करने के लिए करते है।
- <sup> ― Superscript text define करने के लिए SUP element का use किया जाता है। Superscript text normal line के ऊपर half character में show होते है। इन्हें small font भी कहा जाता है। Superscript text का use footnotes लिखने के लिए किया जाता है।
- <sub> ― Subscript text define करने के लिए SUB Element का use किया जाता है। Subscript text एक Normal text को normal line के नीचे Half character में show करता है। Chemical formulas जैसे- H20 लिखने के लिए इस element का use किया जाता है।
- <cite> ― Citation को specifies करने के लिए लिए CITE Element का use किया जाता है। इसे एक Work के title को define करने के लिए भी use किया जाता है।
- <var> ― Variable Define करने के लिए VAR Element का use किया जाता है।
HTML Link Tags
- <a> ― Hyperlink Define करने के लिए a element का use होता है। इस elemet की help से one page को another page से link किया जाता है। a element का सबसे important attribute href है। href attribute किसी दसरे page के link को a tag में add करता है।
- <base> ― BASE Element किसी Document में All relative url के लिए Base Url/Target Specifies करता है। एक html document में maximum base url head element के अंदर होते है।
HTML List Tags
List Tags की help से किसी html document में list create की जाती है। नीचे दिए गए list tags का उपयोग करके आप unordered list , ordered list , defination list etc. बना सकते है।
- <ul> ― एक Unordered list create करने के लिए <ul> Element का use किया जाता है। इस element के साथ each line define करने के लिए <li> tag का use जरूर करे।
- <ol> ― <ol> element का use Ordered list define करने के लिए किया जाता है। each list item define करने के लिए <li> element का use करे।
- <dl> ― <dl> element का उपयोग Description list define करने के लिए किया जाता है। <dl> tag को <dt> और <dd> के संयोजन के साथ use किया जाता है। <dt> terms/names define करता है। <dd> term/name describe करता है।
HTML Image Tags
Html Document में Image insert करने के लिए Image tags का use किया जाता है। नीचे दिए गए tags का use करके आप Html document में image insert कर सकते है।
- <img> ― <img> tag एक html page में image define करता है। image element के src और alt दो required attributes है। image का source address set करने के लिए src attribute का use होता है।
- <map> ― <map> tag का use client-side image-map define करने के लिए किया जाता है। इसकी मदद से एक image को कई area में devide करके उनमे दूसरी image add कर दी जाती है। अब जैसे ही आप image के उस area पर click करते तो उसके साथ add हुई दूसरी image आपको show होने लगती है। <map> element का required name attribute <img> के usemap attribute से जुड़कर image और map के बीच संबंध बनाता है।
- <area> ― <map> element के कई <area> element है, जो image map में click करने योग्य clickable area को define करते है।
HTML Table Tags
Html document में table creat करने के लिए Table Tags का use किया जाता है। table tags के कई attributes होते है, जिनकी help से एक html table की width, border, frame, height, spacing between cells etc. Set की जाती है। नीचे दिए गए table tags के use से आप एक html table creat कर सकते है।
- <table> ― <table> tag एक html table define करता है। html table में एक table element और एक या उससे अधिक <tr>, <th>, and <td> element होते है।
- <tr> ― <tr> element एक html table में table row define करता है।
- <th> ― <th> element एक html table में table header define करता है।
- <td> ― <td> element एक html table में table cell define करता है।
Note – एक complex html table में <caption>, <col>, <colgroup>, <thead>, <tfoot>, और <tbody> element भी include हो सकते है।
HTML Frame Tags
एक से ज्यादा html document को एक ही Webpage पर display करने के लिए html में इन Frame tags का use किया जाता है। Web development languages जैसे – PHP, CSS आने के बाद html5 में इन Frame tags का use नही किया जाता है । पर एक बुनियादी चीज़ को समझने के लिए आपको इन्हें एक बार जरूर प्रयोग करना चाहिए।
- <frameset> ― <frameset> tag एक frameset define करता है। <frameset> element एक या अधिक <frame> element को रखती है। each <frame> element एक अलग Document रख सकता है । <frameset> element specify करता है कि कितने Columns or rows frameset में होगी, और उनमें से प्रत्येक percentage/pixels कितने space पर कब्जा करेंगे।
- <frame src=” “> ― <frame src=” “> tag एक frame को define करता है। frame element को frameset element के अंदर frame set करने के लिए place किया जाता है।
- <iframe> ― iframe document के अंदर एक inline frame बनाता है।
- <noframes> ― noframes tag non frame based rendering के लिए एक container को define करता है।
HTML Frame Tags
Users से information Collect करने के लिए Webpages में Form का use किया जाता है। इस Form को create करने के लिए हम इन Form tags का उपयोग करते है।
- <form> ― form tag का उपयोग users द्वारा input किये गए data को send करने के लिए किया जाता है। <form> element में input के लिए कई fields हो सकते है। जैसे – action page, input, textarea, button, select, option, optgroup, fieldset, label etc.
- <input> ― <input> tag एक input field define करता है। जब आप इस element के प्रकार विशेषता के लिए एक text specify करते है, तो एक text box बनाया जाता है।
- <textarea> ― <textarea> tag एक multi-line text area define करता है।
- <button> ― <button> tag की help से form में submit button, reset button or push button create किये जाते है।
- <select> ― <select> tag का उपयोग form में drop-down list create करने के लिए किया जाता है।
- <option> ― <option> tag select list में एक option define करता है।
- <optgroup> ― <optgroup> tag को drop-down list में related options को समूहित करने के लिए उपयोग किया जाता है। यदि आपके पास options की एक long list है, तो users के लिए related options के group को संभालना आसान है।
- <fieldset> ― <fieldset> tag का use एक form में related element को समूहित करने के लिए किया जाता है। <fieldset> related element के आस-पास एक box drows करता है।
- <label> ― <label> tag एक <input> element के लिए label define करता है।
HTML Frame Tags
Users से information Collect करने के लिए Webpages में Form का use किया जाता है। इस Form को create करने के लिए हम इन Form tags का उपयोग करते है।
- <form> ― form tag का उपयोग users द्वारा input किये गए data को send करने के लिए किया जाता है। <form> element में input के लिए कई fields हो सकते है। जैसे – action page, input, textarea, button, select, option, optgroup, fieldset, label etc.
- <input> ― <input> tag एक input field define करता है। जब आप इस element के प्रकार विशेषता के लिए एक text specify करते है, तो एक text box बनाया जाता है।
- <textarea> ― <textarea> tag एक multi-line text area define करता है।
- <button> ― <button> tag की help से form में submit button, reset button or push button create किये जाते है।
- <select> ― <select> tag का उपयोग form में drop-down list create करने के लिए किया जाता है।
- <option> ― <option> tag select list में एक option define करता है।
- <optgroup> ― <optgroup> tag को drop-down list में related options को समूहित करने के लिए उपयोग किया जाता है। यदि आपके पास options की एक long list है, तो users के लिए related options के group को संभालना आसान है।
- <fieldset> ― <fieldset> tag का use एक form में related element को समूहित करने के लिए किया जाता है। <fieldset> related element के आस-पास एक box drows करता है।
- <label> ― <label> tag एक <input> element के लिए label define करता है।
HTML Embed Tags
Embed tag एक बाहरी application or interactive contact ( a plug-in) के लिए एक Container define करता है।
- <object> ― <object> tag एक embedded object को define करता है। इस element का use document में विभिन्न प्रकार की वस्तुओ को embed करने के लिए किया जाता है।
- <param> ― <param> tag का उपयोग object की initial values specify करने के लिए किया जाता है। यह element object or applet element के साथ उपयोग किया जाता है।
