একটি ওয়েব সাইটে অনেক টেক্সট থাকে। আমাদের প্রয়োজন অনুসারে লেখাগুলোকে আমরা বিভিন্ন আঙ্গিকে সাজিয়ে আমাদের সাইটকে আমরা কাঙ্ক্ষিত সৌন্দর্য প্রদান করে থাকি। তাছাড়া বিশেষ বিশেষ বিষয়কে ভিজিটরের দৃষ্টি আকর্ষন করার উদ্দেশ্যে বোল্ড করা হয়। আবার কম্পিউটার প্রোগ্রাম সম্পর্কে লিখতে গেলে কোড গুলোকে উপস্থাপন করার জন্যে বিশেষ ফন্ট ব্যবহার করতে হয়। কোন মনীষীর উক্তিকে কোটেশনের মধ্যে উপস্থাপন করতে হয়। এমনি সব কাজ করার জন্যে HTML Formatting Tag ব্যবহার করা হয়। নিচের উদাহরণটা লক্ষ্য করুন।
এখানে লক্ষ্য করা যায় লেখাকে বোল্ড করার জন্যে <b> Tag ব্যবহার করা হয়েছে, লেখাকে বাঁকা করে উপস্থাপনের জন্যে <i>, বড় করার জন্যে <strong>, ছোট করে দেখানোর জন্যে <small>, এবং সাবস্ক্রিপ্ট ও সুপারস্ক্রিপ্ট করারা জন্যে যথাক্রমে <sub> এবং <sup> ট্যাগ ব্যবহার করা হয়েছে।
লক্ষ্যনীয়: আমরা লক্ষ্য করেছি যে বোল্ড এবং স্ট্রং ট্যাগ দ্বারা একই ধরনের লেখা প্রদর্শন করছে , ইটালিক এবং এম্পেসিজ ট্যাগ দ্বারাও একই ধরনের লেখা প্রদর্শন করছে। একই রকম বৈশিষ্ট্য হওয়া সত্ত্বেও এদের কাজ কিন্তু ভিন্ন। মূলত: ভিন্নতা তাদের অর্থে। যেমন: <b> ট্যাগ ব্যবহার করা হয় বোল্ড করার জন্যে এবং <i> ট্যাগ ব্যবহৃত হয় লেখাকে ইটালিক স্টাইল করার জন্যে। কিন্তু যখন <strong> এবং <em> ট্যাগ ব্যবহার করা হবে বুঝতে হবে এটা ভিজিটরের বিশেষ মনোযোগ আকর্ষনের জন্যে ব্যবহার করা হয়েছে অর্থাৎ গুরুত্বপূর্ণ বিষয় উপস্থাপনের জন্যে এই ট্যাগ দুটো ব্যবহৃত হয়, বোল্ড বা ইটালিক করার জন্যে নয়। লগারিদমের অংকে বেস থাকে, এই বেসগুলো প্রদর্শনের উদ্দেশে <sub> tag ব্যবহার করা হয় এবং পাওয়ার প্রদর্শনের জন্যে <sup> Tag ব্যবহৃত হয়। যেমন:
<p> x<sup>2</sup>+y<sup>2</sup> </p>
<p> log<sub>10</sub>X=4 </p>
কোডগুলো নোটপ্যডে লিখে রান করে দেখুন কী দেখায়।
Pre Tag: <Pre> ট্যাগ দিয়ে Preformatted নির্দেশ করা হয়। আমরা লক্ষ্য করে থাকব যে আমরা টেক্সট এডিটরে যত স্পেসই দিইনা কেন ব্রাউজার কিন্তু একটি স্পেস হিসেবে এবং সব লাইনকে একটি লাইন হিসেবে প্রদর্শন করে। বারবার <p> ট্যাগ দিয়ে আমরা নতুন লাইন তৈরী করতে পারি কিন্তু সমস্যা হল ব্রাউজার প্রতিটি প্যরার আগে এবং পরে একটি করে শুন্য লাইন রাখে তাতে করে পেজটাতে অসংখ্য ফাঁকা জায়গার উৎপত্তি হয়। এ সমস্যা লাইন ব্রেক ট্যাগ দিয়ে কিছুটা সমাধান করা যায় কিন্তু নিজের ইচ্ছে মাফিক নয় কারন এ জন্যে বারবার <br> ট্যাগ ব্যবহার করতে হয়। এ সমস্যা থেকে মুক্তি পাওয়া যায় <pre> ট্যাগ ব্যহার করে। এই ট্যাগ ব্যবহার করা হলে আপনি নোটপ্যডে বা এডিটরে যেভাবে লিখবেন ব্রাউজার ঠিক সেভাবে প্রদর্শন করবে। নিচে দেখুন:
<!DOCTYPE html>
<html>
<body>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
উপরোক্ত কোড নোটপ্যডে লিখে রান করে দেখুন কেমন দেখায়। নিজে থেকে আরো কিছু তৈরী করুন এবং মজা দেখুন। বারবার চর্চা করলে সে বিষয়টা একেবারে আত্মস্থ হয়ে যায়। তাই বেশি বেশি চর্চা করার অভ্যাস গড়ে তুলুন।
<html>
<body>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
উপরোক্ত কোড নোটপ্যডে লিখে রান করে দেখুন কেমন দেখায়। নিজে থেকে আরো কিছু তৈরী করুন এবং মজা দেখুন। বারবার চর্চা করলে সে বিষয়টা একেবারে আত্মস্থ হয়ে যায়। তাই বেশি বেশি চর্চা করার অভ্যাস গড়ে তুলুন।
- <b>: এটা দিয়ে লেখা বোল্ড করা হয়।
- <strong>: এটা দিয়ে লেখাকে বড় করে দেখানো হয়।
- <i>: এটা দিয়ে লেখাতে ইটালিক স্টাইল দেয়া হয়।
- <em>: এটা লেখাকে বাঁকা করতে ব্যবহৃত হয়।
- <small>: এই ট্যাগ দিয়ে লেখাকে ছোট করে প্রদর্শন করা হয়।
- <sub>: লেখাকে একটু নিচের দিকে দেখাতে এই ট্যাগ ব্যবহার করা হয়।
- <sup>: লেখাকে একটু উপরে দেখানো হয়।
- <ins>: লেখা যোগ করা হয়েছে বুঝানোর জন্যে ব্যবহৃত হয়।
- <del>: লেখা বাদ দেয়া হয়েছে বুঝানোর জন্যে এটি প্রদান করা হয়।
- <mark>: লেখাকে মার্ক বা চিহ্নিত করার কাজে ব্যবহার করা হয়।
নিচের উদাহরণ লক্ষ্য করুন এবং নিজে করে দেখুন <ins> and <del> Tag এর ব্যবহার।
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<p>Notice that browsers will strike through deleted text and underline inserted text.</p>
</body>
</html>
<html>
<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<p>Notice that browsers will strike through deleted text and underline inserted text.</p>
</body>
</html>
<mark> ট্যাগের ব্যবহার নিচে দেখানো হল।
<!DOCTYPE html>
<html>
<body>
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html>
<html>
<body>
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html>
নিজে চেষ্টা করুন। কোন কিছু বুঝতে সমস্যা হলে কমেন্টস করুন, যথাসাধ্য চেষ্টা করবো বুঝিয়ে দিতে। অথবা contact me form এ আপনার প্রশ্ন লিখে পাঠান আমি দ্রুত উত্তর দেয়ার চেষ্টা করব। আরো অনেক ফরম্যটিং ট্যাগ আছে, পরবর্তী লেসনে এ নিয়ে লিখার আশা রাখি।
পূর্ববর্তী
পরবর্তী
পূর্ববর্তী
পরবর্তী
No comments:
Post a Comment