Header merupakan elemen navigasi yang terletak di bahagian atas paparan aplikasi mudah alih. Elemen ini biasanya memaparkan nama skrin paparan semasa, butang tetapan (settings) dan juga butang carian (search).

Footer pula merupakan elemen navigasi yang terletak di bahagian bawah paparan aplikasi mudah alih. Elemen ini biasanya digunakan untuk memaparkan menu yang mengandungi fungsi utama aplikasi seperti laman utama, tambah item, senarai item serta kamera.

Contoh aplikasi yang menggunakan header dan footer dengan optimum ialah Instagram. Menerusi penggunaan imej ikon, fungsi utama aplikasi tersebut boleh dipersembah dengan baik dan boleh difahami pengguna dari seluruh dunia, merentas sempadan bahasa pertuturan tempatan.

Tanpa membuang masa, mari kita teruskan dengan latihan minggu ini.

Soalan

Sebelum ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan.

1. Ubah warna latar header daripada biru kepada hijau.

2. Tambah bilangan butang pada footer daripada tiga kepada lima.

3. Ubah ikon pada butang footer kepada ikon pilihan anda sendiri.

Jika anda mempunyai sebarang pertanyaan atau cadangan, sila tinggalkan komen anda di www.farizgaskin.com dan kami akan cuba jawab sepantas mungkin.

Sehingga bertemu lagi pada minggu hadapan, selamat mencuba!

Semakan

Dalam kod atur cara tadi, elemen <div> untuk header dan subheader dimasukkan ke dalam tag <body>, sebelum elemen <div> senarai (List). Menerusi penggunaan library css, elemen <div> yang ingin dijadikan header hanya perlu ditambah dengan kod class = bar bar-header bar-positive.

Bagi elemen footer pula, anda hanya perlu tambah kod class = bar bar-footer bar-assertive ke dalam elemen <div> yang terpilih.

Untuk memasukkan tajuk dan butang menu pula, elemen <button> perlu dimasukkan di antara pembuka dan penutup <div>.