HTML आणि CSS कोड वापरून लेखन सादर करणे.

कंजूस's picture
कंजूस in तंत्रजगत
17 May 2020 - 6:16 pm

लेखन सादर करताना ते जरा आकर्षक दिसावे यासाठी हे कोड आहेत. मी काही नेटवरचे लेख वाचून हे जमवले आहेत. करून पाहा.

HTML आणि CSS कोड वापरून लेखन सादर करणे.
HTML FORMATTING
अनुक्रमणिका

१ ) गाभा
२ ) परिच्छेदाची पहिली ओळ पुढे सुरू करणे
३ ) रंगीत परिच्छेद
४ ) उभा फोटो आणि बाजूला लेखन
५ ) आडवा फोटो आणि बाजूला लेखन
६ )छोटा युट्युब प्लेअर आणि माहिती देणे
७ ) शब्द/वाक्य रंगीत/मोठे करणे

८ ) परिच्छेद सूची
गाभा

एचटीएमेल कोड वापरून आपल्या लेखनाचे किंवा प्रतिसादाचे दृष्य स्वरूप कसे बदलायचे ते इथे पाहू. या कोडचे सतत प्रमाणिकरण आणि सुधारणा केल्या जात असतात त्यामुळे आपण शक्यतो नवीन कोड वापरणे अपेक्षित असते.
सध्या प्रचलीत कोड HTML5 आहे. जुन्या HTML4 मधून काही गोष्टी गाळण्यात आल्या आहेत. त्या बदल्यात CSS वापरणे गरजेचे आहे. या सर्व तांत्रीक गोष्टी बाजूला ठेवून थेट काही उपयोगी 'तयार मसुदा' ( Templates ) पाहुया.

मसुदा (अ )एका नोटमध्ये तयार करून ठेवणे आणि तो ( ब )तपासून पाहणे गरजेचे आहे कारण
मिसळपाव साईटवर काही ठिकाणी लेखन प्रसिद्ध केल्यावर संपादन करून सुधारता येत नाही.
(अ )-१ मोबाईल android असेल तर त्यात बरीच नोट apps आहेत. त्यातले एक कलर नोट. या कलर नोट
( https://play.google.com/store/apps/details?id=com.socialnmobile.dictapps... ) 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 जोडायचे की काम सोपं आहे.
उदाहरणार्थ

table.GeneratedTable {
width: 100%;
background-color: #ffffff;
border-collapse: collapse;
border-width: 2px;
border-color: #ffcc00;
border-style: solid;
color: #000000;
}

table.GeneratedTable td, table.GeneratedTable th {
border-width: 2px;
border-color: #ffcc00;
border-style: solid;
padding: 3px;
}

table.GeneratedTable thead {
background-color: #ffcc00;
}

name
age

ajay
15

maya
13

suresh
20

प्रतिक्रिया

वाह... खुपच उपयुक्त माहिती...!!!

मिपावर धागे टाकताना, रंग बदलणे हे फंक्शन एखादे संभाषण लिहिण्यासाठी एकदम उपयोगी आहे.

चौकटराजा's picture

17 May 2020 - 7:59 pm | चौकटराजा

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

जव्हेरगंज's picture

17 May 2020 - 8:47 pm | जव्हेरगंज

.

प्रचेतस's picture

17 May 2020 - 7:14 pm | प्रचेतस

हा धागा आवश्यक होता.
खूपच उपयुक्त.

कंजूस's picture

17 May 2020 - 8:06 pm | कंजूस

तीनचार वर्षांपूर्वी marquee tag चा खूप गैरवापर झाला होता खरडफळ्यावर. तरी एचटीएमेलचा संयमित वापर करणे गरजेचे आहे.
क्रमांक ६) युट्युब प्लेअर देणे याचा गैरवापर होणे/ मोठेमोठे प्लेअर टाकणे ( /किंवा सिक्युरटी कारणाने )यामुळे मायबोली संस्थळाने <I frame tag काढूनच टाकला. शिवाय युट्युब विडिओची लिंक दिल्याने वाचक तिकडे साईटवर जातो, जाहिराती पाहतो हेसुद्धा आहेच.
फार रंगीत लेखन हेसुद्धा टाळले पाहिजे.
संयमित वापर केल्यास HTML आणि CSS खूप परिणामकारक वापरता येतात.
धन्यवाद.

चौकटराजा's picture

17 May 2020 - 8:16 pm | चौकटराजा

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

जव्हेरगंज's picture

17 May 2020 - 8:47 pm | जव्हेरगंज

marquee चा गैरवापर कसा होऊ शकतो कळले नाही. लोकं मजेमजेने वापरतात. ( जसं की स्माईल्या)

तसंही HTML चा वापर मिपावर खूपच कमी होतो. तो वाढायला हवा. न जाणो त्यातून कोणी creativity शोधेल. हा धागा पहा https://www.misalpav.com/node/36658 रंगीत अक्षरांचा वापर करत मी कथा लिहिली होती.

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

17 May 2020 - 9:45 pm | सतिश गावडे

HTML आणि CSS चा वापर करुन मिपावरील लेखन आकर्षक कसे बनवता येईल हे छान सोदाहरण समजावून सांगितले आहे.

अजून एक सोपा प्रकार म्हणजे बॉक्स शॅडो: style="float:left;width:400;margin: 10px;padding:10px;border:2px solid orange;height:280;box-shadow: 3px 3px 5px 6px #fed8b1;"

बॉक्स शॅडोची चाचणी

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

17 May 2020 - 10:01 pm | सतिश गावडे

गोलाकार कोपरे आणि मध्यभागी मजकूर असलेला डब्बा
<
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;"

प्रसाद_१९८२'s picture

25 May 2020 - 11:14 am | प्रसाद_१९८२

या वरच्या कोड मधे "मजकूर" कुठे टाकायचा.

कंजूस's picture

25 May 2020 - 9:42 pm | कंजूस

मजकूर इथे टाकायचा

Template
<div style="border-radius:25px;background:#65c368;padding:20px;width:200px;height:150px;text-align:center;box-shadow:3px 3px 5px 6px #90EE90;"> मजकूर इथे टाकायचा </div>

प्रसाद_१९८२'s picture

28 May 2020 - 1:42 pm | प्रसाद_१९८२

स्वातंत्र्यवीर विनायक दामोदर सावरकर यांची आज जयंती. त्यांना विनम्र
अभिवादन !
--
रंग कसा बदलायचा हे देखील सांगा.

कंजूस's picture

28 May 2020 - 3:30 pm | कंजूस

कलर पिकर वापरणे

Color picker :
https://www.w3schools.com/colors/colors_picker.asp
-----------------------------------
ही साइट कलर पिकरची आहे. टेम्प्लेटात हिरव्या रंगाचा नंबर
#90EE90
दिला आहे तिथे दुसरा कुठलाही नंबर वरच्या साइटवरून टाका ( बदला.)
प्रतिसाद तपासा. कारण काही रंगांवर काळी अक्षरे दिसत नाहीत.

शाम भागवत's picture

28 May 2020 - 4:19 pm | शाम भागवत

RGB() फंक्शन वापरले तरी चालेल. ० ते २५५ यामधील कोणताही आकडा वापरता येईल. असे तीन आकडे लाल,हिरवा व निळ्या रंगासाठी कंसात वापरायचे. दोन आकड्यामधे स्वल्पविराम वापरायचा. पण चाचणी घेत रंग तपासायला लागतात.

हा गावडे सरांचा रंग background:%2365c368<\div>

इथे r म्हणजे लाल रंग २५५ व उरलेले दोन रंग ० म्हणजे अजिबात नाहीत.background: rgb(255,0,0)<\div>

शाम भागवत's picture

25 May 2020 - 9:47 am | शाम भागवत

बॉक्स शॅडोची चाचणी जमली.

कंजूस's picture

17 May 2020 - 10:17 pm | कंजूस

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

हव्या असलेल्या रंगाची हेक्स वाल्यू/इतर नंबर मिळवण्याचे चित्र असते ते टाकायचे राहिले.

कंजूस's picture

17 May 2020 - 10:22 pm | कंजूस

सगा,
खग्रास, कंकणाकृती सूर्यग्रहणाचे चित्रही काढणे शक्य वाटू लागले आहे.

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

17 May 2020 - 11:53 pm | सतिश गावडे

हा बघा एक प्रयत्न:

style="margin:20px;border-radius:50%;width: 100px;height:100px;box-shadow:0 0 10px 15px #FDB813;"

चौकटराजा's picture

19 May 2020 - 5:06 am | चौकटराजा

1990 च्या सुमारास आमच्या कम्पनीतील पीसी वर क्विक बेसिक नावाची एक भाषा उपलब्ध होती. त्यावेळी नेट नसल्याने हे भाषा वगैरे शिकायला क्लास लाच जावे लागे. पण आता कशी ते आठवत नाही मी ती भाषा थोडीफार शिकलो व त्यातून पी सी वर गणपती ,मखर व रनिंग लाईट तयार केली होती. ( फोटो शॉप चा किडा देखील त्यावेळी जन्माला आला नसेल ) मला आठ्वते त्यात वेट ,प्ले अशा कमांड होत्या . त्यात ऑडीओ बीप मधून जन गन मन चा प्रोग्राम लिहिल्याचे आठवतेय ! हे माझे उद्योग ज्याना जमले नाहीत त्यानी साहेबाचे कान फुंकल्याचेही आठवत आहे. मजा अशी की बॅक अप ,लॉग आउट, जनरल युटीलिटी असे काही शब्द साहेब लोकांच्या कानावर फेकले की ते गांगरून जात असत.

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

21 May 2020 - 9:04 pm | सतिश गावडे

मला आठ्वते त्यात वेट ,प्ले अशा कमांड होत्या . त्यात ऑडीओ बीप मधून जन गन मन चा प्रोग्राम लिहिल्याचे आठवतेय

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

प्रसाद_१९८२'s picture

25 May 2020 - 11:20 am | प्रसाद_१९८२

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

चौकटराजा's picture

25 May 2020 - 8:07 pm | चौकटराजा

असे एक मांजर होते खरे ! पण ते काहीतरी डाउनलोड चा परिणाम म्हणून दिसायचे !

वाटसप/फेसबुक मेसेजमध्ये हे कोड activate होतात/करता येतात का?

वामन देशमुख's picture

17 May 2020 - 11:05 pm | वामन देशमुख

अतिशय उपयुक्त धागा!

तुमचं सदस्यनाम तर कंजूस आहे, मग इतकं भरभरून ज्ञान कसंकाय देताय?

;)

बाजीगर's picture

2 Jan 2021 - 10:00 pm | बाजीगर

एवढं ज्ञान उदार हस्ते वाटणारा कंजूष असूच शकत नाही.
धन्यवाद उदार काका. आपण चालतेफिरते ज्ञान-पोई आहात. कंजूष सर.

काही शोधू लागलो इंटरनेटवर की कित्येक इंग्रजी साइट्स सापडतात. त्यात भरपूर आणि संपूर्ण माहिती दिलेली असते. मराठीत माहिती देण्यासाठी वेगळी साईट कशाला? आपली मिसळपाव आहेच.

मदनबाण's picture

20 May 2020 - 8:20 pm | मदनबाण

वाखू साठवली आहे.

मदनबाण.....
आजची स्वाक्षरी :- Yeh Jo Teri Payalon Ki Chan Chan Hai... :- Masoom

शाम भागवत's picture

21 May 2020 - 12:08 pm | शाम भागवत

कंकाका,
मस्तच.
देव्यपराधक्षमापनस्त्रोतावर लेख लिहायचा होताच. पण ते काम पुढे ढकलत होतो. आता अनुक्रमणिका बनवून मग टाकतो. अनुक्रमणिका तयार करणच्या कल्पनेमुळे उत्साह मिळालाय!!!

गावडे सरांनी सांगितल्याप्रमाणे बाॅक्सपण तयार करून त्यात लेखाचे नांव टाकतो.
_/\_

प्रा.डॉ.दिलीप बिरुटे's picture

21 May 2020 - 1:41 pm | प्रा.डॉ.दिलीप बिरुटे

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

अजून येऊ द्या.

प्रा.डॉ.दिलीप बिरुटे

शाम भागवत's picture

21 May 2020 - 8:14 pm | शाम भागवत

ही चौकटपण ढापणार आहे व त्यात अनुक्रमणिका हा शब्द लिहिणार आहे.
:)

शाम भागवत's picture

25 May 2020 - 9:50 am | शाम भागवत

चौकट तयार करता आली.
लाईन मारण्यासाठी टॅग चालेना. मग ह्या चौकटीचीच दुहेरी करून वापरली.

आयर्नमॅन's picture

21 May 2020 - 1:56 pm | आयर्नमॅन

आयर्न मॅन

कंजूस's picture

21 May 2020 - 2:45 pm | कंजूस

@ शाम भागवत,

दोन प्रकारच्या अनुक्रमणिका आहेत.
१) लेख जेव्हा मोठा असतो तेव्हा त्यात वाचकाला भराभर वर खाली अचूक ठिकाणी /परिच्छेदाकडे जाता यावे म्हणून 'नेविगेशन' अनुक्रमणिका करता येते. ती या लेखात वरती वापरली आहे. त्या आइटेमकडून परत 'TOP' ला जाण्याचे नेविगेशन हँडल इथे टाकलेले नाही पण तेही टाकता येते.
२) लेखमालिका असते तेव्हा कोणत्या लेखात काय आहे हे दोन ओळीत लिहिलेली अनुक्रमणिकाही टाकता येते.
-----------------

संस्थळाचे सभासद नसलेले वाचनमात्र असतात त्यांना जर तुमचे सर्व लेखन वाचायचे असेल तर ती लिंक लेखकाने स्वत:च आपल्या प्रत्येक लेखाच्या शेवटी द्यावी.

--------–---------------–------------

बिरुटे सर, आयर्नमन जमलंय की!!

---------------------------------------

HTML मध्ये <a></a> tag ( anchor tag) हा सर्वात महत्त्वाचा tag आहे.

शाम भागवत's picture

21 May 2020 - 5:18 pm | शाम भागवत

प्रयत्न चालू आहेत.
नेव्हीगेशन लिंकपण देतोय.
पहिली ट्रायल व्यवस्थित आली. लेख २०-२५ पानांचा होतोय म्हणून तर अनुक्रमणिका असावी असं वाटतच होतं.
त्यामुळे असं वाटतंय की, तुमचा धागा योग्य वेळेस आला.

तुमच्या कडे मदत मागितली की, तुमचा हात नेहमीच पुढे येतो.
पण यावेळेस मला कसली मदत पाहिजे, हे मलाही कळायच्या अगोदर तुम्ही मदत केली आहे. :)
_/\_

शाम भागवत's picture

25 May 2020 - 9:50 am | शाम भागवत

सगळं व्यवस्थित जमलं.

कंजूस's picture

21 May 2020 - 7:03 pm | कंजूस

Firefox browser मध्ये हा लेख उघडला की वरती ब्राउजरच्या नेविगेशन मेनूमध्ये जाऊन >> page >> view page source केल्यावर सर्व एचटीएमेल कोड (मिपाच्या पेजसह) दिसेल. तिथे नेविगेशन अनुक्रमणिका कोड पाहता येईल. तसे सोपे काम आहे. पण अगोदर लिहिलेल्या लेखात बदल करायचे झाल्यास तो लेख काथ्याकुट/जनातलं मनातलं/ साहित्य प्रकारात असल्यास संपादन करता येत नाही.

शाम भागवत's picture

21 May 2020 - 8:12 pm | शाम भागवत

हो.
तसंच शिकतोय.
:)

@शाम भागवत, नव्या स्तोत्र लेखात जंपिंग अनुक्रमणिकेचा छान वापर केलात.

शाम भागवत's picture

25 May 2020 - 10:09 am | शाम भागवत

आपली कृपा नी काय.
_/\_

कुमार१'s picture

16 Jun 2020 - 11:14 am | कुमार१

चांगला उपयुक्त धागा.
मजकुराभोवती रंगीत चौकट आणि रंगीत परिच्छेद या गोष्टी शिकलो आणि अन्यत्र वापर केला.
धन्यवाद

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

17 Jun 2020 - 10:00 pm | सतिश गावडे

रंगीत शिर्षपट्टी

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

सुमो's picture

18 Jun 2020 - 5:32 am | सुमो

उपयुक्त माहिती मिळते आहे. आभार कंकाका आणि सतिशजी.

Padding 10px करून पाहिली रंगीत पट्टी.

रंगीत शीर्षपट्टी

कंजूस's picture

18 Jun 2020 - 7:23 am | कंजूस

Form आणि input data हेसुद्धा उपयोगाचे आहे.
शिवाय
Collapsible index ( wiki पानावर असते तशी )
यासाठी JavaScript लागते.
त्यासाठी
Learn JavaScript offline ( https://play.google.com/store/apps/details?id=com.JustForYouLimited.Lear... )
हे एक app. बरीच आहेत.

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

30 Jul 2020 - 8:04 pm | प्रमोद देर्देकर

इरसाल भाऊ सकाळी खफवर खालील प्रश्न विचारला होता आणि कंकाका नी जी लिंक दिली ते पाहून गोंधळून गेलोय.
...............
शालेय शिक्षणासाठी मांडी संगणाक( लॅपटॉप) घ्यायचा असल्यास कोणत्या कं .नी चा चांगला आहे.

अनिकेत कवठेकर's picture

29 Aug 2020 - 11:38 am | अनिकेत कवठेकर

अतिशय कामाची माहिती..पुलेशु

टीपीके's picture

29 Aug 2020 - 12:36 pm | टीपीके

छान माहिती

प्रा.डॉ.दिलीप बिरुटे's picture

12 Dec 2020 - 12:04 pm | प्रा.डॉ.दिलीप बिरुटे

प्लीज.... !

दोन बाय दोन, तीन बाय तीन. असे.

कंजूस's picture

12 Dec 2020 - 1:00 pm | कंजूस
कंजूस's picture

12 Dec 2020 - 1:01 pm | कंजूस
कंजूस's picture

12 Dec 2020 - 1:08 pm | कंजूस

एचटीएमेल कोड शिकणे म्हणजे कोड कॉपी करणे/ ढापणे.
---------–----------------------

फार सोपे आहे.
टर्मिनेटरने जो इमोजी लेख दिला आहे त्यात HTML table code ready आहे. त्या कोडमध्ये किंचित बदल केला की टु बाइ टु करता येते.

उदाहरणार्थ लेखाप्रमाणे -

स्मायली
&#128512;
😀
&#128513;
😁
&#128514;
😂
&#128516;
😄
&#128517;
😅
&#128518;
😆

या ऐवजी थोडासा बदल करून -

स्मायली
&#128512;
😀
&#128513;
😁

&#128514;
😂
&#128516;
😄

&#128517;
😅
&#128518;
😆