Skip to main content

चला जुजबी एचटीएमएल शिकुया

लेखक श्रीरंग_जोशी यांनी बुधवार, 27/05/2015 06:23 या दिवशी प्रकाशित केले.

इंद्रधनुष्यरंग

इंद्रधनुष्यरंग

इंद्रधनुष्यरंग

इंद्रधनुष्यरंग

इंद्रधनुष्यरंग

इंद्रधनुष्यरंग

इंद्रधनुष्यरंग

इंद्रधनुष्यरंग

इंद्रधनुष्यरंग

इंद्रधनुष्यरंग

इंद्रधनुष्यरंग

इंद्रधनुष्यरंग

इंद्रधनुष्यरंग


नमस्कार मंडळी, बऱ्याच वर्षांपूर्वी कॉलेजमध्ये असताना मी एचटीएमएल शिकलो. कामाच्या ठिकाणी कधी याचा उपयोग करावा लागला नसला तरी मिपावर याचा थोडाफार उपयोग लेख व प्रतिसाद प्रकाशित करताना करत असतो. मिपाचा टेक्स्ट इडिटींग टूलबार आपल्याला बरेच पर्याय उपलब्ध करून देतो. तसेच त्यातले कुठलेही बटन क्लिक केल्यास संबंधीत फॉरमॅटींगसाठी वापरले जाणारे एचटीएमएल कोड आपल्याला दिसू शकते. या कोडमध्ये काही किंचितसे बदल केल्यास आपण आपल्या लेखाच्या व प्रतिसादाच्या सादरीकरणाला अधिक आकर्षक बनवू शकतो. त्याखेरीज काही साधे एचटीएमएल कोड वापरून आपण मजकुराला अधिक फॉरमॅट करू शकतो जे या टेक्स्ट एडिटर टूलबारच्या मदतीने करणे शक्य नाही.
फॉन्ट साइझ व फॉन्ट कलर हे अक्षर निळ्या रंगात आहे. यासाठी खालील एचटीएमएल कोडचा वापर केला आहे. <font color = "blue">हे अक्षर निळ्या रंगात आहे. </font>
हा फॉन्ट साइझ ७ आहे. हा फॉन्ट साइझ १ आहे. यासाठी खालील एचटीएमएल कोडचा वापर केला आहे. <font size = "7">हा फॉन्ट साइझ ७ आहे. </font> <font size = "1">हा फॉन्ट साइझ १ आहे. </font>
चित्र लहान मोठे करणे व दुवा नव्या टॅबमध्ये उघडेल याची व्यवस्था करणे या फोटोची रुंदी बदललेली नाही ग्यानबा तुकाराम या फोटोची रुंदी मूळ प्रतिमेपेक्षा २०% अधिक आहे. लांबी-रुंदीचे गुणोत्तर आपोआप सांभाळले गेले आहे. ग्यानबा तुकाराम या फोटोची रुंदी मूळ प्रतिमेपेक्षा २०% कमी आहे. लांबी-रुंदीचे गुणोत्तर आपोआप सांभाळले गेले आहे. तसेच या चित्रावर क्लिक केल्यास त्याची मूळ प्रतिमा नव्या टॅबमध्ये उघडते. ग्यानबा तुकाराम वरील तीन प्रयोग करण्यासाठी वापरलेले कोड. प्रत्यक्ष फरक करणारे कोड लाल रंगात लिहिले आहे. <img src="https://lh5.googleusercontent.com/-VyQ1kX91n0w/UcNDXvSz1NI/AAAAAAAAEyg/…" alt="ग्यानबा तुकाराम" /> <img src="https://lh5.googleusercontent.com/-VyQ1kX91n0w/UcNDXvSz1NI/AAAAAAAAEyg/…" width="301"alt="ग्यानबा तुकाराम" /> <a target = "_blank" href="https://lh5.googleusercontent.com/-VyQ1kX91n0w/UcNDXvSz1NI/AAAAAAAAEyg/…"><img src="https://lh5.googleusercontent.com/-VyQ1kX91n0w/UcNDXvSz1NI/AAAAAAAAEyg/…" width="201" alt="ग्यानबा तुकाराम" /></a> इथे width थेट एककात लिहिण्याऐवजी 120% व 80% अशी टक्क्यांमध्येही लिहिता आली असती.
अनऑर्डर्ड लिस्टची बुलेटींग स्टाइल बदलणे
  • नवे लेखन
  • माझे लेखन
  • वाचनखुणा
यासाठी वापरलेले कोड खालीलप्रमाणे <ul type = "square"> <li>नवे लेखन</li> <li>माझे लेखन</li> <li>वाचनखुणा</li> </ul>
  • नवे लेखन
  • माझे लेखन
  • वाचनखुणा
यासाठी वापरलेले कोड खालीलप्रमाणे <ul type = "circle"> <li>नवे लेखन</li> <li>माझे लेखन</li> <li>वाचनखुणा</li> </ul>
अलाइनमेंटची दिशा बदलणे लेफ्ट अलाइनमेंट

सेन्टर अलाइनमेंट

राइट अलाइनमेंट

यासाठी वापरलेले कोड खालीलप्रमाणे लेफ्ट अलाइनमेंट <p align = "center"> सेन्टर अलाइनमेंट </p> <p align = "right"> राइट अलाइनमेंट </p>
ही सर्व एचटीएमएलच्या मूलभूत वापराची उदाहरणे आहेत. यापासून सुरुवात करून तुम्ही स्वतःच पुढे शिकू शकता. इतर कशापेक्षाही एचटीएमएल शिकणे सोपे आहे कारण कुठल्याही वेबपेजचे एचटीएमएल कोड आपण ब्राउझरचा View source पर्याय वापरून बघू शकतो. याखेरीज एचटीएमएल शिकण्यासाठी मला सर्वाधिक आवडणारी वेबसाइट म्हणजे w3schools.com. एचटीएमएलचे प्रयोग करताना तुम्ही पूर्वपरिक्षणाद्वारे खात्री करू शकता की तुम्हाला हवा तो इफेक्ट मिळतोय की नाही. मिपावर लेख व मूळ प्रतिसादात चित्राची कमाल रुंदी ६४० असू द्या. उप-प्रतिसाद असल्यास ६४० पेक्षाही कमी ठेवा. असे न केल्यास ते चित्र उजवीकडच्या दुव्यांवर अतिक्रमण करते. या धाग्यात मी सुचवलेले पर्याय वापरून तुम्ही स्पेशल इफेक्ट असलेल्या प्रतिक्रिया देऊ शकता. त्याखेरीज स्वतः वेगळे काहीतरी करून बघू शकता. हे करताना काही प्रश्न असल्यास कृपया प्रतिक्रियेद्वारे विचारा. आपण सगळे मिळून मिपावरचे सादरीकरण अधिक आकर्षक व शिस्तबद्ध करूया.
लेखनविषय:
लेखनप्रकार
वाचने 74358
प्रतिक्रिया 104

प्रतिक्रिया

श्रीरंग_जोशी गुरुवार, 28/05/2015 09:11
चांगली गोष्ट आहे. ही पद्धत मिपावर रुळल्यास वाचकांची खूपच सोय होईल. अवांतर - आपल्या मिपावर प्रत्येक प्रतिसादाला आयडी दिला जातो. अन प्रतिसादाचा दुवा पाहिला असता त्यात #आयडीनाम दिसते. http://www.misalpav.com/comment/700195#comment-700195

चित्रगुप्त गुरुवार, 28/05/2015 11:48
अतिशय उपयुक्त माहिती परंतु मला याबद्दल अगदी प्राथमिक माहिती सुद्धा नसल्याने मुळात सुरुवात कशी करायची हे समजले नाही. म्हणजे समजा आत्ता टाईप करताना 'येवढा मजकूर' रंगीत करायचाय, आणी 'या मजकुराचा' आकार मोठा करायचाय, तर नेमके काय करायचे ?

श्रीरंग_जोशी गुरुवार, 28/05/2015 16:29
चित्रगुप्त यासाठी वापरलेले कोड <font color = "blue">चि</font><font color = "red">त्र</font><font color = "green">गु</font><font color = "silver">प्त</font>

चौकटराजा गुरुवार, 28/05/2015 18:16
आता तुम्हाला इथे एखादे चित्र स्पेशल कॅरॅक्टर वापरून रंगीत असे काढता येईल.

चौकटराजा गुरुवार, 28/05/2015 18:20
हा लेख अपुरा आहे. पंण इथल्या लोकानी एच टी एम एल शिकावी ही कल्पना फारच उपयुक्त आहे. याने मालकाना ही आनंद होईल. आठ ते दहा धड्यात शिकविल्यास सर्वानाच फायदा होईल. तर मग कर सुरूवात ..... कमल नमन कर ....

सभ्य माणुस गुरुवार, 28/05/2015 20:08
HTML बद्दल बेसिक माहिती 12 वी मध्ये अस्ताना झाली होती आणि मला programming बर्यापैकी जमत पण होते(interest पण होताच). पुढ ऐकले की इकडे स्कोप नाही.मग राहू दीले. बाकी VB, Java पण आवडीचे होतेच.

ज्ञानोबाचे पैजार शुक्रवार, 29/05/2015 10:47
धन्यवाद जोशीसर, फारच उपयूक्त आणि माहितीपूर्ण धागा. वाखु साठवली आहे. पैजारबुवा,

कंजूस शुक्रवार, 29/05/2015 13:37
आपल्याला एखाद्या प्रतिसादातील काही मजकूर दाखवून त्याबद्दल लिहायचे आहे तर त्यासाठी एक तयार मसुदा (=templet) करून ठेवू शकतो.- वरच्या एकाप्रतिसादात [mark]+++[/mark]लिहिले आहे मलाही हेच म्हणायचे आहे. हे वापरताना हवा असलेला मजकूर +++च्या जागी कॅापपेस्ट करायचा.उदा० चौकटराजा यांचा केला- चौकटराजा - Thu, 28/05/2015 - 18:20 हा लेख अपुरा आहे. पंण इथल्या लोकानी एच टी एम एल शिकावी ही कल्पना फारच उपयुक्त आहे. याने मालकाना ही आनंद होईल. आठ ते दहा धड्यात शिकविल्यास सर्वानाच फायदा होईल. तर मग कर सुरूवात ..... कमल नमन कर ....मला ही हेच म्हणायचे आहे.

श्रीरंग_जोशी शुक्रवार, 05/06/2015 08:30
एचटीएमएल कोडचे टेम्प्लेट बनवून ठेवण्याची कल्पना एकदम उपयुक्त वाटली. target = "_blank" हे जवळपास अडीच तीन वर्षांपासून माझ्या जीमेलच्या ड्राफ्ट इमेलमध्ये विराजमान आहे. ड्राफ्ट इमेल अशासाठी की हा मजकूर (ड्राफ्ट फोल्डरमध्ये) नेहमी वर राहू शकतो. मिपावर मराठीत टंकत असताना दुवे देताना केवळ कॉपी पेस्ट करणे सोपे जाते. त्या ड्राफ्ट इमेलमध्ये काही काळापासून type = "circle" अन ₹ हे पण विराजमान झाले आहेत.

सुधांशुनूलकर रविवार, 31/05/2015 20:00
धन्यवाद. अतिशय उपयुक्त लेख. मी आजच लिहिलेल्या लेखात काही गोष्टींचा वापर केला आहे. थोडा अभ्यासही सुरू केला आहे.

प्रमोद देर्देकर मंगळवार, 02/06/2015 16:59
रंगाशेठ वर वापरलेले सर्व प्रकारा व्यतिरिक्त अजुन एक ऑनमाउसओव्हर आणि ऑनमाउसआउट हे दोन प्रकार मला मिपावर अजुन वापरता आलेले नाहियेत की ज्यामुळे लेखाची जागा वाचेल. सं.पं.ना यासाठी विचारणा केली होती पण काही एचटीएमएल पॉलोसी धोरणा वगैरे कारणामुळे करु शकत नाही असे कळले.

श्रीरंग_जोशी गुरुवार, 04/06/2015 06:07
या प्रश्नासाठी धन्यवाद. मिपाच्या डीफॉल्ट सिएसएसमुळे आपल्याला असे इफेक्ट्स मिळवणे तांत्रिकदॄष्ट्या शक्य होणार नाही.
ज्यामुळे लेखाची जागा वाचेल.
हे इफेक्ट्स देऊन लेखाची जागा कशी वाचेल याबाबत कुतूहल आहे. एकाच जागेत दोन चित्रे दाखवता येतील हा माझा एक अंदाज. बादवे मिपाच्या हेडरमधील दुव्यांवर ऑनमाउसओव्हर आणि ऑनमाउसआउटवर फॉन्टकलर बदलाचे इफेक्ट्स दिसत आहेत. अर्थात ते सिएसएसद्वारे नियंत्रित केलेले दिसत आहे.

प्रमोद देर्देकर शुक्रवार, 05/06/2015 08:47
अहो रंगाशेठ जर मुळ चित्र समजा ५०*५० अशा आकारात दिले ऑनमाऊसओवर ने ५००*५०० होवुन जाईल म्हणजे ज्याला पाहिजे तो ते मोठे करुन पाहु शकतो. आणि ऑनमाऊस ऑऊटने पुन्हा पहिल्या आकारात येईल. ज्यामुळे लेखाची जागा नाही का वाचली.

श्रीरंग_जोशी शुक्रवार, 05/06/2015 08:54
आता आलं लक्षात. अ‍ॅमेझॉनवर हा प्रकार पाहिला आहे. सध्या तरी याला सहज जमणारा पण तेवढाही उपयुक्त नसणारा पर्याय म्हणजे चित्र लहान आकारात दाखवायचे अन त्यावर त्याच चित्राचा दुवा द्यायचा ज्यावर वाचाकांनी क्लिक केल्यास चित्र नव्या टॅबमध्ये मूळ आकारमानात उघडेल. वर लेखातले चित्राचे क्र. ३ चे उदाहरण याच प्रकाराचे आहे.

श्रीरंग_जोशी शनिवार, 06/06/2015 20:29
वर लेखात target = "_blank" विषयी फारच थोडक्यात लिहिल्यामुळे त्याची उपयुक्तता नेमकेपणाने बर्‍याच वाचकांपर्यंत पोचली नाही असे दिसत आहे. फायदा असा की दुवा नव्या टॅबमध्ये आपोआप उघडतो. सध्याच्या टॅबमधले पेज तसेच राहते. संगणकावरून मिपावर येणार्‍यांना दुव्यावर राइट क्लिक करून ओपन लिंक इन अ न्यु टॅब हा पर्याय असतो. टचस्क्रीन डिव्हायसेसवरून मिपावर येणार्‍यांना हा पर्याय सहजपणे उपलब्ध असण्याची शक्यता कमी असते. उदा टंकलेखन साहाय्य यावर केवळ नेहमीसारखा दुवा दिल्यास <a href="http://www.misalpav.com/node/1312">टंकलेखन साहाय्य</a> ते पान सध्याच्या टॅबवर उघडले जाईल अन सध्याचा धागा बदलला जाईल. संगणकावरून मिपावर येणार्‍यांना दुव्यावर राइट क्लिक करून ओपन लिंक इन अ न्यु टॅब हा पर्याय असतो. टचस्क्रीन डिव्हायसेसवरून मिपावर येणार्‍यांना हा पर्याय सहजपणे उपलब्ध असण्याची शक्यता कमी असते. त्याऐवजी <a target = "_blank" href="http://www.misalpav.com/node/1312">टंकलेखन साहाय्य</a> दुव्याच्या कोडमध्ये वरीलप्रमाणे target = "_blank" जोडल्यास दुव्याचे पान नव्या टॅबमध्ये उघडेल. ही पद्धत फेसबुकवर युझर्सनी शेअर केलेल्या दुव्यांसाठी व जीमेलसारख्या इमेल सुविधांमध्ये इमेलच्या मजकुरातील दुव्यांसाठी वापरली जाते.

कंजूस शनिवार, 06/06/2015 22:42
नवीन टॅबमध्ये दुवा उघडणे- target=_blank द्यावे लागत नाही मोबाइलमध्ये- कारण ओपरा ब्राउजर आणि युसी ब्राएजर तुम्हाला नवीन टॅबमध्ये(foreground अथवा background मध्ये अथवा त्याच पेजमध्ये)पेज उघडायचा पर्याय देतात. blank न देण्याचा फायदा असा की तो दुवा पाहून झाला की backबटण दाबले की लेखातल्या मूळजागी झटकन येतो.मात्र target_blankवापरल्यास पुन्हा परत मागे येतांना लेख पुन्हा लोड होतो. ओडियो व्हिडियोसाठी हा पर्याय चांगला आहे कारण जो काही प्लेअर असेल तो सुरू होतो.(ओडियो फाइल ऐकणे अजून वाचक/श्रोते यांच्या कानी उतरले नाही ते अलाहिदा).आता e books प्रमाणे audio booksचा प्रसार वाढेल तेव्हा बघू.

श्रीरंग_जोशी रविवार, 07/06/2015 03:35
मी सुचवलेला पर्याय हा बहुतांश डिव्हाइसेसवरील डिफॉल्ट ब्राउझर्सचे बिहेविअर पाहून सुचवला आहे. आपोआप नव्या टॅबमध्ये ओपन होण्याचा फायदा असा की युझर मूळ पेजवर जिथे आहे किंवा जे काही करत आहे ते तसेच राहते अन संदर्भासाठी पाहिजे तितके वेळा दुसर्‍या टॅबमध्ये डोकावून पाहता येते. उदा. मी एखाद्या प्रतिक्रियेला उप-प्रतिक्रिया देत आहे. ती टंकता टंकता माझ्या लक्षात आले की वरच्या प्रतिक्रियेत एक दुवा आहे. तो दुवा आपोआप नव्या टॅबमध्ये उघडला गेला तर मी सध्याच्या टॅबमधली टंकनक्रिया तशीच सोडून टॅब बदलून संदर्भासाठी दुव्याच्या पेजवरची माहिती वाचू शकतो. पुन्हा टॅब बदलून मूळ प्रतिक्रिया टंकण्याचे काम करू शकतो. कधी क्लिष्ट विषय असल्यास ही क्रिया पुन्हा पुन्हा करावी लागू शकते. ज्या पेजवर प्रतिक्रिया टंकणे सुरू आहे तेथील मजकुरही स्क्रोल करून वाचला जाऊ शकतोच. कदाचित माझी ही design philosophy मी हा विषय ज्या काळात शिकलो (१५ वर्षांपूर्वी) तेव्हा मिळालेल्या मार्गदर्शनावर आधारीत आहे. कदाचित आज हे शिकणारे किंवा या विषयातले व्यावसायिक खूप वेगळ्या design philosophy चा पुरस्कार करत असावेत. बाकी फेसबुक व जीमेल बाय डिफॉल्ट 'ओपन इन अ न्यु टॅब'चा वापर करतात.

कंजूस शनिवार, 06/06/2015 22:51
एक प्रश्न: आपण जेव्हा फोटो दुसरीकडे अपलोड करून img srcवगैरे लिंक देतो तशी पेपरमधल्या लिखाणाचा फोटो काढून लिंक दिल्यास त्यातील लिखाण वाचता येत नाही.scan apps,scan to pdf वगैरे अॅपस वापरून काही सुधारणा होते का?विशेषत: मराठी लिखाणात?(थोडे अवांतर आहे).

श्रीरंग_जोशी रविवार, 07/06/2015 03:54
देवनागरी लिपीतल्या छापील मजकूराच्या फोटोमधली अक्षरे सहजपणे वाचता न येणे हे मी पण अनुभवले आहे. तुलनेत रोमन लिपीतील मजकुर वाचायला सोपा जातो. याची काही कारणे:
  • वर्तमानपत्रातला मजकूर असल्यास कागदाच्या दर्जामुळे पार्श्वरंग तेवढा शुभ्र नसतो
  • फोटो काढताना कॅमेरा किंवा फोन यांची सावली त्या मजकूरावर पडल्यामुळे उजेड कमी असतो
  • वर्तमानपत्रातली फॉन्ट साइझ बरीच कमी असू शकते
  • जवळून फोटो काढल्यामुळे कॅमेर्‍याचे थोडेसेही थरथरणे अक्षरांचा शार्पनेस कमी करते
माझ्या मते तरी मूळ फोटो अधिक काळजी घेऊन काढणेच अधिक इष्ट. स्कॅनर यंत्र वापरून फोटोपेक्षा चांगला दर्जा मिळवता येत असला तरी तो पर्याय सुटसुटीत नसतो. या संबंधीचे अ‍ॅप्स मी वापरले नसल्याने त्याविषयी काही बोलू शकत नाही. इतर कुणी अनुभवी व्यक्तिने त्याबद्दल लिहिल्यास उत्तम. अवांतर - चित्र अन लिखित मजकूर असलेले पत्रक डिझाइन करण्यासाठी मायक्रोसॉफ्ट पब्लिशर हे एक उत्तम टूल आहे. मला हे मिपाकर अभ्याने सुचवले होते.

कंजूस रविवार, 07/06/2015 05:14
ओपन_इन _न्यु_टॅब चा उपयोग पटला.मल्टिटास्किंग करता येऊ शकणाय्रा फोनमध्ये सोपे आहे.----फोटो मोठा केल्यावरही अक्षरे सुस्पष्ट दिसणे हे फोकसिंग चांगले झाल्याचे लक्षण आहे. आपण मागे चर्चा केली--लेखातच वरती /शेवटी जा याचा कोड देण्याबद्दल -तर अशी किमान दोन रेडिमेड बटन्स लेखनाच्या चौकटीवर लेखकांच्या सोयीसाठी देता आली तर---------!

श्रीरंग_जोशी रविवार, 07/06/2015 08:33
लेखाच्या आत नेव्हिगेट करण्यासाठी जे कोड लागते त्यासाठी रेडिमेड बटन्सची कल्पना चांगली आहे. मालकांकडे मांडून पाहूया. कुठल्या एखाद्या लेखात प्रथम वापरून बघुया. या सुविधेची उपयुक्तता मिपाकरांपर्यंत पोचली पाहीजे.

उल्का गुरुवार, 02/06/2016 15:10
ह्या धाग्याचा समावेश 'दखल' मध्ये करावा. जेणेकरुन सर्व नवीन सद्स्याना लाभ घेता येईल. अजुन असे काही शिकण्यासारखे मिपा धागे माहीत असल्यास ते क्रुपया सांगावेत.