HTML Tutorial in Hindi – HTML क्या है? What is HTML in Hindi?

HTML kya hai hindi

यदि आप web development के क्षेत्र में नए है और web development सीखना चाहते है तो यह post आपके लिए है. हम आपके लिए लेकर आये हैं HTML Tutorial in Hindi.

इस post को पढ़ने के बाद आपको HTML के बारे में काफी सारी जानकारी मिल जाएगी जिससे आप HTML सिखने की शुरुवात कर सकते है.

इस post में हमने काफी बातो का समावेश किया है जो HTML सिखने के लिए जरुरी है. इस tutorial को इच्छुक Web Designers और Developers के लिए डिज़ाइन किया गया है ताकि HTML को आसानी से और practical examples के साथ पर्याप्त रूप से समझा जा सके.

HTML basics समझ लेने के बाद आप अगले blog posts पढ़ सकते है जिसमे आप CSS क्या है और JavaScript के बारे में जानेंगे. पर वो सब समझने के लिए आपको HTML basics पता होने चाहिए.

तो चलिए HTML Hindi Tutorial शुरू करते है.

What is HTML in Hindi?

HTML का fullform Hyper Text Markup Language है, और यह web page बनाने के लिए सबसे अधिक इस्तेमाल की जाने वाली भाषा है.

HTML का उपयोग web page बनाने और उन्हें functional बनाने के लिए किया जाता है.

यह tutorial आपको HTML शुरू करने के लिए पर्याप्त जानकारी देगा. इसके आगे से आप खुद को उच्च स्तर की HTML scripting तक ले जा सकते हैं।

HTML का इतिहास:

1989:
HTML को सबसे पहले सन 1989 में Tim Berners-Lee, Robert Cailliau और अन्य ने बनाया था.

1995:
HTML 2.0 पहला standard HTML specification था जो 1995 में प्रकाशित हुआ था.

1999:
HTML 4.01 HTML का एक प्रमुख version था और इसे 1999 के अंत में प्रकाशित किया गया था.

2012:
HTML का latest version HTML-5 2012 में प्रकाशित हुआ था.

Hypertext क्या है?

Hypertext संदर्भित करता है किस तरह से web page (HTML document) एक साथ जुड़े हुए हैं.
इस प्रकार, webpage पर उपलब्ध link को Hypertext कहा जाता है.

Hypertext में textual और graphical hyperlinks का समावेश है. Ted Nelson नामक वैज्ञानिक ने सन 1960 में hypertext संकल्पना की, और इसी के कारण आज इंटरनेट चल पाता है.

World Wide Web(WWW) के निर्माण में hypertext की संकल्पना ने बहुत ही अहम भूमिका निभाई है.
Hypertext की संकल्पना प्रस्तुत करने के बाद, Ted Nelson की दृष्टि Tim berners Lee के भी बहुत आगे चली गई.

Markup क्या है?

जैसा कि इसके नाम से पता चलता है, HTML markup language है जिसका अर्थ है कि आप HTML का उपयोग केवल tags के साथ एक text document को “mark-up” करने के लिए करते हैं जो Web browser को यह बताता है कि इसे कैसे दिखाना करना है.

HTML सिखने के लिए कुछ आवश्यक बाते:

इस tutorial को समझने के लिए आपको Windows का basic knowledge होना चाहिए.

आसान शब्दों में कहे तो आपको operating system इस्तेमाल करने का थोड़ा ज्ञान होना चाहिए.

इसके अलावा आपको कोई भी text editor जैसे कि notepad, notepad++, इत्यादि आना चाहिए.

  • अपने computer पर directories बनानी आनी चाहिए.
  • अलग अलग directories में navigate कैसे करते हैं.
  • File में content कैसे लिखते हैं और इसे अपने computer पर save करना आना चाहिए.
  • Image format के बारे में बेसिक जानकारी जैसे कि Jpg, Jpeg, इत्यादि.

बेसिक HTML Document:

अपने आसान रूप में, निचे HTML document का एक उदाहरण है –

<!DOCTYPE html>
<html>
<head>
<title>This is Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Main content.....</p>
</body>
</html>

Output:

This is a heading

Main content…..

HTML Tags क्या होते हैं?

जैसा कि पहले बताया गया, HTML एक मार्कअप भाषा है इसमें अलग-अलग tags का इस्तेमाल होता है. इन tags को angle brackets में लिखा जाता है. कुछ tags को छोड़कर, काफी tags में उनके संबंधित समापन(closing) tag होते हैं.

उदाहरण के लिए, <html>का अपना closing tag </html> है और <body> का अपना समापन tag </body> है

ElementPurpose
<!DOCTYPE>यह Document type और HTML version बताता है
<html>यह HTML document संलग्न करता है और इसमें मुख्य रूप से document header शामिल होता है जिसे <head> ... </ head> द्वारा दिखाया जाता है
<head>यह document head को दर्शाता है जो अन्य HTML tags जैसे Document title का उल्लेख करने के लिए <title> tag का उपयोग <head> tag के अंदर किया जाता है title आदि को रख सकता है
<body><body> tag document के अन्य HTML जैसे <h1>, <div>, <p> आदि को रखता है
<title>Document title का उल्लेख करने के लिए <title> tag का उपयोग <head> tag के अंदर किया जाता है

Heading tags:

HTML में 6 प्रकार के heading tags मौजूद है.

ElementPurpose
<h1>Heading 1
<h2>Heading 2
<h3>Heading 3
<h4>Heading 4
<h5>Heading 5
<h6>Heading 6

इन में से H1 सबसे महत्वपूर्ण title के लिए इस्तेमाल होता है और बाकी के heading tags दूसरे titles के लिए इस्तेमाल होते है.

Basic Text tags:

HTML में text लिखना काफी आसान है.

<p> tag का इस्तेमाल करके आप आसानी से paragraph add कर सकते है.

जब हम कोई paragraph लिखते है तो उसे format करने के लिए HTML में काफी सारे tags मौजूद है. चलिए कुछ tags और उनके purpose को चेक कर लेते है.

ElementPurpose
<p>Paragraph add करने के लिए
<b>Text को bold के लिए
<i>Text को italic करने के लिए
<strong>Text को strong(bold) करने के लिए
<em>Text को emphasize(italic) करने के लिए
<u>Text को underline करने के लिए
<a>Text को anchor link करने के लिए
<img>Image add करने के लिए

HTML Attributes क्या होते हैं?

Attributes हमें tags के बारे में अधिक जानकारी बताते हैं. HTML attributes को opening tag के अंदर लिखा जाता है.

उदाहरण के तौर पर:

<img src="photo.jpg" alt="photograph">

यहां पर image source (src) और alt text (alt) <img /> tag के attributes है.

HTML में list कैसे बनाए?

HTML में हम दो प्रकार की list बना सकते है.

1. Ordered list

यह क्रमांक अनुसार list होती है. HTML list items को डिफ़ॉल्ट रूप से numbers को display किया जाएगा. आप डिफॉल्ट number system को बदल सकते हैं.

उदाहरण के तौर पर:

  1. First item
  2. Second item
  3. Third item
<ol>
<li>First item </li>
<li>Second item </li>
<li>Third item </li>
</ol>

2. Unordered list

इसे Bullet point list के रूप में बेहतर जाना जाता है और इसमें कोई number नहीं होता है. HTML list items को डिफ़ॉल्ट रूप से circle disc(bullet points) में display किया जाएगा. आप डिफॉल्ट symbol को बदल सकते हैं. इसे CSS list-style-type property इस्तेमाल करके बदल सकते हैं.

उदाहरण के तौर पर:

  • List item
  • Unordered list item
  • List item
<ul>
<li>List item</li>
<li>Unordered list item </li>
<li>List item</li>
</ul>

HTML में Table कैसे add करे?

Website को अच्छा दिखाने के लिए Table का इस्तेमाल किया जाता है.

Tables हमारे content को काफी organize तरीके में दर्शाते है. इससे user को जानकारी समझने में बहुत आसानी होती है.

Tables में दो चीजें होती है, Rows और columns. Table के एक unit को cell कहते हैं.

चलिए कुछ आमतौर पर इस्तेमाल किए जाने वाले HTML table tags देख लेते हैं.

ElementPurpose
<table>Table add करने के लिए
<th>Header cell add करने के लिए
<tr>Table row add करने के लिए
<td>Cell add करने के लिए
<caption>Table caption add करने के लिए
<tbody>Table body add करने के लिए
<tfoot>Footer content add करने के लिए

HTML Editors

अब तक आपको HTML के बारे में basic जानकारी समझ आ गई होगी. अब आप अपनी website बनाने की शुरुआत कर सकते हैं.
सबसे पहले जान लेते हैं कि website बनाने के लिए हमें किन tools की जरूरत पड़ती है. सबसे जरूरी चीज जो हमें चाहिए वह है एक HTML editor.

Market में काफी सारे editors available हैं. इसमें से सबसे ज्यादा popular editor हमने समावेश किए हैं:

Most Popular HTML Editor – Sublime Text 3:

sublime text

Sublime Text एक text editor है, जो ज्यादातर developers इस्तेमाल करते हैं. इसमें काफी सारे features है जैसे कि Text Highlight, Automatic indentation, Macros जिससे code लिखना काफी आसान हो जाता है.

Sublime text काफी सारी code languages लिखने के लिए इस्तेमाल किया जाता है जैसे कि HTML, CSS, JavaScript इत्यादि.

यह एक open source platform है और आप इसे free में इस्तेमाल कर सकते हैं.

Notepad ++

notepad++HTML

Notepad++ एक open source editor जो काफी सारी programming languages को support करता है. यह notepad का replacement है.

Notepad में आप simple text लिख सकते हैं और Notepad++ का इस्तेमाल coding लिखने के लिए होता है.

HTML Tutorials कहां से और कैसे सीखे?

HTML सीखने के लिए इंटरनेट पर काफी सारी websites मौजूद है. इन websites पर basic से लेकर advance HTML tutorials available है.

नीचे दी हुई websites पर जाकर आप आसानी से HTML सीख सकते हैं:

  1. W3Schools
  2. CodeCademy
  3. JavaTPoint
  4. TutorialsPoint
  5. Learn-Html

यह सारी websites पर HTML फ्री में सिख सकते है. यदि आप Paid courses सीखना चाहते है तो Udemy.com, Coursera.org इत्यादि websites भी available है.

अपनी HTML Skills सुधारें:

इस HTML tutorial in hindi में हमने basic HTML के बारे में समझा. इसमें हमने जाना के html tags, html attributes क्या होते हैं और आमतौर पर इस्तेमाल किए जाने वाले html tags भी देख लिए.

अब जब आपने HTML के साथ शुरुआत कर ली है, आप अपने skills में सुधार कर सकते हैं. अब आप अगली पोस्ट पढ़ सकते है जिसमे आप जानेंगे CSS क्या है और इसका इस्तेमाल web design में क्यों होता है.

अगर आपको ये article अच्छा लगा तो आप हमारे website को subscribe करे. इससे आपको हर din कुछ नयी information मिलती रहेगी. आप हमसे facebook पर भी जुड़ सकते है.

Share this:

Leave a Comment

Your e-mail address will not be published. Required fields are marked *