What is HTML 5 ?
আপনি যদি ওয়েব ডেভেলপমেন্টের জগতে নতুন হয়ে থাকেন, তাহলে এইচটিএমএল (HTML) শব্দটি নিশ্চয়ই শুনেছেন। HTML হলো একটি মার্কআপ ভাষা যা ওয়েবসাইটের কাঠামো তৈরি করতে ব্যবহৃত হয়। এটি কোনো প্রোগ্রামিং ভাষা নয়, বরং একটি নিয়মাবলী, যা ব্রাউজারকে বলে দেয় একটি ওয়েবপেজে কী কী উপাদান (যেমন: টেক্সট, ছবি, ভিডিও) কোথায় এবং কীভাবে প্রদর্শিত হবে।
এইচটিএমএল কী?
এইচটিএমএল এর পূর্ণরূপ হলো HyperText Markup Language। এর প্রতিটি অংশের আলাদা অর্থ আছে:
HyperText: এটি এমন একটি টেক্সট যা এক পেজ থেকে অন্য পেজে যাওয়ার জন্য লিংকের ব্যবস্থা করে। যখন আপনি কোনো ওয়েবসাইটে কোনো লিংকে ক্লিক করেন, তখন আপনি এই হাইপারটেক্সট ব্যবহার করেন।
Markup: এটি এমন এক ধরনের কোড যা ওয়েব ব্রাউজারকে বলে দেয় যে কোনো টেক্সট বা ফাইল কীভাবে প্রদর্শিত হবে। এটি ট্যাগ ব্যবহার করে লেখা হয়।
Language: এটি একটি নিয়মাবলী যা দিয়ে ওয়েবসাইটের উপাদানগুলো সাজানো হয়।
সহজ ভাষায়, এইচটিএমএল হলো একটি ওয়েবসাইটের কাঠামো, যেমন একটি বিল্ডিং এর ভিত্তি। CSS (Cascading Style Sheets) দিয়ে এটিকে ডিজাইন করা হয় এবং JavaScript দিয়ে এটিকে আরও কার্যকরী করা হয়।
এইচটিএমএল ট্যাগ (Tags)
এইচটিএমএল এর সবচেয়ে গুরুত্বপূর্ণ অংশ হলো ট্যাগ। ট্যাগগুলো < > এই চিহ্নের মধ্যে লেখা হয়। বেশিরভাগ ট্যাগের একটি শুরুর ট্যাগ (যেমন: <h1>) এবং একটি শেষের ট্যাগ (যেমন: </h1>) থাকে। শেষের ট্যাগে একটি স্ল্যাশ (/) থাকে।
কিছু সাধারণ এইচটিএমএল ট্যাগ নিচে দেওয়া হলো:
<h1>থেকে<h6>: এগুলো হেডিং ট্যাগ।<h1>সবচেয়ে বড় হেডিং এবং<h6>সবচেয়ে ছোট।<p>: এটি প্যারাগ্রাফ লেখার জন্য ব্যবহৃত হয়।<a>: এটি হাইপারলিংক তৈরি করতে ব্যবহৃত হয়।<img>: এটি ওয়েবসাইটে ছবি যুক্ত করতে ব্যবহৃত হয়।<ul>এবং<ol>: এগুলো যথাক্রমে আনঅর্ডারড লিস্ট (বিন্দু সহ) এবং অর্ডারড লিস্ট (সংখ্যা সহ) তৈরি করতে ব্যবহৃত হয়।<li>: এটি লিস্টের প্রতিটি আইটেমকে নির্দেশ করে।<div>: এটি একটি ব্লক-লেভেল কন্টেইনার হিসেবে কাজ করে, যা অন্য এইচটিএমএল উপাদানগুলোকে গ্রুপ করতে ব্যবহৃত হয়।<header>: ওয়েবপেজের শীর্ষ অংশ বা হেডার সংজ্ঞায়িত করে।<nav>: নেভিগেশন লিংক ধারণকারী অংশকে চিহ্নিত করে।<article>: স্বাধীন, স্বয়ংসম্পূর্ণ কন্টেন্ট যেমন ব্লগ পোস্ট, ফোরাম পোস্ট ইত্যাদি এর জন্য ব্যবহৃত হয়।<section>: ডকুমেন্টের একটি থিম্যাটিক গ্রুপকে সংজ্ঞায়িত করে।<footer>: ডকুমেন্টের পাদদেশ বা ফুটার সংজ্ঞায়িত করে।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>আমার প্রথম ওয়েবপেজ</title>
</head>
<body>
<header>
<h1>ওয়েলকাম টু মাই ব্লগ</h1>
<nav>
<a href="#home">হোম</a> |
<a href="#about">আমার সম্পর্কে</a>
</nav>
</header>
<article>
<p>এটি আমার প্রথম এইচটিএমএল ব্লগ পোস্ট।</p>
<a href="https://www.google.com">গুগল-এ যান</a>
<img src="example.jpg" alt="একটি ছবির উদাহরণ">
</article>
<footer>
<p>© 2023 আমার ব্লগ</p>
</footer>
</body>
</html>
এইচটিএমএল অ্যাট্রিবিউট (Attributes)
অ্যাট্রিবিউটগুলো ট্যাগ সম্পর্কে অতিরিক্ত তথ্য দেয়। এগুলো শুরু ট্যাগ-এর মধ্যে লেখা হয় এবং একটি নাম="মান" (name="value") কাঠামো অনুসরণ করে।
উদাহরণ:
<a>ট্যাগেরhrefঅ্যাট্রিবিউটটি হাইপারলিংকের গন্তব্য URL নির্ধারণ করে।<img>ট্যাগেরsrcঅ্যাট্রিবিউটটি ছবির উৎস (source) নির্ধারণ করে এবংaltঅ্যাট্রিবিউটটি ছবিটি লোড না হলে কী টেক্সট দেখাবে তা নির্ধারণ করে।
HTML5 এর নতুন ট্যাগসমূহ: অডিও, ভিডিও এবং ফাইল আপলোড
HTML5 এর সাথে মাল্টিমিডিয়া এবং ফর্মের কার্যকারিতা বাড়ানোর জন্য অনেক নতুন এবং শক্তিশালী ট্যাগ যুক্ত করা হয়েছে।
১. অডিও যোগ করা (<audio> ট্যাগ)
আপনি সরাসরি আপনার ওয়েবপেজে অডিও ফাইল যোগ করতে পারেন। এটি পডকাস্ট, মিউজিক বা অন্য কোনো অডিও কন্টেন্টের জন্য দারুণ।
<audio controls>
<source src="myaudio.mp3" type="audio/mpeg">
<source src="myaudio.ogg" type="audio/ogg">
আপনার ব্রাউজার অডিও এলিমেন্ট সাপোর্ট করে না।
</audio>
এখানে controls অ্যাট্রিবিউটটি প্লে/পজ, ভলিউম কন্ট্রোল ইত্যাদি ব্রাউজারের ডিফল্ট কন্ট্রোলগুলো যোগ করে। <source> ট্যাগ একাধিক অডিও ফরম্যাট সমর্থন করে, যাতে বিভিন্ন ব্রাউজারে অডিও লোড হতে পারে।
২. ভিডিও যোগ করা (<video> ট্যাগ)
অডিওর মতোই, <video> ট্যাগ ব্যবহার করে আপনি আপনার ওয়েবসাইটে ভিডিও কন্টেন্ট যোগ করতে পারেন।
<video width="640" height="360" controls poster="poster.jpg">
<source src="myvideo.mp4" type="video/mp4">
<source src="myvideo.webm" type="video/webm">
আপনার ব্রাউজার ভিডিও এলিমেন্ট সাপোর্ট করে না।
</video>
widthএবংheight: ভিডিও প্লেয়ারের মাত্রা নির্ধারণ করে।controls: ভিডিও প্লে/পজ, ভলিউম কন্ট্রোল ইত্যাদি ডিফল্ট কন্ট্রোল যোগ করে।poster: ভিডিও লোড হওয়ার আগে যে ছবিটি দেখাবে, সেটি নির্ধারণ করে।<source>: একাধিক ভিডিও ফরম্যাট সমর্থন করে।
৩. PDF যোগ করার
ওয়েব ডেভেলপমেন্টের সময় অনেকবার প্রয়োজন হয় যে ব্যবহারকারীরা ওয়েবপেজে সরাসরি PDF দেখতে বা ডাউনলোড করতে পারবে। PDF হলো প্রায়ই রিসার্চ পেপার, রিপোর্ট, ই-বুক বা ইনভয়েস শেয়ার করার জন্য ব্যবহার করা ফরম্যাট। HTML-এ PDF এম্বেড বা লিঙ্ক করার জন্য বিভিন্ন পদ্ধতি রয়েছে। এই ব্লগে আমরা সেই সব পদ্ধতি বিস্তারিতভাবে ব্যাখ্যা করব।
1. PDF যোগ করার কারণ
PDF যোগ করার মূল কারণগুলো হলো:
ব্যবহারকারীকে সরাসরি ব্রাউজারে PDF দেখানোর সুবিধা দেওয়া।
ডাউনলোডের জন্য লিঙ্ক প্রদান করা।
ডকুমেন্টেশন, রিপোর্ট, টিউটোরিয়াল বা ফর্ম শেয়ার করা।
ওয়েবপেজে PDF যোগ করলে ব্যবহারকারীকে আরও ভালো UX (User Experience) দেওয়া যায়, কারণ তারা পেজ ছাড়াই ডকুমেন্টটি দেখতে পারবে।
HTML-এ PDF যোগ করার প্রধান চারটি পদ্ধতি রয়েছে:
পদ্ধতি 1: <embed> ট্যাগ ব্যবহার করা
<embed> ট্যাগটি HTML-এ মিডিয়া ফাইল বা ডকুমেন্ট এম্বেড করার জন্য ব্যবহার করা হয়। PDF দেখানোর জন্য এটি খুবই সহজ এবং কার্যকর।
উদাহরণ:
<embed src="example.pdf" type="application/pdf" width="700" height="500">
বিস্তারিত ব্যাখ্যা:
src: PDF ফাইলের পাথ। এটি ওয়েব সার্ভারে থাকতে হবে।
type:
application/pdfনির্দেশ করে যে ফাইলটি PDF।width & height: PDF ভিউয়ারের আকার।
লক্ষ্যণীয় বিষয়: <embed> ব্রাউজারের ডিফল্ট PDF ভিউয়ার ব্যবহার করে, তাই সব ব্রাউজারে একইভাবে দেখা নাও যেতে পারে।
পদ্ধতি 2: <iframe> ট্যাগ ব্যবহার করা
<iframe> ট্যাগ একটি আইফ্রেম তৈরি করে যা ওয়েবপেজের ভিতরে অন্য HTML বা ডকুমেন্ট এম্বেড করতে পারে। PDF দেখানোর জন্যও এটি ব্যবহার করা যায়।
উদাহরণ:
<iframe src="example.pdf" width="700" height="500"></iframe>
বিস্তারিত ব্যাখ্যা:
<iframe>ব্যবহার করলে PDF একটি ভিউয়ারের মধ্যে লোড হয়।ব্যবহারকারীরা স্ক্রল করে পুরো PDF দেখতে পারে।
এটি
<embed>এর চেয়ে বেশি কাস্টমাইজেবল, কারণ CSS দিয়ে আইফ্রেমের আকার, বর্ডার, স্ক্রল ইত্যাদি নিয়ন্ত্রণ করা যায়।
পদ্ধতি 3: <object> ট্যাগ ব্যবহার করা
<object> ট্যাগও PDF এম্বেড করার জন্য ব্যবহার করা হয়। এটি ব্যর্থ হলে ডাউনলোড লিঙ্ক দেখানোর সুবিধা দেয়।
উদাহরণ:
<object data="example.pdf" type="application/pdf" width="700" height="500">
<p>আপনার ব্রাউজার PDF দেখাতে পারছে না।
<a href="example.pdf">এখানে ক্লিক করে PDF ডাউনলোড করুন।</a>
</p>
</object>
বিস্তারিত ব্যাখ্যা:
data: PDF ফাইলের অবস্থান।
type:
application/pdf।<object>ট্যাগ ব্যর্থ হলে ভিতরের HTML কন্টেন্ট প্রদর্শন হয়। উদাহরণস্বরূপ, ডাউনলোড লিঙ্ক।এটি ব্যবহার করলে সব ব্রাউজারেই PDF দেখানোর চেষ্টা করা হয় এবং ব্যর্থ হলে বিকল্প ব্যবস্থা থাকে।
পদ্ধতি 4: লিঙ্ক ব্যবহার করে PDF খোলা
সবচেয়ে সাধারণ পদ্ধতি হলো <a> ট্যাগ ব্যবহার করা। এটি ব্যবহারকারীকে PDF ডাউনলোড বা নতুন ট্যাবে খোলার সুযোগ দেয়।
উদাহরণ:
<a href="example.pdf" target="_blank">PDF দেখুন</a>
বিস্তারিত ব্যাখ্যা:
href: PDF ফাইলের অবস্থান।
target="_blank": PDF নতুন ট্যাবে খোলে।
এটি খুবই সহজ এবং ব্রাউজার-নিরপেক্ষ পদ্ধতি।
ওয়েবপেজে এম্বেড নয়, শুধুমাত্র লিঙ্ক হিসেবে দেখানো হয়।
Responsive করা: আইফ্রেম বা এম্বেড ট্যাগের width কে 100% ও height নির্দিষ্ট পিক্সেলে বা vh অনুযায়ী দিন।
<iframe src="example.pdf" width="100%" height="80vh"></iframe>
ডাউনলোড লিঙ্ক দেওয়া: সব সময় ডাউনলোড লিঙ্ক রাখলে ব্যবহারকারীরা চাইলে ফাইল ডাউনলোড করতে পারবে।
ব্রাউজার কম্প্যাটিবিলিটি: সব ব্রাউজার PDF এম্বেড সমর্থন করে না, তাই ব্যাকআপ লিঙ্ক দেওয়া প্রয়োজন।
PDF ভিউয়ার প্লাগইন: যদি ওয়েবসাইটে অনেক PDF থাকে, আপনি JavaScript ভিত্তিক PDF ভিউয়ার (যেমন PDF.js) ব্যবহার করতে পারেন। এটি আরও উন্নত ফিচার দেয় যেমন পৃষ্ঠা নেভিগেশন, জুম, সার্চ ইত্যাদি।
অন্যান্য কিছু নতুন ও গুরুত্বপূর্ণ HTML5 ট্যাগ:
<details>এবং<summary>: ইন্টারঅ্যাক্টিভ উইজেট তৈরি করে যা ব্যবহারকারী ক্লিক করলে অতিরিক্ত তথ্য দেখায় বা লুকায়।HTML
<details> <summary>আরও জানুন</summary> <p>এটি একটি লুকানো কন্টেন্ট যা ক্লিক করলে দেখা যায়।</p> </details><mark>: টেক্সটের একটি অংশ হাইলাইট করতে ব্যবহৃত হয়।HTML
<p>এই টেক্সটের কিছু অংশ <mark>গুরুত্বপূর্ণ</mark>।</p><time>: তারিখ এবং সময় নির্দেশ করে। এটি সার্চ ইঞ্জিন এবং ক্যালেন্ডার অ্যাপ্লিকেশনের জন্য সহায়ক।HTML
<p>অনুষ্ঠানটি শুরু হবে <time datetime="2023-12-25 18:00">২৫শে ডিসেম্বর সন্ধ্যা ৬টায়</time>।</p><meter>: একটি পরিচিত পরিসরের মধ্যে স্কেলার পরিমাপ প্রদর্শন করে (যেমন ডিস্ক ব্যবহার)।HTML
<label for="disk_c">Disk C ব্যবহার:</label> <meter id="disk_c" value="6" min="0" max="10">6 out of 10</meter><progress>: একটি টাস্কের অগ্রগতির নির্দেশক (প্রগ্রেস বার) তৈরি করে।HTML
<label for="file">ডাউনলোড অগ্রগতি:</label> <progress id="file" value="32" max="100"> 32% </progress><figure>এবং<figcaption>: স্ব-নিহিত কন্টেন্ট (যেমন ছবি, কোড, ডায়াগ্রাম) এর জন্য ব্যবহৃত হয় এবং<figcaption>সেই কন্টেন্টের জন্য ক্যাপশন সরবরাহ করে।HTML
<figure> <img src="example_chart.png" alt="একটি চার্টের উদাহরণ"> <figcaption>চিত্র ১: মাসিক বিক্রয় চার্ট</figcaption> </figure><dialog>: একটি ডায়ালগ বক্স বা পপ-আপ উইন্ডো তৈরি করে।HTML
<dialog open> <p>এটি একটি ডায়ালগ বক্স।</p> <form method="dialog"> <button>বন্ধ করুন</button> </form> </dialog>(
openঅ্যাট্রিবিউট ছাড়া এটি ডিফল্টরূপে লুকানো থাকে এবং জাভাস্ক্রিপ্ট দিয়ে খোলা হয়।)
এইচটিএমএল এর প্রয়োজনীয়তা
এইচটিএমএল জানা কেন জরুরি? কারণ:
ওয়েব ডেভেলপমেন্টের ভিত্তি: প্রতিটি ওয়েবসাইট এইচটিএমএল দিয়েই শুরু হয়। এটি ছাড়া কোনো ওয়েবপেজ তৈরি করা সম্ভব নয়।
এস.ই.ও (SEO) এর জন্য গুরুত্বপূর্ণ: সঠিক এইচটিএমএল কাঠামো সার্চ ইঞ্জিনকে আপনার ওয়েবসাইট বুঝতে সাহায্য করে, যা এস.ই.ও-এর জন্য অপরিহার্য।
ফ্রন্ট-এন্ড ডেভেলপমেন্ট: ফ্রন্ট-এন্ড ডেভেলপারদের জন্য এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট হলো প্রধান তিনটি ভাষা।
মাল্টিমিডিয়া ইন্টিগ্রেশন: HTML5 এর নতুন ট্যাগগুলো অডিও, ভিডিও এবং অন্যান্য ইন্টারেক্টিভ উপাদান যুক্ত করা অনেক সহজ করে দিয়েছে, যা আধুনিক ওয়েবসাইটের জন্য অত্যন্ত গুরুত্বপূর্ণ।
এইচটিএমএল শিখতে শুরু করা খুবই সহজ। এটি ওয়েবের প্রধান ভিত্তি এবং এর মাধ্যমেই আমরা ইন্টারনেটে যা কিছু দেখি, তার কাঠামো তৈরি হয়। উপরে দেওয়া উদাহরণগুলো দিয়ে আপনি নিজেই চেষ্টা করতে পারেন। মনে রাখবেন, HTML হলো প্রথম ধাপ, এর পর শিখতে হবে CSS (ডিজাইনের জন্য) এবং JavaScript (কার্যকারিতার জন্য)। HTML5 এর নতুন ট্যাগগুলো ব্যবহার করে আপনি আপনার ওয়েবসাইটকে আরও আধুনিক এবং ইন্টারেক্টিভ করে তুলতে পারবেন। শুভ কামনা!
