Belajar HTML (22): Membuat Layout Halaman

Lakukan save-as dulu dari file sebelumnya dan simpan menjadi 57-html-layout-style.html. Selanjutnya silakan sesuaikan isi kodenya menjadi seperti kode ini…

<!DOCTYPE html>
<html>
<head>
   <title>Layout Style</title>
   <style>
      body {background:#DDDDDD;}
      .area {width:100%; background:#FFFFFF}
      .header {text-align:center; background:#009900; height:65px; width:100%}
      .footer {text-align:center; background:#FF5555; height:20px; width:100%; font-size:85%}
      .menu {background:#2288EE; width:35%; float:left; text-align:center}
      .konten {width:65%; float:right}
   </style>
</head>
<body>
<div class="area">
   <div class="header">
      <h1 style="padding:10px; color:#FFFFFF">BangHaji DotCom</h1>
   </div>
   <div class="menu">
      <p><b>MENU UTAMA</b></p>
      <ul style="list-style:none; margin-left:-40px">
         <li>Menu Satu</li>
         <li>Menu Dua</li>
         <li>Menu Tiga</li>
      </ul>
   </div>
   <div class="konten">
      Ini adalah konten
      <br><br><br><br><br><br>
   </div>
   <div style="clear:both"></div>
   <div class="footer">
      &copy; 2019 - Muhammad Erfan
   </div>
</div>
</body>
</html>

Ada 2 jenis CSS yang kita gunakan, yaitu Inline CSS dan Internal/Embed CSS. Intinya jika diketik dalam format style="selector:value" maka itu adalah Inline CSS. Sedangkan Internal/Embed CSS itu adalah yang berada di antara tag <style> dan </style>.

Apa hasilnya? Bagaimana menurut Anda? Ya begitulah 😎

Layout Style

Baiklah itu tadi bahasan kita tentang bagaimana cara membuat layout halaman. Ini sepertinya menjadi latihan terakhir kita dalam rangkaian Seri Belajar HTML. Tetapi tidak menutup kemungkinan juga akan ada tambahan jika nanti suatu saat diperlukan 🙂 . Oh iya, bagus juga dibaca Seri Belajar jQuery Mobile dan Seri Belajar PDO+MySQL karena ada saling keterkaitan.

Okelah cukup dulu ya untuk tulisan ini, jangan lupa baca-baca artikel lainnya di BangHaji DotCom.

Salaam…

← Sebelumnya

Halaman : 1 2 3 4

Share

Muhammad Erfan

aslinya karyawan, suka belajar pemrograman, senang berbagi ilmu melalui tulisan, lagi usaha menghasilkan uang online :cool:

You may also like...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *