HTML कैसे सीखे? – Lesson 2

आज का विषय है, HTML कैसे सीखें (Learn HTML in Hindi) Html का full form है, Hypertext markup language यह वेब पेज बनाने के काम मे आती है। Website का Structure बनाने में भी HTML का use सबसे ज्यादा होता है। अगर आपको अपनी खुद की website create करनी है तो Html language को सीखना आपके लिए बहुत जरूरी है।

HTML Kaise Sikhe - Learn HTML in Hindi

HTML language को सीखने और इसकी मदद से web pages बनाने के लिए आपको HTML tags and HTML attributes के बारे जानना होगा। किसी भी web pages को बेहतरीन Structure देने में Html tags और Html attributes का ही इस्तेमाल किया जाता है। Html एक बेहद सरल markup language है। इस लेख HTML कैसे सीखे पर हम जानेंगे Html element’s व उनके Html attributes क्या है, और इनकी मदद से web pages कैसे बनाये। तो चलिए Step by step जानते है-

HTML कैसे सीखे – How to Learn HTML in Hindi

HTML Language को सीखने के लिए जरूरी है, Html tags व Html attributes का ज्ञान होना। दरअसल Html तो सिर्फ इस markup language का नाम है, बाकी सारा काम इन्ही tags व attributes का होता है। अगर आपने इन सारे Html tags व इनके attributes को जान लिया तो आप एक Html expert भी बन सकते है। इन सबका ज्ञान होने के बाद आपके लिए एक Website बनाना बाएं हाथ का खेल होगा। तो चलिए इस पोस्ट में अब जानते है। html tags व html attributes क्या है और इनका इस्तेमाल कैसे किया जाता है।

HTML Tag क्या है

किसी web page के structure को बनाने में इस्तेमाल किये जाने वाले codes को html tags या html element’s कहा जाता है। यह tags angular brackets (<>) के बीच एक simple text होता है।

उदाहरण के लिए: (<h1> ) यह एक Heading tag है। जिसे  heading के starting word H से define किया गया है। ज्यादातर टैग्स को भी उनके first word से ही define किया जाता है। इन tags के opening व closing tag जरूर होते है। html file बनाते वक्त भी इसका खास ख्याल रखा जाता है कि, इस्तेमाल किये जाने वाले tag का पहले opening tag व अंत मे closing tag जरूर लिखा जाए तभी वह html file सही से कार्य करेगी।

अगर आपको किसी web page में heading लिखनी है। तो आप उसके opening tag <h1> से शुरूवात करेंगे। अब अपनी heading लिखने के बाद इसके closing tag </h1> को लिखकर इस Heading tag को बंद करेंगे। इसी तरह बाकी tag को भी opening tag से शुरू करके closing tag पर बंद किया जाता है। नीचे उदाहरण से समझे।

<H1> html kaise sikhe </h1>

निम्नतः Html tags दो प्रकार के होते है:

  1. Paired html tags
  2. Unpaired html tags.

Paired html tags: जिन tags के opening व closing दोनों tag होते है, उन्हें paired html tags कहा जाता है। ज्यादातर HTML tags paired ही होते है। निचे के उदाहरण में पर heading tag एक paired tag है। जिसका opening tag <h1> व closing tag </h1> है।

<H1> Learn HTML in Hindi </h1>

Unpaired HTML tags: इन tags के कोई opening व closing tags नही होते। यह एक तरह के singular html tags होते है। इन्हें इस तरह से लिखा जाता है। निचे के उदाहरण में एक line break tag (<Br>) है। Paragraph लिखते वक्त किसी एक line को समाप्त कर दूसरी line लिखने के लिये ऐसी tag का इस्तेमाल किया जाता है।

<Br>

इस लेख पर अब तक आप जान चुके होंगे कि HTML Tag क्या होते है और html element’s व इनके attributes क्या होते है। तो चालिये अब जानते है , कुछ html tags व उनके इस्तेमाल के बारे में की वह किस काम मे आते है।

कुछ Basic HTML Tags व उनके इस्तेमाल

1. DOCTYPE tag – यह tag किसी document के type को explain करती है। जैसे यहां पर इस documnet का type html है । इस tag को <!DOCTYPE>  से define किया जाता है।

2. Html Tag – यह tag html language का main tag है। html tag को <html> से define किया जाता है। ऐसी tag से html document बनाने की शुरुवात की जाती है। बाकी सभी tags इसी html tag के opening व closing tag के भीतर लिखे जाते है।

3. Head Tag – एक web page के Head part यानी ऊपरी भाग को इसी tag की मदद से बनाया जाता है। head tag के भीतर ही उस web page के title, meta description and keyword tag को लिखा जाता है। इसे <head> से define करते है।

4. Body Tag – इस tag से web page के Content Area की शुरुवात की जाती है। Body tag को <Body> से define किया जाता है। Heading tag, Paragraph tag etc. इसी tag के अंदर लिखे जाते है। इस tag की मदद से एक web page के body area को design किया जाता है।

5.  Title Tag – किसी web page का title लिखने के लिए इस tag का use किया जाता है। इस tag को <title> से define किया जाता है।

6. Heading Tag – Web page के Content में Heading लिखने के लिये इस tag का इस्तेमाल किया जाता है। heading tag को <h1> से define किया जाता है। एक Content में 6 heading tag का इस्तेमाल किया जा सकता है। जिनके tag क्रमशः <h1>, <h2>, <h3>, <h4>, <h5>, <h6> है।

7. Paragraph Tag – इसका इस्तेमाल Paragraph लिखने के लिए किया जाता है। एक content में आप कई Paragraph tag का use कर सकते है। इस tag को <p> से define किया जाता है।

8. Line Break Tag – Paragraph लिखते वक्त एक line को खत्म कर अगली line शुरू करने के लिये line break tag का इस्तेमाल किया जाता है। इस tag को <br> से define किया जाता है।

9. Bold Tag – किसी Important text को Bold (गहरा) करने के लिये bold tag का इस्तेमाल किया जाता है। इस tag को <B> से define किया जाता है।

10. Underline Tag – यह tag किसी latter को underline करने के लिए इस्तेमाल किया जाता है। इसे <u> से define किया जाता है।

11. Italic Tag – यह tag किसी latter को italic करने के लिए use किया जाता है। इसे <i> से define किया जाता है।

HTML Attributes क्या है?

HTML Attributes किसी Html elements (tag) के बारे में extra information provide करने के लिए इस्तेमाल किये जाते है। Html file में इन attributes को दो भागों में लिखा जाता है। इसका पहला भाग Attributes Name वह दूसरा भाग इसकी Value होता है। एक Html file में इन attributes का इस्तेमाल किसी Html elements के opening tag के साथ किया जाता है। निचे दिया उदाहरण देखे –

<h1 attrname= "value"> Html  Kaise Sikhe </h1>

उप्पर दिए गए example में यह एक heading tag है। जिसे उसके opening tag h1 व closing tag h2 से दर्शाया गया है। अब जैसे हमने उप्पर आपको बताया कि, html attributes extra information provide करते है html elements के बारे में। तो अगर हमको इस html file की heading का color change करना होगा तो यहां पर हम उस attributes का use करेंगे जिससे Font color change किया जा सकता है।

ऐसे ही बहुत सारे attributes होते है, जिसकी मदद से हम html tags को extra configure कर सकते है। html file में इन attributes को हमेशा किसी html elements के opening tag के साथ लिखा जाता है। जैसा कि ऊपर example में बताया गया है। एक html attributes को उसके Name व उसकी value लिखकर दर्शाया जाता है।

उप्पर दिए गए उदाहरण में आप देख सकते है, heading tag के opening tag h1 के अंदर एक attribute example दिया गया है। यहां पर attr-name की जगह कोई भी html attributes का नाम हो सकता है। उसके बाद उसकी value को Quotation marks [ “ ” ]  के अंदर लिखा जाता है। इसी तरह से बाकी HTML attributes को भी लिखा जाता है।

कुछ Basic HTML Attributes व उनका इस्तेमाल

1. Html href attribute – इस attribute का इस्तेमाल दो web page को आपस मे जोडने के लिए किया जाता है। इस attribute को <a> tag के opening tag में लिखा जाता है। <a> tag को hyperlink tag भी कहा जाता है। <a> tag  का इस्तेमाल किसी text या image  को link  देने के लिए किया जाता है। यह tag दूसरे web page में जाने की अनुमति देता है। निचे दिए गए उदाहरण में a tag के opening tag के साथ href attribute को लिखा गया है। यहां पर href इस attribute का Name है, और https://nayaseekhon.com उसकी Value.

<a href= "https://nayaseekhon.com"> Nayaseekhon.com </a>

2. Html src attribute – अगर आप किसी image को एक html file में add करना चाहते है, और वह image आप अपने Computer या किसी Website से लेना चाहते है। तो इस image file का Source address set करने के लिये src attribute का use किया जाता है। अगर image file computer के उसी folder में हो जहाँ html file save की गई है, तो src attribute का use कुछ इस तरह से होगा।

निचे दिए गए उदाहरण में, HTML in Hindi एक image का file name है। यहाँ पर src attribute को image tag के opening tag में उसके Name – src व उसकी Value – HTML in Hindi.jpg के साथ लिखा गया है।

<image src= "HTML-in-Hindi.Jpg"> </image> 

दूसरा उदाहरण, अगर image file computer के दूसरे folder में save हो तो src attribute का use कुछ इस तरह से होगा। इस example में image file कंप्यूटर के download folder में image folder के अंदर है। इसी तरह से आपके जिस भी folder में image file save हो उस folder का नाम slash लगाकर लिखे तभी आपकी image उस html file में show होगी। 

<image src= "Download/image/HTML-in-Hindi.jpg"> </image>

तीसरा उदाहरण, अगर image file एक url के रूप में हो, तब src attribute का use कुछ इस तरह से होगा।

<image src= "https://nayaseekhon.com/HTML-in-Hindi.jpg> </image>

अंतिम राय

तो दोस्तो उम्मीद है, आपको यह पोस्ट पसंद आई होगी। Html सीखने के लिए यही जरूरी है, कि आप html element’s व उनके attributes को अच्छे से सीखे। आगे की पोस्ट में हम और details में इनके बारे में जानेंगे। अगर आपको यह पोस्ट HTML कैसे सीखे (Learn HTML in Hindi) अच्छी लगी हो तो इसे Like, Share, Comment करना बिल्कुल न भूले।

14 COMMENTS

  1. sir muje html ke bare me jyada kuch pata nhi tha but pura html ke bare me mai padhi to muje bahut acha laga or bahut kuch sikhne ko v mila but muje eska program banane nhi ata hai to mai kaise sikhu..?

    • Rohit agar aapka coding me intrest hai toh aapko ese sikhne me bahut maja aayega. lekin agar aap ese jabardasti sikh rahe hai toh aapko baki napasand kamo ko karne me utni dikkat nahi hogi jitni coding karne me hogi.

  2. sir me aapko pichale 6 mahine se follow kar rha hun.

    mene aapse bahut knowledge hasil kiya hai.

    useful jankari dene thanks sir.

    thank you so much sir😊

LEAVE A REPLY

Please enter your comment!
Please enter your name here