Define an aside
အဓိက content နဲ႕ သက္ဆိုင္တာေတြကို <aside> tag ကို အသံုးျပဳျပီး ေရးသားပါတယ္။ <aside> tag ကို quotes , glossary terms စသည့္ အေနနဲ႕ အသံုးျပဳၾကပါတယ္။ HTML 5 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:0x;
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.