Tutorial Membuat Layout Website Sederhana dengan HTML dan CSS

Ukuran: px

Mulai penontonan dengan halaman:

Download "Tutorial Membuat Layout Website Sederhana dengan HTML dan CSS"

Widya Sanjaya
7 tahun lalu
Tontonan:

2 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. <!doctype html> <html> <head> <meta charset="utf-8"> <title>layout Website Sederhana</title> </head> <body> <div class= wrap >

3 </body> </html> 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 <div class= wrap > 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. <div class= header > <h1>header</h1> 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. <div class= main > <div class= content > <h2>content</h2> <p>halo kawan, ini konten website</p> <div class= sidebar > <h2>sidebar</h2> <div class= clear > Mungkin kamu akan bertanya, apa fungsi dari code dibawah ini? <div class= clear > Oke, saya akan jawab. Bagian konten dan sidebar terletak sejajar. Oleh sebab itu, kita harus

4 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. <div class= footer > <center><p>copyright 2014 by Wayan Dharmana All Right Reserved</p></center> Oke kawan, tahapan membuat kerangka sudah usai. Berikut hasil coding dari tahapan kerangka, silahkan dicek. <!doctype html> <html> <head> <meta charset="utf-8"> <title>layout Website Sederhana</title> </head> <body> <div class="wrap"> <div class="header"> <h1>header</h1> <div class="main"> <div class="content"> <h2>content</h2> <p>halo kawan, ini konten website</p> <div class="sidebar"> <h2>sidebar</h2> <div class="clear"> <div class="footer"> <center><p>copyright 2014 by Wayan Dharmana All Right Reserved</p></center> </body>

5 </html> 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 {.wrap { font-family:arial,segoe ui; 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%;

6 .sidebar { min-height:400px; 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 </title>. <link rel= stylesheet href= style.css /> 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

7 I Wayan Dharmana

8 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 dan penyedia hosting Lapak Server.

dokumen-dokumen yang mirip

Membuat Layout Header Diam di Tempat (Fix Header)

Membuat Layout Header Diam di Tempat (Fix Header) Oleh: Christian Rosandhy Fix Header / Header Diam di Tempat adalah salah satu tren layout yang cukup populer (liat aja header Facebook / Twitter). Layout