Awesome! টিউনস
সকল Awesome! টিউনস

HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৩] :: লাইন ব্রেক এবং টেক্সট ফরমেটিং

8,842 দেখা 11 টিউমেন্টস জোসস
টিউন বিভাগ এইচটিএমএল
প্রকাশিত
Level 0

22 টিউনস 281 টিউমেন্টস 1 ফলোয়ার

HTML, CSS, JS ও PHP ট্রেনিং সেন্টার

আশা করি সবাই ভাল আছেন। আজ তৃতীয় পর্ব।

গত পর্ব আমরা html এর বেশ কিছু ট্যাগ এর লিস্ট ও এবং এগুলোর কাজের সাধারন ধারনা নিয়েছি।

আজ আমরা শিখব এইচটিএমএল এর সাহায্যে লাইন ব্রেক করা এবং টেক্সট ফরমেটিং।

প্রথমে আসছি লাইনব্রেক এঃ

লাইন  ব্রেক ট্যাগটি অন্যান্য হতে একটু ভিন্ন। লাইন ব্রেক ট্যাগটি একটা লাইন শেষ করে আপনাকে অন্য লাইন হতে লেখা শুরু করতে সাহায্য করবে। এইচটিএমএল এ ট্যাগ দ্বারা লাইন ব্রেক চিহ্নিত করা হয়।মাইক্রোসফট ওয়ার্ডে যেমন Enter দিলে নিচের লাইনে চলে যায়,এটার কাজ ঠিক তেমনই।

<p>
Will Mateson<br />
Box 61<br />
Cleveland, Ohio<br />
</p>

এই ট্যাগ গুলা ব্যাবহার করলে নিচের মত টেক্সট প্রদর্শন করবে।

Will Mateson

Box 61

Cleveland, Ohio

আর ভাল ভাবে দেখলেঃ

মনে হয় বুঝতে আর কোন সমস্যা হবে না।

এবার আসি টেক্সট ফরম্যাটিং এঃ

ওয়েবসাইটে আমরা যে টেক্সটগুলো দেখি তা ছোট, বড়, বোল্ড, ইটালিকসহ বিভিন্ন ফরমেটে হয়ে থাকে।

Microsoft Word এ Bold, Italic, Underline, strikethrough, Subscript, Superscript ইত্যাদি টেক্সট ফরমেটিং এর জন্য ব্যবহৃত হয়। HTML এর ক্ষেত্রেও Microsoft Word এর মত টেক্সট ফরমেটিং এর বিশেষ গুরুত্ব রয়েছে। একটি ডকুমেন্টকে সুন্দরভাবে উপস্থাপন করতে টেক্সট ফরমেটিং বিষয়ে উপযুক্ত জ্ঞান থাকা দরকার। HTML এ টেক্সট ফরমেটিং এর জন্য

  • <b>
  • <i>
  • <u>
  • <strike>
  • <sub>
  • <sup>
  • <big>
  • <small>
  • <strong>
  • <samp>
  • <tt>
  • <abbr>
  • <var>
  • <code>
  • <address>

ইত্যাদি ট্যাগ সমূহ ব্যবহার করা হয়।

এখানে দেখুনঃ


<html>

<head>

<title>mmkowshik</title>

</head>

<body>

<p>

<b> (Bold)</b> This is an example of bold. <br />

<i>(Italic)</i> This is an example of Italic. <br />

<u> (Underline) </u> This is an example of Underline. <br />

<strike>(Strike) </strike> This is an example of Strike. <br />

(CO<sub>2</sub>) This is an example of Subscript. <br />

(E=MC<sup>2</sup>) This is an example of Superscript. <br />

<big>(Big text)</big>This is an example of Big. <br />

<small>(Small text)</small>This is an example of Small. <br />

<strong>(Strong text)</strong>This is an example of Strong. <br />

<samp>(Sample text) </samp>This is an example of Sample. <br />

<tt>(Teletype)</tt>This is an example of Teletype. <br />

(<abbr> U.N.O</abbr> United Nations Organization.) This is an example of Abbreviation. <br />

(<var>x</var> is a variable.)This is an example of Variable <br />

(<code>Computer code text.</code>) This is an example of Code.<br /> <address>

(Written by mm kowshik<br />

Address: www.kowshik.tk<br />

E-mail:[email protected])</address>This is an example of Address <br />

</p>
</body>

</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

এবার দেখি কোন ট্যাগ এর জন্য কেমন টেক্সট প্রদর্শন করছেঃ

আশা করি বুঝতে আর কোন সমস্যা নেই। সমস্যা হলে কমেন্ট এ জানাবেন।

এবার আসি টেক্সট ফন্ট এঃ

HTML এর মাধ্যমে কোন ডকুমেন্টকে সুন্দরভাবে উপস্থাপন করার জন্য <font> বা ফন্ট ট্যাগ খুবই গুরুত্বপূর্ণ ভূমিকা পালন করে।


<font size="5" face="Tahoma" color="red"> Bangladesh is a beautiful country.</font>

এখানে size="5"  অংশটি হল font ট্যাগের একটি এট্রিবিউট, যা প্রকাশ করছে ইলিমেন্ট অর্থাৎ Bangladesh is a beautiful country. লেখাটির সাইজ কেমন হবে।

এছাড়া face="Tahoma"  প্রকাশ করছে লেখাটির font হবে Tahoma এবং color="red" দ্বারা প্রকাশ করছে লেখাটির রং হবে লাল।

বিস্তারিত ভাবে দেখিঃ


<html>
<head>
<title> techtunes.io</title>
</head>
<font size="2" face="Verdana">
This is a paragraph.
</font>
<br />
<font size="5" face="Tahoma" color="red" >
Bangladesh is a beautiful country.
</font>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ফন্ট আকার (Font size):

Size attribute এর সাহায্যে ফন্ট এর সাইজ ঠিক করা হয়। ফন্ট এর আকার এর গ্রহনযোগ্য মান হচ্ছে ১(সবচেয়ে ছোট) হতে ৭(সবচেয়ে বড়)।  ফন্ট এর ডিফল্ট আকার হচ্ছে ৩।

ফন্ট কালার (Font color):

কালার এর জন্য ইংলিশ এ কালার এর নাম লিখে দিলেই হয় তাছাড়া কালারের অনেক কোড আছে সেগুলো নিয়ে পরে আলোচনা করবো।

এবার দেখি কোন ট্যাগ এর জন্য কেমন টেক্সট প্রদর্নন করছেঃ

চিত্রে বোঝানো হয়েছে যে কোন ট্যাগ এর জন্য কোন টেক্সট দায়ী।

আশা করি বুঝতে আর কোন সমস্যা নেই। সমস্যা হলে কমেন্ট এ জানাবেন।

আজ এই পর্যন্তই। আগামি পর্বে আরও নতুন কিছু দেয়ার চেষ্টা করবো। আর টিউন কেমন লাগসে তা অবশ্যই কমেন্ট এ জানাবেন এবং নতুন কোন আইডিয়া থাকলে তা বলবেন।

>>>>>টিউন টি পড়ার জন্য সবাইকে ধন্যবাদ<<<<<<<<<<

Level 0

আমি kazi Kowshik। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 5 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 22 টি টিউন ও 281 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 0

খুবই ভালো টিউন হয়েছে৤ পরবর্তী পর্বের আশায় থাকলাম৤

    Level 0

    @Eakram: ধন্যবাদ ভাই। অপেক্ষাই থাকেন পরবর্তীটা পেয়ে যাবেন।

Level 0

it is very good tune for us.

Level New

আপনার টিউন অসাধারন হয়েছে। টিউনের জন্য অসংখ্য ধন্যবাদ।

Level 0

vai salam niben I’m so much happy for your HTML tune
vai 4 no tune er image ta add korte parini ar sobgulo parsi
jodi aktu explain koren kiritoggo thakbo.
plz.help me

Level 0

ভাই কি মজা ১টা সাইট বানালাম ।কিন্তু এখন এটা কিভাবে আমি আমার সাইটে ব্যাবহার বা আপলোড বা পাবলিশ করবো ।জানাবেন

Level 0

ভাইয়া বলবো নাকি স্যার? ওয়েব ডিজাইন শেখার অনেক আশা আছে ভাই দয়া করে এই অধমকে শেখাবেন !!!!!!
খুব খুব খুব ভালো লাগছে …….ধন্যবাদ

Level 0

ভাই খুবই ভালো হচ্ছে। চালিয়ে যান। অসংখ্য ধন্যবাদ আপনাকে।

Level 0

ধন্যবাদ কাজে লেগেছে। আশা করি আরো কিছু শিখতে পারবো।

Level 0

@Kh ফয়সাল: আপনাকেও ধন্যবাদ।