Tutorial Membuat Layout Website Sederhana dengan HTML dan CSS Oleh: I Wayan Dharmana

Halo kawan, apa kabar? Semoga di awal bulan Ramadhan ini kawan pembaca tetap semangat untuk mencari ilmu. Nah, pada kesempatan ini saya akan membahas tentang membuat layout website sederhana dengan HTML dan CSS. Untuk membuat website kita harus memiliki pemikiran tentang bagaimana layout dari sebuah web...

Halo kawan, apa kabar? Semoga di awal bulan Ramadhan ini kawan pembaca tetap semangat untuk mencari ilmu. Nah, pada kesempatan ini saya akan membahas tentang membuat layout website sederhana dengan HTML dan CSS. Untuk membuat website kita harus memiliki pemikiran tentang bagaimana layout dari sebuah website tersebut. Maka dari itu tutorial ini sangatlah penting bagi kawan pembaca yang baru mengenal HTML dan CSS. Mau tahu bagaimana cara membuat layout sederhana website? Simak langkah-langkah selanjutnya.

Membuat Kerangka Dasar Dalam tahapan pembuatan kerangka dasar digunakan bahasa pemrograman HTML. Di dalam kerangka ini kita akan buat kerangka dari header, content, sidebar dan footer yang merupakan layout dasar pembuatan website. Silahkan ikuti code dibawah ini dan simpan file dengan nama index.html.

<meta charset="utf-8">

Code diatas merupakan code dasar dari halaman web yang menggunakan HTML. Apabila kamu buka di web browser, maka akan muncul halaman kosong. Mungkin kawan-kawan akan bertanya apa fungsi dari code Deretan code tersebut berfungsi untuk membuat halaman website terletak ditengah-ditengah dengan rapi. Oke, kita lanjut dengan membuat bagian header. Bagian ini terletak di bagian atas halaman website yang berisi judul atau konten lainnya. Silahkan ikuti code berikut ini dan letakkan setelah bagian wrap. Setelah header, kini kita membuat bagian konten dan sidebar. Kedua bagian ini letaknya sejajar namun berbeda ukuran. Konten terletak di kiri dengan ukuran kurang lebih 66% dari ukuran penuhnya. Sedangkan sidebar akan kita buat di sebelah kanan dengan ukuran 26%. Ikuti code berikut ini dan letakkan dibawah code bagian header yang telah kita buat. Mungkin kamu akan bertanya, apa fungsi dari code dibawah ini? Oke, saya akan jawab. Bagian konten dan sidebar terletak sejajar. Oleh sebab itu, kita harus

membuat komponen berikutnya kembali pada posisinya dan tidak mengikuti posisi sidebar atau konten. Bisa dikatakan code tersebut adalah penetral atau clearfix. Bagian kerangka terakhir adalah footer. Footer sesuai namanya terletak di bagian paling bawah website. Biasanya berisi informasi berupa credit, menu atau komponen lainnya. Ikuti code berikut dan letakkan dibawah clearfix. Oke kawan, tahapan membuat kerangka sudah usai. Berikut hasil coding dari tahapan kerangka, silahkan dicek.

<meta charset="utf-8">



Sekarang coba buka hasil pembuatan kerangka website pada web browser. Maka akan terlihat tampilan dari header sampai footer yang masih belum teratur seperti pada gambar.

Mempercantik Tampilan Untuk mempercantik tampilan kita menggunakan bahasa pemrograman CSS. Pada tahapan ini kita mengatur berbagai properti komponen web seperti warna, lebar, tinggi , posisi dan lainnya. Berikut merupakan syntax CSS untuk mempercantik tampilan. Ikuti dan simpan file dengan nama style.css. * {margin:0} body { font-family:arial,segoe ui; } .wrap { width:1000px; margin:0 auto; }

.header { width:auto; background:#09C; padding:20px; color:#fff; }

.main { width:100%; background:#6F9; }

.content { float:left; width:66%; background:#FF9; padding:2%;

min-height:400px; } .sidebar { float:right; width:26%; background:#6F9; padding:2%; } .clear {clear:both} .footer { width:auto; padding:5px 10px; background:#333; color:#fff; }

Menghubungkan HTML dan CSS Setelah kawan mempercantik tampilan dengan CSS, belum ada efek yang muncul ketika web kamu buka di web browser. Mengapa? Karena HTML (index.html) dan CSS (style.css) belum dihubungkan. Untuk menghubungkan keduanya, ikuti code dibawah ini dan letakkan dibawah tag . Setelah itu coba cek kembali hasilnya di web browser. Bagaimana? Apakah sudah mirip dengan gambar dibawah ini?

Sekian tutorial membuat layout website sederhana dengan HTML dan CSS. Walaupun sederhana namun penuh makna. Semoga bermanfaat.

Tentang Penulis

I Wayan Dharmana

Seorang putra kelahiran Bali yang kini menjadi seorang programmer di salah satu perusahaan di Denpasar. Namun siapa sangka, pria yang bersekolah di SMKN 1 Denpasar ini juga seorang Blogger dan Freelancer. Selain itu juga mengelola bisnis web development www.indipixel.com dan penyedia hosting Lapak Server.