Learn HTML in Hindi

Web Development के Part -4 Article में HTML सीखेंगे।इससे पहले Web development के 3 Article share किये जा चुके है। अगर आप Web development सीख रहे है तो इन article को Read कर ले। तभी Web development पूरी तरह से समझ में आएगा।

1. Learn Web Development in Hindi

2. Learn Web Development in Hindi: Part-2

3. Learn Web Development in Hindi: Part-3

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.greatgotips.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>Great go tips</h1>
</body>
</html>

Run Output

किसी भी 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

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>

Run Output

Element	Name	Meaning
<b>	Bold	Text को अधिक Dark (Highlight) करता है
<big>	Big	Text को बड़ा करता है
<i>	Italic	Text को Denote करता है।
<small>	Small	Text को छोटा करता है।
<strong>	Strong	ये Same Bold की तरह होता है।
<ins>	Inserted	ये Inserted Text को Underline करता है।
<del>	Deleted	Deleted text दिखाता है।

तो अब आप Formating Text जान चुके है।

HTML Color

अभी तक हमने जो सीखा उसमे कोई भी color add नहीं है। अब हम जानेगे HTML में color कैसे add करते है। सबसे पहले background Create करेंगे।

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

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body bgcolor="yellow">
<h1>Great go tips</h1>
</body>
</html>

Run Source

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"> Great go tips</font></h1>
</body>
</html>

HTML Styles

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>Great go tips</h1>
</body>
</html>

ये आप देख सकते है। ये Simple HTML का Program है। जिसमे एक Heading Create की गयी है।

यहाँ आप देख सकते है। ये इस प्रकार display हो रहा है। अगर इसमें हम color add करना चाहे। तो वो Style Attribute की मदद से कर सकते है।

<h1>Great go tips</h1>

<h1 style="Color:Blue;"> Great go tips</h1>

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1 style="Color:Blue;"> Great go tips</h1>
</body>
</html>

तो अब आप HTML Style Attribute के बारे में जान चुके है।

HTML Quotation

HTML Quotation Element के द्वारा Web pages पे Quotation Create कर सकते है। Quotation Create करने के लिए HTML कई Element provide करती है।

<blockquote>
<q>
<abbr>
<Address>
<cite>
<bdo>

चलिए अब इन सभी element के बारे में जानते है।

1. <blockquote>

इस Element की मदद से एक Quote Section Create कर सकते है।

<html>
<body>
<h1> Blockquote Great Go tips </h1>
<p> Yaha pe Blockquote element create karege. uske baad dekhege ki ye kis prakar ka dikhayi deta hai tatha iska use kaha kar sakte hai. </p>
<blockquote>
Blockquote bahut jyada important element hai. Jiska use web pages ko create karne me kai jagah kiya jata hai. isko aap puri tarah se samejhe. iske alava Quotes create karne ke jitne bhi element tag hai. sabhi ko achhe se samajhane ka prayas kare. Great go tips website pe in sabhi ki achhe se jankari di gayi hai. Jise samajhiye.
</blockquote>
</body>
</html>

Yaha pe Blockquote element create karege. uske baad dekhege ki ye kis prakar ka dikhayi deta hai tatha iska use kaha kar sakte hai.

Blockquote bahut jyada important element hai. Jiska use web pages ko create karne me kai jagah kiya jata hai. isko aap puri tarah se samejhe. iske alava Quotes create karne ke jitne bhi element tag hai. sabhi ko achhe se samajhane ka prayas kare. Great go tips website pe in sabhi ki achhe se jankari di gayi hai. Jise samajhiye.

ये इस तरह का Quotation <blockquote> element से Create किया जाता है।

2. <q>

इस Tag की मदद से Short Quote Create कर सकते है

<!DOCTYPE html>

<html>

<body>

<q>Build a future where people live in harmony with nature.</q>

</body>

</html>

Output देखिये

इस tag की मदद से Quotation mark Automatic लग जाता है।

3. <abbr>

ये एक Abbreviation HTML Element है। जो की abbreviation को Represent करता है। इसमें हम title attribute के द्वारा Abbreviation का full Description Add कर सकते है।

 <!DOCTYPE html>
<html>
<body>

<p>The <abbr title="Learn HTML in Hindi">Great Go Tips</abbr> is a tech site.</p>

<p>You can learn HTML, CSS, Javascript, PHP etc Web development language by Great Go tips and you can become full stack web developer</p>

</body>
</html>

Output

The Great Go Tips is a tech site.

You can learn HTML, CSS, Javascript, PHP, etc Web development language by Great Go tips and you can become a full-stack web developer

4. <address>

इस element के द्वारा किसी भी Document या article के Owner / Admin की Contact information आदि को Add कर सकते है।

5. <cite>

इस Element की मदद से किसी Quotation या Creative Work का Reference Describe कर सकते है।

6. <bdo>

इस Tag के द्वारा Current Text Direction को Override कर सकते है।

HTML Comments

HTML Comments के माध्यम से किसी भी HTML Document file में Text create कर सकते है। जो Browser में Run नहीं होता है। सिर्फ HTML Code में रहता है।

इसका उपयोग Developer Code को समझने के लिए करते है। जब भी कोई Big file create करते है। तो उसके code में Comment Create कर देते है। जिससे वो बाद में कभी भी अपने code का पता लगा सकते है।

HTML Links

I Hope, HTML Language basic पूरी सीख चुके है। अब आप अपने Text editor में HTML Files आदि create करे। अब आपको Code Practice करना है। और कुछ Create करना है।

Learn HTML in Hindi - Web Development: Part-4