HTML Part 028_Part 027_HTML এর Layout, Table ব্যবহারে Layout
HTML এর Layout
HTML Layout হচ্ছে সবচেয়ে গুরুত্বপূর্ণ বিষয়। Layout
দ্বারা Header, Footer থাকবে কিনা, থাকলে কিভাবে? মূল Content
কোন দিকে থাকবে, ২দিকে Sidebar থা্কবে কিনা, থাকলে সাইজ কি হবে। Header
বা Banner এর নিচে মেনু থাকবে কিনা ইত্যাদি নির্ধারন করে দেওয়া যায়। আধুনিক (HTML-5)
এ Layout কে সাধারণত ২টি ট্যাগের মাধ্যমে করা হয় একটি হচ্ছে Table এবং অপরটি হচ্ছে Div ট্যাগ। তবে Div ট্যাগটি অধিক জনপ্রিয় এবং কার্যকর। এছাড়াও Element
এর পজিশন ঠিক করার জন্য Background তৈরী এবং কালারফুল পেজ তৈরী করার জন্য CSS
কেও ব্যবহার করা হয়। Table এলিমেন্ট দ্বারা Tabular Data কে প্রদর্শন করা যাবে। কিন্তু Div দ্বারা HTML এলিমেন্টের মধ্যে গ্রুপ তৈরী করে একটি এলিমেন্টের
মধ্যে প্রদর্শন করবে এবং কর্ণারগুলোকে রাউন্ড করা যাবে। আপাতত আমরা Table এলিমেন্ট ব্যবহার করে Layout তৈরী করবো। একটু পরে Div তৈরী করে Layout করবো এবং শেষে Div ও Div এর মধ্যে আবার Table এলিমেন্টের ব্যবহার করে Layout তৈরী করবো।
Table ব্যবহারে Layout
এখন আমরা টেবিল ব্যবহার করে একটি HTML Layout তৈরী করবো। এখন থেকেই শুরু করবো আমরা Professional
Template তৈরীর কাজ ভবিষ্যতেই
এটিই হবে Joomla বা Wordpress
বা অন্য CMS এর জন্য একটি আদর্শ Professional
Template। সহায়তা করবে Outsourcing-এ Freelancer হিসাবে কাজ করার জন্য।
আমরা Layout টি কয়েকটি ধাপে
ধীরে ধীরে Develop করবো। টেবিলটির
ফরম্যাট হবে নিম্নরূপ:
এই টেবিলে (Table) আমরা ৪টি (tr) ও ৩টি কলাম (td)
ব্যবহার করবো। অবশ্য এখানে প্রথম ২টি এবং শেষের
১টি Row (tr) তে মাত্র একটি
করে Column (td) ব্যবহার করা হবে। প্রথম ২টি ও শেষের ১টি Row
(tr) এ Colspam ব্যবহার করবো এবং দ্বিতীয় Row (tr) তে ৩টি কলাম ব্যবহার করার কারনে ৩টি কলাম
অর্থ্যাৎ tr এ তিনটি td
ব্যবহার করা যেতে পারে।
(Special Program)
notepade++ এ নিচেরমত কোডিংসহ একটি HTML ফাইল তৈরী করুন
এবং Program096 নামে সেভ করুন।
<!DOCTYPE html>
<html>
<head>
<title> example of Layout </title>
</head>
<body>
<table border="1">
<tr> <td> Nova Computer
</td> <td> Nova Computer </td> <td> Nova Computer
</td> </tr>
<tr> <td> menu</td> <td> menu</td> <td>
menu</td> </tr>
<tr><td> left Side Bar
</td> <td> Main Content
</td>
<td>Right Side Bar </td> </tr>
<tr> <td> Footer </td>
<td> Footer </td> <td> Footer</td> </tr>
</table>
</body>
</html>
ব্রাউজার দিযে খুললে
নিন্মেক্ত ফলাফল পাওয়া যাবে।
এখন আমরা প্রথম ২টি ও শেষের ১টি Row (tr) এ Colspam ব্যবহার করবো, অতিরিক্ত (td) মুছে দেবো। টেবিলের tr এর মধ্যে অবস্থিত td এর Style এ background-color
ব্যবহার করবো। Textকে Center Align করবো। সবচেয়ে বড় কথা হলো Table এর width নির্ধারন করে দেবো, আপাতত 500Px এবং আপাতত Height নির্ধারন করবো না। কারন Content যত বড় হবে নিচের দিকে বাড়তে থাকবে। border 0 করে দেবো এবং তৃতীয় Row (tr) এ যেহেতু ৩টি Column (td) ব্যবহার করবো। সেজন্য Left Side Bar এর জন্য, width=100Px, Main Content এর জন্য width 300px এবং Right Side Bar এর জন্য width 100px নির্ধারন করবো।
notepade++ এ নিচেরমত কোডিংসহ একটি HTML ফাইল তৈরী করুন এবং সেভ করুন।
<!DOCTYPE html>
<html>
<head>
<title> example of Layout2
</title>
</head>
<body>
<table width="500"
border="0">
<tr> <td colspan="3"
style="background-color:#0099FF;text-align:center;"> Nova Computer
</td>
</tr>
<tr> <td
colspan="3"
style="background-color:#9999FF;"> menu Home Books
Tutorials
About Us Contact Us </td> </tr>
<tr> <td style="background-color:#00CCFF;
width:100px"> left Side Bar </td>
<td
style="background-color:#CCFFFF; width:300px;"> Main Content </td>
<td
style="background-color:#00CCFF;width:100px">Right Side Bar
</td> </tr>
<tr> <td colspan="3"
style="background-color:#CCCCFF;text-align:center;">
Footer</td> </tr>
</table>
</body>
</html>
ব্রাউজার দিযে খুললে
নিন্মেক্ত ফলাফল পাওয়া যাবে।
চলুন প্রোগ্রামটি আরও একটু Develop করি। দেখুন আপনার তৈরী করা কি সুন্দর Webpage layout
notepade++ এ নিচেরমত কোডিংসহ একটি HTML ফাইল তৈরী করুন এবং সেভ করুন।
<!DOCTYPE html>
<html>
<head>
<title> example of Layout2
</title>
</head>
<body>
<table width="500"
border="0">
<tr> <td colspan="3"
style="background-color:#0099FF;text-align:center;">
<h1>Nova
Computer</h1></td> </tr>
<tr> <td
colspan="3"
style="background-color:#9999FF;">
Home
Books
Tutorials
About Us
Contact Us
</td> </tr>
<tr> <td
style="background-color:#00CCFF; width:100px"> left Side Bar
</td>
<td
style="background-color:#CCFFFF; width:300px;">
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. </td>
<td
style="background-color:#00CCFF;width:100px">Right Side Bar
</td> </tr>
<tr> <td colspan="3"
style="background-color:#CCCCFF;text-align:center;">
Copyright © bappi ashraf.com </td>
</td> </tr>
</table>
</body>
</html>
ব্রাউজার দিযে খুললে
নিন্মেক্ত ফলাফল পাওয়া যাবে।
চলুন আরও একটু develop করি
notepade++ এ নিচেরমত কোডিংসহ একটি HTML ফাইল তৈরী করুন এবং সেভ করুন ।
<!DOCTYPE html>
<html>
<head>
<title> example of Layout4
</title>
</head>
<body>
<table width="500"
border="0">
<tr> <td colspan="3"
style="background-color:#0099FF;text-align:center;"> <h1>Nova Computer</h1></td>
</tr>
<tr> <td
colspan="3"
style="background-color:#9999FF;"> Home
Books
Tutorials
About Us
Contact Us
</td> </tr>
<tr>
<td style="background-color:#00CCFF;
width:100px">
<b><b>LINK</b><br
/>
Link1<br />
Link2<br />
Link3 </td>
<td style="background-color:#CCFFFF;
width:300px;">
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. </td>
<td
style="background-color:#00CCFF;width:100px">
Adsence</b> <br />
Add1<br />
Add2<br />
Add3 </td>
</tr>
<tr>
<td colspan="3"
style="background-color:#CCCCFF;text-align:center;">
Copyright © bappi
ashraf.com</td></td>
</tr>
</table>
</body>
</html>
ব্রাউজার দিযে খুললে
নিন্মেক্ত ফলাফল পাওয়া যাবে।
বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।
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...
RELATED POST LINKS BELOW ********************************************
