HTML শিখুন HTML5 সহ (পর্ব-6) – লিঙ্ক এবং টেবিল

by

পরীক্ষা থাকার কারনে অনেক দেরি হয়ে গেল। সবার কাছে তাই আন্তরিক ভাবে দুঃখিত।

আগের পর্ব গুলোঃ

HTML Links

HTML Hyperlinks কে সংক্ষেপে HTML Links বলে। বর্তমাব পেইজ থেকে অন্য পেইজে বা একই পেইজের অন্য জাগায়র সাথে লিঙ্ক তৈরি করতে HTML Links ব্যবহার করা হয়। HTML Link ব্যবহার করার জন্য <a> ট্যাগ ব্যবহার করা হয়। দুই ভাবে <a> ট্যাগ ব্যবহা করা যায়ঃ

1.   href attribute ব্যবহার করে অন্য আরেকটী ওয়েব পেজ বা ডকুমেন্টে যেতে

2.   name attribute ব্যবহার করে একই পেজের অন্য জাগায় যেতে ব্যবহার করা হয়

HTML Link লেখার নিয়মঃ

<a href=”url“>Link text</a>

url হচ্ছে ক্লিক করার পর যে পেইজে যাবে সে পেইজের এড্রেস। Link text হচ্ছে ঐ লিঙ্ক সম্পর্কে যে লেখা থাকবে তা।

উদাহরনঃ


<html>
 <body>
 <a href="http://jakir.me">Website of Jakir </a>
 </body> 
</html>

উপরের কোড গুলো একটা html ফাইলে লিখে ব্রাউজারে দেখলে একটা লিঙ্ক দেখাবে।

 

লিঙ্ক তৈরি হলে যে লেখাতে লিঙ্ক তৈরি করবেন তার কালার পরিবর্তন হবে এবং নিচে একটা আন্ডারলাইন হবে। এটা সয়ংক্রিয় ভাবে হবে। আপনি Attribute পরিবর্তন করে ইচ্ছে মত  কালার পরিবর্তন  করে দিতে পারবেন। লিঙ্কের উপর মাউস পয়েন্টার ধরলে পয়েন্টারের পরিবর্তে একটি ছোট হাত দেখা যায়।  এখন লিঙ্ক টিতে ক্লিক করলে আপনাকে টেকটুইটস ব্লগে নিয়ে যাবে। যা একই ট্যাবে ওপেন হবে।

এখন আপনি যদি ঐ পেজটাকে একই ট্যাবে লোড না করে অন্য আরেকটা ট্যাবে খুলতে চান তাহলে আপনাকে আরেকটা Attribute যোগ করতে হবে। target   Attribute দিয়ে আপনি এটা পরিবর্তন করে দিতে পারবেন। তার জন্য a ট্যাগের ভেতর শুধু target=”_blank” যুক্ত করে দিতে হবে।

উদাহরনঃ


<html>
 <body>
 <a href="http://jakir.me" target="_blank">Website of Jakir </a>
 </body> 
</html>

উপরের উদাহরনে target=”_blank” দিয়ে লিঙ্কটির টার্গেট ঠিক করে দেওয়া হয়েছে। এখন যদি লিঙ্কটিতে ক্লিক করা হয় তাহলে তা একটি নতুন ট্যাবে ওপেন হবে।

HTML Image Link:

একটা ইমেজকে/ছবি কে আমরা লিঙ্ক হিসেবে ব্যবহার করতে পারি। অর্থাৎ ঐ ছবিতে ক্লিক করলে লিঙ্কে চলে যাবে।


<html>
 <body>
 <h1>Image Link demo</h1>
 <a href="https://www.google.com.bd/" target="_blank">
 <img src="https://www.google.com.bd/images/srpr/logo11w.png"/>
 </a>
 </body> 
</html>

এখানে গিয়ে JSFiddle থেকে ডেমো দেখতে পারেন। নিজের মত করে কোড পরিবর্তন করে রান করেও দেখতে পারেন।

তার জন্য a tag এর মধ্যে ছবি ক্লিক করলে যে লিঙ্কে যাবে তা দিতে হবে, এবং tag বন্ধ না করে ছবিটির উৎস দেখতে হবে। তার জন্য img Tag ব্যবহার করে Attribute হিসেবে ছবিটির source দেখিয়ে দিতে হবে। উপরের উদাহরন টি দেখলে ভালো ভাবে বুঝতে পারবেন।  alt ট্যাগ ব্যবহার করা হয়েছে যদি ইমেজটি লোড না হয় তাহলে লেখা টি দেখাবে।  আপনি ইচ্ছে করলে ইমেজের সাইজ ও ঠিক করে দিতে পারেন। তার জন্য নিচের উদাহর টি দেখুনঃ

ছবির সাইজ একটি গুরুত্ত্ব পূর্ণ বিষয়। আপনি যদি ইচ্ছে মত একটা সাইজ দিয়ে রাখেন তাহলে আপনার সাইট দেখতে খারাপ দেখাবে। কিন্তু সব কিছু চিন্তা করে যদি ছবির সাইজ ঠিক করে দিয়ে থাকেন তাহলে দেখতে সুন্দর দেখাবে। উপরের উদাহরনে দেখানো হয়েছে কিভাবে ছবির প্রস্থ ও উচ্চতা ঠিক করে দেওয় যায়। এটি img Tag এর ভিতরে উল্লেখ করতে হয়।

আবার ইচ্ছে করলে ছবিটির বর্ডার ও আমরা ঠিক করে দিতে পারি। নিচের উদাহরনে দেখুনঃ


<html>
 <body>
 <h1>Image Link demo</h1>
 <a href="https://www.google.com.bd/" target="_blank">
 <img src="https://www.google.com.bd/images/srpr/logo11w.png" width="200px" border="5"/>
 </a>
 </body> 
</html>

এখান এ গিয়ে JSFiddle এ ডেমো এবং এডিট করে দেখা যাবে।

আপনি CSS এর প্রয়গ করে আরো সুন্দর করে বর্ডার দিতে পারবেন।

HTML Links- name Attribute

একই পেজের অন্য কোন জাগায় লিঙ্ক তৈরি করার জন্য name Attribute ব্যবহার করা হয়। যখন একটি পেজ অনেক বড় হয়ে যায় তখন name Attribute ব্যবহার করা হয়।

Name Attribute এর কোড এবং ডেমো দেখার জন্য JSFiddle ভিজিট করুন। 

name Attribute ব্যবহার করার জন্য যে লেখায় বা সেকশনে লিঙ্ক তৈরি করবেন সেখানে a ট্যাগ ব্যবহার করে একটি নাম দিতে হবে। এবং এবার যেখানে লিঙ্ক টি দেখাবেন সেখানে ও <a> ট্যাগ ব্যবহার করে # দিয়ে লিঙ্ক তৈরি করে দিতে হবে। উপরের উদাহরন ভালো ভাবে দেখলে বুঝতে পারবেন।

HTML Images

এখন আর শুধু ওয়ার্ড দিয়ে কোন ওয়েব সাইট দেখা যায় না। ওয়েব সাইটের প্রত্যেক পেজে কিছু না কিছু ইমেজ থাকেই। <img> tag ব্যবহার করে ওয়েব পেজে ছবি বা ইমেজ দেওয়া হয়।

<img> tag ব্যবহার করে বুঝানো হয় যে একটি ইমেজ এখানে আছে। কিন্তু ইমেজ টি কোথায় থেকে লোড হবে বা তার উৎস কোথায় তা দেখিয়ে দিতে হয়। আর এ কাজ করে “src” Attribute এবং লেখা হয়ঃ src=”url” এ ভাবে। যেখানে “url” হচ্ছে ইমেজের এড্রেস। Attribute সহ পুরো ইমেজ ট্যাগ লেখা হয় <img src=”url“/> এ ভাবে। src হচ্ছে Source।

এখন যদি কোন কারনে যদি ছবি টি লোড না হয় তা জন্য একটি লেখা আমরা প্রদর্শন করতে পারি। আর তা দেওয়া হয় Alt Attribute দ্বারা। এবং লেখা হয়

<img src=”url” alt=”some_text“/>


<html>
<body>
<h1>Image demo</h1>

<img src="https://www.google.com.bd/images/srpr/logo11w.png" />

</body>
</html>

ডেমো দেখার জন্য JSFiddle এ গিয়ে দেখতে পারেন।

একটি ছবির Height(উচ্ছতা) এবং Width(প্রস্থ) দেওয়া

এখন আপনি চাচ্ছেন আপনার ছবিটির প্রস্থ এবং উচ্ছতা ঠিক করে দিতে। মানে ইমেজটি কত বড় তা ঠিক করে দিতে তার জন্য attribute  গুলো যোগ করে দিতে হবে। যা নিচের মত করে করতে হয়ঃ

<img src=”url” alt=”About immage” width=”80″ height=”80″ />

আপনি যদি ছবিটির সাইজ না ঠিক করে দেন তাহলে ছবিটির আসল সাইজ  দেখাবে।


<html>
<body>
<h1>Image demo</h1>

<img src="https://www.google.com.bd/images/srpr/logo11w.png"width="200px" height="80px"/>

</body>
</html>

ডেমো

HTML Tables

অনেক গুলো ডাটা কে সাজাতে টেবিল আমরা সকল ওয়ার্ড প্রসেসরেই ব্যবহার করি। আর HTML এ টেবিল দেওয়ার জন্য রয়েছে <table> tag। যার সাহায্যে HTML পেইজে টেবিল এড করা হয়।

একটি table কত গুলো row বা সারি তে বিভক্ত।  সারি দিতে <tr> tag ব্যবহার করা হয়। আবার প্রত্যকটা সারি কত গুলো data cells এ ভিবক্ত। cell দিতে <td> tag ব্যবহার করা হয়।  td  বলতে “table data,”  বুঝায়।  data cell এর content গুলোকে সংরক্ষন করে। একটি <td> tag  text, links, images, lists, forms, other tables ইত্যাদি সংরক্ষন করে।


<!DOCTYPE html>
<html>
<body>
<table style="width:100%">
<tr>
<td>Rahim</td>
<td>Karim</td>

</tr>
<tr>
<td>Eva</td>
<td>Tanni</td>
</tr>
</table>
</body>
</html>

ডেমো। 

এবার উপরের কোড টা একটু বিশ্লেষন করি।

এখানে আমরা দুইটি সারি এবং প্রতেক সারিতে দুটি করে সেল ব্যবহার করছি। প্রথমে সারি দিতে হয়। এবং তা দিতে <tr> Tag ব্যবহার করা হয়। এবার এ সারির মধ্যে কয়টা সেল দিবেন তার উপর নির্বর করে <td> Tag ব্যবহার করা হয়। এবং টেবিলের ডাটা গুলো <td> Tag এর মধ্যে লেখা হয়। আপনি <td> Tag ব্যবহার করে একটি সারিতে সেলের সংখা বাড়াতে পারবেন। সেলের ডাটা গুলো দেওয়া হলে দেওয়ার পর আপনি  <tr> ট্যাগটি বন্ধ করতে হবে।

HTML Tables এবং Border Attribute

যদি আমরা Border Attribute ব্যবহার না করি তাহলে বর্ডার দেখা যাবে না। উপরের উদাহরনে আমরা border=”1″ দিয়ে বর্ডার দিয়েছি। যদি বর্ডার দেওয়া না লাগে তাহলে এ কোড না লিখলে ও হয়।


<!DOCTYPE html>
<html>
<body>
<table style="width:100%" border="1">
<tr>
<td>Rahim</td>
<td>Karim</td>

</tr>
<tr>
<td>Eva</td>
<td>Tanni</td>
</tr>
</table>
</body>
</html>

1 thought on “HTML শিখুন HTML5 সহ (পর্ব-6) – লিঙ্ক এবং টেবিল”

Leave a Reply