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

Monday, April 18, 2016

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 &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; </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 &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;</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>
ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।

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 ********************************************