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

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

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

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

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

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

मसुदा (अ )एका नोटमध्ये तयार करून ठेवणे आणि तो ( ब )तपासून पाहणे गरजेचे आहे कारण
मिसळपाव साईटवर काही ठिकाणी लेखन प्रसिद्ध केल्यावर संपादन करून सुधारता येत नाही.
(अ )-१ मोबाईल android असेल तर त्यात बरीच नोट apps आहेत. त्यातले एक कलर नोट. या कलर नोट
( https://play.google.com/store/apps/details?id=com.socialnmobile.dictapp… ) app मध्ये कोड आणि लेखन लिहून तयार करणे सोपे आहे.-
( ब )मसुदा टेस्टिंग
(ब )-१ मिपा चौकटीतच टेस्ट करणे.
म्हणजे असं की एचटीएमेल कोडचे टेंम्प्लेट वापरून लेखन चौकटीत टाकून ते पाठवा / प्रकाशित करा बटण क्लिक करण्याअगोदर आपल्याला हवे तसे उमटते आहे का हे तपासण्यासाठी वरच्या नेविगेशन बारमधल्या डोळ्याच्या खुणेवर 👁 क्लिक करावे. ते योग्य दिसले तरच प्रकाशित करा.
अन्यथा फक्त कोडच छापला जाईल.
(ब )-२ दुसरा एक उपाय म्हणजे एचटीएमेल कोड टेस्टर app वापरणे
उदाहरणार्थ या
एचटीएमेल टेस्टर app
( https://play.google.com/store/apps/details?id=com.moreshare.htmlcssjste… ) मध्ये प्रथम तपासून पाहणे.

(ब )-३ कोड टेस्टिंगचा तिसरा खात्रीचा हुकमी प्रकार आपल्या हाताशीच असतो. तो म्हणजे मिपा साइटवरच टेस्ट करायचे.
कसे? तर तुमचे अकाउंट पाहा त्यातले 'व्यक्तिगत संदेश' उघडा. 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