know yourselves. information, computer, 7 wonders, various.

Monday, April 18, 2016

HTML Part 031_Div এলিমেন্ট ব্যবহার করে Layout




Div এলিমেন্ট ব্যবহার করে Layout
আমরা এখন <Div> এলিমেন্ট ব্যবহার করে Layout তৈরী করবো। যদিও <Div> এর সাথে CSS এর অংশ ID বা Class ব্যবহার করা হয়। এ বিষয়ে আমরা পরে জানাবো।
নিচে লক্ষ্য করবেন প্রথমে 500px width এর একটি Div নেওয়া হয়েছে। অর্থ্যাৎ মোট 500px width এর একটি Div তৈরী হবে এবং Height উল্লেখ না করার কারনে এটি Content অনুসারে নিচের দিকে বাড়তে থাকবে। লক্ষ্য করুন এই <Div> টি শেষ করা হয় নাই। এই ডিভের মধ্যে আরো ৬ জোড়া <Div> নেওয়া হয়েছে এবং শেষে <Div> টিকে শেষ করা হয়েছে। অর্থ্যাৎ Div এর মধ্যে Div। দ্বিতীয় <Div> Banner বা Header দেওয়া হয়েছে। এটি Automatic 500Px width হবে। তৃতীয়টি মেনুর জন্য এটির অবশ্য Height 25px নির্ধারন করে দেওয়া হয়েছে। পরের তিনটি <Div> কে যথাক্রমে 100Px, 300Px 100Px অর্থ্যাৎ মোট 500Px কে তিন ভাগে ভাগ করে Left Side Bar, Content Right Side Bar এর জন্য জায়গা রাখা হয়েছে। পাশাপাশি রাখার জন্য যে যেন একটি শেষ হলে অপরটি শুরু হয় সেজন্য floar:left সিলেক্ট করে দেওয়া হয়েছে। শেষে Footer এর জন্য আরও একটি Div নেওয়া হয়েছে। মনে রাখবেন আগের দিনে Layout এর জন্য Table লে-আউট ব্যবহার করা হতো। এটি সঠিক নহে টেবিলকে ব্যবহার করতে হবে Tabular Data প্রদর্শনের জন্য। এখন এটির পরিবর্তে Div Element কে ব্যবহার করা হয়।
Layout:  এখানে মোট ৭টি Div সম্বন্ধে আগেই বলা হয়েছে। আর একটু ধারনা নেওয়া যাক।


উদাহরণ স্বরূপ কোড হচ্ছে নিম্নরূপ:
<!DOCTYPE html>
<html>
<head>
<title> example of Layout7 </title>
</head>
<body>
<div  style="width:500px">
<div  style="background-color:#00CCFF;height:25px;">
Header </div>
<div  style="background-color:#9999FF;height:25px;">
Home menu </div>
<div id="menu" style="background-color:#00CCFF;height:200px;width:100px;float:left;">
Left Side Bar
</div>
<div style="background-color:#CCFFFF;height:200px;width:300px; float:left;">
Title and Content. </div>
<div style="background-color:#00CCFF;height:200px;width:100px;float:left;">
Right Side Bar
</div>
<div style="background-color:#CCCCFF;">
Footer </div>
</div>
</body>
</html>
ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।

এখন Program টি আরও Modify করে বিভিন্ন Data Input  করা হয়েছে। যার ব্যবহার ইতিমধ্যেই দেওয়া হয়েছে। কিন্তু Structure একই রাখা হয়েছে।

উদাহরণ স্বরূপ কোড হচ্ছে নিম্নরূপ:

<!DOCTYPE html>
<html>
<head>
<title> example of Layout6 </title>
</head>
<body>

<div style="width:500px">

<div style="background-color:#0099FF;text-align:center;">
<h1 style="margin-bottom:0;">Nova Computer</h1></div>
<div  style="background-color:#9999FF; height:25px; width:500px; float:left;">
Home </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Books &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Tutorials &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
About Us &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Contact Us &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

<div style="background-color:#00CCFF; height:200px; width:100px; float:left;">
<b>LINK</b> <br />
Link1<br />
Link2<br />
Link3
</div>

<div style="background-color:#CCFFFF; height:200px; width:300px; float:left;">
Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content.</div>
<div style="background-color:#00CCFF; height:200px; width:100px;float:left;">
<b>Adsence</b><br />
Add1<br />
Add2<br />
Add3
</div>

<div  style="background-color:#CCCCFF;clear:both;text-align:center;">
Copyright © bappi ashraf.com</div>
</div>

</body>
</html>
ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।


Previous Post                                                                                           Next Post

  বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।

Book Name: Mastering Microsoft  Word
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
 The writer of this book has told that he has written this book with the concept of "teach yourself". On the other hand, Web Design is a thing which is interesting to learn. He has also told that the book is full of fan and enjoyment so that a person can learn Web Design by himself by playing with the example projects of this book.  Book's CD Link below... 

 cd

RELATED POST LINKS BELOW ********************************************