সম্পূর্ণভাবে HTML । CSS । JavaScript শিখে হয়ে যান দক্ষ ওয়েব ডেভেলপার – For Begginers To Advance [Part-05 – HTML Basic Structure]
Web Development

সম্পূর্ণভাবে HTML । CSS । JavaScript শিখে হয়ে যান দক্ষ ওয়েব ডেভেলপার – For Begginers To Advance [Part-05 – HTML Basic Structure]

Hello TrickBD Users

আসসালামুওয়ালাইকুম

কেমন আছেন সবাই ? HTML , CSS & JavaScript এর ৫ম লিখিত ক্লাসে আপনাকে স্বাগতম ।  যারা আগের ক্লাস টি দেখেন নি তারা এক্ষুনি আমার আগের ক্লাস টি দেখে আসুন । সব ক্লাস গুলো মনযোগ সহকারে না দেখলে বুঝবেন না যে আমি কি বলছি । কারন কোডিং অনেক সেনসিটিভ একটি বিষয় ।

ক্লাস ০১ লিংকঃ

সম্পূর্ণভাবে HTML । CSS । JavaScript শিখে হয়ে যান দক্ষ ওয়েব ডেভেলপার – For Begginers To Advance [Part-01 / HTML পরিচিতি]

ক্লাস ০২ লিংকঃ

সম্পূর্ণভাবে HTML । CSS । JavaScript শিখে হয়ে যান দক্ষ ওয়েব ডেভেলপার – For Begginers To Advance [Part-02 / Code Editors & Browsers]

ক্লাস ০৩ লিংকঃ

সম্পূর্ণভাবে HTML । CSS । JavaScript শিখে হয়ে যান দক্ষ ওয়েব ডেভেলপার – For Begginers To Advance [Part-03 / HTML Tags]

ক্লাস ০৪ লিংকঃ

সম্পূর্ণভাবে HTML । CSS । JavaScript শিখে হয়ে যান দক্ষ ওয়েব ডেভেলপার – For Begginers To Advance [Part-04 – File Type/Extension]

এই ক্লাসে আমরা যা যা শিখবো

  • HTML এর বেসিক স্ট্রাকচার
  • কীভাবে HTML ডকুমেন্ট লেখা শুরু করতে হয়
  • কোথায় কেমন ট্যাগস থাকে

Basic Sturcture of a HTML Doccument

একটি HTML ডকুমেন্ট লেখা শুরু করতে হলে আগে HTML ডকুমেন্ট এর বেসিক স্ট্রাকচার টা কেমন হবে তা জানতে হবে ।

আজ আমরা সেটাই দেখবো । গতো ক্লাসে আমি আপনাদের একটি ফোল্ডার বানিয়ে রাখতে বলেছিলাম ,যেই ফোল্ডারে এই কোর্সের সকল ফাইল থাকবে ।

তো আমরা চলে যাবো আমাদের সেই ফোল্ডারে ,

সেই ফোল্ডারে আমরা “basic-stuctuture.html” এই নামে একটি ফাইল তৈরি করবো । কীভাবে এই ফাইল তৈরি করবো তা যদি না জানেন পূর্বের ক্লাস দেখে আসুন অথবা কমেন্টে জানান ।

তারপর সেই ফাইল VS Code এ ওপেন করে নিবো ।

ওপেন করলে আমরা ঠিক এমন ইন্টারফেস দেখতে পাবোঃ

এখানে আমাদের কোড লিখতে হবে ,

তো তার আগে জেনে নেই HTML Basic Structure কি অথবা কীভাবে লিখতে হয় ,

তো না পেচিয়ে সরাসরি বলিঃ

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Document</title>
</head>
<body>
</body>
</html>
এটা হচ্ছে HTML এর বেসিক স্ট্রাকচার অথবা HTML Boilerplate.
যেকোনো ওয়েব এলিমেন্ট বা HTML Elemennts , Tags , Markups আমাদের এই Boilerplate এর মধ্যে লিখতে হবে ।
যদি আমরা অন্য সব সাধারন কোড এডিটর ব্যবহার করি তাহলে আমাদের এই পূরো কোড টি কষ্ট করে লিখতে হবে , কিন্তু যদি Visual Studio Code ব্যবহার করি তাহলে আমরা খুবই দ্রুতো এটা লিখতে পারবো ,
সেটা কীভাবেঃ
আমাদের শুধু   “!”  এই সাইন লিখে এন্টার এ প্রেস করতে হবে ।
তাহলেই আমাদের পুরো Boilerplate চলে আসবে ।
চলে এসেছে ।
এখন আমরা এই Boilerplate টি কে বুঝবো ।
সবার প্রথমে আমরা দেখতে পাচ্ছি  <!DOCTYPE html>
এটি দ্বারা আমাদের এই ডকুমেন্ট ব্রাউজার কে জানিয়ে দেয় যে এই ডকুমেন্ট টি এক ধরনের HTML ডকুমেন্ট । অর্থাৎ Doccument Type : HTML ।
তারপর <html lang=”en”>
এটা দ্বারা ডকুমেন্ট টি নির্দেশ করে যে উক্ত ডকুমেন্ট এর ভাষা ইংরেজি  ।
এবার দেখতে পাচ্ছি Head ট্যাগ ,

Head Tag কী ?

হেড ট্যাগ হল HTML ফাইলের একটি উপাদান যাতে মেটাডেটা (ডেটা সম্পর্কে ডেটা) এবং স্ক্রিপ্ট কল থাকতে পারে। হেড ট্যাগটি HTML ফাইলের শুরুতে খোলা হয়। এই <head> ট্যাগের ভেতরে যেই ইনফর্মেশন গুলো থাকে সেগুলো সাধারণত দেখা যায় না ওয়েবপেজ এ কিন্তু এই ফাইল গুলো ব্রাউজার এবং সার্চ ইঞ্জিন অপটিমাজেশনে সহায়তা করে ।
তারপরেই আমরা দেখতে পাচ্ছি Meta Tags ,

Meta Tags কী?

মেটা ট্যাগ বা, Meta Tag সার্চ ইঞ্জিনের জন্য একটি গুরুত্বপূর্ণ বিষয়। সার্চ ইঞ্জিন যখন আপনার ওয়াব সাইটে আসে বা স্ক্রল করে তখন মেটা ট্যাগ এর মাধ্যমে আপনার ওয়েব সাইট থেকে গুরুত্বপূর্ণ তথ্য গুলো পেয়ে থাকে যে তথ্যের মাধ্যমে আপনার সাইট সার্চ ইঞ্জিনে র‍্যাঙ্ক করে। তবে এই মেটা ট্যাগ ওয়েবপেজ এ প্রদর্শিত হয় না বা দেখা যায় না ।

 

তারপর দেখতে পাচ্ছি Title ট্যাগ <title></title>

এই ট্যাগের ভিতরে যা লেখা হবে তা ব্রাউজারের ওপেনকৃত ট্যাবের টাইটেল হিসেবে প্রদর্শিত হবে ।

ধরুন যদি আমি এখানে লিখি  <title>SR TrickBD</title>

তাহলে এটা ব্রাউজারে প্রদর্শিত হবে

এভাবে ।

 

এর পরেই হেড ট্যাগ ক্লোজ হয়ে যায় ।
তারপর আমরা দেখতে পাচ্ছি <body> ট্যাগ
এই ট্যাগের ভিতরে আমরা মূলত আমরা ওয়েবপেজের কন্টেন্ট লিখি ।
 যেমনঃ <p> <h1> <li> এই মার্কাপ সহ ওয়েবের কন্টেন্ট ।
মানে যা ওয়েবপেজ এ শো করবে ।

তো আজ এপর্যন্তই । দেখা হবে পরবর্তী ক্লাসে । আল্লাহ হাফেজ ।

কোনো সমস্যা হলে বা প্রতিনিয়ত আপডেটেড থাকতে টেলিগ্রাম গ্রুপে আসুনঃ
Web Journey With SR

 

[Warning: The complete course is written by Saimum Raihan. This course is fully copyrighted to TrickBD Official & Saimum Raihan. Please do not copy, otherwise legal action will attempt. Thank You]

 

5 thoughts on "সম্পূর্ণভাবে HTML । CSS । JavaScript শিখে হয়ে যান দক্ষ ওয়েব ডেভেলপার – For Begginers To Advance [Part-05 – HTML Basic Structure]"

  1. MilonIS Contributor says:
    February 6, 2023 at 10:16 am
    Thanks a lot vai….porer class den taratari ???????
    1. Saimum Raihan Author Post Creator says:
      February 6, 2023 at 12:25 pm
      জ্বি ভাই ! যত দ্রুতো সম্ভব আপলোড করা হবে !
    2. Saimum Raihan Author Post Creator says:
      February 6, 2023 at 12:25 pm
      I mean lekha hbe
  2. Hridoy Mini Expert Author says:
    February 6, 2023 at 1:46 pm
    আমার করা সকল পার্ট একসাথে।
    Html learning
    https://trickbd.com/web-development/750644
    1. Saimum Raihan Author Post Creator says:
      February 6, 2023 at 4:54 pm
      আপনি অনেক সুন্দর করে সব লিখেছেন ভাই,
      কিন্তু আমি চেষ্টা করছি HTML, CSS & Js সব কিছু বেসিক টু এডভান্স আলোচনা করার। দোয়া করবেন।

      অসংখ্য ধন্যবাদ ভাই কমেন্টের জন্য ?

Leave a Reply