Kita buka kembali kode HTML kita dari pelajaran terakhir. Kita akan menambahkan gambar di bagian pertama dari konten kita, oleh karena itu kita menuju ke bagian setelah tag pembuka body. Untuk menambahkan gambar, kita menggunakan elemen IMG alias Image. Image adalah void element, jadi kita tidak perlu membuat tag penutupnya. Namun untuk menggunakan elemen Image, kita wajib mengisikan attribute src yang merupakan singkatan dari Source, dan kita mengisikan alamat dari gambar yang hendak kita tambahkan.

Untuk mendapatkan alamat dari gambar, misalkan saja kita melihat ke Twitter dari Skysen Solution. Disini ada gambar dari laptop yang saya gunakan untuk bekerja dari rumah. Kebetulan pada waktu video ini dibuat, Jakarta sedang dalam status PSBB karena ada wabah virus corona, jadi kita semua diminta untuk bekerja dari rumah saja.

Untuk mengambil alamat gambar, kita klik kanan pada gambar, lalu pilih Copy Image Address. Setelah itu bisa kita paste ke dalam source. Dan kalau kita refresh browser, maka kita bisa melihat bahwa gambar laptop sudah berhasil ditampilkan pada halaman HTML kita.

Kalau kita lihat kembali ke kode HTML kita, terutama pada attribute source, disini kita bisa melihat bahwa gambar diambil dari domain twimg.com milik Twitter. Artinya pada saat browser hendak menampilkan halaman ini dan melihat ada tag Image, lalu browser akan menuju ke domain twimg.com dan meminta ijin untuk mengambil gambar ini. Dan apabila diijinkan, barulah browser bisa berhasil menampilkan gambar tersebut pada halaman kita.

Apakah yang akan terjadi apabila ada perubahan pada Twitter? Misalkan ada upgrade besar yang menyebabkan seluruh alamat gambar berubah, atau Twitter membuat kebijakan baru yang tidak mengijinkan browser untuk mengakses gambar Twitter dari situs lain, atau mungkin saja di masa depan sudah tidak ada orang yang nge-twit lagi sehingga Twitter memutuskan untuk menutup servernya. Hal-hal seperti ini akan menyebabkan browser gagal mengambil gambar yang dibutuhkan. Untuk mensimulasikan hal ini, saya menambahkan satu huruf acak pada akhir dari alamat gambar.

Dan setelah kita refresh browser, maka kita akan menemukan icon gambar sebagai pengganti dari gambar laptop tadi. Icon ini melambangkan error yang terjadi karena browser gagal mengambil gambar.

Kita bisa menambahkan keterangan pada gambar, sehingga browser akan menampilkan teks tersebut pada saat gagal menampilkan gambar. Keterangan ini bisa kita taruh pada attribute alt, singkatan dari alternate text. Misalkan kita menambahkan attribute alt=”Foto laptop Skysen ketika bekerja di rumah”. Dan kita refresh browser. Kita bisa melihat keterangan yang kita tambahkan pada attribute alt. Attribute alt ini juga merupakan salah satu komponen penting untuk SEO, secara search engine tidak bisa mengetahui isi gambar pada source, maka kita menambahkan keterangan pada alternate text agar search engine dapat mengerti kira-kira apa konten yang dikandung oleh gambar tersebut.

Menggunakan source gambar dari situs lain akan beresiko menyebabkan halaman HTML kita gagal untuk mengambil gambar, dan akan menyebabkan design dari halaman kita menjadi berantakan. Oleh karena itu ada baiknya kita menggunakan gambar yang kita host sendiri, bersama dengan halaman HTML kita. Caranya adalah kita bisa meng-copy gambar yang ingin kita tampilkan ke folder yang sama dengan kode HTML kita. Misalnya saya copy gambar laptop.jpg ke folder LatihanHTML. Lalu pada attribute source, kita tinggal menyebutkan nama file laptop.jpg. Dan browser pun bisa menampilkan gambar tersebut ke halaman HTML kita.

Perlu diingat disini bahwa gambar laptop.jpg tadi kita copy ke folder yang sama dengan halaman HTML kita ya. Biasanya dalam praktek pemograman yang baik, kita akan membuat folder khusus untuk asset-asset yang kita gunakan dalam situs kita. Yang termasuk asset ini adalah gambar, css, javascript, dan lain-lain. Misalkan kita hendak mengumpulkan gambar-gambar kita ke dalam folder khusus, misalkan di dalam halaman HTML ini kita membuat folder lagi dengan nama gambar. Lalu file laptop kita pindahkan ke dalam folder gambar. Maka browser sudah tidak bisa mengambil gambar tersebut, karena gambarnya sudah kita pindahkan ke folder lain.

Untuk memperbaikinya, kita mesti nambahkan nama folder gambar ke dalam source, dan kemudian diberi tanda slash, barulah diikuti dengan nama file laptop.jpg. Dan gambar pun sudah berhasil ditampilkan kembali.

Ada beberapa attribute lagi yang bisa kita gunakan untuk pengaturan gambar. Misalkan gambar yang sekarang ukurannya terlalu besar untuk ditampilkan di halaman kita, maka kita bisa melakukan penyesuaian dengan menggunakan attribute width, dan diisikan dengan ukuran lebar gambar dalam jumlah pixel. Sebagai contoh saya ingin menampilkan gambar ini dengan ukuran lebar 300 pixel saja. Maka browser akan menampilkan gambar tersebut dengan ukuran yang lebih proporsional untuk halaman kita.

Sebagai alternatif, saya juga bisa menggunakan attribute height untuk mengatur tinggi gambar dalam jumlah pixel. Dan kurang lebih hasilnya seperti ini.

Dan perhatikan juga bahwa apabila kita menggunakan attribute height dan width sekaligus untuk tag IMG, maka browser akan melakukan strech pada gambar sehingga ada kemungkinan gambarnya menjadi tidak proporsional. Sebagai contoh saya tambahkan width=”300”, dan kita bisa hasilnya ada terjadi strech pada gambar sehingga gambar menjadi tidak bagus.

Kita juga bisa membuat gambar menjadi lebih menarik dengan cara membuatnya berbentuk lingkaran. Untuk itu kita bisa menggunakan tools seperti crop-circle.imageonline.co. Disini kita bisa memilih gambar laptop dari folder LatihanHTML/Gambar. Lalu kita bisa mengatur bagian mana yang hendak di-crop. Dan kita bisa mendownload hasilnya. File ini bisa kita pindahkan ke folder gambar kita, dan kemudian kita ganti source kita menjadi circle-cropped.png. Kita hapus attribute height. Dan kemudian gambar laptop akan ditampilkan dalam bentuk lingkaran.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.