इस लेख में हम जानेंगे के 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 यह दो अलग शब्द है, जिनकी परिभाषा कुछ इस प्रकार है।
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 क्या है
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 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
Tag, अन्य HTML Elements (Body, Heading और Paragraph), और Closing
Tag से एक Body Element का निर्माण होता है.
Tag से एक Heading Element का निर्माण होता है.
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 किया जाता है. जैसे; ऊपर की फोटो में
एक Closing Heading Tag है. एक Opening 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 करने के लिए कैसे कर सकते है।
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 element का Root element होता है। यह browser को बताता है, कि Run की गई file html document में है।
- ― यह tag बाकी head element’s का Container element होता है। head element में Document की important information enclosed रहती है। title, style, base, link, meta, script, noscript जैसे element’s इसी टैग के भीतर लिखे जाते है।
- ― यह टैग Document की Body को परिभाषित करता है। किसी web page में show होने वाला Content area इसी head element की मदद से Creat किया जाता है। body element में Document का सारा Content जैसे – text, hyperlink, images, tables, lists etc. को शामिल किया जाता है
</strong> ― यह टैग Document के title को define करता है। हर html document के लिये title tag required होता है। title tag को head element के भीतर लिखा जाता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><meta></strong> ― <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 किये जाते है।</font></li> </ol> <div> <p> <font data-blogger-escaped-style="font-family: sans-serif;" face="sans-serif"><font data-blogger-escaped-style="font-size: 16px;" style="font-size: 16px;"><br /> </font></font></p> </div> <div data-blogger-escaped-style="font-family: sans-serif;" style="font-family: sans-serif;"> <div data-blogger-escaped-style="text-align: center;" style="text-align: center;"> <p> <font color="#800080" data-blogger-escaped-style="color: purple;"><strong><font data-blogger-escaped-style="font-size: 15pt;" style="font-size: 15pt;">HTML Text Tags</font></strong></font></p> <p> <font color="#800080" data-blogger-escaped-style="color: purple;"><strong><font data-blogger-escaped-style="font-size: 15pt;" style="font-size: 15pt;"><br /> </font></strong></font></p> </div> <p> <font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;">All html tags जो Web page के Content Area को Design करते है, उन्हें Text Tags कहा जाता है। नीचे दिए गए text tags का उपयोग करके आप html Document में text को अपने हिसाब से Control कर सकते है।</font></p> <ol> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><heading></strong> ― यह टैग 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 करते है</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><p> </strong> ― यह टैग Document के paragraph define करता है। एक html document में कई paragraph element use किये जा सकते है। document में इस element को लिखने पर प्रत्येक <p> element के पहले व उसके बाद में browser automatically कुछ स्थान जोड़ते है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><br /> </strong> ― यह टैग Single line break element को define करता है। document में paragraph line को अलग करने के लिये line break element का use किया जाता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><strong></strong> — Strong tag एक phrase tag है। important text को Define करने के लिये इस element का use किया जाता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><div> </strong> ― Division element document में एक Section को define करता है। Style container के रूप में भी इस element को use किया जाता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><b></strong> ― यह टैग Bold text को define करता है। इसके इस्तेमाल से Document में किसी Important text को Bold ( गहरा ) किया जा सकता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><!– –></strong> ― यह Comment tag है।Source code में Comment add करने के लिये Comment element use किया जाता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><code></strong> ― Code element एक phrase tag है। यह Computer code text को define करता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><samp></strong> ― Sample element एक phrase tag है। यह एक Computer program से sample output को define करता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><q></strong> ― q element एक Short quotation को define करता है। Browser normally quotation के चारो ओर quotation marks डालते है</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><blockquote> </strong> ― blockquote element किसी अन्य source से quoted एक section को specified करता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><del></strong> ― delete element किसी document में से हटाए गए पाठ (deleted text) को define करता है। इस टैग की help से document के किसी भी text को delete किया जा सकता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><ins></strong> ― inserted element किसी document में सम्मिलित पाठ (inserted text) को define करता है । इस टैग की मदद से पुराने text को delete करके नया text insert किया जाता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><span></strong> ― Span tag किसी Document में एक Section को define करता है। Span element के use से किसी text का Color Change किया जाता है</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><font size=” ” color=” “></strong> ― Font element किसी font का Size व Color specify करता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><big><small></strong> ― Big element Define करता है, big text को व Small element Define करता है, Small text को।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><i></strong> ― i element define करता है, italic text को। i tag का use technical term एक thought या किसी खास नाम इत्यादि को indicate करने के लिए किया जाता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><pre></strong> ― Pre element का use preformatted text को indicate करने के लिए किया जाता है। pre tag का use करने से text एक fixed-width font में displayed होता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><address> </strong> ― Contact information define करने के लिए Address element का use किया जाता है। इस <address> element का use हम address detail show करने के लिए करते है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><sup></strong> ― Superscript text define करने के लिए SUP element का use किया जाता है। Superscript text normal line के ऊपर half character में show होते है। इन्हें small font भी कहा जाता है। Superscript text का use footnotes लिखने के लिए किया जाता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><sub></strong> ― Subscript text define करने के लिए SUB Element का use किया जाता है। Subscript text एक Normal text को normal line के नीचे Half character में show करता है। Chemical formulas जैसे- H20 लिखने के लिए इस element का use किया जाता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><cite></strong> ― Citation को specifies करने के लिए लिए CITE Element का use किया जाता है। इसे एक Work के title को define करने के लिए भी use किया जाता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><var></strong> ― Variable Define करने के लिए VAR Element का use किया जाता है।</font></li> </ol> <div> <p> <font data-blogger-escaped-style="font-size: 16px;" style="font-size: 16px;"> </font></p> </div> <div> <div data-blogger-escaped-style="text-align: center;" style="text-align: center;"> <p> <font color="#800080" data-blogger-escaped-style="color: purple;"><strong><font data-blogger-escaped-style="font-size: 15pt;" style="font-size: 15pt;">HTML Link Tags</font></strong></font></p> <p> <font color="#800080" data-blogger-escaped-style="color: purple;"><strong><font data-blogger-escaped-style="font-size: 15pt;" style="font-size: 15pt;"> </font></strong></font></p> </div> <ol> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><a></strong> ― Hyperlink Define करने के लिए a element का use होता है। इस elemet की help से one page को another page से link किया जाता है। a element का सबसे important attribute href है। href attribute किसी दसरे page के link को a tag में add करता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><base></strong> ― BASE Element किसी Document में All relative url के लिए Base Url/Target Specifies करता है। एक html document में maximum base url head element के अंदर होते है।</font></li> </ol> <div> <p> <font data-blogger-escaped-style="font-size: 16px;" style="font-size: 16px;"> </font></p> </div> <div> <div data-blogger-escaped-style="text-align: center;" style="text-align: center;"> <p> <font color="#800080" data-blogger-escaped-style="color: purple;"><strong><font data-blogger-escaped-style="font-size: 15pt;" style="font-size: 15pt;">HTML Image Tags</font></strong></font></p> <p> <font color="#800080" data-blogger-escaped-style="color: purple;"><strong><font data-blogger-escaped-style="font-size: 15pt;" style="font-size: 15pt;"> </font></strong></font></p> </div> <p> <font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;">Html Document में Image insert करने के लिए Image tags का use किया जाता है। नीचे दिए गए tags का use करके आप Html document में image insert कर सकते है।</font></p> <ol> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><img></strong> ― <img> tag एक html page में image define करता है। image element के src और alt दो required attributes है। image का source address set करने के लिए src attribute का use होता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><map></strong> ― <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 के बीच संबंध बनाता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><area></strong> ― <map> element के कई <area> element है, जो image map में click करने योग्य clickable area को define करते है।</font></li> </ol> <div> <p> <font data-blogger-escaped-style="font-size: 16px;" style="font-size: 16px;"> </font></p> </div> <div> <div data-blogger-escaped-style="text-align: center;" style="text-align: center;"> <p> <font color="#800080" data-blogger-escaped-style="color: purple;"><strong><font data-blogger-escaped-style="font-size: 15pt;" style="font-size: 15pt;">HTML Table Tags</font></strong></font></p> <p> <font color="#800080" data-blogger-escaped-style="color: purple;"><strong><font data-blogger-escaped-style="font-size: 15pt;" style="font-size: 15pt;"> </font></strong></font></p> </div> <p> <font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;">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 कर सकते है।</font></p> <ol> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><table></strong> ― <table>tag एक html table define करता है। html table में एक table element और एक या उससे अधिक <tr>, <th>, and <td> element होते है।</font></li> <br /> <br /> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><br /> <tr></strong> ―<br /> <tr> element एक html table में table row define करता है।</font></li> <br /> <br /> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><th></strong> ― <th> element एक html table में table header define करता है।</font></li> <br /> <br /> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><td></strong> ― <td> element एक html table में table cell define करता है।</font></li> <br /> <br /> </ol> <p> <font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><font color="#008000" data-blogger-escaped-style="color: green;"><strong>Note –</strong></font> एक complex html table में <caption>, <col>, <colgroup>, <thead>, <tfoot>, और <tbody> element भी include हो सकते है।</font></p> <p> <font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><br /> </font> </p> <div data-blogger-escaped-style="text-align: center;" style="text-align: center;"> <p> <font color="#800080" data-blogger-escaped-style="color: purple;"><strong><font data-blogger-escaped-style="font-size: 15pt;" style="font-size: 15pt;">HTML Frame Tags</font></strong></font></p> <p> <font color="#800080" data-blogger-escaped-style="color: purple;"><strong><font data-blogger-escaped-style="font-size: 15pt;" style="font-size: 15pt;"><br /> </font></strong></font></p> </div> <p> <font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;">एक से ज्यादा html document को एक ही Webpage पर display करने के लिए html में इन Frame tags का use किया जाता है। Web development languages जैसे – PHP, CSS आने के बाद html5 में इन Frame tags का use नही किया जाता है । पर एक बुनियादी चीज़ को समझने के लिए आपको इन्हें एक बार जरूर प्रयोग करना चाहिए।</font></p> <ol> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><frameset></strong> ― <frameset> tag एक frameset define करता है। <frameset> element एक या अधिक <frame> element को रखती है। each <frame> element एक अलग Document रख सकता है । <frameset> element specify करता है कि कितने Columns or rows frameset में होगी, और उनमें से प्रत्येक percentage/pixels कितने space पर कब्जा करेंगे।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><frame src=” “></strong> ― <frame src=” “> tag एक frame को define करता है। frame element को frameset element के अंदर frame set करने के लिए place किया जाता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><iframe></strong> ― iframe document के अंदर एक inline frame बनाता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><noframes></strong> ― noframes tag non frame based rendering के लिए एक container को define करता है।</font></li> </ol> <div> <p> <font data-blogger-escaped-style="font-size: 16px;" style="font-size: 16px;"><br /> </font></p> </div> <div> <div data-blogger-escaped-style="text-align: center;" style="text-align: center;"> <p> <font color="#800080" data-blogger-escaped-style="color: purple;"><strong><font data-blogger-escaped-style="font-size: 15pt;" style="font-size: 15pt;">HTML Form Tags</font></strong></font></p> <p> <font color="#800080" data-blogger-escaped-style="color: purple;"><strong><font data-blogger-escaped-style="font-size: 15pt;" style="font-size: 15pt;"><br /> </font></strong></font></p> </div> <p> <font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;">Users से information Collect करने के लिए Webpages में Form का use किया जाता है। इस Form को create करने के लिए हम इन Form tags का उपयोग करते है।</font></p> <ol> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><form> </strong> ― form tag का उपयोग users द्वारा input किये गए data को send करने के लिए किया जाता है। <form> element में input के लिए कई fields हो सकते है। जैसे – action page, input, textarea, button, select, option, optgroup, fieldset, label etc.</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><input></strong> ― <input> tag एक input field define करता है। जब आप इस element के प्रकार विशेषता के लिए एक text specify करते है, तो एक text box बनाया जाता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><textarea></strong> ― <textarea> tag एक multi-line text area define करता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><button></strong> ― <button> tag की help से form में submit button, reset button or push button create किये जाते है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><select></strong> ― <select> tag का उपयोग form में drop-down list create करने के लिए किया जाता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><option></strong> ― <option> tag select list में एक option define करता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><optgroup></strong> ― <optgroup> tag को drop-down list में related options को समूहित करने के लिए उपयोग किया जाता है। यदि आपके पास options की एक long list है, तो users के लिए related options के group को संभालना आसान है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><fieldset> </strong> ― <fieldset> tag का use एक form में related element को समूहित करने के लिए किया जाता है। <fieldset> related element के आस-पास एक box drows करता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><label></strong> ― <label> tag एक <input> element के लिए label define करता है।</font></li> </ol> <div> <p> <font data-blogger-escaped-style="font-size: 16px;" style="font-size: 16px;"><br /> </font></p> </div> <div> <div data-blogger-escaped-style="text-align: center;" style="text-align: center;"> <p> <font color="#800080" data-blogger-escaped-style="color: purple;"><strong><font data-blogger-escaped-style="font-size: 15pt;" style="font-size: 15pt;">HTML Embed Tags</font></strong></font></p> <p> <font color="#800080" data-blogger-escaped-style="color: purple;"><strong><font data-blogger-escaped-style="font-size: 15pt;" style="font-size: 15pt;"><br /> </font></strong></font></p> </div> <p> <font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;">Embed tag एक बाहरी application or interactive contact ( a plug-in) के लिए एक Container define करता है।</font></p> <ol> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><object</strong>> ― <object> tag एक embedded object को define करता है। इस element का use document में विभिन्न प्रकार की वस्तुओ को embed करने के लिए किया जाता है।</font></li> <li><font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong><param></strong> ― <param>tag का उपयोग object की initial values specify करने के लिए किया जाता है। यह element object or applet element के साथ उपयोग किया जाता है।</font></li> </ol> <div> <p> <font data-blogger-escaped-style="font-size: large;" size="5"> </font></p> </div> </div> </div> </div> </div> </div> </div> <div data-blogger-escaped-style="font-family: sans-serif;" style="font-family: sans-serif;"> <p> <font data-blogger-escaped-style="font-size: 16px;" style="font-size: 16px;"><b><font color="#800080" data-blogger-escaped-style="color: purple;">कुछ HTML Attribute List</font></b></font></p> </div> <div data-blogger-escaped-style="font-family: sans-serif;" style="font-family: sans-serif;"> <p> <font data-blogger-escaped-style="font-size: 16px;" style="font-size: 16px;"><b><font color="#800080" data-blogger-escaped-style="color: purple;"> </font></b></font></p> </div> <div> <div data-blogger-escaped-style="font-family: sans-serif; text-align: center;" style="font-family: sans-serif; text-align: center;"> <p> <font color="#800080" data-blogger-escaped-style="color: purple;"><strong><font data-blogger-escaped-style="font-size: 15pt;" style="font-size: 15pt;">1. src Attribute</font></strong></font></p> </div> <div data-blogger-escaped-style="font-family: sans-serif; text-align: center;" style="font-family: sans-serif; text-align: center;"> <p> <font color="#800080" data-blogger-escaped-style="color: purple;"><strong><font data-blogger-escaped-style="font-size: 15pt;" style="font-size: 15pt;"> </font></strong></font></p> </div> <div data-blogger-escaped-style="font-family: sans-serif;" style="font-family: sans-serif;"> <p> <font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;">Html में image insert करने के लिए <img> tag का use किया जाता है। src img tag का attribute है। image का <strong>source address set</strong> करने के लिए src attribute use किया जाता है।</font></p> </div> <div data-blogger-escaped-style="font-family: sans-serif;" style="font-family: sans-serif;"> <p> <font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;">HTML में img का source address set करने के दो तरीके है। अगर image आपके computer में same location पर save है। जहाँ आपने document file save की है, तो आप सिर्फ उसका नाम देकर image set कर सकते है। परन्तु अगर image computer पर different location में save है, तो फिर आपको उसका complete path देना होगा।</font></p> </div> <div data-blogger-escaped-style="font-family: sans-serif;" style="font-family: sans-serif;"> <p> <strong>Example-:</strong></p> </div> <div data-blogger-escaped-style="font-family: sans-serif;" style="font-family: sans-serif;"> <p> <strong> </strong></p> </div> <div class="crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate" data-blogger-escaped-data-settings=" minimize scroll-mouseover" id="crayon-5c64145e1a31c974173398"> <div class="crayon-plain-wrap"> <p> <font data-blogger-escaped-style="font-family: sans-serif;" face="sans-serif"><b><img src="set_img_path"> </img></b></font></p> </div> </div> <div data-blogger-escaped-style="font-family: sans-serif; text-align: center;" style="font-family: sans-serif; text-align: center;"> <p> </p> </div> <div data-blogger-escaped-style="font-family: sans-serif; text-align: center;" style="font-family: sans-serif; text-align: center;"> <p> <font color="#800080" data-blogger-escaped-style="color: purple;"><strong><font data-blogger-escaped-style="font-size: 15pt;" style="font-size: 15pt;">2.Width and height Attribute</font></strong></font></p> <p> <font color="#800080" data-blogger-escaped-style="color: purple;"><strong><font data-blogger-escaped-style="font-size: 15pt;" style="font-size: 15pt;"> </font></strong></font></p> </div> <div data-blogger-escaped-style="font-family: sans-serif;" dir="ltr" style="font-family: sans-serif;"> <p> <font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;">Html में image का आकार set करने के लिए size attribute का इस्तेमाल होता है।size attribute की help से image की height और width set की जाती है।</font></p> </div> <div data-blogger-escaped-style="font-family: sans-serif;" dir="ltr" style="font-family: sans-serif;"> <p> <font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong>Example-:</strong></font></p> <p> <font data-blogger-escaped-style="font-size: 12pt;" style="font-size: 12pt;"><strong> </strong></font></p> </div> <div class="crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate" data-blogger-escaped-data-settings=" minimize scroll-mouseover" id="crayon-5c64145e1a320481668606"> <div class="crayon-plain-wrap"> <p> <font data-blogger-escaped-style="font-family: sans-serif;" face="sans-serif"><b><! DOCTYPE html></b></font></p> <p> <font data-blogger-escaped-style="font-family: sans-serif;" face="sans-serif"><b> </b></font> <font data-blogger-escaped-style="font-family: sans-serif;" face="sans-serif"><b><html></b></font></p> <p> <font data-blogger-escaped-style="font-family: sans-serif;" face="sans-serif"><b><head></b></font></p> <p> <font data-blogger-escaped-style="font-family: sans-serif;" face="sans-serif"><b><title> example of height and width 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-:
5.lang Attribute
एक document की language को html tag में lang attribute की help से declared किया जाता है। Accessibility applications और serch engine के लिए html document की language set करना अनिवार्य है।
Example-:
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> title Attribute example
this is title attribute
Nice
ReplyDelete