HTML head tag এর কিছু element tag এর সাথে পরিচিতি
HTML ডকুমেন্টে HEAD ট্যাগের ভিতর ওয়েবপেজ সম্পর্কিত বিভিন্ন তথ্য দেয়া হয়। তথ্য গুলোর ভিতর থাকতে পারে ওয়েবসাইট/ওয়েবপেজ সম্পর্কিত তথ্য (যেমনঃ ওয়েব সাইটের title, সাইটের author এর নাম ইত্যাদি)। এখানে আরো থাকে ওয়েবপেজের ডিজাইন সম্পর্কিত তথ্য এবং আরো অনেক কিছু; যে গুলো ওয়েব-ব্রাউজার এ সরাসরি দেখাবেনা। তবে পাতার উপর প্রভাব রাখবে।
নিচে <head> tag এর ভিতর ব্যবহৃত হয় এরকম কিছু HTML element tag এর পরিচয় দেয়া হল।
<title> tag
ওয়েব সাইটের টাইটেল নির্দিষ্ট করে দেয়া যায় এ ট্যাগ দিয়ে। টাইটেল দেখা যায় টাইটেল বারে। টাইটেল বার হচ্ছে প্রত্যেক উইন্ডোর উপরের বারটি, যেখানে উইন্ডোটি বন্ধ, মিনিমাইজ, ম্যাক্সিমাইজ করার বাটন থাকে।
উদাহরণ কোডঃ
<head> <title>This is the title</title> </head>
<link /> tag
বাইরের কোনো সোর্স থেকে কিছু (স্টাইল শিট, ফ্যাভিকন ইত্যাদি) লোড করার জন্য এ tag টি ব্যবহার করা হয়। উপরে style.css নামের একটি স্টাইল শিট যুক্ত করার উদারহন দেয়া হয়েছে।
উদাহরণ কোডঃ
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
স্টাইল শিট হচ্ছে এমন একটি ফাইল যেখানে ওয়েব সাইটটির ডিজাইন কেমন হবে তা সম্পর্কিত তথ্য থাকে, যা লিখা হয় সিএসএস ভাষায় দিয়ে।
<meta /> tag
বিভিন্ন metadata তথ্য দিতে এ tag টি ব্যবহার করা হয়। metadata হচ্ছে এইচটিএমএল ডকুমেন্টটি সম্পর্কিত তথ্য। যেমনঃ ওয়েব সাইটের বণর্না, ওয়েবসাইটের লেখক, ওয়েবসাইটের কি-ওয়ার্ড ইত্যাদি।
নিচের উদাহরণ কোডটি দিয়ে কি-ওয়ার্ড যুক্ত করা যায় এইচটিএমএল পাতায়। অনুসন্ধান ইঞ্জিন (যেমনঃ Google) এর জন্য কি-ওয়ার্ড এভাবে নির্দিষ্ট করে দেয়া যায়, ফলে অনুসন্ধান ইঞ্জিন বুঝতে পারে সাইটটি আসলে কিসের।
<head> <meta name="keywords" content="ICT Tutor, ICT, Information and Communication Technology"> </head>
ওয়েব পেজের বর্ণনা (description) নিচের মত কোড দিয়ে নির্দিষ্ট করে দেয়া যায়।
<head> <meta name="description" content="An interactive learning App."> </head>
পেজের লেখক (author) কে তা নিচের মত কোড দিয়ে নির্দিষ্ট করে দেয়া যায়।
<head> <meta name="author" content="Mohammad Imran Hossain"> </head>
<script> tag
HTML ডকুমেন্টের ভিতর JavaScript কোড লিখতে এ tag টি ব্যবহার করা হয়। JavaScript হল একটি ওয়েব প্রোগ্রামিং ভাষা।
উদাহরণ কোডঃ
<script> /* JavaScript things */ </script>
<style> tag
HTML ডকুমেন্টের ভিতর CSS অর্থাৎ Style নির্দিষ্ট করার জন্য এ tag ব্যবহৃত হয়।
উদাহরণ কোডঃ
<style> /* style things */ </style>
BODY ট্যাগের ভিতর যা লিখা হবে সব ব্রাউজারে দেখা যাবে। আর লিখাগুলো বা জিনিস গুলো কিভাবে থাকবে বা কোনটা কি তা বুঝিয়ে দেয়ার জন্য এইচটিএমএল ট্যাগ ব্যবহার করা হবে।
নিচে <body> tag এর ভিতর ব্যবহৃত হয় এরকম কিছু HTML element tag এর পরিচয় দেয়া হল।
<p> tag
কোনো প্যারাগ্রাফ (paragraph) কে বুঝাতে <p>ট্যাগ ব্যবহার করা হয়।
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> tag
কোনো প্যারাগ্রাফ (paragraph) কে বুঝাতে <p>ট্যাগ ব্যবহার করা হয়।
<b> এবং <strong> tag
কোনো লিখাকে মোটা (bold) করতে <b> এবং <strong> ট্যাগ ব্যবহার করা হয়।
<i> এবং <em> tag
কোনো লিখাকে বাঁকা (italic) করতে <i> এবং <em> ট্যাগ ব্যবহার করা হয়।
<u> এবং <ins> tag
কোনো লিখার নিচে দাগ (underline) দিতে <u> এবং <ins> ট্যাগ ব্যবহার করা হয়।
<strike> এবং <del> tag
কোনো লিখাকে কেটে (strike) দিতে <strike> এবং <del> ট্যাগ ব্যবহার করা হয়।
উপরের ট্যাগ জোড়া গুলো একই কাজ করে। তো একই কাজের দুই ট্যাগ কেন দেয়া হল? আসলে ট্যাগ গুলো কিন্তু আলাদা আলাদা অর্থ প্রকাশ করে। তবে ব্রাউজারে ডিফল্ট ভাবে একই স্টাইল দেয়া থাকায় একই মনে হয়। চলো কোনটা কোথায় ব্যবহার করবো তা জানা যাক।
<b>লেখা bold করতে ব্যবহার করবে।
<strong>গুরুত্বপূর্ণ লিখা হাইলাইট করতে ব্যবহার করবে।
<i>লেখা italic/বাঁকা করতে ব্যবহার করবে।
<em>গুরুত্বপূর্ণ লিখা হাইলাইট করতে ব্যবহার করবে।
<strike>লেখা কাটার জন্য এ ট্যাগ ব্যবহার করবে।
<del>লেখাটি মুছা হয়েছে/ বাদ দেয়া হয়েছে এ জাতীয় অর্থ বুঝালে এ ট্যাগটি ব্যবহার করবে।<u>লেখা underline করতে ব্যবহার করবে।
<ins>কোনো লিখা insert অর্থাৎ যুক্ত করা হয়েছে বুঝাতে এ ট্যাগ ব্যবহার করবে। মূলত কোনো পোষ্টের/লেখার কোনো কিছু হালনাগাদ (update) করা হলে ঐ নতুন হালাগাদটি চিহ্নিত করতে এ ট্যাগ ব্যবহার করা হয়। এ ট্যাগটি <del> ট্যাগের সাথে ব্যবহার করা হয়।
<ins> এর সাথে <del> tag
<ins> এর সাথে <del> ট্যাগ ব্যবহারের একটি উদাহরণ নিচে দেওয়া হলঃ
<sub> tag
নিচে কোনায় কিছু লিখার জন্য এ ট্যাগ ব্যবহার করা হয়।
<sup> tag
উপরে কোনায় কিছু লিখার জন্য এ ট্যাগ ব্যবহার করা হয়।
<big> tag
লিখা বড় করার জন্য এ ট্যাগ ব্যবহার করা হয়।
<small> tag
লিখা বড় করার জন্য এ ট্যাগ ব্যবহার করা হয়।
খালি ট্যাগ (Empty Tag)
কিছু ট্যাগ আছে যেগুলোর শেষ ট্যাগ লাগে না বা থাকে না, কারন এগুলোতে কোনো কন্টেন্ট থাকে না। এ গুলোকে empty HTML element বলে।
কিছু Empty HTML ট্যাগ এলিমেন্ট গুলো নিচে দেওয়া হলঃ
<br> tag
<br> ট্যাগ এসেছে break থেকে। লাইন ভাগ করতে এ ট্যাগ ব্যবহৃত হয়।
<hr> tag
এটিও একটি empty HTML element ট্যাগ। শেষ লাগেনা। hr এসেছে horizontal rule থেকে। অনুভূমিক রেখা টানতে এ ট্যাগ ব্যবহার করা হয়।
তালিকা
প্রায় সময় লিখার ক্ষেত্রে আমাদের তালিকা (List) তৈরির প্রয়োজন পরে। এখন আমরা শিখব কিভাবে লিস্ট আকারে আমরা কোন কিছু লিখতে পারি। লিস্ট দু-প্রকারের হতে পারে। যেমনঃ
সাজানো তালিকা (Orderded List): যে তালিকায় ১, ২, ৩ এরকম নাম্বার দেওয়া থাকে তাদের ordered list বলে।অসাজানো তালিকা (Un-ordered List): যে তালিকায় কোনো নাম্বার দেওয়া হয়না।
নিচে বিস্তারিত আলোচনা করা হল এগুলো নিয়ে।
অর্ডার্ড লিস্ট (Ordered list)
এক্ষেত্রে আমরা <ol> ট্যাগ দিয়ে শুরু করব এবং লিস্ট এর প্রতিটি আইটেমকে <li> ট্যাগ এর মধ্যে রাখব।
লিস্ট এর নাম্বারিং কিভাবে হবে, তা চাইলে আমরা পরিবর্তনও করতে পারি।
২.আন-অর্ডারড লিস্ট (un-ordered list)
এক্ষেত্রে আমরা <ul> ট্যাগ দিয়ে শুরু করব এবং লিস্ট এর প্রতিটি আইটেমকে <li> ট্যাগ এর মধ্যে রাখব।
তবে দেখা যাচ্ছে, বুলেট চিহ্ন (গোল ডট আকারের চিহ্নটাকেই বুলেট বলে) এর পরিবর্তে, সার্কেল চিহ্ন হিসেবে লিস্ট গুলো দেখানো হচ্ছে।
এখানে style="list-style-type: ..." দিয়ে আসলে, লিস্ট গুলো কিভাবে সাজানো থাকবে তা ঠিক করে দেওয়া যায়।
আমরা "circle" এর বদলে নিচের যে-কোন একটি সিলেক্ট করে দিতে পারিঃ
disccirclesquarenone
বর্ণনাযুক্ত তালিকা (description list)
এছাড়াও, ডেস্ক্রিপশন লিস্ট (description list) নামে আর এক প্রকারের লিস্ট ও তৈরী করা যায়।
এক্ষেত্রে আমরা <dl> ট্যাগ দিয়ে শুরু করব এবং লিস্ট এর প্রতিটি নামকে <dt> ট্যাগ এর মধ্যে রাখব। এবং <dd> ট্যাগ ব্যবহার করে ঐ নামের বর্ণনা করব।
ইমেজ ট্যাগ
এখন আমরা শিখব, কিভাবে আমরা এইচটিএমএল পাতায় ছবি যুক্ত করতে পারি।
<img> ট্যাগ ব্যবহার করে আমরা ছবি যুক্ত করতে পারি। এটি একটি সিঙ্গেল ট্যাগ, এর কোন ক্লোজিং ট্যাগ নেই।
এই ট্যাগ এর মধ্যে বিভিন্ন এট্রিবিউট ব্যবহার করে আমরা ছবি যুক্ত করব।
এট্রিবিউট (attribute) কি?
কোনো ট্যাগের <tag এবং > এর ভিতর, অর্থাৎ <tag ... > এর ... এর স্থানে যে তথ্য দেয়া হয় সেগুলোকেই attribute বলা হয়।
ইমেজ ট্যাগের কিছু এট্রিবিউট সম্পর্কে আমরা নিচে জানার চেষ্টা করি।
ক. src অ্যাট্রিবিউট
ইমেজ ট্যাগের মূল অ্যাট্রিবিউট হচ্ছে src। যেটার সাহায্যে ইমেজের অবস্থান (location) দেখিয়ে দেওয়া হয়।
যেমনঃ
src="example.jpg" src="Image/example.jpg" [ইমেজটি ভিন্ন কোন ফোল্ডারে থাকলে] src="http://domainname.com/example.jpg" [অন্য কোন ওয়েবপেজে থাকা ইমেজ ব্যবহার করলে]
এখানে example.jpg হচ্ছে ছবির ফাইলের নাম।
<img src="apple.jpg" alt="an apple" >
alt অ্যাট্রিবিউট
alt এসেছে alter থেকে, অর্থাৎ ইমেজ যদি কোনো কারনে দেখানো না যায় তাহলে ইমেজটি কিসের ছিল তা জানার জন্য একটি লেখা দেখানো যায় এ এট্রিবিউট দিয়ে। এছাড়া অনুসন্ধান ইঞ্জিন (যেমনঃ গুগল ইত্যাদি) ওয়েবসাইটকে কোনো ছবি কিসের তা জানানোর জন্যও এ এট্রিবিউট কাজে লাগে।
width ও height অ্যাট্রিবিউট
একটি ইমেজের সাইজ কত হবে সেটি নির্দেশ করা হয় এদের দ্বারা।
এদের মান প্রকাশ করা হয় পিক্সেলে। width মানে প্রস্থ আর height মানে উচ্চতা।
<img src="img/mark-zuckerberg.jpg" alt="Mark Zuckerberg" width="128" height="128" >
টেবিল
আমরা যখন কোন তথ্য উপস্থাপন করি, সাধারণত আমরা টেবিল ব্যবহার করি । এছাড়া, বিভিন্ন ধরনের উপাত্ত উপস্থাপন করার জন্য টেবিল ব্যবহার করে থাকি । একইভাবে, আমরা ওয়েবসাইটে কোন ধরনের উপাত্ত উপস্থাপন করার জন্য এইচটিএমএল টেবিল ব্যবহার করে থাকি । এইচটিএমএল টেবিল তৈরী করতে আমাদের বেশ কিছু ট্যাগ এর প্রয়োজন। প্রথমে আমরা ট্যাগ সম্পর্কে জেনে নেই ।
আমাদের টেবিলের সব কিছু <table> ... </table> ট্যাগের ভিতর থাকবে।প্রতিটি টেবিল হচ্ছে কিছু সারি এবং কলাম এর সমষ্টি।প্রতিটি কলাম তৈরীর জন্যে আমরা <tr> ট্যাগ ব্যবহার করব। tr এসেছে table row থেকে।একটি সারির প্রতিটি কলামে মান বসানোর জন্যে আমরা tr ট্যাগের ভিতর <td> ট্যাগ ব্যবহার করব। td এসেছে table data থেকে।টেবিল এর কলামের নামকরনের জন্যে আমরা <th> ট্যাগ ব্যবহার করব। th এসেছে table heading থেকে।
মনে কর, আমরা নিম্নোক্ত টেবিলটি তৈরী করতে চাইঃ
নাম-বয়স-রোল-ইসমাইল ২০১, রিয়াদ ২০২, সিয়াম ২০৩
এখানে দেখ, মোট ৩টি কলাম রয়েছে যাদের নামঃ নাম, বয়স, রোল।
তারপর আমরা৩টি কলামে ডাটা যুক্ত করয়েছি। মোট সারি = ৩ টি।
এখন যদি তুমি টেবিলটি তৈরী করতে চাও তবে,
১. প্রথমে দেখতে পাচ্ছ ৩টি কলাম রয়েছে। প্রথমেই আমাকে কলামগুলোর নামকরণ করতে হবে। নামকরণের জন্যে আমরা কি ট্যাগ ব্যবহার করি মনে আছে ত? উপরে আবার দেখে নিতে পার।
তাহলে টেবিল এর ৩টি কলাম এর নামকরণের জন্যে আমাদের লিখতে হবেঃ
<table>
<tr>
<th>নাম</th>
<th>বয়স</th>
<th>রোল</th>
</tr>
</table>
২. এখন আমরা প্রতিটি কলামে, ডাটা এন্ট্রি করব <th> ট্যাগ ব্যবহার করে। এইভাবেঃ
<table>
<tr>
<th>নাম</th>
<th>বয়স</th>
<th>রোল</th>
</tr>
<tr>
<td>রিয়াদ</td>
<td>২০</td>
<td>১</td>
</tr>
<tr>
<td>ইসমাইল</td>
<td>২০</td>
<td>২</td>
</tr>
<tr>
<td>সিয়াম</td>
<td>২০</td>
<td>৩</td>
</tr>
</table>
চাইলে "border" এট্রিবিঊট ব্যবহার করে আমরা টেবিল এর চারপাশে বর্ডার যোগ করতে পারি
<table border="1" >
<tr>
<th>নাম</th>
<th>বয়স</th>
<th>রোল</th>
</tr>
<tr>
<td>রিয়াদ</td>
<td>২০</td>
<td>১</td>
</tr>
<tr>
<td>ইসমাইল</td>
<td>২০</td>
<td>২</td>
</tr>
<tr>
<td>সিয়াম</td>
<td>২০</td>
<td>৩</td>
</tr>
</table>
হাইপারলিঙ্ক
একেই লিঙ্ক বা হাইপারলিঙ্ক (hyperlink) বলা হয়।
আমাদের কোন পেজ থেকে অন্য পেজ এ যাওয়ার জন্যে লিঙ্ক তৈরী করতে হয়।
এইচটিএমএল এ লিংক ব্যবহার করার জন্য অ্যাঙ্কর (Anchor) ট্যাগ <a> ... </a> ব্যবহার করা হয় এবং এর সাথে href অ্যাট্রিবিউট ব্যবহার করা হয়।
এইচটিএমএল লিংক এর গঠন হচ্ছেঃ
<a href="তোমার লিঙ্ক"> এখানে লিখা লিখুন </a>
নিচে একটি উদাহরণ দেওয়া হলঃ
<a href="https://www.google.com.bd">Go To Google</a>
0 comments: