Berikut ini adalah langkah-langkah untuk membuat halaman web sederhana menggunakan script HTMLdan CSS.

Merancang desain halaman

Pertama-tama yang harus kita lakukan adalah merancang kerangka halaman.

1. Membuat halaman HTMLSetelah membuat rancangan halaman, kita selanjutnya membuat halaman HTML berdasarkanrancangan yang sudah kita buat.HTML:

Beri nama file tersebut dengan nama: index.html

Setelah halaman HTML selesai dibuat, langkah selanjutnya kita akan menambahkan scrip CSS untukmengatur posisi dan menghias halaman.

Jangan lupa menyisipkan kode untuk memanggil script CSS.

Hasil:

2. Mengatur font halamanSebelum memulai, kita atur dulu jenis dan ukuran font dari keseluruhan halaman.

CSS:

Hasil:

3. Memberi style pada WrapperPada langkah ini, kita akan menentukan lebar dari elemen ‘wrapper’ sebesar 760px danmenyimpannya di tengah-tengah halaman. Selain itu kita juga akan menambahkan borderdisekeliling wrapper tersebut agar menjadi lebih terlihat.

CSS:

Hasil:

4. Menambahkan Margin, Padding & Mengatur FooterPada langkah ini kita akan menambahkan margin dan padding untuk semua elemen layout sekaligusmengatur letak dari footer.

CSS

Hasil

5. Mengatur Lebar elemen-elemen lainPada langkah ini kita akan mengatur lebar dari content, sidebar dan footer.

CSS

Hasil

6. Memberikan Float pada SidebarElemen sidebar harus kita beri float agar terletak di sebelah kanan halaman. Sedangkan elemencontent juga harus kita beri float agar terletak di sebelah kiri.

CSS:

Hasil:

7. Mengatur Ukuran HeaderLangkah ini berfungsin untuk mengatur tinggi dari elemen Header serta margin & padding untukelemen H1 di dalamnya.

CSS:

Hasil:

8. Mengatur Style untuk LinkLangkah ini berfungsi untuk mengatur style dari semua link yang ada di halaman.

CSS:

Hasil:

9. Memberi Warna pada BackgroundPada langkah ini kita akan memberikan warna background pada elemen-elemen layout.

CSS:

Hasil:

10. Memberikan Style untuk Judul HalamanLangkah ini berfungsi untuk mengatur style heading / judul halaman yang terletak pada header.

CSS:

Hasil:

11. Memberikan Style untuk NavigasiCSS:

Hasil:

12. Style untuk SidebarCSS:

Hasil:

13. Style untuk FooterCSS:

Hasil:

14. Style Heading untuk Content dan SidebarCSS:

Hasil:

15. Merubah Warna Background untuk HalamanCSS:

Hasil:

16. Menambahkan Image Background pada Header & FooterCSS:

Hasil:

17. Selesai!Bagaimana, Mudah bukan?Silahkan kalian coba sendiri, dan pada akhir setiap langkahnya, lihatlah perubahan pada browser.Mudah-mudahan dengan tutorial ini bisa memberikan pengertian mengenai bagaimana CSS bekerjadalam memperindah tampilan sebuah halaman web.

Jika ada pertanyaan mengenai tutorial ini silahkan hubungi saya atau kirimkan pertanyaan kesandhikagalih@gmail.com

Terimakasih dan Selamat Mencoba!

oleh:Sandhika Galih

sandhikagalih@gmail.com

Pasundan University

2009