Lihat ke Halaman Asli

Membuat Layout Website Sederhana dengan CSS

Diperbarui: 26 Juni 2015   02:38

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




BERI NILAI

Bagaimana reaksi Anda tentang artikel ini?

BERI KOMENTAR

Kirim

Konten Terkait


Video Pilihan

Terpopuler

Nilai Tertinggi

Feature Article

Terbaru

Headline