ওয়েব ডেভেলপমেন্ট জানুয়ারী ২০২৫ ব্যাচ - ক্লাস ২ এর আলোচনা

1. Bold/Strong (B/Strong):

  • <b>: একটি টেক্সটকে ভিজুয়ালভাবে বোল্ড করতে ব্যবহার করা হয়। এটি শুধুমাত্র ডিজাইন-উপযোগী।

    • যেখানে ব্যবহার করবেন: যেখানে শুধু বোল্ড স্টাইল দরকার, অর্থাৎ এর অর্থের গুরুত্ব নেই।
    • উদাহরণ:
      <b>This text is bold but not emphasized.</b>
      
  • <strong>: বোল্ড করার পাশাপাশি পাঠ্যটির গুরুত্ব বা গুরুত্ব বোঝায়।

    • যেখানে ব্যবহার করবেন: যেখানে কনটেন্টকে গুরুত্ব দিয়ে বোঝাতে চান।
    • উদাহরণ:
      <strong>Important: This needs attention!</strong>
      
  • বেস্ট প্রাকটিস: যখনই গুরুত্ব বোঝানোর প্রয়োজন, <strong> ব্যবহার করুন। শুধুমাত্র ডিজাইন ক্ষেত্রে <b>


2. Emphasis (Em/I):

  • <i>: ভিজুয়ালভাবে একটি টেক্সটকে ইটালিক স্টাইল দেয়।

    • যেখানে ব্যবহার করবেন: স্টাইল বা ভাষার কারণে ইটালিক করতে চাইলে।
    • উদাহরণ:
      <i>Foreign words or technical terms.</i>
      
  • <em>: টেক্সটকে ইটালিক করার পাশাপাশি গুরুত্ব বোঝায়।

    • যেখানে ব্যবহার করবেন: যেখানে গুরুত্ব দেওয়ার জন্য ইটালিক করা প্রয়োজন।
    • উদাহরণ:
      <em>This is important to understand.</em>
      
  • বেস্ট প্রাকটিস: কন্টেক্সট বুঝে ব্যবহার করুন। গুরুত্ব বোঝানোর জন্য <em> এবং শুধুমাত্র স্টাইলের জন্য <i>


3. Underline (U):

  • <u>: একটি টেক্সটকে আন্ডারলাইন করতে ব্যবহৃত হয়।
    • উদাহরণ:
      <u>This text is underlined.</u>
      

4. Break (BR) / Horizontal Rule (HR):

  • <br>: একটি লাইন ব্রেক যোগ করতে ব্যবহার করা হয়।

    • যেখানে ব্যবহার করবেন: যখন একটি লাইন ভাঙতে চান, যেমন ঠিকানা বা কবিতায়।
    • উদাহরণ:
      Line 1<br>Line 2
      
  • <hr>: একটি অনুভূমিক লাইন যোগ করতে ব্যবহার করা হয়।

    • যেখানে ব্যবহার করবেন: কন্টেন্ট আলাদা করতে।
    • উদাহরণ:
      <hr>
      

5. Display Properties:

Display Properties (Block, Inline, Inline-block):

HTML এর Display Properties একটি এলিমেন্টের পেজে কিভাবে প্রদর্শিত হবে তা নির্ধারণ করে। এগুলো সহজভাবে বোঝানো হলো:


1. Block Element:

  • বর্ণনা:

    • একটি ব্লক এলিমেন্ট পুরো লাইনের জায়গা নেয়।
    • এটি স্বাভাবিকভাবেই একটি নতুন লাইনে শুরু হয়।
    • এর ভেতরে height, width, margin, এবং padding সহজেই সেট করা যায়।
  • উদাহরণ: <div>, <p>, <h1>, <section>, <article>

  • কোথায় ব্যবহার করবেন: যেখানে কন্টেন্টকে পৃথক ব্লকে সাজাতে চান।

  • উদাহরণ:

    <div style="border: 1px solid black;">
      This is a block element.
    </div>
    

2. Inline Element:

  • বর্ণনা:

    • একটি Inline এলিমেন্ট শুধুমাত্র নিজের কন্টেন্টের চারপাশে জায়গা নেয়।
    • এটি নতুন লাইনে শুরু হয় না।
    • Height এবং Width সরাসরি সেট করা যায় না।
  • উদাহরণ: <span>, <a>, <b>, <i>, <strong>

  • কোথায় ব্যবহার করবেন: যেখানে লাইন ভাঙা ছাড়াই কোনো কন্টেন্টে স্টাইল বা লিঙ্ক যোগ করতে চান।

  • উদাহরণ:

    <p>This is a <span style="color: red;">highlighted</span> text.</p>
    

3. Inline-block Element:

  • বর্ণনা:

    • Inline-এর মতোই, এটি লাইন ভাঙে না।
    • কিন্তু ব্লকের মতো Height, Width, Margin, এবং Padding নিয়ন্ত্রণ করা যায়।
  • উদাহরণ: <button>, <img>, <input>

  • কোথায় ব্যবহার করবেন: যেখানে ইনলাইন ফর্ম্যাটে থেকেও কাস্টম সাইজিং প্রয়োজন।

  • উদাহরণ:

    <img src="image.jpg" style="display: inline-block; width: 100px; height: 100px;">
    

বেস্ট প্রাকটিস:

  1. Block Elements:

    • যখন লেআউট বা বিভাগ তৈরি করবেন, যেমন হেডার, ফুটার, আর্টিকেল।
    • উদাহরণ: <div> বা <section> ব্যবহার।
  2. Inline Elements:

    • যখন ছোট ছোট অংশে স্টাইল বা কার্যকরী ফিচার যোগ করবেন, যেমন লিঙ্ক বা স্টাইল করা টেক্সট।
    • উদাহরণ: <span> বা <a>
  3. Inline-block Elements:

    • যখন ইনলাইন এলিমেন্টের মতো হলেও Height এবং Width নিয়ন্ত্রণ করতে হবে।
    • উদাহরণ: <button> বা ইমেজের ক্ষেত্রে <img>

6. Link / Anchor Tag / Href / Target:

  • <a> ট্যাগ: লিঙ্ক তৈরি করতে ব্যবহার করা হয়।
  • href: লিঙ্কের গন্তব্য।
  • target: নতুন বা একই উইন্ডোতে লিঙ্ক খোলা নিয়ন্ত্রণ করে।
    • _blank: নতুন ট্যাবে খোলে।
    • _self: একই ট্যাবে খোলে (ডিফল্ট)।
    • _parent: প্যারেন্ট ফ্রেমে খোলে।
    • _top: পুরো উইন্ডোতে খোলে।

7. Onpage Link / Menu Link:

  • Onpage Link: একই পৃষ্ঠার একটি অংশে লিঙ্ক করতে ব্যবহার হয়।

    • উদাহরণ:
      <a href="#section1">Go to Section 1</a>
      <div id="section1">This is Section 1</div>
      
  • Menu Link: মেনুতে লিঙ্ক তৈরি করতে ব্যবহার হয়।

    • উদাহরণ:
      <nav>
        <a href="home.html">Home</a>
        <a href="about.html">About</a>
      </nav>
      

8. Image Tag & Attributes:

  • <img>: ইমেজ যোগ করতে ব্যবহৃত হয়।

    • src: ইমেজের সোর্স।
    • alt: ইমেজ লোড না হলে বিকল্প টেক্সট।
    • heightwidth: ইমেজের উচ্চতা ও প্রস্থ নিয়ন্ত্রণ।
  • বেস্ট প্রাকটিস:

    • alt ট্যাগ ব্যবহার করুন অ্যাক্সেসিবিলিটির জন্য।
    • ফাইলনামে স্পেস ব্যবহার করবেন না; - বা _ ব্যবহার করুন।

9. Multimedia (Video/Audio):

  • <video><audio>: ভিডিও ও অডিও যোগ করতে ব্যবহার হয়।
    • Attributes:
      • controls: প্লে, পজ করার অপশন।
      • autoplay: অটোমেটিক প্লে।
      • muted: সাইলেন্ট শুরু হয়।
      • preload: লোডিং অপশন (auto, metadata, none)।

10. Importance of Title Tag:

  • টাইটেল ট্যাগ এসইও-র জন্য গুরুত্বপূর্ণ।
    • উপযোগিতা: সার্চ ইঞ্জিন এবং ইউজারদের জন্য কন্টেন্টের সারাংশ।

11. Span এবং Title Tag:

  • <span>: Inline element, সাধারণত টেক্সট স্টাইলিংয়ের জন্য।

    • উদাহরণ:
      <span style="color: red;">Red Text</span>
      
  • Title Tag:

    • টুলটিপ হিসেবে কাজ করে এবং কনটেন্টের বর্ণনা দেয়।
    • উদাহরণ:
      <img src="image.jpg" title="Description of the image">
      
18 Likes

জাযাকাল্লাহ ভাই… অনেক ভালো ভাবে বিশ্লেষণ করছেন।আমার অনেক উপকার হলো বুঝতে।:saluting_face:

4 Likes

Also thanks Brother :heart:

2 Likes

দোয়া করবেন সবার জন্য।

3 Likes

উপকার হলেই অনেক ভালোলাগে।

3 Likes

মাশাআল্লাহ ভাই, সুন্দরভাবে গুছিয়ে বর্ণনা করে দিয়েছেন। ধন্যবাদ।

1 Like

ধন্যবাদ ভাই প্রতিটা ক্লাসের আপডেট চাই

ভাইয়া, আমি কি স্প্রেডশীট বানিয়ে নেব ক্লাস & লেকচার গুলার জন্য? নাকি সব গুছানো পাওয়া যাবে ??

1 Like

প্রতিটি ক্লাসের আপডেট দেওয়ার চেষ্টা করবো।

সব গুছিয়ে পাওয়া যাবে, তারপরেও আপনার যদি মনে হয় করলে ভালো হবে, আপনি আপনার ভালোর জন্য করতেই পারেন।

1 Like

প্রতিটি ক্লাসের আপডেট দেওয়ার চেষ্টা করবো। ধন্যবাদ

1 Like

আপনার ক্লাস নোটগুলো দারুণ লাগল! :blush: প্রতিটি বিষয় এত সুন্দরভাবে ব্যাখ্যা করেছেন যে, নতুনদের শেখা অনেক সহজ হবে। Bold আর Strong-এর পার্থক্য থেকে শুরু করে Display Properties-এর উদাহরণগুলো খুবই পরিষ্কার। :heart:

1 Like

সবার যখন কাজে লাগে, তখন এর পিছনে ব্যায়িত সময়কে সফল বলে মনে হয়।

1 Like

JajakAllah Khairan…
well explained…

পড়লাম পুরোটা, খুব ভালো হইছে