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

कंजूस · 17/05/2020 - 18:16 · तंत्रजगत

लेखन सादर करताना ते जरा आकर्षक दिसावे यासाठी हे कोड आहेत. मी काही नेटवरचे लेख वाचून हे जमवले आहेत. करून पाहा. 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

वाचने 58072 वाचनखूण प्रतिक्रिया 59

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

मोदक 17/05/2020 - 18:24

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

चिकाटी ...

चौकटराजा 17/05/2020 - 19:59

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

.

जव्हेरगंज 17/05/2020 - 20:47

हा धागा आवश्यक होता.

प्रचेतस 17/05/2020 - 19:14

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

तीनचार वर्षांपूर्वी marquee

कंजूस 17/05/2020 - 20:06

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

अगदी बरोबर ..

चौकटराजा 17/05/2020 - 20:16

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

marquee चा गैरवापर कसा होऊ

जव्हेरगंज 17/05/2020 - 20:47

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

HTML आणि CSS चा वापर

सतिश गावडे 17/05/2020 - 21:45

HTML आणि CSS चा वापर करुन मिपावरील लेखन आकर्षक कसे बनवता येईल हे छान सोदाहरण समजावून सांगितले आहे. अजून एक सोपा प्रकार म्हणजे बॉक्स शॅडो: style="float:left;width:400;margin: 10px;padding:10px;border:2px solid orange;height:280;box-shadow: 3px 3px 5px 6px #fed8b1;"

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

अजून एक सोपा प्रकार...

सतिश गावडे 17/05/2020 - 22:01

गोलाकार कोपरे आणि मध्यभागी मजकूर असलेला डब्बा

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

गावडे सर,

प्रसाद_१९८२ 25/05/2020 - 11:14

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

इथे

कंजूस 25/05/2020 - 21:42

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

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>

जमले आता. धन्यवाद कंजूसजी

प्रसाद_१९८२ 28/05/2020 - 13:42

स्वातंत्र्यवीर विनायक दामोदर सावरकर यांची आज जयंती. त्यांना विनम्र अभिवादन !

-- रंग कसा बदलायचा हे देखील सांगा.

कलर पिकर साइटवरून

कंजूस 28/05/2020 - 15:30

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

RGB() फंक्शन वापरले तरी चालेल

शाम भागवत 28/05/2020 - 16:19

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

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

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

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

शाम भागवत 25/05/2020 - 09:47

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

गैरवापर म्हणजे अतिरेक

कंजूस 17/05/2020 - 22:17

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

सगा,

कंजूस 17/05/2020 - 22:22

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

होय, शक्य आहे...

सतिश गावडे 17/05/2020 - 23:53

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

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

या उद्योगावरून एक आठवण

चौकटराजा 19/05/2020 - 05:06

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

मला आठ्वते त्यात वेट ,प्ले

सतिश गावडे 21/05/2020 - 21:04

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

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

पुर्वी कॉंम्पुटरवर एक अ

प्रसाद_१९८२ 25/05/2020 - 11:20

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

होय ...

चौकटराजा 25/05/2020 - 20:07

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

वाटसप/फेसबुक मेसेजमध्ये हे

कंजूस 17/05/2020 - 22:24

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

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

वामन देशमुख 17/05/2020 - 23:05

अतिशय उपयुक्त धागा! तुमचं सदस्यनाम तर कंजूस आहे, मग इतकं भरभरून ज्ञान कसंकाय देताय? ;)

तेच म्हणतो.

बाजीगर 02/01/2021 - 22:00

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

काही शोधू लागलो इंटरनेटवर की

कंजूस 18/05/2020 - 00:09

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

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

मदनबाण 20/05/2020 - 20:20

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

मदनबाण.....

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

कंकाका,

शाम भागवत 21/05/2020 - 12:08

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

लेख आवडला

प्रा.डॉ.दिलीप बिरुटे 21/05/2020 - 13:41

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

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

ही चौकटपण ढापणार आहे व त्यात

शाम भागवत 21/05/2020 - 20:14

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

चौकट तयार करता आली.

शाम भागवत 25/05/2020 - 09:50

चौकट तयार करता आली. लाईन मारण्यासाठी

टॅग चालेना. मग ह्या चौकटीचीच दुहेरी करून वापरली.

आयर्न मॅन

आयर्नमॅन 21/05/2020 - 13:56

आयर्न मॅन

@ शाम भागवत,

कंजूस 21/05/2020 - 14:45

@ शाम भागवत, दोन प्रकारच्या अनुक्रमणिका आहेत. १) लेख जेव्हा मोठा असतो तेव्हा त्यात वाचकाला भराभर वर खाली अचूक ठिकाणी /परिच्छेदाकडे जाता यावे म्हणून 'नेविगेशन' अनुक्रमणिका करता येते. ती या लेखात वरती वापरली आहे. त्या आइटेमकडून परत 'TOP' ला जाण्याचे नेविगेशन हँडल इथे टाकलेले नाही पण तेही टाकता येते. २) लेखमालिका असते तेव्हा कोणत्या लेखात काय आहे हे दोन ओळीत लिहिलेली अनुक्रमणिकाही टाकता येते. ----------------- संस्थळाचे सभासद नसलेले वाचनमात्र असतात त्यांना जर तुमचे सर्व लेखन वाचायचे असेल तर ती लिंक लेखकाने स्वत:च आपल्या प्रत्येक लेखाच्या शेवटी द्यावी. --------–---------------–------------ बिरुटे सर, आयर्नमन जमलंय की!! --------------------------------------- HTML मध्ये <a></a> tag ( anchor tag) हा सर्वात महत्त्वाचा tag आहे.

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

शाम भागवत 21/05/2020 - 17:18

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

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

शाम भागवत 25/05/2020 - 09:50

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

Firefox browser मध्ये हा लेख

कंजूस 21/05/2020 - 19:03

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

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

शाम भागवत 21/05/2020 - 20:12

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

@शाम भागवत, नव्या स्तोत्र

कंजूस 25/05/2020 - 09:54

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

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

शाम भागवत 25/05/2020 - 10:09

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

चांगला उपयुक्त धागा.

हेमंतकुमार 16/06/2020 - 11:14

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

जरा हटके... रंगीत शिर्षपट्टी

सतिश गावडे 17/06/2020 - 22:00

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

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

छान धागा

सुमो 18/06/2020 - 05:32

उपयुक्त माहिती मिळते आहे. आभार कंकाका आणि सतिशजी. Padding 10px करून पाहिली रंगीत पट्टी.

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

Form आणि input data हेसुद्धा

कंजूस 18/06/2020 - 07:23

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

स्मायली

😀	😀
😁	😁
😂	😂
😄	😄
😅	😅
😆	😆

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

स्मायली

😀	😀	😁	😁
😂	😂	😄	😄
😅	😅	😆	😆