Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

HTML5 Sederhana by 49us53ti4w4n

VIEWS: 30 PAGES: 2

Template html5 sederhana dengan 1 sidebar kanan

More Info
									<!DOCTYPE html>
<html>
<head>
<title>Titel websiteku</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
#halaman
{/* "id" dilambangkan dengan "#" */
width: 970px;
margin: 0 auto;/* agar dokumen berada ditengah */
padding: 0 auto;
}
#judul
{
width: 100%; height: 100px;
background: #5F9EA0;
margin: 0;/* pengaturan sisi bagian luar */
padding: 0;/* pengaturan sisi bagian dalam */
}
#konten
{
width: 100%;
margin: 0;
padding: 0;
}
.kiri
{/* "class" dilambangkan dengan "." */
width: 25%;
height: 450px; float: left; background: #ADD8E6;
}
.kanan
{
width: 75%;
height: 450px; float: left; background: #FDF5E6;
}
.footer
{
height: 60px; background: #8FBC8F; clear: both;
}
.judul
{
color: Red;
padding: 10px 0 0 10px; /* penulisan untuk semua sisi: atas kanan bawah
kiri */
}
.sub-judul
{
color: #ff0; padding: 0 10px 10px;
}
p
{
padding-left: 10px;/* penulisan untuk satu sisi saja */
}
</style>
</head>
<body>
  <div id="halaman">
       <div id="judul">
          <h1 class="judul">Disini judul websiteku</h1>
          <h2 class="sub-judul">Disini sub-judul websiteku</h2>
        </div>
          <div id="konten">
             <div class="kiri">
               <p><aside>
                <nav>
                   <ul id="menu">
                      <li><a href="#">Categori 1</a>
                        <ul>
                          <li><a href="#">Css</a></li>
                          <li><a href="#">Graphic Design</a></li>
                          <li><a href="#">Tools</a></li>
                          <li><a href="#">Web design</a></li>
                        </ul>
                       </li>

                     <li><a href="#">Categori 2</a>
                       <ul>
                         <li><a href="#">Websites</a></li>
                         <li><a href="#">Logos and icons</a></li>
                         <li><a href="#">User Interfaces</a></li>
                         <li><a href="#">Other stuff</a></li>
                       </ul>
                     </li>
                   </ul>
                </nav>
               </aside></p>
             </div>
            <div class="kanan">
              <p>Disini konten websiteku</p>
            </div>
         </div>
      <div class="footer">

         <P><center><a href="#">Beranda</li> |
                    <a href="#">Tentang</a> |
                    <a href="#">Hubungi</a> |
                    <a href="#">Kebijakan</a>
            </center></p>
         <p><center>Dibuat sebagai sarana untuk belajar HTML5</p>
      </div>
  </div>
</body>
</html>

								
To top