X

X

X

HTML5 এ রূপান্তরকরণ বা Migration


HTML4 থেকে HTML5-এ রূপান্তরকরণ

এই চ্যাপ্টারে  HTML4 থেকে HTML5 এ কোনো ওয়েবপেজকে এর গঠন এবং কন্টেন্ট-এর কোনো পরিবর্তনা ছাড়া কিভাবে রূপান্তর করা যায় তা বর্ণনা করা হলো।

XHTML থেকে HTML5-এ রূপান্তরের জন্য একই পদ্ধতি ব্যবহার করা যাবে।
সাধারণ HTML4 সাধারণ HTML5
<div id=”header”> <header>
<div id=”menu”> <nav>
<div id=”content”> <section>
<div class=”article”> <article>
<div id=”footer”> <footer>

HTML4 Page-এর উদাহরণ

Code Example

<!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.9em;
}

div#header, div#footer {
    padding: 10px;
    color: white;
    background-color: black;
}

div#content {
    margin: 5px;
    padding: 10px;
    background-color: lightgrey;
}

div.article {
    margin: 5px;
    padding: 10px;
    background-color: white;
}

div#menu ul {
    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 class="article">
<h2>News Article</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
<div class="article">
<h2>News Article</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
</div>

<div id="footer">
<p>&copy; 2014 Monday Times. All rights reserved.</p>
</div>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML5 Doctype এর পরিবর্তন

পুরোনো স্টাইল:

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

নতুন স্টাইল:

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML5 Encoding-এ পরিবর্তন

encoding তথ্যের পুরোনো স্টাইল:

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

HTML5 encoding-এ নতুন স্টাইল:

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML5Shiv লাইব্রেরি যুক্ত করুন

HTML5 এর নতুন সিমানটিক ইলামেন্টগুলো নতুন সব ব্রাউজারে সঠিকভাবে সাপোর্ট করে । কিন্তু পুরোনো ব্রাউজারে সাপোর্ট করে না। পুরোনো ব্রাউজারে HTML5 এর সিমানটিক ইলামেন্টগুলো ব্যবহার করার জন্য HTML5Shiv লাইব্রেরি যুক্ত করতে হবে।

তবে IE8 ও তার পুরোনো ভার্শনগুলোতে অপরিচিত ইলামেন্টকে স্টাইল করা সমর্থন করে না। কাজেই এক্ষেত্রে HTML5Shiv কোনো কাজে আসবে না। এটি শুধুমাত্র এর পরবর্তী ভার্শনের ক্ষেত্রে প্রযোজ্য।

HTML5Shiv যুক্ত করুন:

Code Example

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
</script>
<![endif]-->

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

 HTML5Shiv সম্পর্কে বিস্তারিত জানার জন্য HTML5 Browser Support লিংকটি অনুসরণ করুন।

HTML5 Semantic Element-এ রূপান্তর

আগের CSS এ বিভিন্ন id এবং class এর জন্য বিভিন্ন স্টাইল বর্ণনা করা থাকে। যেমন,

body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}

div#header, div#footer {
padding: 10px;
color: white;
background-color: black;
}

div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}

div.article {
margin: 5px;
padding: 10px;
background-color: white;
}

div#menu ul {
padding: 0;
}

div#menu ul li {
display: inline;
margin: 5px;
}

অনুরূপভাবে এসব স্টাইলকে HTML5 semantic element এর জন্য পরিবর্তন করুন:

body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}

header, footer {
padding: 10px;
color: white;
background-color: black;
}

section {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}

article {
margin: 5px;
padding: 10px;
background-color: white;
}

nav ul {
padding: 0;
}

nav ul li {
display: inline;
margin: 5px;
}

অবশেষে, ইলামেন্টগুলো HTML5 Semantic ইলামেন্ট এ পরিবর্তন করুন।

Code Example

<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>
<article>
<h2>News Article</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
<article>
<h2>News Article</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
</section>

<footer>
<p>&copy; 2014 Monday Times. All rights reserved.</p>
</footer>

</body>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


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

<article> <section> ‌এবং <div> এর মধ্যে কিছু গোলমেলে পার্থক্য রয়েছে।

HTML5 standard -এ <section> ইলামেন্টকে কে ব্লক ইলামেন্ট হিসেবে বিবেচনা করা হয়।

<article> ইলামেন্টকে স্বাধীন এবং স্বয়ংসম্পূর্ণ ব্লক ইলামেন্ট হিসেবে বিবেচনা করা হয়।

<div> ইলামেন্টকে ব্লক কিন্তু অধীন (Children) ইলামেন্ট হিসেবে বিবেচনা করা হয়।

তাহেল এদেরকে কিভাবে ইন্টারপ্রেট করবেন?
উপরের উদাহরণগুলোতে, <section> ইলামেন্টকে পরস্পর সম্পর্কযুক্ত আর্টিকেলের জন্য কন্টেইনার হিসেবে বিবেচনা করা হয়েছে। তবে <article> ইলামেন্টকে আমরা <article> ইলামেন্ট এর জন্য কন্টেইনার হিসেবে ব্যবহার করতে পারবো।

নিচে কিছু ব্যতিক্রম উদাহরণ উপস্থাপণ করা হলো:

article in article

<article>
<h2>Famous Cities</h2>

<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>

<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>

<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>
</article>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

div in article

<article>

<h2>Famous Cities</h2>

<div class="city">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</article>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।