Using Semantic HTML Elements
Modern HTML မှာ website ကို တည်ဆောက်ရာမှာ Semantic tags တွေ ထည့်သွင်း တည်ဆောက်ပါတယ်။ ဥပမာ။။ navigation အတွက် ဆိုရင် <nav> tag ကို အသုံးပြုပါတယ်။ header အပိုင်းအတွက်ဆိုရင်တော့ <header> tag ကို အသုံးပြုပြီး တည်ဆောက်ပါတယ်။ အဲဒီ tag တွေကို CSS နဲ့ တွဲပြီးတော့ အရောင်တွေ စာလုံးပုံစံတွေ စတာတွေကို ပြောင်းလဲပါတယ်။
Define a Section
<section> tag ဟာ ပုံမှန် အားဖြင့် web page မှာ အုပ်စုတစ်ခု အနေနဲ့ ဖွဲ့ဖို့ အတွက် အသုံးပြုပါတယ်။ <section> tag ထဲမှာ ပုံမှန်အားဖြင့် content တွေ ပါဝင်တတ်ပါတယ်။ Single page website တွေမှာ ဆိုရင် section tag နဲ့ အပိုင်းတွေ ခွဲပြီး သုံးတတ်ပါတယ်။ Modern HTML မှာ section tag ဟာ div tag ထက် ပိုပြီး အသေးစိတ်အကြောင်းအရာတွေ ပါဝင်တယ်လို့ ဆိုနိုင်တယ်။ ဥပမာ <article> tag ဆိုရင် blog post တွေ သတင်း အကြောင်းအရာတွေ ရေးသားထားတယ်လို့ ဆိုနိုင်ပါတယ်။ <nav> ဆိုရင်တော့ navigation link တွေ ဖြစ်တယ်ဆိုတာကို သိနိုင်ပါတယ်။
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Section</title>
</head>
<body>
<h1>One Piece</h1>
<section id="intro">
<p>One Piece is a Japanese manga series written and illustrated by Eiichiro Oda. It has been serialized in Weekly Shōnen Jump since August 4, 1997; the individual chapters are being published in tankōbon volumes by Shueisha, with the first released on December 24, 1997, and the 73rd volume released as of March 2014. One Piece follows the adventures of Monkey D. Luffy, a young boy whose body gains the properties of rubber after unintentionally eating a Devil Fruit, and his diverse crew of pirates, named the Straw Hat Pirates. Luffy explores the ocean in search of the world's ultimate treasure known as One Piece in order to become the next Pirate King.</p>
</section>
</body>
</html>
အဲဒီ code ဟာ browser မှာ ဆိုရင် ပုံမှန် div နဲ့ အသုံးပြုထားသလို ဘာမှ ထူးထူးခြားခြား မပြောင်းလဲပါဘူး။
ကျွန်တော်တို့ section အတွက် margin လေးထည့်ကြည့်ရအောင်။
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Section</title>
<style>
section#intro {
margin-left:20px;
}
</style>
</head>
<body>
<h1>One Piece</h1>
<section id="intro">
<p>One Piece is a Japanese manga series written and illustrated by Eiichiro Oda. It has been serialized in Weekly Shōnen Jump since August 4, 1997; the individual chapters are being published in tankōbon volumes by Shueisha, with the first released on December 24, 1997, and the 73rd volume released as of March 2014. One Piece follows the adventures of Monkey D. Luffy, a young boy whose body gains the properties of rubber after unintentionally eating a Devil Fruit, and his diverse crew of pirates, named the Straw Hat Pirates. Luffy explores the ocean in search of the world's ultimate treasure known as One Piece in order to become the next Pirate King.</p>
</section>
</body>
</html>
အဲဒါဆိုရင်တော့ ဘယ်ဘက်ကနေ 20px ကွာသွားတာကို တွေ့ရပါလိမ့်မယ်။
Figure 9-1
ဘာကြောင့် semantic tags ဟာ အရေးပါလဲ ?
HTML အဟောင်းတွေမှာ structure နဲ့ ပတ်သက်ပြီးတော့ သတ်သတ်မှတ်မှတ် နည်းပါးခဲ့ပါတယ်။ ဥပမာ။ page header ကိုလည်း <div> အသုံးပြုပြီးတော့ class သို့မဟုတ် id name ကို header လို့ပေးပြီး အသုံးပြုကြတယ်။ Modern HTML မှာတော့ header, navigation, footer နဲ့ အခြား element တွေဟာ tag အနေနဲ့ သတ်သတ်မှတ်မှတ်ရှိလာပါတယ်။ အဲဒါကြောင့် ပိုပြီး နားလည်မှု လွယ်ကူပြီးတော့ web designer တွေ အနေနဲ့လည်း code ရေးရတာ ပိုပြီး ရှင်းလင်းသွားပါတယ်။
Define an Article
<article> tag ကို သတင်းစာ ဆောင်းပါးတွေ ၊ blog post တွေ နောက်ပြီးတော့ မှတ်ချက် တွေ နေရာမှာ အသုံးပြုကြပါတယ်။ <article> tag ထဲမှာ ပုံမှန် အားဖြင့် ခေါင်းစဉ် ၊ စာရေးသူ ၊ ရက်စွဲ စတာတွေ ပါဝင်တတ်ပါတယ်။ CSS ကို အသုံးပြုပြီးတော့ style ကို ပြင်နိုင်ပါတယ်။
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Section</title>
<style>
article.feature {
margin-left:20px;
font-size:16px;
}
article.feature h1 {
font-size:30px;
}
article.feature h2 {
font-size:20px;
}
</style>
</head>
<body>
<article class="feature">
<h1>One Piece</h1>
<p>One Piece is a Japanese manga series written and illustrated by Eiichiro Oda. It has been serialized in Weekly Shōnen Jump since August 4, 1997; the individual chapters are being published in tankōbon volumes by Shueisha, with the first released on December 24, 1997, and the 73rd volume released as of March 2014. One Piece follows the adventures of Monkey D. Luffy, a young boy whose body gains the properties of rubber after unintentionally eating a Devil Fruit, and his diverse crew of pirates, named the Straw Hat Pirates. Luffy explores the ocean in search of the world's ultimate treasure known as One Piece in order to become the next Pirate King.</p>
</article>
</body>
</html>
ဒီ code က ပုံမှန် div အစား ကျွန်တော်တို့တွေ article ကို ပြောင်းပြီး အသုံးပြုထားပါတယ်။ CSS ကိုတော့ ကျွန်တော်တို့ ရှေ့မှာ ရေးထားခဲ့သလို font-size ပြောင်းထားတာရယ် နောက်ပြီးတော့ article ကို margin-left အတွက် 20px သုံးထားပါတယ်။
Define a Header
<header> tag ကိုတော့ web page ရဲ့ title ဒါမှမဟုတ် မိတ်ဆက် စတဲ့ အချက်အလက်တွေကို ဖော်ပြတဲ့ နေရာမှာ အသုံးပြုကြပါတယ်။ <header> tag အတွင်းမှာ <hgroup> tag သို့မဟုတ် header image အတွက် လည်း အသုံးပြုပါတယ်။
<!DOCTYPE html>
<html>
<head>
<title>Header</title>
</head>
<body>
<header>
<img src="banner.jpg">
</header>
<section>
<p>One Piece is a Japanese manga series written and illustrated by Eiichiro Oda. It has been serialized in Weekly Shōnen Jump since August 4, 1997; the individual chapters are being published in tankōbon volumes by Shueisha, with the first released on December 24, 1997, and the 73rd volume released as of March 2014. One Piece follows the adventures of Monkey D. Luffy, a young boy whose body gains the properties of rubber after unintentionally eating a Devil Fruit, and his diverse crew of pirates, named the Straw Hat Pirates. Luffy explores the ocean in search of the world's ultimate treasure known as One Piece in order to become the next Pirate King.</p>
<p>The chapters have been adapted into an original video animation (OVA) produced by Production I.G in 1998, and an anime series produced by Toei Animation, which began broadcasting in Japan in 1999. Since then, the still ongoing series has aired over 600 episodes. Additionally, Toei has developed eleven animated feature films, two OVA's, and five television specials. Several companies have developed various types of merchandising such as a trading card game, and a large number of video games.</p>
</section>
</body>
</html>
Hgroup
h tag တွေ တစ်ခုထက် မက အသုံးပြုထားရင် <hgroup> ကို အသုံးပြုနိုင်ပါတယ်။ ဥပမာ။
<hgroup><h1>My new blog</h1><h2>Enjoy</h2></hgroup>
hgroup ကို <header> tag အတွင်းမှာ အသုံးပြုနိုင်ပါတယ်။
Define Navigation
Navigation တွေအတွက်တော့ <nav> ကို အသုံးပြုနိုင်ပါတယ်။ nav tag ကတော့ browser မှာ ထူးထူးခြားခြား မပြောင်းလဲသွားပါဘူး။ CSS ကို အသုံးပြုပြီး ပုံသဏ္ဍန်ကို ပြောင်းလဲဖို့ လိုပါတယ်။
<!DOCTYPE html>
<html>
<head>
<title>Header</title>
</head>
<body>
<header>
<img src="banner.jpg">
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="video.html">Video</a></li>
</ul>
</nav>
<section>
<p>One Piece is a Japanese manga series written and illustrated by Eiichiro Oda. It has been serialized in Weekly Shōnen Jump since August 4, 1997; the individual chapters are being published in tankōbon volumes by Shueisha, with the first released on December 24, 1997, and the 73rd volume released as of March 2014. One Piece follows the adventures of Monkey D. Luffy, a young boy whose body gains the properties of rubber after unintentionally eating a Devil Fruit, and his diverse crew of pirates, named the Straw Hat Pirates. Luffy explores the ocean in search of the world's ultimate treasure known as One Piece in order to become the next Pirate King.</p>
<p>The chapters have been adapted into an original video animation (OVA) produced by Production I.G in 1998, and an anime series produced by Toei Animation, which began broadcasting in Japan in 1999. Since then, the still ongoing series has aired over 600 episodes. Additionally, Toei has developed eleven animated feature films, two OVA's, and five television specials. Several companies have developed various types of merchandising such as a trading card game, and a large number of video games.</p>
</section>
</body>
</html>
CSS ကို အသုံးမပြုထားတဲ့အတွက် nav က ဘာမှ ထူးထူးခြားခြား မရှိသေးပါဘူး။
Figure 9-2.
အခု code မှာ CSS တွေ ထပ်ဖြည့်ပါမယ်။
<!DOCTYPE html>
<html>
<head>
<title>Header</title>
<style>
#container {
margin:0px auto;
width:760px;
}
header.banner {
width:100%;
}
header.banner img {
width:100%;
}
nav.sidebar {
float:left;
width:95px;
}
nav.sidebar ul,nav.sidebar li{
margin:0px;
padding:0px;
list-style:none;
}
nav.sidebar li {
padding-bottom:5px;
}
nav.sidebar ul li a {
text-decoration : none;
color: #2980b9;
}
nav.sidebar ul li a:hover {
text-decoration: underline;
}
section.content {
float:left;
width:665px;
}
</style>
</head>
<body>
<div id="container">
<header>
<img src="banner.jpg">
</header>
<nav class="sidebar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="video.html">Video</a></li>
</ul>
</nav>
<section class="content">
<p>One Piece is a Japanese manga series written and illustrated by Eiichiro Oda. It has been serialized in Weekly Shōnen Jump since August 4, 1997; the individual chapters are being published in tankōbon volumes by Shueisha, with the first released on December 24, 1997, and the 73rd volume released as of March 2014. One Piece follows the adventures of Monkey D. Luffy, a young boy whose body gains the properties of rubber after unintentionally eating a Devil Fruit, and his diverse crew of pirates, named the Straw Hat Pirates. Luffy explores the ocean in search of the world's ultimate treasure known as One Piece in order to become the next Pirate King.</p>
<p>The chapters have been adapted into an original video animation (OVA) produced by Production I.G in 1998, and an anime series produced by Toei Animation, which began broadcasting in Japan in 1999. Since then, the still ongoing series has aired over 600 episodes. Additionally, Toei has developed eleven animated feature films, two OVA's, and five television specials. Several companies have developed various types of merchandising such as a trading card game, and a large number of video games.</p>
</section>
</div>
</body>
</html>
CSS ထည့်သွင်းပြီးတဲ့ အချိန်မှာတော့ code ဟာ browser မှာ အောက်ကပုံလို ပေါ်ပါလိမ့်မယ်။ ကျွန်တော်တို့တွေ table နဲ့ ဖန်တီးခဲ့သလို css ကို အသုံးပြုပြီး ပြန်လည်ရေးသားလိုက်တာပါ။
Figure 9-3
Define an Aside
အဓိက content နဲ့ သက်ဆိုင်တာတွေကို <aside> tag ကို အသုံးပြုပြီး ရေးသားပါတယ်။ <aside> tag ကို quotes , glossary terms စသည့် အနေနဲ့ အသုံးပြုကြပါတယ်။ Modern HTML specification အရ <aside> tag ဟာ main content နဲ့ ဆက်နွယ်မှုရှိရပါမယ်။
ပြီးခဲ့တဲ့ HTML မှာ ကျွန်တော်တို့တွေ aside ကို ထပ်ဖြည့်ပါမယ်။
<aside class="right-side">
<h2>Straw Hat Pirates</h2>
<a href="./crew/luffy.html"><img src="luffy.png"></a>
<a href="./crew/zoro.html"><img src="zoro.png"></a>
<a href="./crew/nami.html"><img src="nami.png"></a>
<a href="./crew/usopp.html"><img src="usopp.png"></a>
<a href="./crew/sanji.html"><img src="sanji.png"></a>
<a href="./crew/chopper.html"><img src="chopper.png"></a>
<a href="./crew/robin.html"><img src="robin.png"></a>
<a href="./crew/franky.html"><img src="franky.png"></a>
<a href="./crew/brook.html"><img src="brook.png"></a>
</aside>
CSS မထည့်ရသေးတဲ့ အတွက် အောက်ကပုံလို မြင်နေရပါမယ်။
Figure 9-4.
CSS ကို အောက်က code ထပ်ဖြည့်လိုက်ပါတယ်။
section.content {
float:left;
width:570px;
}
aside.right-side {
float:right;
width:95px;
}
aside.right-side h2 {
font-size:15px;
}
section ရဲ့ width ကိုတော့ ၅၇၀ ပြောင်းထားလိုက်ပါတယ်။ code အပြည့်အစုံကတော့
<!DOCTYPE html>
<html>
<head>
<title>Nav</title>
<style>
#container {
margin:0px auto;
width:760px;
}
header.banner {
width:100%;
}
header.banner img {
width:100%;
}
nav.sidebar {
float:left;
width:95px;
}
nav.sidebar ul,nav.sidebar li{
margin:0px;
padding:0px;
list-style:none;
}
nav.sidebar li {
padding-bottom:5px;
}
nav.sidebar ul li a {
text-decoration : none;
color: #2980b9;
}
nav.sidebar ul li a:hover {
text-decoration: underline;
}
section.content {
float:left;
width:570px;
}
aside.right-side {
float:right;
width:95px;
}
aside.right-side h2 {
font-size:15px;
}
</style>
</head>
<body>
<div id="container">
<header>
<img src="banner.jpg">
</header>
<nav class="sidebar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="video.html">Video</a></li>
</ul>
</nav>
<section class="content">
<h1>One Piece</h1>
<p>One Piece is a Japanese manga series written and illustrated by Eiichiro Oda. It has been serialized in Weekly Shōnen Jump since August 4, 1997; the individual chapters are being published in tankōbon volumes by Shueisha, with the first released on December 24, 1997, and the 73rd volume released as of March 2014. One Piece follows the adventures of Monkey D. Luffy, a young boy whose body gains the properties of rubber after unintentionally eating a Devil Fruit, and his diverse crew of pirates, named the Straw Hat Pirates. Luffy explores the ocean in search of the world's ultimate treasure known as One Piece in order to become the next Pirate King.</p>
<p>The chapters have been adapted into an original video animation (OVA) produced by Production I.G in 1998, and an anime series produced by Toei Animation, which began broadcasting in Japan in 1999. Since then, the still ongoing series has aired over 600 episodes. Additionally, Toei has developed eleven animated feature films, two OVA's, and five television specials. Several companies have developed various types of merchandising such as a trading card game, and a large number of video games.</p>
</section>
<aside class="right-side">
<h2>Straw Hat Pirates</h2>
<a href="./crew/luffy.html"><img src="luffy.png"></a>
<a href="./crew/zoro.html"><img src="zoro.png"></a>
<a href="./crew/nami.html"><img src="nami.png"></a>
<a href="./crew/usopp.html"><img src="usopp.png"></a>
<a href="./crew/sanji.html"><img src="sanji.png"></a>
<a href="./crew/chopper.html"><img src="chopper.png"></a>
<a href="./crew/robin.html"><img src="robin.png"></a>
<a href="./crew/franky.html"><img src="franky.png"></a>
<a href="./crew/brook.html"><img src="brook.png"></a>
</aside>
</div>
</body>
</html>
browser မှာဆိုရင် အောက်ကလို မြင်ရပါလိမ့်မယ်။
Figure 9-5.
Define a Footer
Footer ကိုတော့ page ရဲ့ အောက်ဆုံး </body> ရဲ့ အပေါ်မှာ အသုံးပြုပါတယ်။ HTML specification အရ <footer> tag အတွင်းမှာ <header> tag ထည့်မသွင်းရပါဘူး။ footer ကို section tag ရဲ့ အောက်ဆုံးမှာလည်း အသုံးပြုနိုင်ပါတယ်။ page တစ်ခုမှာ footer တွေ အများကြီးလည်း ဖြစ်နိုင်ပါတယ်။
အခု footer ကို </body> မတိုင်ခင်မှာ ထပ်ဖြည့်လိုက်ပါမယ်။
<footer class="bottom">
<small>© Copyright 2011
<a href="terms.html">Terms and conditions</a>
</small>
</footer>
အဲဒီ အခါ browser မှာ ဒီလို မြင်ရပါလိမ့်မယ်။
Figure 9-6.
ကျွန်တော်တို့ css ထပ်ဖြည့်ပါမယ်။
footer {
background:#3498db;
float:right;
width:100%;
color :#FFF;
text-align:center;
}
ကျွန်တော်တို့ရဲ့ code အပြည့်အစုံကို ကြည့်ရအောင်။
<!DOCTYPE html>
<html>
<head>
<title>Nav</title>
<style>
#container {
margin:0px auto;
width:760px;
}
header.banner {
width:100%;
}
header.banner img {
width:100%;
}
nav.sidebar {
float:left;
width:95px;
}
nav.sidebar ul,nav.sidebar li{
margin:0px;
padding:0px;
list-style:none;
}
nav.sidebar li {
padding-bottom:5px;
}
nav.sidebar ul li a {
text-decoration : none;
color: #2980b9;
}
nav.sidebar ul li a:hover {
text-decoration: underline;
}
section.content {
float:left;
width:570px;
}
aside.right-side {
float:right;
width:95px;
}
aside.right-side h2 {
font-size:15px;
}
footer {
background:#3498db;
float:right;
width:100%;
color :#FFF;
text-align:center;
}
</style>
</head>
<body>
<div id="container">
<header>
<img src="banner.jpg">
</header>
<nav class="sidebar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="video.html">Video</a></li>
</ul>
</nav>
<section class="content">
<h1>One Piece</h1>
<p>One Piece is a Japanese manga series written and illustrated by Eiichiro Oda. It has been serialized in Weekly Shōnen Jump since August 4, 1997; the individual chapters are being published in tankōbon volumes by Shueisha, with the first released on December 24, 1997, and the 73rd volume released as of March 2014. One Piece follows the adventures of Monkey D. Luffy, a young boy whose body gains the properties of rubber after unintentionally eating a Devil Fruit, and his diverse crew of pirates, named the Straw Hat Pirates. Luffy explores the ocean in search of the world's ultimate treasure known as One Piece in order to become the next Pirate King.</p>
<p>The chapters have been adapted into an original video animation (OVA) produced by Production I.G in 1998, and an anime series produced by Toei Animation, which began broadcasting in Japan in 1999. Since then, the still ongoing series has aired over 600 episodes. Additionally, Toei has developed eleven animated feature films, two OVA's, and five television specials. Several companies have developed various types of merchandising such as a trading card game, and a large number of video games.</p>
</section>
<aside class="right-side">
<h2>Straw Hat Pirates</h2>
<a href="./crew/luffy.html"><img src="luffy.png"></a>
<a href="./crew/zoro.html"><img src="zoro.png"></a>
<a href="./crew/nami.html"><img src="nami.png"></a>
<a href="./crew/usopp.html"><img src="usopp.png"></a>
<a href="./crew/sanji.html"><img src="sanji.png"></a>
<a href="./crew/chopper.html"><img src="chopper.png"></a>
<a href="./crew/robin.html"><img src="robin.png"></a>
<a href="./crew/franky.html"><img src="franky.png"></a>
<a href="./crew/brook.html"><img src="brook.png"></a>
</aside>
</div>
<footer class="bottom">
<small>© Copyright 2011
<a href="terms.html">Terms and conditions</a>
</small>
</footer>
</body>
</html>
browser မှာ ဆိုရင်တော့ အောက်ကလို မြင်ရပါလိမ့်မယ်။
Figure 9-7.