ওয়েব ডিজাইন বাংলা ভিডিও টিউটোরিয়াল (from w3 School) এইসটিএমএল৫ পর্ব–১৮

আসসালামু আলাইকুম। কেমন আছেন আমার প্রিয় ওয়েব ডেভলপার ভাই বোন বন্ধুরা? আলহামদুলিল্লাহ আমিও ভালো আছি। ওবে ডিজাইন এর বাংলা সিরিজ টিউটোরিয়ালের আজকের ১৮ তম পর্বের তৃতীয় খন্ডে আমি আপনাদেরকে স্বাগত জানাচ্চি ইন্জিনিয়ার মোঃ মারুফ সিদ্দিকী। আজ আমরা  আলোচনা করবো HTML layout ইলিমেন্ট নিয়ে। আমি এই পর্বে এইচ. টি. এম. এল এর সিমান্টিক ইলিমেন্টগুলো দিয়ে একটি লেআউট ডিজাইন করে দেখাবো। আমরা একটু একটু করে প্রফেশনার এর দিকে এগিয়ে যাচ্ছি। এখন থেকে কোগুলো এবং ক্লাসগুলোও একটু বড় হবে। প্রথমে আমি একটি লিস্ট দিচ্ছি যার মধ্যে আমি এই টিউটোরিয়ালে কোন কোন সিমান্টিক ইলিমেন্ট ব্যাবহার করেছি তা লিখছি।

1. <header>
2. <nav>
3. <section>
4. <article>
5. <aside>
6. <footer>

আমি প্রথমেই বলেছি এই পর্বে আমি সিমান্টিক ইলিমেন্ট কি তার বিস্তারিত বর্ণনা করব না। আমি পরবর্তী পর্বে অর্থাৎ ১৯তম পর্বের দুইটি আর্টিকেল এর মাধ্যমে তা আপনাদেরকে  বিস্তারিতভাবে বর্ণনা করে দেখাবো। প্রথমে নিচের কোডগুলো আপনার কোড এডিটরে লেখুন্

<div class=”whole_box”>

<header>

<h1 style=”text-align: center;”>Header</h1>

</header>

<nav>

<h1 style=”text-align: center;”>Navigation</h1>

</nav>

<div class=”left_side_bar”>

<section>

<h3>Section</h3>

</section>

<article>

<h3>Article</h3>

</article>

</div>

<aside>

<h3>aside</h3>

</aside>

<footer>

<h3 style=”text-align: center;”>Footer</h3>

</footer>

</div>

এবারে আমাদেরকে এই কোডগুলোকে সি. এস. এর মাধ্যমে ডিজাইন করতে হবে। তার জন্য নিচের কোডগুলো আপনার সি. এস. এস এ গিয়ে টাইপ করুন।

.whole_box{

border: 2px solid lightblue;

width: 100%;

height: 1000px;

background-color: red;

}

header{

width: 100%;

height: 50px;

background-color: lightblue;

}

nav{

width: 100%;

height: 45px;

background-color: #bfff00;

margin-top: 5px;

}

.left_side_bar{

float: left;

width: 70%;

height: 150px;

background-color: #00bfff;

margin-top: 10px;

}

section{

float: left;

width: 90%;

height: 70px;

background-color: white;

margin-left: 10px;

margin-top: 5px;

}

article{

float: left;

width: 90%;

height: 70px;

background-color: #808080;

margin-left: 10px;

margin-top: 1px;

}

aside{

width: 25%;

height: 150px;

margin-left:5%;

background-color: #ffff00;

float: left;

margin-top: 10px;

}

footer{

float: left;

margin-top: 10px;

width: 100%;

height: 50px;

background-color: #0080ff;

}

আমি আপনাদের জন্য সকল কোডগুলো দিয়ে দিলাম আমার আর্টিকেল এর মাঝেই। কিন্তু আপুন যদি পরিপূর্ণভাবে কাজ শিখতে চান তাহলে অবশ্যই কোডগুলো নিজ হাতে টাইপ করুন।

আর্টিকেলটির সাথে সংযুক্ত ভিডিওটি ভালোভাবে দেখুন। আমি এই আর্টিকেলটির বিস্তারিত নিচের ভিডিওটিতে practically দেখিয়েছি। যারা লেখাটি পরে পরির্পর্ণভাবে বুঝতে পারেননি, তারা নিচের ভিডিওটি দেখে নিবেন। তার পরও কোন প্রশ্ন থাকলে আমাকে কমেন্ট করে জানাবেন।.