Mar 12

এইচটিএমএল টিউটোরিয়াল পরিচিতি (HTML tutorial Introduction)

HTML পরিচিতি

HTML কি?

HTML হল একটি মার্কআপ ল্যাঙ্গুয়েজ যার মাধ্যমে একটি ওয়েব পেজের কন্টেন্ট গুলোকে বর্ণনা করা হয়।

  • HTML এর পূর্ণরূপ হল Hyper Text Markup Language
  • মার্কআপ ল্যাঙ্গুয়েজ হল অনেকগুলো মার্কআপ ট্যাগের সমষ্টি
  • HTML এর ডকুমেন্টস HTML ট্যাগ দ্বারা বর্ণনা করা হয়
  • প্রত্যেকটি HTML ট্যাগ ডকুমেন্টের ভিন্ন ভিন্ন কন্টেন্টকে বর্ণনা করে

উদাহরণ

<!DOCTYPE html>

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

ফলাফল :

My First Heading

My first paragraph.

উদাহরণের বর্ণনা

  • প্রথমের DOCTYPE ঘোষণা করে যে ডকুমেন্টটির প্রকার হচ্ছে : HTML
  • <html> এবং </html> এই ট্যাগের ভিতরের টেক্সটগুলো HTML ডকুমেন্টকে বর্ণনা করে
  • <head> এবং </head>এই ট্যাগের ভিতরের টেক্সটগুলো HTML ডকুমেন্টটি কি প্রকারের সেই তথ্য ধারণ করে
  • <title> এবং </title> এই ট্যাগের ভিতরের টেক্সটগুলো HTML ডকুমেন্টের টাইটেল ধারণ করে
  • <body> এবং </body> এই ট্যাগের ভিতরের টেক্সটগুলো ওয়েবপেজ ব্রাউজারে যেসব কন্টেন্ট শো করবে তা ধারণ করে
  • <h1> এবং </h1> এই ট্যাগের ভিতরের টেক্সট হেডিংকে বর্ণনা করে
  • <p> এবং </p>এই ট্যাগের ভিতরের টেক্সটগুলো প্যারাগ্রাফকে ডিক্লেয়ার করে

HTML ট্যাগ

HTML ট্যাগ হল এঙ্গেল বন্ধনী <> দ্বারা আবদ্ধ কতগুলো কীওয়ার্ড

  • HTML ট্যাগগুলো সাধারণত জোড়ায় জোরায় হয়ে থাকে, যেমন <p> এবং </p>
  • জোড়ার প্রথম অংশকে বলা হয় স্টার্ট ট্যাগ এবং শেষ অংশকে বলা হয় ইন্ড ট্যাগ
  • ইন্ড ট্যাগ স্টার্ট ট্যাগের মতই হয় শুধু ট্যাগ নেমের পূর্বে একটি অতিরিক্ত স্লেস (/) হয়

হিন্টসঃ স্টার্ট ট্যাগকে প্রায়ই ওপেনিং ট্যাগ বলা হয় এব ইন্ড ট্যাগকে বলা হয় ক্লোজিং ট্যাগ

ওয়েব ব্রাউজার

ওয়েব ব্রাউজার যেমন (Chrome, IE, Firefox, Safari) এগুলোর কাজ হচ্ছে HTML ডকুমেন্টসকে পড়া এবং তা ডিসপ্লে করা। ব্রাউজার কখনো HTML এর ট্যাগগুলোকে ডিসপ্লে করে না কিন্তু কোন কন্টেন্টকে কিভাবে ডিসপ্লে করতে হবে তার জন্য ট্যাগগুলোকে ব্যাবহার করে।

chrome

HTML পেজ স্ট্রাকচার

HTML পেজ কিভাবে ব্রাউজারে ডিসপ্লে হয় তার একটি স্ট্রাকচার নিচে দেয়া হল

<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>

শুধুমাত্র বডি এরিয়ার ভিতরে যা থাকে তাই ব্রাউজারে ডিসপ্লে হয়

<!DOCTYPE> ঘোষণা

<!DOCTYPE> ঘোষণা করলে ব্রাউজার ওয়েব পেজের উপাদানগুলো সঠিকভাবে প্রদর্শন করতে পারে।

ওয়েবসাইটে বিভিন্ন ধরনের ডকুমেন্টস থাকে।

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

ডিক্লেয়ারেশন কেস সেনসেটিভ হয় না, সকল ধরনের কেস এখানে গ্রহণযোগ্য।

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

কমন ডিক্লেয়ারেশনস

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

XHTML 1.0

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

HTML ভার্সনস

ওয়েবের যুগের সূচনা থেকেই HTML এর অনেকগুলো ভার্সন বের হয়েছে:

ভার্সন সাল
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2012