การเดินทาง HTML5

HTML4 থেকে HTML5-এ স্থানান্তরিত

এই চপ্তর একটি সাধারণ HTML4 পাতা থেকে সাধারণ HTML5-এ কিভাবে স্থানান্তরিত হয় বুঝতে সাহায্য করে。

এই চপ্তর একটি বর্তমান HTML4 পাতা কিভাবে HTML5 পাতায় রূপান্তরিত করা যায় দেখায়, যেখানে মূল বিষয় এবং কাঠামো ক্ষতিগ্রস্ত না হয়。

মন্তব্য:আপনি একই কৌশলগুলি ব্যবহার করে HTML4 এবং XHTML থেকে HTML5-এ স্থানান্তরিত করতে পারেন。

সাধারণ HTML4 সাধারণ HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>

সাধারণ HTML4 পাতা

প্রকল্প

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<style>
  body {font-family:Verdana,sans-serif;font-size:0.8em;}
  div#header,div#footer,div#content,div#post 
  {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
  div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
  div#content {background-color:#ddd;}
  div#menu ul {margin:0;padding:0;}
  div#menu ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<div id="header">
  <h1>Monday Times</h1>
</div>
<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</div>
<div id="content">
<h2>News Section</h2>
<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</div>
<div id="footer">
  <p>© 2014 Monday Times. All rights reserved.</p>
</div>
</body>
</html>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

এইচটিএমএল৫ Doctype হিসাবে পরিবর্তন করুন

এইচটিএমএল৪ doctype হিসাবে পরিবর্তন করুন:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

এইচটিএমএল৫ doctype হিসাবে পরিবর্তন করুন:

<!DOCTYPE html>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

এইচটিএমএল৫ কোডিং হিসাবে পরিবর্তন করুন

এইচটিএমএল৪ এর কোডিং তথ্যকে পরিবর্তন করুন:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

এইচটিএমএল৫ হিসাবে পরিবর্তন করুন

<meta charset="utf-8">

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

shiv যোগ করুন

সমস্ত আধুনিক ব্রাউজার এইচটিএমএল৫ সেম্যান্টিক ইলেকট্রনিক সমাবেশকে সমর্থন করে

এছাড়া, পুরানো ব্রাউজারকে "অপরিচিত ইলেকট্রনিক সমাবেশ" নিয়ে কাজ করার জন্য "শিক্ষা দেওয়া" হতে পারে

ইন্টারনেট এক্সপ্লোরারের সমর্থনের জন্য যোগ করা shiv:

<![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

মন্তব্য:এইচটিএমএল৫ ব্রাউজারের সমর্থনের বিষয়ে আরও জানুন

এইচটিএমএল৫ সেম্যান্টিক ইলেকট্রনিক সমাবেশের জন্য CSS যোগ করুন

সম্পূর্ণ CSS শৈলী দেখুন:

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}
এইচটিএমএল৫ সেম্যান্টিক ইলেকট্রনিক সমাবেশের জন্য একই সাথে সাথে সাজানো CSS শৈলীর পালন করুন:
header,footer,section,article {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul  {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

এইচটিএমএল৫ <header> এবং <footer> হিসাবে পরিবর্তন করুন

id="header" এবং id="footer" এর <div> ইলেকট্রনিক সমাবেশকে:

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© ২০১৬ CodeW3C.com. সমস্ত অধিকার সংরক্ষিত。</p>
</div>

এটা HTML5 মানবিক এলিমেন্ট <header> এবং <footer> হিসাবে পরিবর্তন করুন:

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. All rights reserved.</p>
</footer>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

HTML5 <nav> হিসাবে পরিবর্তন করুন:

id="menu"-এর <div> এলিমেন্টকে:

<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</a></li>
    <li>Weather</li>
  </ul>
</div>

এটা মানবিক এলিমেন্ট <nav> হিসাবে পরিবর্তন করুন:

<nav>
  <ul>
    <li>News</li>
    <li>Sports</a></li>
    <li>Weather</li>
  </ul>
</nav>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

HTML5 <section> হিসাবে পরিবর্তন করুন:

id="content"-এর the <div> এলিমেন্টকে:

<div id="content">
.
.
.
</div>

এটা মানবিক এলিমেন্ট <section> হিসাবে পরিবর্তন করুন:

<section>
.
.
.
</section>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

HTML5 <article> হিসাবে পরিবর্তন করুন:

class="post"-এর সকল <div> এলিমেন্টকে:

<div class="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

এটা মানবিক এলিমেন্ট <article> হিসাবে পরিবর্তন করুন:

<article>
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</article>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

এই "আর দোষ্টা না হওয়া" শৈলীটি মুছে দিন:

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

সাধারণ HTML5 পাতা

শেষবন্ধনীতে <head> ট্যাগটি মুছতে পারেন। HTML5-এ তারা প্রয়োজন নেই:

প্রকল্প

<!DOCTYPE html>
<html lang="en">
<title>HTML5</title>
<meta charset="utf-8">
<![if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {
    font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
    border:1px solid grey;
    margin:5px;margin-bottom:15px;padding:8px;
    background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}
</style>
<body>
<header>
  <h1>Monday Times</h1>
</header>
<nav>
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</nav>
<section>
<h2>News Section</h2>
<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
<h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</section>
<footer>
  <p>© 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
</html>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

article section এবং div এর মধ্যে পার্থক্য

HTML5 ইতিহাসে, article section এবং div এর মধ্যে মাথা ভরতে হয়, ছোট পার্থক্য রয়েছে।

HTML5 ইতিহাসে, section ইলেকট্রন কে সংশ্লিষ্ট ইলেকট্রন এর ব্লক হিসাবে স্থাপন করা হয়েছে।

article ইলেকট্রন কে সংশ্লিষ্ট ইলেকট্রন এর সম্পূর্ণ আবর্তিত ব্লক হিসাবে সংজ্ঞায়িত করা হয়েছে।

div ইলেকট্রন কে সাব-ইলেকট্রন এর ব্লক হিসাবে সংজ্ঞায়িত করা হয়েছে।

কিভাবে বুঝা যাবে?

উপরের উদাহরণে, আমরা section কে সংশ্লিষ্ট articles এর কাপড় হিসাবে ব্যবহার করেছিলাম।

কিন্তু, আমরা article কে আরও একটি নিবন্ধ কাপড় হিসাবে ব্যবহার করতে পারি।

নিচে কিছু ভিন্ন উদাহরণ:

article  এর  article:
<article>
<h2>বিখ্যাত শহর</h2>
<article>
<h2>লন্ডন</h2>
<p>লন্ডন ইংল্যান্ডের রাজধানী শহর। এটি যুক্তরাজ্যের সর্ববৃহৎ শহর,</p>
<p>যার মেট্রোপলিটান এলাকার জনসংখ্যা ১৩ মিলিয়নের বেশি।</p>
</article>
<article>
<h2>প্যারিস</h2>
<p>প্যারিস ফ্রান্সের রাজধানী এবং সর্ববৃহৎ জনবহুল শহর。</p>
</article>
<article>
<h2>টোকিও</h2>
<p>টোকিও জাপানের রাজধানী, গ্রেটার টোকিও এলাকার কেন্দ্রবিন্দু,</p>
এবং বিশ্বের সর্ববৃহৎ জনবহুল মেট্রোপলিটান এলাকা。</p>
</article>
</article>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

<article> তে <div>：</article>
<article>
<h2>বিখ্যাত শহর</h2>
<div class="city">
<h2>লন্ডন</h2>
<p>লন্ডন ইংল্যান্ডের রাজধানী শহর। এটি যুক্তরাজ্যের সর্ববৃহৎ শহর,</p>
<p>যার মেট্রোপলিটান এলাকার জনসংখ্যা ১৩ মিলিয়নের বেশি।</p>
</div>
<div class="city">
<h2>প্যারিস</h2>
<p>প্যারিস ফ্রান্সের রাজধানী এবং সর্ববৃহৎ জনবহুল শহর。</p>
</div>
<div class="city">
<h2>টোকিও</h2>
<p>টোকিও জাপানের রাজধানী, গ্রেটার টোকিও এলাকার কেন্দ্রবিন্দু,</p>
এবং বিশ্বের সর্ববৃহৎ জনবহুল মেট্রোপলিটান এলাকা。</p>
</div>
</article>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

<article> তে <section> তে <div>：</article>
<article>
<section>
<h2>বিখ্যাত শহর</h2>
<div class="city">
<h2>লন্ডন</h2>
<p>লন্ডন ইংল্যান্ডের রাজধানী শহর। এটি যুক্তরাজ্যের সর্ববৃহৎ শহর,</p>
<p>যার মেট্রোপলিটান এলাকার জনসংখ্যা ১৩ মিলিয়নের বেশি।</p>
</div>
<div class="city">
<h2>প্যারিস</h2>
<p>প্যারিস ফ্রান্সের রাজধানী এবং সর্ববৃহৎ জনবহুল শহর。</p>
</div>
<div class="city">
<h2>টোকিও</h2>
<p>টোকিও জাপানের রাজধানী, গ্রেটার টোকিও এলাকার কেন্দ্রবিন্দু,</p>
এবং বিশ্বের সর্ববৃহৎ জনবহুল মেট্রোপলিটান এলাকা。</p>
</div>
</section>
<section>
<h2>বিখ্যাত দেশ</h2>
<div class="country">
<h2>ইংল্যান্ড</h2>
<p>লন্ডন ইংল্যান্ডের রাজধানী শহর। এটি যুক্তরাজ্যের সর্ববৃহৎ শহর,</p>
<p>যার মেট্রোপলিটান এলাকার জনসংখ্যা ১৩ মিলিয়নের বেশি।</p>
</div>
<div class="country">
<h2>ফ্রান্স</h2>
<p>প্যারিস ফ্রান্সের রাজধানী এবং সর্ববৃহৎ জনবহুল শহর。</p>
</div>
<div class="country">
<h2>জাপান</h2>
<p>টোকিও জাপানের রাজধানী, গ্রেটার টোকিও এলাকার কেন্দ্রবিন্দু,</p>
এবং বিশ্বের সর্ববৃহৎ জনবহুল মেট্রোপলিটান এলাকা。</p>
</div>
</section>
</article>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন