ब्लॉग १०२: HTML शिका मराठीतून - भाग १

-
लेखक: कथावाचक


रामराम मंडळी!

कसं चाललंय सगळं? मघाशी गादीवर लोळत मोबाईलमध्ये 'रील्स' पाहत होतो. एक-एक व्हिडिओ सरकवत असताना अचानक डोक्यात विचार आला, "अरे, हे जे काही आपण मोबाईलच्या पडद्यावर पाहतोय, हे बनतं कसं?" गुगल असो किंवा फेसबुक, या वेबसाईट्सचा एखादा सांगाडा तर असेलच ना?
तसं पाहायला गेलं तर, आपण आपल्या आयुष्यात अनेक गोष्टींचा सांगाडा आधी तयार करतो. मग ते घर बांधताना विटा-सिमेंटचं स्ट्रक्चर असो किंवा संसाराचा गाडा हाकताना केलेली पैशांची जमवाजमव. वेबसाईट्सच्या दुनियेतही तसंच आहे. तिथे जो सर्वात पहिला आणि महत्त्वाचा सांगाडा असतो, त्याला म्हणतात HTML. 

ब्लॉग १: HTML शिका मराठीतून ...

HTML म्हणजे काय? वेबसाईटच्या जगातील 'पायाभरणी'


HTML याचा शोध १९९१ मध्ये 'टिम बर्नर्स-ली' (Tim Berners-Lee) यांनी लावला. त्यांचा उद्देश संशोधकांना माहिती शेअर करण्यासाठी एक सोपी पद्धत उपलब्ध करून देणे हा होता. आज आपण HTML चे पाचवे व्हर्जन म्हणजेच 'HTML5' वापरत आहोत, जे अत्यंत प्रगत आणि युजर-फ्रेंडली आहे.

HTML म्हणजे नक्की काय रे भाऊ?


आता तांत्रिक भाषेत सांगायचं तर याचा मोठा फुल फॉर्म आहे HyperText Markup Language. पण आपण साध्या माणसांनी इतक्या जड शब्दात कशाला पडायचं? सोप्या भाषेत सांगतो, जसा आपल्या शरीराचा हाडांचा सांगाडा असतो, तसंच वेबसाईटचं हाड म्हणजे 'HTML'. त्यावर मग आपण नंतर CSS चा 'रंग' लावतो आणि JavaScript ची 'बुद्धी' देतो. पण जोवर हाडांचा सांगाडा मजबूत नाही, तोवर शरीर कसं उभं राहणार?

मला कशाची गरज लागेल?


आता हे शिकायला काय खूप मोठी पदवी लागते की काय? तर मुळीच नाही! माझ्यासारखा एखादा माणूस, जो ऑफिसात जाऊन मिळणाऱ्या फावल्या वेळात बसून काहीतरी लिहायचा छंद जोपासतो, तो सुद्धा हे सहज करू शकतो. तुम्हाला फक्त दोन गोष्टी लागतील:
१. Text Editor: जसं आपण कागदावर लिहितो, तसं कॉम्प्युटरवर कोड लिहिण्यासाठी एक जागा. सुरुवातीला 'Notepad' सुद्धा चालेल, पण जर तुम्हाला प्रोफेशनल व्हायचं असेल तर 'VS Code' वापरा.
२. Web Browser: जो आपला कोड वाचून आपल्याला वेबसाईट दाखवेल. (Google Chrome किंवा Firefox).

चला, पहिला श्रीगणेशा करूया!

स्वयंपाकघरातून 'सौं'नी चहाची हाक मारण्यापूर्वी आपण एक छोटासा कोड लिहून पाहूया. खालील ओळी नीट बघा:

<!DOCTYPE html>
<html>
<head>
    <title>माझं पहिलं वेबपेज</title>
</head>
<body>
    <h1>रामराम मंडळी!</h1>
    <p>मी आज माझी पहिली वेबसाईट बनवली आहे.</p>
</body>
</html>

या कोडचा 'पंचनामा' :

आजच्या ह्या पहिल्या प्रोग्राममध्ये समजून घ्यायच्या मुख्य बाबी खालीलप्रमाणे आहे, प्रोग्राममधील इतर अधिक असलेले टॅग (title, h1, p) पुढे शिकवल्या जाणार आहेत. कोणताही HTML प्रोग्राम लिहण्यासाठी खालील महत्वाच्या टॅगची गरज असते. प्रोग्राम लिहायला बसल्यावर खालील गोष्टी मस्ट. याखेरीज प्रोग्राम लिहायला चालूच होत नाही.आता एकच टॅग दोन वेगवेगळ्या पद्धतीने प्रोग्राममध्ये लिहिलेला दिसेल. सुरुवातीला लिहिलेला ओपनिंग टॅग तर प्रोग्राम शेवटी / करून टॅग लिहला आहे ते क्लोसिंग टॅग आहे.
 
<!DOCTYPE html>: हे ब्राउझरला सांगतं की, "बाबा रे, हा नवीन काळातला HTML5 कोड आहे, नीट वाच!"
<html>: हा म्हणजे आपल्या वेबसाईटचा 'बाप' टॅग. याच्या आतच सगळं विश्व सामावलेलं असतं.
 <head>: याला आपण वेबसाईटचा 'मेंदू' म्हणूया. यात फक्त टायटल आणि गुगलसाठी लागणारी माहिती असते, जी पेजवर दिसत नाही.
 <body>: हे मात्र सर्वात महत्त्वाचं! जसा आपला देह असतो, तसं वेबसाईटवर जे काही दिसतं (फोटो, मजकूर), ते सगळं या टॅगच्या पोटात असतं.

माझं प्रामाणिक मत:

कोडिंग करणं हे एखादी गोष्ट लिहिण्यासारखंच आहे. सुरुवातीला थोडं अवघड वाटेल, जसं पु.ल. वाचताना पहिल्यांदा त्यांतील विनोदाचे पदर पटकन उमजत नाहीत, पण एकदा सवय झाली की मग त्यातला आनंद वेगळाच असतो.

आजचा सराव (Homework):

आता वेळ घालवू नका. मोबाईल बाजूला ठेवा आणि तुमच्या लॅपटॉपवर नोटपॅड उघडा. वर दिलेला कोड टाईप करा आणि फाईल index.html या नावाने सेव्ह करा. मग ती ब्राउझरमध्ये उघडून बघा. जर तुम्हाला तुमच्या स्क्रीनवर "रामराम मंडळी!" दिसलं, तर समजा तुम्ही वेब डेव्हलपर होण्याच्या मार्गावर पहिलं पाऊल टाकलंय! पण इथेच थांबू नका हाताला आणि मेंदूला प्रोग्राम लिहायचा सराव व्हावा म्हणून एक प्रोग्राम करून थांबू नका. सराव करत रहा. तसही ही केवळ सुरुवात आहे पण पुढे प्रोग्रामिंग अवघड होत राहणार आहे. जितका सराव कराल तितके प्रोग्रामिंग सोप्पे होईल.

जे पालक हा लेख वाचत आहे त्यांना सांगावे वाटते की तुम्ही हे स्वतः एकदा करा आणि मुलांना अडचण आली तर त्यांना मदत करा. घरात घेतलेला कॉम्प्युटर केवळ गेम खेळण्यासाठी नाही असे मुलांना समजून द्या. आज केवळ सुरुवात पण ही लेख मालिका संपेपर्यंत तुम्ही पालक आणि तुमचे पाल्य तंत्रज्ञानाच्या दुनियेत संकेतस्थळाची ढाचा बनवायला शिकणार आहे. ही शैक्षणिक ब्लॉग मालिका दर आठवड्याला दोन प्रकरण तुमच्यासमोर आणणार आहे. पुढचा लेख आता बुधवारी कारण हे सगळे अचूक लिहिणे, मांडणे हे सोपे नाही. दिलेली वेळ पाळण्याचा पूर्ण प्रयत्न करणार आहे पण कामामुळे थोडे मागे पुढे झाले तर राग ठेवू नका. तुम्हाला देखील सरावासाठी वेळ हवाच. फायदा होणार त्या लोकांचा जे संपूर्ण कथा मालिका झाल्यावर येतील कारण त्यांना सगळ स्टडी मटेरियल एकाच वेळी मिळणार आहे. असो...

आजचा हा पहिला भाग तुम्हाला कसा वाटला? तुमच्या प्रतिक्रिया खाली कमेंट्समध्ये नक्की द्या. कारण तुमची दाद हीच माझ्या लेखनासाठी खरी 'सुवर्णसंधी' असते.

मित्रांनो, HTML ही वेब विश्वाची जननी आहे. आज आपण फक्त सुरुवात केली आहे. पुढच्या भागात आपण पाहणार आहोत की अक्षरांना बोल्ड, इटॅलिक कसे करायचे आणि लिस्ट कशी बनवायची.
तुम्हाला हा पहिला भाग कसा वाटला? काही शंका असल्यास कमेंट्समध्ये नक्की विचारा.

#HTMLमराठी 
#कोडिंगशिका 
#वेबडेव्हलपमेंट 
#मराठीब्लॉग 
#कथावाचक 
#तंत्रज्ञान 
#ComputerEducationMarathi 
#LearnHTML #CodingForKids

टिप्पण्या

टिप्पणी पोस्ट करा

या ब्लॉगवरील लोकप्रिय पोस्ट

छत्रपती

-
इमेज
राजा शिवाजी चित्रपटाचा टिझर पहिला आणि त्यातील कलाकाराचा जथ्था पाहून थक्क झालो. बॉलिवूडमधील एक काळ गाजवलेले अनेक प्रतिष्ठित,प्रसिद्ध कलाकार रितेश देशमुख याच्या मैत्रीच्या जोरावर चित्रपटात गर्दी केली आहे हे दिसते.चित्रपट चांगला असावा अशी माझी खूप इच्छा आहे पण सध्यातरी दिसताना तो भव्यदिव्य वाटला नाही किंवा चित्रण मनाला भावले नाही. सगळ्यात महत्वाचे म्हणजे रितेशमध्ये शिवरायाचे ते रूप मला दिसले नाही. महाराष्ट्रातील जनतेचे मत माझ्या मतांच्या विरुद्ध असण्याची शक्यता नाकारता येत नसली तरी मला छत्रपती शिवाजी महाराज रितेशच्या रुपात दिसले नाही कदाचित रितेशने वाढवलेली दाढी आणि केसात जनमानसात, बिगबॉस कार्यक्रमात हजेरी लावून लोकांना ते रूप खूप सोप्या पद्धतीने दाखवत राहिल्याने चित्रपटातील त्या रूपाची उत्कंठता कमी झाली असावी. छत्रपती शिवाजी महाराज हा महाराष्ट्राच्या नाही तर अखंड हिंदुस्थानचे अस्मितेचे प्रतीक आहे. महाराष्ट्रच नाही तर अखंड हिंदुस्थान आणि हिंदुस्थानातील प्रत्येक हिंदूच्या मनातील दैव समान दैवत आहे.  "शिवाजी न होते तो सुन्नत होती सबकी, राखी हिंदुवानी, हिंदुवानको तिलक राख्यौ...
Read more »

तिरुपती बालाजी: जगातील सर्वात श्रीमंत देवाच्या संपत्तीचे 'हे' आहे रहस्य!

-
इमेज
लेखक : कथावाचक  तिरुपती बालाजी: जगातील सर्वात श्रीमंत देवाच्या संपत्तीचे 'हे' आहे रहस्य! नमस्कार मंडळी, आज पुन्हा एकदा एक 'सनातन' कथा घेऊन तुमच्यासमोर उपस्थित झालो आहे. 'PK' नावाचा तो चित्रपट तुम्ही पाहिला असेलच. हिंदू देव-देवता आणि रूढी-परंपरांचा अपमान करून लोकांना हसवण्याचा प्रयत्न त्यात झाला. एका प्रसंगात तो दगडाला भगवा रंग लावून देव असल्याचा बनाव करतो आणि परीक्षार्थी मुले तिथे पैसे टाकून डोकं टेकवतात. हा प्रसंग पाहताना हसू येत असलं, तरी तो एक प्रकारे 'वास्तवदर्शी' वाटतो. हो, मी वास्तवदर्शीच म्हणेन; कारण आजचा मूर्ख हिंदू समाज कोणतीही माहिती न घेता, अज्ञानापोटी कोणत्याही पाषाणावर डोकं ठेवतो. भोंदू, स्वयंघोषित 'बुवा-बापू' यांच्या दावणीला स्वतःला बांधून घेतो, ही वस्तुस्थिती आहे. सध्या चर्चेत असलेला 'खरात बुवा' यांसारखे प्रकार याच गोष्टीला पाठबळ देतात. हिंदूंनी आता तरी सजग आणि डोळस होणं किती गरजेचं आहे, हे यातून स्पष्ट होतं. आज मी एका अशा देवस्थानाबद्दल बोलणार आहे, जिथे लाखो हिंदू जातात, केस दान करतात, दागदागिने अर्पण करतात; पण...
Read more »

मुक्त विद्यालय (Open School)

-
इमेज
लेखक: कथावाचक 'गुरुदेवो भव' मानल्या जाणाऱ्या या देशात आज शिक्षणाचे धिंडवडे निघताना दिसत आहेत. शाळा ही आता विद्येचे मंदिर न राहता एकतर नफेखोरीचे केंद्र झाली आहे किंवा वेळकाढूपणाचे ठिकाण. आजच्या शिक्षण पद्धतीवर आणि ढासळत्या गुणवत्तेवर नजर टाकली तर एक भीषण वास्तव समोर येते आपण सुशिक्षित बेरोजगार तयार करणारी एक अजस्त्र फॅक्टरी चालवत आहोत. केवळ 'पगारदार' झालेले शिक्षक, खाजगी शिक्षणाचा बाजार सर्वात मोठे दुर्दैव म्हणजे शिक्षकी पेशातील वाढलेली अनास्था. पूर्वी शिक्षक हा विद्यार्थ्याचा मार्गदर्शक आणि आदर्श असायचा. आज अनेक ठिकाणी चित्र वेगळे आहे. सरकारी शाळांमधील पगाराचे आकडे लाखांच्या घरात गेले आहेत, पण त्या तुलनेत विद्यार्थ्यांची गुणवत्ता मात्र शून्यावर आली आहे. अनेक शिक्षकांसाठी ही केवळ एक 'सुरक्षित नोकरी' बनली आहे. १० ते ५ ची वेळ पाळायची, हजेरी पटावर स्वाक्षरी करायची आणि महिन्याच्या शेवटी खात्यात जमा होणाऱ्या पगाराची वाट पाहायची, इतकाच त्यांचा शिक्षणाशी संबंध उरला आहे. मुलांना काय समजतेय, त्यांची प्रगती होतेय का, याच्याशी या 'पगारदार' शिक्षकांना देण...
Read more »