HTML In Hindi

at 09:27

HTML


इस एचटीएमएल ट्यूटोरियल (HTML Tutorial) में बताया जायेगा कि अपने वेबसाइट के निर्माण के लिये एचटीएमएल का प्रयोग कैसे किया जाता है।

आपको यह जान कर प्रसन्नता होगी कि एचटीएमएल सीखना बहुत आसान है।

विश्वास कीजिये कि एचटीएमएल सीखने में आपको बहुत आनन्द आयेगा।
यह तो आप जानते ही हैं कि HTML एक 'प्रोग्रामिंग लेंग्वेज' है और इसका प्रयोग 'वेब पेज' बनाने के लिये किया जाता है। हमें पूर्ण विश्वास है कि आप इस ट्यूटोरियल को पढ़ कर अवश्य ही HTML सीख जायेंगे और कुछ ही दिनों में अपना वेब पेज बना रहे होंगे। हमारा आपसे अनुरोध है कि इस ट्यूटोरियल को किसी उपन्यास या कहानी के जैसे एक बार में न पढ़ें बल्कि रोज घंटे-आधा घंटे का समय इसे पढ़ने के लिये दें और पढ़ने के बाद इसका मनन-चिंतन करके रोज HTML का अभ्यास भी करें

 तैयारियाँ
HTML बहुत ही सरल भाषा है। इसे शुरू करने के लिये सिर्फ आपको एक सामान्य'टैक्स्ट एडीटर' (Text Editor) की ही आवश्यकता होगी। 'नोटपैड' (Notepad> एक उत्तम टैक्स्ट एडीटर है और आसानी से आप सभी के पास मुफ्त में उपलब्ध भी है। बस आप इसी से अपना अभ्यास शुरू करें।

आप अपना हिन्दी का वेब पेज अवश्य ही बनाना चाहेंगे किन्तु फिलहाल आप अंग्रेजी के ही टैक्स्ट से अभ्यास शुरू करें क्योंकि हिंदी वेब पेज बनाने के लिये आपको'यूनीकोड फांट' (Unicode Font) की आवश्यकता पड़ेगी जिसका अभ्यास आप बाद में कर सकते हैं



एचटीएमएल की पृष्ठभूमि (HTML Background)

HTML कोई बहुत पुरानी भाषा नहीं है इस भाषा का पहला वेब पेज नवम्बर 1990 में बना। फिर 'वर्ल्ड वाइड वेब कॉन्सोर्टियम' (World Wide Web Consortium)नामक एक समूह की स्थापना हुई जो कि HTML के मानकों को तय करती है।

वेब पेजेस

वेब पेजेस बहुत ही उपयोगी होते हैं। नीचे वेब पेजेस की कुछ महत्वपूर्ण उपयोगिताएँ दी जा रही हैं:
  • वेब पेजेस आपकी जानकारी को बहुत ही कम खर्च में अधिक से अधिक लोगों तक पहुँचा देते हैं।
  • वेब पेजेस उद्योग और व्यापार के लिये अति उत्तम साधन हैं।
  • वेब पेजेस के द्वारा ही संसार के लोग आपके व्यक्तिगत वेबसाइट को जानने लगते हैं।

HTML के आवश्यक शब्द

  • टैग (Tag) - टैग का प्रयोग ब्राउसर्स को HTML डाकुमेंट्स को समझाने के लिये किया जाता है यह इस प्रकार दिखाई देता है: <tag>
  • अवयव (Element) - एक टैग से शुरू हो कर दूसरे टैग में बंद होने वाले टैक्स्ट को अवयव कहा जाता है।
  • एट्रीब्यूट (Attribute) - एट्रीब्यूट का प्रयोग अवयव के रूप में परिवर्तन करने के लिये किया जाता है। प्रायः अवयवों में एक से अधिक एट्रीब्यूट्स का प्रयोग होता है।
हो सकता है कि ये परिभाषाएँ शुरू शुरू में समझने में कुछ कठिन लगें किन्तु बाद में अभ्यास करते करते ये आपको बहुत आसान लगने लगेंगी।




एचटीएमएल (HTML File) क्या होता है?

  • एचटीएमएल (HTML) Hyper Text Markup Language का संक्षिप्त रूप है।
  • एचटीएमएल फाइल छोटे चिह्नों से जुड़ा (small markup tags) टैक्स्ट फाइल होता है।
  • ये छोटे चिह्न ही ब्राउसर को बताते हैं कि पृष्ठ को कैसे दर्शाना है।
  • एचटीएमएल फाइल्स का एक्स्टेंशन नाम htm या html ही होना चाहिये
  • एचटीएमएल फाइल को साधारण टैक्स्ट एडीटर (simple text editor) की सहायता से बड़ी आसानी के साथ बनाया जा सकता है।

करके देखें!

यदि आप विन्डोज चलाते हैं तो नोटपैड (Notepad) खोल लें
और यदि आप मैक चलाते हैं तो सिम्पलटैक्स्ट (SimpleText) शुरू करें।
उसमें निम्न टैक्स्ट टाइप करें:
<html>
<head>
<title>पृष्ठ का शीर्षक</title>
</head>
<body>
यह मेरा पहला मुखपृष्ठ है।<b>मेरे मुखपृष्ठ में आपका स्वागत है!</b>
</body>
</html>
अब इस फाइल को "myfirstpage.htm".  नाम से सुरक्षित (save) कर लें।
अब अपने इंटरनेट ब्राउसर (Internet browser) को खोल कर मेनूबार में फाइल|ओपन (File|Open) का चयन करें और नये खुलने वाले डॉयलाग बॉक्स में ब्राउस को क्लिक कर के अपने द्वारा बनाये गये एचटीएमएल फाइल को खोल लें।

आप अपने द्वारा बनाये गये एचटीएमएल फाइल को इंटरनेट ब्राउसर में खुला हुआ देखकर आश्चर्यमिश्रित प्रसन्नता से झूम उठेंगे।

व्याख्या

आपका पहला चिह्न (tag) अर्थात् <html> ब्राउसर को बताता है कि यह एचटीएमएल डाकुमेंट का आरम्भ है। इसी प्रकार आपका आखरी टैग </html> ब्राउसर को पता चल जाता है कि यहाँ पर एचटीएमएल डाकुमेंट समाप्त हो गया।
<head> तथा </head> टैग्स के बीच का टैक्स्ट हेडर की जानकारी होती है जो कि ब्राउसर विन्डो में दिखाई नहीं पड़ती।
<title> टैग्स के बीच के शब्द शीर्षक के रूप में ब्राउसर के शीर्षक पट्टी (browser's caption) दिखाई पड़ती है।
<body> टैग्स के बीच का टैक्स्ट आपके ब्राउसर में दिखता है।
<b> और </b> टैग्स के बीच के शब्द बोल्ड फॉर्मेटिंग में दिखते हैं।

एचटीएमएल एडीटर्स (HTML Editors):

WYSIWYG (what you see is what you get अर्थात् जैसा आप देखते हैं वैसा ही पाते हैं) एडीटर जैसे कि फ्रंटपेज या ड्रीमवेव्हर का प्रयोग करके आप एचटीएमएल फाइल्स का संपादन बहुत आसानी के साथ कर सकते हैं। इन एडीटर्स के प्रयोग में आपको एचटीएमएल कोड्स लिखने की आवश्यकता नहीं पड़ती, कोड्स को एडीटर स्वयं ही लगा लेता है।
किन्तु एक अच्छा वेब डेव्हलपर बनने के लिये नोटपैड पर ही कोडिंग करना अधिक उचित है। यद्यपि इससे आपको अधिक टाइप करना पड़ता है और आपका अतिरिक्त समय भी खर्च होता है पर एचटीएमएल के सारे कोड्स आपको अच्छी तरह से याद हो जाते हैं।

अक्सर पूछे जाने वाले प्रश्न

प्रश्न: अपने एचटीएमएल फाइल का संपादन करने के बाद मैं उसे ब्राउसर पर देख नहीं पा रहा हूँ। क्या कारण हो सकता है?

उत्तर: सुनिश्चित करें कि आपने अपने फाइल को सही एक्स्टेंशन नाम देकर सुरक्षित किया है जैसे कि c:\myfirstpage.htm"। यह भी सुनिश्चित करें कि ब्राउसर में फाइल खोलते समय आपने सही फाइल नाम का ही प्रयोग किया है।
प्रश्न: एचटीएमएल फाइल का संपादन करने के बाद भी ब्राउसर में देखने पर उसमें परिवर्तन नहीं दिखाई पड़ रहे हैं। क्या कारण हो सकता है?

उत्तर: ब्राउसर एक बार में केवल एक ही पृष्ठ को दिखा सकता है और आपका पुराना पृष्ठ खुले रहने के कारण उसे पता ही नहीं चला होगा कि पृष्ठ में कुछ संपादन हुआ है। जब भी आप अपने एचटीएमएल फाइल में परिवर्तन करते हैं, ब्राउसर को रिफ्रेश/रिलोड करना न भूले, जिससे के पुराना पृष्ठ बंद होकर नया पृष्ठ खुल जाये।
प्रश्न: मुझे किस ब्राउसर का प्रयोग करना चाहिये?

उत्तर: आप इंटरनेट एक्प्लोरर, फायरफॉक्स, नेटस्केप, आपेरा जैसे किसी भी ज्ञात ब्राउसर का प्रयोग कर सकते हैं। पर याद रखें कि आपको जहाँ तक हो सके उनके नवीनतम वर्सन का ही प्रयोग करना है ताकि ऐसे फाइल्स भी खुल सकें जो कि पुराने वर्सन में नहीं खुल पाते थे।



एचटीएमएल फाइल एचटीएमएल अवयव से बने टैक्स्ट फाइल होते हैं।
पहले से ही परिभाषित (defined) एचटीएमएल टैग्स को एचटीएमएल अवयव कहा जाता है।

एचटीएमएल टैग्स (HTML Tags)

  • एचटीएमएल टैग्स को एचटीएमएल अवयव (elements) बनाने के लिये प्रयोग किया जाता है।
  • एचटीएमएल टैग्स हमेशा < और > चिह्नों के बीच घिरे होते हैं।
  • घेरे वाले इन चिह्नों को कोण कोष्ठक (angle brackets) कहा जाता है।
  • एचटीएमएल टैग्स का प्रयोग सामान्यतः जोड़ी में किया जाता है, जैसे कि <b> और </b>
  • जोड़ी का पहला टैग आरम्भ टैग (start tag) और दूसरा टैग समाप्ति टैग (end tag) कहलाता है।
  • आरम्भ टैग और समाप्ति टैग के बी लिखे जाने वाली सामग्री को अवयव सामग्री (element content) कहते हैं।
  • एचटीएमएल टैग्स को अंग्रेजी के छोट या बड़े किसी भी अक्षर में लिखने से कुछ फर्क नहीं पड़ता अर्थात् <b> को <B> भी लिखा जा सकता है।

पिछले पाठ के एचटीएमएल फाइल को याद करें:
<html>
<head>
<title>पृष्ठ का शीर्षक</title>
</head>
<body>
यह मेरा पहला मुखपृष्ठ है। <b>मेरे मुखपृष्ठ में आपका स्वागत है!</b>
</body>
</html>
उपरोक्त फाइल में नीचे दिया गया उदाहरण एक एचटीएमएल अवयव है:
<b>मेरे मुखपृष्ठ में आपका स्वागत है!</b>
एचटीएमएल टैग आरम्भ टैग (start tag): <b> से शुरू होता है
मेरे मुखपृष्ठ में आपका स्वागत है! एचटीएमएल अवयव की सामग्री (content) है।
एचटीएमएल टैग समाप्ति टैग (end tag): </b> से समाप्त होता है
<b> टैग एचटीएमएल अवयव को बताता है कि इसे बोल्ड फॉर्मेट में होना चहिये।
निम्न उदाहरण भी एक एचटीएमएल अवयव है:
<body>
यह मेरा पहला मुखपृष्ठ है। <b>मेरे मुखपृष्ठ में आपका स्वागत है!</b>
</body>
इस एचटीएमएल अवयव का आरम्भ टैग <body>, और समाप्ति टैग </body> है।
<body> टैग का उद्देश्य एचटीएमएल अवयव को यह परिभाषित करना है कि उसके भीतर एचटीएमएल डाकुमेंट की पूर्ण सामग्री है।

हम अंग्रेजी छोटे अक्षरों वाले टैग का ही प्रयोग क्यों करते हैं?

यद्यपि <B> और <b> का मतलब एक ही होता है किन्तु हम अंग्रेजी छोटे अक्षरों वाले टैग का ही प्रयोग करते हैं, क्या कारण है?
कारण यह है कि यदि हमें वेब के नवीनतम मानकों को मानना है तो अंग्रेजी के छोटे अक्षरों वाले टैग का ही प्रयोग करना चाहिये। World Wide Web Consortium (W3C) के HTML 4 संस्तुति में अंग्रेजी के छोटे अक्षरों वाले टैग्स की अनुशंसा की गई है।

टैग विशेषताएँ (Tag Attributes)

टैग की विशेषताएँ भी हो सकती हैं जो कि एचटीएमएल अवयव को अतिरिक्त जानकारी देती हैं।

<table> टैग को border="0"> जोड़ कर <table border="0"> लिखने से एचचटीएमएल अवयव को यह अतिरिक्त जानकारी मिलती है कि टेबल में बॉर्डर नहीं देना है।
विशेषताएँ हमेशा name/value की जोड़ी में होती हैं, जैसे कि: name="value".
विशेषताओं को हमेशा एचटीएमएल अवयव के आरम्भ टैग के साथ जोड़ा जाता है


एचटीएमएल - उपयोगी तत्व (HTML - Useful Elements)


महत्वपूर्ण

किसी भी वेब पेज के लिये html, head, title, and body तत्व (elements) आवश्यक होते हैं।

<html> तत्व (Element)...</html>

प्रत्येक वेब पेज के सारे HTML कोड्स <html> और </html> तत्वों (elements) के बीच ही लिखे जाते हैं अर्थात् प्रत्येक HTML डाकुमेंट <html> से शुरू होता है और </html> में जाकर समाप्त होता है।

तो फटाफट खोल ले नोटपैड (Notepad) को और उसमें निम्नलिखित कोड्स टाइप करें:
उसमें निम्न टैक्स्ट टाइप करें:
<html>
</html>
अब सेव्ह मेनू का चयन करके 'सेव्ह ऐज' (Save As) डॉयलाग बॉक्स में "Save as Type" ड्रॉप डाउन मेनू में "All Files" को चुनकर अपने इस फाइल को "index.html" के नाम से सुरक्षित कर लें।
एचटीएमएल सीखें!
अब यदि आप अपने बनाये इस फाइल (index.htm) को ब्राउसर में खोलेंगे तो आपको एक बिल्कुल कोरा वेब पेज नजर आयेगा! और इस प्रकार से आपके वेब पेज बनाने का अभ्यास शुरू हो गया।

<head> तत्व (Element)

इसके बाद <head> तत्व (element) का क्रम आता है जो कि <html> टैग और आपके वेब पेज की सामग्री (web page content) के बीच में आता है। <html> और </html> के बीच में लिखे गये कोड्स वेब पेज में नजर नहीं आता बल्कि ये भीतर ही भीतर बहुत महत्वपूर्ण कार्यों को अंजाम देते हैं।
तो अब आप अपने 'index.htm' फाइल को निम्नानुसार आगे बढ़ाये:
<html>
<head>
</head>
</html>

<title> तत्व (Element)

अब आप अपने <head> तत्वों के बीच में <title> टैग (tag) डालिये। आप <title></title> टैग्स के बीच जो कुछ भी लिखेंगे वह ब्राउसर के सबसे ऊपरी हिस्से में शीर्षक के रूप में दिखाई देगा।:
<html> 
<head>
<title>मेरा वेब पेज! (My WebPage!)</title>
</head>
</html>
फाइल को पुनः सुरक्षित करें। अब इसे ब्राउसर में देखने पर आपको उसके ऊपरी हिस्से में "मेरा वेब पेज! (My WebPage!)" लिखा नजर आयेगा।
मेरा वेब पेज के स्थान पर आप अपने पसंद का अच्छा सा शीर्षक (Title) दे सकते हैं।

<body> तत्व (Element)

आपके वेब पेज की सारी सामग्री (जिसमें पैराग्राफ, चित्र, टेबल इत्यादि हो सकते हैं) <body> तत्व (element) के अन्दर ही रहती है। तो  फिलहाल सीखने के लिये अपने डॉकुमेंट में एक छोटी सी सामग्री डालिये:
<html> 
<head>
<title>मेरा वेब पेज! (My WebPage!)</title>
</head>
<body>
आपकी सारी सामग्री यहाँ होगी।
</body>
</html>
फाइल को सुरक्षक्षित कर के अब इस ब्राउसर में देखें!



मूलभूत एचटीएमएल टैग्स (Basic HTML Tags)


शीर्षक (headings), पैराग्राफ (paragraphs) और पंक्ति बदलने (line breaks) को परिभाषित करने वाले एचटीएमएल टैग्स बहुत अधिक महत्व रखते हैं।

एचटीएमएल सीखने का सबसे अच्छा तरीका है उदाहरणों को देख देख कर वैसे ही एचटीएमएल फाइल्स बनाना। आप जितना अधिक अभ्यास करेंगे, एचटीएमएल में उतने ही पारंगत होते जायेंगे।

शीर्षक (Headings)

शीर्षकों को <h1> टैग से लेकर <h6> टैग तक परिभाषित किया गया है। <h1> का प्रयोग दीर्घ शीर्षकों के लिये और <h6> का प्रयोग लघु शीर्षकों के लिये किया जाता है। नीचे शीर्षक टैग्स के उदाहरण दिये जा रहे हैं:
<h1>यह प्रथम वर्ग का (दीर्घ) शीर्षक है।</h1>
<h2>यह द्वितीय वर्ग का शीर्षक है।</h2>
<h3>यह तृतीय वर्ग का शीर्षक है।</h3>
<h4>यह चतुर्थ वर्ग का शीर्षक है।</h4>
<h5>यह पंचम वर्ग का शीर्षक है।</h5>
<h6>यह षष्ठम वर्ग का (लघु) शीर्षक है।</h6>
उपरोक्त एचटीएमएल शीर्षक टैग्स ब्राउसर में नीचे दर्शाये अनुसार दिखेंगे:

यह प्रथम वर्ग का (दीर्घ)
शीर्षक है।



यह द्वितीय वर्ग का शीर्षक है।



यह तृतीय वर्ग का शीर्षक है।



यह चतुर्थ वर्ग का शीर्षक है।



यह पंचम वर्ग का शीर्षक है।



यह षष्ठम वर्ग का (लघु) शीर्षक है।
शीर्षक के नीचे एचटीएमएल स्वतः ही एक पंक्ति खाली छोड़ देता है इसलिये शीर्षक के बाद पंक्ति छोड़ने के लिये एचटीएमएल टैग लगाने की आवश्यकता नहीं होती।

पैराग्राफ (Paragraphs)

पैराग्राफ को <p> टैग के द्वारा परिभाषित किया जाता है।
<p>यह प्रथम पैराग्राफ है।</p>
<p>यह द्वितीय पैराग्राफ है।</p>
शीर्षक के जैसे ही पैराग्राफ के नीचे भी एचटीएमएल स्वतः ही एक पंक्ति खाली छोड़ देता है।

पंक्ति बदलना (Line Breaks)

पंक्ति बदलने के लिये <br> टैग का प्रयोग किया जाता है, इस टैग के प्रयोग से एक खाली पंक्ति बन जाती है। यदि हमें दो खाली पंक्तियाँ छोड़नी हों तो हम दो बार इस टैग ( <br><br>) का प्रयोग करेंगे।
<p>यह एक <br> पंक्ति छोड़ छोड़ कर<br>लिखा गया पैराग्राफ है।</p>
<br> टैग के लिये समाप्ति टैग की आवश्यकता नहीं होती अर्थात यह टैग जोड़ी में नहीं होता।

एचटीएमएल में टिप्पणी लिखना (Comments in HTML)

अपने सोर्स कोड को समझाने के लिये कई बार हमें अपने एचटीएमएल में टिप्पणी लिखने पड़ती है। चूँकि ये टिप्पणियाँ केवल कोड को समझने या समझाने के लिये होती हैं, इन्हें ब्राउसर में नहीं दर्शाया जा सकता। एचटीएमएल डाकुमेंट में टिप्पणी लिखने की विधि निम्नानुसार है:
<!-- यह एक टिप्पणी है। -->
ध्यान रखें कि टिप्पणी लिखने के लिये पहले कोण कोष्ठक चिह्न के बाद एक बार विस्मायदिबोधक चिह्न लगाना पड़ता है किन्तु अंतिम कोण कोष्ठक चिह्न के पहले विस्मयादिबोधक चिह्न नहीं लगाया जाता।

मूलभूत एचटीएमएल टैग्स (Basic HTML Tags)

टैगविवरण
<html>एचटीएमएल डाकुमेंट को परिभाषित करता है।
<body>डाकुमेंट के मुख्य भाग (body) को परिभाषित करता है।
<h1> to <h6>छः प्रकार के शीर्षकों को परिभाषित करता है।
<p>पैराग्राफ को परिभाषित करता है।
<br>खाली पंक्ति छोड़ता है।
<hr>आड़ी लाइन बनाता है।
<!-->टिप्पणी को परिभाषित करता है।

एचटीएमएल टैक्स्ट फॉर्मेटिंग (HTML Text Formating)


एचटीएमएल में बोल्ड, इटैलिक्स जैसी सभी प्रकार के टैक्स्ट फॉर्मेटिंग की सुविधाएँ उपलब्ध है।

किसी वेब पेज के एचटीएमएल सोर्स को देखना

जब आप किसी वेब पेज को देखते होंगे तो अवश्य ही सोचते होंगे कि "आखिर इसे बनाया कैसे गया होगा!"
तो इसे जानने के लिये आप अपने ब्राउसर के मेनमीनू में व्हियु|सोर्स (View|Source) का चयन करें। इससे एक नई विन्डो खुल जायेगी जिसमें उस वेब पेज के सारे एचटीएमएल कोड आपको नजर आयेंगे।
टैक्स्ट फॉर्मेटिंग टैग्स (Text Formatting Tags)
टैग
(Tag)		विवरण
Description
<b>बोल्ड टैक्स्ट को परिभाषित करता है।
<big>बड़े टैक्स्ट को परिभाषित करता है।
<em>दीर्घ (emphasized) टैक्स्ट को परिभाषित करता है। 
<i>इटैलिक टैक्स्ट को परिभाषित करता है।
<small>छोटे टैक्स्ट को परिभाषित करता है।
<strong>प्रभावशाली (strong) टैक्स्ट को परिभाषित करता है।
<<sub>सबस्कृप्ट टैक्स्ट को परिभाषित करता है।
<sup>सुपरस्कृप्ट टैक्स्ट को परिभाषित करता है।
<ins>इन्सर्टेड टैक्स्ट को परिभाषित करता है।
<del>मिटाये गये टैक्स्ट को परिभाषित करता है।

"कम्प्यूटर आउटपुट टैग्स (Computer Output" Tags)

TagDescription
<code>कम्प्यूटर कोड टैक्स्ट को परिभाषित करता है।
<kbd>कीबोर्ड टैक्स्ट को परिभाषित करता है।
<samp>सैम्पल कम्प्यूटर कोड टैक्स्ट को परिभाषित करता है।
<tt>टेलीटाइप टैक्स्ट को परिभाषित करता है।
<var>व्हेरियेबल को परिभाषित करता है।
<pre>प्रीफॉर्मेटेड टैक्स्ट को परिभाषित करता है।

उद्धरण, प्रसंग और परिभाषा टैग्स (Citations, Quotations, and Definition Tags)

TagDescription
<abbr>संक्षिप्त रूप (abbreviation) को परिभाषित करता है।
<acronym>एक्रोनिम को परिभाषित करता है।
<address>पता अवयव (address element) को परिभाषित करता है।
<bdo>टैक्स्ट की दिशा को परिभाषित करता है।
<blockquote>बड़े संदर्भित चिह्न (long quotation) को परिभाषित करता है।
<q>छोटे संदर्भित चिह्न (short quotation) को परिभाषित करता है।
<cite>उद्धरण (citation) को परिभाषित करता है।
<dfn>परिभाषित शब्दों को परिभाषित करता है।


एचटीएमएल के अस्तित्व वाले चिह्न (HTML Character Entities)





< जैसे कुछ चिह्नों (character) का एचटीएमएल विशेष प्रयोग होते हैं इसलिये इनका प्रयोग टैक्स्ट के रूप में नहीं किया जा सकता।

(<) जैसे इन चिह्नों को ब्राउसर में दर्शाने के लिये एचटीएमएल के अस्तित्व वाले चिह्नों (HTML Character Entities) का प्रयोग किया जाता है।

अस्तित्व वाले चिह्न (Character Entities)

कुछ चिह्नों (character) का एचटीएमएल में विशेष प्रयोग होते हैं जैसे कि (<) एचटीएमएल टैग के आरम्भ को परिभाषित करता है। इन चिह्नों को ब्राउसर में दर्शाने के लिये एचटीएमएल सोर्स में अस्तित्व वाले चिह्नों (Character Entities) का प्रयोग किया जाता है।

अस्तित्व वाले चिह्नों के तीन भाग होते हैं - पहला एक एम्परसैंड (&), दूसरा एक अस्तित्व नाम (entity name) या # का चिह्न और तीसरा एक अस्तित्व संख्या (entity number) और अंत में अल्पविराम (;) का चिह्न।
से कम (less than) के चिह्न को दर्शाने के लिये हमें अपने कोड में &lt; या&#60; लिखना पड़ता है।
अस्तित्व संख्या के स्थान पर अस्तित्व नाम लिखने में लाभ यह है कि नाम को याद रखना अपेक्षाकृत सरल होता है किन्तु इसमें दोष यह है कि नवीनतम अस्तित्व नामों का बहुत से ब्राउसर्स में कई बार प्रदर्शन नहीं हो पाता जबकि अस्तित्व संख्या को सभी अच्छे ब्राउसर्स प्रदर्शित करते हैं।
टीप ये अस्तित्व वाले चिह्न केस सेंसेटिव्ह होते हैं अर्थात् अंग्रेजी के बड़े अक्षरों वाले तथा छोटे अक्षरों वाले चिह्नों को अलग-अलग याद रखना पड़ता है।

दो शब्दों मध्य रिक्त स्थान (Non-breaking Space)

एचटीएमएल में कोडिंग करते समय दो शब्दों के बीच चाहे कितने भी रिक्त स्थान क्यों न छोड़े जायें, एचटीएमएल उसे केवल एक ही रिक्त स्थान मान के चलता है। अतः अधिक रिक्त स्थान देने के लिये &nbsp; अस्तित्व चिह्न का प्रयोग करना पड़ता है।

अक्सर प्रयोग किये जाने वाले अस्तित्व चिह्न (The Most Common Character Entities):

परिणाम
Result		विवरण
Description		अस्तित्व नाम
Entity Name		अस्तित्व संख्या
Entity Number
शब्दों के मध्य रिक्त स्थान देना&nbsp;&#160;
<से कम (less than) का चिह्न&lt;&#60;
>से अधिक (greater than) का चिह्न&gt;&#62;
&एम्परसैंड (ampersand)&amp;&#38;
"संदर्भ चिह्न (quotation mark)&quot;&#34;
'अपॉस्टॉफी (apostrophe )&apos; (इंटरनेट एक्सप्लोरर में काम नहीं करता)&#39;
कुछ और उपयोगी अस्तित्व चिह्न (Some Other Commonly Used Character Entities):
परिणाम
Result		विवरण
Description		अस्तित्व नाम
Entity Name		अस्तित्व संख्या
Entity Number
�सेंट (cent)&cent;&#162;
£पाउंड (pound;)&pound;&#163;
¥येन (yen)&yen;&#165;
�सेक्शन (section)&sect;&#167;
©कॉपीराइट (copyright)&copy;&#169;
®रजिस्टर्ड ट्रेडमार्क (registered trademark)&reg;&#174;
�गुणा का चिह्न&times;&#215;
�भाग का चिह्न&divide;&#247;




एंकर टैग तथा Href एट्रिब्यूट (The Anchor Tag and the Href Attribute)

एचटीएमएल में लिंक बनाने के लिये <a> (एंकर) टैग का प्रयोग किया जाता है।

किसी एंकर की सहायता से किसी भी वेब रिसोर्स जैसे कि एचटीएमएल पेज, इमेज, साउंड फाइल, मूव्ही फाइल आदि तक सीधे जाया जा सकता है।
एंकर बनाने के लिये सिंटेक्स (syntax) निम्नानुसार होता है:
<a href="url">लिंक दर्शाने वाला टैक्स्ट</a>
किसी डाकुमेंट का लिंक करने के लिये एंकर बनाने हेतु <a> टैग तथा डाकुमेंट के url से लिंक दर्शाने वाले टैक्स्ट को जोड़ने के लिये href एट्रिब्यूट का प्रयोग किया जाता है।
निम्न एंकर 'हिंदी वेबसाइट!' के लिंक को परिभाषित करता है:
<a href="http://www.agoodplace4all.com/">हिंदी वेबसाइट!</a>
उपरोक्त लाइन ब्राउसर में निम्नानुसार दिखाई पड़ेगा:
हिंदी वेबसाइट!

टारगेट एट्रिब्यूट (The Target Attribute)

टारगेट एट्रिब्यूट के जरिये परिभाषित किया जा सकता है कि लिंक किया गया डाकुमेंट कहाँ खुलेगा।
नीचे दिया गया लाइन डाकुमेंट को एक नये ब्राउसर में खोलेगा:
<a href="http://www.agoodplace4all.com/"
target="_blank">हिंदी वेबसाइट!</a>

एंकर टैग तथा नेम एट्रिब्यूट (The Anchor Tag and the Name Attribute)

नेम एंकर की सहायता से बिना स्क्रोल किये किसी वेब पेज के विशेष सेक्शन में पहुँचा जा सकता है। नेम एंकर बनाने के लिये नेम एट्रिब्यूट का प्रयोग किया जाता है।
नीचे नेम एंकर के लिये सिंटेक्स दिया जा रहा है:
<a name="label">दर्शाये जाने वाला टैक्स्ट</a>
उपरोक्त में "label" वह टैक्स्ट होता है जिस तक बिना स्क्रोल किये जाना होता है।
नीचे की लाइन एक नेम एंकर को परिभाषित करती है:
<a name="tips">उपयोगी टिप्स</a>
&टिप्सquot;tips" सेक्शन से सीधे जोड़ने के लिये # चिह्न लगाकर सम्बन्धित URL से जोड़ा जाता है, जैसे:
<a href="http://www.agoodplace4all.com/html_links.asp#टिप्स">
टिप्स सेक्शन में जायें</a>




एचटीएमएल फ्रेम्स (HTML Frames)

फ्रेम्स की सहायता से एक ही ब्राउसर विन्डो में एक से अधिक वेबपेज अथवा डाकुमेंट्स को दिखाया जा सकता है। प्रत्येक डाकुमेंट एक फ्रेम कहलाता है और अन्य डाकुमेंट से अलग रहता है। फ्रेम्स में सबसे बड़ा दोष यह है कि पूरे पेज की छपाई करना मुश्किल हो जाता है।

फ्रेमसेट टैग (Frameset Tag)

  • <frameset> टैग परिभाषित करता है कि ब्राउसर विन्डो को कैसे फ्रेम्स में विभाजित किया जावे।
  • प्रत्येक फ्रेमसेट किसी रो या कॉलम को दर्शाता है।
  • एक रो या कॉलम स्क्रीन में कितना स्थान घेरेगा यह रो या कॉलम के मान के द्वारा निश्चित होता है।
नीचे एक फ्रेमसेट का उदाहरण दिया जा रहा है जिसमें पहला कॉलम का ब्राउसर स्क्रीन में क्षेत्र 25% है तथा दूसरा कॉलम स्क्रीन के 75% हिस्से को घेरेगा दोनों फ्रेम में क्रमशः "frame_a.htm" और "frame_b.htm" डाकुमेंटस रखे जायेंगे।:
<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>
टिप्पणी: रो/कॉलम के साइज को प्रतिशत के स्थान पर पिक्सल्स में भी रखा जा सकता है, उस स्थिति में (cols="200,500"), लिखा जायेगा।

उपयोगी टिप्पणियाँ (Useful Tips)

यदि फ्रेम में दिखाई देने वाले बॉर्डर्स होने पर कोई भी यूजर उसके आकार को बदल सकता है। इसे रोकने के लिये <frame> टैग के साथ noresize="noresize" जोड़ा जाता है।
जो ब्राउसर फ्रेम्स को सपोर्ट नहीं करते उनके लिये <noframes> टैग जोड़ा जाता है।
महत्वपूर्ण: <frameset></frameset> टैग्स के साथ <body></body> टैग्स नहीं जोड़े जा सकते





(Page under construction)







Labels: