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

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

नमस्कार मंडळी,

बऱ्याच वर्षांपूर्वी कॉलेजमध्ये असताना मी एचटीएमएल शिकलो. कामाच्या ठिकाणी कधी याचा उपयोग करावा लागला नसला तरी मिपावर याचा थोडाफार उपयोग लेख व प्रतिसाद प्रकाशित करताना करत असतो. मिपाचा टेक्स्ट इडिटींग टूलबार आपल्याला बरेच पर्याय उपलब्ध करून देतो. तसेच त्यातले कुठलेही बटन क्लिक केल्यास संबंधीत फॉरमॅटींगसाठी वापरले जाणारे एचटीएमएल कोड आपल्याला दिसू शकते. या कोडमध्ये काही किंचितसे बदल केल्यास आपण आपल्या लेखाच्या व प्रतिसादाच्या सादरीकरणाला अधिक आकर्षक बनवू शकतो.

त्याखेरीज काही साधे एचटीएमएल कोड वापरून आपण मजकुराला अधिक फॉरमॅट करू शकतो जे या टेक्स्ट एडिटर टूलबारच्या मदतीने करणे शक्य नाही.

फॉन्ट साइझ व फॉन्ट कलर

हे अक्षर निळ्या रंगात आहे.

यासाठी खालील एचटीएमएल कोडचा वापर केला आहे.

<font color = "blue">हे अक्षर निळ्या रंगात आहे. </font>

हा फॉन्ट साइझ ७ आहे.
हा फॉन्ट साइझ १ आहे.

यासाठी खालील एचटीएमएल कोडचा वापर केला आहे.
<font size = "7">हा फॉन्ट साइझ ७ आहे. </font>
<font size = "1">हा फॉन्ट साइझ १ आहे. </font>

चित्र लहान मोठे करणे व दुवा नव्या टॅबमध्ये उघडेल याची व्यवस्था करणे

या फोटोची रुंदी बदललेली नाही

या फोटोची रुंदी मूळ प्रतिमेपेक्षा २०% अधिक आहे. लांबी-रुंदीचे गुणोत्तर आपोआप सांभाळले गेले आहे.

या फोटोची रुंदी मूळ प्रतिमेपेक्षा २०% कमी आहे. लांबी-रुंदीचे गुणोत्तर आपोआप सांभाळले गेले आहे. तसेच या चित्रावर क्लिक केल्यास त्याची मूळ प्रतिमा नव्या टॅबमध्ये उघडते.

वरील तीन प्रयोग करण्यासाठी वापरलेले कोड. प्रत्यक्ष फरक करणारे कोड लाल रंगात लिहिले आहे.

<img src="https://lh5.googleusercontent.com/-VyQ1kX91n0w/UcNDXvSz1NI/AAAAAAAAEyg/V..." alt="ग्यानबा तुकाराम" />

<img src="https://lh5.googleusercontent.com/-VyQ1kX91n0w/UcNDXvSz1NI/AAAAAAAAEyg/V..." width="301"alt="ग्यानबा तुकाराम" />

<a target = "_blank" href="https://lh5.googleusercontent.com/-VyQ1kX91n0w/UcNDXvSz1NI/AAAAAAAAEyg/V..."><img src="https://lh5.googleusercontent.com/-VyQ1kX91n0w/UcNDXvSz1NI/AAAAAAAAEyg/V..." 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.

एचटीएमएलचे प्रयोग करताना तुम्ही पूर्वपरिक्षणाद्वारे खात्री करू शकता की तुम्हाला हवा तो इफेक्ट मिळतोय की नाही. मिपावर लेख व मूळ प्रतिसादात चित्राची कमाल रुंदी ६४० असू द्या. उप-प्रतिसाद असल्यास ६४० पेक्षाही कमी ठेवा. असे न केल्यास ते चित्र उजवीकडच्या दुव्यांवर अतिक्रमण करते.

या धाग्यात मी सुचवलेले पर्याय वापरून तुम्ही स्पेशल इफेक्ट असलेल्या प्रतिक्रिया देऊ शकता. त्याखेरीज स्वतः वेगळे काहीतरी करून बघू शकता. हे करताना काही प्रश्न असल्यास कृपया प्रतिक्रियेद्वारे विचारा.

आपण सगळे मिळून मिपावरचे सादरीकरण अधिक आकर्षक व शिस्तबद्ध करूया.