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 এর ট্যাগগুলোকে ডিসপ্লে করে না কিন্তু কোন কন্টেন্টকে কিভাবে ডিসপ্লে করতে হবে তার জন্য ট্যাগগুলোকে ব্যাবহার করে।

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

এইচটিএমএল এডিটর (HTML Editor)

নোটপ্যাড বা TextEdit ব্যবহার করে এইচটিএমএল লিখা

পেশাদারী এইচটিএমএল এডিটর ব্যবহার করেও এইচটিএমএল সম্পাদনা করা যেতে পারে। যেমনঃ-

• Adobe Dreamweaver
• Microsoft Expression Web
• CoffeeCup HTML Editor

তবে, এইচটিএমএল শেখার জন্য আমরা নোটপ্যাড (পিসি) বা TextEdit (ম্যাক) মত টেক্সট এডিটর সুপারিশ করি।

আমরা বিশ্বাস করি একটি সাধারণ টেক্সট এডিটর ব্যবহার করে এইচটিএমএল শিখাটা সবচেয়ে ভাল।

নোটপ্যাড দিয়ে আপনার প্রথম ওয়েব পেজ তৈরি করতে নিম্নোক্ত ৪টি ধাপ অনুসরণ করুনঃ

ধাপ ১: নোটপ্যাড খোলা

উইন্ডোজ 7 বা তার আগের ভার্সন এ নোটপ্যাড ওপেন করতেঃ

ক্লিক Start (নীচে পর্দার বাম দিকে)। ক্লিক All Programs । ক্লিক Accessories । ক্লিক Notepad ।

Windows 8 বা তার পরের ভার্সন এ নোটপ্যাড খুলুনঃ

Start Screen ( উইন্ডো প্রতীক আপনার পর্দার নিচে বাম দিকে রয়েছে ) ওপেন করুন এবং Notepad টাইপ করুন।

ধাপ ২: কিছু এইচটিএমএল লিখুন

লিখুন বা নোটপ্যাডের মধ্যে কিছু এইচটিএমএল কপি করুন।

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

স্টেপ ৩: এইচটিএমএল পেজ সংরক্ষণ(Save) করুন

আপনার কম্পিউটারে ফাইলটি সংরক্ষণ করুন।

নোটপ্যাড মেনু থকে File > Save as সিলেক্ট করুন। ফাইলটির নাম "index.htm" দিন বা আপনার পছন্দমত অন্য কোন নাম দিয়ে এর পর .htm দিয়ে সেভ করুন।

UTF-8, এইচটিএমএল ফাইলের জন্য পছন্দসই এনকোডিং । ANSI এনকোডিং মার্কিন জুড়ে এবং পশ্চিম ইউরোপের শুধুমাত্র অক্ষর (characters) ।

ধাপ ৪: ব্রাউজারে আপনার এইচটিএমএল ফাইলটি দেখুন

আপনার প্রিয় ব্রাউজারে সংরক্ষিত এইচটিএমএল ফাইলটি খুলুন।

ব্রাউজারে ফাইলটি ওপেন করতে ফাইলের উপর মাউস পয়েন্টার রেখে ডাবল ক্লিক করুন বা মাউসের দান বাটন এ ক্লিক করে Open with এ মাউস পয়েন্টার রেখে ব্রাউজার চয়েজ করুন এবং ফাইল ওপেন করুন।

এইচটিএমএল এর মৌলিক বিষয়

এইচ টি এম এল ডকুমেন্ট

সকল এইচ টি এম এল ডকুমেন্ট অবশ্যই ডকুমেন্ট এর টাইপ ঘোষণা এর মাধ্যমে শুরু করতে হয়। যেমন, <DOCTYPE html>

এইচ টি এম এল এর শুরু হয় <html> ট্যাগ দিয়ে এবং শেষ হয় </html> এর মাধ্যমে।

<body> এবং </body> এর মধ্যে প্রদর্শিত টেক্সট এইচ টি এম এল ডকুমেন্ট এর বিষয়বস্তু হিসাবে গণ্য হয়।

উদাহরনের সাহায্যে নিচে দেখানো হল

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

ফলাফল

My First Heading

My first paragraph.

এইচ টি এম এল এর শিরোনাম

ফলাফল

এইচটি এম এল এর উপাদান সমূহ (HTML Elements)

এইচটিএমএএল এলিমেন্ট (HTML Element):

এইচটিএমএএল এলিমেন্ট (Element) দ্বারাই HTML Document বর্ণনা করা হয়। একটি HTML Document – এর চারটি মৌলিক Element থাকে। যথাঃ html, head, title, body।

এছাড়াও আরও অনেক Element রয়েছে।

HTML Element শুরু হয় Opening tag (<html>) দিয়ে এবং শেষ হয় closing tag (</html>) দিয়ে।

Opening tag এবং closing tag এর মাঝখানে যা থাকে তাই হচ্ছে Element।

যেমনঃ

<p>This is Element</p>

<h1>This is also an Element<h1>

<title>This is an element too</title>

ফলাফল

This is Element

This is also an Element

This is an element too

Nested HTML Element:

Nested HTML Element হল একটি এলিমেন্ট এর আন্ডারে আরও এলিমেন্ট থাকা।

যথাঃ

<html>

<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>

</html>

ফলাফল

My First Heading

My first paragraph.

এই উদাহরণে দেখা যাচ্ছে যে html এলিমেন্টের মাঝে body এলেমেন্ট রয়েছে।

<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>

এবং body এলিমেন্টের এর মাঝে আরও দুইটি এলেমেন্ট p এবং h1 রয়েছে।

<h1>My First Heading</h1>
<p>My first paragraph.</p>

Empty HTML Element:

যে সকল এলেমেন্টের কোন কন্টেন্ট থাকে না তাদেরকে Empty element বলা হয়।

<br> হচ্ছে একটি empty element যার কোন closing tag নাই।

HTML Element- এর বৈশিষ্ট্যঃ

Start/Opening tag দিয়ে শুরু হয়।
End/Closing tag দিয়ে শেষ হয়।
Start tag এবং End tag এর মাঝে Element থাকে।
কিছু ক্ষেত্রে Element Content নাও থাকতে পারে।
কিছু Element এর End/closing ট্যাগ নাও থাকতে পারে।
Empty Element start ট্যাগের মাঝে শেষ করা হয়।

এইচটিএমএল এট্রিবিউট (HTML Attributes)

এইচটিএমএল এট্রিবিউট

• এইচটিএমএল এলিমেন্টে বা উপাদানের এট্রিবিউট বা বৈশিষ্ট্যাবলী থাকতে পারে।

• এট্রিবিউট একটি উপাদান সম্পর্কে অতিরিক্ত তথ্য প্রদান করে।

• এট্রিবিউট সবসময় শুরু ট্যাগ এ উল্লেখ করা হয়।

• এট্রিবিউট নাম/মান জোড়ায় জোড়ায় আসে। যেমনঃ name="value"

lang এট্রিবিউট

ডকুমেন্টের ল্যাংগুয়েজ <html> ট্যাগে declare করা যেতে পারে। ল্যাংগুয়েজ lang এট্রিবিউটে declare করা হয়।

একটি ল্যাংগুয়েজ declare করা বিশেষ ব্যবহারকারীদের জন্য ( accessibility) তৈরি অ্যাপ্লিকেশন( স্ক্রিন রিডার ) এবং সার্চ ইঞ্জিন এর জন্য খুব গুরুত্বপূর্ণ।

উদাহরণঃ

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

প্রথম দুটি অক্ষর ভাষা নির্ধারণ করে (en) । যদি উপভাষা থাকে, তবে আরো দুটি অক্ষর (US) ব্যবহার করুন।

Title Attribute শিরোনাম অ্যাট্রিবিউট

এইচটিএমএল অনুচ্ছেদ <p> ট্যাগ দিয়ে নির্দেশিত হয়। এই উদাহরণে, <p> এলিমেন্ট এর একটি টাইটেল অ্যাট্রিবিউট আছে। টাইটেল অ্যাট্রিবিউটের মান হচ্ছে "About bangla learning school" ।

উদাহরণঃ

<p title="About bangla learning school">
salearningschoolis a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>

ফলাফল

salearningschool is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.

[আপনি যখন element এর উপর দিয়ে মাউসকে move করাবেন তখন টাইটেল একটি tooltip হিসাবে প্রদর্শন করবে। ]

href অ্যাট্রিবিউট

এইচটিএমএল লিঙ্ক <a> ট্যাগ দিয়ে নির্ধারিত। লিঙ্ক এড্রেস href অ্যাট্রিবিউটে উল্লেখ করা হয়।

যেমনঃ-

ফলাফল

This is a link

আপনারা লিঙ্ক এবং <a> ট্যাগ সম্পর্কে এই টিউটোরিয়ালে পরবর্তীতে আরো জানতে পারবেন।

Size বা আকার অ্যাট্রিবিউট

এইচটিএমএল ইমেজ <img> ট্যাগ দিয়ে নির্ধারিত। উৎস ফাইলের নাম (src) এবং ইমেজের আকার (width এবং height) সব অ্যাট্রিবিউট হিসেবে নির্দেশিত হয়। যেমনঃ-

ছবির আকার পিক্সেলে উল্লেখ করা হয়েছে। width="960" এর মানে পর্দা 960 পিক্সেল চওড়া।

আপনারা ইমেজ এবং <img> ট্যাগ সম্পর্কে এই টিউটোরিয়ালে পরবর্তীতে আরো জানতে পারবেন।

Alt অ্যাট্রিবিউট

যখন একটি এইচটিএমএল উপাদান প্রদর্শন করা যায় না তখন Alt অ্যাট্রিবিউট নির্দিষ্ট একটি বিকল্প টেক্সট ব্যবহার করতে সাহায্য করে। "screen readers" দ্বারা অ্যাট্রিবিউটের মান পড়া যায়।

উদাহরণঃ

ফলাফল

salearningschool.com

আমার সুপারিশ: সর্বদা ছোট হাতের অক্ষর ব্যবহার করবেন।

এইচটিএমএল ৫ স্ট্যান্ডার্ড এর ছোট হাতের অ্যাট্রিবিউট নাম প্রয়োজন হয় না। টাইটেল অ্যাট্রিবিউট ছোট বা বড় হাতের লেখা যেতে পারে, যেমন- Title বা TITLE ।

ছোট হাতের সবচেয়ে কমন এবং ছোট হাতের অক্ষর লেখাও সহজ।

আমার সুপারিশ : সর্বদা Quote Attribute মান ব্যবহার করবেন।

এইচটিএমএল ৫ স্ট্যান্ডার্ড এ অ্যাট্রিবিউট মান এ Quote দেওয়ার প্রয়োজন হয় না। উপরে প্রদর্শিত href অ্যাট্রিবিউট, এভাবেও লেখা যেতে পারেঃ

এইচটিএমএল 4 Quote ব্যবহারের বিশেষ পরামর্শ দেওয়া হচ্ছে এবং এক্সএইচটিএমএল (XHTML) এর মত ডকুমেন্ট Quote ব্যবহারের দাবি রাখে।

[quote এর ব্যবহার করাটা খুবই সাধারণ ব্যাপার। quotes বাদ দিয়ে লিখলে ত্রুটি তৈরী হতে পারে। ]

সিঙ্গেল বা ডাবল quote ?

ডাবল quote এর ব্যবহার এইচটিএমএল এ খুবই সাধারণ, কিন্তু একক quote ও ব্যবহার করা যেতে পারে।

অনেকসময়, যখন অ্যাট্রিবিউট মান নিজেই ডাবল quotes (উদ্ধৃতি চিহ্ন) ধারণ করে তখন একক সিঙ্গেল quotes (উদ্ধৃতি চিহ্ন) ব্যবহার করা প্রয়োজন হয়ে পরে।

যেমনঃ-

বা উলটাভাবে

অধ্যাযয়ের সারমর্ম

১। সমস্ত এইচটিএমএল উপাদানের অ্যাট্রিবিউট থাকতে পারে।

২। এইচটিএমএল টাইটেল অ্যাট্রিবিউট অতিরিক্ত "টুল - টিপ" তথ্য প্রদান করে।

৩। এইচটিএমএল href অ্যাট্রিবিউট লিঙ্কের জন্য ঠিকানা ও তথ্য প্রদান করে।

৪। এইচটিএমএল width এবং height অ্যাট্রিবিউটন ইমেজের জন্য আকার বিষয়ক তথ্য প্রদান করে।

৫। এইচটিএমএল Alt অ্যাট্রিবিউট পাঠকদের জন্য টেক্সট প্রদান করে।

৬। এইচটিএমএল এট্রিবিউট নামে সবসময় ছোট হাতের অক্ষর ব্যবহার করা ভাল।

৭। quote এট্রিবিউট এ সবসময় ডাবল quote ব্যবহার করা ভাল।

এইচটিএমএল এট্রিবিউট

নীচে এইচটিএমএল এ প্রায়ই ব্যবহৃত হয় এমন কিছু এট্রিবিউট এর একটি বর্ণানুক্রমিক তালিকা দেওয়া হল:

এট্রিবিউটঃ alt
ব্যাখ্যাঃ ইমেজের জন্য একটি বিকল্প টেক্সট উল্লেখ করে

এট্রিবিউটঃ disabled
ব্যাখ্যাঃ একটি ইনপুট উপাদান নিষ্ক্রিয় করা হবে উল্লেখ করে

এট্রিবিউটঃ href
ব্যাখ্যাঃ লিঙ্ক এর জন্য URL (ওয়েব ঠিকানা) উল্লেখ করে

এট্রিবিউটঃ id
ব্যাখ্যাঃ একটি উপাদানের জন্য একটি unique আইডি উল্লেখ করে

এট্রিবিউটঃ src
ব্যাখ্যাঃ ইমেজের জন্য URL (ওয়েব ঠিকানা) উল্লেখ করে

এট্রিবিউটঃ style
ব্যাখ্যাঃ একটি উপাদানের জন্য ইনলাইন সিএসএস স্টাইল উল্লেখ করে

এট্রিবিউটঃ title
ব্যাখ্যাঃ একটি উপাদান সম্পর্কে ( টুল টিপ হিসেবে প্রদর্শিত) অতিরিক্ত তথ্য উল্লেখ করে

এট্রিবিউটঃ value
ব্যাখ্যাঃ ইনপুট উপাদানের জন্য মান ( টেক্সট কন্টেন্ট ) উল্লেখ করে করে

এইচটিএমএল শিরোনাম (HTML Headings)

HTML Headings

HTML Documents এর ক্ষেত্রে Headings খুবই গুরুত্বপূর্ণ। <h1> থেকে <h6> tags দ্বারা Heading কে তুলে ধরা হয়।

<h1> tag দ্বারা সবচেয়ে গুরুত্বপূর্ণ ও <h6> tag দ্বারা অপেক্ষাকৃত কম গুরুত্বপূর্ণ Heading কে তুলে ধরা হয়।

উদাহরণস্বরূপঃ

<h1> এই হল একটি শিরোনাম </h1>

<h2> এই হল একটি শিরোনাম </h2>

<h3> এই হল একটি শিরোনাম </h3>

<h4> এই হল একটি শিরোনাম </h4>

<h5> এই হল একটি শিরোনাম </h5>

<h6> এই হল একটি শিরোনাম </h6>

ফলাফল:

এই হল একটি শিরোনাম

বিশেষ দ্রষ্টব্যঃ প্রত্যেক Heading এর আগে ও পরে browser স্বয়ংক্রিয়ভাবে কিছু empty space যোগ করে দেয়।

শিরোনাম (Heading) খুব গুরুত্বপূর্ণ

HTML Headings কে কেবল Heading এর জন্য ব্যবহার করতে হবে, কোন Text কে বড় (big) অথবা Bold করার জন্য Heading কে ব্যবহার করা যাবে না। আপনার web page গুলোর structure এবং content এর সূচি বানানোর জন্য সার্চিঞ্জিনগুলো আপনার headings কে ব্যবহার করে। User রা Heading এর দ্বারা আপনার web page এর সারমর্ম বুঝে নেয়। Document এর structure দেখানোর জন্যও Heading ব্যবহার করা গুরুত্বপূর্ণ। <h1> Heading হল প্রধান শিরোনাম, <h2> অপেক্ষাকৃত গৌন, <h3> তার চেয়ে কম গুরুত্বপূর্ণ এভাবেই ক্রমান্বয়ে ব্যবহৃত হয়।

HTML Horizontal Rules (আনুভূমিক নিয়ম)

HTML page এ <hr> tag আনুভূমিক রেখা তৈরি করে। বিষয়বস্তুকে চিহ্নিত করার জন্য <hr > element ব্যবহার করা হয়।

যেমনঃ

<!DOCTYPE html>
<html>
<body>

<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>

</body>
</html>

ফলাফল

↓

The hr tag defines a horizontal rule:

This is a paragraph.

↑

HTML এর <head> element

HTML এর <head> element টির HTML Headings এর সাথে কিছু করার নেই। <head> element meta data ধারণ করে। আর meta data web page এ দৃশ্যায়িত হয় না। <html> tag ও <body> tag এর মধ্যখানে HTML element অবস্থান করে।

উদাহরণস্বরূপঃ

<!DOCTYPE html>
<html>

<head>

<title>My First HTML</title>
<meta charset="UTF-8">

</head>

<body>

<p>The HTML head element contains meta data.</p>

<p>Meta data is data about the HTML document.</p>

</body>
</html>

ফলাফল

The HTML head element contains meta data.

Meta data is data about the HTML document.

HTML এর title element

HTML এর title element হল meta data। এটা HTML Documents এর title হিসেবে চিহ্নিত হয়। Document এ title কখনও প্রদর্শিত হয় না।

HTML এর meta element

HTML এর <meta> element ও আরেকটি meta data। HTML Document এর অন্যান্য তথ্য ও চরিত্র সেটকে তুলে ধরতে এটি ব্যবহৃত হয়।

এইচটিএমএল এর অণুচ্ছেদ (HTML Paragraphs)

এইচটিএমএল প্যারাগ্রাফ

এইচটিএমএল < p> উপাদান একটি অনুচ্ছেদ সংজ্ঞায়িত করে।

যেমনঃ-
<p>This is a paragraph</p>
<p>This is another paragraph</p>
[* ব্রাউজার স্বয়ংক্রিয়ভাবে অনুচ্ছেদের আগে ও পরে একটি খালি লাইন যোগ করে। ]

এইচটিএমএল প্রদর্শন

আপনি নিশ্চিত হতে পারবেন না যে কিভাবে এইচটিএমএল দেখানো হবে।

বড় বা ছোট পর্দা, এবং পরিবর্তিত windows ভিন্ন ফলাফল তৈরি করবে।

এইচটিএমএল এ, আপনি অতিরিক্ত স্পেস যোগ করা আউটপুট পরিবর্তন করতে পারবেন না।

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

উদাহরণ

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>

ফলাফল

This paragraph contains a lot of lines in the source code, but the browser ignores it.

This paragraph contains a lot of spaces in the source code, but the browser ignores it.

The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.

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

যেমনঃ-

<p>This is a paragraph
<p>This is another paragraph

উপরের উদাহণটি অধিকাংশ ব্রাউজারে প্রদর্শন করবে কিন্তু কিন্তু এটার উপর নির্ভর করবেন না। শেষ ট্যাগ অবশ্যই দিবেন।

শেষ ট্যাগ এর না হওয়া অপ্রত্যাশিত ফলাফল বা ত্রুটি দেখাতে পারে।

HTML এর Stricter সংস্করণ যেমন-এক্সএইচটিএমএল এ আপনাকে শেষ ট্যাগ skip করতে দিবে না। শেষ ট্যাগ অবশ্যই দিতে হবে।

এইচটিএমএল লাইন ব্রেক

এইচটিএমএল <br> উপাদান একটি লাইন বিরতি দিতে ব্যবহৃত হয়।

প্যারাগ্রাফ ব্যবহার না করে <br> ব্যবহার করুন যদি আপনার নতুন একটি লাইনের দরকার হয়।

যেমনঃ-
<p>This is<br>a para<br>graph with line breaks</p>

<br> উপাদান একটি খালি এইচটিএমএল উপাদান। এর কোন শেষ ট্যাগ নেই।

কবিতা সমস্যা

উদাহরণ

<p>In HTML, spaces and new lines are ignored:</p>

<p>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</p>

ফলাফল

In HTML, spaces and new lines are ignored:

My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.

এইচটিএমএল <pre> উপাদান

<pre> এলিমেন্ট পূর্ববিন্যাসিত টেক্সটকে সংজ্ঞায়িত করে।

<pre> এলিমেন্ট এর ভিতরের টেক্সগুলো নির্দিশ্ট পরিমান প্রসস্থ ফন্ট স্পেস এবং লাইন ব্রেক উভয় অপরিবর্তিত রেখে প্রদর্শন করে।

যেমনঃ-

<p>The pre tag preserves both spaces and line breaks:</p>

<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.
</pre>

ফলাফল

The pre tag preserves both spaces and line breaks:

   My Bonnie lies over the ocean.

   My Bonnie lies over the sea.

   My Bonnie lies over the ocean.
   
   Oh, bring back my Bonnie to me.

এইচটিএমএল ট্যাগ রেফারেন্স

ট্যাগঃ <p>
ব্যাখ্যাঃ প্যারাগ্রাফ সজ্ঞায়িত করে।

ট্যাগঃ <br>
ব্যাখ্যাঃ একটি লাইন বিরতি দেয়।

ট্যাগঃ <pre>
ব্যাখ্যাঃ প্রাক ফরম্যাট টেক্সট সজ্ঞায়িত করে।

এইচটিএমএল এর স্টাইল (HTML Styles)

এইচটিএমএল স্টাইল

প্রত্যেকটি এইচটিএমএল উপাদানের জন্য একটি ডিফল্ট বা নির্দিষ্ট স্টাইল থাকে পিছনের কালার বা ব্যাকগ্রাউন্ড কালার সাদা এবং টেক্সট এর কালার কালো। স্টাইল attribute এর মাধ্যমে আমরা এই ডিফল্ট কালার কে পরিবর্তন করতে পারি। নিচের উদাহরণ এ ব্যাকগ্রাউন্ড কালার ডিফল্ট সাদা থেকে light gray কালার এ পরিবর্তনকরা হয়েছে।

উদাহরণ

<!DOCTYPE html>
<html>
<body style="background-color:lightgrey">

<h1>This is a heading</h1>

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

</body>
</html>

This is a heading

This is a paragraph.

Bgcolor attribute পুরাতন এইচটিএমএল ভার্সন এ সাপোর্ট করে কিন্তু এইচটিএমএল ৫ এ সাপোর্ট করে না

এইচটিএমএল স্টাইল attribute

এইচটিএমএল স্টাইল attribute নিম্নোক্ত syntax মেনে চলে

style="property:value"

এই প্রপার্টি হল সিএসএস এর প্রপার্টি এবং ভ্যালু হল সিএসএস এর ভ্যালু।

এইচটিএমএল টেক্সট কালার

এইচটিএমএল এর টেক্সট কালার পরিবর্তন করার জন্য color প্রপার্টি ব্যবহার করা হয়।
উদাহরণ

<body>
<h1 style="color:blue">This is a heading
<p style="color:red">This is a paragraph.</p>
</body>

ফলাফল

This is a heading

This is a paragraph.

এইচটিএমএল ফন্টস

Font-family প্রপার্টি দ্বারা ফন্টের ধরন পরিবর্তন করা হয়।
উদাহরণ

<body>
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
</body>

ফলাফল

This is a heading

This is a paragraph.

পুরাতন এইচটিএমএল এ <font> ট্যাগ সাপোর্ট করে কিন্তু এইচটিএমএল ৫ এ সাপোর্ট করে না।

এইচটিএমএল টেক্সট সাইজ

Font-size প্রপার্টি দ্বারা টেক্সট এর আকার পরিবর্তন করা হয়।
উদাহরণ

<body>
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>
</body>

ফলাফল

This is a heading

This is a paragraph.

এইচটিএমএল টেক্সট alignment

Text-align প্রপার্টি দ্বারা টেক্সট horizontal ভাবে কোন দিকে অবস্থান করবে তা নির্দেশ দেওয়া হয়
উদাহরণ

<body>
<h1 style="text-align:center">Centered Heading</h1>
<p>This is a paragraph.</p>
</body>

ফলাফল

Centered Heading

This is a paragraph.

<center> ট্যাগ পুরাতন এইচটিএমএল ভার্সন এ কাজ করে নতুন এইচটিএমএল এ কাজ করে না।

একনজরে প্রপার্টি গুলো

• স্টাইল attribute এর ব্যবহার

• background-color এর ব্যবহার

• color এর সাহায্যে টেক্সট কালার এর ব্যবহার

• টেক্সট এর ফন্ট এর জন্য font-family এর ব্যবহার

• টেক্সট এর আকার এর জন্য font-size এর ব্যবহার

এবং

• text-align এর ব্যবহার।

এইচটিএমএল এর টেক্সট ফরমেটিং (HTML Text Formatting Elements)

এইচটিএমএল ফরম্যাটিং elements (HTML Formatting Element)

গত অধ্যায়ে আপনারা জেনেছেন, HTML Style Attribute দ্বারা কিভাবে HTML Style কে পরিবর্তন করা যায়।

এ অধ্যায়ে আমরা HTML Formatting Element সম্পর্কে জানব। নিম্নে HTML Text Formatting Elements গুলোকে উদাহরণসহ তুলে ধরা হল-

এইচটিএমএল এর কিছু গুরুত্তপূর্ণ উপাদান আছে যা দিয়ে টেক্সট কে বিভিন্নরুপে সাজানো যায়।

যেমন আমরা বোল্ড এবং ইতালিক টেক্সট পাওয়ার জন্য ব্যবহার করব <b> এবং <i>। ফরম্যাটিং উপাদান দ্বারা কি ধরনের টেক্সট হতে পারে তা নিচে দেওয়া হল

Bold text
Important text
Italic text
Emphasized text
Marked text
Small text
Deleted text
Inserted text
Subscripts
Superscripts

এইচটিএমএল Bold এবং strong ফরম্যাট এর উদাহরণ

<b> এলিমেন্ট Text কে বোল্ড করে, Text কে কোন বিশেষ গুরুত্ব প্রদান করে না।

উদাহরণঃ

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

</body>
</html>

ফলাফলঃ

This text is normal.

This text is bold.

এইচটিএমএল এর <strong> এলিমেন্ট strong টেক্সট ডিফাইন করে যা শব্দ বা বাক্যটিকে বিশেষ গুরুত্ব প্রদান করে।

উদাহরণঃ

<p><strong>This text is strong</strong>.</p>

ফলাফলঃ

This text is strong.

এইচটিএমএল italic এবং emphasized ফরম্যাট

এইচটিএমএল এ <i> উপাদান দিয়ে ইতালিক টেক্সট ডিসপ্লে করা হয় কোন অতিরিক্ত গুরুত্ত প্রদান করা ব্যতীত।

উদাহরণঃ

<p><i>This text is italic</i>.</p>

ফলাফলঃ

This text is italic.

গুরুত্ব সহকারে emphasized টেক্সট দেখানোর জন্য <em> উপাদান ব্যবহার করা হয়

উদাহরণঃ

<p><em>This text is emphasized</em>.</p>

ফলাফলঃ

This text is emphasized.

দ্রষ্টব্য: ব্রাউজার গুলো <strong> কে <b> এবং <em> কে <i> আকারে ডিসপ্লে করে
যদিও এই ট্যাগ গুলোর মধ্যে অর্থগত ভিন্নতা রয়েছেঃ এখানে <b> এবং <i> বোল্ড এবং ইতালিক টেক্সট বুঝায় কিন্ত <strong> এবং <em> ট্যাগ বুঝায় যে টেক্সগুলো গুরুত্বপূর্ণ।

এইচটিএমএল এর টেক্সট ফরম্যাটিং এর জন্য ট্যাগ গুলো নিচে পর্যায় ক্রমে দেখানো হলঃ

Tag	Description (বর্ণনা)
<b>	কোন text কে bold করতে এ tag ব্যবহার করা হয়।
<strong>	গুরুত্বপূর্ণ Text কে তুলে ধরতে এই tag ব্যবহৃত হয়।
<i>	কোন text কে italic করতে এই tag ব্যবহৃত হয়।
<em>	Emphasized text কে তুলে ধরতে এটি ব্যবহৃত হয়।
<small>	ছোট কোন Text কে তুলে ধরা এই tag এর দ্বারা।
<u>	Text কে underline করতে একে ব্যবহার করা হয়।
<mark>	কোন text কে হাইলাইট করতে <mark> tag ব্যবহার করা হয়।
<del>	Text কে remove করতে এই tag ব্যবহৃত হয়।
<ins>	কোন text কে add করতে এটি ব্যবহৃত হয়।
<sub>	Subscripted text কে চিহ্নিত করতে এই element ব্যবহৃত হয়।
<sup>	Superscripted text কে চিহ্নিত করতে এই element ব্যবহৃত হয়।

এইচটিএমএল এর কোটেশন (HTML Quotation and Citation Elements)

এইচটিএমএল <q> সংক্ষিপ্ত উদ্ধৃতি এর জন্য

সংক্ষিপ্ত উদ্ধৃতি এর জন্য এর জন্য <q> এলিমেন্ট ব্যবহার করা হয়। ব্রাউজার নিজে নিজে এই উদ্ধৃতির চিহ্ন বসিয়ে দেয়।

উদাহরণঃ

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

ফলাফলঃ

WWF's goal is to: Build a future where people live in harmony with nature.

এইচটিএমএল <blockquote> বড় উদ্ধৃতি এর জন্য

বড় উদ্ধৃতর জন্য <blockquote> ব্যবহার করা হয়। ব্রাউজার সাধারণত <blockquote> এর ভিতরের অংশ প্রদর্শন করে।

উদাহরণ

<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

ফলাফলঃ

Here is a quote from WWF's website:

For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.

সংক্ষিপ্ত রূপ প্রকাশের জন্য এইচটিএমএল <abbr> এর ব্যবহার

কোন কিছুর সংক্ষিপ্ত রূপ প্রকাশ করার জন্য এইচটিএমএল এর <abbr> ব্যবহার করা হয়। ব্রাউজারে উক্ত আন্ডার লাইন করা শব্দ/শব্দসমষ্টি এর উপর মাউস পয়েন্টার নিলে উক্ত শব্দ/শব্দসমষ্টিি এর সম্পর্কিত বিস্তারিত তথ্য প্রদান করে। ফলে এটি ব্রাউজার, অনুবাদ এবং search engine এর ক্ষেত্রে গুরুত্তপূর্ণ তথ্য দেয়।

উদাহরণ

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

ফলাফলঃ

The WHO was founded in 1948.

যোগাযোগ এর ঠিকানা প্রকাশে এইচটিএমএল <address>

কোন আর্টিকেল এর মালিক এর যোগাযোগ এর তথ্য দেওয়ার ক্ষেত্রে আমরা <address> ব্যবহার করব। সাধারনত এটি ইতালিক আকারে দেখায়। প্রায় প্রত্যেক ব্রাউজার কোন লেখার শুরুতে এবং শেষে লাইন ব্রেক যুক্ত করে

উদাহরণঃ

Written by Jon Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

ফলাফলঃ

Written by Jon Doe.Visit us at:Example.comBox 564, DisneylandUSA

কাজের শিরোনাম লেখার জন্য <cite>

কোন কাজের শিরোনাম দেওয়ার ক্ষেত্রে আমরা <cite> ব্যবহার করব। প্রায় প্রত্যেক ব্রাউজার সাধারনভাবে এটিকে ইতালিক এ প্রদর্শন করে।

উদাহরণ

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

ফলাফলঃ

The Screamby Edward Munch. Painted in 1893.

এইচটিএমএল <bdo>

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

উদাহরণঃ

<bdo dir="rtl">This text will be written from right to left</bdo>

ফলাফলঃ

This text will be written from right to left

এইচটিএমএল উদ্ধৃতি, তলব এবং ডেফিনিশন এলিমেন্ট এর নাম এবং তাদের বর্ণনা নিচে দেওয়া হলঃ

ট্যাগ	বর্ণনা
<abbr>	সংক্ষিপ্ত রূপ বুঝায়
<address>	কোন ডকুমেন্ট এর লেখকের যোগাযোগের ঠিকানা প্রকাশ করতে ব্যবহৃত হয়
<bdo>	টেক্সট এর অভিমুখ পরিবর্তন করার জন্য
<blockquote>	কটেশন মার্ক যুক্ত অংশ যা অন্য কোন উৎস থেকে এসেছে
<dfn>	কোন শব্দের সংজ্ঞা
<q>	সংক্ষিপ্ত ইনলাইন কোটেশন এর ক্ষেত্রে।
<cite>	কোন কাজের শিরোনাম।

HTML মাষ্টার ক্লাস ০১

HTML পরিচিতি

My First Heading

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

HTML ট্যাগ

ওয়েব ব্রাউজার

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

<!DOCTYPE> ঘোষণা

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

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

HTML5

HTML 4.01

XHTML 1.0

HTML ভার্সনস

এইচটিএমএল এডিটর (HTML Editor)

নোটপ্যাড বা TextEdit ব্যবহার করে এইচটিএমএল লিখা

ধাপ ১: নোটপ্যাড খোলা

ধাপ ২: কিছু এইচটিএমএল লিখুন

স্টেপ ৩: এইচটিএমএল পেজ সংরক্ষণ(Save) করুন

ধাপ ৪: ব্রাউজারে আপনার এইচটিএমএল ফাইলটি দেখুন

এইচটিএমএল এর মৌলিক বিষয়

এইচ টি এম এল ডকুমেন্ট

My First Heading

এইচ টি এম এল এর শিরোনাম

This is a heading

This is a heading

This is a heading

এইচ টি এম এল প্যারাগ্রাফ

এইচ টি এম এল লিঙ্ক

এইচ টি এম এল ইমেজ

এইচটি এম এল এর উপাদান সমূহ (HTML Elements)

এইচটিএমএএল এলিমেন্ট (HTML Element):

This is also an Element

Nested HTML Element:

My First Heading

Empty HTML Element:

HTML Element- এর বৈশিষ্ট্যঃ

এইচটিএমএল এট্রিবিউট (HTML Attributes)

এইচটিএমএল এট্রিবিউট

lang এট্রিবিউট

Title Attribute শিরোনাম অ্যাট্রিবিউট

href অ্যাট্রিবিউট

Size বা আকার অ্যাট্রিবিউট

Alt অ্যাট্রিবিউট

আমার সুপারিশ: সর্বদা ছোট হাতের অক্ষর ব্যবহার করবেন।

আমার সুপারিশ : সর্বদা Quote Attribute মান ব্যবহার করবেন।

সিঙ্গেল বা ডাবল quote ?

অধ্যাযয়ের সারমর্ম

এইচটিএমএল এট্রিবিউট

এইচটিএমএল শিরোনাম (HTML Headings)

HTML Headings

উদাহরণস্বরূপঃ

ফলাফল:

এই হল একটি শিরোনাম

এই হল একটি শিরোনাম

এই হল একটি শিরোনাম

এই হল একটি শিরোনাম

এই হল একটি শিরোনাম

এই হল একটি শিরোনাম

শিরোনাম (Heading) খুব গুরুত্বপূর্ণ

HTML Horizontal Rules (আনুভূমিক নিয়ম)

ফলাফল

HTML এর <head> element

উদাহরণস্বরূপঃ

ফলাফল

HTML এর title element

HTML এর meta element

এইচটিএমএল এর অণুচ্ছেদ (HTML Paragraphs)

এইচটিএমএল প্যারাগ্রাফ

এইচটিএমএল প্রদর্শন

এইচটিএমএল লাইন ব্রেক

কবিতা সমস্যা

এইচটিএমএল <pre> উপাদান

এইচটিএমএল ট্যাগ রেফারেন্স

এইচটিএমএল এর স্টাইল (HTML Styles)

এইচটিএমএল স্টাইল

This is a heading