«

»

HTML শিখুন HTML5 সহ (পর্ব-6) Links

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

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

বিদ্রঃ ছবি গুলোর অক্ষর যদি স্পষ্ট না হয় তাহলে নতুন ট্যাবে ছবি গুলোকে খুলে বড় করে দেখা যাবে।

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 হচ্ছে ঐ লিঙ্ক সম্পর্কে যে লেখা থাকবে তা।

উদাহরনঃ

বিদ্রঃ আমি বাংলাতে লিখছি বুঝার জন্য। আপনার এডিটর যদি Unicode সাফোর্ট না করে আপনি বাংলায় লিখতে পারবেন না। যদি সাপোর্ট করে তাহলে আপনি ও বাংলা লিখতে পারবেন।

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

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

উদাহরনঃ

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

HTML Image Link:

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

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

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

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

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

HTML Links- name Attribute

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

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“/>

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

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

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

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

কিভাবে একটি ছবি এড করতে হয় তা উপরের উদাহরন দেখলেই বুঝতে পারবেন।

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 ইত্যাদি সংরক্ষন করে।

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

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

HTML Tables এবং Border Attribute

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

কোন সমস্যা হলে জানাবেন।

ধন্যবাদ সবাইকে।

পরবর্তী পর্ব গুলোঃ


এ সম্পর্কিত আরো কিছু টুইট:

ব্লগস্পটে সামাজিক নেটওয়ার্কিং সাইটের আইকন যোগ করার উপায় (নতুনদের জন্য)
প্লাগিন ছাড়াই ওয়ার্ডপ্রেসের যে কোন থিমসে দারুন ভাবে রিলেটেড পোস্ট যুক্ত করুন
দেখে নিন কিভাবে আপনার ব্লগার ব্লগের Sidebar কে Hide করবেন ।
আজ থেকে আপনার COMPUTER এর যে কোনো ফাইল Copy-Past করুন আরও দ্রুত।
100 plus Book marking Site list for web developer
Mobile এর Sensor এ আঙ্গুল রেখে মোবাইল Lock / Unlock করুন
এন্টিভাইরাস কী? ইহা ভাইরাস ‘খায়’ না ‘মারে’??

মন্তব্য দিনঃ

comments

About the author

জাকির হোসাইন

প্রোগ্রামিং বা ফ্রীল্যান্সিং নিয়ে কোন প্রশ্ন থাকলে টেকটুইটস সাহায্য বিভাগে পোস্ট দিতে পারেন অথবা আমাকে ফেসবুকে মেসেজ দিতে পারেন।

Permanent link to this article: http://techtweets.com.bd/web-developing/jakirbdl/1590

11 comments

Skip to comment form

  1. রুবেল অরিয়ন

    স্যার,
    এত লম্বা কেন?
    পড়তে পড়তে যান শেষ!

    1. ঐ ছেলেটি
      jakir

      আমি কি করব?? বড় হয়ে গেছে, আমার ও যান শেষ

  2. আউয়াল

    শিখতে হলে একটু কষ্ট করতে হবে।এইটা মাথায় রেখে সামনে অগ্রসর হচ্ছি। ধন্যবাদ পর্বটি দেওয়ার জন্য।

    1. ঐ ছেলেটি
      jakir

      আপনাকে ও ধন্যবাদ আউয়াল ভাই।

  3. mspolash

    bhai ekto janaben ki bave website e download link লোকানো যায় ????

    যেমন website er page download er ekti picture ey click korle download hoy . plj help me may Allah bless you 🙂

    1. ঐ ছেলেটি
      jakir

      ধন্যবাদ ভাইয়া, ছবির মধ্যে লিঙ্ক তৈরি করেই করতে পারবেন। উপরে দেখানো আছে কি ভাবে লিঙ্ক তৈরি করতে হয়। আসা করি পারবেন।

  4. aowalbd

    {name attribute ব্যবহার করে একই পেজের অন্য জাগায় যেতে ব্যবহার করা হয়}। এইটার একটা উদাহরন দেওয়া যাবে।

    1. ঐ ছেলেটি
      jakir

      আউয়াল ভাই, উদাহর দিয়েছি একটাঃ এই পেইজে HTML Links- name Attribute নামক সেকশনে পাবেন।

  5. dreamworker_101

    need to know abt rowspan & colspan

    1. ঐ ছেলেটি
      jakir

      ওকে

  6. monir

    vai amar img and bangla lekha ashe na
    shudu img ar giga ashe but img show kore na
    problem bojtashi na ?
    code tik ashe tar porio ashe na
    firefox use kori
    please help me

মন্তব্য করুন