Learn HTML

Saturday, September 3, 2016

Head and Body Tags

HEAD tag HTML tag के अंदर होता है, और HTML document की सारी ज़रूरी जानकारी को रखता है जैसै, webpage का META info, अतिरिक्त फ़ाइलें जो webpage के लिए ज़रूरी है जैसे, CSS की फ़ाइलें, Javascript की फ़ाइलें, और अतिरिक्त styling और javascript का वर्णन करने के लिए <style> और <script> tag भी Head tag में ही लिखे जाते है|

BODY tag, closing HEAD tag के बाद आता है | Webpage का सारा content जो client को दिखाई पड़ेगा, वह सब opening और closing BODY tag के अंदर आता है |

हर webpage में opening और closing <html>, <head> और <body> tags होने चाहिए|

वैसे तो W3C specifications के अनुसार य़े tags हर HTML page में इस्तेमाल करने ज़रूरी नहीं होते है, पर इन्हें अपने HTML page में add करना सही माना जाता है |

Instructions

1.     Opening एवं closing <body> </body> tag को add करें|

2.     Webpage का सारा content opening एवं closing BODY tag के अंदर आ जाएगा |

3.     Opening BODY tag के ऊपर, और HTML tag के अंदर, <head> </head> tags add करें| जैसा की हम पढ़ चुके है HEAD tag में META tags, stylesheets, javascripts, page का TITLE इत्यादि चीज़े निर्धारित की जाती है |

TITLE Tag

Title Tag webpage को title प्रदान करने के काम आता है, जो browser window के title bar में दिखाई देता है|

Webpage में Title, <title> tag के इस्तेमाल से add किया जाता है| य़ह title tag, html document के HEAD tag के अंदर रखा जाता है|

Title tag ना केवल webpage का title निर्धारित करता है, यही title, search engines के परिणाम में भी दिखाई देता है, और browser में जब कोई किसी webpage को bookmark करता है तब भी, title के नाम से ही bookmark बनता है|

Instructions

1.     पिछले Lesson के code के साथ आगे बढ़ते है जो terminal में पहले से मौजूद है|

2.     Opening और closing head tag के अंदर opening और closing <title> </title> tag add करें|

3.     Opening और closing Title tags के बीच में अपने webpage का title लिखें| <title> My Webpage Title </title>

Heading Tag

Heading Tags, webpage में heading देने के काम आते है | किसी भी document में एक य़ा उससे जयादा headings होती है, तो html में : <h1> , <h2> , <h3> , <h4> , <h5> एवं <h6>, कुल छः heading tags होते है जिनके इस्तेमाल से हम छः तरह की heading अपने webpage के content को दे सकते है|

किसी भी heading को दिखाते हुए, browser एक line उसके पहले और एक line heading के बाद खाली छोड़ देता है |

H1 एक webpage की सबसे मुख्य एवं महत्वपूर्ण heading होती है, उसके बाद H2, फिर H3, इस क्रम में बाकी headings, महत्व में घटती जाती है| जैसे की : H1 heading के अंदर sub heading H2 होगी और H2 के अंदर subheading H3 होगी|

Heading tag जोड़ो में होते है, opening और closing heading tag, और Heading Text उनके बीच में आता है|

Instructions

1.     चलो अपने webpage में कोई heading add करते है |

2.     <h1>Heading 1</h1> और <h2>Heading 2</h2> tags को BODY tag के अंदर add करें |

3.     आपका body tag कुछ इस तरह दिखेगा,

4.     <body>

5.     <h1>

6.       Heading 1

7.     </h1>

8.     <h2>

9.       Heading 2

10. </h2>

</body>

11.                        अगर आप चाहे तो अभ्यास करने के लिए सभी छह heading tags try कर सकते है |

Paragraph Tag

<p> tag किसी भी HTML document में paragraph को बनाने के लिए उपयोग होता है |

Paragraph का सारा text opening <p> और closing </p> tag के बीच में होता है |

Browser अपने आप से कुछ space(थोड़ी जगह) <p> element के पहले और बाद में खाली छोड़ देता है |

Headings and Paragraphs.

जब किसी आलेख में headings और paragraph सही रूप से दिए गए हो तभी वह पूरी तरह से संरचित कहलाता है|

एक HTML document में, यह काम <h1>, <h2>(headings के लिए) इत्यादि tags एवं <p>(paragraph के लिए) tag के इस्तेमाल से आसानी हो जाता है|

नीचे दी गयी exercise में हम यही सब करेंगे|

Instructions

1.     Body tag के अंदर, सभी छह heading tags का इस्तेमाल करें , और हर heading tag के नीचे एक paragraph add करें |

2.     जैसे नीचे हमने प्रमुख heading tag के लिए किया है|
```
3.       <h1>Heading 1</h1>
```
```
<p>यह पहला paragraph है</p>
```
4.     ऐसे ही बाकी बचे पांचो Heading tags के लिए कीजिये|

<br>, <hr> and Comments in HTML

कुछ information, paragraphs में तोड़ने पर भी संरचित नही हो पाती| अगर आपको कुछ वाक्यों को अलग-अलग लाइन में दिखाना है तो, तब line-break tag का उपयोग होता है|

<br> tag किसी पंक्ति को तोड़ने के लिए इस्तेमाल किया जाता है|
tag एक empty tag है जिसका मतलब है की इसको closing tag की ज़रूरत नहीं है| जहाँ पर भी आपको किसी वाक्य की line बदलनी है, केवल <br> tag को add करें, और इस tag के बाद का text, नयी line में आ जाएगा |

जहाँ <br> tag line बदलता है, वहीँ <hr> tag अलग-अलग विषयों के बीच में लकीर खींचने के काम आता है|

आड़ा लकीर जो आप इस paragraph के बाद देखेगें, वह <hr> tag का इस्तेमाल करके ही बनाई गयी है| ये भी <br> tag की तरह ही एक empty tag है |

Comments(टिप्पणी) in HTML

Comment tag  HTML code में कोई भी ज़रूरत की टिप्पणी add करने के लिए होते है| यह टिपण्णियां browser में दिखाई नहीं देती है| आप comments को अपने code को स्पष्ट रूप से समझाने के लिए इस्तेमाल कर सकते है, जो की आपके ही काम आएगा जब आप अपने कोड को कभी भविष्य में बदलेंगे |

आप अपने html code में कुछ इस तरह टिप्पणी शामिल कर सकते है :



इस comment के अंदर कुछ भी होगा वे browser में दिखाई नहीं देगा|

आप चाहे तो पूरे HTML tag को comment कर सकते है, जिससे की वो browser में दिखाई नहीं देगा|

जैसे की : 

Instructions

1.     Terminal में <p> tag को add करें, और उसमें कोई वाक्य लिखे, और उस वाक्य के बीच में <br> tag को add करें|<br> tag.

2.     Line बदलने के लिए अपने keyboard की Enter key को press करें, HTML इसे नहीं समझता, HTML by default, फ़ालतू के white spaces और ENTER key को नज़रअंदाज़ करता है|

3.     अब किसी दूसरे paragraph tag को include करें, इसमें कुछ वाक्य लिखे, और पहले और दूसरे paragraph को अलग करने के लिए <hr> tag का उपयोग करके उनके बीच में एक लकीर खींच दे |

4.     Output में जो भी changes हो रहे है उनको ध्यान से देखते रहे|

5.     चलो अब code में comment include करें| Comment tag का इस्तेमाल करके चाहें तो कोई टिप्पणी add कीजिये या किसी tag को comment कीजिये|

Basic Text Formatting(स्वरूपण)

HTML सरल और प्रयोग करने में आसान tags देता है जो HTML document को आसानी से style देने के काम आते है, जैसे bold, italics, underline etc.

अगली exercise start करने से पहले चलो हम ज़रूरी formatting tags के बारे में पढ़ लें |

NOTE :सभी formatting tags, closing और opening tags के जोड़ो में उपयोग होते है| कोई भी <br> tag की तरह empty tag नही है |

Bold and Strong

<b> tag किसी भी शब्द या वाक्य को bold बनाता है| कोई भी text जो opening और closing <b> tag के बीच में होगा वो browser में बाकी text के मुकाबले ज़्यादा मोटा और रंग में गाढ़ा दिखाई देगा|

वैसे तो <strong> tag भी देखने में Bold tag जैसी ही चीज़े करता है, लेकिन इसमें जो text होता है यह उसे एक मुख्यता भी प्रदान करता है , की वह text ज़रूरी है|
```
<b> I am Bold text </b>

<strong> I am Strong Text </strong>
```
Italics and Emphasised

<i> tag किसी भी शब्द या वाक्य को तिरछा बनाता है| <em> tag भी देखने में Italic tag जैसी ही चीज़े करता है|
```
<i> I am Italic text </i>

<em> I am Emphasised Text </em>
```
Underline

<u> tag किसी भी शब्द या वाक्य, जो opening और closing <u> tag के बीच में होते है उन्हे underline करता है |
```
<u> I am Underlined text </u>
```
Small

<small> tag दूसरा की तुलना में text को आकार में छोटा कर देता है|
```
I am <small>small</small> text
```
आप ऊपर दिए गए सभी formatting tags को बाकी tags जैसे Heading और Paragraphs के अंदर इस्तेमाल कर सकते है|
```
<h1><small>Tiny</small> text</h1>

<h1><i>Italic</i> text</h1>

<h1><b>Bold</b> text</h1>
```
Instructions

इस वक्त तक आपने जरूर सारे tags try कर लिए होगें, पर फिर भी एक छोटी सी exercise कर लेते है|

1.     इस exercise का मकसद, उन सभी छह formatting tags का उपयोग करके देखना है जो अभी हमने पढ़े है|

2.     आप <p> tag का इस्तेमाल करके अपने text को paragraphs में विभाजित कर सकते है और फिर अलग-अलग शब्दों पर formatting tags का उपयोग कर सकते है|

3.     आप ऊपर में दिए गए उदाहरणों का इस्तेमाल भी कर सकते है|

Creating Hyperlinks

HTML में Anchor tag एक webpage को दूसरे webpage से लिंक(link) करने के काम आता है| जैसे की हम किसी शब्द या वाक्य पर click करें और एक नया webpage खुल जाये, यह anchor tag के इस्तेमाल से होता है| Anchor या लिंक, <a> tag के उपयोग से बनाया जाता है|

किसी भी text को opening और closing <a> tag के बीच में रखने से hyperlink create नही होगा जब तक हम उसे HREF attribute नही देंगे|

The href Attribute

वैसे तो <a> tag के पास कई attribute होते है जैसे NAME, TARGET इत्यादि लेकिन hyperlink बनाने के लिए, कोई और attribute हो ना हो, कम से कम hrefattribute anchor tag के अंदर होना ही चाहिए|

इस attribute के इस्तेमाल से ही हम उस webpage का नाम बताते है जहाँ ये link click होने पर आपको लेकर जाएगा|

href Hypertext Reference का संक्षिप्त रूप है |

Opening <a> tag के अंदर हम href लिखते है, फिर एक equals sign = लगाते है और फिर हम double quotes के अंदर value देतें है | हम value में दूसरे webpage पर जाने का path देतें है, जिसका हमें hyperlink बनाना है|

नीचे दिए code से Studytonight के homepage के लिए Link बन जाएगा|
```
<a href="http://www.studytonight.com">
```
```
  Go to Studytonight
```
```
</a>
```
Instructions

चलो इस exercise में नए anchor tag के साथ-साथ ये भी check करते है की आपको Paragraph tag याद है के नहीं|

1.     एक अनुच्छेद(paragraph) या वाक्य लिखें जो paragraph tag के अंदर हो|

2.     अब उस paragraph में कोई भी एक शब्द चुने और उसे किसी भी website या webpage का hyperlink बनाए|

3.     href attribute को ना भूलें|

4.     बिना hint को देखें इस lesson को ख़त्म करने की कोशिश कीजिये|

Working with Images

<img> tag का इस्तेमाल करने से webpage में चित्र जोड़ना आसान हो जाता है |<img> tag एक empty tag है, जिसका मतलब है इसके साथ कोई closing tag नही लगेगा| बस closing angular bracket से पहले इसके साथ / लगता है : <img src="path" />

Anchor tag की तरह, <img> tag भी अकेला कुछ नही कर सकता, इस tag को भी attributes की जरूरत होती है |

The src Attribute

यह attribute, चित्र कहाँ पर है वहां का path बताता है| ताकि हम उस चित्र को अपने webpage में दिखा सकें|
```
src="path_to_image"
```
The alt Attribute

alt, alternate का संक्षिप्त रूप है | कभी-कभी slow internet connection की वजह से जब कोई चित्र webpage में load नही हो पाती है, तभी altattribute में जो value होती है चित्र की जगह वह दिखाई देती है |
```
alt="alternate_text"
```
दोनों attributes को add करने के बाद, <img> tag कुछ इस तरह दिखाई देगा|
```
<img src="path_to_image" alt="alternate_text" />
```
NOTE : src attribute जरूरी होता है, लेकिन altattribute को add करना जरूरी नही है |

Instructions

एक <img> tag को add करें जिसके src attribute की value नीचे दिया गया लिंक हो|
```
http://www.studytonight.com/css/resource/flat-ui-icon/startup-icon.png
```
ध्यान रखे की <img> को closing <body> tag के पहले add करें |

आप alt tag को भी image में add कर सकते है, पर इससे कुछ भी फर्क नही पड़ेगा, alt tag की value तभी दिखेगी जब image load नहीं हो पाएगी

Hyperlink a Picture

इस lesson में हम anchor tag क्या-क्या कर सकता है यह देखेंगे| कैसे opening और closing <a> tag के बीच में जो कुछ भी होता है यह उसे link बना देता है |

हम दो link create करेंगे, एक image वाला और दूसरा text वाला|

इसके अलावा आपको कुछ और भी करना है वह आप कर सकते है| अब तक आपने जितने भी interesting tags पढे है उनका अभ्यास करें |

Instructions

1.     आपको img tag का इस्तेमाल कर के body tag के अंदर image add करनी है |

2.     फिर image को hyperlink बनाने के लिए, opening और closing <a> tag को, img tag के आगे पीछे जोड़ें|

3.     इसके साथ, आपको एक paragraph tag के अंदर, एक वाक्य को add करना होगा| और फिर उस वाक्य में से किसी भी शब्द को इस्तेमाल कर के कोई link बनाना होगा/

Subscribe to: Posts (Atom)