• আমাদের সম্পর্কে
  • গোপনীয় নীতি
  • বিজ্ঞাপন
  • যোগাযোগ করুন
  • শর্তাবলী
  • জাগোরিকে লিখুন
রবিবার, ডিসেম্বর ১০, ২০২৩
  • Login
Jagorik
  • এসএসসি
  • এইচএসসি
  • অনার্স
  • মাস্টার্স
  • স্কিল
    • এসইও
    • ওয়েব ডিজাইন
    • কোডিং শিখুন
    • গেস্ট ব্লগিং
    • অনলাইনে ইনকাম
    • ফ্রিল্যান্সিং শিখুন
  • বিদেশে পড়াশোনা
    • স্কলারশিপ
    • আমেরিকা
    • ফিনল্যান্ড উচ্চ শিক্ষা
    • ভারত
  • স্বাস্থ্যবার্তা
    • ঔষধের নাম
    • স্বাস্থ্য
    • ত্বকের যত্ন
    • নারী স্বাস্থ্য
    • বিউটি টিপস
    • মা ও শিশু
  • আইন
  • বিসিএস পরীক্ষা
  • চাকরি
  • জাগোরিক স্পেশাল
  • অন্যান্য
    • আবেদন পত্র
    • উপবৃত্তি
    • ইতিহাস ও ঐতিহ্য
    • জানা-অজানা
    • ডিপ্লোমা ইঞ্জিনিয়ারিং
    • তথ্য প্রযুক্তি
    • ষষ্ঠ শ্রেণি
      • ষষ্ঠ শ্রেণির ইসলাম ও নৈতিক শিক্ষা
      • ষষ্ঠ শ্রেণির বাংলা
      • ষষ্ঠ শ্রেণির স্বাস্থ্য সুরক্ষা
    • সকল শ্রেণির বই
    • সপ্তম শ্রেণি: ইংরেজি
    • সাধারণ জ্ঞান
    • অষ্টম শ্রেণি
      • অষ্টম শ্রেণি বাংলা
      • অষ্টম শ্রেণি: ইংরেজি ১ম
    • ইংরেজি শিখুন
    • লতা-পাতা
    • প্রথম শ্রেণি
      • প্রথম শ্রেণি ইংরেজি’
      • প্রথম শ্রেণি গণিত
      • প্রথম শ্রেণির বাংলা
No Result
View All Result
  • এসএসসি
  • এইচএসসি
  • অনার্স
  • মাস্টার্স
  • স্কিল
    • এসইও
    • ওয়েব ডিজাইন
    • কোডিং শিখুন
    • গেস্ট ব্লগিং
    • অনলাইনে ইনকাম
    • ফ্রিল্যান্সিং শিখুন
  • বিদেশে পড়াশোনা
    • স্কলারশিপ
    • আমেরিকা
    • ফিনল্যান্ড উচ্চ শিক্ষা
    • ভারত
  • স্বাস্থ্যবার্তা
    • ঔষধের নাম
    • স্বাস্থ্য
    • ত্বকের যত্ন
    • নারী স্বাস্থ্য
    • বিউটি টিপস
    • মা ও শিশু
  • আইন
  • বিসিএস পরীক্ষা
  • চাকরি
  • জাগোরিক স্পেশাল
  • অন্যান্য
    • আবেদন পত্র
    • উপবৃত্তি
    • ইতিহাস ও ঐতিহ্য
    • জানা-অজানা
    • ডিপ্লোমা ইঞ্জিনিয়ারিং
    • তথ্য প্রযুক্তি
    • ষষ্ঠ শ্রেণি
      • ষষ্ঠ শ্রেণির ইসলাম ও নৈতিক শিক্ষা
      • ষষ্ঠ শ্রেণির বাংলা
      • ষষ্ঠ শ্রেণির স্বাস্থ্য সুরক্ষা
    • সকল শ্রেণির বই
    • সপ্তম শ্রেণি: ইংরেজি
    • সাধারণ জ্ঞান
    • অষ্টম শ্রেণি
      • অষ্টম শ্রেণি বাংলা
      • অষ্টম শ্রেণি: ইংরেজি ১ম
    • ইংরেজি শিখুন
    • লতা-পাতা
    • প্রথম শ্রেণি
      • প্রথম শ্রেণি ইংরেজি’
      • প্রথম শ্রেণি গণিত
      • প্রথম শ্রেণির বাংলা
No Result
View All Result
Jagorik
No Result
View All Result

এইচটিএমএল লেআউট ও কমেন্ট (Layout&Comment:Prt-8)

জাগোরিক by জাগোরিক
in এইচটিএমএল টিউটোরিয়াল, ওয়েব ডিজাইন
Reading Time: 15 mins read
A A
0
ফেসবুকে শেয়ার করুনটুইটারে টুইট করুনপিন্টারেস্টে পিন করুনলিংকডিনে শেয়ার করুন

একজন দক্ষ ফ্রিল্যান্সার গড়ার লক্ষে দেশে এই প্রথম জাগোরিক নিয়ে এসেছে বাংলা এইচটিএমএল টিউটোরিয়াল আর্টিকেল যার এই পর্বে থাকছে এইচটিএমএল লেআউট ও কমেন্ট সম্পর্কে বিস্তারিত।

এটি হচ্ছে বাংলা এইচটিএমএল টিউটোরিয়াল Part-8 এরই ধারাবাহিকতায় আমরা HTML এর সম্পূর্ণ সিরিজ শেষ করার চেষ্টা করব। সকল পর্বের টিউটোরিয়াল এখানে ক্লিক করলে পেয়ে যাবেনঃ এইচটিএমএল টিউটোরিয়াল

 

এইচটিএমএল লেআউট ও কমেন্ট (Layout&Comment:Part-8)

এইচটিএমএল লেআউট:

Html লেআউট হল খুব মৌলিক বিষয়। টেবিলের ভিতর টেবিল স্থাপন করে এইচটিএমএল

লেআউট তৈরী করা হয়।

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

1.<table bgcolor="black" border="1" heigh="200" width="300">
2.<tr><td>
3.<table bgcolor="white" heigh="100" width="100">
4.<tr><td>Tables inside tables!</td></tr>
5.</table>
6.</td></tr></table>

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

Tables inside tables!

এইচটিএমএল স্টান্ডার্ড লেআউট

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><a href="#">Item 1</a></li>
04.<li><a href="#">Item 1</a></li>
05.<li><a href="#">Item 1</a></li>
06.</ul>
07. 
08.<!-- comment block -->
09. 
10.<div id="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 desktop
03. 
04.-->
05.<div id="col-lg-5 col-md-5 col-sm-5">
06.<ul>
07.<li><a href="#">Item 1</a></li>
08.<li><a href="#">Item 1</a></li>
09.<li><a href="#">Item 1</a></li>
10.</ul>
11. 
12.</div>

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

1.<!--[if lt IE 9]>
2.<script src="/media/jui/js/html5.js"></script>
3.<![endif]-->

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

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

 

উক্ত বিষয় সম্পর্কে কিছু জানার থাকলে কমেন্ট করতে পারেন।
আমাদের সাথে ইউটিউব চ্যানেলে যুক্ত হতে এখানে ক্লিক করুন এবং আমাদের সাথে ফেইজবুক পেইজে যুক্ত হতে এখানে ক্লিক করুন।
গুরুত্বপূর্ণ আপডেট ও তথ্য পেতে আমাদের ওয়েবসাইটে ভিজিট করুন।

এই বিভাগের আরো লেখা

এইচটিএমএল সুপারস্ক্রিপ্ট সাবস্ক্রিপ্ট ও ফর্ম
এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল সুপারস্ক্রিপ্ট সাবস্ক্রিপ্ট ও ফর্ম (Part-12)

অক্টোবর ২২, ২০২২
এইচটিএমএল টেক্সক্ট ফিল্ড আপলোড ও ড্রপডাউন
এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল টেক্সক্ট ফিল্ড আপলোড ও ড্রপডাউন (Part-13)

অক্টোবর ২২, ২০২২
এইচটিএমএল বোল্ড ও ইটালিক কোড এবং pre ট্যাগ
এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল বোল্ড ও ইটালিক কোড এবং pre ট্যাগ (Part-11)

অক্টোবর ২১, ২০২২
এইচটিএমএল বডি ও ডিভ
এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল বডি ও ডিভ (HTML Body & Div: Part-10)

অক্টোবর ২১, ২০২২
এইচটিএমএল কালার কোড ও ফ্রেম
এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল কালার কোড ও ফ্রেম (Color & Frame: Part-7)

অক্টোবর ২১, ২০২২
এইচটিএমএল মিউজিক ও ভিডিও
এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল মিউজিক ও ভিডিও (Music & Video: Part-9)

অক্টোবর ২০, ২০২২
Next Post
এইচটিএমএল বোল্ড ও ইটালিক কোড এবং pre ট্যাগ

এইচটিএমএল বোল্ড ও ইটালিক কোড এবং pre ট্যাগ (Part-11)

এইচটিএমএল টেক্সক্ট ফিল্ড আপলোড ও ড্রপডাউন

এইচটিএমএল টেক্সক্ট ফিল্ড আপলোড ও ড্রপডাউন (Part-13)

এইচটিএমএল সুপারস্ক্রিপ্ট সাবস্ক্রিপ্ট ও ফর্ম

এইচটিএমএল সুপারস্ক্রিপ্ট সাবস্ক্রিপ্ট ও ফর্ম (Part-12)

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

জনপ্রিয় লেখাগুলো

No Content Available

অন্যান্য বিভাগ থেকে

বাংলাদেশিদের জন্য সেরা ১০টি স্কলারশিপ

বাংলাদেশিদের জন্য সেরা ১০টি স্কলারশিপ

সেপ্টেম্বর ২৪, ২০২২
বাংলাদেশ ও বিশ্বপরিচয় অধ্যায় ০৮ সৃজনশীল প্রশ্নোত্তর PDF

বাংলাদেশ ও বিশ্বপরিচয় | অধ্যায় ০৮ | সৃজনশীল প্রশ্নোত্তর | PDF

মে ১৮, ২০২৩
মাস্টার্স উচ্চতর সামাজিক গবেষণা ও পরিসংখ্যান

মাস্টার্স উচ্চতর সামাজিক গবেষণা ও পরিসংখ্যান প্রশ্নোত্তর

সেপ্টেম্বর ২৮, ২০২২
খুলনা জেলার ইতিহাস ও ঐতিহ্য

খুলনা জেলার ইতিহাস ও ঐতিহ্য

এপ্রিল ২৪, ২০২৩
  • আমাদের সম্পর্কে
  • গোপনীয় নীতি
  • জাগোরিকে লিখুন
  • বিজ্ঞাপন
  • যোগাযোগ করুন
  • শর্তাবলী
Call us: +1 234 JEG THEME

© ২০২৩ জাগোরিক - সর্বস্বত্ব স্বত্বাধিকার সংরক্ষিত

No Result
View All Result
  • এসএসসি
  • এইচএসসি
  • অনার্স
  • মাস্টার্স
  • স্কিল
    • এসইও
    • ওয়েব ডিজাইন
    • কোডিং শিখুন
    • গেস্ট ব্লগিং
    • অনলাইনে ইনকাম
    • ফ্রিল্যান্সিং শিখুন
  • বিদেশে পড়াশোনা
    • স্কলারশিপ
    • আমেরিকা
    • ফিনল্যান্ড উচ্চ শিক্ষা
    • ভারত
  • স্বাস্থ্যবার্তা
    • ঔষধের নাম
    • স্বাস্থ্য
    • ত্বকের যত্ন
    • নারী স্বাস্থ্য
    • বিউটি টিপস
    • মা ও শিশু
  • আইন
  • বিসিএস পরীক্ষা
  • চাকরি
  • জাগোরিক স্পেশাল
  • অন্যান্য
    • আবেদন পত্র
    • উপবৃত্তি
    • ইতিহাস ও ঐতিহ্য
    • জানা-অজানা
    • ডিপ্লোমা ইঞ্জিনিয়ারিং
    • তথ্য প্রযুক্তি
    • ষষ্ঠ শ্রেণি
      • ষষ্ঠ শ্রেণির ইসলাম ও নৈতিক শিক্ষা
      • ষষ্ঠ শ্রেণির বাংলা
      • ষষ্ঠ শ্রেণির স্বাস্থ্য সুরক্ষা
    • সকল শ্রেণির বই
    • সপ্তম শ্রেণি: ইংরেজি
    • সাধারণ জ্ঞান
    • অষ্টম শ্রেণি
      • অষ্টম শ্রেণি বাংলা
      • অষ্টম শ্রেণি: ইংরেজি ১ম
    • ইংরেজি শিখুন
    • লতা-পাতা
    • প্রথম শ্রেণি
      • প্রথম শ্রেণি ইংরেজি’
      • প্রথম শ্রেণি গণিত
      • প্রথম শ্রেণির বাংলা

© ২০২৩ জাগোরিক - সর্বস্বত্ব স্বত্বাধিকার সংরক্ষিত

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In