একজন দক্ষ ফ্রিল্যান্সার গড়ার লক্ষে দেশে এই প্রথম জাগোরিক নিয়ে এসেছে বাংলা এইচটিএমএল টিউটোরিয়াল আর্টিকেল যার এই পর্বে থাকছে এইচটিএমএল লেআউট ও কমেন্ট সম্পর্কে বিস্তারিত।
এটি হচ্ছে বাংলা এইচটিএমএল টিউটোরিয়াল Part-8 এরই ধারাবাহিকতায় আমরা HTML এর সম্পূর্ণ সিরিজ শেষ করার চেষ্টা করব। সকল পর্বের টিউটোরিয়াল এখানে ক্লিক করলে পেয়ে যাবেনঃ এইচটিএমএল টিউটোরিয়াল
এইচটিএমএল লেআউট ও কমেন্ট (Layout&Comment:Part-8)
এইচটিএমএল লেআউট:
Html লেআউট হল খুব মৌলিক বিষয়। টেবিলের ভিতর টেবিল স্থাপন করে এইচটিএমএল
লেআউট তৈরী করা হয়।
বর্তমানে লেআউট ডিভ (div এলিমেন্ট) ব্যবহার করে বানানো হয়। টেবিল দিয়ে কখনই লেআউট বানাবেন না। টিউটোরিয়ালটি দেয়া আছে তাই মোছা হলনা। টেবিল দিয়েও যে লেআউট বানানো যায় এবং আগে সব লেআউট এভাবেই বানানো হত এটা জানার জন্যই শুধু টিউটোরিয়ালটি।
1.<tablebgcolor="black"border="1"heigh="200"width="300">2.<tr><td>3.<tablebgcolor="white"heigh="100"width="100">4.<tr><td>Tables inside tables!</td></tr>5.</table>6.</td></tr></table>
প্রদর্শন: টেবিলের ভিতর টেবিল
|
এইচটিএমএল স্টান্ডার্ড লেআউট
Standard layout সাধারনত উপরে অবস্থিত ব্যানার, নেভিগেশন এবং content বা প্রদর্শন বক্স। এগুলো হলো
ভাল ওয়েব সাইট এর বৈশিষ্ট্য।
01.<tablecellspacing="1"cellpadding="0"border="0"02.bgcolor="black"height="250"width="400">03.<trheight="50"><tdcolspan="2"bgcolor="white">04.<tabletitle="Banner"id="banner"border="0">05.<tr><td>Place a banner here</td></tr>06.</table>07.</td></tr>08.<trheight="200"><tdbgcolor="white">09.<tabletitle="Navigation"border="0">10.<tr><td>Links!</td></tr>11.<tr><td>Links!</td></tr>12.<tr><td>Links!</td></tr>13.</table>14.</td><tdbgcolor="white">15.<tabletitle="Content"id="content"border="0">16.<tr><td>Content goes here</td></tr>17.</table>18.</td></tr></table>
এইচটিএমএল লেআউট ও কমেন্ট –
01.<tabletitle="Shell"height="250"width="400"02.border="0"bgcolor="black"cellspacing="1"cellpadding="0">03.<trheight="50"><tdbgcolor="white">04.<tabletitle="banner"id="banner">05.<tr><td>Banner goes here</td></tr>06.</table>07.</td></tr>08.<trheight="25"><tdbgcolor="white">09.<tabletitle="Navigation"id="navigation">10.<tr><td>Links!</td>11.<td>Links!</td>12.<td>Links!</td></tr>13.</table>14.</td></tr>15.<tr><tdbgcolor="white">16.<tabletitle="Content"id="content">17.<tr><td>Content goes here</td></tr>18.</table>19.</td></tr></table>
- আরও পড়ুনঃ বাংলা এইচটিএমএল টিউটোরিয়াল (Introduction: Part-1)
- আরও পড়ুনঃ এইচটিএমএল ট্যাগ ও এট্রিবিউট (Tag & Attribute: Part-2)
- আরও পড়ুনঃ এইচটিএমএল প্যারাগ্রাফ ও হেডিং (P tag & Heading: Part-3)
- আরও পড়ুনঃ এইচটিএমএল লিস্ট ও ফন্ট (HTML List & Font: Part-4)
- আরও পড়ুনঃ এইচটিএমএল লিংক ও এনটাইটিজ (Link & Entities: Part-5)
এইচটিএমএল কমেন্ট
আপনার এইচটিএমএল ডকুমেন্টের কোন অংশ চাইলে কমেন্ট করে রাখতে পারে তাহলে এই অংশটুকু আর ব্রাউজারে দেখাবেনা। অন্য কোন ডেভেলপার বা আপনিই যদি অনেক পরে সেই ডকুমেন্ট দেখেন তখন বুঝতে সুবিধা হয় কোন কোড কিসের জন্য লিখেছিলেন।
তাই কোড কমেন্ট করা ভাল প্রাকটিস তবে করা জরুরী নয়। start tag <!– এবং end tag –> এর মাঝে থাকা সব কমেন্ট হেয় থাকে। যেমন
01.<!-- menu section -->02.<ul>03.<li><ahref="#">Item 1</a></li>04.<li><ahref="#">Item 1</a></li>05.<li><ahref="#">Item 1</a></li>06.</ul>07.08.<!-- comment block -->09.10.<divid="comment">11.12.<p>There are few browsers who supports <comment> tag to comment a part of code.</p>13.</div>
একসাথে একাধিক লাইনও কমেন্ট করে রাখতে পারেন। এভাবে কমেন্ট করার প্রধান উদ্দেশ্য কোডের জন্য একটা ডকুমেন্টেশন বানানো যাতে পরে কোড দেখে বোঝা যায় কোন অংশ কিসের জন্য লেখা হয়েছে।
01.<!--02.This part will effect only 320px on responsive view.This is not for large desktop03.04.-->05.<divid="col-lg-5 col-md-5 col-sm-5">06.<ul>07.<li><ahref="#">Item 1</a></li>08.<li><ahref="#">Item 1</a></li>09.<li><ahref="#">Item 1</a></li>10.</ul>11.12.</div>
এছাড়া কন্ডিশনাল কমেন্ট দেয়া যায় এটা শুধু ইন্টারনেট এক্সপ্লোরারের জন্য কাজ করে থাকে। যেমন অনেক সময় আমরা অতিরিক্ত স্ক্রিপ্ট বা সিএসএস ফাইল ব্যবহার করি IE এর জন্য। যেমন
1.<!--[if lt IE 9]>2.<scriptsrc="/media/jui/js/html5.js"></script>3.<![endif]-->
এটা শুধু IE 9 এর জন্য কাজ করবে।
কোন কোডও যদি কমেন্ট ট্যাগের ভিতর রাখেন সেটা ব্রাউজারে দেখাবেনা উপরের দুটি উদাহরনের যেকোনটিতে কোডের আগে পরে <!– এবং –> দিয়ে ব্রাউজারে রান করিয়ে দেখুন সেই অংশটুকু দেখাবেনা।
উক্ত বিষয় সম্পর্কে কিছু জানার থাকলে কমেন্ট করতে পারেন।
আমাদের সাথে ইউটিউব চ্যানেলে যুক্ত হতে এখানে ক্লিক করুন এবং আমাদের সাথে ফেইজবুক পেইজে যুক্ত হতে এখানে ক্লিক করুন।
গুরুত্বপূর্ণ আপডেট ও তথ্য পেতে আমাদের ওয়েবসাইটে ভিজিট করুন।
