HTML5 ပြောင်းလဲ

HTML4 မှ HTML5 သို့ ပြောင်းလဲ

တိုက်ရိုက်သော HTML4 စားပြုပ်မှ တိုက်ရိုက်သော HTML5 စားပြုပ်သို့ ပြောင်းလဲရန် ဘာကို လုပ်ပေးသလဲဆိုတာကို ပြောကြားသည်။

ယခုဘဏ္ဍာရေးကြောင်းကို ပြောဆိုရာတွင် အရေးပါသော သဘောတူအချက်အလက်များ နှင့် ဖွဲ့စည်းပုံကို ဖျက်ဆီးမှုမရှိစေရန် HTML4 စားပြုပ်ကို HTML5 စားပြုပ်သို့ ပြောင်းလဲရန် ဘာကို လုပ်ပေးသလဲဆိုတာကို ပြောကြားသည်။

အကြောင္းခံ:သင်သည် HTML4 နှင့် XHTML မှ HTML5 သို့ ပြောင်းလဲနိုင်သော စကားပြောင်းလဲနည်းများကို အသုံးပြုနိုင်ပါသည်。

တိုက်ရိုက်သော HTML4 တိုက်ရိုက်သော HTML5
<div id="header">
<div id="menu">
<div id="content"> <section>
<article>
<div id="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;}

</head>

<div id="header">
  

Monday Times

</div> <div id="menu">
  • News
  • Sports
  • Weather
</div> <div id="content">

News Section

News Article

Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.

Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.

</div>

News Article

Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.

Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.

</div> </div> <div id="footer">

© 2014 Monday Times. All rights reserved.

</div>

ကိုယ်တိုင် ကျင်းပလုပ်

ပြင္း HTML5 Doctype

အခြွိုင္းများေလးခြင္း: အမြန္မာ့ ဘရာဇရီကာ ကိုယ္ပယ္မှထုတ္ပါ

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

ပြင္း HTML5 doctype:

<!DOCTYPE html>

ကိုယ်တိုင် ကျင်းပလုပ်

ပြင္း HTML5 အက္ခရာ

အခြွိုင္းများေလးခြင္း: အမြန္မာ့ ဘရာဇရီကာ ကိုယ္ပယ္မှထုတ္ပါ

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

ပြင္း HTML5:

<meta charset="utf-8">

ကိုယ်တိုင် ကျင်းပလုပ်

အခြွိုင္းများေလးခြင္း: အမြန္မာ့ ဘရာဇရီကာ ကိုယ္ပယ္မှထုတ္ပါ

အခြွိုင္းများေလးခြင္း: အမြန္မာ့ ဘရာဇရီကာ ကိုယ္ပယ္မှထုတ္ပါ

အပြင္တာ္ႏ္း၊ အကျွန္းပုံစံအက္ခရာများအတ္ထိပ္ကို အခြွိုင္းများအတ္ထိပ္ကို ပြန္ပြက္လိုက္

အင်တာနိုင္င်နာ ကိုယ္ပယ္အတ္ထိပ္ပြုပါ

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

ကိုယ်တိုင် ကျင်းပလုပ်

အကြောင္းခံ:အခြွိုင္းများေလးခြင္း: အမြန္မာ့ ဘရာဇရီကာ ကိုယ္ပယ္မှထုတ္ပါ

HTML5 အက္ခရာအရာများအတ္ထိပ္အသုံးပြုပါ

အခြွိုင္းများေလးခြင္း:

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 အက္ခရာအရာများအတ္ထိပ္ပြောင္းလိုက္
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;
}

ကိုယ်တိုင် ကျင်းပလုပ်

ပြင္း HTML5 <header> နဲ႔ <footer> ပုံစံပြောင္းလိုက္

ပြင္း id="header" နဲ႔ id="footer" အပေါ်အားဖြင့္ <div> အရာများ:

<div id="header">
  

Monday Times

</div> . . . <div id="footer"> <p>© 2016 ကုဒ္ဒိုကာဝတ္မွတ္. အခြွိုင္းမျိုးစုံကို အခွင့္ပြုပါ。</p> </div>

HTML5 ပြောင်းလဲတာ <header> နှင့် <footer> အား:

Monday Times

. . .
<p>© 2016 CodeW3C.com. All rights reserved.</p>

ကိုယ်တိုင် ကျင်းပလုပ်

HTML5 <nav> အ�း ပြောင်းလဲပါ:

id="menu" အားဖြင့် <div> အရာကို:

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

သဘောတူ HTML5 ပြောင်းလဲတာ <nav> အား:


ကိုယ်တိုင် ကျင်းပလုပ်

HTML5 <section> အ�း ပြောင်းလဲပါ:

id="content" အားဖြင့် the <div> အရာကို:

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

သဘောတူ HTML5 ပြောင်းလဲတာ <section> အား:

<section>
.
.
.
</section>

ကိုယ်တိုင် ကျင်းပလုပ်

HTML5 <article> အား ပြောင်းလဲပါ:

class="post" အားဖြင့် အားလုံး <div> အရာကို:

<div class="post">
  

News Article

Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.

</div>

သဘောတူ HTML5 ပြောင်းလဲတာ <article> အား:

<article>
  

News Article

Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.

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


Monday Times

<section>

News Section

News Article

Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.

Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.

Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.

</div>

News Article

Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.

Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.

Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.

</div> </section>

© 2014 Monday Times. All rights reserved.

ကိုယ်တိုင် ကျင်းပလုပ်

之间的差异

在 HTML5 标准中,

之间的差异很小,令人困惑。

在 HTML5 标准中,

元素被定位为相关元素的块。

元素被定义为相关元素的完整的自包含块。

元素被定义为子元素的块。

如何理解呢?

在上面的例子中,我们曾使用

作为相关 的容器。

但是,我们也能够把

用作文章的容器。

အခြား မျိုးမျိုးသော ဘာသာရပ်များကို ကြည့်ပါ:

HTML အရာတွဲ တွင် <article> အရာတွဲတွင်ပါ:
<article>
<h2>အသင်းအမျိုးမျိုး</h2>
<article>
<h2>လန်ဒန်</h2>
<p>လန်ဒန် သည် အင်္ဂလန်နိုင်ငံ၏ မြို့တော် ဖြစ်ပြီး၊ ဗြိတိသှ် အခြေခံ မြို့ ဖြစ်သည်။</p>
နှင့် မြို့တော် အကြီးအကျယ် အသင်း အခြေခံ လူဦးရေ ကျော် 13 သန်း</p>
</article>
<article>
<h2>ပါရှလီ</h2>
<p>ပါရှလီ သည် ပြင်သစ်နိုင်ငံ၏ မြို့တော် နှင့် အလူးအလျားဆုံး မြို့ ဖြစ်ပြီး၊</p>
</article>
<article>
<h2>တိုကျို</h2>
<p>တိုကျို သည် ဂျပန်နိုင်ငံ၏ မြို့တော် ဖြစ်ပြီး၊ ဂျပန် အကြီးအကျယ် မြို့တော် အတွင်းရှိ</p>
နှင့် ကမ္ဘာ့ အလူးအလျားဆုံး မြို့တော်မြောက်တော်</p>
</article>
</article>

ကိုယ်တိုင် ကျင်းပလုပ်

<article> အတွင်းရှိ <div>:</div>
<article>
<h2>အသင်းအမျိုးမျိုး</h2>
<div class="city">
<h2>လန်ဒန်</h2>
<p>လန်ဒန် သည် အင်္ဂလန်နိုင်ငံ၏ မြို့တော် ဖြစ်ပြီး၊ ဗြိတိသှ် အခြေခံ မြို့ ဖြစ်သည်။</p>
နှင့် မြို့တော် အကြီးအကျယ် အသင်း အခြေခံ လူဦးရေ ကျော် 13 သန်း</p>
</div>
<div class="city">
<h2>ပါရှလီ</h2>
<p>ပါရှလီ သည် ပြင်သစ်နိုင်ငံ၏ မြို့တော် နှင့် အလူးအလျားဆုံး မြို့ ဖြစ်ပြီး၊</p>
</div>
<div class="city">
<h2>တိုကျို</h2>
<p>တိုကျို သည် ဂျပန်နိုင်ငံ၏ မြို့တော် ဖြစ်ပြီး၊ ဂျပန် အကြီးအကျယ် မြို့တော် အတွင်းရှိ</p>
နှင့် ကမ္ဘာ့ အလူးအလျားဆုံး မြို့တော်မြောက်တော်</p>
</div>
</article>

ကိုယ်တိုင် ကျင်းပလုပ်

<article> အတွင်းရှိ <section> အတွင်းရှိ <div>:</div>
<article>
<section>
<h2>အသင်းအမျိုးမျိုး</h2>
<div class="city">
<h2>လန်ဒန်</h2>
<p>လန်ဒန် သည် အင်္ဂလန်နိုင်ငံ၏ မြို့တော် ဖြစ်ပြီး၊ ဗြိတိသှ် အခြေခံ မြို့ ဖြစ်သည်။</p>
နှင့် မြို့တော် အကြီးအကျယ် အသင်း အခြေခံ လူဦးရေ ကျော် 13 သန်း</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>
နှင့် မြို့တော် အကြီးအကျယ် အသင်း အခြေခံ လူဦးရေ ကျော် 13 သန်း</p>
</div>
<div class="country">
<h2>ပြင်သစ်</h2>
<p>ပါရှလီ သည် ပြင်သစ်နိုင်ငံ၏ မြို့တော် နှင့် အလူးအလျားဆုံး မြို့ ဖြစ်ပြီး၊</p>
</div>
<div class="country">
<h2>ဂျပန်</h2>
<p>တိုကျို သည် ဂျပန်နိုင်ငံ၏ မြို့တော် ဖြစ်ပြီး၊ ဂျပန် အကြီးအကျယ် မြို့တော် အတွင်းရှိ</p>
နှင့် ကမ္ဘာ့ အလူးအလျားဆုံး မြို့တော်မြောက်တော်</p>
</div>
</section>
</article>

ကိုယ်တိုင် ကျင်းပလုပ်