ওয়েব ডিজাইন (পর্ব ০৪) ইমেজ আপলোড (ইমেজ সাইজিং), লিস্ট এর ব্যবহার (অর্ডার লিস্ট ও আনঅর্ডার লিস্ট), নেস্টেড লিস্ট ও লিস্ট টাইপ
ওয়েব ডিজাইন কোর্স এ আজকের এই পর্বে আমরা ইমেজ আপলোড ও ইমেজ সাইজিং, লিস্ট এর ব্যবহার (অর্ডার লিস্ট ও আনঅর্ডার লিস্ট),নেস্টেড লিস্ট ও লিস্ট টাইপ সম্পর্
আসলামুআলাআইকুম।আশা করি আল্লাহ এর অশেষ রহমতে আপনি ভালোই আছেন।আমিও আপনাদের দুআতে ভালো আছি।ওয়েব ডিজাইন কোর্স এ আজকের এই পর্বে আমরা ইমেজ আপলোড ও ইমেজ সাইজিং, লিস্ট এর ব্যবহার (অর্ডার লিস্ট ও আনঅর্ডার লিস্ট),নেস্টেড লিস্ট ও লিস্ট টাইপ সম্পর্কে জানবো।
ইমেজ আপলোড ও ভিউঃ (Image upload and view)
আমরা সাধারণত কোডিং শেখার সময় অফলাইনে কাজ করে থাকি।আমাদের পিসিতেই ফাইল গুলো
রাখি।আর আমাদের ওয়েব পেজে ব্যবহার করা ইমেজ গুলো আমরা নির্দিষ্ট ফোল্ডারে রাখি।
যদিও আপলোড করা বলতে সরাসরি ওয়েব সার্ভারে রাখাকে বুঝায়, তবুুও ইমেজ আপলোড বলতেছি
এই কারনে যে, এই ফাইল গুলো দিয়ে বানানো পুরো ফাইল গুলো যখন আমরা ওয়েব সার্ভারে
আপলোড করবো তখন সেম ভাবেই ইমেজও আপলোড হয়ে যাবে।
আমরা যে ফোল্ডারে index.html ফাইল রেখেছি, ওই ফোল্ডারেই যদি আমি যে কোনো ইমেজ
রাখি তবে, ইমেজ প্রদর্শনের কোডের ভিতর শুধু ইমেজ এর নাম সহ ওই ইমেজের
এক্সটেইনশন লিখতে হবে।
এখন index.html ফাইল যে ফোল্ডারে আছে, ওই ফোল্ডারেই আমরা ইমেজটা রাখবো। আর অবশ্যই
আমরা এই ইমেজটাকে রিনেম করে নিবো, তাহলে আমাদের কাজ করতে শুবিধা হবে।
রিনেম করার জন্য এমন নাম লিখবেন, mountain-photo
or mountain_photo এভাবে।
তারপর নিচের মতো কোড লিখতে হবে index.html পেজে।
শুধু ফটো প্রদর্শনের জন্য,
<img src="mountain_photo">alt এর ব্যবহারঃ
alt এট্রিবিউট ব্যবহার করলে, যদি কোনো কারনে ইমেজ না সো করে তবে alt
(alternative) এ যা লেখা থাকবে তাই দেখা যাবে তাতে করে ভিজিটর কিছু অনুমান করতে
পারে ওখানে কি ছবি আছে। আরো যে বিষয়টা গুরুত্বপূর্ণ তা হলো alt এর মাধ্যমে ইমেজ
এসইও করা হয়।
<img src="mountain_photo" alt="Mountain Photo 2021">ইমেজের width and height এর ব্যবহারঃ
যে কোনো ফটো বসানোর পর ই আমাদের নির্দিষ্ট সাইজ অনুযায়ী ফটো টা না বসালে সুন্দর
হয়না।
তাই আমরা ফটোকে সাইজ করার জন্য width height এট্রিবিউট ব্যবহার করবো।
<img src="mountain_photo" width="500px" height="300">লিস্ট এর ব্যবহারঃ(List using)
লিস্ট আমাদের প্রয়োজন হয় যখন কোনো কিছু লিস্টিং করি, পর পর কোনো কিছু লিখতে হবে
এবং লিপি বদ্ধ করতে হবে তখন আমরা লিস্ট করে লিখি।
লিস্ট আমাদের ২ ভাবে ব্যবহার করতে হয়।
- অর্ডার লিস্ট
- আনঅর্ডার লিস্ট
অর্ডার লিস্টঃ(Order List)
যে লিস্ট গুলোতে আমরা নম্বারিং করি, যে কোনো কিছু গননা করতে ব্যবহার করি তাই
অর্ডার লিস্ট।
যেমন,
<ol>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ol>Preview:
- Chocolate Cake
- Black Forest Cake
- Pineapple cake
আনঅর্ডার লিস্টঃ(Unorder List)
যে লিস্ট গুলোতে গণনা করার করার প্রয়োজন হয়না।উক্ত লিস্ট কে আনঅর্ডার লিস্ট বলা
হয়।
যেমন,
<ul>
<li>Fasten your seatbelt</li>
<li>Starts the car's engine</li>
<li>Look around and go</li>
</ul>Preview:
- Fasten your seatbelt
- Starts the car's engine
- Look around and go
নির্দিষ্ট অর্ডার লিস্ট থেকে গননাঃ(Ordered list typically starts)
আমাদের কখনো প্রয়োজন হতে পারে নির্দিষ্ট নম্বর থেকে গননা শুরু করা তখন আমরা এই
start এট্রিবিউট ব্যবহার করতে পারি।
যেমন,
<ol start="5">
<li>Sonargaon</li>
<li>Bogra</li>
<li>Dhaka</li>
<li>Mymensingh</li>
<li>Khulna</li>
<li>Paharpur</li>
</ol>Preview:
- Sonargaon
- Bogra
- Dhaka
- Mymensingh
- Khulna
- Paharpur
বর্ণনামূলক লিস্টঃ(Description Lists)
যদি আমাদের প্রয়োজন হয় প্রতিটি লিস্টে তার বর্ণনা দিতে তখন আমরা Description List
ব্যবহার করে থাকি।
যেমন,
<dl>
<dt>Sonargaon</dt>
<dd>Sonargaon is a historic city in central Bangladesh.</dd>
<dt>Bogra</dt>
<dd>Bogra, officially known as Bogura, is a major city located in the Bogra District, Rajshahi Division, Bangladesh.</dd>
<dt>Dhaka</dt>
<dd>Dhaka formerly known as Dacca, is the capital and the largest city of Bangladesh.</dd>
</dl>Preview:
- Sonargaon
- Sonargaon is a historic city in central Bangladesh.
- Bogra
- Bogra, officially known as Bogura, is a major city located in the Bogra District, Rajshahi Division, Bangladesh.
- Dhaka
- Dhaka formerly known as Dacca, is the capital and the largest city of Bangladesh.
Nested list:
এই লিস্ট ব্যবহার করার মাধ্যমে আপনার নির্দিষ্ট লিস্টের প্রকারভেদ করতে পারবেন।
যেমন,
<ul>
<li>Africa</li>
<li>Asia
<ul>
<li>China</li>
<li>India</li>
<li>Bangladesh</li>
</ul>
</li>
<li>Europe</li>
</ul>Preview:
- Africa
-
Asia
- China
- India
- Bangladesh
- Europe
এই বিষয় গুলো, আশা করি বুঝতে পারছেন।
এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই আর্টিকেলটি WikiJana.Com সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে।
