সুপ্রিয় টেকটিউন ভাইয়েরা, ধারাবাহিক টিউটোরিয়াল Basic HTML,CSS, JQuery চতুর্থ পর্বে আপনাদের সালাম ও শুভেচ্ছা । তো চলুন শুরু করা যাক আমাদের আজেকের পর্বের টিউটোরিয়াল তার আগে আপনাদের কাছে থাকা গত পর্বের সোর্স কোড এবং ডিজাইন টি ওপেন করে নিন । Source code ডাউনলোড করতে পারবেন আমার ওয়েবসাইট এর এই লিঙ্ক থেকে ।
গত পর্বে আমরা আমাদের ডিজাইন Banner Section এবং Promo section এর জন্য কোড করেছিলাম । আজকে আমরা আমাদের ডিজাইনের বাকি অংশের জন্য কোড করে ফেলব এবং সেই সাথে আমরা ওয়েবসাইট কে কিভাবে যে কোন screen এর মাঝ বরাবর show করান যায় তার কোড দেখব। এ জন্য আমাদের style.css এ নতুন একটা আইডি তৈরি করব।
এবার style.css ফাইল এর coding হবে এরকম :
#wrapper {
width:960px;
margin:0 auto;
}এবং index.html ফাইল এর coding হবে এরকম
<html>
<head>
<title>This is title</title>
<link rel="stylesheet" type="text/css" href="stylesheet/style.css">
</head>
<body>
<div id="wrapper">
<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">
<img src="images/banner.jpg"></img>
</div>
<div class="promo_area">
<div class="promo">
Text text
</div>
<div class="promo">
Text text
</div>
<div class="promo-last">
Text text
</div>
</div>
<div class="body_area1">
<p>This is body area 1 This is body area 1 This is body area 1 This is body area 1 This is body area 1 This is body area 1 This is body area 1 This is body area 1 This is body area 1 This is body area 1 This is body area 1 This is body area 1 This is body area 1 This is body area 1 This is body area 1 This is body area 1 This is body area 1 </p>
</div>
<div class="body_area">
<div class="body_area2">
<p>This is body area two This is body area two This is body area two This is body area two This is body area two This is body area two This is body area two This is body area two This is body area two This is body area two This is body area two This is body area two This is body area two This is body area two This is body area two </p>
</div>
<div class="sidebar"><p>This is right side bar This is right side bar This is right side bar This is right side bar This is right side bar </p></div>
</div>
<div class="footer">
<p>All right reserve by xyz; powered by : your company</p>
</div>
</div>
</body>
</html>
এবার আসুন আমরা আমদের কোডের ব্যাখ্যা জেনে নিই ঃওয়েবসাইট এর স্ট্যান্ডার্ড width হল 960px তাই wrapper width 960px. ওয়েবসাইট যে কোন screen এর মাঝ বরাবর show করানোর জন্য margin:0 auto; ব্যবহার করা হয়েছে । এখানে 0px হল top ও bottom এর জন্য এবং auto হল leftও right এর জন্য। অথ্যাৎ আমাদের ওয়েবসাইটটি যে কোন screen এ left ও right থেকে সমান ভাবে margin রাথবে।
সবশেষে আমি জানি শুধু কোড দেখে এবং শর্ট ব্যাখ্যা পড়ে নতুনদের জন্য পুরো ডিজাইন টা বুঝা বেশ মুশকিল তাই source code এবং video tutorial শেয়ার করলাম।
Source code এবং video tutorial ডাউনলোড করতে পারবেন আমার ওয়েবসাইট এর এই লিঙ্ক থেকে ।
আজ এ পর্যন্তই আগামী পর্বের টিউটোরিয়াল দেখার আমন্তন জানিয়ে এখানেই শেষ করছি । আল্লাহ হাফেয ।
আমি orbitit24.com। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 5 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 9 টি টিউন ও 2 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
