চতুর্থ অধ্যায় পাঠ-৬ হেডিং ট্যাগ ,প্যারাগ্রাফ ট্যাগ ,ফরম্যাটিং ট্যাগ ও ফন্ট ট্যাগ সমূহের ব্যবহার।
এই পাঠ শেষে যা যা শিখতে পারবে-
- ১। বিভিন্ন হেডিং ট্যাগের ব্যবহার ব্যাখ্যা করতে পারবে।
- ২। প্যারাগ্রাফ ট্যাগের ব্যবহার ব্যাখ্যা করতে পারবে।
- ৩। বিভিন্ন ফরম্যাটিং ট্যাগের ব্যবহার ব্যাখ্যা করতে পারবে।
- ৪। ফন্টের বিভিন্ন বৈশিষ্ট্য নির্ধারণ করতে পারবে।
HTML হেডিং ট্যাগঃ ওয়েবপেইজে কোন বিষয়ের শিরোনাম দেওয়ার জন্য HTML এ ৬ ধরণের হেডিং ট্যাগ রয়েছে। যার মধ্যে <h1> হলো সবচেয়ে বড় এবং <h6> সবচেয়ে ছোট। হেডিং ট্যাগ এর ওপেনিং ট্যাগ এবং ক্লোজিং ট্যাগ এর মধ্যে যা লেখা হয় তা শিরোনাম হিসাবে দেখায়। এগুলো হলো-
- <h1> …</h1>
- <h2> …</h2>
- <h3> …</h3>
- <h4> …</h4>
- <h5> …</h5>
- <h6> …</h6>
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<head>
<title> Heading Tags </title>
</head>
<body>
<h1> This is heading 1</h1>
<h2> This is heading 2</h2>
<h3> This is heading 3</h3>
<h4> This is heading 4</h4>
<h5> This is heading 5</h5>
<h6> This is heading 6</h6>
</body>
</html>
|
এই কোডটির আউটপুট-
HTML প্যারাগ্রাফ ট্যাগঃ ওয়েবপেইজে কোন তথ্য প্যারাগ্রাফ আকারে দেখানোর জন্য প্যারাগ্রাফ ট্যাগ(<p> .. </p>) ব্যবহার করা হয়। প্যারাগ্রাফ ট্যাগ এর ওপেনিং ট্যাগ এবং ক্লোজিং ট্যাগ এর মধ্যে যা লেখা হয় তা একটি প্যারাগ্রাফ হিসাবে দেখায়। কোডে অনেক লাইন বা স্পেস থাকলেও ব্রাউজারে তা বাদ দিয়ে দেয়। নিচের কোডটির আউটপুট লক্ষ করা যাক-
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser ignores it.
This paragraph
contains a lot of spaces
in the source code, but the browser ignores it.
</p>
</body>
</html>
|
এই কোডটির আউটপুট-
This paragraph contains a lot of lines in the source code, but the browser ignores it. This paragraph contains a lot of spaces in the source code, but the browser ignores it.
HTML ফরম্যাটিং ট্যাগঃ টেক্সট কে বিভিন্ন ফরমেটে দেখানোর জন্য যেসকল ট্যাগ ব্যবহার করা হয় তাদেরকে ফরম্যাটিং ট্যাগ বলে। কোন টেক্সটকে যে ফরম্যাটে দেখাতে হবে সেই ফরম্যাটিং ট্যাগের ওপেনিং ট্যাগ এবং ক্লোজিং ট্যাগের মধ্যে লিখতে হবে। নিচে বিভিন্ন ফরম্যাটিং ট্যাগের ব্যবহার দেখানো হল-
| ট্যাগ | ব্যবহার |
| <small></small> | টেক্সটকে ছোট করে দেখাতে। |
| <big></big> | টেক্সটকে বড় করে দেখাতে। |
| <em></em> | টেক্সটকে ইম্ফেসাইজড করে দেখাতে। |
| <strong></strong> | টেক্সটকে স্ট্রং করে দেখাতে। |
| <b></b> | টেক্সটকে মোটা বা বোল্ড করে দেখাতে। |
| <i></i> | টেক্সটকে ইটালিক বা বাঁকা করে দেখাতে। |
| <u></u> | টেক্সটকে আন্ডারলাইন করে দেখাতে। |
| <del></del> | টেক্সটি কাটা বুঝাতে। |
| <strike></strike> | টেক্সটি কাটা বুঝাতে। |
| <sub></sub> | টেক্সটকে সাবস্ক্রিপ্ট করে দেখাতে। |
| <sup></sup> | টেক্সটকে সুপারস্ক্রিপ্ট করে দেখাতে। |
নিচের কোডে <br> ট্যাগ ব্যবহার করা হয়েছে যার কাজ নতুন লাইন শুরু করা। প্রত্যেকটি ট্যাগের আউটপুট ভালোভাবে বুঝার জন্য এই ট্যাগ ব্যবহার করা হয়েছে। বিভিন্ন ফরম্যাটিং ট্যাগ ও তাদের আউটপুট দেখানো হলো-
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<body>
<small> This is small text </small><br>
<big> This is big text </big><br>
<b> This is bold text </b><br>
<strong> This is strong text </strong><br>
<u> This is underline text </u><br>
<i> This is Italic Text </i><br>
<del> This is deleteted Text </del><br>
This is <sub> subscript </sub> text<br>
This is <sup> superscript </sup> text<br>
</body>
</html>
|
এই কোডটির আউটপুট-
ওয়েবপেইজে (a+b)2=a2+2ab+b2 এই সূত্রটি দেখানোর প্রয়োজনীয় HTML কোড।
1
2
3
4
5
|
<html>
<body>
(a+b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup>
</body>
</html>
|
টেক্সট এর ফন্ট ফেইস ,ফন্ট কালার এবং ফন্ট সাইজ পরিবর্তনঃ কোন একটি টেক্সট এর ফন্ট ফেইস, ফন্ট কালার এবং ফন্ট সাইজ পরিবর্তনের জন্য টেক্সটি যে ট্যাগের মধ্যে অন্তর্ভুক্ত সেই ট্যাগের ওপেনিং ট্যাগে style অ্যাট্রিবিউট এর মাধ্যমে বিভিন্ন প্রোপার্টি যেমন- font-family, font-size, color এর মান সেট করে টেক্সটটির ফন্ট ফেইস, ফন্ট কালার এবং ফন্ট সাইজ পরিবর্তন করা যায় । ভালোভাবে বোঝার জন্য নিচের কোড এবং আউটপুট-
1
2
3
4
5
6
7
8
9
10
|
<html>
<body>
<h1 style = "font-family:veranda; font-size:18; color:green">
It is a heading
</h1>
<p style = "font-family:Arial; font-size:12; color:red; font-style:Italic">
This is a paragraph with some text
</p>
</body>
</html>
|
উপরের কোডটির আউটপুট-
ফন্ট ট্যাগ (<font></font>) ব্যবহার করেও ফন্ট ফেইস, ফন্ট কালার এবং ফন্ট সাইজ পরিবর্তন করা যায়। নিচের কোডটি দেখুন-
1
2
3
4
5
|
<html>
<body>
<font size="14" color="green" face="arial"> This is the use of font tag.</font>
</body>
</html>
|
উপরের কোডে ফন্ট ট্যাগে size, color ও face অ্যাট্রিবিউট ব্যবহার করে যথাক্রমে ফন্টের সাইজ, ফন্টের কালার এবং ফন্টের ফেইস নির্ধারণ করা হয়েছে।
পাঠ মূল্যায়ন-
অনুধাবনমূলক প্রশ্নসমূহঃ
- খ। <font> ট্যাগের অ্যাট্রিবিউটসমূহ ব্যাখ্যা কর।
সৃজনশীল প্রশ্নসমূহঃ
উদ্দীপকটি দেখ এবং প্রশ্নের উত্তর দাওঃ
abc
- গ। উদ্দীপকটি ওয়েবপেইজে দেখানোর প্রয়োজনীয় HTML কোড লেখ।
উদ্দীপকটি দেখ এবং প্রশ্নের উত্তর দাওঃ
H2SO4 ও 102 = 100
- গ। উদ্দীপকটি ওয়েবপেইজে দেখানোর প্রয়োজনীয় HTML কোড লেখ।
উদ্দীপকটি দেখ এবং প্রশ্নের উত্তর দাওঃ
(a1+b1)2=a12+2a1b1+b12
- গ। ওয়েবপেইজে উদ্দীপক সূত্রটি দেখানোর প্রয়োজনীয় HTML কোড লেখ।
উদ্দীপকটি দেখ এবং প্রশ্নের উত্তর দাওঃ
(a1+b1)3=a13+3a12b1+3a1b12+b13
- গ। ওয়েবপেইজে উদ্দীপক সূত্রটি দেখানোর প্রয়োজনীয় HTML কোড লেখ।
বহুনির্বাচনি প্রশ্নসমূহঃ
১। টেক্সটকে বাঁকা করতে কোন ট্যাগ ব্যবহৃত হয়?
ক.<i> খ.<u> গ.<th> ঘ.<b>
২। HTML এর কোন ট্যাগ ব্যবহার করে প্যারাগ্রাফ তৈরি করা যায়?
ক.<P> খ.<img> গ.<th> ঘ.<br>
৩। HTML এ লাইন ব্রেকের জন্য কোন ট্যাগ ব্যবহৃত হয়?
ক.<dt> খ.<hr> গ.<br> ঘ.<tr>
৪। সবচেয়ে বড় হেডিং প্রদর্শিত হয় কোনটিতে?
ক. <h1> খ. <h4> গ. <h5> ঘ. <h6>
৫। নিচের কোনটি ফরমেটিং ট্যাগ?
ক. <sup>……</sup> খ. <body>……</body>
গ. <table>……</table> ঘ. <html>……</html>
৬। X=a2+b2 সমীকরণটি HTML-এ লেখার জন্য কোন ট্যাগ প্রয়োজন?
ক. <sup> খ. <sub> গ. <li> ঘ. <h2>
৭। X2 সমীকরনকে ওয়েব পেইজে প্রদর্শনের জন্য html এর কোন ট্যাগটি ব্যবহার করবে?
ক. <sup> খ. <sub> গ. <img> ঘ. <jpg>
৮। কোনটি সাদা রং নির্দেশকারী?
ক. “#BBBBBB” খ. “#EEEEEE” গ. “#AAAAAA” ঘ. “#FFFFFF”
৯। <font> ট্যাগ এর কাজ হলো-
i.টেক্সটের ধরন ঠিক করা ii.টেক্সটের আকার ঠিক করা iii. টেক্সটের রং ঠিক করা
নিচের কোনটি সঠিক?
ক.i ও ii খ. i ও iii গ.ii ও iii ঘ.i, ii ও iii
১০। হেডিং ট্যাগ কয়টি?
ক. 2 খ. 4 গ. 6 ঘ. 8
১১। <font> ট্যাগে অ্যাট্রিবিউট হিসেবে ব্যবহৃত হয়-
i.size ii.color iii.face
নিচের কোনটি সঠিক?
ক.i ও ii খ.i ও iii গ.ii ও iii ঘ.i, ii ও iii
১২। HTML কোড <p> H <sup> 2 </sup> 0 </p> এর ফলাফল কোনটি?
ক. H2O খ. H2O গ. H2O ঘ. HO2
১৩। নিচের কোন হেডিং ট্যাগের সাইজ সবচেয়ে ছোট?
ক. <h1> খ. <h4> গ. <h5> ঘ. <h6>
১৪। <i> ট্যাগের মত ট্যাগ হল-
i.<u> ii. <del> iii. <tr>
নিচের কোনটি সঠিক?
ক.i ও ii খ.i ও iii গ.ii ও iii ঘ.i, ii ও iii
