HTML के पहले कदम - HTML पाठ्यपुस्तक
HTML एक काफी सरल भाषा है — इसे तकनीकी और मानविकी दोनों विषयों के छात्र विश्वविद्यालयों में सीखते हैं, और आजकल तो मुझे लगता है कि इसे अधिकांश स्कूलों में भी पढ़ाया जाता है। सब कुछ सरल है क्योंकि HTML वास्तव में कोई प्रोग्रामिंग भाषा नहीं है।
HTML के पहले कदम - पाठ 1 - टैग h1-h6, p, strong
कैसे HTML दस्तावेज़ बनाए जाते हैं, इसके बारे में पढ़ें HTML – पहले कदम में।
पिछले पाठ में हमने अपना पहला HTML दस्तावेज़ बनाया था।
HTML के पहले कदम - पाठ 2 - टैग p, div और उनका अंतर। टैग br
पिछले पाठ में हमने अपना पहला HTML दस्तावेज़ बनाया था, यानी अब आप जानते हैं कि HTML कोड टेक्स्ट एडिटर में लिखा जाता है, और सभी बदलावों को ब्राउज़र में पेज रीफ्रेश (आमतौर पर F5 बटन से) करके देखा जाता है।
इस पाठ में हम टेक्स्ट के साथ काम जारी रखेंगे और टेक्स्ट को लपेटने के लिए span, p, div टैग्स का उपयोग करेंगे। साथ ही हम br टैग को भी समझेंगे।
HTML के पहले कदम – पाठ 3 – सूची टैग्स ul, ol. HTML टैग्स के गुण (Attributes)।
वेबसाइटों पर बहुत बार सूचियाँ (lists) उपयोग की जाती हैं: मेन्यू में, या किसी सूचीबद्ध जानकारी के लिए टेक्स्ट में। चलिए सबसे लोकप्रिय सूची प्रकार से शुरू करते हैं — असंख्या सूची <UL></UL> (unordered list — असंख्या सूची)।
UL सूची
UL सूची का उपयोग मेन्यू के लिए या बुलेट-पॉइंट वाली सूचियों के लिए किया जाता है, और HTML के माध्यम से आप बुलेट का प्रकार भी निर्धारित कर सकते हैं।
चलिए अपने HTML कोड में बदलाव करते हैं:
HTML के पहले कदम - पाठ 4 - लिंक (हाइपरलिंक)
हम अब HTML की सबसे मूलभूत चीज़ — यानी हाइपरलिंक्स (या सरल शब्दों में लिंक) — तक पहुँच गए हैं। लिंक विभिन्न दस्तावेज़ों के बीच संबंध स्थापित करने का एक तरीका हैं। मान लीजिए आपके पास 100000 टेक्स्ट फाइलें हैं। यदि आप उनके लिए श्रेणियाँ (categories) बनाएँ, और हर श्रेणी में 200 दस्तावेज़ हों, तो आपको लगभग 500 श्रेणियों की आवश्यकता होगी। इन 500 श्रेणियों को ब्राउज़ करने और आवश्यक जानकारी खोजने में बहुत समय लगेगा। ऐसे में लिंक हमारी ज़िंदगी को आसान बना देते हैं।
HTML के पहले कदम - पाठ 5 - सारणियाँ (टेबल्स)
जानकारी को संरक्षित करने के सबसे महत्वपूर्ण रूपों में से एक है सारणी (टेबल)। Excel, Access और अन्य डेटाबेस भी जानकारी को तालिकाओं के रूप में संग्रहीत करते हैं। टेबल डेटा को स्पष्ट रूप से प्रदर्शित करने का एक सुविधाजनक तरीका है — इनसे ग्राफ़ और चार्ट बनाना भी आसान होता है।
HTML के पहले कदम - पाठ 6 - चित्र
किसी वेबसाइट पर चित्र (images) एक बहुत ही महत्वपूर्ण तत्व होते हैं। उनके बिना वेबसाइट फीकी और नीरस लगती है। चित्रों का उपयोग वेबसाइट की सजावट, फोटो गैलरी, या सामान्य रूप से सामग्री को सुंदर बनाने के लिए किया जाता है।
चित्र जोड़ने के लिए IMG टैग का उपयोग किया जाता है (ध्यान दें, हम “image” पूरा शब्द नहीं लिखते, केवल img लिखते हैं)। IMG टैग एकल (single) टैग है — यानी यह जोड़े में नहीं आता: <img />.
HTML के पहले कदम - पाठ 7 - object टैग। YouTube से वीडियो सम्मिलित करना।
अक्सर हमें अपने ब्लॉग या वेबसाइट में YouTube से वीडियो एम्बेड करने की आवश्यकता होती है। इस पाठ में हम देखेंगे कि इसके लिए कौन से टैग और उनके गुण (attributes) उपयोग किए जाते हैं। सबसे पहले, चलिए YouTube पर चलते हैं और किसी वीडियो का कोड कॉपी करते हैं।
HTML के पहले कदम - पाठ 8 - टैग्स के सार्वभौमिक गुण
हम पहले ही बात कर चुके हैं कि अलग-अलग टैग्स के अपने-अपने गुण (attributes) होते हैं। अब यह जानने का समय है कि कुछ गुण ऐसे भी होते हैं जो लगभग सभी टैग्स के लिए समान होते हैं। आइए उनके सबसे लोकप्रिय उदाहरणों पर नज़र डालें।
HTML के पहले कदम - पाठ 9 - मेनू बनाना
वेबसाइट का मुख्य तत्व उसका मेनू (नेविगेशन) होता है। इसी के माध्यम से साइट के विभिन्न पन्नों के बीच नेविगेशन किया जाता है। साथ ही, मेनू सर्च इंजनों के लिए भी महत्वपूर्ण होता है — यदि पृष्ठों के बीच कोई लिंक नहीं हैं, तो खोज इंजन साइट के सभी पृष्ठों को इंडेक्स नहीं कर पाएगा। आइए देखें कि मेनू किससे बना होता है।