ওয়েবপেজে Hyper link ও Image সংযোজন
Hyper link সংযোজন
একটা ওয়েব সাইটকে ব্যবহার বান্ধব করে তোলার ক্ষেত্রে লিংকের ব্যবহার খুবই গুরুত্বপূর্ণ।
Link এর আভিধানিক অর্থ সংযুক্ত করা। অর্থাৎ একটা ওয়েব পেজে অন্য একটা পেজকে যুক্ত করাই হল হাইপার লিংক।
HTML এ হাইপার লিংক করার জন্য <a> ট্যাগ বা anchor ট্যাগ ব্যবহার করা হয়।
HTML Link এর সিনট্যাক্স হলো <a
href= "url" >
Link Text </a> ।
এখানে href বা hyper reference লিংকের ঠিকানা নির্ধারণ করে। আর এলিমেন্ট কন্টেন্ট বা Link Text দ্বারা পেইজে যে অংশটি প্রদর্শিত হবে সেটি নির্ধারণ করে।
উদাহরণ: Google সার্চ ওয়েবসাইটটিকে ওয়েবপেজে লিংক করার প্রোগ্রাম
<html>
<head>
<title> Hyper link in web page</title>
</head>
<body>
<a href="http://www.google.com"> Google
</a>
</body>
</body>
</html>
ফলাফল: কোন ব্রাউজিং সফটওয়্যারে ফাইলটি রান করলে নিম্নোক্ত আউটপুট পাওয়া যাবে।
Image সংযোজন
একটা ওয়েব পেজের গুরুত্বপূর্ণ উপাদান সমূহের একটি হচ্ছে ইমেজ । ওয়েবপেজে ইমেজের উপযুক্ত ব্যবহারের মাধ্যমে পেজটি ব্যবহারকারীদের কাছে যেমন আকর্ষণীয় হয়ে ওঠে তেমনি ব্যবহার বান্ধবও হয়। আকর্ষনীয় নেভিগেশন বার, বাটন, ব্যানার, ইত্যাদিতে ইমেজের ব্যবহার অপরিহার্য। ওয়েব পেজে ইমেজ বা ছবি যুক্ত করার জন্য প্রয়োজনীয় ট্যাগটি হচ্ছে <img> । এর কোন শেষ ট্যাগ নেই। শুধুমাত্র
<img> দিয়ে কোন কাজ হয় না, এর সাথে সবসময়ই src এট্রিবিউটটি ব্যবহার করতে হয়।
ইমেজ যোগ করার সিনট্যাক্স হলো <img
src=”url”>
এখানে url হলো যে ছবিটি যোগ করতে চাই তার লোকেশন।
উদাহরণ:
<html>
<head>
<title> Adding Image</title>
</head>
<body >
<head>
<title> Adding Image</title>
</head>
<body >
<h3> This is an example of image adding</h3><br>
<img src="picture.png">
</body>
</html>
<img src="picture.png">
</body>
</html>
<img> ট্যাগ এর height এবং width এ্যাট্রিবিউট
ওয়েবপেজে যে ইমেজ বা ছবি ইনসার্ট করা হবে তার উচ্চতা ও প্রস্থ কত পিক্সেল হবে তা height এবং width এ্যাট্রিবিউটের উপর নির্ভর করে। width দ্বারা ইমেজের প্রস্থ এবং height দ্বারা ইমেজের উচ্চতা নির্দেশ করে।
উদাহরণ: ৩০০×২০০ সাইজ দিয়ে picture.png ইমেজটি ওয়েবপেজে সংযোজনের জন্য html কোড হলো
<html>
<head>
<title> Adding Image </title>
</head>
<body >
<head>
<title> Adding Image </title>
</head>
<body >
<h3>
This is an example of image adding</h3><br>
<img src = "picture.png" width = "300" height = "200">
</body>
</html>
<img src = "picture.png" width = "300" height = "200">
</body>
</html>
No comments:
Post a Comment