এইচটিএমএল৫ মাইগ্রেশন - HTML5 Migration



এই পরিচ্ছেদে আমরা কোন এইচটিএমএল পেজকে এইচটিএমএল ৪ থেকে এইচটিএমএল ৫ এ কিভাবে রুপান্তর করা যায় তা জানবো। কিভাবে কোন এইচটিএমএল ৪ এর ডকুমেন্টের কোন কন্টেন্ট নষ্ট না করে বা বাদ না দিয়ে এইচটিএমএল ৫ এ রুপান্তর করা যায় টা জানবো।

আপনি এই একই পদ্ধতি ব্যবহার করে কোন এক্সএইচটিএমএল ডকুমেন্ট কে এইচটিএমএল ৫ এ রুপান্তর করতে পারবেন।

Typical HTML4 Typical HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div class="article"> <article>
<div id="footer"> <footer>


সাধারন এইচটিএমএল ৪ ডকুমেন্ট

নিচে একটি সাধারন এইচটিএমএল ৪ ডকুমেন্ট এর উদাহরন দেখুন।

উদাহরণ

<!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>
</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>
</div>
</div>

<div id="footer">
<p>&copy; 2016 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 html>




এনকোডিং পরিবর্তন

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

উদাহরণ

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


নতুন করে এইচটিএমএল ৫ এর জন্য নিচের মত করে লিখুন।

উদাহরণ

<meta charset="utf-8">




HTML5Shiv যোগ করুন

তারপরের কাজটি হল HTML5Shiv যোগ করা, এর ফলে ইন্টারনেট এক্সপ্লোরারে এইচটিএমএল ৫ এর সিমেন্টিক এলিমেন্টগুলো কাজ করবে।

উদাহরণ

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


HTML5Shiv সম্পর্কে আরও জানতে আমাদের এইচটিএমএল ৫ - ব্রাউজার সাপোর্ট টিউটোরিয়ালটি পড়ুন।


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

এইচটিএমএল ৪ এর জন্য সিএসএস স্টাইল সিট টি দেখুন নিচের উদাহরনে।

উদাহরণ

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;
}


আখন এইচটিএমএল ৫ এর জন্য নিচের মত করে সিএসএস স্টাইল সিট লিখুন।

উদাহরণ

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;
}


সবশেষে এখন এইচটিএমএল ডকুমেন্টের এলিমেন্ট গুলকে এইচটিএমএল ৫ এর সিমান্টিক এলিমেন্টে পরিবর্তন করুন।

উদাহরণ

<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>
</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>
</article>
</section>

<footer>
<p>© 2014 Monday Times. All rights reserved.</p>
</footer>

</body>




<article>, <section> এবং <div> এর পার্থক্য

<article>, <section> এবং <div> এর মধ্যে খুব সূক্ষ্ম পার্থক্য রয়েছে।

HTML5 স্ট্যান্ডার্ডে <section> এলিমেন্টকে সংশ্লিষ্ট এলিমেন্টগুলির একটি ব্লক রূপে সংজ্ঞায়িত করা হয়।
<article> এলিমেন্টকে এলিমেন্টগুলির একটি সম্পূর্ণ, স্বতঃযুক্ত ব্লকের রূপে সংজ্ঞায়িত করা হয়।
<div> এলিমেন্টকে children এলিমেন্ট গুলির একটি ব্লক রূপে সংজ্ঞায়িত করা হয়।

তবে এর ব্যাখ্যা কি ?

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

নিচে ভিন্ন কিছু উদাহরন দেখুন। এখানে প্রথম উদাহরনে দেখুন যেখানে একটি <article> এর মধ্যে <article> দেখানো হয়েছে।

<article> এর মধ্যে <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>


নিচে একটি উদাহরন দেখুন যেখানে একটি <article> এর মধ্যে <div> দেখানো হয়েছে।

<article> এর মধ্যে <div>

<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>


নিচে একটি উদাহরন দেখুন যেখানে <article> এর মধ্যে <section> এবং তার মধ্যে <div> দেখান হয়েছে।

<article> এর মধ্যে <section> এবং তার মধ্যে <div>

<article>

<section>
<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>
</section>

<section>
<h2>Famous Countries</h2>

<div class="country">
<h2>England</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="country">
<h2>France</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="country">
<h2>Japan</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>
</section>

</article>









এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.