এইচটিএমএল লেআউট উপাদান এবং কৌশল
ওয়েবসাইটগুলি প্রায়ই একটি ম্যাগাজিন বা সংবাদপত্রের মতো একাধিক কলামে বিষয়বস্তু প্রদর্শন করে।
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
HTML-এ বেশ কিছু শব্দার্থিক উপাদান রয়েছে যা একটি ওয়েব পৃষ্ঠার বিভিন্ন অংশকে সংজ্ঞায়িত করে:
| HTML5 Semantic Elements | Description |
|---|---|
<header> |
একটি নথি বা বিভাগের জন্য একটি শিরোনাম সংজ্ঞায়িত করে |
<nav> |
নেভিগেশন লিঙ্কের একটি সেট সংজ্ঞায়িত করে |
<section> |
একটি নথিতে একটি বিভাগ সংজ্ঞায়িত করে |
<article> |
স্বাধীন, স্বয়ংসম্পূর্ণ বিষয়বস্তু সংজ্ঞায়িত করে |
<aside> |
বিষয়বস্তু (যেমন একটি সাইডবারের মতো) থেকে আলাদা বিষয়বস্তুকে সংজ্ঞায়িত করে। |
<footer> |
একটি নথি বা বিভাগের জন্য একটি পাদটীকা সংজ্ঞায়িত করে |
<details> |
ব্যবহারকারী খুলতে এবং বন্ধ করতে পারে এমন অতিরিক্ত বিবরণ সংজ্ঞায়িত করে |
<summary> |
<details>উপাদানটির শিরোনাম সংজ্ঞায়িত করে |
শব্দার্থিক উপাদান সম্পর্কে আরও তথ্যের জন্য আমাদের HTML শব্দার্থবিদ্যা অধ্যায় পড়ুন।
মাল্টি-কলাম লেআউট তৈরির জন্য চারটি ভিন্ন কৌশল রয়েছে। প্রতিটি প্রযুক্তির তার সুবিধা এবং অসুবিধা আছে:
আপনি যদি দ্রুত আপনার লেআউট তৈরি করতে চান তবে আপনি একটি CSS ফ্রেমওয়ার্ক ব্যবহার করতে পারেন।
সিএসএস ফ্লোট অ্যাট্রিবিউট ব্যবহার করে সম্পূর্ণ ওয়েব লেআউট তৈরি করা যেতে পারে।
ফ্লেক্সবক্স নিশ্চিত করে যে উপাদানগুলি অনুমানযোগ্যভাবে আচরণ করে যখন পৃষ্ঠার বিন্যাসটিকে বিভিন্ন স্ক্রীন আকার এবং ডিসপ্লে ডিভাইসগুলি গ্রহণ করতে হয়।
CSS গ্রিড লেআউট মডিউল সারি এবং কলাম সহ একটি গ্রিড-ভিত্তিক বিন্যাস ব্যবস্থা প্রদান করে।
আপনি যদি দ্রুত আপনার লেআউট তৈরি করতে চান, আপনি জ্যাসিফ টিম সিএসএস বা বুটস্ট্র্যাপের মতো একটি CSS ফ্রেমওয়ার্ক ব্যবহার করতে পারেন।
এখানে আপনি স্ক্র্যাচ থেকে বা একটি টেমপ্লেট ব্যবহার করে আপনার ওয়েবসাইট তৈরি করতে পারেন। * কোন ক্রেডিট কার্ডের প্রয়োজন নেই
সিএসএস ফ্লোট অ্যাট্রিবিউট ব্যবহার করে সম্পূর্ণ ওয়েব লেআউট তৈরি করা যেতে পারে। ফ্লোট শেখা সহজ - শুধু মনে রাখবেন কিভাবে ফ্লোট এবং পরিষ্কার বৈশিষ্ট্য কাজ করে।
অসুবিধা:ভাসমান উপাদানগুলি নথির প্রবাহের সাথে সংযুক্ত থাকে, যা নমনীয়তাকে প্রভাবিত করতে পারে।
ফ্লোট সম্পর্কে আরও তথ্যের জন্য আমাদের CSS ফ্লোট এবং ক্লিয়ার অধ্যায় দেখুন।
ফ্লেক্সবক্স নিশ্চিত করে যে উপাদানগুলি অনুমানযোগ্যভাবে আচরণ করে যখন পৃষ্ঠার বিন্যাসটিকে বিভিন্ন স্ক্রীন আকার এবং ডিসপ্লে ডিভাইসগুলি গ্রহণ করতে হয়।
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex: 1 0 200px;
margin: 10px;
}Flexbox সম্পর্কে আরও তথ্যের জন্য আমাদের CSS Flexbox অধ্যায় পড়ুন।
CSS গ্রিড লেআউট ব্লক সারি এবং কলাম সহ একটি গ্রিড-ভিত্তিক লেআউট সিস্টেম সরবরাহ করে, যা ফ্লোট এবং পজিশনিং ব্যবহার না করে ওয়েব পেজ ডিজাইন করা সহজ করে তোলে।
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 20px;
}
.header {
grid-column: 1 / -1;
}
.sidebar {
grid-row: 2 / 4;
}CSS গ্রিড সম্পর্কে আরও তথ্যের জন্য আমাদের CSS গ্রিড ভূমিকা অধ্যায় পড়ুন।
আপনার জ্ঞান পরীক্ষা করতে নিম্নলিখিত অনুশীলন চেষ্টা করুন: