এইচটিএমএল লেআউট উপাদান এবং কৌশল
ওয়েবসাইটগুলি প্রায়শই একাধিক কলামে (ম্যাগাজিন বা সংবাদপত্রের মতো) কন্টেন্ট প্রদর্শন করে
আপনারা যে ওয়েব পেজটি দেখছেন, সেটার ও একটি লেআউট আছে, উপরে মেনু, ডানে কিছু লেখা, বামের কলামে আছে টিউটোরিয়াল লিস্ট । আর মাঝখানে আছে টিউটোরিয়াল কনটেন্ট ।
নিচে আর একটি উদাহরণ দেখুন
এইচটিএমএল লেআউট উপাদানসমূহ
এইচটিএমএলে বেশ কয়েকটি সিমেন্টিক এলিমেন্ট বা উপাদান রয়েছে যা একটি ওয়েব পৃষ্ঠার বিভিন্ন অংশকে বিশেষ ভাবে সংজ্ঞায়িত করে:
- <header> – একটি ডকুমেন্ট বা বিভাগের জন্য শিরোনামকে সংজ্ঞায়িত করে
- <nav> – নেভিগেশন লিঙ্কের একটি সেট সংজ্ঞায়িত করে
- <section> – একটি নথি বা ডকুমেন্টে একটি বিভাগ সংজ্ঞায়িত করে
- <article> – একটি স্বতন্ত্র, স্বয়ংসম্পূর্ণ সামগ্রী বা কন্টেন্ট নির্ধারণ করে
- <aside> – সামগ্রীটি বা মুল কন্টেন্টটি বাদ দিয়ে বিষয়বস্তু নির্ধারণ করে (সাইডবারের মতো)
- <footer> – একটি নথি/ডকুমেন্ট বা বিভাগের জন্য একটি পাদচরণ/ফুটার সংজ্ঞায়িত করে
- <details> – ব্যবহারকারীকে অতিরিক্ত বিবরণ সংজ্ঞা দেয় যা ব্যবহারকারী খুলতে এবং চাহিদা অনুসারে বন্ধ করতে পারে
- <summary> – <details> উপাদানটির শিরোনাম নির্ধারণ করে
এগুল এক একটি সিমেনটিক এলিমেন্ট এবং এগুলো নিয়ে আমরা পরে আলো আলোচনা করবে । তবে আপনি চাইলে নিচের ভিডিও টি দেখে নিতে পারেন ।
এইচটিএমএল লেআউট কৌশল
মাল্টিকালম লেআউট তৈরির জন্য চারটি আলাদা কৌশল রয়েছে। প্রতিটি কৌশলটির উপকারিতা এবং বিপরীতে রয়েছে:
- CSS framework
- CSS float property
- CSS flexbox
- CSS grid
সিএসএস ফ্রেমওয়ার্কস
আপনি যদি আপনার লেআউটটি দ্রুত তৈরি করতে চান তবে আপনি w3.css বা বুটস্ট্র্যাপের মতো সিএসএস ফ্রেমওয়ার্ক ব্যবহার করতে পারেন।
সিএসএস ফ্লোট লেআউট
সিএসএস ফ্লোট প্রপার্টি ব্যবহার করে পুরো ওয়েব লেআউটগুলি করা সম্ভব। সিএসএস ফ্লোট শেখা খুব সহজ । আপনার শুধু জানতে হবে কিভাবে float এবং clear properties কাজ করে ।
তবে ফ্লোট এর কিছু খারাপ প্রভাব ও আছে । ফ্লোট প্রপার্টি ব্যবহার করলে ডকুমেন্ট গুলো রিসপন্সিভ করা খুব কস্টকর হয়
সিএসএস ফ্লেক্সবক্স লেআউট
সিএসএস ফ্লেক্সবক্স লেআউট ব্যবহার করলে এইচটিএমএল এলিমেন্ট গুলো খুব সহজেই ভিন্য ভিন্য ডিভাইস এর জন্য সাজানো যায় । ফলে এটি একটি রেসপনসিভ ওয়েব পেজ তৈরিতে খুব কাজে আসে ।
সিএসএস গ্রিড লেআউট
সিএসএস গ্রিড লেআউট মডিউলটি গ্রিড ভিত্তিক লেআউট সিস্টেম সরবরাহ করে। এটি সারি ও কলাম গুলোকে আরো সহজ করে তোলে এবং ফ্লোট ও পজিশনিং না করেই ওয়েব পেজ গুলো সাজানো যায়।