Learn HTML in Hindi – Web Development Tutorial

 इस Article में हम HTML Tutorial in Hindi के बारे में पढ़ेंगे। जिसमे हम HTML को अच्छे से सीखेंगे। तो आप इस Article को ध्यान से पढ़े। 

Learn HTML in Hindi 

HTML एक Markup language है। जिसे Web pages create करने के लिए Use किया जाता है। इसकी Basic जानकारी हम Web Development Part 2 में दे चुके है। इसलिए यहाँ हम इसकी basic जानकारी नहीं देंगे। हम आपको ये Language सिखाना शुरू करते है।

इसे सीखने से पहले आपके Computer में एक Text Editor होना चाहिए। Text Editor Notepaid ++ Use कर सकते है। ये Text editor Development के लिए काफी अच्छा Text-Editor है। इसके आलावा आप Online HTML text editor भी Use कर सकते है।

HTML Langauge में Tag Attribute Element होते है। ये हमने पिछले article में बताया था। तो सबसे पहले ये जान लेते है की ये होते क्या है।

Tags क्या है

HTML Language tags से मिलकर बनी है। यानि किसी भी website को Create करने के लिए HTML के tags use किये है। जैसे- <html> ये एक HTML file का Tag है इसका Ending tag </html> है। HTML के सभी tags open tag और Ending tag होता है। इन्हे HTML के Element भी कहते है। HTML language में बहुत से tag है। ये सभी tags अलग अलग काम के लिए Use होते है।

Heading Create करने के लिए — <h1>

Paragraph create करने के लिए — <p>

Section Create करने के लिए  —  <section>

Image Add करने के लिए  —-     <img>

Links add करने के लिए  ——— <a>

इसके आलावा और भी बहुत से है। जिसके बारे में आगे जानेगे।

Attribute क्या है ?

इन tags के साथ में कुछ और भी Use होता है जिसे attribute कहते है। ये Attribute Tags Element की Value बताते है। जैसे–

 <a href="https://www.ostomio.com">This is a link</a>
यहाँ पे देख सकते है <a> tag जो use किया गया है। ये links create करने के लिए Use किया गया है। लेकिन इसमें href जो है ये Attribute है।

HTML File Structure 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Ostomio</h1>
</body>
</html>

Output

Ostomio
किसी भी valid HTML File Structure create करने के लिए इतने tag होना आवश्यक है। ये सभी tag html file में इसी तरह use किये जाते है।
1. <!DOCTYPE html> इससे पता चलता है की ये एक HTML file है।
2. <head> tag HTML file का head create करने के लिए use किया जाता है। इसमें metadata आदि को add        किया जाता है। जिसके द्वारा Search engine check करता है। की ये web page किस type का है।
3. <title> tag से किसी भी html file title create किया जाता है।
4. < body> tag में web pages का  सारा Content रहता है।
अब आप HTML का Structure बनाना सीख चुके है। अब आपको ये जानना है की Link image Color section कैसे Create करेंगे तो जानते है।

HTML Formating Element in Hindi 

Formating Element के द्वारा HTML में Special Types के Text को Create कर सकते है। यानि इन Element की मदद से Designing Text create किया जाता है। जैसे- Bold, Italic, Strong, Small Text आदि।

 <html>
<head>
<title>first page</title>
</head>
<body>
<p>This is regular text </p>
<p><b>bold text </b></p>
<p><big> big text </big></p>
<p><i> italic text </i></p>
<p><small> small text </small></p>
<p><strong> strong text </strong></p>
<p><sub> subscripted text </sub></p>
<p><sup> superscripted text </sup></p>
<p><ins> inserted text </ins></p>
<p><del> deleted text </del></p>
</body>
</html>

Output

Learn HTML in Hindi - Web Development Tutorial

HTML Color in Hindi

 अभी तक हमने जो सीखा उसमे कोई भी color add नहीं है। अब हम जानेगे HTML में color कैसे add करते है। सबसे पहले background Create करेंगे।
Background create करने के लिए bgcolor attribute को Use करेंगे। जो Code हमने HTML Structure में बता रखा है। उसी पे Background create करते है।

Output

Background create करने के लिए attribute को Body में Use किया जायेगा।
अगर Heading text में color add करना हो तो कैसे add करेंगे। इसके लिए <font > tag का Use करते है।

 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body bgcolor="yellow">
<h1><font color="blue"> Vishal </font></h1>
</body>
</html>

Output

HTML Styles  in Hindi 

Style Attribute को किसी भी element tag को Style देने के लिए Use किया जाता है।  ये Inline Style attribute होता है।  इसकी मदद से Html के किसी भी element में Font Color Size Background-Color आदि Create Change कर सकते है।  Style Attribute <Style> tag का ही एक हिस्सा है।  जिसकी मदद से website को design किया जाता है।  हालाँकि Style tag के बारे में हम आगे बात करेंगे।  इसलिए यहाँ Style attribute पे ही Focus कीजिये।  
सबसे पहले Style Attribute का Syntax देखते है।  
<tagname style=”property:value;”>
चलिए अब देखते है।  इसको किस प्रकार से Use किया जाता है।  

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Vishal</h1>
</body>
</html>
ये आप देख सकते है।  ये Simple HTML का Program है।  जिसमे एक Heading Create की गयी है।  

Vishal

Leave a Reply

Your email address will not be published. Required fields are marked *