ওয়ার্ল্ড ওয়াইড ওয়েব কন্সর্টিয়াম এইচটিএমএল ৫ ভার্সনে যে নতুন ট্যাগ ইলিমেন্ট এর সন্নিবেশ ঘটিয়েছেন সেটাই বর্তমান ওয়েব জগতের পরিবর্তনের একমাত্র কারণ হবে। বলে রাখা ভাল,যদি কেউ এইচটিএমএল ৫ এর ট্যাগ ইলিমেন্টগুলো ব্যবহার নাও করে তবেও তিনি পুরো একটি ওয়েব পেজ তৈরী করতে পারবেন। যদিও বর্তমান এইচটিএমএল ৫ ভার্সনের কিছু কিছু ট্যাগের পুরোপুরি কাজ করতে হলে জাভাস্ক্রিপ্ট এর ব্যবহার জানতে/করতে হবে। তাই এক্ষেত্রে আমরা এখানে জাভাস্ক্রিপ্ট এর ব্যবহার জানা ছাড়া শুধু মাত্র যে ট্যাগ ইলিমেন্ট এর কাজ করা যায় সেগুলো নিয়ে জানবো…

ডিটেইলস (<details>) ট্যাগঃ অনেক গুলো লিখাকে যদি একটি গ্রুপ আকারে দেখাতে চান তবে ডিটেইলস ট্যাগ ইউজ করে করার যাবে। ডিটেইলস ট্যাগ নিচের সামারি ট্যাগের সাথে কম্বাইন করে দেখানো হল…

সামারি (<summary>) ট্যাগঃ অনেক গুলো লিখাকে সামারি আকারে দেখাবে, মানে, ধরুন আপনি ৫-৭ লাইনের একটি পারাগ্রাফ লিখেছেন। কিন্তু আপনি চাইছেন আপনার সেই পারাগ্রাফ যে হেডিং থাকবে সেইই প্রদর্শন করবে সারাধন ভাবে। যখন ভিজিটর বা ইউজার উক্ত হেডিং এ ক্লিক করবে তখন সেটি ড্রপডাউন আকারে নিচের প্রদর্শন করবে। নিচের Example টি খেয়াল করুনঃ

<details>

<summary> &copy; Copyright 2012</summary>

<p>All right reserved by Someone.</p>

<p>This site developed by Ariful Islam Shaon!</p>

</details>

মার্ক <mark> ট্যাগঃ কোন নির্দিষ্ঠ ওয়ার্ড বা সেন্টেন্সকে মার্ক করে দেখানোর জন্য মার্ক (<mark>) ট্যাগ ইউজ হয়। নিচের Example টি খেয়াল করুনঃ

<mark>This is mark tag!</mark>

মিটার <meter> এবং প্রোগ্রেস <progress> ট্যাগঃ মিটার আর প্রোগ্রেস ট্যাগ এর কাজ কিছুটা একই। মিটার আর প্রোগ্রেস ট্যাগের অ্যাট্রিবিউট এবং ভাল্যু নির্ধারন করে দিবার পরেই এই ট্যাগ কার্যকর হয়। নিচের Example টি খেয়াল করুনঃ

 Meter: <meter value=”3″ min=”0″ max=”10″>3 out of 10</meter>

<br />

Progress bar: <progress max=”100″ value=”50″></progress>

টাইম <time>  ট্যাগঃ ধরুন আপনি সাইট এর কোন পেজে সময় এবং তারিখ উল্লেখ করবেন। আপনি চাইলে নরমাল ভাবে 29/07/2012 at 10.20pm লিখতে পারবেন। এবার এই লিখাটিকে ট্যাগের মধ্যে রেখেও লিখতে পারবেন। যদিও ভিজুয়ালি কোন বৈশাদৃশ্য খুঁজে পাবেন না। তারপরেও আপনি সিএসএস দিয়ে এই অংশটুকু আলাদা ভাবে ডিজাইন করে নিতে পারবেন। 

<time>29/07/2012 at 5.20pm</time>

অডিও ভিডিও এবং সোর্স ট্যাগঃ অডিও ভিডিও এবং সোর্স ট্যাগগুলো নিয়ে আর বলার অপেক্ষা রাখে না এসব কি কাজের। আপনার ওয়েব পেজে এইগুলো ইন্সার্ট করতে নিচের কোড গুলো ফলো করুনঃ

<audio controls=”controls”>

<source src=”movie.mp3″ type=”audio/mp3″ />

</audio>

<br />

<video width=”360″ height=”240″ controls=”controls”>

 <source src=”movie.mp4″ type=”video/mp4″ />

</video>

Note: উপরের অডিও এবং ভিডিও ট্যাগ গুলো ইউজ করে অডিও বা ভিডিও অ্যাড করতে চাইলে অবশ্যই সোর্স ট্যাগ এবং অডিও বা ভিডিও ট্যাগের শুরুতে অ্যাট্রিবিউট controls=”controls” অ্যাড করে নিতেই হবে। নয়তো অডিও বা ভিডিও শো করবে না।

এবার, উপরের কোডগুলোর আউটপুট ব্রাউজার এ প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু কপি-পেস্ট করুন। ফাইলের নাম দিন html5b.html বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। বুঝতে কোথাও সমস্যা হলে আমার ফেসবুক গ্রুপে, পেজে অথবা ব্লগের জিজ্ঞাসা পাতা’য় জানাতে পারেন।  🙂