TOC

This article is currently in the process of being translated into Bangla (~97% done).

Introduction to HTML:

Your First Webpage

এখানে আপনি তৈরি করতে পারেন এমন সহজতম HTML5 নথিগুলির একটির উদাহরণ রয়েছে৷ এটি HTML5 ডকটাইপ দিয়ে শুরু হয়, একটি পৃষ্ঠার শিরোনাম এবং তারপরে কিছু বিষয়বস্তু অনুসরণ করে, এই ক্ষেত্রে একটি একক অনুচ্ছেদ।

<!DOCTYPE html>
<title>Your first HTML5 Document</title>
<p>Okay, now we’re going somewhere!</p>

এটি একটি ব্রাউজারে কেমন হবে সে সম্পর্কে আপনার ধারণা থাকা উচিত – নথির শিরোনাম, "আপনার প্রথম HTML5 নথি" এবং পাঠ্য "ঠিক আছে, এখন আমরা কোথাও যাচ্ছি!" পৃষ্ঠার বাম শীর্ষে লেখা।

ডকটাইপ ঘোষণা প্রত্যেককে বলে যে ডকুমেন্টটি পড়ছে যা HTML বিষয়বস্তু অনুসরণ করে।

<!DOCTYPE html>

আপনি যদি আগে এইচটিএমএল ডকুমেন্টের মার্কআপ দেখে থাকেন তবে আপনি একটি ডকটাইপ ঘোষণা দেখে থাকতে পারেন যা দেখতে অনেকটা এরকম:

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

এমনকি পেশাদার ওয়েব ডেভেলপাররাও এই দীর্ঘ ডকটাইপটিকে এক ডকুমেন্ট থেকে অন্য ডকুমেন্টে কপি করে পেস্ট করে - নতুন সহজ ডকটাইপটি মনে রাখা সহজ এবং যেহেতু কোনো নির্দিষ্ট সংস্করণ ঘোষণা করা হয়নি, সমস্ত নতুন ভবিষ্যত বৈশিষ্ট্যগুলি স্বয়ংক্রিয়ভাবে আপনার পৃষ্ঠায় উপলব্ধ হবে৷

What is the DOCTYPE for?

কিন্তু কেন সব কিছু আছে? সমস্ত ব্রাউজারে আপনার নথি পড়ার দুটি ভিন্ন উপায় রয়েছে - স্ট্যান্ডার্ড মোড এবং কুইর্কস মোড। যদি আপনি তাদের না বলেন যে তারা কি ধরনের নথি পরিচালনা করছে, তাহলে quirks মোডে চলে যাবে। এটিকে আপনার দস্তাবেজ পড়ার পুরানো উপায় হিসাবে ভাবুন - কিছু ত্রুটি থাকতে পারে এবং আপনি নিশ্চিত হতে পারেন যে সমস্ত ব্রাউজার আপনার দস্তাবেজ একইভাবে পড়ে না। একটি ডকটাইপ ঘোষণা করা ব্রাউজারগুলিকে স্ট্যান্ডার্ড মোডে যেতে বাধ্য করে - আপনার নথি পড়ার "নতুন" উপায়৷ স্ট্যান্ডার্ড মোড ব্যবহার করে, বেশিরভাগ ব্রাউজার আপনার ডকুমেন্ট একইভাবে পড়বে এবং তারা আসলে বুঝতে পারবে আপনি কী লিখছেন।

HTML5 দস্তাবেজটিকে নিজের পক্ষে বোঝা সহজ করতে, আপনি দুটি বিভাগ-উপাদান <head> এবং <body> ব্যবহার করতে চান। এই বিভাগগুলি ব্যবহার করে আপনি স্পষ্টভাবে প্রকৃত বিষয়বস্তু (শরীর) থেকে আপনার পৃষ্ঠার (মাথা) সম্পর্কে তথ্য আলাদা করেন। এইগুলি ব্যবহার করে, আপনার ওয়েবপৃষ্ঠাটি দেখতে এইরকম হবে:

<!DOCTYPE html>
<head>
	<title>Your first HTML5 Document</title>
</head>
<body>
	<p>Okay, now we’re going somewhere!</p>
</body>

ইন্ডেন্টিং দিয়ে কি ঘটেছে, আপনি ভাবতে পারেন? আপনি ইন্ডেন্টিং ব্যবহার করতে চান কিনা তা আপনার নিজের পছন্দ কিন্তু এটি আপনার পৃষ্ঠার গঠনকে কল্পনা করে এবং এক নজরে দেখতে সহজ করে তোলে।

সর্বশেষ যে জিনিসটি আপনি যোগ করতে চান তা হল <html> উপাদান এবং এটি ডকটাইপ-ঘোষণার পরে স্থাপন করা হয়।

<!DOCTYPE html>
<html>
<head>
	<title>Your first HTML5 Document</title>
</head>
<body>
	<p>Okay, now we’re going somewhere!</p>
</body>
</html>

অভিনন্দন আপনি এইমাত্র আপনার প্রথম HTML5 ওয়েবপৃষ্ঠা তৈরি করেছেন! আপনি কি লক্ষ্য করেছেন কিভাবে <p> উপাদানটি <body> উপাদান? এটিকে নেস্টিং উপাদান বলা হয় এবং এটি এইচটিএমএল কাঠামোর একটি অত্যন্ত প্রয়োজনীয় অংশ। আমি আপাতত এটি ছেড়ে দেব, কিন্তু আমি শুধু আপনাকে নেস্টিং উপাদানগুলির ধারণাটি পরিচয় করিয়ে দিতে চেয়েছিলাম।

What you have learned

  • সর্বদা ডক্টাই ঘোষণা করুন - <!DOCTYPE html>
  • উপাদান <head> ব্যবহার করুন আপনার পৃষ্ঠা সম্পর্কে তথ্য আলাদা করতে
  • উপাদান <body> ব্যবহার করুন আপনার ওয়েবপৃষ্ঠার প্রকৃত বিষয়বস্তু আলাদা করতে
  • <html>, <head>, এবং <body> ব্যবহার করে আপনি যখন HTML5 ব্যবহার করেন তখন এটি একটি শৈলীর বিষয়, কিন্তু এটি আপনার কাছে পৃষ্ঠার গঠনকে আরও স্পষ্ট করে তোলে।
  • আপনার মার্কআপ ইন্ডেন্ট করা এটি বোঝা সহজ করে তোলে
  • আপনি একটি উপাদান অন্য উপাদানের ভিতরে নেস্ট করতে পারেন
This article has been fully translated into the following languages:
Is your preferred language not on the list? Click here to help us translate this article into your language!
adplus-dvertising