Latihan: Menambahkan Gambar pada Halaman Profil

Belajar Dasar Pemrograman Web

Tools

Betapa bahagianya! Kini tidak hanya tulisan lagi yang ditampilkan, kita sudah belajar cara menambahkan elemen gambar pada halaman web. Nah, kami telah menyiapkan beberapa aset gambar untuk proyek studi kasus kita tentunya. Yuk, berlatih lagi!

Tujuan

Pada latihan terakhir, kita berhasil menambahkan navigation list pada Halaman Profil. Lebih lanjut lagi, halaman tersebut akan kita kembangkan lagi dengan menambahkan elemen gambar dalam setiap topik pembahasan.

Hasil akhir pada latihan ini akan seperti gambar berikut.

Alur Latihan

Berikut adalah alur latihan kali ini.

Membuka hasil latihan terakhir dengan VSCode.
Mengunduh dan memindahkan aset-aset gambar yang telah disediakan pada proyek.
Menambahkan elemen gambar pada beberapa topik.
Menjalankan dokumen HTML pada browser.

Latihan Menambahkan Gambar pada Halaman Profil

Silakan ikuti dan simak beberapa langkah berikut untuk mengikuti latihan dengan baik.

Silakan buka proyek Halaman Profil terakhir dengan VSCode. Jika belum memilikinya, silakan Anda unduh dan buka proyek tersebut pada GitHub repository ini.
Karena kita akan menampilkan elemen-elemen gambar, silakan unduh aset-aset gambar yang digunakan pada halaman-profil-bandung-images.zip.
Jika sudah, silakan pindahkan berkas hasil unduhan pada halaman proyek. Pastikan berkas diletakkan sejajar dengan berkas index.html.
Lakukan ekstraksi berkas halaman-profil-bandung-images.zip dengan cara berikut.
1. Klik kanan dan tekan tombol “Extract All...”.
2. Window berjudul “Select a Destination and Extract Files” akan muncul untuk menanyakan lokasi ekstraksi. Kali ini, kita akan langsung menekan tombol “Extract”.
3. Proses ekstraksi akan berjalan dan folder dengan nama halaman-profil-bandung-images akan muncul. Ini merupakan nama dari berkas zip. Jika isi folder tersebut terdapat folder lagi yang bernama “halaman-profil-bandung-images”, silakan pindahkan berkas tersebut keluar dari folder hasil ekstraksi ini.
Sampai dengan langkah ini, berkas halaman-profil-bandung-images.zip sudah tidak digunakan dan bisa dihapus. Seharusnya, isi dari folder WebDasar menjadi seperti gambar berikut.
Sebelum lanjut, pastikan isi folder assets → image ada empat buah berkas gambar. Berkas-berkas ini yang akan kita tampilkan dalam halaman web.
Pada folder WebDasar, kita sudah memiliki dua isi, yaitu folder bernama “halaman-profil-bandung-images” dan berkas index.html. Silakan ubah dulu nama folder “halaman-profil-bandung-images” menjadi “assets”. Tujuannya hanya untuk mempermudah pemanggilan folder saja ketika digunakan.

Jika aset gambar sudah siap, mari kita terapkan pembelajaran elemen <img> pada proyek ini. Silakan buka berkas index.html dan tambahkan elemen-elemen gambar di bawah elemen heading sesuai kontennya masing-masing. Kode yang perlu ditambahkan memiliki cetakan tebal.

<!DOCTYPE html><html>
  <head>
    <!-- Kode disembunyikan... -->
  </head>
  <body>
    <!-- Kode disembunyikan... -->
 
    <h2>Sejarah</h2>
    <img src="assets/image/history.jpg" alt="Sejarah" />
 
    <!-- Kode disembunyikan... -->
 
    <h2>Geografis</h2>
    <img src="assets/image/geografis.jpg" alt="Geografis" />
 
    <!-- Kode disembunyikan... -->
 
    <h3>Farm House Lembang</h3>
    <img src="assets/image/farm-house.jpg" alt="Farm house" />
    <p>
      <!-- Kode disembunyikan... -->
    </p>
 
    <h3>Observatorium Bosscha</h3>
    <img src="assets/image/bosscha.jpg" alt="Bosscha" />
    <p>
      <!-- Kode disembunyikan... -->
    </p>
  </body>
</html>

Perhatikan penulisan nilai dari atribut src. Penulisannya sedikit berbeda dengan yang telah kita pelajari. Penulisan alamat gambar tidak menggunakan URL dari suatu domain (misalnya “https://www.example.com/image.jpg”). Namun, kita menggunakan relative URL di sini. URL yang merupakan lokasi sumber gambar yang relatif terhadap lokasi berkas index.html. Hal ini karena kita menggunakan gambar lokal yang ada dalam proyek pekerjaan kita sehingga penulisan path-nya mengarah ke lokasi dari berkas gambar tersebut.
Setelah menambahkan elemen gambar, halaman akan tampak seperti gambar berikut.
Selamat! Anda sudah berhasil menerapkan elemen gambar pada Halaman Profil. Kontennya sudah menjadi lebih menarik, bukan?

Bedah Kode

Pada latihan ini, kita telah melakukan perubahan yang sangat berarti. Halaman Profil yang telah dikembangkan kembali sudah memiliki gambar di dalamnya. Konten yang disajikan semakin lengkap dan menarik. Yuk, kita bahas tahapan yang telah kita lakukan selama latihan.

Menambahkan Konten Gambar

Sebagaimana telah dipelajari sebelumnya, elemen gambar bisa diciptakan dengan kode berikut.

<img src="path/ke/sumber/gambar.jpg" alt="Teks alternatif untuk gambar">

Elemen image tidak memiliki tag pasangan untuk bekerja dengan baik. Ada satu atribut wajib dan satu atribut opsional, yaitu src dan alt. Namun, atribut alt sangat direkomendasikan untuk disertakan nilainya meskipun opsional.

Atribut	Keterangan
src	Menentukan sumber gambar yang akan ditampilkan, baik menggunakan relative URL atau absolute URL.
alt	Memberikan alternatif data yang ditampilkan saat gambar tidak berhasil dimuat (error).

Absolute URL vs. Relative URL

Dalam menentukan sumber gambar untuk elemen <img>, kita tidak wajib menerapkan absolute URL sebagaimana pada materi sebelumnya. Itu disebabkan kita memanggil URL melalui suatu server lain sehingga perlu menyebutkan alamat URL secara lengkap. Ini disebut sebagai absolute URL.

Bagi yang memiliki gambar tersimpan secara lokal–tersimpan dalam satu folder proyek, kita dapat memanggil sumber gambar tersebut menggunakan relative URL. Kita hanya perlu mengarahkan path yang sesuai relatif terhadap letak index.html.

Perhatikan struktur berkas berikut sebagai contohnya.

Untuk memanggil gambar bernama “bosscha.jpg” dan menggunakan metode relative URL, kita membutuhkan penulisan kode berikut.

<img src="assets/image/bosscha.jpg" alt="Observatorium Bosscha">

Bagaimana jika gambar yang diberikan tidak berhasil ditampilkan? Alternatif tekslah yang akan ditampilkan.

Itulah pembahasan mengenai penerapan elemen gambar pada Halaman Profil. Seperti biasa, ada beberapa referensi yang dapat menambah pengetahuan Anda terkait gambar di HTML.