HTML5 এ নতুন ট্যাগ সমূহঃ
| <article> |
| <aside> |
| <command> |
| <details> |
| <summary> |
| <figure> |
| <figcaption> |
| <footer> |
| <header> |
| <hgroup> |
| <mark> |
| <meter> |
| <nav> |
| <progress> |
| <ruby> |
| <rt> |
| <rp> |
| <section> |
| <time> |
| <wbr> |
| <audio> |
| <video> |
| <source> |
| <embed> |
| <canvas> |
এ গুলোর ব্যবহার নিয়ে আস্তে আস্তে লিখব। আজ কিছু লিখিঃ
প্রথমেই <article> ট্যাগ নিয়ে শুরু করিঃ
<article> ট্যাগ হচ্ছে একটি Section Element. যা HTML5 এ নতুন। <article> ট্যাগ দ্বারা নির্দিষ্ট একটি ওয়েব পেইজে কিছু উপাদান, পোস্ট, এপলিকেশন, ফোরাম পোস্ট, পত্রিকার খবর ইত্যাদি দেখানো যায়। এর ব্যবহার হচ্ছে স্ট্যাটিক পেইজ গুলোতে, যেখানে নিচের বিষয় গুলো সহযেই ব্যবহার করা যাবেঃ
- একটি ব্লগের মত পোস্ট
- ব্লগের বা অন্যান্য মন্ত্যব্য
- ফোরামের পোস্ট
- পত্রিকা বা ম্যাগাজিনের পোস্ট ইত্যাদি
আবার ইচ্ছে করলে এ গুলো সবই একই সাথে একটি ওয়েব পেইজে ব্যবহার করা যাবে।
<article> ট্যাগটি লেখার নিয়মঃ
| <!DOCTYPE HTML>
<html> <body> <article> <h1>TechTweets</h1>
|
এখানে ফলাফল আর দেওয়া হবে না। আপনারা কোড গুলো একটি নোটপ্যাডে নিয়ে তারপর ব্রাউজারে টেস্ট করে দেখবেন, তাহলেই ফলাফল দেখতে পারবেন।
<article> ট্যাগের ভিতর <body> আর < html> ট্যাগ ছাড়া সকল ট্যাগ ব্যবহার করে একটি আলাদা বা স্বাধীন উপাদান যোগ করা যাবে।
যেমন একটি ব্লগের পোস্ট দেওয়ার জন্য নিচের মত করে লেখা যেতে পারেঃ
| <!DOCTYPE HTML>
<html> <body> <article> <header> <h1> Technology blog <b>TechTweets</b></h1> <p>Published: <time pubdate="pubdate">22-05-2011</time></p> </header> <p> TechTweets is a technology blog, where many writer writes many articles about Technology.</p> <footer> <p><small> License under Creative Commons.</small></p> </footer> </article> </body> </html> |
এখানে নতুন একটি Attribute – pubdate ব্যবহার করা হয়েছে এটি একটি boolean attribute যা সময় উপাদান গুলোর মধ্যে ব্যবহার করা হয়।
আপনি ইচ্ছে করলে একটি একটি পেইজে একের অধিক <article> ট্যাগ ব্যবহার করতে পারবেন। আবার একটি <article> এর ভিতর আরেকটি <article> ট্যাগ ব্যবহার করতে পারবেন। আবার একটি <section> ট্যাগ ব্যবহার করে ও তার ভিতর <article> ট্যাগ ব্যবহার করতে পারবেন।
তার জন্য নিছের উদাহরন দেখুনঃ
| <!DOCTYPE HTML>
<html> <body> <section> <h1>Bnagle Technology Blog.</h1> <article> <h2>TechTweets</h2> <p>TechTweets is the best bangle technology blogging site. </p> </article> <article> <h2>Techtunes</h2> <p>Another and first bangle technology blog site.</p> </article> </section> </body> </html>
|
<article> ট্যাগ ব্যবহার করে উইজেট দেওয়াঃ আমরা ভিবিন্ন সাইট ভিজিট করলে সাইড বারে যে সকল তথ্য দেখি তাই হচ্ছে উইজেট, <article> ট্যাগ ব্যবহার করে সহজেই একটি সাইটের জন্য উইজেট দিতে পারেন। তার জন্য নিচের উদাহরন দেখুনঃ
|
<!DOCTYPE HTML> <html> <body> <article> <h1>Simple widget</h1> <object> <param name=”allowFullScreen” value=”true”> <h2 ” width=”600″ height=”395″> <a href=”http://example.com.bd”> Welcome to Techtweets </a></h2> </object> </article> </body> </html> |
ওহ!! শুধু মাত্র <article> নামক একটি ট্যাগের জন্য লিখতে গিয়েই এত কিছু লিখা লাগছে। আল্লাহই জানে সব গুলো লিখব কিভাবে। যাই হোক এর পর HTML5 এর আরো ট্যাগ ও তাদের ব্যবহার নিয়ে আসব। সেই কামনায় ধন্যবাদ সবাইকে।
thank you so much for your helpful attempt!