HTML শিখুন HTML5 সহ [পর্ব-11] নতুন Element

HTML5 সম্পর্কে এর আগের টুইটে অনেক কিছু বললাম। না দেখে থাকলে দেখে আসতে পারেন।

HTML শিখুন HTML5 সহ [পর্ব-10] Intro to HTML5

এখন একটু এর ইলিম্যান্ট, ট্যাগ ইত্যাদি সম্পর্কে জানি।

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>
<p>TechTweets is a technology blog, where many writer writes many articles about Technology</p>
</article>
</body>
</html>

 

 

এখানে ফলাফল আর দেওয়া হবে না। আপনারা কোড গুলো একটি নোটপ্যাডে নিয়ে তারপর ব্রাউজারে টেস্ট করে দেখবেন, তাহলেই ফলাফল দেখতে পারবেন।

<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 " height="395"> <a href="http://techtweets.com.bd"> Welcome to Techtweets </a></h2>

</object>

</article>

</body>

</html>

 

ওহ!! শুধু মাত্র <article>  নামক একটি ট্যাগের জন্য লিখতে গিয়েই এত কিছু লিখা লাগছে। আল্লাহই জানে সব গুলো লিখব কিভাবে। যাই হোক এর পর HTML5 এর আরো ট্যাগ ও তাদের ব্যবহার নিয়ে আসব। সেই কামনায় ধন্যবাদ সবাইকে।

 

Level 0

আমি জাকির হোসাইন। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর 8 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 224 টি টিউন ও 1487 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 5 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

পৃথিবীতে অল্পকয়েক দিনের জন্য অনেকেই আসে, হেঁটে খেলে চলে যায়। এর মধ্যে অল্প কয়েক জনই পায়ের চাপ রেখে যায়।ওদের একজন হতে ইচ্ছে করে। প্রযুক্তির আরেকটি সেরা ব্লগ টেকটুইটস। আপনাদের স্বাগতম, যেখানে প্রতিটি বন্ধুর অংশ গ্রহনে গড়ে উঠেছে একটি পরিবার। আপনাদের পছন্দ হবে আশা করি। ফেসবুকে আমি - ?জাকির!


টিউনস


আরও টিউনস


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


টিউমেন্টস