৪র্থ পর্বে স্বাগতম
আশা করি গত ৩ পর্বে অনেকেই নতুন কিছু শিখেছেন । আজকের পর্বে আমরা শিখব ইমেজ ও লিংক এড করা ।
ইমেজ বা ছবি ওয়েব পেইজ এ প্রদর্শনের জন্য প্রয়োজন <img> ট্যাগ, এটি একটি ব্যাতিক্রম ধর্মীট্যাগ কারন এর কোন ক্লোজিং অংশ নেই ।
<img src="/sunset.gif" alt="Sunset" />
খানে src এবং alt হচ্ছে img ট্যাগের দুটি এট্রিবিউট। src দিয়ে ছবিটির অবস্থান দেখিয়ে দিতে হবে এবং alt এর মধ্যে ছবিটির কোন বর্ননা দিতে পারবেন। ছবি লোড হতে দেরি হলে ততক্ষন alt এর ভিতর লেখাটি দেখায়।
যেকোন ইমেজের লিংক দিলেই সেটি ওয়েব পেইজে প্রদর্শন করে আমরা পরবর্তীতে ছবির আকার পরিবর্তন দেখব ।
ওয়েবসাইট গুলোতে ভিজিটের সময় দেখা যায় বিভিন্ন লেখা বা ছবি তে ক্লিক করলেই তা অন্য ওয়েবসাইটে চলে যায়। সেখানে আসলে একটি ওয়েবএড্রেস লিংক করে দেয়া হয় , anchor tag এর সাহায্যে লিংক তৈরী করা হয়। শুধু টেক্সট নয় আপনি চাইলে একটা মেইল এড্রেসের উপর লিংক দিতে পারেন, একটা ছবির উপর লিংক দিতে পারেন, বড় কোন ওয়েব পেজের সুচিপত্র তৈরী করে এর আইটেমগুলিতে লিংক দিতে পারেন (এসব লিংকে ক্লিক করলে পেজেরই ঐ অংশে যাবে যেখান থেকে আইটেমটি শুরু হয়েছে)।
হাইপারটেক্সক্ট রেফারেন্স(href)
Hypertext reference হতে পারে Internal, Local, Global
ইন্টারনাল: একই পেজের মধ্যে লিংক তৈরী হবে। উদাহরনঃইন্টারনাল- href="#anchorname"
লোকাল: আপনার web site এর ভিতরে কোন পেজেরে সাথে লিংক তৈরী হবে। উদাহরনঃhref="/ebangla.tech/../pics.jpg"
গ্লোবাল: আপনার web site এর বাহিরে অন্য web site এর লিংক তৈরী হবে। উদাহরনঃ"http://www.google.com/"
এইচটিএমএল লিংক (টেক্সক্ট) যেভাবে তৈরী করবেন
<a> এবং </a> tag দ্বারা যথাক্রমে লিংক শুরু এবং শেষ বোঝায়। href এট্রিবিউট এর সাহায্যে কোন ধরনের লিংক স্থাপিত হবে তা নির্ধারিত হয়। href এট্রিবিউটকে opening tag এর মধ্যে রাখতে হয়। opening এবং closing tag এর মধ্যে কোন লেখা থাকলে, তা পরে web পেজে লিংক হিসাবে দেখা যাবে।যেমন
body tag এর মধ্যে নীচের লিংক টি লেখুন
<a href="http://ebangla.tech" >E bangla Website</a>
এরপর ওয়েব পেইজ টি রান করে দেখুন E bangla Website লেখা রয়েছে সেখানে মাউস নিয়ে দেখুন কার্সর এর ডিজাইন চেঞ্জ হয়ে গেছে । তারমানে সেটি লিংক হিসেবে সেট হয়েছে এবং ক্লিক করে দেখুন লিংক এর ওয়েবসাইটে গিয়েছে কিনা । যদি যায় তাহলেই বুঝবেন সব ঠিক মত হয়েছে ।
এবার আরেকটু এডভান্স দেখি এবার , সেটি হল টার্গেট এট্রিবিউট ,
target="_blank" - নতুন window এ ওপেন হবে লিংক
target="_self" - যে ট্যাব এ আছেন সেখানেই ওপেন হবে এটি ডিফল্ট অপশন আপনি যদি লিংকের পরে কিছু না ও দেন তাহলেও সেলফ এট্রিবিউট কাজ করে
target="_parent" - parent frame এ ওপেন হবে
a tag এর লিঙ্ক এর শেষে এইগুলো দিলে কাজ করে ,
যেমন আপনি যদি
<a href="https://ebangla.tech/" target="_blank"> EBangla Website </a>
এবার ইমেজ এর মধ্যে লিংক তৈরী করব , অর্থাৎ ইমেজে ক্লিক করলে ওয়েবসাইটের লিংক এ চলে যাবে