HTML টিউটোরিয়াল: ১৩তম পর্ব (HTML5 Tags)

Print Friendly

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

ডিটেইলস (<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 করুন। বুঝতে কোথাও সমস্যা হলে আমার ফেসবুক গ্রুপে, পেজে অথবা ব্লগের জিজ্ঞাসা পাতা’য় জানাতে পারেন।  🙂

Print Friendly

ট্যাগ সমূহঃ

লেখক: আরিফুল ইসলাম শাওন

আরিফুল ইসলাম শাওন, ডাক নামেই বেশি পরিচিত। জন্ম থেকে রংপুরে থাকি। বর্তমানে হিসাববিজ্ঞান নিয়ে জাতীয় বিশ্ববিদ্যালয়ের অধিনে গ্রাজুয়েশন সম্পন্ন করেছি। ফ্রিলান্সিং পেশায় আছি গত ৭ বছর থেকে। নিজের আইটি ফার্ম রংপুরসোর্স এর সিইও এর দায়িত্ব পালন করছি। পাশাপাশি ব্লগিং করছি আমার ইংরেজি ব্লগে। আপনার ফ্রীলান্সিং বা প্রযুক্তি নিয়ে যেকোন প্রয়োজন জানাতে পারেন ফেসবুক গ্রুপ এ। আমাকে ফেসবুকে পাবেন এখানেটুইটারে অনুসরণ করতে পারেন। আমার সম্পর্কে আরো বিস্তারিত এখানে। অথবা আমাকে যেকোন বিষয়ে প্রশ্ন করতে পারেন আমার ব্লগের "জিজ্ঞাসা?" পাতায়।

সম্পূর্ণ প্রোফাইল দেখুন!

বাংলা ভাষায় ওয়েব ডিজাইন, ডেভেলপমেন্ট, ডেক্সটপ অ্যাপ্লিকেশান ডেভেলপমেন্ট শিখতে চান? আমরা রংপুর সোর্স আপনার জন্য হাই কোয়ালিটি এবং প্রোফেসনাল মানের প্রোজেক্ট এবং রিসোর্স ভিত্তিক ভিডিও টিউটোরিয়াল প্রকাশ করছি। আপনি আমাদের থেকে থেকে ভিডিও গুলো পেতে চাইলে অবশ্যই ক্রয় করতে হবে। তবে, ক্রয় করবার পূর্বে ভিডিও দেখে নিতে পারেন এজন্য আমরা আপনাকে দিচ্ছি ৩০ শতাংশ ফ্রী ভিডিও যেকোনো ভিডিও কোর্সের জন্য। ভিডিও কোয়ালিটি এবং প্রেজেন্টেশান দেখে আপনি সন্তুষ্ট হলে, তবেই বাকি টিউটোরিয়াল গুলোর ডিভিডি বা সিডি অর্ডার করুন! জেনে রাখা ভাল, আমাদের একেকটি ভিডিও কোর্স উক্ত ক্ষেত্রে প্রোফেসনালদের দ্বারাই তৈরি করা। তাই আপনি প্রোফেসনাল কাজ শিখবেন সেই দৃষ্টিকোণ থেকে আমাদের ভিডিও টিউটোরিয়াল গুলো ক্রয় করবেন!

Leave a Reply

Your email address will not be published. Required fields are marked *