সুপ্রিয় টেকটিউন ভাইয়েরা, ধারাবাহিক টিউটোরিয়াল Basic HTML,CSS,JQuery দ্বিতীয় পর্বে আপনাদের সালাম ও শুভেচ্ছা । টিউনের শুরুতেই আমি আন্তরিকভাবে দুঃখ প্রকাশ করছি তাদের কাছে যারা আমার গত টিউনটি প্রথমের দিকেই পড়ে ফেলেছেন কিন্তু ভিডিও লিঙ্কটি পাননি । আসলে ইন্টারনেট স্পীড কম থাকার কারনে আপলোড করতে একটু বেশি সময় লাগায় আমি লিংকটি তাৎক্ষণিকভাবে দিতে পারি নি । যাহোক আজকে আমি টিউনের শুরুতেই দ্বিতীয় পর্বের ভিডিও টি আপলোড করে তারপর টিউন করছি । তো চলুন শুরু করা যাক আমাদের আজেকের পর্বের টিউটোরিয়াল তার আগে আপনাদের কাছে থাকা গত পর্বের সোর্স কোড এবং ডিজাইন টি ওপেন করে নিন ।
গত পর্বে আমরা শুরুমাত্র আমাদের Markup টা করেছিলাম কিন্তু CSS stylesheet বা index.html কোন তেমন কোন coding করি নাই । আজকে আমরা আমাদের ডিজাইনের Header Section এর জন্য coding টা করে ফেলব। তার আগে আমরা যেহুতু আমরা আমাদের ডিজাইন করার জন্য কিছু ইমেজ ব্যাবহার করব এজন্য আমদের Part One folder এর মধ্যে images নামে একটা নতুন ফোল্ডার তৈরি করি এবং ইমেজ গুলো এই ফোল্ডার এর মধ্যে রাখি ।
এবার style.css ফাইল এর coding হবে এরকম :
body{background:url(../images/content-area-bg.png);}
.header{}
.TopHeader{height:150px;}
.logo_area {
width:500px;
height:150px;
float:left;
}.social{width:450px;height:150px;float:left;}
.social ul{list-style:none;}
.social ul li{float:left;}
.TopMenu{
width:960px;
height:40px;
background:url(../images/header-bg.png);
}
.TopMenu ul{list-style:none;}
.TopMenu ul li{float:left;margin-left:5px;}
.banner{}
.promo_area{}
.promo1{}
.promo2{}
.promo3{}
.body_area1{}
.body_area{}
.body_area2{}
.sidebar{}
.footer{}
এবং index.html ফাইল এর coding হবে এরকম
<html>
<head>
<title>This is title</title>
<link rel="stylesheet" type="text/css" href="stylesheet/style.css">
</head>
<body>
<div class="header">
<div class="TopHeader">
<div class="logo_area">
<a href="#"><img src="images/logo.png"></img></a>
</div>
<div class="social">
<ul>
<li><img src="images/twitter.png"></img></li>
<li><img src="images/twitter.png"></img></li>
<li><img src="images/twitter.png"></img></li>
<li><img src="images/twitter.png"></img></li>
</ul>
</div>
</div>
<div class="TopMenu">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
<div class="banner"></div>
<div class="promo_area">
<div class="promo1"></div>
<div class="promo2"></div>
<div class="promo3"></div>
</div>
<div class="body_area1"></div>
<div class="body_area">
<div class="body_area2"></div>
<div class="sidebar"></div>
</div>
<div class="footer"></div>
</body>
</html>
এবার আসুন আমরা আমদের কোডের ব্যাখ্যা জেনে নিই ঃ ওয়েবসাইট এর ব্যাকগ্রাউন্ড হিসাবে ইমেজ ব্যাবহার করার জন্য আমাদের style.css এ body tag এর মধ্যে background keyword ব্যাবহার করেছি এবং url মধ্যে ইমেজ এর path বলে দিয়েছি।
Logo এবং social div যেহুতু পাশাপাশি বসবে এ জন্য Float:left property ব্যাবহার করা হয়েছে । ul{list-style:none;} কোড ব্যাবহার করার হয়েছে unordered list এর সামনে থেকে bullet মুছে ফেলার করার জন্য।
সবশেষে আমি জানি শুধু কোড দেখে এবং শর্ট ব্যাখ্যা পড়ে নতুনদের জন্য পুরো ডিজাইন টা বুঝা বেশ মুশকিল তাই source code এবং video tutorial শেয়ার করলাম।
Source code এবং video tutorial ডাউনলোড করতে পারবেন আমার ওয়েবসাইট এর এই লিঙ্ক থেকে ।
আজ এ পর্যন্তই আগামী পর্বের টিউটোরিয়াল দেখার আমন্তন জানিয়ে এখানেই শেষ করছি । আল্লাহ হাফেয ।
আমি orbitit24.com। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 10 বছর 10 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 9 টি টিউন ও 2 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
![jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব](https://dnc.techtunes.io/tDrive/tuner/2018/04/techtunes_fee81aa370998cccf57ea2d7dc08eaa8-368x207.jpg "jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব")
