HTML Elements - एच टी एम एल हिन्दी में ~ ESkool

हम जब भी कभी कोई Web Page Create करते हैं, तब हमारे Page के हमेंशा दो मुख्य हिस्से होते हैं, जिन्हें Head Section व Body Section कहते हैं। ये दोनों ही हिस्से <html></html> Element के Child Sections होते हैं और इनमें हमेंशा <head> व <body> Elements होते हैं।

HTML <head> Elements

इसे सामान्यतया Page का Head कहा जाता है। इस Element में हमेंशा हमारे Web Page से सम्बंधित Information होती हैं। जैसे- scripts, instruct the browser को बताना कि style sheets कहाँ ढुँढनी है, meta information उपलब्ध कराना, इसमें हमें Page के Title व Page के Keywords तथा Page के <meta> Element को Include किया जाता है, जिसका प्रयोग विभिन्न प्रकार के Search Engines हमारे Page को Search करने के लिए करते हैं। Page से सम्बंधित विभिन्न प्रकार की जानकारियों को हमें इसी <head> Element के बीच Specify करना होता है।
<head> element के अंदर पेज के सारे head elements होते है.
the head section में ये tags आते है : <title>, <style>, <meta>, <link>, <script>, <noscript>, और <base>.

<title> Element

<title> का उपयोग document का title सेट करने के लिये किया जाता है ।<title> element सभी तरह के HTML/XHTML documents में प्रयोग किया जाता है ।
<title> element की उपयोगिता:

title browser toolbar में प्रदर्शित होता है । पेज पर नही दिखता ।
browser में add to favorites करने पर पेज का title ही प्रयोग होता है ।
search-engine results मे पेज के लिये एक title प्रदर्शित करने के लिये ।

HTML document:

<!DOCTYPE html>
<html>
<head>
<title>पेज का Title </title>
</head>
<body>
पेज का content......
</body>
</html>

<base> Element

<base> tag का प्रयोग specifies the base URL/target for all relative URLs in a page:

<link> Element

<style> Element

The <style> tag का प्रयोग HTML document की style information को define करने के लिये होता है।
<style> element के अंदर आप specify कर सकते है कि browser में HTML elements किस तरह render करेंगे :

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

उपरोक्त उदाहरण में पेज का बेकग्राउंड yellow और पेराग्राफ़ का कलर blue होगा।

<meta> Element

Metadata यानि आपके पेज के data के बारे मे data (जानकारी) होता है । <meta> tag आपके HTML document के बारे में metadata उपलब्ध कराता है । Metadata पेज पर दिखाई नहीं देता है पर यह machine parsable होता है।
                               Meta elements का प्रयोग सामान्यत: पेज की description, keywords, पेज के लेखक, last modified, and other metadata.
                                 The metadata का प्रयोग browsers (पेज के content को किस तरह दिखाया जाये या पेज को स्वत: reload या Refresh करने के लिये), search engines (keywords), या अन्य web services के द्वारा किया जाता है।
<meta> tags हमेशा <head> element के अंदर प्रयोग किये जाते है।

<meta> Tags के उदाहरण-

search engines के लिये keywords देने के लिये :

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

web page की description (व्याख्या) करने के लिये जो search engines मे प्रदर्शित होगी :

पेज के लेखक का नाम देने के लिये:

पेज को हर 30 seconds में Refresh करने के लिये यानि नया कुछ पेज पर हुआ हो तो:

<script> Element

HTML head Elements

Tag	Description
<head>	document के बारे मे जानकारी लिखने के लिये प्रयोग होता है।
<title>	document का title लिखने के लिये प्रयोग होता है।
<base>	एक page पर सभी links के लिए default address या एक default target सेट करने के लिये प्रयोग होता है।
<link>	document और किसी बाहरी resource के बीच संबंध दर्शाने के लिए प्रयोग होता है।
<meta>	किसी HTML document के बारे मे metadata के लिये प्रयोग होता है।
<script>	client-side script के लिये प्रयोग होता है। जैसे- javascript
<style>	किसी document की style information के लिये प्रयोग होता है। जैसे- CSS stylesheet

The <body> Element

इस Section में हम सामान्यतया Page पर दिखाई देने वाले Contents व उस Content को Structure करने वाले विभिन्न प्रकार के Elements को Use करते हैं।Web Page पर दिखाई देने वाला Actual Content <body> Element में Specify करना होता है, क्योंकि Web Browser के Page पर हमें जो भी Content दिखाई देता है, वह Content Web Page के <body> Section में ही लिखा जाता है।

किसी भी Page को अच्छा दिखाने के लिए हमें उस पर विभिन्न प्रकार Matters को विभिन्न प्रकार के Fonts, Colors आदि का प्रयोग करना होता है। किसी Web Page को अच्छा दिखाने के लिए हम उस Page के Contents को विभिन्न प्रकार से Format करते हैं। HTML भी हमें कई एसे Elements व Attributes प्रदान करता है, जिनका प्रयोग करके हम किसी Web Page को काफी Effective व Attractive बना सकते हैं। चलिए, एक और उदाहरण देखते हैं, जो हमारे Basic Concepts को और Clear करने में मदद करेगा।

<html>

<head>

<title>sample HTML </title>

</head>

<body bgcolor = ”#CC0000”>

<font face = “gorgia”>

<h1>HTML – Intro </h1>

</font>

<font face = “Arial” color = “#EFEFEF”>

<p>

</p>

</font>

</body>

</html>

इस उदाहरण वाले Web Page को Create करके Web Browser में Interpret करने पर हमारे सामने जो Page आता है, उसमें Heading 1 के Text वाली Line का Font Face Arial होता है तथा Body के Contents का Text भी Arial Font Face में दिखाई देता है। साथ ही Web Page का Background Color बदलकर अब थोडा Gray दिखाई देता है, साथ ही दिखाई देने वाला Content Paragraph Red Color में दिखाई देता है।

हालांकि ये Page भी कोई विशेष अच्छा दिखाई नहीं दे रहा है, लेकिन फिर भी हम इस Page द्वारा ये समझ सकते हैं, कि हम जिस तरह से चाहें, उस तरह से विभिन्न HTML Elements का प्रयोग करके Page के Structure को तय कर सकते हैं।

इस दूसरे उदाहरण में हम देख सकते हैं कि <font> Element के अन्दर face = “Arial” शब्द का प्रयोग किया है। इसी तरह से <body> Element के अन्दर bgcolor = “#RRGGBB” Color Code का प्रयोग किया है।

जब हम किसी Element के अन्दर उस Element में कुछ और विशेषताओं को जोडने के लिए किसी अन्‍य मान का प्रयोग करते हैं, तो इस Pair को Attribute = value Pair कहा जाता है।

Element के Attribute की Value Change करके हमने <body> में दिखाई देने वाले सारे Contents का Background Color Change कर दिया है। इसी तरह से <font> Element के face Attribute का मान Change करके हमने Web Browser में दिखाई देने वाले Font Face को Change कर दिया है।

विभिन्न प्रकार के Elements के साथ कई प्रकार के Attributes का प्रयोग किया जा सकता है और उन Elements के गुणों में विशेषता लाई जा सकती है। सभी Attributes हमेंशा Opening Tag में ही Specify किए जाते हैं। हर Attribute के हमेंशा Name व Value प्रकार के दो हिस्से होते हैं:

किसी Element में Name वह Attribute होता है, जिसे हम Set करना चाहते हैं। उदाहरण के लिए <font> Element का Face नाम का एक ऐसा Attribute है, जिसे Set करके हम Web Browser को बताते हैं कि हमें Heading 1 को किस तरह के Font Face के रूप में दिखाना है।

जबकि Value वह मन होता है, जिससे हम किसी Element के किसी Attribute को Set करते हैं। उदाहरण के लिए पिछले उदाहरण में हमने <body> के bgcolor Attribute को “#EFEFEF” मान से Set किया है, ताकि Body में लिखे जाने वाले सारे Contents का Background Color हल्‍का Gray रहे।

किसी भी Attribute को Set करते समय Specify की जाने वाली Value को हमेंशा Double Quote में Specify करना होता है। जैसे:

<font face = “Arial” color=”#CC0000”>

ESkool

Friday 28 March 2014