গতকাল আমি স্টিমিটে ব্যবহারযোগ্য প্রায় সবক'টি মার্কডাউন কোড নিয়ে আলোচনা করেছিলাম । আজকে দেখাবো সে গুলির বাস্তব ব্যবহার ও কয়েকটি বুটস্ট্র্যাপ div class এর প্রয়োগ ।

গতকালের পোস্টটি ভালো করে না পড়লে আজকের পোস্টটি বুঝতে পারবেন না । তাই, যাঁরা যাঁরা গতকালের পোস্টটি মিস করে গেছেন তাঁদের জন্য গতকালের মার্কডাউন সম্পর্কিত পোস্টটির লিংকটি এখানে দিলাম :

https://steemit.com/hive-129948/@rme/give-your-steemit-post-a-wonderful-look-by-using-markdown-code

এবার মূল পোস্টে আসা যাক :

---

একটি আর্টিকেল এর শুরুতে যদি ফার্স্ট লেটারটা capitalize করে অন্য্ সব লেটার থেকে কিছুটা বড় সাইজের করা যায় তবে সুন্দর একটা লুক আসে ।

T_{^{he tiger is our national animal. This creature looks beautiful but actually it's very}}

_{ferocious. In 1973, India government declared The "Royal Bengal Tiger"^[1] as the national animal. Tiger is a nocturnal animal. Specialist says that Tiger is stronger than Lion}

উপরের টেক্সটটি লক্ষ করুন । লাইনের শুরুতে "T" টা বড় সাইজের করা হয়েছে । subscript আর superscript ট্যাগ একসাথে ব্যবহার করে এটা করা হয়েছে । প্রথমে হ্যাশ ট্যাগ (#) দিয়ে হেডিং টা level-১ সাইজের করা হয়েছে , তারপরে "T" এর পরের বাকি অংশটুকু "very" শব্দটি পযর্ন্ত

<sub><sup></sup></sub>

ট্যাগ use করে ছোট করা হয়েছে । পরের টেক্সটটুকু non-bold হরফে শো করছে । "Royal Bengal Tiger" লেখাটির উপরে ছোট্ট করে [1] লেখা হয়েছে যেটা আসলে একটা হাইপারলিংক, উইকিপিডিয়ার একটি রেফারেন্স লিংক নির্দেশ করছে । এ সম্পর্কে পরে আসছি । উপরের ওই টেক্সটটি কি ভাবে লেখা হয়েছে সেটা তো বললাম এখন নিচে তার source code টা দেয়া হলো -

# T<sub><sup>he tiger is our national animal. This creature looks beautiful but actually it's very </sup></sub>
<sub>ferocious. In 1973, India government declared The <b><i>"Royal Bengal Tiger"</i></b><sup>[[1]] 
(https://en.wikipedia.org/wiki/Bengal_tiger)</sup> as the national animal. Tiger is a nocturnal animal. 
<b>Specialist</b> says that Tiger is <strong>stronger</strong> than Lion
</sub>

T_{^{he tiger is our national animal. This creature looks beautiful but actually it's very}}

_{ferocious. In 1973, India government declared The "Royal Bengal Tiger"^[1] as the national animal. Tiger is a nocturnal animal. Specialist says that Tiger is stronger than Lion}

Tiger _{^{is our national animal. This creature looks beautiful but actually it's very}}

_{ferocious. In 1973, India government declared The "Royal Bengal Tiger"^[1] as the national animal. Tiger is a nocturnal animal. Specialist says that Tiger is stronger than Lion.}

---

এ বার আসি টেক্সট কলাম এলাইনমেন্ট এর ব্যাপারে । লেফট, রাইট আর মিডল এই তিন রকমের এলাইনমেন্ট ব্যবহার করে পোস্টটিকে আরো দৃষ্টি নন্দন করা যায় :

I'm in the middle
.........................
.........................
.........................

দেখুন টেক্সটকে তিনটি আলাদা আলাদা কলামে ভাগ করে লেখা হয়েছে । এটার কোডিংও খুবই সহজ । বুটস্ট্র্যাপ 4 এর দুটি div class pull-left আর pull-right ব্যবহার করে ফ্লোটিং টেক্সট এলাইনমেন্ট টু লেফট আর ফ্লোটিং টেক্সট এলাইনমেন্ট রাইট করা হয় । আর center ট্যাগ use করে মাঝের কলমটা তৈরী করা হয় ।

<div class="pull-left">
I'm in the left.<br>
.......................<br>
.......................<br>
.......................<br>
</div>
<div class="pull-right">
I'm in the right.<br>
.......................<br>
.......................<br>
.......................<br>
</div>

<center>I'm in the middle
.........................
.........................
.........................
</center>

তিনটির বদলে দুটি কলাম করতে হলে আরো সহজ । কোডটি লক্ষ করুন -

<div class="pull-left">
I'm in the left.
.......................
.......................
.......................
</div>
Normal texts start from here......................

আউটপুট :

Normal Texts start from here...................... ...................... ...................... ...................... ...................... ...................... ...................... ...................... ...................... ......................

একই ভাবে pull-left class ব্যবহার করে টেক্সট এর বদলে যে কোন ছবিকে ফ্লোট টু লেফট এলাইনমেন্ট করে রাখা যায়, যেমন -

This my company logo, I am using this logo everywhere. Royal Macro is the name of my company. It's an IT based company in India. We're Security Researchers and Develo-pers. Although, our team is in small in size, but, our work is vast. ............. ............. ........... .................. ............... ............ .......... ............. ............. ................. ............. ............ ........... ............. ............ ........ ................ ............. ................. .............. .............. ........... ..............

কোড:

<div class="pull-left">
         
![photo.jpg](https://cdn.steemitimages.com/DQmQYjhtTE4Tm2XVrPFUrdMf4TwfE5QRAXVYa53FUzzUzZ7/photo.jpg)

</div>
This my company logo, I am using this logo everywhere. <b>Royal Macro</b> is the name of my company. It's an IT based company in India. We're Security Researchers and Develo-pers. Although, our team is in small in size, but, our work is vast. ............. ............. ........... .................. ............... ............ .......... ............. ............. ................. ............. ............ ........... ............. ............ ........ ................ ............. ................. .............. .............. ........... ..............

একই ভাবে, pull-right class ব্যবহার করে টেক্সট এর বদলে যে কোন ছবিকে ফ্লোট টু right এলাইনমেন্ট করে রাখা যায়, যেমন -

This my company logo, I am using this logo everywhere. Royal Macro is the name of my company. It's an IT based company in India. We're Security Researchers and Develo-pers. Although, our team is in small in size, but, our work is vast. ..... ....... ........ ..... ....... ........ ........ ........... .............. .................. ............. .............. ............... ...................... ........... ............... .......... .......... .......... ........... ............ ........ ............... ............. ................. ...............

কোড:

<div class="pull-right">


![photo.jpg](https://cdn.steemitimages.com/DQmQYjhtTE4Tm2XVrPFUrdMf4TwfE5QRAXVYa53FUzzUzZ7/photo.jpg)


</div>
This my company logo, I am using this logo everywhere. <b>Royal Macro</b> is the name of my company. It's an IT based company in India. We're Security Researchers and Develo-pers. Although, our team is in small in size, but, our work is vast. ..... ....... ........ ..... ....... ........ ........ ........... .............. .................. ............. .............. ............... ...................... ........... ............... .......... .......... .......... ........... ............ ........ ............... ............. ................. ...............

একটি stock ফটোগ্রাফ আর্টিকেলে ব্যবহার করার সব চাইতে effective way টা নিচে দিলাম । যাঁরা যাঁরা পূর্বের টিউটোরিয়ালটি পড়েছেন তাঁরা লহমায় কোডটি বুঝতে পারবেন, যাঁরা পারবেন না তাঁরা ভালো করে পূর্বের আর্টিকেলটা পড়ুন -

_{image source^[pixabay]credit^[Leohoho]}

কোড:

<center>![](https://cdn.pixabay.com/photo/2021/06/29/06/14/water-drops-6373296_960_720.jpg)
<sub><b>image source</b><sup><i>[[pixabay]](https://cdn.pixabay.com/photo/2021/06/29/06/14/water-drops-6373296_960_720.jpg)</i></sup><b>credit</b><sup><i>[[Leohoho]](https://pixabay.com/users/leohoho-16235524/)</i></sup></sub></center>

কোডিং বুঝতে কোনো সমস্যা হলে কমেন্ট বক্সে অবশ্যই উল্লেখ করবেন । যথাসাধ্য সাহায্য করবো ।