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

श
श्रीरंग_जोशी यांनी
 ·  लेख
लेख

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

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

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

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

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

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

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

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

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

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

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

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

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


नमस्कार मंडळी, बऱ्याच वर्षांपूर्वी कॉलेजमध्ये असताना मी एचटीएमएल शिकलो. कामाच्या ठिकाणी कधी याचा उपयोग करावा लागला नसला तरी मिपावर याचा थोडाफार उपयोग लेख व प्रतिसाद प्रकाशित करताना करत असतो. मिपाचा टेक्स्ट इडिटींग टूलबार आपल्याला बरेच पर्याय उपलब्ध करून देतो. तसेच त्यातले कुठलेही बटन क्लिक केल्यास संबंधीत फॉरमॅटींगसाठी वापरले जाणारे एचटीएमएल कोड आपल्याला दिसू शकते. या कोडमध्ये काही किंचितसे बदल केल्यास आपण आपल्या लेखाच्या व प्रतिसादाच्या सादरीकरणाला अधिक आकर्षक बनवू शकतो. त्याखेरीज काही साधे एचटीएमएल कोड वापरून आपण मजकुराला अधिक फॉरमॅट करू शकतो जे या टेक्स्ट एडिटर टूलबारच्या मदतीने करणे शक्य नाही.
फॉन्ट साइझ व फॉन्ट कलर हे अक्षर निळ्या रंगात आहे. यासाठी खालील एचटीएमएल कोडचा वापर केला आहे. <font color = "blue">हे अक्षर निळ्या रंगात आहे. </font>
हा फॉन्ट साइझ ७ आहे. हा फॉन्ट साइझ १ आहे. यासाठी खालील एचटीएमएल कोडचा वापर केला आहे. <font size = "7">हा फॉन्ट साइझ ७ आहे. </font> <font size = "1">हा फॉन्ट साइझ १ आहे. </font>
चित्र लहान मोठे करणे व दुवा नव्या टॅबमध्ये उघडेल याची व्यवस्था करणे या फोटोची रुंदी बदललेली नाही ग्यानबा तुकाराम या फोटोची रुंदी मूळ प्रतिमेपेक्षा २०% अधिक आहे. लांबी-रुंदीचे गुणोत्तर आपोआप सांभाळले गेले आहे. ग्यानबा तुकाराम या फोटोची रुंदी मूळ प्रतिमेपेक्षा २०% कमी आहे. लांबी-रुंदीचे गुणोत्तर आपोआप सांभाळले गेले आहे. तसेच या चित्रावर क्लिक केल्यास त्याची मूळ प्रतिमा नव्या टॅबमध्ये उघडते. ग्यानबा तुकाराम वरील तीन प्रयोग करण्यासाठी वापरलेले कोड. प्रत्यक्ष फरक करणारे कोड लाल रंगात लिहिले आहे. <img src="https://lh5.googleusercontent.com/-VyQ1kX91n0w/UcNDXvSz1NI/AAAAAAAAEyg/V35UDw9uDUs/s251/mipa.jpg" alt="ग्यानबा तुकाराम" /> <img src="https://lh5.googleusercontent.com/-VyQ1kX91n0w/UcNDXvSz1NI/AAAAAAAAEyg/V35UDw9uDUs/s251/mipa.jpg" width="301"alt="ग्यानबा तुकाराम" /> <a target = "_blank" href="https://lh5.googleusercontent.com/-VyQ1kX91n0w/UcNDXvSz1NI/AAAAAAAAEyg/V35UDw9uDUs/s251/mipa.jpg"><img src="https://lh5.googleusercontent.com/-VyQ1kX91n0w/UcNDXvSz1NI/AAAAAAAAEyg/V35UDw9uDUs/s251/mipa.jpg" 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. एचटीएमएलचे प्रयोग करताना तुम्ही पूर्वपरिक्षणाद्वारे खात्री करू शकता की तुम्हाला हवा तो इफेक्ट मिळतोय की नाही. मिपावर लेख व मूळ प्रतिसादात चित्राची कमाल रुंदी ६४० असू द्या. उप-प्रतिसाद असल्यास ६४० पेक्षाही कमी ठेवा. असे न केल्यास ते चित्र उजवीकडच्या दुव्यांवर अतिक्रमण करते. या धाग्यात मी सुचवलेले पर्याय वापरून तुम्ही स्पेशल इफेक्ट असलेल्या प्रतिक्रिया देऊ शकता. त्याखेरीज स्वतः वेगळे काहीतरी करून बघू शकता. हे करताना काही प्रश्न असल्यास कृपया प्रतिक्रियेद्वारे विचारा. आपण सगळे मिळून मिपावरचे सादरीकरण अधिक आकर्षक व शिस्तबद्ध करूया.
वर्गीकरण
लेखनविषय (Tags)
तंत्र
लेखनप्रकार (Writing Type)
माहिती
74180 वाचन
💬 प्रतिसाद (104)

प्रतिक्रिया

श्रीरंग_जोशी
Wed, 05/27/2015 - 06:59 नवीन
Image removed.  Image removed.  Image removed. <img src="https://lh5.googleusercontent.com/-VyQ1kX91n0w/UcNDXvSz1NI/AAAAAAAAEyg/V35UDw9uDUs/s251/mipa.jpg" width="110" alt="Img 1" />  <img src="https://lh5.googleusercontent.com/-VyQ1kX91n0w/UcNDXvSz1NI/AAAAAAAAEyg/V35UDw9uDUs/s251/mipa.jpg" width="110" alt="Img २" />  <img src="https://lh5.googleusercontent.com/-VyQ1kX91n0w/UcNDXvSz1NI/AAAAAAAAEyg/V35UDw9uDUs/s251/mipa.jpg" width="110" alt="Img 1" /> एका चित्राच्या कोडनंतर कुठलेही एंटर न मारता दुसर्‍या चित्राचे कोड लिहिणे. इथे दोन चित्रांमध्ये गॅप येण्यासाठी ब्लँक स्पेससाठी वापरले जाणारे कोड लिहिले आहे & n b s p ; (ही पाच अक्षरे व सेमी कोलोन एकत्रितरित्या). गॅप नसल्यास कदाचित एकमेकांना चिकटलेली चित्रे चांगली दिसणार नाहीत. जरा क्लिष्ट पर्याय म्हणजे एचटीएमएल टेबलचा वापर. त्याविषयी पुन्हा कधी तरी.
↩ प्रतिसाद: जयंत कुलकर्णी

तुषार काळभोर
Wed, 05/27/2015 - 08:44 नवीन
हे लई भारी आहे.
↩ प्रतिसाद: श्रीरंग_जोशी

अजया
Wed, 05/27/2015 - 07:42 नवीन
मस्त माहिती.माझ्या लेकाला वाचायला देते.तो मिपाचे एच टि एम एल कोड नेहमी उघडुन अभ्यासत असतो.मला प्रश्न विचारतो पण मला त्यातली तांत्रिक माहिती शुन्य असल्याने तो स्वतःच त्याची व्हेरिएशन्स करुन बघतो!

खेडूत
Wed, 05/27/2015 - 08:30 नवीन
लेख आवडला. आता हे वापरुन पहातो. क्रमशः विसरलेय का?

अमृत
Wed, 05/27/2015 - 09:13 नवीन
  • लेखन आवडले
  • सोपी भाषाशैली
  • वापरून बघीतले

    • धन्यवाद

श्रीरंग_जोशी
Wed, 05/27/2015 - 19:45 नवीन
w3schools वरील रंगांची यादी. थेट रंगाचे नाव न वापरता RGB (Red, Green, Blue) चे कॉंबिनेशन हेक्साडेसिमल कोड वापरून १६ चा ६वा वर्ग इतक्या रंगछटा आपण मिळवू शकतो. सुरुवात
  • (पांढरा): #FFFFFF
  • तांबडा: #FF0000
  • निळा: #0000FF
  • काळा: #000000
या कलरकोडच्या सहाही ठिकाणी 0 ते 9 व A (१०) B (११) C (१२) D (१३) E (१४) F (१५) हे टाकू शकता. टीप: अक्षरांसाठी डिफॉल्ट रंग काळा असतो व वेबपेजसाठी डिफॉल्ट रंग पांढरा असतो.
↩ प्रतिसाद: नाखु

कंजूस
Wed, 05/27/2015 - 09:47 नवीन
w3schoolsचा कीस पाडून मिपा आणि इतर ठिकाणी प्रयोग करून झालेत. HTML TAGS पैकी-anchor tag "a";आणि image tag img यांचाच उपयोग फार होतो .सर्व लेखच इमिज टॅगसह ओफलाइन लिहून काढतो आणि एका झटक्यात कॅापी पेस्टाने अपलोड करतो.मिपावर संपादन मिळत नसल्याने याचा काही उपयोग होत नाही आणि ते टॅगज नंतर टाकण्यासाठी संमंला संपर्क करावा लागतो. उदा० दोन चार भागात लेख येणार असेल तर पहिल्या भागात दुसय्रा भागाची a href link टाकता येत नाही कारण दुसय्रा भागाचा बिल्ला नंबर नंतर मिळणार असतो. त्याच लेखातल्या निरनिराळ्या प्रकर्णाकडे झटकन नेणारा कोड (विकीपिडिआतली सोयीसारखे)मात्र लेखाला फारच सुघड(=structured ?)करतो तो पाहिजे. चित्राच्या बाजूस (३१०width) टाकून लेखाचा थोडा मजकूर दिसला तर छान वाटते परंतू मोबाइलातून वाचणाय्रांना तो बहुतेक एकाखाली एक येतो वाटतं.audio tag मधून साउंड फाइल embedचा प्रयत्न झाला परंतू तेवढा प्रतिसाद नाही अथवा तो प्लेअर नसतो. लेखाचा उद्देश आवडला हे पचनी पडल्यास CSS येऊ द्या.उतसाही वाचक वाट पाहताहेत.

श्रीरंग_जोशी
Wed, 05/27/2015 - 19:27 नवीन
बेबपेजला जो bgcolor वापरला असेल (डिफॉल्ट तर पांढराच असतो) तोच फॉन्ट कलर म्हणून वापरायचा. तुझ्यासाठी स्वाध्याय: यावर उपप्रतिसाद देऊन मजकूर लपवून दाखव.
↩ प्रतिसाद: टवाळ कार्टा

टवाळ कार्टा
गुरुवार, 05/28/2015 - 10:49 नवीन
मला डुआयडी कधी मिळणार :(
↩ प्रतिसाद: श्रीरंग_जोशी

पैसा
Wed, 05/27/2015 - 11:08 नवीन
मस्त उपयोगी लेख! अजून येऊ द्या!

llपुण्याचे पेशवेll
Wed, 05/27/2015 - 11:09 नवीन
क्रोम मधे इन्स्पेक्ट वेब एलेमेंट करून कोड बघता येइल

llपुण्याचे पेशवेll
Wed, 05/27/2015 - 11:12 नवीन
हे पहा फक्त वेब एलेमेंट इन्स्पेक्ट करून चोप्य पस्ते (अर्थात कॉपी पेस्ट) केला आहे

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

मोहनराव
Wed, 05/27/2015 - 13:20 नवीन
छान. शिकायला पाहिजे.

मधुरा देशपांडे
Wed, 05/27/2015 - 13:22 नवीन
उत्तम माहिती. लेख/प्रतिसादात अवश्य वापर केला जाईल.

खंडेराव
Wed, 05/27/2015 - 13:29 नवीन
शिकण्याचा प्रयत्न करतो आता :-)

आदूबाळ
Wed, 05/27/2015 - 14:20 नवीन
ये सब ठीक हय, पण आमच्यासारख्या गण्यागंप्यांसाठी एमेस वर्डसारखा दिसणारा (म्हणजे कंट्रोल बी केल्यावर बोल्ड करणारा, आणि तिथल्यातिथे बोल्डनेस दाखवणारा वगैरे) इंटर्फेस असता तर सोपं पडलं असतं.

राजाभाउ
Tue, 03/15/2016 - 10:22 नवीन
एच टी एम एल एडिटर वापरु शकता ना. उ.दा. http://htmleditor.in/index.html हा ऑनलाइन आहे. तसेच ऑफलाइन पण मिळु शकेल. अनेक आहेत थोड शोधा सापडुन जाइल.
↩ प्रतिसाद: आदूबाळ

राजाभाउ
Tue, 03/15/2016 - 10:40 नवीन
रच्याकन एमेस वर्ड मध्ये सुद्धा तुम्ही फाइल एच टी एम एल म्हणुन सेव्ह करु शकता व नंतर ती फाइल एच टी एम एल म्हणुन वापरु शकता. "save as" या मेन्यु मध्ये तुम्हाला तो ऑप्शन मिळेल. आता ते सर्व टॅग जशेच्या तशे इतरत्र चालातात का हे बघावे लागेल. पण "Web page, filter" ऑप्शन ने बेसीक टॅग तरी चालावेत.
↩ प्रतिसाद: आदूबाळ

डॉ सुहास म्हात्रे
Wed, 05/27/2015 - 14:36 नवीन
हा धक्का लै आवाल्डा...

हा धक्का लै आवाल्डा... त्येला जरा लाल क्येला !हा धक्का लै आवाल्डा... त्येला जरा नीळा क्येला !

एस
Wed, 05/27/2015 - 14:37 नवीन
चांगलंय, पण हे डेप्रिकेटेड टॅग आहेत. आता बहुतांशी स्टायलिंग हे कॅस्केडेड स्टाइल शीट्स म्हणजे सीएसएस वापरून केले जाते आणि प्युअर एचटीएमएल वेगळे ठेवतात. मिपावर सीएसएस कसे वापरता येईल याची माहिती कृपया द्यावी.

कपिलमुनी
Wed, 05/27/2015 - 14:53 नवीन
काय ऑब्झर्वेशन आहे !
↩ प्रतिसाद: एस

श्रीरंग_जोशी
Mon, 06/01/2015 - 00:48 नवीन
सीएसएस चा उपयोग कोड रियुझेबिलिटी व मजकुराच्या सादरीकरणाची युनिफॉर्मिटी राखण्यासाठी केला जातो. एखाद्या संकेतस्थळावरील प्रत्येक पानांवरचे सादरीकरण वेगळे नसावे व ते सहजपणे एकसारखे दिसावे म्हणून एक सीएसएस फाइल किंवा अशा फाइल्सचा गट वापरला जातो. लेखात लिहिलेल्या टॅग्ज व प्रॉपर्टीजला थेट डेप्रिकेटेड असे मी म्हणणार नाही. कारण कुणी थेट हे सर्व टंकत नसले तरी वेब डिझाइनींगचे कुठलेही टूल वापरले तरी ते टूल अखेर हे सर्व वापरूनच कोड जनरेट करते. काही प्रॉपर्टीज सीएसएसद्वारे लॉक केलेल्या असल्यामुळे अशा कोडद्वारे ओव्हरराईड करता येणार नाहीत*. उदा. मिपावर एचटीएमएल टेबल्सचा वापर करताना बॅकग्राउंड कलर घालवणे व बॉर्डर्स शून्य जाडीच्या करणे (अदृश्य करणे) मला अनेक प्रयत्नांअंती शक्य झाले नाही. मिपाचे स्वतःचे सीएसएस असताना आपल्याला वेगळे सीएसएस वापरता येणार नाही असे वाटते. तसेच काही क्लॄप्ती आपण वेगळे सीएसएस वापरू शकलो तरी तसे करणे योग्यही होणार नाही कारण सादरीकरणातील युनिफॉर्मिटी घालवली जाईल. * हा निष्कर्ष माझ्या तोकड्या ज्ञानामुळे असू शकतो. या क्षेत्रात कुशल असलेली व्यक्ती हेच काम सहजपणे करू शकेल.
↩ प्रतिसाद: एस

अरुण मनोहर
गुरुवार, 05/28/2015 - 08:19 नवीन
सबमिट दाबले की पेज सापडले नाही अशी एरर येते आहे.
↩ प्रतिसाद: पाटील हो

श्रीरंग_जोशी
गुरुवार, 05/28/2015 - 08:24 नवीन
माझ्या मते त्यांनी एचटीएमएल फॉर्मचा केवळ एक प्रयोग म्हणून ते कोड प्रतिसादात लिहिले आहे. प्रत्यक्ष सर्वरला या फॉर्मचा डेटा पाठवण्याची सोय (व्हॅलिड युआरएल वापरून) केलेली नाही.
↩ प्रतिसाद: अरुण मनोहर

पाटील हो
गुरुवार, 05/28/2015 - 10:59 नवीन
हो
↩ प्रतिसाद: श्रीरंग_जोशी

डॉ सुहास म्हात्रे
Wed, 05/27/2015 - 14:48 नवीन
मार्की, मार्की, मार्की ! नाय बा. आमी आहिंसावादी हाय !