এই অতি সাধারণ ওয়েবসাইট তৈরি করে HTML শিখুন

আপনি কি একটি ওয়েবসাইট তৈরি করতে জানতে চান, কিন্তু HTML কোড ব্যবহার করতে জানেন না? সোর্স কোড উদাহরণ সহ HTML এ আপনার প্রথম মৌলিক ওয়েবসাইট তৈরি করতে এই টিউটোরিয়ালটি অনুসরণ করুন!

আমরা 3টি জিনিসের উপরে যাচ্ছি:

1. HTML কি
2. কিছু ​​মৌলিক HTML সিনট্যাক্স,
3. এবং কিভাবে আপনার কম্পিউটারে একটি স্থানীয় ওয়েবসাইট তৈরি করবেন।

শুধু একটি নোট, এই পোস্টটি সম্পূর্ণ নতুনদের জন্য তৈরি যারা আগে কখনো HTML এর সাথে কাজ করেননি।

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

HTML কি?

এখন, HTML কি? HTML মানে হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ।

এটি আপনার ব্রাউজারে ওয়েব পৃষ্ঠাগুলিতে তথ্য প্রদর্শনের একটি উপায়৷

একটি জিনিস মনে রাখবেন যে HTML নিজেই একটি প্রোগ্রামিং ভাষা নয়। এটি একটি মার্কআপ ভাষা। PHP বা Java এর মতো প্রোগ্রামিং ভাষাগুলি বিষয়বস্তু নিয়ন্ত্রণ করতে যুক্তি এবং শর্তের মতো জিনিসগুলি ব্যবহার করে৷

এইচটিএমএল সেই জিনিসগুলি করে না, তবে এটি এখনও অত্যন্ত গুরুত্বপূর্ণ। এটি বিদ্যমান প্রতিটি একক ওয়েবসাইট তৈরি করে, সর্বোপরি!

আপনার ব্রাউজারে একটি HTML ফাইল লোড হচ্ছে

আপনি আসলে আপনার কম্পিউটারে একটি HTML ফাইল তৈরি করতে পারেন এবং এটি আপনার ব্রাউজারে লোড করতে পারেন। এটি ইন্টারনেটে থাকবে না, তাই শুধুমাত্র আপনার স্থানীয় কম্পিউটার এটি দেখতে পারবে৷

ইন্টারনেটে যে কেউ অ্যাক্সেস করতে পারে এমন বাস্তব ওয়েবসাইটগুলির জন্য, HTML ফাইলগুলি সার্ভার নামক কম্পিউটারে সংরক্ষণ করা হয়। কিন্তু মৌলিক প্রক্রিয়া প্রায় একই রকম।

আপনার HTML ফাইল তৈরি করতে:

1. আপনার ডেস্কটপে যান বা যেখানে আপনি ফাইল রাখতে চান সেখানে যান।
2. তারপর রাইট ক্লিক করুন এবং "নতুন" এবং "টেক্সট ডকুমেন্ট" নির্বাচন করুন। নিশ্চিত করুন যে ফাইলের নাম "index.html" পড়ে এবং ".txt" দিয়ে শেষ না হয়৷
   (যদি কোনো কারণে আপনি ফাইল এক্সটেনশনটি দেখতে না পান, তাহলে "দেখুন" ট্যাবে ক্লিক করুন এবং নিশ্চিত করুন যে "ফাইল নেম এক্সটেনশন" চেকবক্সে টিক চিহ্ন দেওয়া আছে।)
3. যখন আপনার ফাইলটি সম্পূর্ণ সেট হয়ে যাবে, আপনি এটিকে আপনার ব্রাউজারে খুলতে চাইবেন।
4. যদি এটির বাম দিকে একটি Chrome বা অন্য ব্রাউজার আইকন থাকে, তার মানে আপনি এটি স্বয়ংক্রিয়ভাবে খুলতে ডাবল ক্লিক করতে পারেন৷ যদি এটি না হয়, রাইট-ক্লিক করুন এবং তারপরে "এর সাথে খুলুন" নির্বাচন করুন এবং আপনার প্রিয় ব্রাউজারটি চয়ন করুন৷
৷
5. ব্রাউজারে, সবকিছু ফাঁকা দেখাবে, যা ঠিক কারণ ফাইলটিতে এখনও কিছু নেই৷

ফাইল সম্পাদনা করা হচ্ছে

এখন আপনি আপনার ফাইল সেট আপ করেছেন, আপনি কোডিং শুরু করতে প্রস্তুত!

আপনার এইচটিএমএল ফাইল সম্পাদনা করতে আপনি এটি একটি কোড এডিটরে খুলতে চাইবেন। ফাইলটিতে রাইট ক্লিক করুন এবং হয় "ওপেন উইথ" এবং এডিটর নির্বাচন করুন, অথবা কিছু এডিটর মেনু থেকে একটি দ্রুত লিঙ্ক পাবেন।

আমি ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করছি, কিন্তু আপনি অন্যান্য প্রোগ্রাম ব্যবহার করতে পারেন যেমন:

• নোটপ্যাড++
• সাবলাইম
• পরমাণু
• বন্ধনী

এখন যেহেতু আপনার ব্রাউজার এবং আপনার সম্পাদক উভয়েই ইনডেক্স ফাইল খোলা আছে, আমরা কিছু কোড লেখা শুরু করব!

HTML ট্যাগ

আসুন HTML এর কিছু মৌলিক বৈশিষ্ট্য দেখি।

HTML ট্যাগ দিয়ে গঠিত।

ট্যাগগুলি হল বিশেষ পাঠ যা আপনি আপনার ওয়েব পৃষ্ঠার অংশগুলি চিহ্নিত করতে বা আলাদা করতে ব্যবহার করেন৷ তাই হাইপারটেক্সট "মার্কআপ" ভাষা।

এই ট্যাগগুলি ব্রাউজারকে ট্যাগের ভিতরে যা কিছু আছে তা নির্দিষ্ট উপায়ে প্রদর্শন করতে বলে৷

এখানে অ্যাকশনে ট্যাগের একটি উদাহরণ দেওয়া হল:

This is my very first website and I’m <b>extremely excited!!!!!</b>

আপনি দেখতে পাচ্ছেন যে "অত্যন্ত উত্তেজিত" শব্দগুলি এই <b>-এ আছে ট্যাগ- “b” বোল্ডের জন্য।

এখন ফাইলটি সংরক্ষণ করুন এবং আপনার ব্রাউজারটি পুনরায় লোড করুন। পাঠ্যটি এইরকম হওয়া উচিত:

ঠিক আছে! আপনি শুধু কিছু HTML লিখেছেন. এখনও উত্তেজিত বোধ? 🙂

একটি HTML ট্যাগের শারীরস্থান

আসুন ট্যাগটি আবার দেখি।

শব্দগুচ্ছের আগের ট্যাগটিকে ওপেনিং ট্যাগ — বলা হয় <b>

এবং বাক্যাংশের পরে ট্যাগ হল ক্লোজিং ট্যাগ —  </b> . আপনি দেখতে পাচ্ছেন যে ক্লোজিং ট্যাগে “b”

একসাথে, এই দুটি ট্যাগ ব্রাউজারকে তাদের মধ্যে যেকোন টেক্সট বোল্ড করতে বলে। এবং ঠিক তাই ঘটেছে।

এখন হয়তো এটা স্পষ্ট, কিন্তু ব্রাউজার যখন HTML লোড করে, তখন ট্যাগগুলো অদৃশ্য থাকে- সেগুলি পৃষ্ঠায় দেখা যায় না।

চমত্কার শান্ত, না? আমি ওয়েবসাইট তৈরি করতে খুব পছন্দ করি এমন একটি কারণ হল এটি প্রায় জাদুর মতো, জিনিসগুলিকে আপনার ব্রাউজারে দেখাতে সক্ষম হওয়া৷

একটি HTML নথির মৌলিক গঠন

এখন, আমরা যে পাঠ্যের লাইনটি লিখেছিলাম সেটি কাজ করছে কারণ আমরা ফাইলটিকে একটি HTML ফাইল হিসাবে সংরক্ষণ করেছি যা আপনার ব্রাউজার চিনতে পারে৷

কিন্তু ইন্টারনেটে প্রকৃত HTML-এর জন্য, সবকিছু সঠিকভাবে কাজ করার জন্য আমাদের ফাইলে আরও কিছু ট্যাগ যোগ করতে হবে।

ডকটাইপ এবং এইচটিএমএল ট্যাগ

আপনার প্রয়োজন প্রথম ট্যাগটি ডকটাইপ ট্যাগ। এটি ঠিক একটি HTML ট্যাগ নয়, তবে এটি ব্রাউজারকে বলে যে এটি একটি HTML5 নথি৷

এটি দেখতে কেমন: <!DOCTYPE html>

এই ট্যাগের কোনো ক্লোজিং ট্যাগের প্রয়োজন নেই কারণ এটি কোনো পাঠ্যকে ঘিরে নয়, এটি শুধু ঘোষণা করছে যে এটি HTML।

অতীতে ব্যবহৃত অন্যান্য ডকটাইপগুলি হল HTML 4 বা XHTML৷ কিন্তু এই মুহূর্তে HTML 5 সত্যিই একমাত্র ডকটাইপ ব্যবহার করা হয়৷

doctype পরে, আপনি একটি HTML ট্যাগ আছে. এটি ওয়েব ব্রাউজারকে বলে যে এটির ভিতরের সবকিছুই HTML:

<!DOCTYPE html>
<html>
 
</html>

আমি জানি, আপনি ইতিমধ্যে HTML ডকটাইপ ট্যাগ ব্যবহার করেছেন বলে এটি কিছুটা অপ্রয়োজনীয় বলে মনে হচ্ছে। কিন্তু এই ট্যাগটি নিশ্চিত করে যে এর ভিতরে থাকা সমস্ত কিছু HTML এর কিছু প্রয়োজনীয় বৈশিষ্ট্য উত্তরাধিকারী হবে।

মাথা এবং শরীরের অংশগুলি

প্রধান HTML ট্যাগের ভিতরে, আপনার বিষয়বস্তু সাধারণত দুটি বিভাগে বিভক্ত হবে:হেড এবং বডি।

কোডে এটি দেখতে কেমন হবে তা এখানে:

<!DOCTYPE html>
<html>
   <head>

   </head>
   <body>

   </body>
</html>

হেড ট্যাগে ওয়েবসাইট সম্পর্কে তথ্য রয়েছে এবং এটি যেখানে আপনি CSS এবং JavaScript ফাইলগুলি লোড করেন। আমরা আজ সেগুলি কভার করব না, তবে আপনি জানেন।

বডি ট্যাগ ওয়েব পৃষ্ঠার প্রধান বিষয়বস্তু। আপনি পৃষ্ঠায় যা দেখছেন তা সাধারণত বডি ট্যাগে থাকবে। তাই আমাদের সেই বাক্যটিকে বডিতে স্থানান্তর করতে হবে যা আমরা শুরুতে তৈরি করেছি।

এটি দেখতে কেমন হওয়া উচিত তা এখানে:

<body>
   This is my very first website and I'm <b>extremely excited!!!!!!</b>
</body>

আপনি যখন আপনার ব্রাউজারে পৃষ্ঠাটি পুনরায় লোড করেন, সবকিছু ঠিক আগের মতো দেখতে হবে৷

এখন আসা যাক কিছু মৌলিক ট্যাগ যা সাধারণত মাথায় এবং শরীরে ব্যবহৃত হয়।

আমি অস্তিত্বের প্রতিটি সম্ভাব্য ট্যাগের মধ্য দিয়ে যাচ্ছি না, কারণ সেখানে একশোরও বেশি। এবং এটি চিরকালের জন্য লাগবে।

আমরা শুধু সেগুলিই দেখব যা প্রায়শই ব্যবহৃত হয়, যাতে আপনি একটি HTML পৃষ্ঠা কীভাবে একত্রিত করা হয় সে সম্পর্কে আরও ভাল ধারণা পেতে পারেন৷

বেসিক হেড ট্যাগ

মেটা ট্যাগ

প্রথম ট্যাগ যা আপনার মাথায় থাকা উচিত এই মেটা ট্যাগ। এটি অক্ষর এনকোডিং সেট করে।

<meta charset="utf-8">

UTF-8 হল এক ধরনের ইউনিকোড এনকোডিং যা সারা বিশ্বের কার্যত সমস্ত ওয়েবসাইটে ব্যবহৃত হয়। আমাদের এনকোডিং দরকার কারণ আমরা কম্পিউটার দ্বারা ব্যবহৃত বাইটে ব্যবহার করি এমন অক্ষর, সংখ্যা এবং চিহ্নগুলিকে অনুবাদ করতে হবে৷

আপনি এটিকে এক ধরণের অভিধান হিসেবে ভাবতে পারেন, মানুষের ভাষাকে কম্পিউটার-স্পিকে অনুবাদ করে৷

পরবর্তী মেটা ট্যাগ যা সমস্ত ওয়েবসাইটে থাকা উচিত এই ভিউপোর্ট ট্যাগ:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

এই ট্যাগের বিষয়বস্তু বলছে যে এটি ওয়েবসাইটটির প্রস্থকে একই প্রস্থ করা উচিত যে ডিভাইসটি এটি দেখছে।

উদাহরণস্বরূপ, একটি মোবাইল ফোনের একটি ল্যাপটপ কম্পিউটারের মতো অনেক ছোট স্ক্রীন রেজোলিউশন বা আকার রয়েছে। এটি ব্যবহারকারী যা ব্যবহার করছে সেই অনুসারে ওয়েবসাইটটিকে নিজের আকার পরিবর্তন করতে দেবে৷

প্রাথমিক স্কেল ওয়েবসাইটের জুম সেট করে। আজকাল ব্রাউজারে আপনি জুম ইন এবং আউট করতে পারেন, ওয়েবসাইটটিকে বড় বা ছোট দেখায়। আমরা এটিকে ডিফল্টরূপে 1 এ সেট করতে চাই, যার অর্থ জুম ইন বা আউট করা নয়।

শিরোনাম ট্যাগ

মেটা ট্যাগ ছাড়াও, সবচেয়ে গুরুত্বপূর্ণ ট্যাগগুলির মধ্যে একটি হল শিরোনাম ট্যাগ:

<title>My First Website</title>

আপনি সম্ভবত অনুমান করতে পারেন, এটি ওয়েব পৃষ্ঠার শিরোনাম সেট করে। যদি একটি ওয়েবসাইটের বিভিন্ন পৃষ্ঠা থাকে, প্রতিটি পৃষ্ঠার নিজস্ব শিরোনাম থাকতে পারে৷

একবার আপনি আপনার কোডে এই সমস্ত ট্যাগ যোগ করলে, হেড ট্যাগটি দেখতে এইরকম হবে:

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>My First Website</title>
</head>

এবং আপনি আপনার ব্রাউজারে দেখতে পাবেন যে ট্যাবে আপনি যা টাইটেল ট্যাগে রেখেছেন তা থাকবে:

বেসিক বডি ট্যাগ

আসুন এখন মজার জিনিসগুলি দেখি- বডি ট্যাগগুলি সেই সামগ্রীগুলিকে নিয়ন্ত্রণ করে যা আপনি আসলে দেখতে পান৷

বেশিরভাগ মৌলিক বডি ট্যাগগুলি আপনি Word নথিতে যা করতে পারেন তার উপর ভিত্তি করে। আপনি শিরোনাম, বোল্ড টেক্সট, তালিকা তৈরি করতে এবং এমনকি টেবিল তৈরি করতে পারেন।

CSS এর আগের দিনগুলিতে, এই ট্যাগগুলি ব্যবহার করে আপনার বিষয়বস্তুকে সংগঠিত এবং স্টাইলাইজ করতে সাহায্য করেছিল যাতে এটি আপনার পাঠক আরও সহজে বুঝতে পারে।

এই ট্যাগগুলির সবগুলি এখনও আগের মতো ব্যবহৃত হয় না। তাদের কিছুর আর প্রয়োজন নেই কারণ আমরা এখন একই স্টাইল অর্জন করতে CSS ব্যবহার করতে পারি।

কিন্তু আমি মনে করি এই মৌলিক ট্যাগগুলি কী তা জানার জন্য এটি এখনও সহায়ক৷

হেডার ট্যাগ

আসুন প্রথমে হেডলাইন বা হেডার ট্যাগগুলি দেখি, H অক্ষর দিয়ে মনোনীত। প্রতিটি H ট্যাগেরও H এর পরে একটি সংখ্যা থাকে। সেগুলি <h1> <h6> এ .

<h1> ট্যাগ অগ্রাধিকার সর্বোচ্চ. এটি সাধারণত পৃষ্ঠার শিরোনামের জন্য ব্যবহৃত হয়।

আমরা একটি  <h1> যোগ করতে যাচ্ছি আমাদের ওয়েব পেজে ট্যাগ করুন। ট্যাগের ভিতরে আমরা ওয়েবপৃষ্ঠার শিরোনাম রাখব, আমার প্রথম ওয়েবসাইট।

এছাড়াও আমরা  <h2> ব্যবহার করে একটি সাবটাইটেল যোগ করব ট্যাগ, বিষয়বস্তু সহ:"একটি HTML খেলার মাঠ।"

এবং শুধু কিক করার জন্য, চলুন বাকি H ট্যাগ যোগ করি, <h6> পর্যন্ত .

তাই আপনার বডি ট্যাগ দেখতে এরকম কিছু দেখাবে:

<body>
   <h1>My First Website</h1>
   <h2>An HTML Playground</h2>
   <h3>An HTML Playground</h3>
   <h4>An HTML Playground</h4>
   <h5>An HTML Playground</h5>
   <h6>An HTML Playground</h6>
</body>

আপনি যদি আপনার ওয়েব পৃষ্ঠাটি সংরক্ষণ করেন এবং পুনরায় লোড করেন তবে এটি দেখতে এইরকম হবে:

আপনি <h1> থেকে দেখতে পাচ্ছেন কিভাবে ফন্টের আকার ক্রমশ ছোট হচ্ছে <h6> এ .

বেশিরভাগ ওয়েবসাইট সব H ট্যাগ ব্যবহার করে না। সাধারণত তারা  <h1> ব্যবহার করবে শিরোনামের জন্য,  <h2> সাবটাইটেলের জন্য, এবং  <h3> কখনও কখনও বিভাগের শিরোনামের জন্য। <h4> ব্যবহার করা খুবই বিরল <h6> এর মাধ্যমে .

অনুচ্ছেদ

পরবর্তী ট্যাগটি আমরা অনুচ্ছেদ বা <p> দেখব ট্যাগ ওয়ার্ডের মতই, আপনি আপনার বিষয়বস্তুকে ব্লকে আলাদা করতে অনুচ্ছেদ ব্যবহার করতে পারেন। আপনি <p> দিয়ে আপনার কন্টেন্ট ঘিরে একটি অনুচ্ছেদ তৈরি করতে পারেন ট্যাগ।

আমরা কিছু স্থানধারক পাঠ্য সহ একটি অনুচ্ছেদ তৈরি করতে যাচ্ছি।

প্লেসহোল্ডার টেক্সট খোঁজার সবচেয়ে সহজ উপায় হল “lorem ipsum-এর জন্য Google-এ . এটি এমন একটি সাইট যা আমি প্রায়শই ব্যবহার করি।

লোরেম ইপসাম টেক্সট হল ফালতু ল্যাটিন শব্দ যা লেআউটে কাজ করার জন্য টেক্সট পূরণ করতে প্রকাশনা এবং ডিজাইনে ব্যবহৃত হয়।

তাই আমরা এখানে এই অনুচ্ছেদটি অনুলিপি করব এবং এটিকে একটি <p>-এর মধ্যে আমাদের কোডে রাখব ট্যাগ দ্বিতীয় অনুচ্ছেদও করা যাক। আমরা আরও কিছু পাঠ্য অনুলিপি করব এবং এটিকে সেকেন্ড <p>-এ রাখব ট্যাগ।

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Nullam facilisis arcu vel mollis finibus. Nunc facilisis 
   vel nisl lacinia cursus. Cras suscipit augue sed volutpat 
   tincidunt. Aenean dictum tincidunt urna, quis eleifend 
   quam mattis eu. Integer sollicitudin, nisl faucibus aliquam 
   ullamcorper, metus sapien scelerisque lorem, at ornare dui 
   orci non orci. Integer tempus consectetur metus, vitae 
   blandit nibh aliquam nec. Pellentesque vestibulum arcu eget 
   ante sollicitudin, id accumsan dui molestie. Suspendisse 
   vehicula semper dui id congue. Suspendisse sed velit sit 
   amet velit luctus varius. Ut condimentum tincidunt consequat. 
   Sed eu ligula non magna scelerisque auctor.
</p>

<p>
   Maecenas feugiat iaculis imperdiet. Duis vitae pellentesque 
   nunc, eget elementum metus. Nulla sollicitudin bibendum nibh, 
   sit amet semper tortor. Nunc rhoncus non arcu in scelerisque. 
   Donec magna mauris, congue ac dignissim rutrum, tincidunt 
   quis leo. Maecenas dictum orci in magna iaculis, in elementum 
   felis viverra. Aenean sit amet sapien odio. Donec molestie 
   est et nisl mattis dictum. Nullam at nibh aliquet, tincidunt 
   lorem et, facilisis enim. Praesent id felis sit amet quam 
   dignissim volutpat. Nam nec cursus mi, quis tincidunt justo.
</p>

ব্রাউজারে, এটি এরকম দেখাবে:

এবং সেখানে আমরা এটা আছে। ব্রাউজার স্বয়ংক্রিয়ভাবে অনুচ্ছেদ এবং অন্যান্য বিষয়বস্তুর মধ্যে কিছু স্থান যোগ করে:

লাইন ব্রেক

এখন, আপনি যদি আপনার বিষয়বস্তুকে একাধিক লাইনে আলাদা করতে চান, কিন্তু একটি অনুচ্ছেদের সাথে আসে এমন জায়গাটি আপনি চান না, আপনি একটি লাইন বিরতি বা <br> ব্যবহার করতে পারেন। ট্যাগ।

আসুন আরো কিছু lorem ipsum পাই টেক্সট করুন এবং আমাদের এডিটরে রাখুন।

এখন এইচটিএমএল সম্পর্কে একটি জিনিস লক্ষ্য করুন যে এটি স্বয়ংক্রিয়ভাবে লাইনগুলি ভাঙবে না।

আপনি যদি আপনার বিষয়বস্তুতে কয়েকবার এন্টার চাপেন, তাহলে পৃষ্ঠায় ভিন্ন কিছু ঘটবে না। স্পেসবারে একগুচ্ছ আঘাত করার ক্ষেত্রেও একই কথা।

ব্রাউজারটি কেবল একটি স্থান দেবে এবং এটিই। একটি লাইন বিরতি তৈরি করতে, আপনাকে একটি <br> যোগ করতে হবে ট্যাগ।

এমনকি আপনার সামগ্রীতে আরও স্থান যোগ করতে আপনি একাধিক লাইন বিরতি যোগ করতে পারেন৷

Fusce sit amet rutrum lacus.<br><br><br><br><br/>
Sed efficitur laoreet nisl,ac faucibus velit hendrerit sit amet. 
Phasellus ac orci eget nisi porta accumsan a eget ex. Nam lacinia 
dolor at mi tristique rhoncus.Maecenas nisl est, rhoncus id cursus 
non, tempor a neque.

অকার্যকর উপাদানগুলির একটি ক্লোজিং ট্যাগের প্রয়োজন নেই

আপনি লক্ষ্য করবেন যে সেখানে একটি বন্ধ <br> নেই ট্যাগ — এটির ক্লোজিং ট্যাগের প্রয়োজন নেই কারণ এটি পাঠ্যকে ঘিরে ব্যবহার করা হয় না।

এই ধরনের ট্যাগ যেগুলির ক্লোজিং ট্যাগ নেই তাদেরকে ভয়েড এলিমেন্ট বলে। অকার্যকর অর্থ খালি কারণ তাদের কোন বিষয়বস্তু নেই।

এই সম্পর্কে আরেকটি নোট হল যে আপনি মাঝে মাঝে লাইন ব্রেকটি <br/> হিসাবে লেখা দেখতে পারেন সমাপ্তি স্ল্যাশ সঙ্গে. এটি XHTML-এর জন্য একটি প্রয়োজনীয়তা ছিল, কিন্তু HTML 5-এ এটির জন্য স্ল্যাশের প্রয়োজন নেই৷

ব্রাউজার এখনও ট্যাগটি সঠিকভাবে পড়বে, তবে আমি এখনও সেই স্ল্যাশ ছাড়াই অকার্যকর উপাদানগুলি লেখার সুপারিশ করব৷

স্টাইল ট্যাগ

ট্যাগগুলির পরবর্তী সেটগুলি হল স্টাইল ট্যাগ- এই ট্যাগগুলি পাঠ্যে শৈলী যুক্ত করে৷

এগুলি সাহসী হতে পারে, যেমন আমরা শুরুতে করেছি, তারপরে তির্যক, আন্ডারলাইন, জোর দেওয়া এবং শক্তিশালী ট্যাগগুলিও রয়েছে৷

যেমনটি আমরা আগে বলেছি, এই স্টাইল ট্যাগগুলি তেমন ব্যবহার করা হয় না কারণ আপনি এখন সবকিছু স্টাইল করতে CSS ব্যবহার করতে পারেন।

চলুন প্রতিটি স্টাইল ট্যাগের মধ্য দিয়ে যাওয়া যাক:

• <b> ট্যাগ পাঠ্যকে বোল্ড করে .
• <i> ট্যাগ পাঠ্যকে ইতালিক করে .
• <u> ট্যাগ পাঠ্যকে আন্ডারলাইন করে।
• <em> (জোর দেওয়া) ট্যাগ সাধারণত ইটালিকস হিসাবে ব্যাখ্যা করা হয় ব্রাউজারে।
• এবং <strong> ট্যাগ সাধারণত বোল্ড হবে পাঠ্য।

সেগুলির প্রত্যেকটি কেমন হবে তার জন্য এখানে ডেমো কোড রয়েছে:

<b>Sed efficitur laoreet nisl,</b><br> 
 <i>ac faucibus velit hendrerit sit amet.</i><br> 
 <u>Phasellus ac orci eget nisi porta accumsan a eget ex.</u><br>
 <em>Nam lacinia dolor at mi tristique rhoncus.</em><br>
 <strong>Maecenas nisl est, rhoncus id cursus non, tempor a neque.</strong>

এবং ব্রাউজারে সেই কোডটি দেখতে কেমন হবে তা এখানে:

অনুভূমিক নিয়ম

অনুভূমিক নিয়ম ট্যাগটি আপনার ওয়েব পৃষ্ঠায় একটি অনুভূমিক রেখা তৈরি করবে যা পুরো পথ জুড়ে যায়৷

আপনি এটি এভাবে লিখুন:<hr>

লাইন ব্রেক ট্যাগের মতো, অনুভূমিক নিয়ম একটি অকার্যকর উপাদান, এবং শুধুমাত্র একটি একক ট্যাগ প্রয়োজন, একটি বন্ধ ট্যাগ ছাড়া।

...
<strong>Maecenas nisl est, rhoncus id cursus non, tempor a neque.</strong>
<hr>
Phasellus venenatis dapibus laoreet. Sed in lacus a augue rutrum ultricies. 
Donec eget lacinia elit. Suspendisse commodo justo at lorem molestie, vitae 
tempus enim laoreet.
...

<hr>-এর আগে কন্টেন্ট ট্যাগ লাইনের উপরে থাকবে এবং এর নিচের বিষয়বস্তু লাইনের নিচে থাকবে এভাবে:

অ্যাঙ্কর লিঙ্ক

লিঙ্কগুলি হল একটি প্রধান উপায় যা আমরা ইন্টারনেটের চারপাশে পেতে পারি৷

লিঙ্ক ট্যাগটি একটি <a> হিসেবে লেখা হয় ট্যাগ যে A এর অর্থ হল "অ্যাঙ্কর" কারণ লিঙ্কটি দুটি ওয়েবসাইটকে সংযুক্ত করে যেমন একটি বোট অ্যাঙ্কর বোটকে যা কিছুতে নোঙর করছে তার সাথে সংযুক্ত করে।

একটি লিঙ্ক তৈরি করতে, প্রথমে আপনি <a> বসান আপনি ক্লিকযোগ্য হতে চান যে লিঙ্ক টেক্সট কাছাকাছি ট্যাগ.

শুধু ট্যাগ ছাড়াও, <a> ট্যাগের জন্য একটি অ্যাট্রিবিউট প্রয়োজন, যার অর্থ খোলার ট্যাগের ভিতরে অতিরিক্ত তথ্য।

গুণাবলী

এটি যে বৈশিষ্ট্যটি ব্যবহার করে তা হল href বৈশিষ্ট্য এটি হাইপারটেক্সট রেফারেন্স-এর জন্য সংক্ষিপ্ত . এবং মান হল গন্তব্য ওয়েবসাইটের URL৷

উদাহরণস্বরূপ, আপনি যদি Google হোমপেজে লিঙ্ক করতে চান, আপনি URL ব্যবহার করবেন, https://www.google.com/.

URL মানে ইউনিভার্সাল রিসোর্স লোকেটার , এবং এটি একটি ঠিকানা হিসাবে কাজ করে যা আপনাকে ওয়েব পৃষ্ঠা বা ফাইলের অবস্থান দেবে যা আপনি লোড করতে চান৷

<a>-এ আরেকটি প্রায়শই ব্যবহৃত অ্যাট্রিবিউট ট্যাগ হল "লক্ষ্য।" আপনি যে লিঙ্কটি ক্লিক করেন সেটি একই পৃষ্ঠায় খুলবে বা আপনার ব্রাউজারে একটি নতুন পৃষ্ঠা বা ট্যাবে খুলবে কিনা এটি নিয়ন্ত্রণ করে৷

ডিফল্টরূপে এটি একই পৃষ্ঠায় লিঙ্কটি খুলবে। আপনি যদি লিঙ্কটি একটি নতুন পৃষ্ঠায় খুলতে চান তবে লক্ষ্য সেট করুন “_blank”

এখানে একটি অ্যাঙ্কর লিঙ্কের একটি ডেমো রয়েছে:

<a href="https://www.google.com/" target="_blank">Sed in lacus a augue rutrum</a>

ছবি

পরবর্তী জিনিসটি আমরা দেখব তা হল ছবি। আপনার ওয়েব পৃষ্ঠায় একটি ছবি রাখতে, আপনি ছবি ট্যাগ ব্যবহার করতে পারেন, <img> হিসাবে লেখা .

ইমেজ ট্যাগ হল আরেকটি অকার্যকর উপাদান যার জন্য ক্লোজিং ট্যাগের প্রয়োজন হয় না।

লিঙ্ক ট্যাগের মতো, ইমেজ ট্যাগেরও একটি URL প্রয়োজন। href লাইক লিঙ্ক ব্যবহার করার পরিবর্তে, ইমেজ ট্যাগে src এর একটি বৈশিষ্ট্য রয়েছে , মানে ছবির উৎস।

এই উদাহরণের জন্য ব্যবহার করার জন্য ইন্টারনেটে একটি ছবি খুঁজে বের করা যাক- একটি সত্যিই সহায়ক জায়গা যেখানে আমি পরীক্ষার জন্য গিয়েছি তা হল https://placeholder.com/।

আমরা Placeholder.com থেকে একটি ছবির URL নেব এবং আমরা যে ছবিটি তৈরি করছি সেটির ছবির উৎসে রাখব:

<img src="https://via.placeholder.com/600x300.jpg">

বিকল্পভাবে আপনি নিজেই ছবিটি ডাউনলোড করতে পারেন এবং আপনার index.html ফাইলের মতো একই ফোল্ডারে রাখতে পারেন এবং এটিকে এইভাবে উল্লেখ করতে পারেন:

<img src="600x300.jpg">

একটি বৈশিষ্ট্য যা <img> ট্যাগের ব্যবহার হল বর্ডার , যা আপনি বেশ কয়েকটি পিক্সেলে সেট করতে পারেন:

<img src="https://via.placeholder.com/600x300.jpg" border="10">

এটি দেখতে এইরকম হবে:

তালিকা

পরবর্তী জিনিস যা আমরা দেখতে যাচ্ছি তা হল তালিকা। এইচটিএমএল খুব সহজেই বুলেটেড বা সংখ্যাযুক্ত তালিকা তৈরি করতে পারে।

বুলেটেড তালিকাকে বলা হয় অক্রমবিহীন তালিকা, অর্ডার করা এর বিপরীতে তালিকা যা সংখ্যা ব্যবহার করে।

একটি তালিকা তৈরি করতে আপনি তালিকা ট্যাগটি ব্যবহার করবেন- হয় <ol> অথবা <ul> আপনি একটি অর্ডার করা বা ক্রমবিহীন তালিকা তৈরি করছেন কিনা তা নির্ভর করে।

আমরা বিভিন্ন ধরনের ফলের একটি ক্রমবিহীন তালিকা তৈরি করতে যাচ্ছি।

আমরা আমাদের <ul> তৈরি করব তালিকার জন্য ট্যাগ করুন।

তালিকা ট্যাগের ভিতরে আপনি আপনার তালিকার আইটেমগুলি রাখবেন। প্রতিটি আইটেম তার নিজস্ব তালিকা আইটেম ট্যাগের ভিতরে যাবে, <li> হিসাবে লেখা .

আমরা আপেল, কমলা, আনারস, আম এবং ড্রাগনফ্রুট যোগ করব:

<ul>
   <li>apples</li>
   <li>oranges</li>
   <li>pineapples</li>
   <li>mangoes</li>
   <li>dragonfruit</li>
</ul>

এবং এটি দেখতে কেমন তা এখানে।

এখন, যদি আমরা <ol> ব্যবহার করে আমাদের তালিকাকে একটি অর্ডারকৃত তালিকায় পরিবর্তন করি ট্যাগ, এটি দেখতে কেমন হবে তা এখানে।

নেস্টেড তালিকা

এমনকি আপনি একে অপরের মধ্যে নেস্ট তালিকা করতে পারেন। ধরা যাক আমি আপেলের নিচে বিভিন্ন ধরনের আপেল যোগ করতে চাই। আমরা প্রশ্নে থাকা তালিকা আইটেমের ভিতরে একটি নতুন তালিকা ট্যাগ তৈরি করব, তার নিজস্ব তালিকা আইটেম সহ।

তাই আপেল <li> এর মধ্যে ট্যাগ, আমি একটি নতুন <ul> যোগ করব "আপেল" পাঠ্যের নীচে ট্যাগ করুন৷

তারপরে আমরা কিছু ভিন্ন ধরনের আপেল রাখব- সোনালি সুস্বাদু, গালা, গ্র্যানি স্মিথ।

<ul>
   <li>apples
      <ul>
         <li>golden delicious</li>
         <li>granny smith</li>
         <li>gala</li>
      </ul>
   </li>
   <li>oranges</li>
   <li>pineapples</li>
   <li>mangoes</li>
   <li>dragonfruit</li>
</ul>

যখন আমরা আমাদের পৃষ্ঠাটি পুনরায় লোড করি, তখন আপনি দেখতে পাবেন যে আপেল প্রকারের নেস্টেড তালিকাটি মূল তালিকার চেয়েও বেশি ইন্ডেন্ট করা হয়েছে৷

নেস্টিং এবং ইন্ডেন্টেশন

এটি আমাকে ভাল HTML লেখার একটি গুরুত্বপূর্ণ দিক নিয়ে আসে। আপনি যদি অন্য একটির ভিতরে একটি HTML ট্যাগ রাখেন, তাকে নেস্টিং বলে।

শিশু এবং পিতামাতার উপাদান

আরেকটির ভিতরের একটি উপাদানকে শিশু উপাদান বলা হয় , এবং বাইরের উপাদানটিকে অভিভাবক উপাদান বলা হয় .

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

আপনি ফলের তালিকার সাথে দেখতে পারেন, আমি প্রধান তালিকার আইটেমগুলি (আপেল, কমলা এবং আম) ইন্ডেন্ট করেছি। এবং তারপরে আপেল প্রকারের জন্য আমি আরও বেশি ইন্ডেন্ট করেছি।

ইন্ডেন্টিং কোডকে মানুষের জন্য পাঠযোগ্য করে তোলে

এটি কোড পরিষ্কার রাখতে সাহায্য করে। আপনি এবং অন্যান্য লোকেরা দ্রুত বুঝতে পারবেন এটি কী করছে৷

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

ইন্ডেন্টিংয়ের এই অনুশীলনটি শুধুমাত্র HTML এর জন্য নয়, CSS, JavaScript এবং মূলত বিদ্যমান প্রোগ্রামিং ভাষার জন্যও ভাল অনুশীলন বলে বিবেচিত হয়।

এটি কম্পিউটারের জন্য প্রয়োজনীয় নয়, তবে মানুষের জন্য কোডটি পড়ার জন্য এটি প্রয়োজনীয়। আমার প্রথম চাকরিতে, ইন্ডেন্টিং ছিল প্রথম জিনিস যা আমাকে প্রশিক্ষণের সময় শেখানো হয়েছিল।

এটা বেশ গুরুত্বপূর্ণ। অন্য কারও কোডে কাজ করা এবং এটি সম্পূর্ণ বিশৃঙ্খলা হওয়ার চেয়ে খারাপ আর কিছুই নেই। তাই ইন্ডেন্ট করা হল একটি সহজ উপায় তা নিশ্চিত করার জন্য যে আপনি কোড লিখছেন যা অন্য লোকেরা (এবং নিজে) ফিরে যেতে পারে এবং পড়তে পারে।

সারণী

এবং ইন্ডেন্টিং এবং নেস্টেড এলিমেন্টের কথা বলতে গেলে, শেষ HTML ট্যাগটি যেটির মাধ্যমে আমরা যেতে যাচ্ছি সেটি অনেকটাই ব্যবহার করে। এটা টেবিল।

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

টেবিল তৈরি করা

শুরু করার জন্য, আমাদের প্রথমে একটি <table> প্রয়োজন ট্যাগ টেবিলের অন্য সব কিছুই এই ট্যাগের ভিতরে থাকবে।

টেবিলের ভিতরে আমাদের টেবিলের সারি, টেবিল সেল এবং কলাম হেডারের জন্য টেবিল হেডার থাকবে।

তারপর আমরা <tr> ব্যবহার করে প্রথম টেবিলের সারিতে যোগ করব ট্যাগ।

<table>
   <tr></tr>
</table>

এই সারির ভিতরে আমরা কলাম হেডার রাখতে চাই। আমরা <th> ব্যবহার করে এটি করতে পারি — টেবিল হেডার — ট্যাগ. ডিফল্টরূপে টেবিলের শিরোনামগুলি বোল্ড টেক্সট এবং সেলের মধ্যে কেন্দ্রীভূত হয়৷

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

<table>
   <tr>
      <th>Month</th>
      <th>Rent</th>
      <th>Utilities</th>
      <th>Groceries</th>
      <th>Eating Out</th>
      <th>Entertainment</th>
   </tr>
</table>

তারপর পরবর্তী সারিতে, আমরা আগস্ট মাসের জন্য কিছু ডেটা যোগ করব। যেহেতু এগুলো হেডার নয়, তাই আমরা <td> ব্যবহার করব ট্যাগ, টেবিল ডেটার জন্য।

ঠিক আছে. ধরা যাক প্রতি মাসে আমাদের ভাড়া কত, $1500? তারপর আমরা ইউটিলিটির জন্য $150, মুদির জন্য $350, বাইরে খাওয়ার জন্য $100 এবং বিনোদনের জন্য $50 পেয়েছি।

<table>
   <tr>
      <th>Month</th>
      <th>Rent</th>
      <th>Utilities</th>
      <th>Groceries</th>
      <th>Eating Out</th>
      <th>Entertainment</th>
   </tr>
   <tr>
      <td>August</td>
      <td>$1500</td>
      <td>$150</td>
      <td>$350</td>
      <td>$100</td>
      <td>$50</td>
   </tr>
</table>

দেখা যাক এটা কেমন লাগে। এবং এখানে আমাদের টেবিল:

টেবিল স্টাইল করা

এটা দেখতে বেশ মৌলিক, তাই না? আমরা কিছু বিল্ট-ইন টেবিল অ্যাট্রিবিউট দিয়ে টেবিলটিকে একটু স্টাইল করতে পারি।

প্রথমে আমরা সীমানা সেট করে টেবিলে লাইন যোগ করতে পারি টেবিল ট্যাগের বৈশিষ্ট্য। আমরা সীমানাটি 1 পিক্সেল পুরুত্বে সেট করব। আপনি যদি একটি বড় সংখ্যা ব্যবহার করেন, তাহলে টেবিলের চারপাশে সীমানা আরও প্রশস্ত হবে। তবে টেবিল ঘরের মধ্যে সীমানা ডিফল্টভাবে সর্বদা 1 পিক্সেল চওড়া।

আপনি সেলপ্যাডিংও ব্যবহার করতে পারেন৷ , যা পাঠ্য থেকে সীমানা পর্যন্ত প্রতিটি কক্ষের ভিতরে অতিরিক্ত স্থানের পরিমাণ নিয়ন্ত্রণ করে। তাহলে আসুন 10 এর একটি সেলপ্যাডিং চেষ্টা করি। এবং এটি একটু বেশি শ্বাস নেওয়ার জায়গা দেয় যাতে এটিকে সঙ্কুচিত বলে মনে হয় না।

অন্য বৈশিষ্ট্যটি আপনি পরিবর্তন করতে পারেন তা হল সেলস্পেসিং . এটি কোষের মধ্যে স্থানের পরিমাণ নিয়ন্ত্রণ করে। ব্যক্তিগতভাবে আমি সেলগুলির মধ্যে কোনও স্থান পছন্দ করি না তাই আমরা এটিকে 0 এ রাখব।

<table border="1" cellpadding="10" cellspacing="0">

এই স্টাইল বৈশিষ্ট্যগুলির সাথে টেবিলটি দেখতে কেমন তা এখানে রয়েছে:

টেবিলের জন্য সর্বোত্তম অনুশীলন

আপনি যখন একটি এইচটিএমএল টেবিল তৈরি করছেন, তখন আপনাকে একটি জিনিস নিশ্চিত করতে হবে তা হল একটি টেবিলের প্রতিটি সারিতে একই সংখ্যক কলাম থাকা।

অন্যথায় জিনিসগুলি কিছুটা এলোমেলো হয়ে যাবে। আমি যদি মুদিখানার সেলটি মুছে ফেলি তাহলে এটি দেখতে কেমন হবে তা আমি আপনাকে দেখাতে পারি৷

<table border="1" cellpadding="10" cellspacing="0">
   <tr>
      <th></th>
      <th>Month</th>
      <th>Rent</th>
      <th>Utilities</th>
      <!-- Groceries removed-->
      <th>Eating Out</th>
      <th>Entertainment</th>
   </tr>
   <tr>
      <td>August</td>
      <td>$1500</td>
      <td>$150</td>
      <td>$350</td>
      <td>$100</td>
      <td>$50</td>
   </tr>
</table>

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

টেবিল ঘর একাধিক কলাম/সারি বিস্তৃত করতে পারে

যাইহোক, আপনি একটি টেবিল সেল স্প্যান একাধিক কলাম করতে পারেন. ধরা যাক আমরা ইউটিলিটিগুলিকে দুটি ধরণের ডেটা রাখতে চেয়েছিলাম, একটি জলের জন্য এবং একটি বিদ্যুতের জন্য। তাই আমরা বলব বিদ্যুৎ $100 এবং পানি $50।

এটি করার জন্য আমরা আসলে ডেটাতে একটি অতিরিক্ত সেল তৈরি করব এবং ইউটিলিটির পরিমাণ সামঞ্জস্য করব। আমরা বিদ্যুত প্রথম $100 এবং জল দ্বিতীয় $50.

<table border="1" cellpadding="10" cellspacing="0">
   <tr>
      <th>Month</th>
      <th>Rent</th>
      <th>Utilities</th>
      <th>Groceries</th>
      <th>Eating Out</th>
      <th>Entertainment</th>
   </tr>
   <tr>
      <td>August</td>
      <td>$1500</td>
      <td>$100</td><!-- $150 changed to $100-->
      <td>$50</td><!-- extra cell added for $50 -->
      <td>$350</td>
      <td>$100</td>
      <td>$50</td>
   </tr>
</table>

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

Colspan বৈশিষ্ট্য

আমরা চাই ইউটিলিটি হেডার সেল $100 এবং $50 সেল উভয়ের উপরে হোক।

এটি করার জন্য, আমরা colspan নামে একটি বৈশিষ্ট্য যোগ করব , যেমন কলাম স্প্যান, ইউটিলিটি হেডার সেল পর্যন্ত। এবং এটি 2 এ সেট করুন।

<th colspan="2">Utilities</th>

এটি ইউটিলিটি সেলকে শুধুমাত্র একটির পরিবর্তে 2টি কলামের বেশি করে তুলবে৷

এবং আমরা এখানে! খুব সংগঠিত দেখাচ্ছে, তাই না?

রোস্প্যান অ্যাট্রিবিউট

কোলস্প্যান ছাড়াও আপনি একটি সেল স্প্যান একাধিক সারি করতে রোস্প্যান অ্যাট্রিবিউট ব্যবহার করতে পারেন।

ধরা যাক আমাদের কাছে জুন, জুলাই এবং আগস্টের ডেটা ছিল এবং আমরা সেগুলিকে "পতন" হিসাবে মনোনীত করতে চেয়েছিলাম৷

আমি আবার কপি এবং পেস্ট করতে যাচ্ছি, এবং জুন এবং জুলাইয়ের ডেটাও তৈরি করতে আগস্টের ডেটা ব্যবহার করব৷

পতনের জন্য সেল তৈরি করতে, আমি চাই এটি জুন থেকে শুরু করে মাসের বাম দিকে থাকুক। তাই জুনের সারিতে, আমি জুনের আগে একটি নতুন সেল তৈরি করব এবং এতে "পতন" রাখব। তারপর আমি সেই ঘরের সারি স্প্যানটি 3-এ সেট করব, যাতে এটি জুন, জুলাই এবং আগস্টে বিস্তৃত হয়।

এবং আমাদের প্রথম সারিতে একটি স্পেসার সেল যোগ করতে হবে যাতে সেই প্রথম কলামের সাথে মোট 4টি সারি বিস্তৃত হয়।

<table border="1" cellpadding="10" cellspacing="0">
   <tr>
      <th></th>
      <th>Month</th>
      <th>Rent</th>
      <th colspan="2">Utilities</th><!-- This cell will span 2 columns in the row below it -->
      <th>Groceries</th>
      <th>Eating Out</th>
      <th>Entertainment</th>
   </tr>
    <tr>
      <td rowspan="3">Fall</td><!-- this cell will span 3 rows, June, July, & August -->
      <td>June</td>
      <td>$1500</td>
      <td>$100</td><!-- The $100 and $50 cells will be under the Utilities cell-->
      <td>$50</td>
      <td>$350</td>
      <td>$100</td>
      <td>$50</td>
   </tr>
   <tr>
      <td>July</td>
      <td>$1500</td>
      <td>$100</td>
      <td>$50</td>
      <td>$350</td>
      <td>$100</td>
      <td>$50</td>
   </tr>
   <tr>
      <td>August</td>
      <td>$1500</td>
      <td>$100</td>
      <td>$50</td>
      <td>$350</td>
      <td>$100</td>
      <td>$50</td>
   </tr>
</table>

Here’s what the final table looks like!

Tables were used for website layouts

A bit of historical context about tables. Aside from containing data, web developers also used to use tables to layout web designs.

So for example if you have a website design with a header, main content, and a footer, you can create one big table with three rows. And you can then put all your content in those table cells. Table cells can contain any kind of HTML– images, links, text, you name it.

It was very handy back in the day. Nowadays tables aren’t really used very often. The only common exception that I can think of is for HTML emails, because some older email systems can’t use a lot of CSS, so coding like it’s 1999 is unfortunately the only option.

শেষে

And there you have it– you’ve made a basic website in HTML.

If you’re interested in learning HTML and web development, I’d recommend using some of the following resources to get started:

• freeCodeCamp — a free online coding bootcamp run by a non-profit. Many graduates have gone on to land full-time web development jobs.
• The Web Developer Bootcamp by Colt Steele — complete front and back-end online bootcamp on Udemy, taught by a former coding bootcamp instructor.

If you enjoyed this post, please leave a comment below, or share it with your friends!