Pages

Jumat, 05 Maret 2010

Membuat Desain Layout Web Memanfaatkan CSS (1)

Jika pada pembahasan sebelumnya kita membuat desain web menggunakan HTML saja, maka pada postingan kali ini kita akan membahas bagaimana cara membuat desain layout halaman web menggunakan CSS (Cascading Style Sheet). Wew,,apa itu CSS??
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.

Rekomendasi CSS menguraikan tiga jenis style:
- Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.
- Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.
- Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.

Untuk menghasilkan desain halaman web yang baik, penggunaan tabel tidak
disarankan dan sebagai gantinya adalah dengan memanfaatkan division.
Ok,,udah tau sekilas tentang CSS kn??so,,udah gk gitu ngeri lagi klu dengar kata-kata CSS.

Untuk membuat desain web dengan CSS ini,,kita harus mengetikkan kode yang disimpan dengan ekstensi css. Untuk pembahasan kali ini,,file css yang kita gunakan kita beri nama layout.css

Kode lengkapnya seperti di bawah ini.



Jika sudah mengetikkan kode di atas, maka kita perlu untuk mengetikkan kode dengan ekstensi html. Dalam pembuatan desain web kali ini file html yang kita gunakan diberi nama layout.html
Kode lengkapnya seperti di bawah ini.



Setelah mengetikkan kode di atas, maka jalankan file layout.html melalui browser yang tersedia. Jangan lupa untuk mengaktifkan local host yang akan digunakan.
Tampilan desain layout halaman web CSS dengan division seperti pada gambar di bawah ini.