Sebelumnya kita sudah mempelajari element Header, sekarang kita akan mempelajari element Footer. Sama dengan element header, namun di element ini kita akan letakkan di bagian bawah atau footer bisa juga kita sebut sebagai catatan kaki karna letaknya di bagian bawah.
Baca Juga: Mulai Belajar HTML
Baca Juga: Mulai Belajar CSS
Baca Juga: Layout (Tata Letak) Dasar
Baca Juga: Header
Seperti biasa persiapkan text editor untuk kita mengcoding bisa menggunakan VsCode atau yang lain dan Web Browser bisa gunakan Google Chrome atau yang lain.
Yang akan kita pelajari disini adalah:
Dalam menyusun tata letak pada element footer hampir sama dengan cara kita menyusun pada element header. Hal yang akan kita periksa adalah desain dan struktur dari footer yaitu disisi kiri terdapat logo dan disisi kanan terdapat daftar, mari kita mulai mempelajari struktur footer.
1. Struktur Footer
Pada materi sebelumnya, saat membuat header kita menggunakan float dan padding pada element <li> tentu kita menggunakan CSS pada element <li> untuk menyesuai ruang yang kita inginkan. Pertanyaannya adalah bagaimana cara kita membuat CSS yang berbeda pada element <li> yang terletak pada footer.
Caranya adalah dengan menggunakan istilah selector bersarang, yaitu pada CSS menambahkan li setelah header-list dengan spasi (header-list li). Tujuannya adalah untuk menerapkan CSS yang berbeda pada element <li> di header dan element <li> di footer.
Mari kita terapkan di text editor gunakan code di bawah:
Code HTML
Code CSS
Sekarang kita lihat hasil dari footer di bagian paling bawah:
Sekarang kita tinggal mengatur tata letak dari footer mari lanjut ke layout footer.
2. Layout Footer
Yang akan kita lakukan disini adalah mengatur ulang logo dan daftar, seperti kita lihat gambar di atas bahwa logo dan daftar berada pada sisi kiri, kita sudah mempelajari sebelumnya bahwa untuk meletakan element ini disisi kiri dengan menggunakan float: left; sebaliknya jika kita ingin meletakkan element ini di sisi kanan maka bisa menggunakan float: right;
Dengan float: right; kita dapat mensejajarkan element secara horizontal dari kiri ke kanan. Namun disini yang kita butuhkan adalah menggabungkan float: left; dan float: right; sehingga logo dan daftar berada pada sisi yang berbeda.
Untuk melatakkan logo di sisi kiri kita akan menggunakan float: left; pada footer-logo, kemudian pada daftar kita akan menggunakan float: right; pada footer-list sehingga posisinya berada pada sisi kanan.
Selain itu mari kita sesuaikan ruang menggunakan padding dan warna latar belakang menggunakan background-color seperti yang pernah kita buat pada element header.
Mari kita terapkan di text editor.
Code HTML
Code CSS
Maka kita lihat hasil dari footer
Seperti yang kita lihat pada gambar di atas bahwa bagian footer sudah sesuai dengan posisi yang kita inginkan.
Sekarang kita sudah mempelajari element footer selanjutnya kita akan mempelajari element konten atau main.
Terima Kasih dan Semangat Belajar.
Hallo teman-teman, terima kasih sudah membaca tulisan saya, semoga apa yang saya tulis di blog ini bisa bermanfaat. 
Hello, perkenalkan saya Andri Yusuf, Saya adalah bagian yang mengelola website ini. website ini saya buat sejak masih kuliah di bagian teknik informatika. Bagi saya menulis diblog adalah salah satu cara untuk menyimpan sekaligus berbagi ilmu yang pernah didapat. Terima Kasih telah berkunjung di Blog saya, mohon maaf jika ada kekurangan dalam penyampaian isi blog ini dan senang jika bisa berteman dengan anda. Sampai Jumpa!
Tidak ada komentar:
Posting Komentar