HTML ফরমেটিং, হেডিং, প্যারাগ্রাফ, ফন্ট, টেক্সট সচল করা, কালার কোড, ফন্ট প্রোপার্টি, ফন্ট স্টাইল
HTML ফরমেটিং (HTML Formatting)
টেক্সটকে সঠিক আকৃতি প্রদান করে সুন্দরভাবে উপস্থাপন করে একটি ওয়েব পেইজে ফুটিয়ে তোলার পদ্ধতিকে ফরমেটিং বলে। বিভিন্ন ধরনের হেডিং, ফন্ট, সাইজ প্রভৃতির উপর কাজ করা হয়।
| টেক্সট | উদাহরণ (ট্যাগ) | ফলাফল |
| Bold | <b> This text is bold </b> | This text is bold |
| Italic | <i> This text is italic </i> | This text is italic |
| Emphasized | <em> This text is emphasized </em> | This text is emphasized |
| Marked | <mark> Word Marked </mark> | Word Marked |
| Deleted | My favourite color is <del> red </del> blue | My favourite color is red blue |
| Superscript | a <sup> 2 </sup> b | a2b |
| Subscript | H < sub> 2 </sub> O | H2O |
হেডিং (Heading) :
HTML এর মাধ্যমে কোন ডকুমেন্ট বা প্যারাগ্রাফের শিরোনাম লেখার জন্য হেডিং ট্যাগ ব্যবহার করা হয়। HTML এ ছয় ধরনের হেডিং ট্যাগ রয়েছে। যথা <h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5> I <h6> </h6> ।
হেডিং হলো <h1> .. </h1> থেকে <h6> .. </h6> পর্যন্ত ট্যাগের বর্ণনা করা। <h1> সর্বোচ্চ হেডিং এবং <h6> সর্বনিম্ন হেডিং বর্ণনা করে।
Notepad প্রোগ্রামে লিখে ICT.HTML নামে সংরক্ষণ করা হলো-
ফাইল (ICT.HTML) তে ডাবল ক্লিক করলে প্রোগ্রাম চালু হয়ে আউটপুটে নিম্নরূপ দেখাবে :
প্যারাগ্রাফ (Paragraph) :
যেকোনো ডকুমেন্ট এক বা একাধিক প্যারাগ্রাফের মাধ্যমে লেখা হয়। কোনো প্যারাগ্রাফ লেখার জন্যে শুরু ট্যাগ হিসেবে <p> এবং শেষ ট্যাগ হিসেবে </p> ব্যবহার করতে হয়। যেমন- <p> A paragraph can be written here </p> ব্রাউজারের মাধ্যমে প্রতিটি প্যারাগ্রাফ প্রদর্শন করা হলে প্রতিটি প্যারাগ্রাফের পর একটি করে লাইন ব্রেক তৈরি হয়। যদি কখনো প্যারাগ্রাফের মধ্যেই লাইন ব্রেকের প্রয়োজন হয় তাহলে লাইনের শেষে <br /> ট্যাগ ব্যবহার করা হয়।
উদাহরণ-১ : Paragraph কমান্ড ব্যবহার করে HTMLকোড :
<html>
<body bgcolor = “red”>
<p> This is a Paragraph </p>
<p>
This is a Paragraph <br />
This is a Paragraph <br />
</p>
</body>
</html>
উক্ত উদাহরণটি টাইপ করে Notepad এ Test.html নামে সংরক্ষণ করা হলো-
এরপর Test.html ফাইলে ডাবল ক্লিক করে ওপেন করলে Google Chrome প্রোগ্রামে আউটপুট পাওয়া যাবে।
আউটপুট :
উদাহরণ-২ : br কমান্ড ব্যবহার করে HTML কোড :
<html>
<body>
<p> Information <br /> & Communication <br /> Technology </p>
</body>
</html>
আউটপুট :
উদাহরণ-৩ : br কমান্ড ব্যবহার করে HTML কোড :
<html>
<body>
<address>
Lecture Publications Ltd. <br />
37, Northbrook Hall Road <br />
Banglabazar, Dhaka – 1100 <br />
Phone : 7125223 <br />
Web : www.lecturepublications.com
</address>
</body>
</html>
আউটপুট :
ফন্ট (Font) :
ফন্ট হচ্ছে যেকোনো ডকুমেন্টের প্রাণ। ফন্ট ব্যবহারের মধ্যে একজন ওয়েব পেইজ নির্মাতা ডকুমেন্টটিকে শুধুমাত্র সুন্দরই করেন তা নয়, এর মাঝে নিজের শৈল্পিক পরিচয়ও তুলে ধরেন। HTML এর মাধ্যমে কোন ডকুমেন্টকে সুন্দরভাবে উপস্থাপন করার জন্য <font> ট্যাগ গুরুত্বপূর্ণ।
ধরা যাক, Information & Communication Technology লেখাটির ফন্ট ঠিক করতে হবে।
<font size = “10” face = “Arial” Color = “green”>
Information & Communication Technology </font>
এখানে size = “10” হলো font ট্যাগের একটি অ্যাট্রিবিউট যা এলিমেন্ট প্রকাশ করছে অর্থাৎ Information & Communication Technology লেখাটির আকার কেমন হবে।
face = “Arial” দ্বারা বুঝানো হয় লেখাটির ফন্ট হবে Arial।
Color = “green” দ্বারা বুঝানো হয় লেখাটির রং সবুজ হবে।
উদাহরণ-৪ : বিভিন্ন ধরনের ফন্ট, কালার ও সাইজ ব্যবহার করে HTML কোড :
<html>
<head>
</head>
<body bgcolor = “red”>
<font size = “10” face = “Arial”>
<font color = “green”>
Information & Communication Technology
</font>
</body>
</html>
আউটপুট :
টেক্সট সচল করা : টেক্সটকে বিভিন্ন দিকে স্ক্রলিং করানোর জন্য <marquee> </marquee> ট্যাগ ব্যবহার করা হয়। টেক্সট বা ছবিকে ডানে, বামে, উপরে, নিচে চলমান করা যায়। যেমন-
<marquee> Lecture Publications Ltd. </marquee>
আবার নির্দিষ্ট কোনো দিকে নেওয়ার জন্য কমান্ড হবে নিম্নরূপ :
<marquee direction =”right”> Lecture Publications Ltd. </marquee>
এখানে, Directions Left, Up, Down ব্যবহার করা যাবে।
ইমেজ সচল করা : ইমেজ বা কোন ছবিকে সচল করার জন্য <marquee> </marquee> ট্যাগ ব্যবহার করা হয়। যেমন-
<marquee> <img src= “pkd.jpg”> </marquee>
এখানে, pkd.jpg ইমেজটি সচল হবে।
কালার কোড (Color Code) :
কিছু কিছু কালার (যেমন- কালো, নীল, সবুজ, লাল, সাদা ইত্যাদির HTML এ কালারের অ্যাট্রিবিউট ভেল্যুতে সরাসরি নাম লিখে ব্যবহার করা যায়। যেমন, color = “green”
Red, Green ও Blue এই তিনটি কালারকে একত্রে RGB বলা হয়। RGB পদ্ধতিতে রং নির্ধারণের জন্য RGB (Red, Green, Blue) ব্যবহার করা হয়।
| কালার | কোড |
| কালো (Black) | RGB (0, 0, 0) |
| নীল (Blue) | RGB (0, 0, 255) |
| সবুজ (Green) | RGB (0, 255, 0) |
| লাল (Red) | RGB (255, 0, 0) |
| সাদা (White) | RGB (255, 255, 255) |
হেক্সাডেসিমেল নাম্বার সিস্টেমে 6টি ডিজিট ব্যবহার করে রং নির্ধারণ করা হয়।
সিনটেক্সটি নিম্নরূপ : Color =”# RRGGBB”
এই পদ্ধতিতে কালার কোড “# 000000” n‡Z “# FFFFFF” পর্যন্ত হতে পারে।
| কালার | R | G | B | Color Hex |
| কালো (Black) | 00 | 00 | 00 | “# 000000” |
| নীল (Blue) | 00 | 00 | FF | “# 0000FF” |
| সবুজ (Green) | 00 | FF | 00 | “# 00FF00” |
| লাল (Red) | FF | 00 | 00 | “# FF0000” |
| সাদা (White) | FF | FF | FF | “# FFFFFF” |
ফন্ট প্রোপার্টি (Font Property) :
ওয়েব পেইজে যত ধরনের বৈচিত্র্যময় ফন্ট ব্যবহার করা হয়, তার সবগুলোকে একত্রে ফন্ট প্রোপার্টি বলে। ফন্ট প্রোপার্টিকে ৫ ভাগে ভাগ করা যায় ।
- ফন্ট ফ্যামিলি (Font Family) : একাধিক ফন্টকে যদি একই নামের ভিন্নতর সংস্করণ হিসেবে প্রকাশ করা হয় তখন তাকে ফন্ট ফ্যামিলি বলে। যেমন- Arial নামের ফন্ট রয়েছে যার বিভিন্ন সংস্করণ হলো Arial Black, Arial Narrow, Arial Unicode MS ইত্যাদি। এরা প্রত্যেকটি একটি করে ফন্ট হলেও এদের ফন্ট ফ্যামিলি নাম হবে Arial। যেমন : <h1 style = “font family : Arial Black” > This is a heading </h1>
উদাহরণ-৫ : ফন্ট ফ্যামিলি ব্যবহার করে HTML কোড :
<html>
<body>
<font face = “Arial Black”>
HSC ICT TEXT BOOK </font>
</body>
</html>
আউটপুট :
ফন্ট স্টাইল (Font Style) : ফন্ট ফ্যামিলির যেকোনো ফন্টের পরিবর্তিত নকশাকে ফন্ট স্টাইল বলে। যেমন Italic, Bold, Underline ইত্যাদি। যেমন : <i style = “color : blue” > Pen is blue </i>
- ফন্ট ভ্যারিয়েন্ট (Font Varient) : স্মল ও ক্যাপ বর্ণে ব্যবহারিক পার্থক্য। যেমন :
<p font varient = “small caps” > HSC ICT </p>
- ফন্ট সাইজ (Font Size) : ফন্টের সাইজ পরিবর্তনের জন্য size অ্যাট্রিবিউট ব্যবহার করা হয়। আকৃতিগত দিক (ছোট বা বড়), ফন্ট সাইজ দ্বারা নির্ধারিত হয়ে থাকে। ফন্টের সাইজ ডিফল্ট মান অনুসারে 12 পয়েন্ট থাকে। এই মান বাড়ানো বা কমানোর জন্য ফন্ট সাইজ 1 থেকে 7 পর্যন্ত হতে পারে। এটি ধনাত্মক ও ঋণাত্মক হতে পারে। প্রতিটি সংখ্যা যোগ বা বিয়োগ করলে 2 পয়েন্ট ফন্টের সাইজ বাড়বে বা কমবে। যেমন :
<font size = “Number”> Text </font>
উদাহরণ : <font size = “5”> HSC ICT </font>
আউটপুট : HSC ICT (5 পয়েন্ট ফন্টের সাইজ হবে)
উদাহরণ : <font size = “+1”> HSC ICT </font>
আউটপুট : HSC ICT (2 পয়েন্ট ফন্টের সাইজ বাড়বে)
উদাহরণ : <font size = “-1”> HSC ICT </font>
আউটপুট : HSC ICT (2 পয়েন্ট ফন্টের সাইজ কমবে)
- ফন্ট ওয়েট (Font Weight) : ফন্ট যেসব রেখার দ্বারা অঙ্কিত হয় তাকে ফন্ট ওয়েট বলে। এ মান নরমাল, বোল্ড ইত্যাদি হতে পারে । যেমন :
<p class = “normal” > HSC ICT </p>
<p class = “Bold”> HSC ICT </p>
বাংলা ফন্টের ব্যবহার : ওয়েব পেইজে বাংলা ফন্ট ব্যবহার করার জন্য যেকোনো একটি ওয়ার্ড প্রসেসরে বাংলা টাইপ করে কপি করে নির্দিষ্ট জায়গায় পেস্ট করতে হবে (উল্লেখ্য যে, এখানে বাংলা ফন্টের লেখা ইংরেজি ফন্টে দেখা যাবে)।
উদাহরণ-৬ : বাংলা ফন্ট ব্যবহার করে HTML কোড :
<html>
<body>
<font face = “SutonnyMJ”>
প্রকাশ আইটি কেয়ার </font>
</body>
</html>
আউটপুট :
