Membuat Layout Website Sederhana Dengan HTML Dan CSS

Zona Internetku No Comment June 12, 2019

Layout merupakan susunan atau kerangka pada tampilan website, dalam pembuatan website layout telah menjadi dasar pada tampilan web sehingga hal ini sangat penting untuk diperhatikan dalam proses pembuatannya, apalagi jika kalian adalah seorang web developer atau web designer maka hal ini tak akan pernah luput dari pekerjaanmu.

Untuk membuat kita harus menyusun terlebih dahulu kerangka pada layout website yang akan kita buat meggunakan HTML dan CSS, buat kalian yang belum paham HTML dan CSS silahkan baca artikel ini terlebih dahulu Belajar Cara Menggunakan Dasar Css Untuk Web Desain dan Belajar Dasar HTML

Memulai Untuk Membuat Layout Sederhana
Karena tujuan saya membuat artikel ini adalah sebagai sarana pembelajaran maka kita hanya akan membuat Layout Website Yang Sederhana saja supaya kalian dapat lebih mudah memahami struktur layout dalam proses pembuatannya.

Membuat Layout Website Sederhana Dengan HTML Dan CSS

Silahkan kalian simak gambar diatas, itu merupakan contoh tampilan web sederhana dengan html dan css. Disitu terdapat keterangan bahwa susunan atau struktur rancangan layout tersebut sangat sederhana karena hanya terdiri dari Header, Navbar, Content, Sidebar, Footer.

Buat kalian yang ingin belajar cara membuat layout web sederhana dengan html dan css, maka kalian tidak perlu khawatir karena saya sudah menyiapkan contoh coding yang terdiri dari html dan css dasar sehingga mudah untuk dipahami.

1. Pertama tama kalian siapkan terlebih dahulu software text editor seperti Notepad, Notepad++ atau bisa juga Adobe Dreamweaver
2. Selanjutnya kalian ketik ulang atau salin kode html berikut ini

<!DOCTYPE html>
<html>
<head>
<title>Layout Sederhana</title>

<style>

</style>
</head>

<body>

<div id="wrap">
<div id="content-wrap">

<div id="header-wrapper">
<h1>Zona Internetku</h1>
<p>Header dan deskripsi website kalian disini!</p>
</div>

<div id="nav-wrapper">
<p>Navbar</p>
</div>

<div id="wrapper">
<div id="content-wrapper">
<p>Content</p>
</div>

<div id="sidebar-wrapper">
<p>Sidebar</p>
</div>
</div>

<div id="footer-wrapper">
<p>Footer</p>
</div>

</div>
</div>

</body>
</html>

3. Setelah kalian kode html sudah siap maka langkah selanjutnya adalah memberikan style menggunakan kode CSS seperti berikut ke dalam tag

<style>
* {
    margin:0;
 padding:0;
}
#wrap {
    width: 1024px;
    margin: 0 auto;
    position: relative;
    display: block;
    overflow: hidden;
}
#content-wrap {
    padding: 10px 0 10px;
    margin: 0 20px;
    background: #fff;
    border: 1px solid #7df6af;
}
#header-wrapper, #nav-wrapper, #content-wrapper, #sidebar-wrapper, #footer-wrapper{
    position: relative;
}
#header-wrapper{
    width: 950px;
 height:80px;
    padding: 10px 5px 5px;
    margin: 0 auto;
    background: #79ece2;
}
#header-wrapper h1{
    text-align:center;
 font-size:25px;
}
#header-wrapper p{
    text-align:center;
 font-size:17px;
}
#nav-wrapper {
    width: 950px;
    padding: 10px 5px 5px;
    margin: 10px auto 0;
    background: #79ece2;
}
#wrapper{
    padding: 0px 5px 0;
    margin: 0 7px 0;
    overflow: hidden;
 }
#content-wrapper {
    width: 600px;
 height:350px;
    padding: 10px 5px 5px;
    margin: 10px auto 0;
    background: #79ece2;
    display: block;
    float: left;
}
#sidebar-wrapper {
    width: 330px;
 height:350px;
    padding: 10px 5px 5px;
    margin: 10px auto 0;
    background: #79ece2;
    display: block;
    float: right;
}
#footer-wrapper {
    width: 950px;
    padding: 10px 5px 5px;
    margin: 10px auto 0;
    background: #000!important;
    color: #fff!important;
}

4. Jika semua kode sudah siap, silahkan kalian simpan kode tersebut dengan ekstensi .html dan jalankan di browser kalian maka hasilnya akan menjadi seperti pada gambar di atas tadi.

Baca juga :
Cara Mendesain Tabel Web Menggunakan CSS
Memahami Fungsi Selector, Property Dan Value Pada CSS
Memahami Atribut Class Dan Id Pada HTML
Macam - Macam Tag HTML Beserta Fungsi Dan Contohnya

Memahami Struktur Kerangka Layout

Header biasanya digunakan sebagai tempat judul ataupun logo dan juga deskripsi website
Navbar digunakan untuk meletakkan menu navigasi website
Content dipakai untuk tempat konten atau isi utama website, seperti artikel, menu utama, dan widget lainnya
Sidebar sering digunakan sebagai tempat untuk meletakkan notifikasi, rekomendasi artikel dan sebagainya
Footer biasanya dipakai untuk tempat menu halaman navigasi dan hak cipta website

Setelah kalian sudah bisa membuat dan memahami tentang layout pada website maka saya yakin kalian bisa mengembangkannya yang lebih baik atau lebih keren jika kalian berusaha dan terus belajar.
Untuk pembahasan selanjutnya saya akan menunjukkan bagaimana caranya agar membuat tampilan layout tersebut menjadi responsive alias bisa menyesuaikan ukuran tampilannya dengan baik supaya bisa dibuka di segala jenis perangkat.

Promo Menarik