HTML आणि CSS कोड वापरून लेखन सादर करणे.
HTML FORMATTING
अनुक्रमणिका
१ ) गाभा
२ ) परिच्छेदाची पहिली ओळ पुढे सुरू करणे
३ ) रंगीत परिच्छेद
४ ) उभा फोटो आणि बाजूला लेखन
५ ) आडवा फोटो आणि बाजूला लेखन
६ )छोटा युट्युब प्लेअर आणि माहिती देणे
७ ) शब्द/वाक्य रंगीत/मोठे करणे
८ ) परिच्छेद सूची
गाभा
एचटीएमेल कोड वापरून आपल्या लेखनाचे किंवा प्रतिसादाचे दृष्य स्वरूप कसे बदलायचे ते इथे पाहू. या कोडचे सतत प्रमाणिकरण आणि सुधारणा केल्या जात असतात त्यामुळे आपण शक्यतो नवीन कोड वापरणे अपेक्षित असते.
सध्या प्रचलीत कोड HTML5 आहे. जुन्या HTML4 मधून काही गोष्टी गाळण्यात आल्या आहेत. त्या बदल्यात CSS वापरणे गरजेचे आहे. या सर्व तांत्रीक गोष्टी बाजूला ठेवून थेट काही उपयोगी 'तयार मसुदा' ( Templates ) पाहुया.
मसुदा (अ )एका नोटमध्ये तयार करून ठेवणे आणि तो ( ब )तपासून पाहणे गरजेचे आहे कारण
मिसळपाव साईटवर काही ठिकाणी लेखन प्रसिद्ध केल्यावर संपादन करून सुधारता येत नाही.
(अ )-१ मोबाईल android असेल तर त्यात बरीच नोट apps आहेत. त्यातले एक कलर नोट.
या कलर नोट
( https://play.google.com/store/apps/details?id=com.socialnmobile.dictapps.notepad.color.note ) app मध्ये कोड आणि लेखन लिहून तयार करणे सोपे आहे.-
( ब )मसुदा टेस्टिंग
(ब )-१ मिपा चौकटीतच टेस्ट करणे.
म्हणजे असं की एचटीएमेल कोडचे टेंम्प्लेट वापरून लेखन चौकटीत टाकून ते पाठवा / प्रकाशित करा बटण क्लिक करण्याअगोदर आपल्याला हवे तसे उमटते आहे का हे तपासण्यासाठी वरच्या नेविगेशन बारमधल्या डोळ्याच्या खुणेवर 👁 क्लिक करावे. ते योग्य दिसले तरच प्रकाशित करा.
अन्यथा फक्त कोडच छापला जाईल.
(ब )-२ दुसरा एक उपाय म्हणजे एचटीएमेल कोड टेस्टर app वापरणे
उदाहरणार्थ या
एचटीएमेल टेस्टर app
( https://play.google.com/store/apps/details?id=com.moreshare.htmlcssjstester ) मध्ये प्रथम तपासून पाहणे.
(ब )-३ कोड टेस्टिंगचा तिसरा खात्रीचा हुकमी प्रकार आपल्या हाताशीच असतो. तो म्हणजे मिपा साइटवरच टेस्ट करायचे.
कसे?
तर तुमचे अकाउंट पाहा त्यातले 'व्यक्तिगत संदेश' उघडा. To साठी तुमचेच आइडी नाव टाका. संदेशात कॉपी केलेला कोड आणि लेखन टाकून तुम्हालाच पाठवा. आलेला संदेश उघडून तपासा. बरोबर असेल तर formatting झालेले दिसेल. चूक झाल्यास मूळ नोटमध्ये सुधारून परत संदेश पाठवा. या पद्धतीत तो तपासला जाईल आणि सुधारणा तुमच्याच हातात आहे. शिवाय मोबाईल किंवा कंपुटर वापरणाऱ्या दोघांना सोयीचं.
गाभा समाप्त
२ )परिच्छेदाची पहिली ओळ पुढे सुरू करणे
लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन.
परिच्छेद indent'चे टेम्प्लेट
<p style="text-indent:25%;" > लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन.</p>
३ )रंगीत परिच्छेद
हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे.
परिच्छेद. . .साधे लेखन . .साधे लेखन . .साधे लेखन . .साधे लेखन . .साधे लेखन . .
हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे.
परिच्छेद. . . . .साधे लेखन . .साधे लेखन . .साधे लेखन . .साधे लेखन . .साधे लेखन . .
या रंगीत फरिच्छेदाचे टेम्प्लेट
<p style="color:blue" > हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. हे लेखन निळे आहे. </p> <p>परिच्छेद. . .साधे लेखन . .साधे लेखन . .साधे लेखन . .साधे लेखन . .साधे लेखन . .</p> <p style="color:red" > हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे. हे लेखन लाल आहे.</p> <p>परिच्छेद. . . . .साधे लेखन . .साधे लेखन . .साधे लेखन . .साधे लेखन . .साधे लेखन . .</p> (( टेम्प्लेटात जिथे blue /red दिसत आहे तो शब्द बदलून yellow/green/brown/orange/grey केल्यास रंग बदलेल.))
४ )उभा फोटो आणि बाजूला लेखन

लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन.
लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन.
उभा फोटो आणि बाजूला लेखनचे टेम्प्लेट
<div> <div style="float:left;width:185;padding:5px;border:2px solid orange;height:280;"><img src="इमेजलिंक" width="170"/></div><p style="text-align:right;" > लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. </p></div> <div style=" clear: both;"></div> <p style="color:blue;" > लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. </p><hr><br/>
(( टेम्प्लेटात 'इमेजलिंक' दिली आहे तिथे लिंक टाकायची आहे. ))
५ )आडवा फोटो आणि लेखन

लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन.
लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन.
आडवा फोटो आणि लेखनचे टेम्प्लेट
<div> <div style="float:left;width:185;padding:5px;border:2px solid orange;height:110;"><img src="इमेजलिंक" width="170"/></div><p style="text-align:right;" > लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. </p></div> <div style=" clear: both;"></div> <p style="color:blue;" > लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. </p><hr><br/>
(( टेम्प्लेटात 'इमेजलिंक' दिली आहे तिथे लिंक टाकायची आहे. ))
६ )छोटा युट्युब प्लेअर आणि माहिती देणे
माथेरान पनोरमा पॉइंट. YouTube च्या लिंकमध्ये youtu_dot_be/इथे किंवा youtube_dot_com/watch?V=इथे जी अकरा characters असतात ती कॉपी करून टेम्प्लेटात 12345678910 च्या जागी बदलायची आणि सर्व कॉपी पेस्ट करायचे.परिच्छेद१ आणि परिच्छेद२ इथे त्या विडिओबद्दल माहिती लिहा.
परिच्छेद२
छोटा युट्युब प्लेअर आणि माहिती देण्याचे टेम्प्लेट
<div> <div style="float:left;width:185;padding:5px;border:2px solid black;height:110;"><iframe width="170" height="95" src="https://www.youtube.com/embed/12345678910" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div><p style="text-align:right;" > परिच्छेद१.</p></div> <div style=" clear: both;"></div> <p>परिच्छेद२ </p><hr><br/>
७) शब्द/वाक्य रंगीत/मोठे करणे
लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन.
br /> शब्द/वाक्य रंगीत करणे याचे टेम्प्लेट
लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन <span style="color:green;">लेखन </span>लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन. <span style="color:blue;font-size: 24px;"> लेखन लेखन लेखन लेखन लेखन लेखन.</span> लेखन लेखन लेखन लेखन लेखन लेखन. लेखन लेखन लेखन लेखन लेखन लेखन.
(( आपल्या लेखनाचा font-size: 16px असतो, त्यामुळे थोडी मोठी अक्षरे करण्यासाठी font-size: 20px ते 26px करावी. ))
परिच्छेद सूची
८) परिच्छेद सूची करण्याचे टेम्प्लेट
<p>परिच्छेद सूची </p> <p>१ ) <a href="#परिच्छेद पहिला"><b>परिच्छेद पहिला</b> </a><br /> ( कककककक )</p> <p>२ ) <a href="#परिच्छेद दुसरा"> <b>परिच्छेद दुसरा</b> </a><br /> ( खखखखखख खखखखखखखख )</p> <p>३ ) <a href="#परिच्छेद तिसरा"><b> परिच्छेद तिसरा </b> </a><br /> ( गगगगगगगगगगगगगग)</p> <p>४ ) <a href="#परिच्छेद चौथा"><b> परिच्छेद चौथा </b> </a><br /> ( घघघघघघघघघघघघघघघ )</p> <p>५ ) <a href="#परिच्छेद पाचवा"><b>परिच्छेद पाचवा </b> </a><br /> ( चचचचचचचचचचचचच )</p> *********************************<br /> १ )</p> <p id="परिच्छेद पहिला" name="परिच्छेद पहिला"> <b> परिच्छेद पहिला </b></p> <p> <br /> कककककक कककककक कककककक <p> <br /><br /><a href="#परिच्छेद सूची">परिच्छेद सूचीकडे जा </a></p> <p> २) <p id="परिच्छेद दुसरा" name="परिच्छेद दुसरा"><br /> परिच्छेद दुसरा खखखख<br />खख खखखखखखखख खखखखखख खखखखखखखख खखखखखख खखखखखखखख <p> <br /><br /><a href="#परिच्छेद सूची">परिच्छेद सूचीकडे जा </a></p> ३) <p id="परिच्छेद तिसरा" name="परिच्छेद तिसरा"><br /> परिच्छेद तिसरा<br /> गगगगगगगगगगगगगग गगगगगगगगगगगगगग गगगगगगगगगगगगगग <p> <br /><br /><a href="#परिच्छेद सूची">परिच्छेद सूचीकडे जा </a></p> ४) <p id="परिच्छेद चौथा" name="परिच्छेद चौथा"><br /> परिच्छेद चौथा<br /> घघघघघघघघघघघघघघघ<br /> घघघघघघघघघघघघघघघ घघघघघघघघघघघघघघघ <p> <br /><br /><a href="#परिच्छेद सूची">परिच्छेद सूचीकडे जा </a></p> ५) <p id="परिच्छेद पाचवा" name="परिच्छेद पाचवा"><br /> परिच्छेद पाचवा<br /> चचचचचचचचचचचचच<br /> चचचचचचचचचचचचच<br /> चचचचचचचचचचचचच<br /> <p> <br /><br /><a href="#परिच्छेद सूची">परिच्छेद सूचीकडे जा </a></p> सूचना आणि दुरुस्तीचे स्वागत आहे. _______________________ 2020_12_13 HTML tables बद्दल विचारणा आली आणि त्यासाठी कोड लिहिण्याची खटपट करण्यापेक्षा - टेबलचा कोड लिहीत बसण्यापेक्षा रेडीमेड टेबल कोड देणारी साइट उपयोगी वाटली. https://www.quackit.com/html/html_table_generator.cfm इथे हवा तसा लेआऊट दिल्यावर टेबल आराखड येतो आणि त्याचा कोडही येतो. त्या कोडमध्ये आपला डेटा भरायचा आणि DOCTYPE HTML, head tags जोडायचे की काम सोपं आहे. उदाहरणार्थ| name | age |
|---|---|
| ajay | 15 |
| maya | 13 |
| suresh | 20 |
प्रतिक्रिया
वाह... खुपच उपयुक्त माहिती...
चिकाटी ...
.
हा धागा आवश्यक होता.
तीनचार वर्षांपूर्वी marquee
अगदी बरोबर ..
marquee चा गैरवापर कसा होऊ
HTML आणि CSS चा वापर
अजून एक सोपा प्रकार...
< style="border-radius:25px;background:#65c368;padding:20px;width:200px;height:150px;text-align:center"
गोलाकार कोपरे आणि मध्यभागी मजकूर तसेच बॉक्स शॅडो असलेला डब्बा
style="border-radius:25px;background:#65c368;padding:20px;width:200px;height:150px;text-align:center;box-shadow:3px 3px 5px 6px #90EE90;"
गावडे सर,
इथे
जमले आता. धन्यवाद कंजूसजी
कलर पिकर साइटवरून
RGB() फंक्शन वापरले तरी चालेल
background:%2365c368<\div>
इथे r म्हणजे लाल रंग २५५ व उरलेले दोन रंग ० म्हणजे अजिबात नाहीत.
background: rgb(255,0,0)<\div>
बॉक्स शॅडोची चाचणी जमली.
गैरवापर म्हणजे अतिरेक
सगा,
होय, शक्य आहे...
style="margin:20px;border-radius:50%;width: 100px;height:100px;box-shadow:0 0 10px 15px #FDB813;"
या उद्योगावरून एक आठवण
मला आठ्वते त्यात वेट ,प्ले
पुर्वी कॉंम्पुटरवर एक अ
होय ...
वाटसप/फेसबुक मेसेजमध्ये हे
अतिशय उपयुक्त धागा!
तेच म्हणतो.
काही शोधू लागलो इंटरनेटवर की
वाखू साठवली आहे.
मदनबाण.....
आजची स्वाक्षरी :- Yeh Jo Teri Payalon Ki Chan Chan Hai... :- Masoomकंकाका,
लेख आवडला
ही चौकटपण ढापणार आहे व त्यात
चौकट तयार करता आली.
आयर्न मॅन
@ शाम भागवत,
प्रयत्न चालू आहेत.
सगळं व्यवस्थित जमलं.
Firefox browser मध्ये हा लेख
हो. तसंच शिकतोय. :)
@शाम भागवत, नव्या स्तोत्र
आपली कृपा नी काय. _/\_
चांगला उपयुक्त धागा.
जरा हटके... रंगीत शिर्षपट्टी
<div style="border-radius:25px;padding:20px;height:50px;text-align:center; background-image: linear-gradient(red, yellow);">रंगीत शिर्षपट्टी</div>
रंगीत शिर्षपट्टी
<div style="padding:20px;height:50px;text-align:center;background-image: linear-gradient(red, yellow);"> रंगीत शिर्षपट्टी</div>
रंगीत शिर्षपट्टी
<div style="padding:20px;height:50px;text-align:center;background-image: linear-gradient(to right, red , yellow);"> रंगीत शिर्षपट्टी</div>
रंगीत शिर्षपट्टी
<div style="padding:20px;height:50px;text-align:center;background-image: linear-gradient(red, yellow, green);"> रंगीत शिर्षपट्टी</div>
छान धागा
Form आणि input data हेसुद्धा
इरसाल भाऊ सकाळी खफवर खालील
मस्त माहिती..
छान माहिती
टेबल एचटीएमएल
सोपं आहे.
सोपं आहे.
सोपं आहे.
स्मायली
😀 😀 😁 😁 😂 😂 😄 😄 😅 😅 😆 😆 या ऐवजी थोडासा बदल करून -स्मायली
😀 😀 😁 😁 😂 😂 😄 😄 😅 😅 😆 😆