এটি 18 পর্বের HTML বেসিক ট্রেনিং ফ্রি বিষয়ক টিউনের 9 পর্ব

কেমন আছেন সবাই।আশা করি সবাই ভাল আছেন।আজকে আমি আপনাদের সাথে একটা নতুন বিষয় নিয়ে আলোচোনা করব। আজকে আমি আলোচনা করব Html-এর Link এবং Image সম্পর্কে । চলুন শুরু করি ।

যারা আগের পর্বগুলি মিস করেছেন তারাএখানে ক্লিক করে দেখে নিতে পারেন ।

HTML link:-

ওয়েব পেজের মধ্যে কোন লিংক যোগ করার জন্য ব্যবহৃত হয় Html Link । যেমন:- যারা এইচটিএমএল এর আগের টিউনগুলো দেখেন নি তারা এখানে ক্লিক করে দেখে নিন ।যদি আপনি এখানে ক্লিক করে লেখাটিতে ক্লিক করেন তবে আগের সব গুলো টিউন দেখেতে পারবেন । অর্থাৎ আমি এটিকে লিঙ্ক হিসেবে দিয়ে দিছি । আশাকরি বুজতে পেরেছেন লিঙ্ক কি ?

Html Link হিসেবে যে-কোন টেক্সস্ট বা ছবি ব্যবহৃত হয়ে থাকে । ওয়েব পেজে যেকোন Link যোগ করার জন্য ট্যাগ এবং এই ট্যাগের একটি Attribute, href ব্যবহৃত হয় । ট্যাগের link সংক্রান্ত আরও একটি Attribute হল target ।

1.Text Link:-

এর গঠন <a href=http://www.abcd.com”>কখগঘ</a> এই রকমের হয় । এখানে www.abcd.com এর মান হবে আপনি যে লিংকটি যোগ করতে চাচ্ছেন তার URL এবং কখগঘ -এর মান হবে আপনি যে নামে লিংকটিকে ওয়েব পেজে দেখাতে চান বা সেটি । যেমন :- ধরুন আপনি www.pchelpcenterbd.com এই সাইটটি কে লিঙ্ক হিসাবে প্রকাশ করতে চান তা হলে আপনাকে লিখেতে হবে <a href=”http://www.pchelpcenterbd.com” target=”_blank”>পিসি হেল্প সেন্টার বিডি </a> । লিঙ্কটি লিখেতে গিয়ে আমি target=”_blank” কথাটি লিখেছি target=”_blank” এইটার মানে হল আপনি যখন এই লিঙ্কটিতে ক্লিক করবেন তখন সেটি আপনার ব্রাউজারের নতুন উইন্ডোতে নতুন পেজে আপনার প্রদত্ত লিংকটি প্রকাশ করবে । আসাকরি বুজতে পেরেছেন ।

তাহলে চলুন নোটপ্যাড দিয়ে একটি এইচটিএমএল লিঙ্ক তৈরি করি । প্রথমে নোটপ্যাড ওপেন করুন।তারপর আগের টিউন এর নিয়ম অনুসারে নিচের কোডিংটুকু লিখুন। তারপর তা a1.html নামে সেভ করুন।


<html>

<head>

<title>

link making learn

</title>

</head>

<body>

আমারা  <a href="http://www.pchelpcenterbd.com" target="_blank">পিসি হেল্প সেন্টার বিডি </a> সাইটকে অনেক ভালবসি ।

</body>

</html>

যেমন :-

নোটপ্যাড এ input	ব্রাউজারে output
উপরের এইচটিএমএল কোডটি নোটপ্যাড এ লিখে a1.html নাম দিয়ে ডেক্সটপ এ সেভ করুন ।	আমারা পিসি হেল্প সেন্টার বিডি সাইটকে অনেক ভালবসি ।

2.Image Link:-

গঠন Text Link-এর মতই কেবল কখগঘ-এর মান কোন Text-এর পরিবর্তে যে ছবিটি ওয়েব লিংক হিসেবে ব্যবহার করতে চান তার লিংক বা অবস্হান লিখতে হবে ।
তাহলে চলুন নোটপ্যাড দিয়ে একটি এইচটিএমএল Image লিঙ্ক তৈরি করি । প্রথমে নোটপ্যাড ওপেন করুন।তারপর আগের টিউন এর নিয়ম অনুসারে নিচের কোডিংটুকু লিখুন। তারপর তা a2.html নামে সেভ করুন।


<html>

<head>

<title>

link making learn

</title>

</head>

<body>

<h3 align="left"> পিসি হেল্প সেন্টার বিডি সাইটটিতে প্রবেশ করতে হলে ছবির উপর ক্লিক করুন ।</h3> <a href="http://www.pchelpcenterbd.com/" target="_blank">
<img src="http://m.UploadEdit.com/b006/1355465092168.jpg" border="2" style="border:2px solid black;max-width:65%;" alt="pc help center bd" />
</a>

</body>

</html>

যেমন :-

নোটপ্যাড এ input	ব্রাউজারে output
উপরের এইচটিএমএল কোডটি নোটপ্যাড এ লিখে a1.html নাম দিয়ে ডেক্সটপ এ সেভ করুন । তারপর এটা ওপেন করুন । ওপেন করলে আপনার ব্রাউজার এ পাশের মত ছবিটি আসবে । ছবিটিতে ক্লিক করলে পিসি হেল্প সেন্টার বিডি সাইট এ যাবে ।	পিসি হেল্প সেন্টার বিডি সাইটটিতে প্রবেশ করতে হলে ছবির উপর ক্লিক করুন । Html Image:-

নোটপ্যাড এ input

ব্রাউজারে output

উপরের এইচটিএমএল কোডটি নোটপ্যাড এ লিখে a1.html নাম দিয়ে ডেক্সটপ এ সেভ করুন । তারপর এটা ওপেন করুন । ওপেন করলে আপনার ব্রাউজার এ পাশের মত ছবিটি আসবে । ছবিটিতে ক্লিক করলে পিসি হেল্প সেন্টার বিডি সাইট এ যাবে ।

পিসি হেল্প সেন্টার বিডি সাইটটিতে প্রবেশ করতে হলে ছবির উপর ক্লিক করুন । Html Image:-

ওয়েবপেজের একটি গুরুত্বপূর্ণ বিষয় হল ছবি।পেজের মধ্যে যত ভাল ছবি বা ব্যানার থাকবে পরিদর্শক তত বেশি আকর্ষিত হবে।ওয়েব পেজের মধ্যে কোন ছবি যোগ করতে ব্যবহৃত হয় img ট্যাগ আর src Attribute । src Attribute টির মান হয় যে ছবিটি ওয়েবপেজে প্রকাশ করতে চান তার অবস্হান ।এর গঠন <img src=”http://www.abcd.com/abcd/abdc.jpg”/> । লক্ষ্য করুন img ট্যাগটির সমাপ্তকরণ সূচক নেই ।

তাহলে চলুন নোটপ্যাড দিয়ে একটি এইচটিএমএল Image তৈরি করি । প্রথমে নোটপ্যাড ওপেন করুন।তারপর আগের টিউন এর নিয়ম অনুসারে নিচের কোডিংটুকু লিখুন। তারপর তা a3.html নামে সেভ করুন।


<html>

<head>

<title>

link making learn

</title>

</head>

<body>

<img src="http://m.UploadEdit.com/b006/1355465092168.jpg" alt="pchelpcenter" align=”right” width=”250″ height=”150″/>

</body>

</html>

যেমন :-

নোটপ্যাড এ input	ব্রাউজার এ Output
উপরের এইচটিএমএল কোডটি নোটপ্যাড এ লিখে a3.html নাম দিয়ে ডেক্সটপ এ সেভ করুন । তারপর সেটিকে ওপেন করুন । ওপেন করলে আউটপুট হিসেবে আপনি ছবিটি দেখেতে পাবেন ।