(Programming) Membuat Simple CSS Template

Post saya kali ini saya akan membahas tentang gimana ya caranya bikin template css dari 0? Caranya gini, pada dasarnya di website ada 5 bagian yaitu wrapper, header, content, sidebar, dan footer. Anda juga bias menambahkan navbar.

•         Wrapper adalah element pembungkus, maksudnya element yang akan membungkus header,content,sidebar,footer dan navbar
•          Header adalah element yang biasanya di isi dengan gambar/animas agar web terlihat menarik
•          Content adalah element yang berisi data/informasi
•           Sidebar adalah element yang mirip navbar hanya saja sidebar berada di samping content, biasanya berisi pilihan-pilihan/iklan/form login
•            Footer adalah element yang berada di paling bawah, biasanya terdapat kalimat “Awesome Inc. template. Powered by Blogger” dan sebagainya

Yang pertama harus kita buat adalah file *.html dan *.css  misalkan index.html dan config.css , kemudian pada file *.html isikan syntax dasar html seperti dibawah ini:

Kemudian kita buat element yg saya bahas tadi dengan menambahkn tag

di tag seperti contoh dibawah ini :

Jika sudah mari kita jalan kan di web browser makan akan tampil seperti dibawah ini :

Sekarang kita tambahkan tag agar html tadi bisa kita sisip tag css dengan cara menambahkan tag dibawah ini di tag :

Maka akan menjadi seperti dibawah ini:

Selesai sudah di file index.html , sekarang kita akan ke file config.css nya. Pada tag

yg kita buat tadi ada tambahan menjadi

sebenarnya option id itu digunakan agar tag div bisa dikenali di css dan memberikan hasil yang berbeda dengan tag

yang lainnya, pada css option id diwakilkan dengan syntax “#” tanpa tanda petik, beda lagi kalo kita tuliskan pada tag div

maka pada css diwakilkan dengan syntax “.” Tanpa tanda petik, sekarang kita tulis di file config.css seperti dibawah ini:

maka jika kita jalankan di web browser akan terlihat seperti dibawah ini:

Setelah itu bisa anda buat kreasi anda sendiri, kemarin saya mencoba” ini hasilnya click here to download, kalo pengen belajar buka aja ini http://w3schools.com atau http://tizag.com
terima kasih semoga bermanfaat jika ada kekurangan mohon maaf sebesar”nya, terima kasih :D