HTML শিখুন বাংলা ভাষায় – পর্ব ১

Rimon নভেম্বর 21, 2019Last Updated: নভেম্বর 21, 2019

2 2 minutes read

5/5 - (1 vote)

প্রিয় পাঠক, কেমন আছেন সবাই? আজ আমি আপনাদের HTML সম্পর্কে বিস্তারিত ধারণা দিবো। যারা ওয়েব পেজ খুলতে আগ্রহী তাদের জন্যে এই পর্বটি অনেকটা উপকারে আসবে। কথা না বাড়িয়ে চলুন শুরু করা যাক।

HTML কি?

HTML মূলত এক ধরণের ভাষা যা একটি ওয়েব পেজ তৈরিতে ব্যবহার করা হয়। সহজ কথা হল HTML হল ওয়েব পেজ তৈরির জন্যে একটি আদর্শ মার্কআপ ভাষা বা language. HTML এর পূর্ণ রূপ হল হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ (Hyper Text Markup Language) . HTML মূলত একটি ওয়েব পেজের গঠন বর্ণনা করে। আর এই গঠন বা language গুলো আমরা (User ) সরাসরি দেখতে পাই না যা দেখি তা হলো language গুলোর চূড়ান্ত ফলাফল। HTML এ বিভিন্ন উপাদান রয়েছে। মজার ব্যাপার হলো এই উপাদানগুলো ব্রাউজারকে বলে দেয় কিভাবে তা চূড়ান্ত উজারদের ফলাফল দেখাবে। HTML এর উপাদানগুলোকে ট্যাগ বা tag বলা হয়। যেমনঃ “title “, “heading”, “table”, “paragarph” ইত্যাদি।
[post_ads]

Table of Contents

HTML পেজের example

[<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>]

এবার আসুন example টি ব্যাখ্যা করা যাক।
১. <!DOCTYPE html> ট্যাগটি দ্বারা বুঝানো হয়েছে ওয়েব পেজটি HTML 5। মূলত এই ট্যাগটি browser কে ওয়েব পেজটি সঠিকভাবে দেখাতে সাহায্য করে। এটি মূলত ওয়েব পেজের উপরে থাকে মানে HTML tags শুরুর আগে থাকে এবং এটি পেজে একবারই থাকে।
২. <html> ট্যাগটি দ্বারা বুঝানো হয়েছে ওয়েব পেজটির মূল উপাদান HTML
৩. <head> ট্যাগটি দ্বারা ওয়েব পেজটির মেটা ইনফরমেশন নির্দেশ করে।
৪. <title> ট্যাগটি দ্বারা ওয়েব পেজটির শিরোনাম নির্দেশ করে। <title> ট্যাগটি মেটা ইনফরমেশন অর্থাৎ <head> ট্যাগটির অন্তর্ভুক্ত।
৫. <body> ট্যাগটি দ্বারা বুঝানো হয়েছে দৃশ্যমান উপাদান। অর্থাৎ , <body> ট্যাগটির অন্তর্ভুক্ত সবকিছুই user রা দেখতে পারবে।
৬. <h1> ট্যাগটি দ্বারা বৃহৎ শিরোমানকে (Heading ) নির্দেশ করে। Heading নিয়ে পরবর্তীতে একটি টিউটোরিয়াল করবো ইনশাআল্লাহ।
৭. <p> ট্যাগটি দ্বারা অনুচ্ছেদ বা প্যারাকে বুঝানো হয়েছে।

এই হলো উপরের example টির ব্যাখ্যা। আপনারা যারা HTML সম্পর্কে নতুন তাদের কাছে ব্যাখ্যাটি একটু জটিল মনে হতে পারে। আশা করি আস্তে আস্তে HTML সহজ হয়ে যাবে।

HTML Tags (ট্যাগ ):

এবার আসুন HTML ট্যাগ নিয়ে কিছু আলোচনা করি।
১. HTML Tags মূলত একটি বন্ধনী দ্বারা আবৃত থাকে। দেখতে less than greater than (< >) এর মতো দেখায়। যেমনঃ <title>, <h1>, <p> ইত্যাদি।
২. HTML Tag মূলত জোড়ায় জোড়ায় ব্যবহার করতে হয়। যেমনঃ <title> এবং </title>, <p> এবং </p> (বুঝতে অসুবিধা হলে উপরের example টি দেখুন)
৩. HTML Tag যেহেতু জোড়ায় জোড়ায় ব্যবহার করতে হয় সেহেতু প্রতিটি জোড়ার আলাদা নাম রয়েছে। যেমনঃ <title> এবং </title> এখানে <title> বলা হয় start tag বা opening tag আর </title> বলা হয় end tag বা closing tag সুতরাং প্রতিটি start tag এর অবশই end tag থাকতে হবে। ধরুন আপনি যদি <p> start tag লিখে তাহলে অবশ্যই </p> end tag দিয়ে আপনার code টি শেষ করতে হবে।
৪. আপনি যদি একটু লক্ষ্য করেন start tag এবং end tag লিখার নিয়ম অনেকটা একই। কিন্তু end tag সর্বদাই একটি forward slash দিয়ে শেষ হয়।
HTML পরবর্তী টিউটোরিয়ালগুলো সবই HTML Tags (ট্যাগ ) সম্পর্কিত।
[post_ads_2]

Web Browsers

প্রতিটি ওয়েব পেজ দেখার জন্যে একটি browser এর প্রয়োজন হয়। ওয়েব ব্রাউজারের উদেশ্য হল HTML এর ট্যাগগুলো পড়া এবং তা user কে প্রদর্শন করা। ওয়েব browser মূলত <body >……..</body > এর অন্তরের ট্যাগগুলিই user দের কে প্রদর্শন করে। বর্তমানে জনপ্রিয় ওয়েব browser গুলো হল : (Chrome, Edge, Firefox, Safari)

HTML Page Structure (গঠন ):

একটি HTML Page Structure বা দেখতে কেমন হয় না দেওয়া হলো।

<html>

<head>

<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

Note: শুধুমাত্র browser এ <body> সেকশন (উপরে সাদা অংশটি) প্রদর্শিত হয়

আজ এই পর্যন্তই, আশা করি টিউটোরিয়ালটি আপনাদের উপকারে আসবে। টিউটোরিয়ালটি ভালো লেগে থাকলে অবশ্যই শেয়ার করবেন। আর পরবর্তীতে এমন টিউটোরিয়াল পেতে আমাদের সাইটটি বুকমার্ক করে রাখুন।