এইচটিএমএল(৫) এ রুপান্তর-HTML5 Migration
এইচটিএমএল(৪) থেকে এইচটিএমএল(৫) এ রূপান্তর
এই পরিচ্ছেদে আমরা একটি পেজকে এইচটিএমএল(৪) থেকে এইচটিএমএল(৫) এ কিভাবে রুপান্তর করা যায় তা দেখবোঃ
| এইচটিএমএল(৪) | এইচটিএমএল(৫) |
|---|---|
<div id="header"> |
<header> |
<div id="menu"> |
<nav> |
<div id="content"> |
<section> |
<div id="post"> |
<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>
<title>এইচটিএমএল(৪) </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<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> প্রথম আলো </h1>
</div>
<div id="menu">
<ul>
<li>খবর</li>
<li>খেলা</li>
<li>আবহাওয়া</li>
</ul>
</div>
<div id="content">
<h2>খবরের পাতা </h2>
<div id="post">
<h2>খবর অংশ</h2>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
</div>
<div id="post">
<h2>খবর অংশ</h2>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
</div>
</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>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML5</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>প্রথম আলো</h1>
</div>
<div id="menu">
<ul>
<li>খবর</li>
<li>খেলা</li>
<li>আবহাওয়া</li>
</ul>
</div>
<div id="content">
<h2>খবরের পাতা</h2>
<div id="post">
<h2>খবর অংশ</h2>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
</div>
<div id="post">
<h2>খবর অংশ</h2>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
</div>
</div>
<div id="footer">
<p>©প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত</p>
</div>
</body>
</html>
ফলাফল
এইচটিএমএল(৫) এনকোডিং
এইচটিএমএল(৪) এনকোডিংঃ
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
এইচটিএমএল(৫) এনকোডিংঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>এইচটিএমএল ৫</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>প্রথম আলো</h1>
</div>
<div id="menu">
<ul>
<li>খবর</li>
<li>খেলা</li>
<li>আবহাওয়া</li>
</ul>
</div>
<div id="content">
<h2>খবরের পাতা</h2>
<div id="post">
<h2>খবর অংশ</h2>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
</div>
<div id="post">
<h2>খবর অংশ</h2>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
</div>
</div>
<div id="footer">
<p>©প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত</p>
</div>
</body>
</html>
ফলাফল
Shiv সংস্করণ
ইন্টারনেট এক্সপ্লোরারে এইচটিএমএল(৫) এর সিমেন্টিক এলিমেন্টগুলো সাপোর্ট করানোর জন্য আপনাকে shiv ব্যবহার করতে হবেঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5</title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
</script>
<![endif]-->
<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>চাঁদপুর কন্ঠ</h1>
</div>
<div id="menu">
<ul>
<li>বার্তা</li>
<li>খেলা</li>
<li>আবহাওয়া</li>
</ul>
</div>
<div id="content">
<h2>বার্তা বিভাগ</h2>
<div class="article">
<h2>খবরের অনুচ্ছেদ</h2>
<p>রূপকল্প-২০২১ বাস্তবায়ন, সরকারি ও বেসরকারি প্রতিষ্ঠানসমূহে আইসিটি-এর ব্যবহার নিশ্চিতকরণ, জনগণের দোরগোড়ায় সেবা পৌঁছে দেয়া এবং ডিজিটাল বাংলাদেশ বিনির্মাণের লক্ষ্যে চাঁদপুরে ৩ দিনব্যাপী ডিজিটাল উদ্ভাবনী মেলা-২০১৭-এর শুভ উদ্বোধন হয়েছে।</p>
<p>রূপকল্প-২০২১ বাস্তবায়ন, সরকারি ও বেসরকারি প্রতিষ্ঠানসমূহে আইসিটি-এর ব্যবহার নিশ্চিতকরণ, জনগণের দোরগোড়ায় সেবা পৌঁছে দেয়া এবং ডিজিটাল বাংলাদেশ বিনির্মাণের লক্ষ্যে চাঁদপুরে ৩ দিনব্যাপী ডিজিটাল উদ্ভাবনী মেলা-২০১৭-এর শুভ উদ্বোধন হয়েছে।</p>
</div>
<div class="article">
<h2>বার্তা বিভাগ</h2>
<p>রূপকল্প-২০২১ বাস্তবায়ন, সরকারি ও বেসরকারি প্রতিষ্ঠানসমূহে আইসিটি-এর ব্যবহার নিশ্চিতকরণ, জনগণের দোরগোড়ায় সেবা পৌঁছে দেয়া এবং ডিজিটাল বাংলাদেশ বিনির্মাণের লক্ষ্যে চাঁদপুরে ৩ দিনব্যাপী ডিজিটাল উদ্ভাবনী মেলা-২০১৭-এর শুভ উদ্বোধন হয়েছে।</p>
<p>রূপকল্প-২০২১ বাস্তবায়ন, সরকারি ও বেসরকারি প্রতিষ্ঠানসমূহে আইসিটি-এর ব্যবহার নিশ্চিতকরণ, জনগণের দোরগোড়ায় সেবা পৌঁছে দেয়া এবং ডিজিটাল বাংলাদেশ বিনির্মাণের লক্ষ্যে চাঁদপুরে ৩ দিনব্যাপী ডিজিটাল উদ্ভাবনী মেলা-২০১৭-এর শুভ উদ্বোধন হয়েছে।</p>
</div>
</div>
<div id="footer">
<p>চাঁদপুর কন্ঠ © ২০১৭,চাঁদপুর কন্ঠ কর্তৃক সরবরাহকৃত।</p>
</div>
</body>
</html>
ফলাফল
এইচটিএমএল(৫) সিমেন্টিক এলিমেন্টের সিএসএস
এইচটিএমএল(৪) এর সিএসএস স্টাইলঃ
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;
}
এইচটিএমএল(৫) এর সিমেন্টিক এলিমেন্টের সিএসএস স্টাইলঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>এইচটিএমএল ৫</title>
<!--[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;
}
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;
}
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>
</head>
<body>
<div id="header">
<h1>প্রথম আলো</h1>
</div>
<div id="menu">
<ul>
<li>খবর</li>
<li>খেলা</li>
<li>আবহাওয়া</li>
</ul>
</div>
<div id="content">
<h2>খবরের পাতা</h2>
<div id="post">
<h2>খবর অংশ</h2>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
</div>
<div id="post">
<h2>খবর অংশ</h2>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
</div>
</div>
<div id="footer">
<p>© প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত</p>
</div>
</body>
</html>
ফলাফল
এইচটিএমএল(৫) <header> এবং <footer> এর ব্যবহার
id="header" এবং
id="footer" এর সাহায্যে <div> এলিমেন্টকে পরিবর্তনঃ
<div id="header">
<h1>এইচটিএমএল টিউটোরিয়াল</h1>
</div>
.
.
.
<div id="footer">
<p>© স্যাট একাডেমী ২০১৬</p>
</div>
এইচটিএমএল(৫) এর সিমেন্টিক <header> এবং <footer> এর সাহায্যেঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>এইচটিএমএল ৫</title>
<!--[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;
}
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;
}
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>
</head>
<body>
<header>
<h1>প্রথম আলো</h1>
</header>
<div id="menu">
<ul>
<li>খবর</li>
<li>খেলা</li>
<li>আবহাওয়া</li>
</ul>
</div>
<div id="content">
<h2>খবরের পাতা</h2>
<div id="post">
<h2>খবর অংশ</h2>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
</div>
<div id="post">
<h2>খবর অংশ</h2>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
</div>
</div>
<footer>
<p>© প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত</p>
</footer>
</body>
</html>
ফলাফল
এইচটিএমএল(৫) <nav> এলিমেন্ট
id="menu" এর সাহায্যে <div> এলিমেন্ট পরিবর্তনঃ
<div id="menu">
<ul>
<li>খবর</li>
<li>খেলাধুলা</li>
<li>আবহাওয়া</li>
</ul>
</div>
এইচটিএমএল(৫) সিমেন্টিক <nav> এলিমেন্টঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>এইচটিএমএল ৫</title>
<!--[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;
}
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;
}
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>
</head>
<body>
<header>
<h1>প্রথম আলো</h1>
</header>
<nav>
<ul>
<li>খবর</li>
<li>খেলা</li>
<li>আবহাওয়া</li>
</ul>
</nav>
<div id="content">
<h2>খবরের পাতা</h2>
<div id="post">
<h2>খবর অংশ</h2>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
</div>
<div id="post">
<h2>খবর অংশ</h2>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
</div>
</div>
<footer>
<p>© প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত</p>
</footer>
</body>
</html>
ফলাফল
এইচটিএমএল(৫) এর <section> এলিমেন্ট
id="content" এর সাহায্যে <div> এলিমেন্ট পরিবর্তনঃ
<div id="content">
.
.
.
</div>
এইচটিএমএল(৫) সিমেন্টিক <section> এলিমেন্টঃ
উদাহরণ
<!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>
</head>
<body>
<header>
<h1>প্রথম আলো</h1>
</header>
<nav>
<ul>
<li>খবর</li>
<li>খেলা</li>
<li>আবহাওয়া</li>
</ul>
</nav>
<section>
<h2>খবরের পাতা</h2>
<div id="post">
<h2>খবর অংশ</h2>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
</div>
<div id="post">
<h2>খবর অংশ</h2>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
</div>
</section>
<footer>
<p>© প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত</p>
</footer>
</body>
</html>
ফলাফল
এইচটিএমএল(৫) এ <article> এলিমেন্ট
class="post" এর সাহায্যে সকল <div> এলিমেন্ট পরিবর্তনঃ
<div class="post">
<h2>খেলার পাতা</h2>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর
আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর।</p>
</div>
এইচটিএমএল(৫) সিমেন্টিক <article> এলিমেন্টঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5</title>
<!--[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;
}
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;
}
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>
</head>
<body>
<header>
<h1>প্রথম আলো</h1>
</header>
<nav>
<ul>
<li>খবর</li>
<li>খেলা</li>
<li>আবহাওয়া</li>
</ul>
</nav>
<section>
<h2>খবরের পাতা</h2>
<div id="post">
<h2>খবর অংশ</h2>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
</div>
<div id="post">
<h2>খবর অংশ</h2>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
</div>
</section>
<footer>
<p>© প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত</p>
</footer>
</body>
</html>
ফলাফল
<style> এলিমেন্টে সিলেক্টরের অতিরিক্ত অংশ লেখার প্রয়োজন নেইঃ
উদাহরণ
<!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>
</head>
<body>
<header>
<h1>প্রথম আলো</h1>
</header>
<nav>
<ul>
<li> খবর</li>
<li>খেলা</li>
<li>আবহাওয়া</li>
</ul>
</nav>
<section>
<h2>খবরের পাতা</h2>
<div id="post">
<h2>খবর অংশ</h2>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
</div>
<div id="post">
<h2>খবর অংশ</h2>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
</div>
</section>
<footer>
<p>© প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত</p>
</footer>
</body>
</html>
ফলাফল
একটি সাধারণ এইচটিএমএল(৫) পেজ
উদাহরণ
<!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>
</head>
<body>
<header>
<h1>প্রথম আলো</h1>
</header>
<nav>
<ul>
<li> খবর</li>
<li>খেলা</li>
<li>আবহাওয়া</li>
</ul>
</nav>
<section>
<h2>খবরের পাতা</h2>
<div id="post">
<h2>খবর অংশ</h2>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
</div>
<div id="post">
<h2>খবর অংশ</h2>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
<p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
</div>
</section>
<footer>
<p>© প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত</p>
</footer>
</body>
</html>
ফলাফল
<article>, <section> এবং <div> এর ব্যবহার
এখানে কিছু ভিন্ন ভিন্ন উদাহরণ দেওয়া হলোঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<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, nav, section, article, footer {
border:1px solid grey; margin:5px; padding:8px;
}nav ul {
margin:0; padding:0;
}nav ul li {
display:inline; margin:5px;
}
</style>
</head>
<body>
<header>
<h1>এইচটিএমএল ৫ স্কেলিটন</h1>
</header>
<nav>
<ul>
<li>খবর</li>
<li>খেলা </li>
<li>আবহাওয়া</li>
</ul>
</nav>
<article>
<h2>জনপ্রিয় শহর</h2>
<article>
<h2>লন্ডন</h2>
<p>লন্ডন ইংল্যান্ডের সবচেয়ে বড় শহর ।এটি যুক্তরাজ্যের সবচেয়ে জনপ্রিয় শহর, মহানগর এলাকায় ১৩ লক্ষেরও বেশি বাশিন্দা রয়েছে।</p>
</article>
<article>
<h2>প্যারিস</h2>
<p>প্যারিস ফ্রান্সের সবচেয়ে বড় শহর এবং ফ্রান্সের সবচেয়ে জনপ্রিয় শহর।</p>
</article>
<article>
<h2>টকিও</h2>
<p>টকিও জাপানের সবচেয়ে বড় শহর।টকিও জাপানের সবচেয়ে বড় শহর।</p>
</article>
</article>
<footer>
<p>© প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত।</p>
</footer>
</body>
</html>
ফলাফল
<article> এর মধ্যে <div>
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<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, nav, section, article, footer, div.city {
border:1px solid grey; margin:5px; padding:8px;
}nav ul {
margin:0; padding:0;
}nav ul li {
display:inline; margin:5px;
}
</style>
</head>
<body>
<header>
<h1>এইচটিএমএল ৫ স্কেলিটন</h1>
</header>
<nav>
<ul>
<li>খবর</li>
<li>খেলা </li>
<li>আবহাওয়া</li>
</ul>
</nav>
<article>
<h2>জনপ্রিয় শহর</h2>
<article>
<h2>লন্ডন</h2>
<p>লন্ডন ইংল্যান্ডের সবচেয়ে বড় শহর ।এটি যুক্তরাজ্যের সবচেয়ে জনপ্রিয় শহর, মহানগর এলাকায় ১৩ লক্ষেরও বেশি বাশিন্দা রয়েছে।</p>
</article>
<article>
<h2>প্যারিস</h2>
<p>প্যারিস ফ্রান্সের সবচেয়ে বড় শহর এবং ফ্রান্সের সবচেয়ে জনপ্রিয় শহর।</p>
</article>
<article>
<h2>টকিও</h2>
<p>টকিও জাপানের সবচেয়ে বড় শহর।টকিও জাপানের সবচেয়ে বড় শহর।</p>
</article>
</article>
<footer>
<p>© প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত.</p>
</footer>
</body>
</html>
ফলাফল
<article> এর মধ্যে <section> এর মধ্যে <div>
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<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, nav, article, footer, div.city, div.country {
border:1px solid grey; margin:5px; padding:8px;
}nav ul {
margin:0; padding:0;
}nav ul li {
display:inline; margin:5px;
}
</style>
</head>
<body>
<header>
<h1>এইচটিএমএল ৫ স্কেলিটন</h1>
</header>
<nav>
<ul>
<li>খবর</li>
<li>খেলা </li>
<li>আবহাওয়া</li>
</ul>
</nav>
<article>
<h2>জনপ্রিয় শহর</h2>
<article>
<h2>লন্ডন</h2>
<p>লন্ডন ইংল্যান্ডের সবচেয়ে বড় শহর। এটি যুক্তরাজ্যের সবচেয়ে জনপ্রিয় শহর, মহানগর এলাকায় ১৩ লক্ষেরও বেশি বাশিন্দা রয়েছে।</p>
</article>
<article>
<h2>প্যারিস</h2>
<p>প্যারিস ফ্রান্সের সবচেয়ে বড় শহর এবং ফ্রান্সের সবচেয়ে জনপ্রিয় শহর।</p>
</article>
<article>
<h2>টকিও</h2>
<p>টকিও জাপানের সবচেয়ে বড় শহর।টকিও জাপানের সবচেয়ে বড় শহর।</p>
</div>
</section>
<section>
<h2>জনপ্রিয় দেশসমূহ</h2>
<div class="country">
<h2>ইংল্যান্ড</h2>
<p>লন্ডন ইংল্যান্ডের সবচেয়ে বড় শহর। এটি যুক্তরাজ্যের সবচেয়ে জনপ্রিয় শহর, মহানগর এলাকায় ১৩ লক্ষেরও বেশি বাশিন্দা রয়েছে।</p>
</div>
<div class="country">
<h2>ফ্রান্স</h2>
<p>প্যারিস ফ্রান্সের সবচেয়ে বড় শহর এবং ফ্রান্সের সবচেয়ে জনপ্রিয় শহর।</p>
</div>
<div class="country">
<h2>জাপান</h2>
<p>টকিও জাপানের সবচেয়ে বড় শহর।টকিও জাপানের সবচেয়ে বড় শহর।</p>
</div>
</section>
</article>
<footer>
<p>© প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত.</p>
</footer>
</body>
</html>
ফলাফল