सभी Html कोड्स व उनके उपयोग (All Html Tags) – Lesson 4

by

HTML को सीखने और उसकी मदद से बेहतरीन Web pages बनाने के लिये All HTML tags के इस्तेमाल के बारे में आपको जानकारी जरूर होनी चाहिए। इसी लिये हमारे Html tutorial के Lesson 4 में आपको Complete Html tags list के बारे में बताया गया है।

Html की मदद से Web pages बनाने में इन Html tags का कितना महत्व है। यह तो हम सभी जानते ही है। कुछ Basic Html tags के उपयोग से एक Simple web page तो बनाया जा सकता है, परन्तु एक बेहतरीन वेब पेज बनाने के लिये All Html tags व उनके उपयोग के बारे में जानकारी होना बहुत महत्वपूर्ण है।

पिछले lessons में हमने बताया था कि Html tags दो तरह के होते है:

1. Paired tags
2. Unpaired tags.

इस lesson में हम बारी – बारी से सभी tags व उनके इस्तेमाल के बारे में आपको बताएंगे। तो  All Html tags के इस लेसन को बड़े ध्यान से पड़े।  तो चलिये एक – एक करके all Html tags के नाम व उनके उपयोग के बारे में जान लेते है।

Complete List of All HTML Tags in Hindi

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> ― यह टैग Html element का Root element होता है। यह browser को बताता है, कि Run की गई file Html document में है।
  3. <head> ― यह tag बाकी head element’s का Container element होता है। head element में Document की important information enclosed रहती है। title, style, base, link, meta, script, NoScript जैसे element’s इसी टैग के भीतर लिखे जाते है।
  4. <Body> ― यह टैग Document की Body को परिभाषित करता है। किसी web page में show होने वाला Content area इसी head element की मदद से Creat किया जाता है। body element में Document का सारा Content जैसे – text, hyperlink, images, tables, lists, etc. को शामिल किया जाता है
  5. <title> ― यह टैग Document के title को define करता है। हर HTML document के लिये title tag required होता है। title tag को head element के भीतर लिखा जाता है।
  6. <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 metadata specify करने के लिए use किये जाते है।

Text Tags -:

All Html tags जो Web page के Content Area को Design करते है, उन्हें Text Tags कहा जाता है। नीचे दिए गए text tags का उपयोग करके आप Html Document में text को अपने हिसाब से Control कर सकते है।

  1. <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 करते है
  2. <p> ― यह टैग Document के paragraph define करता है। एक Html document में कई paragraph element use किये जा सकते है। document में इस element को लिखने पर प्रत्येक <p> element के पहले व उसके बाद में browser automatically कुछ स्थान जोड़ते है।
  3. <br> ― यह टैग Single line break element को define करता है। document में paragraph line को अलग करने के लिये line break element का use किया जाता है।
  4. <strong> — Strong tag एक phrase tag है। important text को Define करने के लिये इस element का use किया जाता है।
  5. <DIV> ― Division element document में एक Section को define करता है। Style container के रूप में भी इस element को use किया जाता है।
  6. <B> ― यह टैग Bold text को define करता है। इसके इस्तेमाल से Document में किसी Important text को Bold ( गहरा ) किया जा सकता है।
  7. <!– –> ― यह Comment tag है। Source code में Comment add करने के लिये Comment element use किया जाता है।
  8. <code> ― Code element एक phrase tag है। यह Computer code text को define करता है।
  9. <samp> ― Sample element एक phrase tag है। यह एक Computer program से sample output को define करता है।
  10. <q> ― q element एक Short quotation को define करता है। Browser normally quotation के चारो ओर quotation marks डालते है।
  11. <Blockquote> ― blockquote element किसी अन्य source से quoted एक section को specified करता है।
  12. <del> ― delete element किसी document में से हटाए गए पाठ (deleted text) को define करता है। इस टैग की help से document के किसी भी text को delete किया जा सकता है।
  13. <ins> ― inserted element किसी document में सम्मिलित पाठ (inserted text) को define करता है। इस टैग की मदद से पुराने text को delete करके नया text insert किया जाता है।
  14. <span> ― Span tag किसी Document में एक Section को define करता है। Span element के use से किसी text का Color Change किया जाता है।
  15. <font size=” ” color=” “> ― Font element किसी font का Size व Color specify करता है।
  16. <big><small> ― Big element Define करता है, big text को व Small element Define करता है, Small text को।
  17. <i> ― i element define करता है, italic text को। i tag का use technical term एक thought या किसी खास नाम इत्यादि को indicate करने के लिए किया जाता है।
  18. <pre> ― Pre element का use preformatted text को indicate करने के लिए किया जाता है। pre tag का use करने से text एक fixed-width font में displayed होता है।
  19. <address> ― Contact information define करने के लिए Address element का use किया जाता है। इस <address> element का use हम address detail show करने के लिए करते है।
  20. <sup> ― Superscript text define करने के लिए SUP element का use किया जाता है। Superscript text normal line के ऊपर half character में show होते है। इन्हें small font भी कहा जाता है। Superscript text का use footnotes लिखने के लिए किया जाता है।
  21. <sub> ― Subscript text define करने के लिए SUB Element का use किया जाता है। Subscript text एक Normal text को normal line के नीचे Half character में show करता है। Chemical formulas जैसे- H20 लिखने के लिए इस element का use किया जाता है।
  22. <cite> ― Citation को specifies करने के लिए लिए CITE Element का use किया जाता है। इसे एक work के title को define करने के लिए भी use किया जाता है।
  23. <var> ― Variable Define करने के लिए VAR Element का use किया जाता है।

Link Tags-:

  1. <a> ― Hyperlink Define करने के लिए a element का use होता है। इस element की help से one-page को another page से link किया जाता है। a element का सबसे important attribute href है। href attribute किसी दसरे page के link को a tag में add करता है।
  2. <base> ― BASE Element किसी Document में All relative Url के लिए Base Url/Target Specifies करता है। एक Html document में maximum base Url head element के अंदर होते है।

List Tags -:

List Tags की help से किसी Html document में list create की जाती है। नीचे दिए गए list tags का उपयोग करके आप unordered list, ordered list, definition list, etc. बना सकते है।

  1. <ul> ― एक Unordered list create करने के लिए <ul> Element का use किया जाता है। इस element के साथ each line define करने के लिए <li> tag का use जरूर करे।
  2. <ol> ― <ol> element का use Ordered list define करने के लिए किया जाता है। each list item define करने के लिए <li> element का use करे।
  3. <dl> ― <dl> element का उपयोग Description list define करने के लिए किया जाता है। <dl> tag को <dt> और <dd> के संयोजन के साथ use किया जाता है। <dt> terms/names define करता है। <dd> term/name describe करता है।

Image Tags -:

Html Document में Image insert करने के लिए Image tags का use किया जाता है। नीचे दिए गए tags का use करके आप Html document में image insert कर सकते है।

  1. <img> ― <img> tag एक Html page में image define करता है। image element के src और alt दो required attributes है। image का source address set करने के लिए src attribute का use होता है।
  2. <map> ― <map> tag का use client-side image-map define करने के लिए किया जाता है। इसकी मदद से एक image को कई area में divide करके उनमे दूसरी image add कर दी जाती है। अब जैसे ही आप image के उस area पर click करते तो उसके साथ add हुई दूसरी image आपको show होने लगती है। <map> element का required name attribute <img> के उस map attribute से जुड़कर image और map के बीच संबंध बनाता है।
  3. <area> ― <map> element के कई <area> element है, जो image map में click करने योग्य clickable area को define करते है।

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 कर सकते है।

  1. <table> ― <table> tag एक Html table define करता है। Html table में एक table element और एक या उससे अधिक <tr>, <th>, and <td> element होते है।
  2. <tr> ― <tr> element एक Html table में table row define करता है।
  3. <th> ― <th> element एक Html table में table header define करता है।
  4. <td> ― <td> element एक Html table में table cell define करता है।

Note- एक complex Html table में <caption>, <col>, <colgroup>, <thead>, <tfoot>, और <tbody> element भी include हो सकते है।

Frame Tags -:

एक से ज्यादा Html document को एक ही Webpage पर display करने के लिए html में इन Frame tags का use किया जाता है। Web development languages जैसे – PHP, CSS आने के बाद html5 में इन Frame tags का use नही किया जाता है। पर एक बुनियादी चीज़ को समझने के लिए आपको इन्हें एक बार जरूर प्रयोग करना चाहिए।

  1. <frameset> ― <frameset> tag एक frameset define करता है। <frameset> element एक या अधिक <frame> element को रखती है। each <frame> element एक अलग Document रख सकता है। <frameset> element specify करता है कि कितने Columns or rows frameset में होगी, और उनमें से प्रत्येक percentage/pixels कितने space पर कब्जा करेंगे।
  2. <frame src=” “> ― <frame src=” “> tag एक frame को define करता है। frame element को frameset element के अंदर frame set करने के लिए place किया जाता है।
  3. <iframe> ― iframe document के अंदर एक inline frame बनाता है।
  4. <noframes> ― noframes tag, non-frame-based rendering के लिए एक container को define करता है।

Form Tags -:

Users से information Collect करने के लिए Webpages में Form का use किया जाता है। इस Form को create करने के लिए हम इन Form tags का उपयोग करते है।

  1. <form> ― form tag का उपयोग users द्वारा input किये गए data को send करने के लिए किया जाता है। <form> element में input के लिए कई fields हो सकते है। जैसे – action page, input, textarea, button, select, option, optgroup, fieldset, label, etc.
  2. <input> ― <input> tag एक input field define करता है। जब आप इस element के प्रकार विशेषता के लिए एक text specify करते है, तो एक text box बनाया जाता है।
  3. <textarea> ― <textarea> tag एक multi-line text area define करता है।
  4. <button> ― <button> tag की help से form में submit button, reset button or push button create किये जाते है।
  5. <select> ― <select> tag का उपयोग form में drop-down list create करने के लिए किया जाता है।
  6. <option> ― <option> tag select list में एक option define करता है।
  7. <optgroup> ― <optgroup> tag को drop-down list में related options को समूहित करने के लिए उपयोग किया जाता है। यदि आपके पास options की एक long list है, तो users के लिए related options के group को संभालना आसान है।
  8. <fieldset> ― <fieldset> tag का use एक form में related element को समूहित करने के लिए किया जाता है। <fieldset> related element के आस-पास एक box draws करता है।
  9. <label> ― <label> tag एक <input> element के लिए label define करता है।

Embed Tags -:

Embed tag एक बाहरी application or interactive contact (a plug-in) के लिए एक Container define करता है।

  1. <object> ― <object> tag एक embedded object को define करता है। इस element का use document में विभिन्न प्रकार की वस्तुओ को embed करने के लिए किया जाता है।
  2. <param> ― <param> tag का उपयोग object की initial values specify करने के लिए किया जाता है। यह element object or applet element के साथ उपयोग किया जाता है।

इस पोस्ट में आपने जाना

Learn HTML in Hindi के इस lesson 4 में हमने जाना List of All HTML tags और उनके example. आगे आने वाले लेसन में हम और भी बारीकी से HTML language के उपयोगों के बारे में जानेंगे। अगर किसी tag के उप्पर आपको एक special post चाहिए तो नीचे comment कर जरूर बताएं हम उस पर अलग से एक complete post लिखेंगे।

इन्हे भी पढ़े-

12 thoughts on “सभी Html कोड्स व उनके उपयोग (All Html Tags) – Lesson 4”

  2. Hey Nirmal ji, apne is artickle me achhi knowledge provide ki hai. Me bhi achhi knowledge apne blog crazyworld007.com par deti hu. Ap mujhe ek backlink denge please

    Reply

  4. Great information.I can quickly refer to it and show others. Also, glad to know that we
    are doing some of this stuff on our own blog.

    Reply

Leave a Comment