What is HTML– एच.टी.एम.एल क्या है?
आज हम what is HTML in Hindi के बारे में जानेंगे. HTML क्या है? – बेसिकली यह अन्य computer languages की तरह है. जिसका इस्तेमाल से web page बनाये जाते है. और बहुत सारे वेबपेजस को मिलकर एक वेबसाइट बनती है.
आजके इंटरनेट के ज़माने में ऐसा कोई व्यक्ति नहीं होगा. जिसने कभी website ही नहीं देखि होगी. या फिर कभी यूज़ ही नहीं की होगी. जरासल हम जब किसी site को इस्तेमाल करते है. तो उसका interface हमें बहुत ही सरल लगता है. परंतु क्या आप जानते है. उसके पीछे उस व्यक्ति ने किस प्रकार की कोडिंग की है. साथ ही उसने कोंसे स्किल का इस्तेमाल किया है.
मित्रो अगर आप HTML सीखना चाहते है. अथवा website designing का कोर्स करना चाहते है. तो इस लेख को ज़रा ध्यान से पढ़ना. क्योंकि इस लेख में एच.टी.एम.एल क्या होता है? इसके बारे में विस्तृत जानकारी प्रदान की गयी है.
एच.टी.एम.एल क्या है? What is HTML in Hindi –
HTML का फुल फॉर्म Hyper Text Markup Language है. जिसका इस्तेमाल किसी भी web page और website को डिजाईन करने के लिये किया जाता है. जरसल बहोत सारे टैग्स को मिलाकरएच.टी.एम.एल बनाया गया है. जिसे सन 1991 में Tim Berners lee के द्वारा बनाया गया था.
HTML किसी भी beginners को समझने और सिखने के लिये बहुत आसान है. क्योंकि, बाकी C++, python, PHP और java जैसे programming languages में हमें programs लिखने पड़ते है. जो बहुत crtical होते है. परंतु जैसे की मैंने आपको बताया. की, HTML को tags का उपयोग करके बनाया गया है. Tags को angle bracket (<…>) में लिखा जाता है. कोई भी व्यक्ति साधारण 30 दिनों के अन्दर HTML को बड़े ही आसानी से सिख सकता है. और web designing में अपना करियर बना सकता है.
बहोत लोगो को ऐसा लगता है. की एच.टी.एम.एल एक प्रोग्रामिंग लैंग्वेज है. लेकिन वास्तव HTML programming language नहीं है. क्योंकि जिस कंप्यूटर कोडिंग भाषा में programs लिखे जाते है. उसे programming language कहते है. तो HTML एक structure markup language है.
आईये Hypertext markup language के प्रत्येक शब्द को समझते है.
Hypertext
दो web page को किसी particular text से जोड़ा जाता है. ताकि यूजर उस टेक्ट पर क्लिक करके दुसरे web page पर पहुंचे. इसे ही हाइपरटेक्स्ट कहते है.HTML language को सीखते समय इसे hyperlink अथवा anchor text के नाम से भी जाना जाता है. यह text तभी सक्रीय होता है. जब कोई यूजर उस text पर mouse से क्लिक करे.
हाइपरटेक्स्ट और कुछ नहीं. जो page में लिंक्स होते है. जिसपर क्लिक करने पर दूसरा पेज ओपन होता है.
एच.टी.एम.एल में hypertext के लिये <a> टैग का इस्तेमाल किया जाता है. यहाँ <a> का अर्थ anchor text ऐसा होता है. चलिए अब एक उदारण देखते है.
बेसिक स्ट्रक्चर:- <a href="url">link text</a>
रियल उदाहरन:- <a href="https://www.w3schools.com/"> w3 school website </a>
आउटपुट:- w3 school website
Markup
मैंने आपको पहले भी कहा, की html में ज्यादातर टैग्स का इस्तेमाल किया गया है. तो इस tag की मदत से web document के text को लेआउट और फोर्मटिंग करने को ही markup कहते है.
मानलो jankaribook.com पर एक web page है. और उसके अन्दर के जो text लिखा है. उसे हम formatting करना चाहते है. जैसे font को bold करना, italic(तिरछा) करना, underline करना. तो हम प्रत्येक कंडीशन के लिये text को tags के अन्दर लिखेंगे. उदाहरन के द्वारा समझते है.
<b> bold </b> ⇨ Bold
<i> italic </i> ⇨ Italic
<u> underline </u> ⇨ underline
☝यहापर आप देख सकते है. हमने टेक्ट को formating किया. तो उसे ही मार्कप कहते है.
Language
जैसे हम एक दुसरे से बात करने के लिये भाषा का इस्तेमाल करते है. ठीक उसी प्रकार web page create करने लिये एवं कंप्यूटर अथवा ब्राउज़र को समझने के लिये. HTML language को बनाया गया.
HTML में tags क्या होता है?
क्या आपने कभी Microsoft word का इस्तेमाल किया है? अगर हाँ! तो आप जानते होंगे. वर्ड का इस्तेमाल करके हम बहुत अच्छा document तैयार कर सकते है. वो भी बहुत बढ़िया फॉर्मेट में, मतलब टाइटल को बड़ा दिखाना. हैडिंग वैगेरा का इस्तेमाल करना. डॉक्यूमेंट में सही जगह पर Image, paragraph, font color, table वैगेरा हम बिलकुल आसानी से दिखा सकते है.ठीक उसी प्रकार एक web document (web page) में ये सब content formatting को करने के लिये html tags का इस्तेमाल किया जाता है. मतलब जब ब्राउज़र किसी .html फाइल को execute करता है. तो उसे ये पता चलना चाहिये. की कंटेंट अथवा words को किस प्रकार, कोंसे color किस जगह पर दिखाना है.
Important HTML Tag In Hindi
ध्यान रखिये टैग दो प्रकार के होते है. एक होता opening tag(शुरवात) और दूसरा closing tag (अंत) होता है. मतलब हम जिस शब्द को effect देना चाहते है. उसे opening और closing टैग्स में लिखा जाता है. आप निचे दिये गये उदाहरन से समझ सकते है.1. HTML:- हम इस tag का इस्तेमाल करके ब्राउज़र को बताते है. की, यह document html में लिखा गया है. इसीलए सबसे पहले और अंत में html टैग का इस्तेमाल करते है.
<html>
...
other coding formating
...
</html>
2. Head:- इस tag में वेबपेज की heading, meta data, external links और css coding लिखी जाती है. head को html के ठीक बाद लिखा जाता है.
<html>
<head>
...
other coding formating
...
</head>
</html>
3. Title:- जैसे हम किसी डॉक्यूमेंट को हम शीर्षक देते है. ठीक उसी प्रकार वेबपेज को टाइटल देने के लिये इसका उपयोग करते है.
<html>
<head>
<title> This is my first title </title>
</head>
</html>
4. Body:- हम वेब पेज में जो भी element यानी text और कंटेंट को शो करना चाहते है. वो वो सब <body> के अन्दर लिखते है. मतलब किसी वेबपेज में जो भी हम डिस्प्ले करना कहते हो. वो सब इस tag के अन्दर लिखते है. फिर चाहे वो हैडिंग हो, या फिर पैराग्राफ, या फिर इमेज वो सब हमें यहापर लिखना होगा.
<html>
<head>
<title> This is my first title </title>
</head>
<body>
..................
</body>
</html>
5. Heading:– जैसे MS-word में हम हैडिंग का प्रयोग करते है. ठीक उसी प्रकार हम यहापर भी हैडिंग का प्रयोग कर सकते है. HTML में कुल 6 प्रकार की heading होती है. जिन्हें <h1> से लेकर <h6> तक लिखा जाता है. जरसल ये छह प्रकार हैडिंग कुछ इस प्रकार है. <h1> सबसे बड़ी, फिर उससे कम साइज़ की <h2> ऐसे करके सबसे कम साइज़ में <h3> है.
<html>
<head>
<title> This is my first title </title>
</head>
<body>
<h1> This is heading 1 </h1>
<h2> This is heading 2</h2>
<h3> This is heading 3 </h3>
<h4> This is heading 4 </h4>
<h5> This is heading 5 </h5>
<h6> This is heading 6 </h6>
</body>
</html>
6. Paragraph:- आप जानते होंगे. जब भी हम कोई कंटेंट लिखते है. तो उसे अलग-अलग paragraph में डिवाइड करते है. HTML में हम paragraph के लिये <p> का इस्तेमाल करते है.
.....
<body>
<p> हमें जो भी कंटेंट पैराग्राफ में लिखना है. वो यहापर हम लिख सकते है. </p>
</body>
.....
Formatting:- ज्यादातर html में जितने भी डिजाईन और फॉर्मेटिंग का काम है. वो सब css के द्वारा किया जाता है. परंतु हम html के माध्यम से भी बेसिक फॉर्मेटिंग कर सकते है.
.....
<body>
<p>
<b> टेक्स्ट को बोल्ड दिखाने के लिये </b>
<i> text को तिरछा यानी टेडा दिखने के लिये </b>
<u> निचे अंडरलाइन शो करने के लिये. </u>
</p>
</body>
.....
(Note - ऐसे बहोत सारे फॉर्मेटिंग टैग है. जिन्हें हम बाद में विस्तार से देखेंगे.)
7. Image:- वेब page में इमेज दिखाने के लिये, <img> टैग का इस्तेमाल किया जाता है. साथ src यानी source attribute का इस्तेमाल करके फाइल कहा पर पड़ी हुयी है. ये बताना पड़ता है.
...
<body>
<img src="image.jpg">
</body>
...
(Note - इसमें हमें clossing tag देने की जरुरत नहीं है, मतलब आप </img> ऐसे सोच रहे हो. तो यह गलत है.)
8. Anchor:- एक वेबपेज में दुसरे web page की hyperlink देने के लिये anchor text का इस्तेमाल करते है. साथ इसमें href(hyper reference) एट्रिब्यूट का उपयोग किया जाता है. ताकि दुसरे page की location बताई जा सकते.
...
<body>
<a href="https://jankaribook.com/"> your text to apply link </a>
<body>
...
9. List:- इस टैग इस्तेमाल करके हम डॉक्यूमेंट में लिस्टिंग शोक करा सकते है. list tag में भी दो प्रकार आते है.
<ol> – इसका अर्थ order list होता है. जो की 1,2,3,4 ऐसे फोर्मेट में दिखाया जाता है.
<ul> – इसका अर्थ un-order list होता है. जिस्से हम पॉइंट्स को (…) बड़े dots के अंदर दिखा सकते है.
...
<body>
Order list
<ol>
<li> Mumbai </li>
<li> Pune </li>
<li> Nagpur </li>
</ol>
Unorder list
<ul>
<li> Fruit </li>
<li> Flower </li>
<li> Plants </li>
</ul>
</body>
...
10. Table:– HTML में टेबल दिखाने के लिये <table> का इस्तेमाल किया जाता है. साथ ही उसके अन्दर table rows <tr>, table header <th>, table data <td> जैसे tags भी होते है.
...
<body>
<table>
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<tr>
</table>
</body>
...
Html में attribute क्या होता है?
ऊपर हमने tags के बारे में देखा. जिनके जरिये हम webpage में headings, paragraph और image जैसे चीजे दिखा सकते है. लेकिन अगर हम इसके बारे में और ज्यादा इनफार्मेशन अथवा ब्राउज़र को exact बताना चाहते हो. की element कैसे शो करना हो. उसके लिये attributes use करते है.
एट्रिब्यूट को हम text को center दिखा सकते है. Img की location दिखा सकते है. उसकी general syntax नीचे बताई गयी है.
<tagName attrName="value">
For example
<p align="center"> this paragraph will display on center </p>
HTML में elements किसे कहते है?
<opening tag> और </closing tag> के बिच जो भो lines अथवा कंटेंट प्रेजेंट होता है. उसे elements कहते है.
HTML कैसे सीखे और web page कैसे बनाये?
मित्रो मैंने आपको पहले भी बताया. की एच.टी.एम.एल सिखने और समझने में काफी आसान है. उस सबका अंदाजा आपको यह post पढने के बाद ही आया होगा. आप एच.टी.एम.एल को online सिख सकते है. Internet पर ऐसी कही सारी वेबसाइट मौजूद है. जो HTML पढ़ाती है. साथ ही आप youtube का भी सहारा ले सकते है.
Web page बनाने के लिये आप simple text editor का इस्तेमाल कर सकते है. सबसे पहले notepad, अथवा notepad++ ओपन कीजिये. उसमे मैंने आपको जो बेसिक सिखाया. उस code को editor में लिखिए. सब होने के बाद उस फाइल को .html extension सेव कीजिये. For example (yourname.html) और फिर इस फाइल open as करके chrome अथवा ब्राउज़र में ओपन कीजिये.
