HTML

HTML Tutorial in Bangla Part-1: HTML Basics

HTML কি?

html tutorial
html tutorial

HTML একটা কম্পিউটার ল্যাঙ্গুয়েজ, যা দিয়ে আপনি যেকোনো তথ্য, ছবি এমনকি ভিডিওকে ইন্টারনেটের মাধ্যমে প্রদর্শনের সুযোগ পাবেন। আর এই কাজটি করতে হলে আপনাকে একটা ওয়েব পেজ তৈরী করতে হবে। আর একটা ওয়েব পেজের মূল গঠন তৈরি হয় HTML দিয়েই । HTML কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়, একে Hyper Text Mark Up Language বলা হয়। Mark Up Language এক সেট Mark Up ট্যাগের সমন্বয়ে গঠিত হয়। একটা ওয়েব পেজের বিভিন্ন অংশ ব্রাউজারের মাধ্যমে কিভাবে প্রদর্শিত হবে, তা HTML এ Mark Up ট্যাগ সমূহ ব্যবহার করে প্রকাশ করা হয় ।

HTML এর ইতিহাস

মার্কিন কম্পিউটার সায়েন্টিস্ট টিম বার্নাস-লী প্রথম HTML বা Hyper Text Mark Up Language টি তৈরি করেন। এটি তৈরির উদ্দেশ্য ছিল বৈজ্ঞানিক গবেষণার তথ্য উপাত্ত দ্রুত পৃথিবীর বিভ্ন্নি স্থানে আদান প্রদানের ব্যবস্থা করা। তারপর ১৯৯০ সালের দিকে NCSA কর্তৃক ডেভলপকৃত মোজাইক ব্রাউজারের মাধ্যমে HTML পরিচিতি লাভ করে। ১৯৯৭ এর জানুয়ারীতে W3C কর্তৃক প্রথম ডেভলপকৃত HTML3.2 প্রকাশিত হয়। একই বছরে শেষে ডিসেম্বরে W3C HTML এর নতুন সংস্করণ HTML4.2 প্রকাশ করে। ২০১০ সালে বর্তমানে প্রচলিত HTML এর সর্বশেষ ভার্সন HTML5 জনসম্মূখে পরিচিতি লাভ করে।

HTML Code কোথায় এবং কিভাবে লিখবেন?

যে কোন প্রোগ্রাম লেখার জন্যই কোন একটা Code Editor ব্যবহার করে কোডিং করতে হয়। HTML কোডিংয়ের জন্য আপনি প্রফেশনাল টেক্সট এডিটর যেমন- Sublime Text, atom.io, Brackets ইত্যাদি ব্যবহার করতে পারেন। HTML এ লেখা প্রোগ্রাম .html এক্সটেনশন যেমন index.html বা test.html দ্বারা Save করে যেকোন ব্রাউজার যেমন Internet explorer, Mozilla Firefox , Google chrome এবং Opera দ্বারা দেখতে পারবেন।

HTML এ লেখা প্রোগ্রামের মৌলিক অংশ সমূহ

<!DOCTYPE html>
<html>
<head>
	<title>www.w3programmers.com</title>
</head>
<body>
This is my first web page. I am learning now HTML.
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: test.html , Save as type : All files, দিয়ে save করে test.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

html demo
html demo

HTML শিখতে কি জানা দরকার?

HTML শিখতে নিচের শব্দগুলি ভালভাবে জানা দরকার-

  • HTML Element
  • HTML Tag
  • HTML Attribute

চলুন একটা একটা করে উপরের তিনটি বিষয়ে একটা পরিষ্কার ধারণা নেই।

HTML ট্যাগ কি?

HTML এ প্রোগ্রাম লেখার জন্য <> এবং দুইটা চিহ্ন এবং এর মধ্যে কিছু Pre-defined Word যেমন html, head, title, body ইত্যাদি Keyword ব্যবহার করা হয়। <> বা চিহ্ন এবং এর মাঝে লেখা এক একটি Keyword কে একত্রে ট্যাগ বলা হয়। যেমন এবং । হল body শুরু ট্যাগ এবং হল body শেষ ট্যাগ।

HTML Element কি?

HTML এ যেকোন শুরু ও শেষ tag এবং মাঝের অংশকে সংশ্লিষ্ট tag এর Element বলা হয়। যেমন <h1> This is an example of element.</h1> । এখানে <h1> হেডার 1 শুরু এবং </h1> হেডার1 শেষ ট্যাগের মাঝে This is an example of element. লেখা হয়েছে, তাই This is an example of element.হচ্ছে h1 tag এর element । কিছু কিছু ট্যাগের কোন Element থাকে না যেমন <br /> <img /> ইত্যাদি।

সাধারণতঃ যে সকল ট্যাগের শেষ ট্যাগ থাকে না তাদের ইলিমেন্টও থাকে না। এ ধরণের শুরু ট্যাগের মধ্যেই / চিহ্নটি অন্তর্ভূক্ত থাকে, এবং এর আগে একটা স্পেস দিতে হয়। আর এগুলোকে বলা হয় HTML empty Element

HTML Attributes কি?

HTML এ ট্যাগের কার্যক্ষমতাকে বর্ধিত করার জন্য শুরু tag এর মধ্যে কিছু pre-defined কথাকে HTML Attribute বলে। মূলত HTML এ ট্যাগের কার্যক্ষমতাকে বর্ধিত করার জন্য Attributes ব্যবহার করা হয়। যেমন <font size=”5″ face=”Tahoma” color=”red”> Hello w3programmers.<font/> এখানে size=”5″ অংশটি হল font ট্যাগের একটি এট্রিবিউট, যা প্রকাশ করছে ইলিমেন্ট অর্থাৎ This is a paragraph. লেখাটির সাইজ কেমন হবে। এছাড়া face=”Tahoma” প্রকাশ করছে লেখাটির font হবে Tahoma এবং color=”red” দ্বারা প্রকাশ করছে লেখাটির রং হবে লাল।

HTML Entities কি?

HTML এ কিছু বিশেষ Character যেমন <,> চিহ্ন এটি সাধারণত HTML tag গুলো লেখার কাজে ব্যবহৃত হয় , তাই এগুলোর মধ্যে কিছু লিখলে browser সেটিকে ট্যাগ ভেবে ভুল করে বা আমাদের ইচ্ছা অনুযায়ী সঠিক ভাবে তথ্য প্রদর্শন করতে পারেনা। আবার এমন কিছু চিহ্ন যেমন © ® ™ $ ইত্যাদি চিহ্ন গুলি এডিটরে লেখার জন্য আপনার কীবোর্ড এ লেখার ব্যবস্থা নেই । এখন যদি এই ধরনের কোন চিহ্ন আপনি ওয়েব পেজে দেখাতে চান তাহলে এইচটিএমএল এনটাইটি ব্যবহার করে দেখাতে পারবেন।

প্রত্যেক এনটাইটি এমপারসেন্ড (&) চিহ্ন দিয়ে শুরু হয় এরপর তার নাম এবং শেষে সেমিকোলন (;) দিয়ে শেষ করতে হয়।

Entity নাম দিয়েও প্রকাশ করা যায় আবার বিকল্প হিসেবে প্রত্যেকটি এনটাইটির একটা নাম্বার আছে সেটা দিয়েও প্রকাশ করতে পারেন। নিচের কিছু নামভিত্তিক এনটাইটি দেয়া হল।

কয়েকটি বহুল ব্যবহৃত এনটাইটি:

&copy;
&reg;
&trade;
&nbsp;
&dollar;
&lt;
&gt;

এগুলির নাম্বার যথাক্রমে

&#169;
&#174;
&#8482;
&#32;
&#36;
&#60;
&#62;

Result

common html entity
common html entity

HTML DOCTYPE Tag কি?

HTML এ <!DOCTYPE> Tag হচ্ছে আপনার লেখা HTML ডকুমেন্টটি কি ধরনের তা ব্রাউজারকে বোঝানোর জন্য ব্যবহৃত হয়। এইচটিএমএল এর কোন ভার্সন ব্যবহার করবেন সেটার উপর ভিত্তি করেই এই ডিক্লেয়ারেশন টি দেয়া হয়। যেমন উপরের ডকুমেন্ট টি এইচটিএমএল ৫ এর একটি ডকুমেন্ট, তাই এটাকে আমরা এভাবে <!DOCTYPE html> লিখি । এরুপ যদি এটা XHTML এর ১.০ ভার্সন হতো তাহলে ডিক্লেয়ারেশনটি দিতে হতো এভাবে:

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

HTML Comments কি ?

HTML এ Comments হচ্ছে, একজন HTML কোডার বা প্রোগ্রামারের সোর্স কোডের ব্যাখ্যা বা পাদটীকা। এটাকে আমরা Coding Documentation ও বলতে পারি। সাধারণত: যেকোনো Programming language এর Compiler এবং Interpretor গুলো comments কে কোড হিসাবে execute না করে এটাকে (Ignore) এড়িয়ে যায়। Comments System দিয়ে আমরা HTML এর Coding Documentation ছাড়াও এই মুহূর্তে ব্যবহৃত হবেনা কিন্তু ভবিষ্যতে কাজে লাগতে পারে এমন HTML Code গুলোও আমরা সাময়িক সময়ের জন্য hide করে রাখতে পারি।

HTML এ কিভাবে Comment করা হয়?

HTML এ start tag দিয়ে comment এর কাজ করা হয়। নিচের উদাহরণ দেখুন:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Comment</title>
</head>
<body>
	<!--This is a paragraph-->
	<p>Hello HTML!</p>
</body>
</html>

উপরের কোডটি রান করলে আপনি কমেন্ট এর মধ্যে অবস্থিত লেখাটি ব্রাউজার এ দেখতে পাবেন না।

Condition Comment

যেসকল ট্যাগ ইন্টারনেট এক্সপ্লোরার ব্রাউজারে সাপোর্ট করেনা, সেসকল ট্যাগের বিকল্প হিসেবে কমেন্টের মধ্যে ট্যাগ নির্ধারণ করে দিতে পারেন। এতে করে যখন এই কোডগুলো ইন্টারনেট এক্সপ্লোরার ব্রাউজারে রান হবে তখন কমেন্টের মধ্যের ট্যাগগুলো সঠিকভাবে প্রদর্শিত হবে। নিচের উদাহরণটি দেখুন:

<!--[if IE 8]>
HTML Tag
<![endif]-->

<!--[if lt IE 9]>
<script src="/media/jui/js/html5.js"></script>
 <![endif]-->

আমি মাসুদ আলম, বাংলাদেশের ৩৬ তম Zend Certified Engineer । ২০০৯ সালে কম্পিউটার সাইন্স থেকে বেচেলর ডিগ্রী অর্জন করি। দীর্ঘ ১৫ বছর আমি Winux Soft, SSL Wireless, IBCS-PRIMAX, Max Group, Canadian International Development Agency (CIDA), Care Bangladesh, World Vision, Hellen Keller, Amarbebsha Ltd সহ বিভিন্ন দেশি বিদেশী কোম্পানিতে ডেটা সাইন্স, মেশিন লার্নিং, বিগ ডেটা, ওয়েব ডেভেলপমেন্ট এবং সফটওয়্যার ডেভেলপমেন্ট এর উপর বিভিন্ন লিডিং পজিশন এ চাকরি এবং প্রজেক্ট লিড করি। এছাড়াও বাংলাদেশের ১৮৫ জন জেন্ড সার্টিফাইড ইঞ্জিনিয়ার এর মধ্যে ১২০ এরও অধিক ছাত্র আমার হাতে জেন্ড সার্টিফাইড ইঞ্জিনিয়ার হয়েছেন। বর্তমানে w3programmers ট্রেনিং ইনস্টিটিউট এ PHP এর উপর Professional এবং Advance Zend Certified PHP -8.2 Engineering, Laravel Mastering Course with ReactJS, Python Beginning To Advance with Blockchain, Machine Learning and Data Science, Professional WordPress Plugin Development Beginning to Advance কোর্স করাই। আর অবসর সময়ে w3programmers.com এ ওয়েব টেকনোলজি নিয়ে লেখালেখি করি।

One thought on “HTML Tutorial in Bangla Part-1: HTML Basics”

Leave a Reply