চতুর্থ অধ্যায় লেকচার-০৬: HTML টেক্সট ফরমেটিং ও প্যারাগ্রাফ ট্যাগের ব্যবহার।

text formating

HTML টেক্সট ফরমেটিং

টেক্সটকে সঠিক আকৃতি প্রদান করে সুন্দরভাবে উপস্থাপন করে একটি ওয়েব পেইজে ফুটিয়ে তোলার পদ্ধতিকে টেক্সট ফরমেটিং/ফরমেটিং বলে। HTML এর পেজের টেক্সট এর সাথে বিভিন্ন ট্যাগ ব্যবহার করে টেক্সটকে বিভিন্নভাবে ফরমেটিং করা যায়। টেক্সটকে ফরমেটিং করার জন্য নিচে কিছু বহুলব্যবহৃত  ফরমেটিং ট্যাগ ও তাদের কজ উদাহরণসহ উল্লেখ করা হলো-

১. লেখাকে বোল্ড/মোটা করা : লেখাকে বোল্ড/মোটা করার জন্য < b > অথবা < strong > ট্যাগ ব্যবহার করা হয়।
উদাহরণ : < b > Habib ICT Care < /b >
অথবা,< strong >Habib ICT Care< /strong >
ফলাফল : Habib ICT Care

২. লেখাকে আন্ডারলাইন করা : লেখাকে আন্ডারলাইন করার জন্য < u > অথবা < ins > ট্যাগ ব্যবহার করা হয়।
উদাহরণ : < u > Habib ICT Care < /u >
অথবা,< ins > Habib ICT Care < /ins >
ফলাফল : Habib ICT Care

৩.লেখাকে ইটালিক করা : লেখাকে ইটালিক করার জন্য < i > অথবা < em > ট্যাগ ব্যবহার করা হয়।
উদাহরণ : < i > Habib ICT Care < /i >
অথবা,< em > Habib ICT Care < /em >
ফলাফল : Habib ICT Care

৪. লেখাকে মাঝখান দিয়ে কেটে দেওয়া : লেখাকে মাঝখান দিয়ে কেটে দেওয়ার জন্য < del > /
< strike > / < s >  ট্যাগ ব্যবহার করা হয়।
উদাহরণ : < del > Habib ICT Care < /del >
অথবা,< strike > Habib ICT Care < /strike >
অথবা,< s > Habib ICT Care < /s >
ফলাফল : Habib ICT Care

৫. সাবস্ক্রিপ্ট করা : লেখাকে সাবস্ক্রিপ্ট (নিচে পাওয়ার) করার জন্য < sub > ট্যাগ ব্যবহার করা হয়।
উদাহরণ :  H< sub >2< /sub >O
ফলাফল : H2O

৬. সুপারস্ক্রিপ্ট করা : লেখাকে সুপারস্ক্রিপ্ট (উপরে পাওয়ার) করার জন্য < sup > ট্যাগ ব্যবহার করা হয়।
উদাহরণ :  (a+b)< sup > 2< /sup >
ফলাফল :  (a+b)2

৭. টেক্সট এক সাইজ বড়  করা : লেখাকে এক সাইজ বড় করার জন্য < big > ট্যাগ ব্যবহার করা হয়।
উদাহরণ :  Habib < big > ICT < /big >Care
ফলাফল :  Habib ICT Care

৮. টেক্সট এক সাইজ ছোট  করা : লেখাকে এক সাইজ ছোট করার জন্য < small > ট্যাগ ব্যবহার করা হয়।
উদাহরণ :Habib< small >ICT< /small >Care
ফলাফল :  Habib ICT Care

৯. টেক্সট কোটেশন (”  “)  করা : লেখাকে কোটেশনের মধ্যে প্রদর্শন করার জন্য < q > ট্যাগ ব্যবহার করা হয়।
উদাহরণ : < q > Habib ICT Care < /q >
ফলাফল :  Habib ICT Care

১০. টেক্সট মার্ক করা : লেখাকে হলুদ রং দিয়ে চিহ্নিত করা বা হাইলাইট করার জন্য < mark > ট্যাগ ব্যবহার করা হয়।
উদাহরণ : < mark >Habib ICT Care< /mark >
ফলাফল :  Habib ICT Care

১১. টেক্সট হুবহু প্রদর্শন করা : এডিটরে লেখাকে ভেঙে/ আগে-পরে সাজিয়ে যেভাবে লেখবো ঠিক সেভাবে দেখাতে  < pre > ট্যাগ ব্যবহার করা হয়।
উদাহরণ :

< pre >
Rain, Rain, go away.
         Come again another day.
Little Children want to play
         Rain, Rain, go away.
< /pre >

ফলাফল : 

Rain, Rain, go away.
         Come again another day.
Little Children want to play
         Rain, Rain, go away.

 

বিশেষ নোট : সাধারণত HTML-এ একটি স্পেস গ্রহনযোগ্য তবে একাধিক (যেমন-১০টি) স্পেস দেওয়ার জন্য nbsp নামক একটি ক্যারেক্টার এনটিটি ব্যবহার করা হয় যার আগে (&) এবং পরে (;) থাকে(স্পেস ছাড়া)। একে নন-ব্রেকিং স্পেস বলে। ক্যারেক্টার এনটিটি ছাড়া যদি আমরা একাধিক যেমন- ১০টি স্পেস ব্যবহার করি তাহলে HTML এদের ৯ টি স্পেস ছেঁটে ফেলবে অর্থাৎ সেখানে ১০ টি স্পেস না হয়ে শুধুমাত্র একটি স্পেস হবে।

এইচটিএমএল প্যারাগ্রাফ

অনেক লেখাকে  কয়েকটি অনুচ্ছেদে ভাগ করতে HTML-এ প্যারাগ্রাফ ট্যাগ (< p >) ব্যবহার করা হয়। এছাড়া প্যারাগ্রাফ ট্যাগ (< p >) ব্যবহার করে ওয়েবপেজের লেখাকে এলাইন করা যায়। < p > ট্যাগের ওপেনিং ও ক্লোজিং উভয় আছে সুতরাং < p > ট্যাগ একটি কন্টেইনার ট্যাগ। কোন অনুচ্ছেদের শুরুতে একটি ওপেনিং < p > এবং শেষে একটি ক্লোজিং < /p > দিলে ওপেনিং < p > থেকে ক্লোজিং < /p > পর্যন্ত একটি প্যারাগ্রাফ তৈরি হবে। এভাবে একটি পেজে অনেকগুলি প্যারাগ্রাফ তৈরি করা যায়। প্যারাগ্রাফ ট্যাগ (< p >) এ  align এবং style অ্যাট্রিবিউট ব্যবহার করা যায় ।

style অ্যাট্রিবিউট ব্যবহার করে লেখার কালার পরিবর্তনসহ বিভিন্ন ধরনের স্টাইল তৈরি করা যায় এবং align অ্যাট্রিবিউট ব্যবহার করে লেখা ডানে, বামে এবং মাঝখানে নেওয়া যায় এবং লেখাকে justify করা যায়।

align অ্যাট্রিবিউট এর ভ্যালু হতে পারে- left, right, center, justify
style অ্যাট্রিবিউট এর ভ্যালু হতে পারে- color: brown; এবং background-color: brown;

 

< p > ট্যাগ ব্যবহার করে প্যারাগ্রাফ তৈরি :

HTML Code :
< p >Rabindranath Tagore was a great Indian poet. He was born on the 7th of May in 1861 at Jorasanka, Kolkata. His father was Maharsi Debendranath Tagore and his mother was Sarada Devi. < /p >< p >He took his early education at home, not from any school. In 1878, he went to England for his formal schooling. However, he did not complete it. He returned to India and opened his own school named Santiniketan in Bolpur. This school later became a university. He wrote thousands of poems, songs, plays, short stories, essays, and articles.< /p >< p >His major works are Manasi, Sonar Tori, Gitanjali, Balaka, Gora, Ghare Baire, Shesher Kobita, etc. He is known as Bishwa Kobi. He earned Nobel Prize in literature in 1913. One of his songs, “Amar Sonar Bangla”, is the national anthem of Bangladesh. The national anthem of India was also composed by him.< /p >

Output :

Rabindranath Tagore was a great Indian poet. He was born on the 7th of May in 1861 at Jorasanka, Kolkata. His father was Maharsi Debendranath Tagore and his mother was Sarada Devi.

He took his early education at home, not from any school. In 1878, he went to England for his formal schooling. However, he did not complete it. He returned to India and opened his own school named Santiniketan in Bolpur. This school later became a university. He wrote thousands of poems, songs, plays, short stories, essays, and articles.

His major works are Manasi, Sonar Tori, Gitanjali, Balaka, Gora, Ghare Baire, Shesher Kobita, etc. He is known as Bishwa Kobi. He earned Nobel Prize in literature in 1913. One of his songs, “Amar Sonar Bangla”, is the national anthem of Bangladesh. The national anthem of India was also composed by him.

 

< p > ট্যাগে align অ্যাট্রিবিউট এর ব্যবহার :
align অ্যাট্রিবিউট  ব্যবহার করে HTML পেজের লেখাকে মাঝে নেওয়া যায়। যেমন-

HTML Code :

1. < p >Rabindranath Tagore< /p >
2. < p align=”center” >Rabindranath Tagore< /p >

Output :
1. Rabindranath Tagore
2.

Rabindranath Tagore

প্রথমটিতে align অ্যাট্রিবিউট  ব্যবহার করা হয়নি তাই লেখাটি ডিফল্টভাবে বামে দেখাচ্ছে। এবং ২য় টিতে align অ্যাট্রিবিউট  ব্যবহার করা হয়েছে এবং এর ভ্যালু center দেওয়ার কারনে লেখাটি পেজের মাঝে দেখাচ্ছে। ঠিক এভাবে align অ্যাট্রিবিউট এর ভ্যালু right দিলে লেখাটি পেজের ডানে প্রদর্শিত হবে।

 

< p > ট্যাগে style অ্যাট্রিবিউট এর ব্যবহার :

style অ্যাট্রিবিউট ব্যবহার করে টেক্সট এর কালার পরিবর্তন :

  • style অ্যাট্রিবিউট দিয়ে আমরা টেক্সট এর কালার পরিবর্তন করতে পারি। এক্ষেত্রে style অ্যাট্রিবিউটটির ভ্যালু  color: blue; ব্যবহার করতে হবে। (blue এর জায়গায় যে কোন কালার নেম বা কালার কোড ব্যবহার করে কাঙ্খিত কালারে পরিনত করা যায়)

HTML Code :

< p style=”color: blue;” >Habib ICT Care< /p >

Output :

Habib ICT Care

 

style অ্যাট্রিবিউট ব্যবহার করে টেক্সটের ব্যাকগ্রাউন্ড কালার পরিবর্তন :

  • style অ্যাট্রিবিউট দিয়ে আমরা টেক্সটের ব্যাকগ্রাউন্ড এর কালার পরিবর্তন করতে পারি। এক্ষেত্রে style অ্যাট্রিবিউটটির ভ্যালু  background-color: green;  ব্যবহার করতে হবে। (green এর জায়গায় যে কোন কালার নেম বা কালার কোড ব্যবহার করে কাঙ্খিত কালারে পরিনত করা যায়)

HTML Code :

< p style=”background-color: green;” >Habib ICT Care< /p >

Output :

Habib ICT Care

 

 

HTML লাইন ব্রেক :

HTML লাইন ব্রেকের সাহায্যে নতুন প্যারাগ্রাফ শুরু না করেই আমরা একটি লাইনকে ভেঙ্গে ফেলতে পারি। অর্থাৎ যে কোন স্থানে প্রয়োজনে লাইন শেষ করতে পারি। লাইন ব্রেকের জন্য এইচটিএমএল-এ < br > ট্যাগ ব্যবহার করা হয়। < br > একটি এম্পটি এলিমেন্ট অর্থাৎ এই ট্যাগের শুধু ওপেনিং ট্যাগ আছে কোন ক্লোজিং ট্যাগ নেই। 

HTML Code :

< p >Habib ICT Care is the best ICT learning center in Bangladesh.< /p >
< p >Habib ICT Care < br > is the best< br > ICT learning< br > center in Bangladesh.< /p >

Output :

Habib ICT Care is the best ICT learning center in Bangladesh.

Habib ICT Care
is the best
ICT learning
center in Bangladesh.

প্রথম প্যারাগ্রাফটিতে কোন < br > ট্যাগ ব্যবহার করা হয়নি তাই একটি লাইনে প্রদর্শিত হয়েছে। কিন্তু দ্বিতীয় প্যারাগ্রাফটিতে  < br > ট্যাগ ব্যবহার করার কারনে প্রতিবার < br > ট্যাগের পরে লাইন ব্রেক করেছে।

 

শিক্ষার্থীর বাড়ির কাজ :
দৃশ্যকল্প : নিচের দৃশ্যকল্পটির HTML কোড লেখ।

Habib ICT Care

 Habib ICT Care is the best ict learning
center in Bangladesh. We love and proud
for this center. HSC ICT is the most
important Subject for every students.

 

 

< br > ট্যাগ ব্যবহার করে < address >  ট্যাগের ব্যবহার :

HTML Code :

< address >
Habib ICT Care, Sadarpur. < br >
Al-Modina Super Market (4th floor) < br >
Hospital Circle, Sadarpur, Faridpur. < br >
Phone : +8801712128532 < br >
Web : www.habibictcare.com
< /address >

Output :

Habib ICT Care, Sadarpur.
Al-Madina Super Market (4th floor)
Hospital Circle, Sadarpur, Faridpur.
Phone : +8801712128532
Web: www.habibictcare.com

 Note : শেষের লাইনে < br > ট্যাগ ব্যবহার করা লাগে না।

 

< hr > ট্যাগ ও এর ব্যবহার :

ওয়েবপেজে  আনুভূমিক রেখা তৈরি করতে < hr > ট্যাগ ব্যবহার করা হয় । এর পূর্ণরুপ Horizontal Ruler । এটি একটি এম্পটি ট্যাগ তাই এর ক্লোজিং দিতে হয় না ।  যে শব্দ, লাইন বা পেজের যেখানে আনুভূমিক রেখা তৈরি করা প্রয়োজন সেখানে ট্যাগটি ব্যবহার করতে হয়। < hr > ট্যাগের অ্যাট্রিবিউটগুলি হলো- ‍

১. align যার ভ্যালু left, right, center হতে পারে। এটি দ্বারা রেখাটি বামে, ডানে ও মাঝে নেওয়া যায়।
২. size যা  আকৃতি নির্ধারণ করে । পিক্সেল মাপে এর সাইজ দিতে হয়।
৩. width  যা  প্রশস্ততা নির্ধারণ করে । পিক্সেল মাপে এটি দিতে হয়।
৪. Color যা  রং নির্ধারণ করার জন্য ব্যবহৃত হয় ।

HTML Code :

Habib ICT Care is the best private learning center.
< hr align=”left” size=”20″ width=”320″ >

Output :

Habib ICT Care is the best private learning center.

 

 

চতুর্থ অধ্যায় লেকচার-০৫: HTML হেডিং ট্যাগ এর ব্যবহার ও অ্যাট্রিবিউট


Written by:

Habibur Rahman(Habib Sir)
Author at www.habibictcare.com
Email:habibbzm2018@gmail.com
Cell: +8801712-128532,+8801913865284

2 Comments.

Leave a Reply

Your email address will not be published. Required fields are marked *