আজকের আলোচ্য বিষয়ঃ প্রি ট্যাগ, ব্লককোট ট্যাগ, হরিজোনটাল লাইন ট্যাগ, কোটেশন ট্যাগ, লাইনব্রেক ট্যাগ, এব্রিভিয়েশন ট্যাগ, টেক্সট ডিরেকশন ট্যাগ, বিগ ট্যাগ, কোড ট্যাগ, সুপারসক্রিপ ও সাবসক্রিপ ট্যাগ সমূহ নিয়ে। তো চলুন-
প্রি-ট্যাগ (<pre> </pre>): এটি এমন একটি ট্যাগ যা সচারচর ব্যবহার হয় না। মানে ডিজাইনাররা ব্যবহার করেন না। এর কাজঃধরুন, আপনি পেজের কোন ইলিমেন্টকে ডানে-বায়ে, মাঝে বা আপনার পছন্দমত স্থানে দেখাতে চাইছেন। কিন্তু এই কাজটি করতে হলে আপনাকে টেক্ট এলাইমেইন প্রোপারটিজ এবং ভ্যাল left, center বা right ব্যবহার করতে হবে। এমনভাবেঃ <style text-align: center;> বা আপনি যে এলাইনমেন্ট চাইবেন তা।
কিন্তু আপনি এই প্রি-ট্যাগ ব্যবহার করে কোন এলাইনমেন্ট ব্যবহার না করেই সহজেই এই কাজ টি করতে পারবেন। যেভাবে লিখবেঃ
<p>This is pre tag example.</p>
<pre>
This is web design tutorial. This is web design tutorial. This is web design tutorial.
This is web design tutorial. This is web design tutorial. This is web design tutorial.
This is web design tutorial. This is web design tutorial. This is web design tutorial.
This is web design tutorial. This is web design tutorial. This is web design tutorial.
This is web design tutorial. This is web design tutorial. This is web design tutorial.
</pre>
<p>
This is web design tutorial. This is web design tutorial. This is web design tutorial.
This is web design tutorial. This is web design tutorial. This is web design tutorial.
This is web design tutorial. This is web design tutorial. This is web design tutorial.
</p>
উপরের দুটে প্যারা এর মধ্যে শুধু মাত্র <pre> এবং </pre> এর মধ্যবর্তী লিখাগুলো দেখুন। আমি যেভাবে(ডানে, বায়ে এবং মাঝে) লিখে রেখেছি সেভাবেই ব্রাউজারে প্রদর্শণ করবে। আর <pre> এবং </pre> এর পরের <p> এবং </p> এর মধ্যবর্তী প্যারাগ্রাফটি লক্ষ করুন। এটি তার নিয়ম মোতাবক ডিফল্ট প্যারাগ্রাফ রুলস অনুযায়ী প্রদর্শন করছে। বুঝতে না পারলে মন্তব্য জানাবেন।
ব্লককোট ট্যাগ (<blockquote> </blockquote>): ব্লককোট ট্যাগ যে প্যারা বা লাইনে ব্যবহার করা হবে। শুধু সেই লিখাটুকু বামে কিছুদূর মার্জিন নিয়ে স্বতন্ত্রভাবে প্রদর্শন করবে অন্যসব প্যারা থেকে। নিচের উদাহরণটি অনুসরন করুন-
<blockquote>This is web design tutorials class. This is web design tutorials class. This is web design tutorials class. This is web design tutorials class. This is web design tutorials class. This is web design tutorials class. This is web design tutorials class. This is web design tutorials class. This is web design tutorials class. This is web design tutorials class.
</blockquote>
<p>
This is web design tutorial. This is web design tutorial. This is web design tutorial.
This is web design tutorial. This is web design tutorial. This is web design tutorial.
This is web design tutorial. This is web design tutorial. This is web design tutorial.
</p>
হরিজোনটাল লাইন ট্যাগ (<hr />): HTML এর কিছু ট্যাগ রয়েছে যেগুলো স্টার্টিং ট্যাগ দিয়েই শেষ হয়। এগুলো কোন ইলিমেন্ট বহন করে না বিধায় এগুলো এমন। তার মধ্যে অন্যতম হরিজোনটাল লাইন ট্যাগ। এর কাজ শুধু মাত্র যেখানে এটি ব্যবহার করা হবে সেখানে একটি হরিজোনটাল লাইন প্রদর্শণ করবে। ব্যবহার করে দেখুন এভাবে:
<p>This is web design tutorial. Showing Horizontal Line below.</p>
<hr/>
<p>This is web design tutorial. Showing Horizontal Line below above.</p>
কোটেশন ট্যাগ (<q> </q>): এক বা একধিক বর্ণ, শব্দ, বাক্য বা প্যারার শুরুতে এবং শেষে “” চিহৃ কে আমরা কোটেশন বলি। তাই নতুন করে আর পরিচয় করিয়ে দিতে গেলাম না। শুধু নোটপ্যাডে প্রাকটিস করুন এই লাইনটি তাহলেই বুঝবেন-
<q>This is quotation tag.</q>
লাইন ব্রেক ট্যাগ (<br />): এক বা একধিক বর্ণ, শব্দ, বাক্য বা প্যারার মধ্যে লাইন ব্রেক করতে এই ট্যাগের ব্যবহার। মানে একটি প্যারা লিখার পর এই ট্যাগ ইউজ করলে নতুন লাইন বা প্যারা শুরু হবে। হুবহু কি-বোর্ডের এন্টার প্রেস করারমত। এটিও হরিজোনটাল লাইন ট্যাগ এর মত কোন উপাদান বহন করে না। অবশ্য বলে রাখা ভাল, প্যারাগ্রাফ ট্যাগ (<p> </p>) নিজেই লাইন ব্রেকের কাজ করে।
এব্রিভিয়েশন ট্যাগ (<abbr> </abbr>): এই ট্যাগের কাজঃ সাপোজ আপনি কোন ওয়েব সাইটের কোন টেক্ট/বা লাইনকে সংক্ষিপ্ত করে কয়েকটি লেটার/অ্কষর দিয়ে দেখাতে চাচ্ছেন। মানে আপনার পুরো লিখাটি যদি World Wide Web হয়। তাহলে সংক্ষিপ্ত করলে তা হবে WWW। কিন্তু আপনি চাইছেন কেউ এই WWW এর উপরে মাউস কার্সার রাখলে পুরো লিখাটি (World Wide Web) প্রদর্শণ করবে। এই কাজটি করার জন্যই এব্রিভিয়েশন ট্যাগ ব্যবহার করা হয়। নোটপ্যাডে প্রাকটিস করুন এই লাইনটি তাহলেই বুঝবেন-
<abbr title=”World Wide Web”>WWW</abbr>
টেক্সট ডিরেকশন ট্যাগ (<bdo dir=” “> </bdo>): এই ট্যাগটি আপনার লিখার ডিরেকশন পরিবর্তন করবে। ধরুন আপনি চাইছেন আপনার মূল লিখাটি “This is opposite Direction Tag” আপনি এই লাইটিকে gaT noitceriD etisoppo si sihT এভাবে লিখতে তাহলে আপনাকে নিচের ট্যাগটি লিখতে হবে-
<bdo dir=”rtl”>This is opposite Direction Tag</bdo>
<bdo> এবং </bdo> হলো মূল ট্যাগ কিন্তু আপনার টেক্টসকে উল্টা ডিরেকশনে দেখাতে হলে dir=’”” এ rtl রিখতে হবে। কারন ইংরেজি বণর্মালাতে ক্রমান্বয়ে সর্বশেষে r, তার আগে t এবং তার আগে l আসে। বুঝাতে পেরেছি কি? না পারলে মন্তব্যে জানান।
বিগ ট্যাগ (<big> </big>): সাধারন বা যেকোন সাইজের ফন্টকে অপেক্ষাকৃতি বড় দেখানোর জন্য এই ট্যাগ ব্যবহার হয়। নিচের মত করে…
<big>This is big tag.</big>
কোড ট্যাগ (<code> </code>): যারা প্রোগ্রামিং করেন তাদের প্রোগ্রামিং এরিয়াতে দেখবেন লিখার স্টাইলগুলো। যে ফন্টেই লিখেন না কেন স্টাইলটা হবে কোন লিখার মত। অনেকটা জায়গা আলাদা করে নিয়ে প্রদর্শন করবে এই কোডের ভেতরে কিছু লিখলো। নিচের মত করে…
<code>This is code for html code tag</code>
সুপারসক্রিপ ট্যাগ (<sup></sup>): পড়াশুনা করছেন বা করতেন এমন কাউকে খুজেঁ পাওয়া যাবে না যারা গণিত পড়েন/করেন নাই। ক্লাস সিক্স থেকে শুরু হয় বীজগণিত এর অংক। বীজগণিতেই পাওয়া যায় a2+2ab+b2=(a+b)2 এর অংক। a এবং b এর উপরে পাওয়ার ২। এই উপরের পাওয়ারগুলোকেই ওয়েব এর ভাষায় সুপারসক্রিপ বলে। যে অক্ষর বা ওয়ার্ডে উপরে পাওয়ার দিবেন শুধু তার সামনে <sup> ও শেষে </sup> লিখে দিন। নিচের মত করে…
(a+b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup>
সাবসক্রিপ ট্যাগ (<sub></sub>): Science (বিজ্ঞান) নিয়ে পড়াশুনা করছেন বা করতেন এমন কাউকে খুজেঁ পাওয়া যাবে না যারা কোন রাসায়নিক সংকেত চিনেন না বা লিখেন নাই। যেমনঃ Oxygen এর রাসায়নিক সংকেত O2 , Nitrogen এর রাসায়নিক সংকেত NO2। এই উপরের পাওয়ারগুলোকেই ওয়েব এর ভাষায় সাবসক্রিপ বলে। যে অক্ষর বা ওয়ার্ডে নিচে পাওয়ার দিবেন শুধু তার সামনে <sub> ও শেষে </sub> লিখে দিন। নিচের মত করে…
Oxygen=O<sub>2</sub>, Nitrogen=N0<sub>2</sub>
পুরো টিউটোরিয়ালটি এভাবে লিখুন নোট প্যাডেঃ
<html>
<head>
<title>This is Web Design Tutorials 4th Class</title>
</head>
<body>
<pre>
<p>This is pre tag example.</p>
This is webdesign tutorial. This is webdesign tutorial. This is webdesign tutorial.
This is webdesign tutorial. This is webdesign tutorial. This is webdesign tutorial.
This is webdesign tutorial.
This is webdesign tutorial. This is webdesign tutorial.
This is webdesign tutorial. This is webdesign tutorial. This is webdesign tutorial.
This is webdesign tutorial. This is webdesign tutorial. This is webdesign tutorial.
This is webdesign tutorial . This is webdesign tutorial. This is webdesign tutorial.
This is webdesign tutorial. This is webdesign tutorial. This is webdesign tutorial.
This is webdesign tutorial. This is webdesign tutorial. This is webdesign tutorial.
</pre>
<p>
This is webdesign tutorial. This is webdesign tutorial. This is webdesign tutorial.
This is webdesign tutorial. This is webdesign tutorial. This is webdesign tutorial.
This is webdesign tutorial. This is webdesign tutorial. This is webdesign tutorial.
</p>
<blockquote>
This is webdesign tutorials class. This is webdesign tutorials class. This is webdesign tutorials class. This is webdesign tutorials class. This is webdesign tutorials class. This is webdesign tutorials class. This is webdesign tutorials class. This is webdesign tutorials class. This is webdesign tutorials class. This is webdesign tutorials class.
</blockquote>
<p>
This is webdesign tutorial. This is webdesign tutorial. This is webdesign tutorial.
This is webdesign tutorial. This is webdesign tutorial. This is webdesign tutorial.
This is webdesign tutorial. This is webdesign tutorial. This is webdesign tutorial.
This is webdesign tutorial. This is webdesign tutorial. This is webdesign tutorial.
This is webdesign tutorial. This is webdesign tutorial. This is webdesign tutorial.
</p>
<hr/>
<q>This is quatation tag.</q>
</br>
<abbr title=”World Wide Web”>WWW</abbr>
</br>
<bdo dir=”rtl”>This is opposite Direaction Tag</bdo>
</br>
<big>This is big tag.</big>
</br>
<code>This is code for html code tag</code>
</br>
(a+b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup>
</br>
Oxygen=O<sub>2</sub>, Nitrogen=N0<sub>2</sub>
</br>
</body>
</html>
সেভ করুন tag3.html ফরমেটে। এবং ডাবল ক্লিক করে ব্রাউজারে প্রদর্শন করুন।
নোট: এইচটিএমএল নতুন শিখছেন এমনদের কাছে একটি অনুরোধ নোট প্যাডে প্রাকটিস করবেন। তাতে কোড সম্পর্কে আপনার অনেক ধারনা পরিস্কার হবে। ভবিষতে সমস্যায় পড়বেন না।
0 comments:
Post a Comment