HTML tags क्या होता है?
HTML tag अन्य text से पूरा अलग होता है जिसके मदद से html code लिखा जाता है. HTML tags keywords होता है जिसे हम बंद brackets के अन्दर रखते हैं जैसे <html>. tags के मदद से हम website को नए नए रूप दे सकते हैं, उसमे images, tables, colors आदि का इस्तेमाल कर webpage बना सकते हैं। अलग-अलग tags अलग-अलग कार्य करते हैं. जब html पेज browser के जरिये देखते हैं तो उसमे ये सभी tags दिखाई नहीं पड़ते सिर्फ उनके प्रभाव ही नज़र आते हैं. HTML में हजारों tags होते हैं जिनका इस्तेमाल website बनाने के लिए किया जाता हैं।
HTML में coding लिखना शुरू करने से पहले comment लिखा जाता है हलाकि यह अनिवार्य नहीं होता है पर इससे author को पता चलता है की वो html page किस उद्देश्य के लिए बनाया गया है। यदि html document के लिए comment लिखना चाहते हैं तो HTML में comment <!”….”> इसके अन्दर लिखा जाता है, ये comment आपको web browser में दिखाई नहीं देगा।
Comment लिखने के बाद जो सबसे जरुरी tag होता है वो है header tag जिससे हमे html document की जानकारी मिलती है. comment tag को छोड़ कर बाकि जितने भी html tags होते हैं सभी का start tag और end tag होता है. जैसे <head>…………………</head> यदि start tag को लिखने के बाद उसका end tag नहीं लिखेंगे तो उस tag का प्रभाव web browser में नहीं दिखेगा, इसलिए end tag लिखना अनिवार्य है. HTML tags का keyword case-insensitive है इसका मतलब है की आप tag का नाम बड़े अक्षर(capital letter) या छोटे अक्षर (small letter) दोनों में लिख सकते हैं। header tag के अन्दर title tag लिखा जाता है जो हमारे html पेज के title को दर्शाता है जैसे, <title>This is my first web page</title> जब हम अपने html page को browser में देखेंगे तो हमें यही text, browser के सबसे ऊपर title bar में बाये तरफ दिखाई देगा। title tag के बाद body tag लिखा जाता है. इस tag के अन्दर webpage को आकर्षक बनाने के लिए जितने भी tags होते हैं उनका प्रयोग किया जा सकता है.
- HTML tags कीवर्ड होते हैं जो यह बताते है कि ब्राउज़र के द्वारा वेबसाइट में मौजूद data को किस प्रकार दिखाया जायेगा।
- ज्यादातर सभी HTML tags के तीन मुख्य part (भाग) होते हैं:- पहला opening tag, दूसरा content, और तीसरा closing tag. लेकिन कुछ ऐसे tags भी होते हैं जिनका closing tag नहीं होता है।
- जब भी हम html मे कोडिंग करते है तो हमे tags बनाने पड़ते है क्योकि इसमे हम बिना tags के कोई भी काम नही कर सकते है html tags को html element भी कहा जाता है। अगर आप html tags को समझ जाते है तो आप html आसानी से सिख सकते है।
- सभी HTML tags को < > इन brackets के अंदर होना चाहिए.
- यदि आपने एक opening tag < > का इस्तेमाल किया है, तो आपको एक closing tag </> का इस्तेमाल अवश्य करना चाहिए| (कुछ टैग को छोड़कर)
- HTML में प्रत्येक tag का अपना अलग काम होता है।
- यूजर अपनी जरूरतों के हिसाब से जितने चाहे उतने HTML tags का उपयोग कर सकता है।
- एक HTML पेज कोHTML Tags की मदद से ही create और Define किया जाता है. एक HTML File को HTML Tags से ही create किया जाता है।
HTML टैग का नाम Description (विवरण)
- <!– –> इस tag का इस्तेमाल HTML में comment को लिखने के लिए किया जाता है।
- <!DOCTYPE> इस टैग का इस्तेमाल HTML के version के बारें में जानकारी देने के लिए किया जाता है।
- <a> इस टैग को anchor tag भी कहा जाता है इसका प्रयोग link बनाने के लिए किया जाता है।
- <abbr> इसका इस्तेमाल लम्बे sentence (वाक्य) को short में लिखने के लिए किया जाता है.
- <address> इसका प्रयोग author के address की जानकारी देने के लिए किया जाता है.
- <area> इसका प्रयोग image map के area (क्षेत्र) को डिफाइन करने के लिए किया जाता है.
- <article> इसका इस्तेमाल आर्टिकल को प्रस्तुत करने के लिए किया जाता है.
- <aside> यह वेब पेज के मुख्य content के बारें में जानकारी प्रदान करता है.
- <audio> इसका इस्तेमाल HTML पेज में sound (आवाज़) डालने के लिए किया जाता है.
- <b> इसका इस्तेमाल text को bold करने के लिए किया जाता है.
- <base> यह टैग सभी relative URL के लिए base URL को specify करता है.
- <bdi> bdi का पूरा नाम bi-directional isolation होता है. इस टैग का प्रयोग text के एक भाग को isolate (अलग) करने के लिए किया जाता है.
- <bdo> bdo का पूरा नाम Bi-Directional Override है. इसका प्रयोग text की direction (दिशा) को बदलने के लिए किया जाता है.
- <blockquote> इसका प्रयोग text को quote करने के लिए किया जाता है.
- <body> इसका प्रयोग HTML पेज की body को डिफाइन करने के लिए किया जाता है.
- <br> इसका इस्तेमाल line को break करने के लिए किया जाता है.
- <button> इसका प्रयोग button बनाने के लिए किया जाता है.
- <canvas> इसका इस्तेमाल ग्राफ़िक्स बनाने के लिए किया जाता है.
- <caption> इसका इस्तेमाल table के caption को डिफाइन करने के लिए किया जाता है.
- <cite> इसका इस्तेमाल वेबसाइट, किताब या किसी अन्य चीज के title को डिफाइन करने के लिए किया जाता है.
- <code> इसका इस्तेमाल HTML पेज में प्रोग्रामिंग भाषा के code को लिखने के लिए किया जाता है.
- <col> इसका इस्तेमाल table के column की properties को डिफाइन करने के लिए किया जाता है.
- <colgroup> इसका इस्तेमाल table में column के समूह को डिफाइन करने के लिए किया जाता है.
- <data> इसका इस्तेमाल content में machine-readable translation जोड़ने के लिए किया जाता है.
- <datalist> यह HTML form में auto complete की सुविधा प्रदान करता है.
- <dd> इसका इस्तेमाल किसी item को describe करने के लिए किया जाता है.
- <del> यह उस text के बारें में जानकारी प्रदान करता है जिसे HTML पेज से delete कर दिया गया हो.
- <details> इसका प्रयोग अतिरिक्त details के लिए किया जाता है. इस detail को यूजर छुपा भी सकता है और देख भी सकता है.
- <dfn> इसका इस्तेमाल किसी विशेष term को specify करने के लिए किया जाता है.
- <dialog> इसका इस्तेमाल डायलॉग बॉक्स बनाने के लिए किया जाता है.
- <div> इसका इस्तेमाल HTML पेज में division या section बनाने के लिए किया जाता है.
- <dl> इसका प्रयोग description list को डिफाइन करने के लिए किया जाता है.
- <dt> इसका इस्तेमाल description list में एक term को define करने के लिए किया जाता है.
- <em> इसका प्रयोग emphasized text को डिफाइन करने के लिए किया जाता है.
- <embed> इसका इस्तेमाल बाहरी content जैसे कि- फोटो, या विडियो को जोड़ने के लिए किया जाता है.
- <fieldset> इसका प्रयोग form में एक जैसे elements को समूह में रखने के लिए किया जाता है.
- <figcaption> इसका इस्तेमाल किसी image को caption प्रदान करने के लिए किया जाता है.
- <figure> इसका प्रयोग self-contained content डालने के लिए किया जाता है. जैसे कि – फोटो, डायग्राम आदि.
- <footer> इसका इस्तेमाल HTML पेज में footer बनाने के लिए किया जाता है.
- <form> इसका प्रयोग HTML form बनाने के लिए किया जाता है.
- <h1> to <h6> इसका प्रयोग heading बनाने के लिए किया जाता है. इसमें <h1> सबसे महत्वपूर्ण हैडिंग होती है और <h6> सबसे कम.
- <head> यह HTML पेज के head के बारें में बताता है.
- <header> इसका प्रयोग header बनाने के लिए किया जाता है.
- <hr> इसका प्रयोग horizontal rule के लिए किया जाता है.
- <html> इसका इस्तेमाल HTML के root को डिफाइन करने के लिए किया जाता है.
- <i> इसका इस्तेमाल text को italic बनाने के लिए किया जाता है.
- <iframe> इसका प्रयोग फ्रेम बनाने के लिए किया जाता है.
- <img> इसका प्रयोग HTML पेज में image को डालने के लिए किया जाता है.
- <input> यह HTML form के input को डिफाइन करता है.
- <ins> इसका इस्तेमाल insert किये गये text को डिफाइन करने के लिए किया जाता है.
- <kbd> इसका प्रयोग keyboard input को डिफाइन करने के लिए किया जाता है.
- <label> यह form में input के text लेबल को डिफाइन करता है.
- <legend> यह <fieldset>के content के caption को डिफाइन करता है.
- <li> यह list में मौजूद items को प्रस्तुत करता है.
- <link> इसका इस्तेमाल बाहरी डॉक्यूमेंट को लिंक करने के लिए किया जाता है.
- <main> इसका इस्तेमाल HTML पेज के मुख्य content को प्रस्तुत करने के लिए किया जाता है.
- <map> इसका इस्तेमाल image map को डिफाइन करने के लिए किया जाता है.
- <mark> यह highlight किये गये text को प्रस्तुत करता है.
- <menu> इसका प्रयोग menu बनाने के लिए किया जाता है.
- <meta> यह HTML पेज के metadata को डिफाइन करता है.
- <meter> इसका प्रयोग data को मापने के लिए किया जाता है.
- <nav> यह नेविगेशन लिंक को प्रस्तुत करता है.
- <noscript> HTML में <noscript> टैग का उपयोग उन ब्राउज़र के text को प्रदर्शित करने के लिए किया जाता है जो <script> tag को सपोर्ट नहीं करते हैं.
- <object> इसका प्रयोग HTML फाइल में ऑब्जेक्ट को जोड़ने के लिए किया जाता है.
- <ol> यह items के ordered list को डिफाइन करता है.
- <optgroup> इस टैग का उपयोग ड्रॉप-डाउन लिस्ट में संबंधित options को एक group में रखने के लिए किया जाता है.
- <option> इसका उपयोग ड्रॉप-डाउनलिस्ट में options को डिफाइन करने के लिए किया जाता है।
- <output> इसका प्रयोग कैलकुलेशन के परिणाम को दिखाने के लिए किया जाता है.
- <p> It represents a paragraph in an HTML document.
- <param> यह <object> element के पैरामीटर को डिफाइन करता है.
- <picture> यह image resources को specify करता है.
- <pre> इसका प्रयोग preformatted text डिफाइन करने के लिए किया जाता है.
- <progress> यह काम के progress के बारें में जानकारी प्रदान करता है.
- <q> इसका इस्तेमाल छोटे quote के लिए किया जाता है.
- <ruby> इसका प्रयोग ruby annotations को प्रस्तुत करने के लिए किया जाता है.
- <s> यह उस text को प्रस्तुत करता है जो अब सही और उचित नहीं है.
- <samp> इसका प्रयोग sample output को प्रस्तुत करने के लिए किया जाता है.
- <script> इसका इस्तेमाल HTML पेज में जावास्क्रिप्ट को declare करने के लिए किया जाता है.
- <section> इसका प्रयोग section को डिफाइन करने के लिए किया जाता है.
- <select> इसका प्रयोग drop down लिस्ट बनाने के लिए किया जाता है.
- <small> इसका इस्तेमाल text के font को एक size छोटा करने के लिए किया जाता है.
- <source>> इसका इस्तेमाल ऑडियो, विडियो और इमेज को attach करने के लिए किया जाता है.
- <span> इसका इस्तेमाल एकसमान content को एक समूह में रखने के लिए किया जाता है.
- <strong> इसका इस्तेमाल important text को डिफाइन करने के लिए किया जाता है.
- <style> इसका इस्तेमाल CSS को डिफाइन करने के लिए किया जाता है.
- <sub> इसका इस्तेमाल subscript को डिफाइन करने के लिए किया जाता है.
- <summary> इसका प्रयोग <details> tag के साथ summary को डिफाइन करने के लिए किया जाता है.
- <sup> इसका इस्तेमाल superscript को डिफाइन करने के लिए किया जाता है.
- <svg> इसका प्रयोग SVG (Scalable Vector Graphics) के लिए किया जाता है.
- <table> इसका प्रयोग html पेज में टेबल बनाने के लिए किया जाता है.
- <tbody> HTML टेबल में बॉडी कंटेंट को ग्रुप करने के लिए इस टैग का इस्तेमाल किया जाता है।
- <td> इसका प्रयोग table data को specify करने के लिए किया जाता है.
- <template> इसका इस्तेमाल करके हम HTML element के group को create कर सकते हैं.
- <textarea> इसका इस्तेमाल form में text area को डिफाइन करने के लिए किया जाता है.
- <tfoot> यह HTML table के footer को डिफाइन करता है.
- <th> यह HTML table के header cell को set करता है.
- <thead> यह HTML table के हैडर को डिफाइन करता है.
- <time> यह html पेज में date और time दिखाता है.
- <title> इसका प्रयोग html पेज के title को डिफाइन करने के लिए किया जाता है. लेकिन यह टाइटल पेज में show नही होता है।
- <tr> यह html table की row को डिफाइन करता है.
- <track> इसका प्रयोग audio और video के subtitle दिखाने के लिए किया जाता है.
- <u> इसका इस्तेमाल text में underline करने के लिए किया जाता है.
- <ul> यह unorderd list को प्रदर्शित करता है.
- <var> यह गणित में प्रयोग होने वाले variable को डिफाइन करता है.
- <video> इसका इस्तेमाल html पेज में विडियो जोड़ने के लिए किया जाता है.
- <wbr> wbr का पूरा नाम Word Break Opportunity है. यह टैग specify करता है कि ब्राउज़र किसी शब्द (word) को कहां break कर सकता है
HTML Form :
Website HTML Document यानि webpage का संकलन है. और एक HTML डॉक्यूमेंट अनेक HTML element से मिलकर बना होता है. इसमें Headings, Papergraph, Lists, Image आदि शामिल होते है. इनके अलावा भी कई अन्य महत्वपूर्ण HTML elements होते हैं. जिनमे एक HTML Form element भी शामिल है.
HTML Form का परिचय:
Users से जानकारी लेने के लिए HTML Forms का इस्तेमाल किया जाता है. इस जानकारी में फीडबैक निजी जानकारी सन्देश सिकायत या अन्य कुछ सुझाव आदि हो सकते है. आपको website में html form कई रूप में मिल जायेंगे आप इन्हें signup Forms login Forms payment detail Form, survey Forms आदि के रूप में देख सकते हैं.
Forms में यूजर के द्वारा जरुरी जानकारी को भरा जाता है और इस जानकारी को server पर भेजा जाता है जहा से इसे webmasters access कर पते हैं.
सभी Forms elements की जानकारी HTML Forms को form element के द्वारा define किया जाता है. form एक container tag की तरह काम करता है. जिसके अन्दर अन्य form element को define करके Forms को बनाया जाता है. form element के अलावा भी कई अन्य important form element होते हैं. जो निम्न हैं:
- Input
- Select
- Text Area
Input : Input element html form का दूसरा required element है इनपुट element के द्वारा form में विभिन्न प्रकार के डाटा fields को define किया जाता है जिनका निर्धारण Type attribute करता है.
Select : Select element से form में एक dropdown list को define किया जाता है इससे अधिक जानकारी एक field में समाहित हो जाती है.
Text Area : वैसे तो input elements द्वारा text field define किया जाता है लेकिन multiline data field को text area element के द्वारा ही define किया जा सकता है क्यूंकि input element से सिर्फ singleline data field ही बनाये जा सकते हैं.
Form Elements के प्रमुख attributes:
Form tag के साथ आप Global attributes और Event attributes को define कर सकते हैं क्यूंकि Form tag Global और Event Attributes को सपोर्ट करता है. इन दोनों के अलावा कुछ attributes को सिर्फ Form tag में ही define किया जा सकता है जो element-specific attributes कहलाते है जो निम्न हैं:
- Action
- Method
- Target
Action : यूजर के द्वारा form submit करने के बाद जो कार्य आप server से कराना चाहते हैं Action Attributes के द्वारा define किया जाता है.
Method : आप form data को जिस method से भी submit कराना चाहते हैं उसे method attribute से define किया जाता है यदि आपका data में संवेदनशील या निजी जानकारी सामिल है तो आपको Post Method को define कराना चाहिए नहीं तो आप get method का उसे कर सकते हैं.
Target : आप result page को जिस window में open करना चाहते हैं तो उसे Target attribute के द्वारा define किया जाता है.
एक HTML Form बनाना : Html Form बनाने से पहले हमें Form syntax की जानकारी होनी चाहिए. ताकि हम सही तरीके से HTML Form बना सके.
HTML Form का syntax : <form>
Form Element
</form>
HTML Form define करना:
अब हम एक HTML Form बनायेंगे यह एक साधारण HTML Form है जिसे सिर्फ समझने के लिए बनाया गया है. निचे दिए गए HTML code को किसी Text Editor जैसे Notepad में लिखेंगे या फिर इसे Copy करके Paste कर देंगे और इसे Form.html के नाम से save कर देंगे.
अब आप उपर दिए गए HTML Code को Save करके browser में open करेंगे तो हमारे सामने कुछ इस प्रकार परिणाम आएगा-
Speak Your Mind