ब्लॉग ११३: HTML शिका मराठीतून - भाग ३
HTML शिका मराठीतून - भाग ३:
माहितीची सुटसुटीत मांडणी आणि 'लिस्ट' (Lists) चे प्रकार
रामराम मंडळी! मी कथावाचक.
मागील भागात आपण मजकूर सजवायला शिकलो, पण नुसता सजवलेला मजकूर जर विखुरलेला असेल, तर तो वाचायला कठीण जातो. आज सकाळी 'सौं'नी मला किराणा मालाची एक मोठी यादी दिली. ती यादी पाहिल्यावर मला आठवलं की, आपण आपल्या वेबसाईटवर सुद्धा अशीच माहितीची सुटसुटीत मांडणी करण्यासाठी 'लिस्ट' (Lists) वापरू शकतो.
जेव्हा आपण माहिती मुद्द्यांच्या स्वरूपात मांडतो, तेव्हा ती वाचायला सोपी आणि समजायला सुटसुटीत वाटते. HTML मध्ये अशा लिस्टचे मुख्य तीन प्रकार आहेत. चला तर मग, या 'माहितीच्या शिदोरी'चे पदर उलगडून पाहूया.
१. अनऑर्डर लिस्ट (Unordered List - <ul>)
जिथे मुद्द्यांचा कोणताही विशिष्ट क्रम महत्त्वाचा नसतो, तिथे आपण ही लिस्ट वापरतो. यालाच आपण 'बुलेट पॉइंट्स' (Bullet Points) म्हणतो. जशी माझी किराणा मालाची यादी - आधी साबण आणला काय किंवा साखर आणली काय, काही फरक पडत नाही.
* यासाठी <ul> (Unordered List) हा मुख्य टॅग वापरला जातो.
* त्यातल्या प्रत्येक ओळीसाठी <li> (List Item) हा टॅग वापरतात.
२. ऑर्डर लिस्ट (Ordered List - <ol>)
जिथे क्रम किंवा नंबरिंग खूप महत्त्वाचे असते, तिथे ही लिस्ट वापरतात. जसं की चहा बनवण्याच्या पायऱ्या. आधी पाणी उकळावं लागेल, मगच चहापूड टाकावी लागेल. आधी चहापूड आणि नंतर पाणी उकळलं तर चवीचं काही खरं नाही!
* यासाठी <ol> (Ordered List) हा टॅग वापरतात.
* ब्राउझर याला आपोआप १, २, ३ असे नंबर लावतो.
तुम्ही type ॲट्रिब्युट वापरून रोमन नंबर्स (i, ii) किंवा अक्षरे (A, B, C) देखील देऊ शकता. उदा. <ol type="A">.
हे ॲट्रिब्युट्स मुख्यत्वे <ol> (Ordered List) टॅगमध्ये वापरले जातात जेणेकरून आपण लिस्टचे स्वरूप बदलू शकू:
type : नंबरिंगचे स्वरूप ठरवण्यासाठी.
type="१" : १, २, ३ (डिफॉल्ट)
type="A" : A, B, C (मोठी अक्षरे)
type="a" : a, b, c (लहान अक्षरे)
type="I" : I, II, III (मोठे रोमन अंक)
type="i" : i, ii, iii (लहान रोमन अंक)
start : नंबरिंग कोणत्या आकड्यापासून सुरू करायचे हे ठरवण्यासाठी.
उदाहरण: <ol start="5"> लिहिल्यास लिस्ट ५ व्या नंबरपासून सुरू होईल.
लक्षात ठेवा: <ul> आणि <ol> हे 'कंटेनर' टॅग्स आहेत, म्हणजे त्यांच्या आत <li> टॅग असणे अनिवार्य आहे, तरच माहिती स्क्रीनवर व्यवस्थित दिसेल.
३. डिस्क्रिप्शन लिस्ट (Description List - <dl>)
ही लिस्ट इतर दोन लिस्टपेक्षा थोडी वेगळी आणि अतिशय उपयोगाची आहे. जेव्हा आपल्याला एखादा शब्द आणि त्याचा अर्थ (Dictionary प्रमाणे) किंवा एखादा विषय आणि त्याचे स्पष्टीकरण मांडायचे असते, तेव्हा याचा वापर होतो.
यात तीन महत्त्वाचे टॅग्स असतात:
* <dl> (Description List): मुख्य लिस्ट सुरू करण्यासाठी.
* <dt> (Description Term): ज्या शब्दाचे स्पष्टीकरण द्यायचे आहे तो शब्द (उदा. HTML).
* <dd> (Description Definition): त्या शब्दाचे सविस्तर स्पष्टीकरण.
४. नेस्टेड लिस्ट (Nested List) - लिस्टमध्ये लिस्ट
कधीकधी एका मुद्द्याच्या आत उप-मुद्दे द्यावे लागतात. जसं की 'फळे' या मुद्द्याखाली 'आंबा, चिकू' अशी नावे. यालाच 'नेस्टेड लिस्ट' म्हणतात. हे करण्यासाठी आपण एका <li> च्या आत पुन्हा दुसरी <ul> किंवा <ol> लिस्ट सुरू करू शकतो. वेबसाईटचा मेनू बनवण्यासाठी ही पद्धत खूप वापरली जाते.
आजचा सराव कोड
खालील कोड तुमच्या टेक्स्ट एडिटरमध्ये टाईप करून पहा:
<!DOCTYPE html>
<html>
<head>
<title>माझी प्रगत लिस्ट</title>
</head>
<body>
<h1>माझ्या आवडत्या गोष्टी</h1>
<h2>१. आवडते लेखक (Unordered List)</h2>
<ul>
<li>पु. ल. देशपांडे</li>
<li>व. पु. काळे</li>
<li>द. मा. मिरासदार</li>
<li>कथावाचक</li>
</ul>
<hr>
<h2>२. सकाळची दिनचर्या (Ordered List)</h2>
<ol>
<li>लवकर उठणे.</li>
<li>विठ्ठलाचे नामस्मरण करणे.</li>
<li>वाचनाचा आनंद घेणे.</li>
</ol>
<hr>
<h2>३. तांत्रिक संज्ञा (Description List)</h2>
<dl>
<dt>HTML</dt>
<dd>ही वेबसाईटचा सांगाडा बनवण्यासाठी वापरली जाणारी भाषा आहे.</dd>
<dt>Browser</dt>
<dd>हे एक सॉफ्टवेअर आहे ज्यावर आपण वेबसाईट्स पाहतो (उदा. Chrome).</dd>
</dl>
</body>
</html>
मंडळी, आज थोडा जास्त सराव करूया:
१. तुमच्या घरच्या 'चिमुकल्या पाखरांना' विचारा की त्यांना फिरायला कुठल्या ५ गावी जायला आवडेल? त्यांची एक Unordered List तयार करा.
२. तुमच्या आवडीच्या कोणत्याही ३ कठीण शब्दांचे अर्थ सांगणारी Description List तयार करा.
३. जर तुम्हाला नंबरिंग '५' पासून सुरू करायचे असेल, तर <ol start="5"> वापरून पहा बरं काय होतंय!
तुमच्या प्रतिक्रिया आणि शंका मला कमेंट्समध्ये नक्की कळवा.
मला कल्पना आहे की आजचा हा भाग थोडा किचकट वाटू शकतो पण जसे जसे आपण पुढे शिकत जाणार तसे तसे अभ्यास कठीण होणारच. थोडी जरी भीती वाटली तर घाबरून जाऊ नका. आधीच्या दोन प्रकरणाचा अधिक अभ्यास करा आणि नंतर हे प्रकरण समजून घ्या. जोपर्यत आधी शिकवलेले सगळे समजत नाही तोपर्यंत पुढे धावू नका अन्यथा घाईच्या कामात दिरंगाई होईल. जितकी जास्त घाई कराल तितके समजून घ्यायला अवघड जाईल. प्रत्येकाची समजून घेण्याची शक्ती वेगळी त्यामुळे प्रत्येकाला लागणारा वेळ वेगळा. ह्या अडचणीवर मात करायची असेल तर एकमेव पर्याय सराव करत रहा. नित्य सरावाने अवघड गोष्टीदेखील सोप्या होतात.
आता आजच्या प्रकरणात शिकलेले सगळे टॅग आणि ॲट्रिब्युट याची एकत्र माहिती वहीत लिहून ठेवा
परत भेटीपर्यंत... छोटीशी विश्रांती!
#HTMLशिकामराठीतून
#कथावाचक
टिप्पण्या
टिप्पणी पोस्ट करा