Imej boleh digunakan sebagai medium perhubungan secara langsung kerana otak manusia mampu menterjemah maksud dalam sesebuah gambar lebih pantas berbanding teks. Selain itu, memaparkan imej yang sesuai dengan reka bentuk asas laman sesawang memainkan peranan penting dalam menarik minat pengunjung untuk terus melawat pada masa akan datang.

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

Latihan

Langkah 1: Buka mana-mana text editor yang anda miliki seperti Atom, Notepad atau Sublime dan tuliskan kod atur cara berikut.

Langkah 2: Simpan (Save) hasil kerja anda tadi dengan nama bootstrap_image.html ke dalam folder Genius Corner seperti latihan terdahulu.

Langkah 3: Klik dua kali (double-click fail tadi untuk melihat hasilnya melalui pelayar sesawang (web).

Semakan

MELALUI latihan pertama tadi, kita telah pelajari dua kaedah memanipulasi imej menggunakan Bootstrap. Pada imej pertama, kita telah menambah kelas rounded ke dalam tag <img> untuk memberikan hujung sempadan yang sedikit melengkung.

Pada imej kedua pula, kita telah menambah kelas rounded-circle pada tag <img> untuk menjadikan imej kelihatan bulat. Kaedah yang sama digunakan oleh Facebook dan Google bagi memaparkan imej profile anda kelihatan lebih kemas dan moden.

Soalan

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

1. Paparkan lima imej dengan kelas rounded dalam satu baris yang sama.

2. Paparkan lima imej dengan kelas rounded dan rounded-circle dalam satu baris.

3. Gantikan imej KL Moon dengan imej 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 dalam ruangan yang sama minggu hadapan, selamat mencuba.