Jumat, 07 Oktober 2016

HTML & CSS - Membuat Layout Website Sederhana


Layout Website yang akan dibuat adalah merupakan tampilan website yang paling sederhana dan banyak dijumpai, seperti gambar berikut ini.



Kode : templatesederhana.html 

it916@planning-ho-pc:~$ cat /var/www/html/lth5-templsederhana/templatesederhana.html


<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="templatesederhana.css">
 </head>

 <body>
  <div class="wrap">
   <div class="header">
    <h1>Learning By Doing</h1>
    <p>Tutorial belajar membuat layout website sederhana</p>
   </div>

   <div class="menu">
    <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">HTML</a></li>
     <li><a href="#">CSS</a></li>
     <li><a href="#">PHP</a></li>
     <li><a href="#">Javascript</a></li>
    </ul>
   </div>

   <div class="badan">
    <div class="sidebar">
     Sidebar
     <ul>
      <li><a href="#">Tutorial HTML Dasar</a></li>
      <li><a href="#">Tutorial CSS Dasar</a></li>
      <li><a href="#">Tutorial PHP Dasar</a></li>
      <li><a href="#">Tutorial JQuery Dasar</a></li>
     </ul>
    </div>
    <div class="content">
     Content
    </div>
   </div>
   <div class="clear"></div>
   <div class="footer">
    Footer
   </div>
  </div>
 </body>
</html>


Kode : templatesederhana.css 

it916@planning-ho-pc:~$ cat /var/www/html/lth5-templsederhana/templatesederhana.css


.wrap {
  background: blue;
  width: 900px;
  margin: 10px auto;
}

/*Bagian Header*/
.wrap .header {
  background: green;
  /*height 50px*/
  padding: 2px 10px;
}
/*Akhir Header*/

/*Bagian Menu*/
.wrap .menu {
  background: yellow;
}

.wrap .menu ul {
  padding: 0;
  margin: 0;
  background: yellow;
  overflow: hidden;
}

.wrap .menu ul li {
  float: left;
  list-style-type: none;
  padding: 10px;
}
/*Akir menu*/

.clear {
  clear: both;
}

.badan {
  height: 450px;
}

/*Bagian Sidebar*/
.wrap .badan .sidebar {
  background: orange;
  float: left;
  width: 25%;
  height: 100%;
}
/*Akhir Sidebar*/

/*Bagian Content*/
.wrap .badan .content {
  background: red;
  float: left;
  height: 100%;
  width: 75%;
}
/*Akhir Content*/

/*Bagian Footer*/
.wrap .footer {
  width: 100%;
  padding: 10px;
}
/*Akhir Footer*/

Hasil akhirnya akan seperti gambar berikut ini.


Demikian dan selamat mencoba.

Sumber : http://www.malasngoding.com/membuat-tampilan-layout-website-sederhana-dengan-html-dan-css/
Diposting oleh di

6 komentar:

  1. Unknown11/19/2018 7:59 AM

    gimna caranya biar si debarnya kanan kiri

    BalasHapus
  2. unknow4/06/2020 10:54 PM

    makasih kak buat artikelnya :) artikelnya begitu membantu dalam pemahaman dan pembelajaran materi.. dan artikelnya lumayan dapat dimengerti kak.. tetep semangat kak bikin artikelnya dan semangat membagikan ilmu kak :)
    makasih ya kak :) perkenalkan saya Laila Huriana Anisah Rohmawati dari kampus STMIK Atma Luhur kunjungi juga website kami di (https://www.atmaluhur.ac.id/)

    BalasHapus
  3. Anonim4/29/2020 8:08 AM

    MANTAP.. SANGANTLAH MEMEBANTU YANG BELAJAR SEMOGA BERMANFAAT

    BalasHapus
  4. Anonim4/04/2023 3:41 AM

    kak gimana caranta biar full layar

    BalasHapus

Langganan: Posting Komentar (Atom)