Membuat tampilan website [ Layout ]

Halo , kali ini kami ingin membahas tentang tampilan / layout untuk website yang ingin kita buat , bagi kalian yang ingin membangun sebuah website diperlukan sebuah konsep untuk memulai membangun sebuah website kali, seperti membuat desain untuk tampilan sampai sistem untuk data yang ingin kita buat.Nah kali ini kami ingin memberikan sebuah contoh tampilan / layout untuk website yang cukup menarik

untuk mengetahui tampilan seperti apa yang ingin kita buat kita harus memahami tentang dasar - dasar dari HTML dan CSS bagi kalian yang belum mahir atau baru belajar , kami rekomendasikan belajar dasar - dasarnya di w3schools disana kalian dapat melihat contoh - contoh dasar dari sebuah element HTML dan sejenisnya .

sebelum memulai membuat tampilan atau layout ,kalian buka text editor dan siapkan terlebih dahulu file HTML bagi yang sudah punya bagi yang belum harap buat dulu file HTML nya dengan nama index.html atau sesuai dengan nama yang anda inginkan yang penting bagian akhir harus .html . Tetapi jika ingin tampilan utama disarankan bernama index.html untuk di jadikan sebagai index / main website kita . Perhatikan source code di bawah ini..

<div class="header"> <h1>Techo Indonesia</h1>
</div>

<div class="clearfix">

  <div class="column menu">

    <ul>

      <li>Beranda</li>

      <li>Blog</li>


    </ul>

  </div>



  <div class="column content">

    <h1>Ini Judul untuk kontek</h1>

    <p>Ini adalah isi dari konten</p>
  </div>

</div>



<div class="footer">

  <p>Footer Text</p> | <p>Theme by : <a href="techoindonesia.com">Techno Indonesia </a></p>

</div>

* {
    box-sizing: border-box;
}

a{
    text-decoration:none;
    
}

a:link{
 color:white;
}

p{
    display:inline-block;
}

.header, .footer {
    background-color: grey;
    color: white;
    padding: 15px;
}
.column {
    float: left;
    padding: 15px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.menu {
    width: 25%;
}
.content {
    width: 75%;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 8px;
    background-color: #33b5e5;
    color: #ffffff;
}
.menu li:hover {
    background-color: #0099cc;
}

Semua yang kami pos sudah di periksa dan juga sudah kami usahan menggunakan bahasa yang cukup baik, maka dari itu bila mana terjadi kesalahan dan kurang sopan / tidak benar informasi yang kami berikan silahkan berikan ulasan dikomentar untuk memberika saran atau kritikan dari anda untuk kami agar kami bisa membenah diri Terima kasih :)

Membuat tampilan website [ Layout ]

Share this