ICT & others Information

HTML Part 032

April 18, 2016 Sharmin Khan Ishita

<Div> ও <Table> সহ Layout

এখন Content সমৃদ্ধ Div এর মধ্যে একটি টেবিল সংযোজন করবো। Table Layout এ যেমন Nested Table আকারে টেবিলের Cell এ 1 Column ও 2 Rows বিশিষ্ট একটি টেবিল দিয়েছিলাম সে রকম একটি টেবিল <Div> এর মধ্যে সংযোজন করে Layout তৈরী করবো।

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

<!DOCTYPE html>

<html>

<head>

<title> example of Layout9 </title>

</head>

<body>

<h1 style="margin-bottom:0;">Nova Computer</h1>

</div>

Home </a>       

Books        

Tutorials        

About Us        

</div>

Link1<br />

Link2<br />

Link3

</div>

Title and Content.

<tr>

<td style="width:150px;" >Sub Title1</td>

<td>

<b>Sub Title2</b> <br />

content2 content2 content2

</p>

<b>Sub Title3</b><br>

content3 content3 content3

</p>

</td>

</tr>

</table>

</div>

<b>Adsence</b><br />

Add1<br />

Add2<br />

Add3

</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...

পরিবেশক/প্রাপ্তিস্থান
Online : www.rokomari.com

Facebook Page

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

Part-01 :HTML এরসুচনা এবং কিছু অতি গুরুত্তপূর্ণ বিষয়

Part-02 : HTML Versions ওHtml Structure

Part-03 : Html Tag, Attribute, Elements ও Extention Name

Part004_Title Element এর ব্যবহার, নতুন কোডিং লেখা ও Body Element এর ব্যবহার

Part 005_ BRবা Line Break এলিমেন্টের ব্যাবহার

Part 006_Comments এর ব্যবহার

Part 007_Font সংক্রামত্ম এলিমেন্ট (ট্যাগ)

Part008_Ciation, Quotations এবং Definitation ইত্যাদি ট্যাগ

Part009_Bi-Directional Override (BDO) ELEMENT

Part010_Blinking Element

Part011_Paragraph Element

Part012_Heading Element

Part013_Html Style Attributs

Part014_html এstyle প্রয়োগ

Part 015_Style এ Font Family অ্যাট্রিবিউট

Part016_Style এBackground Image অ্যাট্রিবিউট

Part 017_Paragraph Element-এ Align Attributes

Part 018_HR ট্যাগের অনান্য Attributes

Part019_Html ডিক্লিয়ারেশন

Part 020_Html List, Ordered List, Attribute সহ Ordered List

Part021_Type Attributes

Part022_Unordered List, Attribute Nested List, Definition List

Part 023_ MARGIN ATTRIBUTE, Table Element, Table Element এরAttributes

Part 024_Table এরvalign Attributes

Part025_Table এলিমেন্টের <tbody> <thead> <tfoot> ট্যাগ

Part026_Border Style, Border width

Part 027_Colspan, Rowspan, Cell Padding

Part 028_HTML এর Layout, Table ব্যবহারে Layout

Part 029_HTML এরNested Table

Part030_Division Element, Span element

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

Part 032_<Div> ও <Table> সহ Layout

Part33_গ্রাফিক্স, সংযোজন, এনিমেটেড গ্রাফিক্স, ইমেজের SIZE Attributes

Part34_ ছবি Path বা URL,ইমেজের ALT Attributes,Link Element

Part35_লিষ্ট এর সাথে Link এর ব্যবহার, URL বা Path এর বর্ণনা

Part36_Mailtolink তৈরী করা

Part37_FORM ও FORM এর Attributes

Part38_ওয়েব পেজ ভিডিও ও সাউন্ড সংযোগ

Part39_ভিডিও ফাইল সংযোজন

Part040_Youtube

Part 041_ ওয়েব পেজে ব্যবহৃত বিশেষ চিহ্ন

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

April 18, 2016 Sharmin Khan Ishita

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>

Header </div>

Home menu </div>

Left Side Bar

</div>

Title and Content. </div>

Right Side Bar

</div>

Footer </div>

</div>

</body>

</html>

ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।

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

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

<!DOCTYPE html>

<html>

<head>

<title> example of Layout6 </title>

</head>

<body>

<h1 style="margin-bottom:0;">Nova Computer</h1></div>

Home </a>       

Books        

Tutorials        

About Us        

Link1<br />

Link2<br />

Link3

</div>

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>

<b>Adsence</b><br />

Add1<br />

Add2<br />

Add3

</div>

</div>

</body>

</html>

ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।