Skip to main content

html কি

 HTML (HyperText Markup Language) একটি মার্কআপ ভাষা যা ওয়েব পেজ তৈরি ও ওয়েব কন্টেন্ট প্রদর্শনের জন্য ব্যবহৃত হয়। এটি ওয়েব পেজের স্ট্রাকচার ও কন্টেন্ট ডিফাইন করতে সহায়তা করে। HTML একটি ডকুমেন্টের বিভিন্ন এলিমেন্ট, যেমন হেডিং, প্যারাগ্রাফ, লিঙ্ক, ইমেজ, এবং অন্যান্য মিডিয়া এলিমেন্টগুলি কিভাবে প্রদর্শিত হবে তা নির্ধারণ করে।

 HTML কি?

  • একটি মার্কআপ ল্যাঙ্গয়েজ সাধারণত ওয়েব পেজ বা ওয়েব কনটেন্ট (লেখা, ছবি, অডিও, ভিডিও ইত্যাদি) ব্যবহৃত হয়। 
  • এটি ওয়েবসাইটের মূল কাঠামো তৈরি করে।
  • অনেকগুলো এলিমেন্ট নিয়ে ওয়েব পেজের কাঠামো তৈরি করে।
  • এলিমেন্টগুলোর মাধ্যমে ওয়েব ব্রাউজার বুঝতে পারে কি করতে হবে। 

HTML ডকুমেন্টগুলি সাধারণত ট্যাগের মাধ্যমে লেখা হয়, যা কৌনিক বন্ধনী (< >) এর মধ্যে থাকে। প্রতিটি ট্যাগের একটি ওপেনিং এবং একটি ক্লোজিং থাকে। উদাহরণস্বরূপ:

উপরে দেওয়া কোডটিতে:

  • <!DOCTYPE html> ডকুমেন্টটি একটি HTML5 ডকুমেন্ট হিসাবে ঘোষণা করে।
  • <html> ট্যাগ সম্পূর্ণ HTML ডকুমেন্টকে এনক্লোজ করে।
  • <head> ট্যাগে মেটাডেটা ও টাইটেল তথ্য রাখা হয়।
  • <body> ট্যাগে মূল কন্টেন্ট রাখা হয়, যেমন হেডিং, প্যারাগ্রাফ এবং লিঙ্ক।
  • <p> প্যারগ্রাফ ট্যাগ বুঝায়

ট্যাগ কি?

ট্যাগ হলো পূর্বনির্ধারিত কিছু symbol বা character। বাংলা ভাষা কিংবা ইংরেজি ভাষার যেমন কিছু বর্ণমালা রয়েছে ট্যাগহলো এই বর্ণমালার মতো। ট্যাগগুলো দিয়ে পরিকল্পিতভাবে ওয়েব পেজ তৈরি করা হয়। ইংরেজি লেখার জন্য যেমন ইংরেজি বর্ণমালা জানতে/শিখতে হয়, তেমনি ওয়েব পেজ/ ওয়েব ডেভেলপমেন্ট শিখতে হলে ট্যাগগুলো জানতে হবে। ট্যাগগুলোকে বলা হয় ওয়েব পেজের বিল্ডিং ব্লক।
  • html ট্যাগ হলো খালি বাক্সের মতো যেগুলো <p>  এইভাবে লেখা হয়। অর্থাৎ প্রতিটি  ট্যাগ  দুইটি ব্রাকেটের মধ্যে লেখা হয়। এটাকে ওপেনিং ট্যাগ বলে। 
  • ট্যাগ ওপেন করলে সেটি  ক্লোজ করতে হয়। ক্লোজিং ট্যাগ </p> এইভাবে লিখতে হয়।

এলিমেন্ট কি?

  • ওপেনিং ও ক্লেজিং ট্যাগের মধ্যে  যে অংশ রাখা হয় তাকে এলিমেন্ট বলে। 
  • এলিমেন্ট বিভিন্ন ধরণের হতে পারে। যেমন-  টেক্সট (লেখা), ছবি, অডিও, ভিডিও, গ্রাফিক্স ইত্যাদি।
  • শুধুমাত্র এলিমেন্টগুলো ওয়েব ব্রাউজারে দেখা যায়। 

উদাহরণ:


html শেখার জন্য প্রয়োজনীয় টুলস/বিষয়:

এই টুলস এবং রিসোর্সগুলি ব্যবহার করে HTML শেখার প্রক্রিয়াটি সহজ এবং কার্যকরী করতে পারেন।

  1. কোড এডিটর:

    • Visual Studio Code (VS Code): এটি একটি বিনামূল্যে এবং ওপেন সোর্স কোড এডিটর যা বিভিন্ন এক্সটেনশন এবং প্লাগইন দ্বারা কাস্টমাইজ করা যায়।
    • Sublime Text: একটি জনপ্রিয় টেক্সট এডিটর যা দ্রুত এবং সহজেই ব্যবহারযোগ্য।
    • Atom: গিথাব দ্বারা উন্নীত একটি হ্যাকেবল টেক্সট এডিটর যা ফ্রি এবং কাস্টমাইজযোগ্য।
    • নোটপ্যাড: কম্পিউটারে বিল্টইন অবস্থায় থাকে।

  2. ব্রাউজার:

    • Google Chrome: একটি জনপ্রিয় ওয়েব ব্রাউজার যার ডেভেলপার টুলস HTML, CSS, এবং JavaScript ডিবাগ করতে সহায়ক।
    • Mozilla Firefox: এর ডেভেলপার টুলসও উন্নত এবং ডেভেলপমেন্টের জন্য বিশেষ সুবিধা প্রদান করে।
    • Microsoft Edge: এর ডেভেলপার টুলস ওয়েব ডেভেলপমেন্টের জন্য উপযুক্ত।

  3. ব্রাউজার ডেভেলপার টুলস:

    • প্রতিটি আধুনিক ব্রাউজারে ডেভেলপার টুলস থাকে যা HTML, CSS, এবং JavaScript ডিবাগ করতে ও লাইভ সম্পাদনা করতে সহায়তা করে। এটি এলিমেন্ট ইনস্পেক্ট করা, কনসোল লগ পরীক্ষা করা এবং নেটওয়ার্ক রিকুয়েস্ট মনিটর করার জন্য ব্যবহৃত হয়।

  4. অনলাইন কোড প্লে গ্রাউন্ড:

    • CodePen: HTML, CSS, এবং JavaScript কোড লিখে সরাসরি ফলাফল দেখার জন্য একটি অনলাইন কোড এডিটর এবং শেয়ারিং প্ল্যাটফর্ম।
    • JSFiddle: একটি অনলাইন কোড এডিটর যা HTML, CSS, এবং JavaScript স্নিপেট শেয়ার করতে সহায়ক।
    • JS Bin: একটি সরল অনলাইন কোড এডিটর যা HTML, CSS, এবং JavaScript এর লাইভ প্রিভিউ দেয়।

  5. টিউটোরিয়াল এবং রিসোর্স:

    • W3Schools: HTML, CSS, JavaScript এবং অন্যান্য ওয়েব ডেভেলপমেন্ট টেকনোলজি শেখার জন্য একটি জনপ্রিয় ওয়েবসাইট।
    • MDN Web Docs: মজিলা ডেভেলপার নেটওয়ার্কের ডকুমেন্টেশন যা HTML এবং ওয়েব ডেভেলপমেন্টের জন্য অত্যন্ত ব্যবহারিক।
    • freeCodeCamp: একটি ফ্রি অনলাইন প্ল্যাটফর্ম যা ইন্টারেক্টিভ কোডিং চ্যালেঞ্জ এবং প্রকল্পের মাধ্যমে ওয়েব ডেভেলপমেন্ট শেখায়।

  6. ডেভেলপমেন্ট সার্ভার:

    • Live Server (VS Code Extension): এটি একটি VS Code এক্সটেনশন যা লোকাল সার্ভার চালু করে এবং কোড এডিট করার সময় স্বয়ংক্রিয়ভাবে ব্রাউজারে রিফ্রেশ করে।
    • XAMPP: একটি ফ্রি এবং ওপেন সোর্স ক্রস-প্ল্যাটফর্ম ওয়েব সার্ভার সলিউশন প্যাকেজ যা Apache, MySQL, এবং PHP সমর্থন করে।

  7. ভার্সন কন্ট্রোল সিস্টেম:

    • Git: একটি ফ্রি এবং ওপেন সোর্স ভার্সন কন্ট্রোল সিস্টেম যা কোড ট্র্যাক করতে এবং বিভিন্ন ভার্সন ম্যানেজ করতে সহায়ক।
    • GitHub: কোড রেপোজিটরি হোস্টিং প্ল্যাটফর্ম যা সহযোগী ডেভেলপমেন্টের জন্য ব্যবহৃত হয়।

প্রতিটি বস্তুর পুর্বনির্ধারিত কিছু গঠন কাঠামো থাকে। ব্রাউজারে কোন ওয়েব পেজকে দেখাতে হলে ট্যাগ ও এলিমেন্ট দিয়ে কাঠামো গঠন করতে হয়। ওয়েব ডেভেলমেন্ট শেখার প্রাথমিক স্তরে এই ট্যাগ ওলো জানা জরুরি। প্রতিটি ট্যাগ মুখস্ত করার প্রয়োজন নেই, শুধুমাত্র এগুলোর ব্যবহার জানলে হবে।  

Comments

Post a Comment

Popular posts from this blog

কিভাবে মাইক্রোসফট ওয়ার্ড এ multi-level tool ব্যবহার করা যায়

Microsoft Word-এ multi-level তালিকা তৈরি করতে নিচের ধাপগুলো অনুসরণ করুন: Multi-Level List তৈরি করা: ডকুমেন্ট খুলুন: Microsoft Word ওপেন করে একটি নতুন বা বিদ্যমান ডকুমেন্ট খুলুন। Multi-Level List অপশন নির্বাচন: Home ট্যাবে যান। Paragraph গ্রুপের মধ্যে, Multilevel List আইকনে ক্লিক করুন। এটি সাধারণত তিনটি লাইনের সাথে একটি সংখ্যা বা বুলেট আইকন হিসেবে দেখানো হয়। Multi-Level List এর ধরন নির্বাচন: Multi-Level List আইকনে ক্লিক করলে বিভিন্ন ধরনের তালিকা ফরম্যাট দেখতে পাবেন। আপনার প্রয়োজন অনুযায়ী একটি ফরম্যাট নির্বাচন করুন। যেমন, সংখ্যা, বুলেট, বা সংখ্যা এবং বুলেটের মিশ্রণ। লিস্ট আইটেম যুক্ত করা: প্রথম লেভেলের একটি আইটেম টাইপ করুন এবং Enter টিপুন। এটি একটি নতুন লাইন তৈরি করবে এবং স্বয়ংক্রিয়ভাবে একই লেভেলে একটি নতুন আইটেম যুক্ত করবে। দ্বিতীয় লেভেলে যেতে চাইলে, Tab কী চাপুন। এটি আইটেমটিকে একটি সাবলেভেলে সরিয়ে দেবে। তৃতীয় লেভেলে যেতে চাইলে আবার Tab কী চাপুন। আগের লেভেলে ফিরে যেতে চাইলে, Shift + Tab চাপুন। লিস্ট আইটেম এডিট করা: যেকোনো লেভেলের আইটেম এডিট করতে, সেই আইটেমে ক্লিক করুন এবং ...
Post a Comment
Read more

মাইক্রোসফট ওয়ার্ডে clipboard এর কাজ কি

 মাইক্রোসফট ওয়ার্ডে ক্লিপবোর্ড (Clipboard) একটি গুরুত্বপূর্ণ টুল যা ব্যবহারকারীদের কপি, কাট, এবং পেস্ট করার সুবিধা প্রদান করে। ক্লিপবোর্ডের মাধ্যমে আপনি এক ডকুমেন্ট থেকে অন্য ডকুমেন্টে বা একই ডকুমেন্টে বিভিন্ন অংশ স্থানান্তর করতে পারেন। ক্লিপবোর্ডের কাজের বিস্তারিত: কপি (Copy) : কোনো টেক্সট, ইমেজ বা অন্যান্য উপাদান নির্বাচন করে কপি কমান্ড দিলে তা ক্লিপবোর্ডে সংরক্ষিত হয়। কিবোর্ড শর্টকাট: Ctrl + C মাউস: নির্বাচিত অংশে রাইট-ক্লিক করে কপি নির্বাচন করা। কাট (Cut) : কোনো টেক্সট বা ইমেজ নির্বাচন করে কাট কমান্ড দিলে তা মূল অবস্থান থেকে সরিয়ে ক্লিপবোর্ডে সংরক্ষিত হয়। কিবোর্ড শর্টকাট: Ctrl + X মাউস: নির্বাচিত অংশে রাইট-ক্লিক করে কাট নির্বাচন করা। পেস্ট (Paste) : ক্লিপবোর্ডে সংরক্ষিত টেক্সট বা ইমেজ যেখানে প্রয়োজন সেখানে পেস্ট করা হয়। কিবোর্ড শর্টকাট: Ctrl + V মাউস: পেস্ট করার জায়গায় রাইট-ক্লিক করে পেস্ট নির্বাচন করা। ক্লিপবোর্ড টাস্ক প্যানেল: ক্লিপবোর্ড টাস্ক প্যানেল চালু করতে: ওয়ার্ডের হোম ট্যাবে ক্লিক করুন। ক্লিপবোর্ড গ্রুপে ক্লিপবোর্ড লঞ্চার আইকনে (কোণায় ছোট তীর) ক্লিক করুন। এই প্যানে...
Post a Comment
Read more