Apr 20

HTML5 এ রূপান্তর (HTML5 Migration)

HTML5 এর ধারবাহিক টিউটোরিয়ালে আপনাকে স্বাগতম। আজ আমরা আলোচনা করব Migration from HTML4 to HTML5 নিয়ে। আজ আমরা শিখবো কিভাবে একটি typical HTML4 page কে typical HTML5 page এ পরিনত করা যায় আগের সকল কিছু অপরিবর্তিত রেখে।

 

Typical HTML4

Typical HTML5

<div id=”header”>

<header>

<div id=”menu”>

<nav>

<div id=”content”>

<section>

<div id=”post”>

<article>

<div id=”footer”>

<footer>

 

Typical HTML4

বলে রাখা ভাল আপনি একই নিয়ম ব্যাবহার করে HTML5 থেকে HTML4 এবং XHTML এ পরিবর্তন করতে পারবেন। এখন একটা Typical HTML4 Page উদাহরণ দেখাই-

<!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>&amp;copy; 2014 Monday Times. All rights reserved.</p>
 </div>
 
 </body>
 </html>

 

যেভাবে HTML5 Doctype পরিবর্তন করবেন

HTML4 doctype:

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

 

HTML5 doctype:

<!DOCTYPE html>

 

যেভাবে HTML5 Encoding পরিবর্তন করবেন

HTML4:

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

 

HTML5:

<meta charset=”utf-8″>