সহজে শিখুন এইচটিএমএল ৫ (পর্ব ১)

আজ আমি HTML 5 (এইচটিএমএল ৫)- এর খুঁটিনাটি নিয়ে আলোচনা করব। যারা HTML (এইচটিএমএল)- সম্পর্কে অথবা HTML 5 (এইচটিএমএল ৫)- সম্পর্কে জানেন না বা কিছু জানেন; আশা করি তারা এ সম্পর্কে মোটামোটি ধারণা নিতে পারবেন অর্থাৎ তাদের জন্য টিউনটি কিছুটা হলেও উপকারে আসতে পারে, তাই সবটুকু পড়ার আমন্ত্রণ রইল।

HTML (এইচটিএমএল) কি ?

নতুনদের মনে প্রশ্ন জাগতে পারে যে, HTML (এইচটিএমএল) আবার কি ? যা অনেকের মুখে শুনা যায় ! তাদের উদ্দেশে আমি বলছি; HTML (এইচটিএমএল) হল এক প্রকার Markup Language (মার্কআপ ল্যাঙ্গুয়েজ), অর্থাৎ এটির মাধ্যমে কোন একটি ওয়েব পেইজের Markup (মার্কআপ) তথা মূল কাঠামো গঠন করা হয়। যার পূর্ণ নাম হচ্ছে Hyper Text Markup Language (হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ)।

তাছাড়া HTML (এইচটিএমএল) কত গুলো ট্যাগের সমন্বয়ে গঠিত, যা কোন ওয়েব পেইজের Markup (মার্কআপ) তথা কাঠামো গঠন করে, আর এই Markup (মার্কআপ) ট্যাগ এর কাজ হল কোন ওয়েব পেইজের বিভিন্ন ইলিমেন্ট কিভাবে প্রদর্শিত হবে তা নির্দেশ করা। একটি ওয়েব পেইজের ইলিমেন্ট যথাক্রমেঃ টেক্সট, ইমেজ, অডিও, ভিডিও ইত্যাদি।

HTML (এইচটিএমএল) কেন প্রয়োজন ?

একটি ওয়েব পেইজ বা কোন একটি ওয়েব সাইট তৈরি করতে HTML (এইচটিএমএল)- এর গুরুত্ব অপরিসীম। কেননা; যেহেতু HTML (এইচটিএমএল) কোন একটি ওয়েব পেইজের Markup (মার্কআপ) অর্থাৎ মূল কাঠামো গঠন করে, সেহেতু কোন ওয়েব পেইজ ডিজাইন করতে অথবা ওয়েবসাইট তৈরি করতে HTML (এইচটিএমএল) এর বিকল্প কিছু নেই।

HTML (এইচটিএমএল) এর ইতিহাস

বহুল ব্যবহারিত আজকের এই HTML (এইচটিএমএল) আমাদের নিকট আপনা-আপনি চলে আসে নাই এটির পেছনেও রয়েছে এক বিশাল ইতিহাস, HTML (এইচটিএমএল) এর সৃষ্টি কর্তা হলেন- ইউরোপীয় বিজ্ঞানী স্যার টিম বার্নাস লী

তিনি ১৯৮০ সালে CERN এ একজন বিশেষজ্ঞ থাকাকালীন CERN গবেষকদের মাঝে তথ্য শেয়ারের জন্য ENQUIRE Prototyped নামে একটি System এর প্রস্তাব দেন।

তারপর, ১৯৮৯ সালে স্যার টিম বার্নাস লী ইন্টারনেট ভিত্তিক একটি Hyper Text (হাইপার টেক্সট) সিস্টেম প্রস্তাবে একটি মেমো লিখেন। এবং ১৯৯০ সালে স্যার টিম বার্নাস লী ব্রাউজারের ও সার্ভারের সফটওয়্যারের HTML (এইচটিএমএল) উল্লেখ্য করেন। তারপর এই বছরেই স্যার টিম বার্নাস লী ও CERN এর তথ্য ইঞ্জিনিয়ার Robert Cailliau যৌথ ভাবে CERN কে এ প্রকল্পের জন্য অর্থায়নের অনুরোধ করেন কিন্তু প্রকল্পটি আনুষ্ঠানিক ভাবে CERN দ্বারা গৃহীত হয়নি।

তবে HTML (এইচটিএমএল) পরিচিতি লাভ করে একই সালে NCSA কর্তৃক ডেভেলপকৃত মোজাইক ব্রাউজারের মাধ্যমে।

তাছাড়া স্যার টিম বার্নাস লী অলাভজন জনসেবামূলক প্রতিষ্ঠান ওয়ার্ল্ড ওয়াইড ওয়েব এর তত্ত্বাবধায়ক ওয়ার্ল্ড ওয়াইড ওয়েব কনসোটিয়াম (W3C) এর ডিরেক্টর। ওয়ার্ল্ড ওয়াইড ওয়েব কনসোটিয়াম কর্তৃক ডেভেলপকৃত HTML 3.2 প্রকাশিত হয় ১৯৯৭ সালের জানয়ারিতে ও একই সনের শেষের দিকে প্রকাশ হয় HTML 4.2 এবং HTML (এইচটিএমএল) এর সর্বশেষ সংস্করণ তথা HTML 5 প্রকাশিত হয় ২০১০ সালে।

HTML 5 (এইচটিএমএল ৫) কি ?

HTML 5 (এইচটিএমএল ৫) হচ্ছে HTML (এইচটিএমএল) এর সর্বশেষ সংস্করণ। যা ২০১০ সালে প্রকাশিত হয় এবং এখন পর্যন্ত পরবর্তী কোন সংস্করণ আসে নি।

HTML 5 (এইচটিএমএল ৫) এ নতুন কিছু বৈশিষ্ট্যঃ

০১. মিডিয়া প্লেব্যাকের জন্য <audio> ও <video> উপাদান যুক্ত।

০২. 2D আঁকার জন্য <canvas> উপাদান যুক্ত।

০৩. স্থানীয় সংগ্রহস্থলের জন্য সমর্থন।

০৪. নতুন ফর্ম নিয়ন্ত্রণ, যেমন ক্যালেন্ডার, তারিখ, সময়, ই-মেইল, অনুসন্ধান, ইউআরএল  ইত্যাদি।

০৫. নতুন নির্দিষ্ট বিষয়বস্তুর উপাদান, যেমনঃ <header>, <footer>,  <nav>, <article> ইত্যাদি।

HTML 5 (এইচটিএমএল ৫) এর কিছু নিয়মঃ

০১. উন্নত ত্রুটি পরিচালনার ব্যবস্থা থাকতে হবে।

০২. নতুন বৈশিষ্ট গুলো এইচটিএমএল, সিএসএস, DOM এবং জাভাস্ক্রিপ্টের উপর ভিত্তি করে তৈরি করা।

০৩. একাধিক স্ক্রিপ্টিং প্রতিস্থাপন করার সুবিধা যুক্ত করা।

০৪. আলাদা প্লাগিনের ব্যবহার কমাতে হবে (যেমন: ফ্ল্যাশ)।

০৫. HTML 5 (এইচটিএমএল ৫) এর স্বাধীন ডিভাইস হতে হবে।

০৬. উন্নয়ন প্রক্রিয়ায় জনগণের কাছে দৃশ্যমান হবে।

HTML 5 (এইচটিএমএল ৫) এর জন্য ব্রাউজার সাপোর্ট

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

HTML 5 ব্যবহার করে  একটি প্রোগাম করবে :

আমরা খুব সহজে Notepad++ এ লিখে Web page তৈরী করতে পারি। এজন্য আমদের Notepad Open করতে হবে। প্রথমে

Start মেনু    All Programs > Accessories >Notepad++, তারপর Notepad++ হবার পর নিম্নের কোডটি লিখবো:

 

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5</title>
<meta charset="utf-8">

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header, nav, section, article, footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>

</head>

<body>

<header>
<h1>HTML5</h1>
</header>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

<section>
<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
<figure>
<img src="http://otake.com.mx/Wallpapers/Html5-01-1600x1200.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig.1 - The Pulpit Rock, Norway.</figcaption>
</figure>
</section>

<footer>
<p>Desing by: <a href="https://www.facebook.com/profile.php?id=100000093035981">Subrata Deb Nath</a></p>
<p>Contact information: <a href="mailto:info.sbtechbd.com">
info.sbtechbd.com</a>.</p>
</footer>

</body>
</html>

এভাবে লেখার পর Notepad++ এর ফাইল মেনু হতে save এ ক্লিক করব তারপর index.html নামে save করব।সেভ করা ফাইলটিকে Double click করে open করবো। দেখবো যে লেখাটি Browser এ open হয়েছে। খুব সহজে একটা web Page তৈরী হয়ে গেলো।

HTML5 এর নতুন শব্দার্থিক উপাদানসমূহ

অনেক ওয়েবসাইট মত HTML কোড ধারণ করে: <div id="nav"> <div class="header"> <div id="footer">
নির্দেশ করে navigation, header, and footer.

HTML5 এর একটি ওয়েব পৃষ্ঠার বিভিন্ন অংশে সংজ্ঞায়িত করতে নতুন শব্দার্থিক উপাদান উপলব্ধ করা হয়:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>
HTML5 Semantic Elements

প্রোগ্রামগুলো পড়ে বোঝার চেষ্টা করুন এবং নিজে নিজে এরকম আরও প্রোগ্রাম বানিয়ে ফেলুন। বুঝতে না পারলে টিউমেন্টে করুন  । সাধ্যমত সমস্যা সমাধানের চেষ্টা করব। আজ আর না। টিউনটি পড়ার জন্য অসংখ্য ধন্যবাদ।

ফেইসবুকে : সুব্রত দেব নাথ 

Level 0

আমি Subrata deb nath। Full Stack Web Developer, Sbtechbd Technology, Dhaka। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 4 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 25 টি টিউন ও 13 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

bro plz help me amr website itdesh problem holo website ta html 5 dea korsi but seo te result ase amar ta naki html 5 dea kora hoe nai