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

Primary tabs

श्रीरंग_जोशी's picture
श्रीरंग_जोशी in जनातलं, मनातलं
27 May 2015 - 6:23 am

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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


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

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

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

<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.

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

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

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

तंत्रमाहिती

प्रतिक्रिया

कॅप्टन जॅक स्पॅरो's picture

27 May 2015 - 6:30 am | कॅप्टन जॅक स्पॅरो

उत्तम माहिती :). अजुन येउ द्या.

मस्तच... अजुन या विषयावर लिहा. :)

मदनबाण.....

आजची स्वाक्षरी :- Kehdoon Tumhen... :- DJ Aqeel

जयंत कुलकर्णी's picture

27 May 2015 - 6:45 am | जयंत कुलकर्णी

उत्तम ! शेजारी शेजारी फोटो टाकण्यासाठी काय कोड असेल ?
माहितीसाठी धन्यवाद श्रीरंगराव !

श्रीरंग_जोशी's picture

27 May 2015 - 6:59 am | श्रीरंग_जोशी

Img 1  Img २  Img 1

<img src="https://lh5.googleusercontent.com/-VyQ1kX91n0w/UcNDXvSz1NI/AAAAAAAAEyg/V..." width="110" alt="Img 1" />  <img src="https://lh5.googleusercontent.com/-VyQ1kX91n0w/UcNDXvSz1NI/AAAAAAAAEyg/V..." width="110" alt="Img २" />  <img src="https://lh5.googleusercontent.com/-VyQ1kX91n0w/UcNDXvSz1NI/AAAAAAAAEyg/V..." width="110" alt="Img 1" />

एका चित्राच्या कोडनंतर कुठलेही एंटर न मारता दुसर्‍या चित्राचे कोड लिहिणे. इथे दोन चित्रांमध्ये गॅप येण्यासाठी ब्लँक स्पेससाठी वापरले जाणारे कोड लिहिले आहे & n b s p ; (ही पाच अक्षरे व सेमी कोलोन एकत्रितरित्या). गॅप नसल्यास कदाचित एकमेकांना चिकटलेली चित्रे चांगली दिसणार नाहीत.

जरा क्लिष्ट पर्याय म्हणजे एचटीएमएल टेबलचा वापर. त्याविषयी पुन्हा कधी तरी.

पैलवान's picture

27 May 2015 - 8:44 am | पैलवान

हे लई भारी आहे.

खूप छान माहीती. अजून येवुद्या.

मस्त माहिती.माझ्या लेकाला वाचायला देते.तो मिपाचे एच टि एम एल कोड नेहमी उघडुन अभ्यासत असतो.मला प्रश्न विचारतो पण मला त्यातली तांत्रिक माहिती शुन्य असल्याने तो स्वतःच त्याची व्हेरिएशन्स करुन बघतो!

खेडूत's picture

27 May 2015 - 8:30 am | खेडूत

लेख आवडला.
आता हे वापरुन पहातो.

क्रमशः विसरलेय का?

पाटील हो's picture

27 May 2015 - 9:05 am | पाटील हो

गुरुजी अजून काहीतरी भन्नाट शिकावा .

नरेंद्र गोळे's picture

27 May 2015 - 9:08 am | नरेंद्र गोळे

आता प्रयोग करून पाहायला हवेत!

अमृत's picture

27 May 2015 - 9:13 am | अमृत
  • लेखन आवडले
  • सोपी भाषाशैली
  • वापरून बघीतले

  • धन्यवाद

नाखु's picture

27 May 2015 - 9:35 am | नाखु

अवघा रंग एक झाला !

रंगी रंगला श्रीरंग !

आणी

ह्या रंगांची यादी आहे का?

श्रीरंग_जोशी's picture

27 May 2015 - 7:45 pm | श्रीरंग_जोशी

w3schools वरील रंगांची यादी.

थेट रंगाचे नाव न वापरता RGB (Red, Green, Blue) चे कॉंबिनेशन हेक्साडेसिमल कोड वापरून १६ चा ६वा वर्ग इतक्या रंगछटा आपण मिळवू शकतो.
सुरुवात

  • (पांढरा): #FFFFFF
  • तांबडा: #FF0000
  • निळा: #0000FF
  • काळा: #000000

या कलरकोडच्या सहाही ठिकाणी 0 ते 9 व A (१०) B (११) C (१२) D (१३) E (१४) F (१५) हे टाकू शकता.
टीप: अक्षरांसाठी डिफॉल्ट रंग काळा असतो व वेबपेजसाठी डिफॉल्ट रंग पांढरा असतो.

कंजूस's picture

27 May 2015 - 9:47 am | कंजूस

w3schoolsचा कीस पाडून मिपा आणि इतर ठिकाणी प्रयोग करून झालेत. HTML TAGS पैकी-anchor tag "a";आणि image tag img यांचाच उपयोग फार होतो .सर्व लेखच इमिज टॅगसह ओफलाइन लिहून काढतो आणि एका झटक्यात कॅापी पेस्टाने अपलोड करतो.मिपावर संपादन मिळत नसल्याने याचा काही उपयोग होत नाही आणि ते टॅगज नंतर टाकण्यासाठी संमंला संपर्क करावा लागतो. उदा० दोन चार भागात लेख येणार असेल तर पहिल्या भागात दुसय्रा भागाची a href link टाकता येत नाही कारण दुसय्रा भागाचा बिल्ला नंबर नंतर मिळणार असतो.
त्याच लेखातल्या निरनिराळ्या प्रकर्णाकडे झटकन नेणारा कोड (विकीपिडिआतली सोयीसारखे)मात्र लेखाला फारच सुघड(=structured ?)करतो तो पाहिजे.

चित्राच्या बाजूस (३१०width) टाकून लेखाचा थोडा मजकूर दिसला तर छान वाटते परंतू मोबाइलातून वाचणाय्रांना तो बहुतेक एकाखाली एक येतो वाटतं.audio tag मधून साउंड फाइल embedचा प्रयत्न झाला परंतू तेवढा प्रतिसाद नाही अथवा तो प्लेअर नसतो.
लेखाचा उद्देश आवडला हे पचनी पडल्यास CSS येऊ द्या.उतसाही वाचक वाट पाहताहेत.

लालगरूड's picture

27 May 2015 - 10:03 am | लालगरूड

मला पढ येतात html tag :-D :-D :-D
लालगरूड

लालगरूड's picture

27 May 2015 - 10:11 am | लालगरूड


लारु

प्रयत्न चालू आहेत

लालगरूड's picture

27 May 2015 - 10:13 am | लालगरूड


लालगरूड

टवाळ कार्टा's picture

27 May 2015 - 10:47 am | टवाळ कार्टा

त्ये आक्षरं गायब कशी कर्याची ते सांगता कै :)

श्रीरंग_जोशी's picture

27 May 2015 - 7:27 pm | श्रीरंग_जोशी

बेबपेजला जो bgcolor वापरला असेल (डिफॉल्ट तर पांढराच असतो) तोच फॉन्ट कलर म्हणून वापरायचा.

तुझ्यासाठी स्वाध्याय: यावर उपप्रतिसाद देऊन मजकूर लपवून दाखव.

टवाळ कार्टा's picture

28 May 2015 - 10:49 am | टवाळ कार्टा

मला डुआयडी कधी मिळणार :(

पुरणार आणि उरणार फक्त पाटील

डॉ सुहास म्हात्रे's picture

27 May 2015 - 11:03 am | डॉ सुहास म्हात्रे

माहितीपूर्ण लेख ! और आंदो !!

पैसा's picture

27 May 2015 - 11:08 am | पैसा

मस्त उपयोगी लेख! अजून येऊ द्या!

llपुण्याचे पेशवेll's picture

27 May 2015 - 11:09 am | llपुण्याचे पेशवेll

क्रोम मधे इन्स्पेक्ट वेब एलेमेंट करून कोड बघता येइल

llपुण्याचे पेशवेll's picture

27 May 2015 - 11:12 am | llपुण्याचे पेशवेll

हे पहा फक्त वेब एलेमेंट इन्स्पेक्ट करून चोप्य पस्ते (अर्थात कॉपी पेस्ट) केला आहे

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

गुरुजी आम्हाला धाक्याला लावलासा गुरुजी आम्हाला धाक्याला लावलासा

उत्तम माहिती.अजुन येऊ द्या

मोहनराव's picture

27 May 2015 - 1:20 pm | मोहनराव

छान. शिकायला पाहिजे.

मधुरा देशपांडे's picture

27 May 2015 - 1:22 pm | मधुरा देशपांडे

उत्तम माहिती. लेख/प्रतिसादात अवश्य वापर केला जाईल.

खंडेराव's picture

27 May 2015 - 1:29 pm | खंडेराव

शिकण्याचा प्रयत्न करतो आता :-)

मार्कस ऑरेलियस's picture

27 May 2015 - 1:34 pm | मार्कस ऑरेलियस

आम्हाला फकस्त इतकेच माहीत आहे ... आणि इतकेच पुरते =))

आदूबाळ's picture

27 May 2015 - 2:20 pm | आदूबाळ

ये सब ठीक हय, पण आमच्यासारख्या गण्यागंप्यांसाठी एमेस वर्डसारखा दिसणारा (म्हणजे कंट्रोल बी केल्यावर बोल्ड करणारा, आणि तिथल्यातिथे बोल्डनेस दाखवणारा वगैरे) इंटर्फेस असता तर सोपं पडलं असतं.

राजाभाउ's picture

15 Mar 2016 - 10:22 am | राजाभाउ

एच टी एम एल एडिटर वापरु शकता ना. उ.दा. http://htmleditor.in/index.html हा ऑनलाइन आहे. तसेच ऑफलाइन पण मिळु शकेल. अनेक आहेत थोड शोधा सापडुन जाइल.

राजाभाउ's picture

15 Mar 2016 - 10:40 am | राजाभाउ

रच्याकन एमेस वर्ड मध्ये सुद्धा तुम्ही फाइल एच टी एम एल म्हणुन सेव्ह करु शकता व नंतर ती फाइल एच टी एम एल म्हणुन वापरु शकता. "save as" या मेन्यु मध्ये तुम्हाला तो ऑप्शन मिळेल. आता ते सर्व टॅग जशेच्या तशे इतरत्र चालातात का हे बघावे लागेल. पण "Web page, filter" ऑप्शन ने बेसीक टॅग तरी चालावेत.

अरुण मनोहर's picture

27 May 2015 - 2:21 pm | अरुण मनोहर

बघुया!

अरुण मनोहर's picture

27 May 2015 - 2:22 pm | अरुण मनोहर

अरे वाह! हे मस्तच!

डॉ सुहास म्हात्रे's picture

27 May 2015 - 2:36 pm | डॉ सुहास म्हात्रे

हा धक्का लै आवाल्डा...


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

चांगलंय, पण हे डेप्रिकेटेड टॅग आहेत. आता बहुतांशी स्टायलिंग हे कॅस्केडेड स्टाइल शीट्स म्हणजे सीएसएस वापरून केले जाते आणि प्युअर एचटीएमएल वेगळे ठेवतात.

मिपावर सीएसएस कसे वापरता येईल याची माहिती कृपया द्यावी.

एस's picture

27 May 2015 - 2:45 pm | एस

मिपावरचा ७ लाखावा प्रतिसाद!!!

मार्कस ऑरेलियस's picture

27 May 2015 - 2:53 pm | मार्कस ऑरेलियस

हे कोठुन शोधले आता ?

कपिलमुनी's picture

27 May 2015 - 2:53 pm | कपिलमुनी

काय ऑब्झर्वेशन आहे !

श्रीरंग_जोशी's picture

1 Jun 2015 - 12:48 am | श्रीरंग_जोशी

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

लेखात लिहिलेल्या टॅग्ज व प्रॉपर्टीजला थेट डेप्रिकेटेड असे मी म्हणणार नाही. कारण कुणी थेट हे सर्व टंकत नसले तरी वेब डिझाइनींगचे कुठलेही टूल वापरले तरी ते टूल अखेर हे सर्व वापरूनच कोड जनरेट करते. काही प्रॉपर्टीज सीएसएसद्वारे लॉक केलेल्या असल्यामुळे अशा कोडद्वारे ओव्हरराईड करता येणार नाहीत*. उदा. मिपावर एचटीएमएल टेबल्सचा वापर करताना बॅकग्राउंड कलर घालवणे व बॉर्डर्स शून्य जाडीच्या करणे (अदृश्य करणे) मला अनेक प्रयत्नांअंती शक्य झाले नाही.

मिपाचे स्वतःचे सीएसएस असताना आपल्याला वेगळे सीएसएस वापरता येणार नाही असे वाटते. तसेच काही क्लॄप्ती आपण वेगळे सीएसएस वापरू शकलो तरी तसे करणे योग्यही होणार नाही कारण सादरीकरणातील युनिफॉर्मिटी घालवली जाईल.

* हा निष्कर्ष माझ्या तोकड्या ज्ञानामुळे असू शकतो. या क्षेत्रात कुशल असलेली व्यक्ती हेच काम सहजपणे करू शकेल.

कपिलमुनी's picture

27 May 2015 - 2:38 pm | कपिलमुनी
माईसाहेब कुरसूंदीकर's picture

27 May 2015 - 2:43 pm | माईसाहेब कुरसूंदीकर


मस्तच रे रंगोबा.

झंम्प्या's picture

27 May 2015 - 2:45 pm | झंम्प्या

भारी
जू येद्या.

पाटील हो's picture

27 May 2015 - 2:45 pm | पाटील हो
Comments:


अरुण मनोहर's picture

28 May 2015 - 8:19 am | अरुण मनोहर

सबमिट दाबले की पेज सापडले नाही अशी एरर येते आहे.

श्रीरंग_जोशी's picture

28 May 2015 - 8:24 am | श्रीरंग_जोशी

माझ्या मते त्यांनी एचटीएमएल फॉर्मचा केवळ एक प्रयोग म्हणून ते कोड प्रतिसादात लिहिले आहे.
प्रत्यक्ष सर्वरला या फॉर्मचा डेटा पाठवण्याची सोय (व्हॅलिड युआरएल वापरून) केलेली नाही.

पाटील हो's picture

28 May 2015 - 10:59 am | पाटील हो

हो

डॉ सुहास म्हात्रे's picture

27 May 2015 - 2:48 pm | डॉ सुहास म्हात्रे

मार्की, मार्की, मार्की ! नाय बा. आमी आहिंसावादी हाय !

टवाळ कार्टा's picture

27 May 2015 - 2:56 pm | टवाळ कार्टा

खिक्क

मोहनराव's picture

27 May 2015 - 4:38 pm | मोहनराव

लै भारी

कपिलमुनी's picture

27 May 2015 - 3:02 pm | कपिलमुनी

टवाळ कार्टा's picture

27 May 2015 - 3:13 pm | टवाळ कार्टा

त्ये बाळ रिवर्स का मारतय...मिरर करून वळव त्याला :)

जयंत कुलकर्णी's picture

27 May 2015 - 4:30 pm | जयंत कुलकर्णी

ते भावी फुटबॉलपटू असेल........

जयंत कुलकर्णी's picture

27 May 2015 - 4:30 pm | जयंत कुलकर्णी

बॅकला खेळणारं

नीलमोहर's picture

27 May 2015 - 4:38 pm | नीलमोहर

आठवणी ताज्या झाल्या !!
ते html, flash कोडिंग वगैरे खूप किचकट वाटलं म्हणून जास्त पाठपुरावा केला नाही.
वेबचा कोर्स करतांना html झालं होतं पण पुढे जॉब ग्राफिक्स मध्येच केले आणि वेब मध्ये काही करायचं राहिलं ते राहिलंच.
येऊ द्या अजून..

ट्रायल ट्रायल. हॅल्लो चेक्क. १ २ ३. १ २ ३. फ्फू फ्फू फ्फू.
यसवायजी

यसवायजी

यसवायजी

यसवायजी

यसवायजी

यसवायजी

यसवायजी

यसवायजी



वा

जी

moving image by marquee html code

पाटील हो's picture

27 May 2015 - 5:10 pm | पाटील हो

पहिल्याच चेंडूवर चौकार ___A ___

कॅप्टन जॅक स्पॅरो's picture

27 May 2015 - 5:27 pm | कॅप्टन जॅक स्पॅरो

_/\_

पायाचा फोटो पाठवं. आणि कुरियरनी तीर्थ दिलस तरी चालेलं.

पॉइंट ब्लँक's picture

27 May 2015 - 5:36 pm | पॉइंट ब्लँक

+१

पॉइंट ब्लँक's picture

27 May 2015 - 5:37 pm | पॉइंट ब्लँक

एकदम सोपं करून सांगितलं आहे.

विनीत संखे's picture

27 May 2015 - 5:56 pm | विनीत संखे

एचटीएमेलच्या नावाने चांगभलं…
पण प्रतिक्रियाकर्त्यांनी आई बहिण करून टाकलीये ….

श्रीरंग_जोशी's picture

27 May 2015 - 7:18 pm | श्रीरंग_जोशी

सर्व प्रतिसादकांचे धन्यवाद. बरेच प्रतिसाद वाचून समाधान लाभले. प्रतिसादांमध्ये उपस्थित झालेल्या मुद्द्यांवर सवडीने लिहितो.

marquee चा उल्लेख जाणूनच टाळला होता. १६ वर्षांपूर्वी जेव्हा प्रथमच एचटीएमएल शिकलो होतो तेव्हा प्रत्येक पेजवर किमान एक marquee वापरायचो. पण शिक्षकांनी समजावून सांगितलं की त्याच्या वापरात गंमत वाटत असली तरी त्यामुळे वाचकांचे लक्ष विचलीत होते अन एवढेच नव्हे तर आजूबाजूला असणार्‍यांचेही लक्ष एखाद्याच्या ब्राउझिंगकडे वेधले जाते. आज जालावरही marquee चा वापर क्वचितच आढळतो.

मिपावरही marquee चा वापर टाळावा ही सर्वांना विनंती. बरेच मिपाकर अन मिपावाचक हापिसातून मिपा उघडतात. त्यांची उगाचच गैरसोय होऊ शकते.

सतिश गावडे's picture

27 May 2015 - 10:52 pm | सतिश गावडे

मलाही एचटीएमेल शिकायची आहे. आता उद्यापासून यातल्या एकेक गोष्टी शिकेन म्हणतो. एखादे बिगिनरसाठीचे पुस्तक सुचवा ना.

बहुगुणी's picture

28 May 2015 - 1:34 am | बहुगुणी

वरती कंजूस यांनी म्हंटल्याप्रमाणे चित्राच्या बाजूस मजकूर देता येणं हेही HTML code ने करता येतं.
(table)
(tr)
(td)(img ...)(/td)
(td)text(/td)
(/tr)
(/table)

वरच्या कोडमध्ये फक्त ( आणि ) च्या जागी HTML चे कंस टाकायचे.
एक उदाहरण खाली:

Birds Birds (class Aves) are feathered, winged, two-legged, warm-blooded, egg-laying vertebrates. Birds are characterised by feathers, a beak with no teeth, the laying of hard-shelled eggs, a high metabolic rate, a four-chambered heart, and a lightweight but strong skeleton. Birds have more or less developed wings; the only known species without wings was the moa, which is generally considered to have become extinct in the 16th century. Wings are evolved forelimbs, and most bird species can fly. Flightless birds include ratites, penguins, and diverse endemic island species. Some species of birds, particularly penguins and members of the duck family, are adapted for swimming.
श्रीरंग_जोशी's picture

28 May 2015 - 1:51 am | श्रीरंग_जोशी

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

संपूर्ण पान पांढरे शुभ्र असताना हा पार्श्वरंग वाचकांचा रसभंग करू शकतो. तसेच टेबलची बॉर्डर शून्य करूनही ती डिफॉल्ट स्टाइलशीटमुळे घालवता येत नाही.

वेबपेजेसवर प्रत्यक्षात टेबल्सचा भरपूर वापर करूनही वाचकाला जाणवणार पण नाही अशा प्रकारे टेबल्सचे अस्तित्व लपवले जात असते. सद्यपरिस्थितीमध्ये मिपावर ते शक्य नाही.

माझ्या लेखमालिकेतील पहिल्या तीन भागांत मी टेबल्सचा वापर केला आहे. तसेच या प्रतिसादातही केला आहे.
वर यसवायजी यांच्या प्रतिसादातही टेबल्सचा वापर आहे.

एखाद्या सोप्या उपायाने टेबलसाठी असणार्‍या मिपावरील डिफॉल्ट प्रॉपर्टीज लोकली ओव्हरराईड करता आल्या असत्या तर मी जागोजाग टेबल्सचा वापर केला असता :-) . जालावर जे ही उपाय दिसले ते बरेच क्लिष्ट होते.

कंजूस's picture

28 May 2015 - 7:03 am | कंजूस

लेखातच "शेवटी जा" , "वरती/सरुवातीला जा" ,"अमुक ठिकाणी जा" यासाठी &lt a href="LINK?????" &gt इथे जा &lt/a &gt मध्ये #LINK ची योजना कशी करायची ?

हे फार उपयुक्त आहे परंतू कोणी वापरलेले पाहिले नाही.

श्रीरंग_जोशी's picture

28 May 2015 - 7:35 am | श्रीरंग_जोशी

त्या लेखामध्ये विविध भागांना id द्यायचे. id चे नाव # ने सुरू करायचे. नंतर दुवा देताना हे #आयडीनाम href म्हणून वापरायचे .

उदा.

<p id = "#top" >लेखाची सुरुवात:

२ <a href="#middle">लेखाचा मध्य</a>
३ <a href="#end">लेखाचा शेवट</a>

</p>
<br>

<p id = "#middle" > लेखाचा मध्य:
१ <a href="#top">लेखाची सुरुवात</a>
२ <a href="#end">लेखाचा शेवट</a>

</p>
<br>

<p id = "#end"> लेखाचा शेव::
१ <a href="#top">लेखाची सुरुवात</a>
२ <a href="#middle">लेखाचा मध्य</a>
</p>

जर दुसर्‍या पेजवरच्या id चा थेट दुवा द्यायचा असल्यास दुव्याच्या कोडमध्ये त्या पेजच्या दुव्याला #आयडीनाम जोडायचे.

या प्रश्नासाठी खरंच धन्यवाद. खूप उपयुक्त सोय आहे ही खासकरून लेख फार मोठा असतो तेव्हा.

धन्यवाद श्रीरंग.आता करून पाहतो.ही सोय पयर्यटनाचे धागे लिहितंना वापरायला हवी.
ठिकाण
१)काय पाहावे
२)कसे जावे
३)काय मनोरंजन
४)हॅाटेल(राहाणे)
५)हॅाटेल(खाणे)
६)काय काळजी घ्यावी सुचना
असे वर लिहून हव्या असलेल्या माहितीसाठी झटकन जाता आले पाहिजे.

वल्लीचे लेण्यांचे धागे मोठे आहेत आणि ते सहज बदल करूही शकतील.
आपण जसे पर्यटन धागे लिहून काढतो तसे इतर ठिकाणी नसते .त्यांना सुघडstructured लागतात.उदा० holidayiq dot com , virtualtourist dot com.

श्रीरंग_जोशी's picture

28 May 2015 - 9:11 am | श्रीरंग_जोशी

चांगली गोष्ट आहे. ही पद्धत मिपावर रुळल्यास वाचकांची खूपच सोय होईल.

अवांतर - आपल्या मिपावर प्रत्येक प्रतिसादाला आयडी दिला जातो. अन प्रतिसादाचा दुवा पाहिला असता त्यात #आयडीनाम दिसते.

http://www.misalpav.com/comment/700195#comment-700195

चित्रगुप्त's picture

28 May 2015 - 11:48 am | चित्रगुप्त

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

श्रीरंग_जोशी's picture

28 May 2015 - 4:29 pm | श्रीरंग_जोशी

चित्रगुप्त

यासाठी वापरलेले कोड
<font color = "blue">चि</font><font color = "red">त्र</font><font color = "green">गु</font><font color = "silver">प्त</font>

अभिरुप's picture

28 May 2015 - 5:34 pm | अभिरुप

मस्त माहिती

अभिरुप's picture

28 May 2015 - 5:38 pm | अभिरुप

भिरु

चौकटराजा's picture

28 May 2015 - 6:16 pm | चौकटराजा

आता तुम्हाला इथे एखादे चित्र स्पेशल कॅरॅक्टर वापरून रंगीत असे काढता येईल.

चौकटराजा's picture

28 May 2015 - 6:20 pm | चौकटराजा

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

सभ्य माणुस's picture

28 May 2015 - 8:08 pm | सभ्य माणुस

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

सानिकास्वप्निल's picture

29 May 2015 - 12:27 am | सानिकास्वप्निल

उत्तम माहितीपूर्ण लेख.
धन्यवाद.

रुपी's picture

29 May 2015 - 1:07 am | रुपी

उपयुक्त धागा!

ज्ञानोबाचे पैजार's picture

29 May 2015 - 10:47 am | ज्ञानोबाचे पैजार

धन्यवाद जोशीसर,
फारच उपयूक्त आणि माहितीपूर्ण धागा.
वाखु साठवली आहे.

पैजारबुवा,

पिलीयन रायडर's picture

29 May 2015 - 12:56 pm | पिलीयन रायडर

फारच उपयुक्त लेख. सवड मिळताच प्रयोग करुन बघेनच!

नवीन
मी आंबा खाल्ला नाही.
=[mark]मी[/mark] आंबा खाल्ला नाही.

इथे [ [ ] ] हे कंस काढून HTMLचे कंस टाकायचे.

डॉ सुहास म्हात्रे's picture

1 Jun 2015 - 12:14 am | डॉ सुहास म्हात्रे

मी आंबा खाल्ला नाही. मी बाठे उचलणार नाही.

जमलं ! :)

मस्त .. निवांत वाचतो हा धागा एकदा... खुप उशिरा पाहिला हा धागा..
आधी पाहिला पाहिजे होता

आपल्याला एखाद्या प्रतिसादातील काही मजकूर दाखवून त्याबद्दल लिहायचे आहे तर त्यासाठी एक तयार मसुदा (=templet) करून ठेवू शकतो.-

वरच्या एकाप्रतिसादात [mark]+++[/mark]लिहिले आहे मलाही हेच म्हणायचे आहे.

हे वापरताना हवा असलेला मजकूर +++च्या जागी कॅापपेस्ट करायचा.उदा० चौकटराजा यांचा केला-

चौकटराजा - Thu, 28/05/2015 - 18:20


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

श्रीरंग_जोशी's picture

5 Jun 2015 - 8:30 am | श्रीरंग_जोशी

एचटीएमएल कोडचे टेम्प्लेट बनवून ठेवण्याची कल्पना एकदम उपयुक्त वाटली.

target = "_blank" हे जवळपास अडीच तीन वर्षांपासून माझ्या जीमेलच्या ड्राफ्ट इमेलमध्ये विराजमान आहे. ड्राफ्ट इमेल अशासाठी की हा मजकूर (ड्राफ्ट फोल्डरमध्ये) नेहमी वर राहू शकतो. मिपावर मराठीत टंकत असताना दुवे देताना केवळ कॉपी पेस्ट करणे सोपे जाते.

त्या ड्राफ्ट इमेलमध्ये काही काळापासून type = "circle" अन ₹ हे पण विराजमान झाले आहेत.

सुधांशुनूलकर's picture

31 May 2015 - 8:00 pm | सुधांशुनूलकर

धन्यवाद. अतिशय उपयुक्त लेख.

मी आजच लिहिलेल्या लेखात काही गोष्टींचा वापर केला आहे.
थोडा अभ्यासही सुरू केला आहे.

प्रमोद देर्देकर's picture

2 Jun 2015 - 4:59 pm | प्रमोद देर्देकर

रंगाशेठ वर वापरलेले सर्व प्रकारा व्यतिरिक्त अजुन एक ऑनमाउसओव्हर आणि ऑनमाउसआउट हे दोन प्रकार मला मिपावर अजुन वापरता आलेले नाहियेत की ज्यामुळे लेखाची जागा वाचेल.


सं.पं.ना यासाठी विचारणा केली होती पण काही एचटीएमएल पॉलोसी धोरणा वगैरे कारणामुळे करु शकत नाही असे कळले.

श्रीरंग_जोशी's picture

4 Jun 2015 - 6:07 am | श्रीरंग_जोशी

या प्रश्नासाठी धन्यवाद.
मिपाच्या डीफॉल्ट सिएसएसमुळे आपल्याला असे इफेक्ट्स मिळवणे तांत्रिकदॄष्ट्या शक्य होणार नाही.

ज्यामुळे लेखाची जागा वाचेल.

हे इफेक्ट्स देऊन लेखाची जागा कशी वाचेल याबाबत कुतूहल आहे. एकाच जागेत दोन चित्रे दाखवता येतील हा माझा एक अंदाज.

बादवे मिपाच्या हेडरमधील दुव्यांवर ऑनमाउसओव्हर आणि ऑनमाउसआउटवर फॉन्टकलर बदलाचे इफेक्ट्स दिसत आहेत. अर्थात ते सिएसएसद्वारे नियंत्रित केलेले दिसत आहे.