How to learn লেআউট (Layout) in HTML | SP Foundationbd

HTML Layout হল খুব মৌলিক বিষয়। টেবিলের ভিতর টেবিল স্থাপন করে html layout

তৈরী করা হয়।

** বর্তমানে লেআউট ডিভ (div এলিমেন্ট) ব্যবহার করে বানানো হয়। টেবিল দিয়ে কখনই লেআউট বানাবেন না। টিউটোরিয়ালটি দেয়া আছে তাই মোছা হলনা। টেবিল দিয়েও যে লেআউট বানানো যায় এবং আগে সব লেআউট এভাবেই বানানো হত এটা জানার জন্যই শুধু টিউটোরিয়ালটি।

<table bgcolor="black" border="1" heigh="200" width="300">

<tr><td>

<table bgcolor="white" heigh="100" width="100">

<tr><td>Tables inside tables!</td></tr>

</table>

</td></tr></table>

প্রদর্শন: টেবিলের ভিতর টেবিল

Tables inside tables!

Html standard layout

Standard layout সাধারনত উপরে অবস্থিত ব্যানার, নেভিগেশন এবং content বা প্রদর্শন বক্স। এগুলো হলো

ভাল ওয়েব সাইট এর বৈশিষ্ট্য।

<table cellspacing="1" cellpadding="0" border="0"

bgcolor="black" height="250" width="400">

<tr height="50"><td colspan="2" bgcolor="white">

<table title="Banner" id="banner" border="0">

<tr><td>Place a banner here</td></tr>

</table>

</td></tr>

<tr height="200"><td bgcolor="white">

<table title="Navigation" border="0">

<tr><td>Links!</td></tr>

<tr><td>Links!</td></tr>

<tr><td>Links!</td></tr>

</table>

</td><td bgcolor="white">

<table title="Content" id="content" border="0">

<tr><td>Content goes here</td></tr>

</table>

</td></tr></table>

 

 

<table title="Shell" height="250" width="400"

border="0" bgcolor="black" cellspacing="1" cellpadding="0">

<tr height="50"><td bgcolor="white">

<table title="banner" id="banner">

<tr><td>Banner goes here</td></tr>

</table>

</td></tr>

<tr height="25"><td bgcolor="white">

<table title="Navigation" id="navigation">

<tr><td>Links!</td>

<td>Links!</td>

<td>Links!</td></tr>

</table>

</td></tr>

<tr><td bgcolor="white">

<table title="Content" id="content">

<tr><td>Content goes here</td></tr>

</table>

</td></tr></table>

মন্তব্য (Comments)

আপনার html document র কোন অংশ চাইলে কমেন্ট করে রাখতে পারে তাহলে এই অংশটুকু আর ব্রাউজারে দেখাবেনা। অন্য কোন ডেভেলপার বা আপনিই যদি অনেক পরে সেই document দেখেন তখন বুঝতে সুবিধা হয় কোন কোড কিসের জন্য লিখেছিলেন। তাই কোড comment করা ভাল প্রাকটিস তবে করা জরুরী নয়। start tag <!-- এবং end tag  --> এর মাঝে থাকা সব কমেন্ট হেয় থাকে। যেমন

<!-- menu section -->

<ul>

<li><a href="#">Item 1</a></li>

<li><a href="#">Item 1</a></li>

<li><a href="#">Item 1</a></li>

</ul> 

<!-- comment block -->

<div id="comment"> 

<p>There are few browsers who supports <comment> tag to comment a part of code.</p>

</div>

একসাথে একাধিক  line ও coment করে রাখতে পারেন। এভাবে কমেন্ট করার প্রধান উদ্দেশ্য কোডের জন্য একটা ডকুমেন্টেশন বানানো যাতে পরে code দেখে বোঝা যায় কোন অংশ কিসের জন্য লেখা হয়েছে।

<!--

This part will effect only 320px on responsive view.This is not  for large desktop 

-->

<div id="col-lg-5 col-md-5 col-sm-5">

<ul>

<li><a href="#">Item 1</a></li>

<li><a href="#">Item 1</a></li>

<li><a href="#">Item 1</a></li>

</ul> 

</div>

 

এছাড়া conditional কমেন্ট দেয়া যায় এটা শুধু ইন্টারনেট এক্সপ্লোরারের জন্য কাজ করে থাকে। যেমন অনেক সময় আমরা অতিরিক্ত স্ক্রিপ্ট বা সিএসএস ফাইল ব্যবহার করি IE এর জন্য। যেমন

<!--[if lt IE 9]>

<script src="/media/jui/js/html5.js"></script>

<![endif]-->

এটা শুধু IE 9 এর জন্য কাজ করবে।

 

কোন কোডও যদি কমেন্ট ট্যাগের ভিতর রাখেন সেটা ব্রাউজারে দেখাবেনা উপরের দুটি উদাহরনের যেকোনটিতে কোডের আগে পরে <!-- এবং --> দিয়ে ব্রাউজারে রান করিয়ে দেখুন সেই অংশটুকু দেখাবেনা।