«

»

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

</object>

</article>

</body>

</html>

 

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

 


এ সম্পর্কিত আরো কিছু টুইট:

মন্তব্য দিনঃ

comments

About the author

জাকির হোসাইন

প্রোগ্রামিং বা ফ্রীল্যান্সিং নিয়ে কোন প্রশ্ন থাকলে টেকটুইটস সাহায্য বিভাগে পোস্ট দিতে পারেন অথবা আমাকে ফেসবুকে মেসেজ দিতে পারেন।

Permanent link to this article: http://techtweets.com.bd/web-developing/jakirbdl/5829

6 comments

4 pings

Skip to comment form

  1. zahid hassan

    অনেক ভাল হয়েসে ধন্যযোগ ।

    1. ঐ ছেলেটি
      jakir

      আপনাকে ও ধন্যবাদ।

  2. MNUWORLD

    অনেক ভাল লাগলো জাকির ভাই। চালিয়ে যান।

    1. ঐ ছেলেটি
      jakir

      ধন্যবাদ ভাই।

  3. Mehedi

    অনেক ভাল লাগলো জাকির ভাই। চালিয়ে যান।

  4. kedar2222

    প্রিয় বন্ধু জাকির, …..আপনার পোষ্টটি খুবই ভালো হয়েছে…… এই পোষ্টটি সুন্দর ও কাজের পোষ্ট………. শেয়ার করার জন্ন আপনাকে ধন্নবাদ………..

  1. HTML শিখুন HTML5 সহ [পর্ব-10] Intro to HTML5 » টেকটুইটস

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

  2. HTML শিখুন HTML5 সহ [পর্ব-9] HTML STYLE » টেকটুইটস

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

মন্তব্য করুন