ওয়েব ডিজাইন (পর্ব ০৩) ইমেজ আপলোড, বাটন ইমেজ 2nd পেজ লিংকিং, HTML বাটন, লিস্টিং টেকনিক,অর্ডার লিস্ট, আর অর্ডার লিস্ট

ওয়েব ডিজাইন (পর্ব ০৩) ইমেজ আপলোড, বাটন ইমেজ 2nd পেজ লিংকিং, HTML বাটন, লিস্টিং টেকনিক,অর্ডার লিস্ট, আর অর্ডার লিস্ট
শুক্রবার, ১৭ জুলাই, ২০২০
আস্‌সালামু আলাইকুম! আশা করি আল্লাহ এর অশেষ রহমতে আপনারা সবাই ভালো আছেন।আমিও আপনাদের দোয়াই ভালো আছি। আজকের নতুন টপিকে আপনাকে স্বাগতম! আজকে আপনাদের দেখাবো ইমেজ আপলোড, বাটন ইমেজ 2nd পেজ লিংকিং, HTML বাটন, লিস্টিং টেকনিক,অর্ডার লিস্ট, আর অর্ডার লিস্ট।

ইমেজ আপলোড এবং ভিউঃ

ইমেজ একটি ফাইল যা আমাদের হোস্টিং এ আগে হোস্ট করতে হবে এবং সেই হোস্টিং এর কোথায় এই ইমেজ ফাইল সেভ আছে ওটা কোডিং এর মাধ্যমে দেখিয়ে দিলেই আমাদের ওয়েব পেজে আমরা দেখতে পারবো আমাদের ইমেজটি।

হোস্ট করার পর আমরা নিচের কোডটি index.html ফাইলে কোডিং করবো।Index.html ফাইল এ আমরা যা কোডিং করবো তা আমাদের ওয়েব পেজের হোম পেজে দেখতে পারবো।
  
<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
<img src="ads-09-07.png" alt="It Future Institute" width="460" height="345">

</body>
</html>
    

কিভাবে ইমেজ লোকেশন বের করবোঃ

আপনার ডোমেইন ফাইল ম্যানেজারের লোকেশন ভিতরে যেখানে সেট করা ওই পর্যন্ত আপনার লোকেশনের নাম হলো আপনার ডোমেইন নেম।যেমন, http://wikijana.shop
এবার যদি আপনি এই লোকেশনে আবার কোনো ফোল্ডার তৈরি করেন তখন হবে এমন, http://wikijana.shop/image/
এবার এই ফোল্ডারে যদি আপনি কোনো ইমেজ রাখেন তবে বাকিটা ওই ইমেজের ফাইল নেম ও এক্সটেশন টা লিখতে হবে। যেমন, http://wikijana.shop/image/ads-09-07.png
এভাবেই একটা ইমেজের পুরো লিংক বের করতে পারবেন।

বাটন ইমেজ 2nd পেজ লিংকিংঃ

আমরা বাটন ইমেজ এর সাথে অন্য পেজ লিংক করত পারবো সহজেই কারন আমরা যে দুইটা কোড দিয়ে এইটা করবো তা আমরা আগেই জানি।আমরা এখানে ব্যবহার করবো anchor ট্যাগ এর কোড আর একটা image এর কোড।
  
<a href="/page/2nd.html">
<img src="/image/button.png" alt="Button" style="width:20%">
</a>
লাল কালারে লেখা যায়গাতে বাটনে ক্লিক করার পর কোন জায়গায় যাবে ওটা লোকেশন লিংক দিতে হবে।
নীল কালারের ওখানে আপনার বাটন ইমেজের লিংক লোকেশন দিতে হবে।

HTML বাটনঃ

আমরা তো ইমেজ বাটন শিখলাম এখন দেখবো HTML বাটন কিভাবে করতে হয়।
যদি সাধারন বাটন ইউজ করতে চান তবে এভাবে ইউজ করা যাবে।
<button type="button">Click Me!</button>
আর যদি দেখতে চান বাটন কাজ করতেছে কিনা। তবে নিচের এই কোডটি ব্যবহার করা যেতে পারে।

<button type="button" onclick="alert('I am Rady')">Click Me!</button>

লিস্টিং টেকনিকঃ

আমরা যেকোনো ডকুমেন্ট আলাদা আলাদা হিসাব করতে ও সাজাতে লিস্টিং করে থাকি।তেমনই ওয়েবের কন্টেন্ট গুলো সাজাতে লিস্টিং করার প্রয়োজন হয়।
ওয়েব লিস্ট ২ প্রকার।
  1.  অর্ডারলিস্ট
  2. আনঅর্ডার লিস্ট।

অর্ডারলিস্টঃ

অর্ডার লিস্ট হলো আপনার লিস্টিং টা পুরোটা নম্বর কাউন্ট করবে।অর্ডার লিস্ট এর <ol> ট্যাগ ব্যবহার করা হয়। আর সকল লিস্ট প্রদর্শন করার জন্য <li> ট্যাগ ব্যবহার করা হয়।
যেমন,
<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

আনঅর্ডার লিস্টঃ

আনঅর্ডার লিস্ট কোনো নম্বর কাউন্ট ছাড়া বুলেট চিন্হ দ্বারা প্রকাশিত হয়।এই আনঅর্ডার লিস্ট <ul> ট্যাগ ব্যবহার করা হয়। আর এটাও লিস্ট প্রদর্শন করার জন্য <li> ট্যাগ ব্যবহার করা হয়।
যেমন,
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>
 এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই আর্টিকেলটি WikiJana.Com সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে।





Samrat Raihan

I am a web designer and developer. I regularly work for different companies. I try to write a little on this blog when I have time.If you can learn something from this blog, then I will be successful.