Seperti biasa sebelum memulai siapkan text editor bisa menggunakan Vs Code atau yang lain dan Browser.
Yang akan kita pelajari disini adalah:
Header pada website adalah element yang penting untuk kita menampilkan informasi kunci, header pada website posisinya berada pada sisi yang paling atas berfungsi untuk meletakkan beberapa konten yang sesuai dengan isi website kita.
1. Struktur Header
Pada struktur header kita akan membuat Logo dan Daftar, pada logo kita akan beri nama "andyusuf.site" dan pada daftar kita akan isi Tentang, Materi, dan Hubungi Kami. Kita akan mengelompokkan kedua element ini menggunakan <div>
Pada element Daftar kita sudah pernah mempelajari cara membuat list dengan menggunakan <li>, namun kali ini kita akan membuat list tanpa adanya titik hitam atau bullet yang terdapat pada list. Karna kita tidak memerlukan bullet maka kita akan hapus menggunakan property list-style pada element <li> kita akan menerapkan list-style ke none.
Sekarang mari kita coba dulu di text editor, gunakan code di bawah ini.
Code HTML
Dan kita lihat hasilnya di browser:
Hasil di atas bukanlah bentuk daftar yang ingin kita tampilkan di website kita, secara umum tampilan daftar akan di tampilkan secara vertikal, kali ini kita akan membuatnya menjadi horizontal sehingga sejajar dengan logo, untuk membuat daftar menjadi horizontal kita akan membutuhkan CSS, mari kita pelajari di paragraf berikutnya.
2. Layout Header
Dalam membuat daftar menjadi horizontal kita bisa mengubahnya di CSS dengan menggunakan property float, dengan property ini kita dapat mensejajarkan element secara horizonal.
Kita akan menentukan property float mejadi left artinya kita akan mensejajarkan element bersisian dari kiri ke kanan.
Mari kita mulai mengatur item daftar di header secara bersisian dengan menerapkan float : left; pada element <li> di CSS, setelah kita tambahkan property ini maka hasilnya akan seperti ini:
Setelah kita lihat hasil diatas sepertinya masih ada yang kurang, kita belum mensejajarkan element logo dengan element daftar, sekakarang mari kita sejajarkan element logo dengan element dafatr dengan menggunakan property yang sama yaitu float: left; pada element header-logo, setelah kita tambahkan maka hasilnya seperti di bawah ini:
Setelah kita lihat hasil diatas element logo dan daftar sudah sejajar namun masih terlihat ada yang kurang, ada yang kita perlu tambahkan untuk membedakan yang mana logo dan daftar dengan membuat font-size dari logo menjadi lebih besar dari element daftar sehingga hasilnya seperti ini:
Sekarang sudah terlihat yang mana logo dan daftar, hal terakhir yang harus kita lakukan adalah memberikan jarak sehingga lebih rapi dan menambahkan warna jika diperlukan.
3. Padding
Sekarang mari kita sesuaikan ruang antara element di header sehingga logo dan daftar pada header di tempatkan pada posisi yang sesuai.
Kita bisa menambahkan ruang pada element dengan menggunakan property padding ruang yang kita tentukan akan di tambahkan ke semua sisi element.
Namun kita juga bisa menambahkan ruang hanya pada satu element saja kita bisa menggunakan property padding-top pada sisi atas, padding-bottom pada sisi bawah, padding-right pada sisi kanan dan padding-left pada sisi kiri.
Selain itu ada juga istilah shorthand padding yaitu kita dapat menerapkan padding ke beberapa sisi hanya dengan satu property saja. Saat empat nilai di tentukan padding diterapkan searah jarum jam dari atas-kanan-bawah-kiri. Saat dua nilai ditentukan padding akan diterapkan dalam urutan atas/bawah dan kanan/kiri.
Contoh:
.logo {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
}
Jika empat nilai di tentukan bisa di terapkan dalam satu property menjadi:
.logo{
padding: 20px 10px 20px 10px;
}
Jika dua nilai ditentukan bisa di terapkan dalam satu property menjadi:
.logo{
padding: 20px 10px;
}
Sekarang mari kita mengatur ruang pada element header yang terdapat logo dan daftar. Tambahkan padding pada element header-logo dengan ukuran 20px atas/bawah dan 40px kanan/kiri. Kemudian tambahkan ruang pada element <li> dengan ukuran 30px atas/bawah dan 20px kanan/kiri. Terakhir sesuaikan warna dengan yang kita inginkan yaitu rgb (39, 102, 97) bisa di sesuaikan masing-masing.
Sekarang mari kita terapkan di text editor gunakan code di bawah:
Code HTML
Sekarang kita lihat hasilnya header logo dan daftar sudah sejajar dan sesaui posisi yang kita inginkan.
Sekarang kita sudah mempelajari bagian header selanjutnya kita akan mempelajari bagian Footer.
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