ब्लॉग १०५: HTML शिका मराठीतून - भाग २
HTML शिका मराठीतून - भाग २
HTML मधील टेक्स्ट फॉरमॅटिंग
रामराम मंडळी! मी कथावाचक, पुन्हा एकदा हजर आहे आपल्या वेब डेव्हलपमेंटच्या गप्पांचा दुसरा भाग घेऊन.
मागच्या भागात आपण पाहिलं की HTML म्हणजे काय. 'सौं'नी चहा दिला आणि मी तो घेता घेता विचार करत होतो की, नुसती हाडं असून काय कामाची? माणसाला जसा टापटीप पेहराव लागतो, बोलताना जसा चढाओढ किंवा मृदू सूर लागतो, तसंच आपल्या वेबसाईटवरच्या मजकुराचंही आहे.
समजा मी तुम्हाला चिठ्ठी लिहितोय आणि त्यात सगळं एकाच आकारात लिहिलं, तर तुम्हाला वाचताना कंटाळा येईल की नाही? पण जर मी त्यातल्या काही ओळी मोठ्या केल्या, काही शब्द ठळक केले, तर वाचायला मजा येते. यालाच तांत्रिक भाषेत म्हणतात 'टेक्स्ट फॉरमॅटिंग'.
१. हेडलाईन - घराचा 'कर्तव्यदक्ष' मोठा माणूस
आपल्या घरात जसे मोठे वडीलधारे लोक असतात, तसे HTML मध्ये 'हेडिंग' टॅग्स असतात. h1 पासून h6 पर्यंत यांचे सहा प्रकार आहेत.
* h1 म्हणजे घराचा आजोबा - सर्वात मोठा आणि महत्त्वाचा. एका पेजवर हा एकदाच असावा.
* h2 ते h6 म्हणजे मग घरातले इतर सदस्य. जशी संख्या वाढते, तसा अक्षरांचा आकार लहान होतो.
गुगलला जेव्हा तुमची वेबसाईट वाचायची असते, तेव्हा तो या हेडिंग्सकडे आधी बघतो. त्यामुळे यात महत्त्वाचे शब्द पेरायचे.
२. पॅराग्राफ - आपल्या मनातील 'हितगूज'
जेव्हा मला तुम्हाला एखादा किस्सा सांगायचा असतो, तेव्हा मी तो 'पॅराग्राफ' मध्ये लिहितो. त्यासाठी <p> हा टॅग वापरतात. हा टॅग वापरला की ब्राउझर समजतो की इथे एक नवीन ओळ सुरू करायची आहे.
३. ठळक आणि तिरकी अक्षरे - बोलण्यातील 'चिमटा'
कधी कधी आपण बोलताना एखाद्या शब्दावर खूप जोर देतो, जसं की "आज कारल्याची भाजी 'कडू' लागली नाही!" इथल्या कडू शब्दाला मला ठळक करायचं असेल तर मी <strong> किंवा <b> टॅग वापरेन.
तसंच, जर आपल्याला थोडं लाडात किंवा तिरकस बोलायचं असेल, तर मजकूर तिरका करण्यासाठी <em> किंवा <i> टॅग वापरतात.
४. ओळ बदलणे आणि रेघ ओढणे - थोडी 'विश्रांती'
कोडिंगमध्ये तुम्ही कितीही वेळा 'Enter' बटण दाबलं तरी ब्राउझरवर ओळ बदलत नाही. त्यासाठी आपल्याला
हा छोटा टॅग वापरावा लागतो. आणि जर दोन विषयांच्या मध्ये तुम्हाला एक आडवी रेघ ओढायची असेल, तर <hr> वापरा.
५. अंडरलाईन आणि इतर टॅग्स
अंडरलाईन (Underline): शब्दाच्या खाली रेघ मारण्यासाठी <u> टॅग वापरतात. (टीप: वेबसाईटवर अंडरलाईनचा वापर कमी करा, कारण लोकांना ती लिंक आहे असे वाटू शकते).
मार्क (Mark): एखाद्या शब्दाला हायलाईट (पिवळ्या रंगात) करण्यासाठी <mark> टॅग वापरतात.
स्मॉल (Small): मजकूर नेहमीपेक्षा थोड्या लहान आकारात दाखवण्यासाठी <small> टॅग वापरतात.
आजचा सराव कोड (तुमच्यासाठी खास नमुना):
<!DOCTYPE html>
<html>
<head>
<title>मजकुराची सजावट</title>
</head>
<body>
<h1><mark>पु.ल. देशपांडे - एक हरहुन्नरी माणूस</mark></h1>
<p>मराठी साहित्यात <strong><u>'भाईं'चं</u></strong> स्थान अढळ आहे.</p>
<hr>
<h2>त्यांच्या काही साहित्यकृती</h2>
<p>१. बटाट्याची चाळ <br> २. व्यक्ती आणि वल्ली <br> ३. हसवणूक</p>
<p><i><small>पुन्हा भेटेपर्यंत, हे कोड लिहून पहा!</small></i></p>
</body>
</html>
हा प्रोग्राम लिहून झाल्यावर कसा दिसेल हे पाहायचे आहे का? आपण जे करतोय त्याचा रिझल्ट कसा येतोय हे पाहिल्यावर तुम्हाला अजून चांगल्या प्रकारे समजेल त्यामुळे आजपासून ब्लॉगमध्ये प्रोग्रामचा रिझल्ट कसा दिसतोय याचे चित्र जोडणार आहे. मग कस वाटत आहे कोडिंगच्या नव्या दुनियेत?
आजचा सराव (Homework):
मंडळी, मघाशी लोळत असताना जसा मी विचार केला, तसाच तुम्हीही करा. स्वतःबद्दल ५ ओळी लिहा. त्यातलं तुमचं नाव 'h1' मध्ये द्या आणि तुमच्या आवडत्या पदार्थाला 'strong' करा. बघा बरं, कसं दिसतंय ते!
तुमच्या प्रतिक्रिया कमेंट्समध्ये नक्की द्या, कारण मला तुमच्या शब्दांची खूप ओढ असते.
परत भेटीपर्यंत... का रे दुरावा म्हणून नका तुमच्यासाठी काही पण म्हणत पुढची धडा घेऊन आलोच मी..
धन्यवाद.......
दोन्ही लेखात शिकलेले सगळे टॅग ची यादी खालील चित्रात दिली आहे. ही माहिती तुमच्या वहीत लिहून ठेवायला विसरू नका
टीप:
- <b> आणि <strong> हे दोन्ही टॅग वेगळे असले तरी त्याने शब्दाची, ओळीची जाडी Bold होते तसेच <i> आणि <em> हे टॅग शब्दाला, ओळीला Italic करतात. घरी पाहुणे आल्यावर आपले बोलणे आणि ते गेल्यावर आपले बोलणे यात जो फरक असतो तोच फरक ह्या दोन्ही टॅग मध्ये आहे.
- <br> आणि <hr> या दोन्ही टॅगला close करावे लागत नाही. <!DOCTYPE html> हा ब्राउसरला डॉक्युमेंटचा प्रकार सांगणारी घोषणा आहे. या तिन्ही टॅग यांना "empty tag" असे म्हणणारे जाते कारण त्यांना closing tag करण्याची गरज नसते.
"समजतंय ना सगळे? पालकांनो HTML शिकणे अवघड नाही. तुम्ही थोडा वेळ मुलांबरोबर काढा, मुलांबरोबर तुम्हाला देखील कोडिंग येणार हा माझा शब्द आहे."
#कोडिंगमराठी #मराठीब्लॉग #कथावाचक #तंत्रज्ञान #मराठीशिक्षण #HTML #LearnCoding #MarathiTutorial #CodingForBeginners #HTML5 #WebDesign #ProgrammingInMarathi
टिप्पण्या
टिप्पणी पोस्ट करा