पिछले पाठ में हमने एचटीएमएल का एक प्रारूप देखा । यहाँ पर उस प्रारूप की व्याख्या की जायेगी । इस अध्याय को लिखते समय हम यह मानकर चल रहे हैं कि वेबडिजाइनिंग सीखने की इच्छा रखने वाले को सामान्य कम्प्यूटर ज्ञान जैसे कि कम्प्यूटर की कोई फाइल या फोल्डर खोलना, बन्द करना, किसी प्रोग्राम को खोलना, नया फोल्डर बनाना, किसी फाइल को खोलना, उसपर काम करना, उसे सेव करना तथा डिलीट करना आदि ।
इसलिये हम इन सभी बातों को बताने की अपेक्षा सीधे एचटीएमएल की तरफ चलते हैं ।
एचटीएमएल का फुलफार्म -
HTML = Hyper Text Markup Language
एचटीएमएल संरचना -
पिछले पाठ में हमने निम्न कोडिंग का प्रयोग किया था ।
<!DOCTYPE HTML>
<html>
<head>
<title>My First Html Page</title>
</head>
<body>
Hello World
</body>
</html>
अब इस कोडिंग की पूरी व्याख्या यहाँ प्रस्तुत की जा रही है ताकि आप एचटीएमएल को पूरी तरह समझ सकें । यह ध्यान रखें कि एचटीएमएल वेबपेज बनाने का सर्वप्रथम सोपान है, बिना इसके सीखे आप वेबपेज नही बना सकते हैं ।
<!DOCTYPE HTML>
यह कोड एचटीएमएल 5 का संकेत देता है । आज हम वेबपेज के जिस दौर में हैं शुरुआत ऐसी बिलकुल नहीं थी । एचटीएमएल का शुरुआती स्वरूप बडा ही जटिल था । जिस वेबब्राउजर पर आप यह वेबपेज खोलते हैं उस ब्राउजर को यह समझाना पडता था कि यह एचटीएमएल का कौन सा वर्जन है । उसके लिये बहुत लम्बा सा परिचयकोड लिखना पडता था (उदा - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> )
किन्तु एचटीएमएल 5 में अब मात्र <!DOCTYPE HTML> ही लिखना पर्याप्त है । इतना ही लिखने मात्र से वेबब्राउजर समझ जाता है कि यह पृष्ठ एचटीएमएल 5 पर आधारित है । इसका प्रयोग अपने प्रत्येक पेज में अनिवार्यत: किया जाना चाहिये ।
<html></html>
यह एचटीएमएल पेज बनाने के लिये सर्वप्रथम कोड है । पहला <html> ओपिनिंग (शुरुआती) कोड है तथा दूसरा </html> क्लोजिंग (अंतिम) कोड है । इसका मतलब कि आपका पूरा पेज, तथा सारी कोडिंग इन्ही दो टैग के बीच में लिखी जाती है । शुरुआती कोड में स्लैश ( / ) नहीं रहता । किन्तु अंतिम टैग में इसका होना महत्वपूर्ण है । यदि कभी गलती से आपने स्लैश ( / ) को ओपिनिंग टैग में रख दिया तो आपका कोड एरर (गडबडी) दिखाने लग जायेगी ।
एचटीएमएल विभाग -
एचटीएमएल पृष्ठ के अन्तर्गत दो मुख्य विभाग होते हैं
1- हेड सेक्सन (शीर्ष विभाग)
2- बॉडी सेक्सन (शेष शरीर)
1- हेड सेक्सन (शीर्ष विभाग) -
हेड सेक्सन को ओपिनिंग एचटीएमएल कोड के तुरंत बाद में लिखा जाता है । इस कोड के अन्तर्गत लिखी जाने वाली चीजें पेज पर नहीं दिखाई देती हैं । यह आन्तरिक और प्राय: गोपनीय रूप से आपके पृष्ठ को सपोर्ट करती हैं । इस सेक्सन को भी ठीक एचटीएमएल की भॉंति ही लिखा जाता है । इसमें भी एक ओपिनिंग टैग <head> तथा एक क्लोजिंग टैग </head> होता है जिसके बीच में इस सेक्सन के कोड डाले जाते हैं ।
इस सेक्सन में पेज का टाइटिल (जो कि ब्राउजर के टाइटिल बार में दिखता है), मेटा टैग, डिस्क्रिप्शन, अन्य स्क्रिप्ट, तथा पेज का स्टाइल कोड आदि रहता है । इसकी विस्तृत चर्चा हम आगे करेंगे ।
इस तरह अबतक पेज की संरचना कुछ इस तरह दिखेगी ।
<!DOCTYPE HTML>
<html>
<head>
यहाँ एचटीएमएल हेड सेक्सन के कोड लिखे जाते हैं ।
</head>
</html>
टाइटिल -
एचटीएमएल हेड टैग के अन्तर्गत पेज का टाइटिल एक अत्यन्त महत्वपूर्ण विषय है । इसका लिखा जाना अनिवार्य नहीं है किन्तु इसके न लिखने से पेज का टाइटिलबार सूना रहेगा । और प्राय: कई टैब ब्राउजर में एकसाथ खुले होने पर यह जानना मुश्किल हो जायेगा कि हम किस पेज पर काम करना चाहते हैं ।
टाइटिल टैग को हेड दोनो हेड टैग के अन्तर्गत लिखा जाता है, सबसे पहले आेपिनिंग टाइटिलटैग लिखने के बाद उसके अन्तर्गत अपने पेज का संक्षिप्त शीर्षक लिखते हैं फिर टाइटिल टैग को बंद कर देते हैं ।
उदा. - <title>My First Html Page</title>
बॉडी (शरीर विभाग) सेक्सन -
यह सेक्सन ही वास्तविकता में आपका वेबपेज है । हम जो कुछ भी वेबपृष्ठ पर देखते हैं वो सब बाडी सेक्सन में ही लिखा जाता है । इस सेक्सन में हम विभिन्न प्रकार की चीजें डाल सकते हैं । इस पर डाली हुई हर चीज आपको आपके पेज पर दिखाई देती है । इसका प्रारम्भ क्लोजिंग हेड टैग के ठीक बाद किया जाता है । इसका भी तरीका बिल्कुल वही है । सबसे पहले ओपिनिंग बॉडी टैग <body> लिखने के बाद पेज पर इच्छित वस्तुओं की कोडिंग की जाती है । इसके बाद बॉडी टैग को बंद </body> किया जाता है । और फिर एचटीएमएल टैग को बंद </html> कर दिया जाता है ।
इस तरह से आपके पूरे पेज की आंतरिक संरचना कुछ इस तरह दिखाई देती है -
<!DOCTYPE HTML>
<html>
<head>
<title>My First Html Page</title>
</head>
<body>
Hello World
</body>
</html>
आशा है आपको यह संरचना समझ में आ गई होगी । आगे के अध्याय में हम अलग-अलग हेड सेक्सन व बॉडी सेक्सन को समझेंगे तथा एचटीएमएल पेज से हम और क्या कर सकते हैं यह देखेंगे ।
यह पाठ आपको कैसा लगा यह जरूर बताइयेगा । आपको क्या समझ में नहीं आया यह भी जरूर बताइयेगा । इससे लेख की गुडवत्ता और सरलता बढाने में अधिक सहायता प्राप्त होगी ।
धन्यवाद
धन्यवाद श्रीमान जी आप जैसे लोगो को बदौलत ही हम ऐसी लैंग्वेज अच्छे से समझ और सीख सकते हैं।
ReplyDeleteआप और भी लैंग्वेज भी इस प्रकार सिखाइये सर जी।
आपका बहुत बहुत आभार
Thank you sir
ReplyDeleteAapka bahut bahut sukriya sir.. Aapne ye blog tayiyar karje hamare liye bahut bada yogdaan diya hai
ReplyDeleteVeri nice mujhe html bilkul bhi sumjh ni aata pr ab aa rha h
ReplyDeletePractical aaj nahi to kal
ReplyDeleteThanks sir ki aap vajah se ham hindi mai html sikh pa rahe hai. English aati nahi. Thanks
ReplyDeleteWeb Designers in India
ReplyDeleteweb designing in mumbai
website designers in mumbai
web designers in mumbai
web design company in mumbai
web designing companies in mumbai
website design
Web Design in Thane
website development
Website Development in mumbai
web services company in mumbai