Website yang akan dibuat menggunakan format HTML5. Perhatikan saja struktur dari penulisan kode-kode HTMLnya nanti. Juga dikombinasikan dengan beberapa properti CSS untuk semakin mempercantik tampilan websitenya. Ingat! Seperti yang pernah saya sampaikan di part 1 bahwa materi pembalajaran CSS ini adalah untuk melayout halaman atau tampilan website. Mengenai mempercantik tampilan dan sebagainya tidak termasuk pada bahasan.
Kalian bisa langsung melihat demonya menggunakan link yang ada pada tombol di bawah ini.
Silahkan kunjungi. Saya sengaja menguploadnya ke codepen agar tidak ribet dan sekaligus bisa langsung dilihat hasilnya.
Oke, langsung ke pembahasan. Kali ini kita menggunakan CSS Reset yang saya kira cukup baik dalam penggunaannya dibanding yang sudah pernah diterapkan pada materi sebelumnya. CSS Reset ini buatan dari Eric Meyer dan sekarang banyak dipakai oleh para Developer Web.
Langkah pertama adalah membuat navbar. Dengan melihatnya, saya yakin kalian sudah tahu membuatnya menggunakan properti apa saja. Semua materi mengenai CSS Layouting sudah diterapkan pada navbar ini. Lihatlah pada CSSnya, pada tag <header> terdapat properti Position dengan nilai Fixed. Pengaturan margin dan Position Relative pada tag <div> dengan class container-header. Float left pada judul websitenya dan lain sebagainya.
Pada Judul Web dan menu, saya sengaja tidak menggunakan margin untuk mengatur posisi verticalnya agar berada pas di tengah. Saya menggunakan Properti line-height yang sebenarnya digunakan untuk mengatur jarak vertical antar teks. Alasannya adalah lebih mudah untuk membuat teks berada pas di tengah. Karena dengan cukup mengetahui tinggi dari navbarnya, kita bisa lebih mudah membuat teks berada di tengah. Pada website yang kita terapkan mempunyai navbar dengan tinggi 60px, jadi tinggal beri line-height dengan nilai 60px otomatis teks akan berada di posisi tengah secara vertical.
Pada section hero, di sana lebih dominan menggunakan CSS Box Model. Karena yang diperlukan memang pengaturan jarak yang harus benar pada masing-masing elemen di dalamnya.
Di bawah hero terdapat inti dari website yaitu Content. Di dalamnya ada dua bagian yaitu main dan sidebar. Dua bagian atau elemen ini merupakan penerapan dari CSS Float. Ingat-ingat kembali materinya, coba bandingkan lalu pahami kodenya.
Mungkin ada yang bertanya-tanya tentang kenapa sidebar masih harus diberi float right? Padahal menurut kasus pada biasanya, elemen yang di bawahnya akan otomatis berada di samping kanannya. Di sinilah display mulai berpengaruh. Karena sidebar bisa mempunyai lebar dan tinggi, maka ia displaynya adalah block. Jika display block, maka posisinya bukan berada di kanan, melainkan menempati tempat dari elemen yang diberi properti Float tersebut. Jika seandainya displaynya inline, tanpa perlu diberi float right otomatis elemennya akan berada di kanan.
Terakhir, terdapat footer. Properti CSS yang digunakan adalah Box Model. Saya kira yang bagian ini sangat gampang sekali. Jadi tidak perlu penjelasan detail karena sudah dikupas tuntas pembahasannya pada part 1 dan 2.
Demikian penjelasan singkat mengenai Properti CSS yang digunakan untuk membuat website tadi. Saya kira, penjelasan-penjelasan singkat ini bisa mewakili dari pembahasan detail di part-part sebelumnya. Di sini kita hanya sekedar menerapkan dan memodifikasi sedikit agar website yang dihasilkan lebih baik lagi.
Untuk selanjutnya karena sudah mempelajari tentang CSS Layouting, Sekarang tinggal belajar cara menghias dan mempercantik tampilan websitenya. Dengan itu saya yakin, jika semua materinya bisa dikuasai dengan baik, style website seperti apapun akan mudah untuk dibuat nantinya.