Mohon tunggu...
Listyanti Dewi Astuti
Listyanti Dewi Astuti Mohon Tunggu... pelajar/mahasiswa -

just another ordinary girl.. got nothing to show off...\r\n\r\nhttp://healthy-life-journal.blogspot.com

Selanjutnya

Tutup

Nature

Membuat Layout Website Sederhana dengan CSS

19 Agustus 2011   07:49 Diperbarui: 26 Juni 2015   02:38 895
+
Laporkan Konten
Laporkan Akun
Kompasiana adalah platform blog. Konten ini menjadi tanggung jawab bloger dan tidak mewakili pandangan redaksi Kompas.

CSS dapat dimanfaatkan untuk membuat layout sederhana. Pendekatan yang digunakan adalah linked-CSS dengan memanfaatkan "div" untuk mengatur posisi areanya. Pada text editor, kita buat file CSS bernama mystyle.css. Hal pertama yang harus dibuat adalah wrapper untuk memuat semua area lain di dalam website (lapisan pertama).  Kode CSS untuk wrapper adalah sebagai berikut: #wrapper{margin: auto;width: 750px;border: 1px solid black;}
Kemudian di atas wrapper kita letakkan empat sub-area (lapisan dua), yaitu header, inner, sidebar, dan footer. Pada inner nantinya akan diletakkan sub-area (lapisan ketiga), yaitu top, content, dan right. Kode CSS untuk header, inner, sidebar, dan footer adalah sebagai berikut: header{height: 80px;border: 1px solid black;
Padda suub-area inner, kita letakkan top, content, dan right. Berikut kode CSSnya: #content{float: left;width: 380px;height: 230px;border: 1px solid black;}#top {
Selanjutnya, buat kode HTML untuk mengatur posisi area-area tersebut dengan memanfaatkan div. Konsepnya, semua area berada dalam wrapper. TOP, content, dan right berada dalam inner. Berikut kode HTMLnya: gt;

Baca konten-konten menarik Kompasiana langsung dari smartphone kamu. Follow channel WhatsApp Kompasiana sekarang di sini: https://whatsapp.com/channel/0029VaYjYaL4Spk7WflFYJ2H

Mohon tunggu...

Lihat Konten Nature Selengkapnya
Lihat Nature Selengkapnya
Beri Komentar
Berkomentarlah secara bijaksana dan bertanggung jawab. Komentar sepenuhnya menjadi tanggung jawab komentator seperti diatur dalam UU ITE

Belum ada komentar. Jadilah yang pertama untuk memberikan komentar!
LAPORKAN KONTEN
Alasan
Laporkan Konten
Laporkan Akun