Tutorial HTML 8 : Cara Menampilkan Gambar
• 8 min read • 5268 views
Tutorial HTML 8 : Cara Menampilkan Gambar
Pada dasarnya, gambar memiliki peran penting dalam meningkatkan daya tarik sebuah website. Bayangkan saja, sebuah website tanpa gambar cenderung terasa membosankan dan kurang menarik bagi pengunjungnya. Sebagai pengguna internet, kita juga cenderung setuju bahwa gambar dapat membuat pengalaman menjelajahi website menjadi lebih menyenangkan. Hal ini dikarenakan otak manusia cenderung lebih responsif terhadap informasi visual daripada hanya teks saja. Oleh karena itu, penting bagi kita untuk memahami cara menambahkan gambar ke dalam halaman web menggunakan HTML. Dalam tutorial ini, kita akan menjelajahi langkah-langkah sederhana untuk menambahkan gambar ke dalam kode HTML sehingga kita dapat meningkatkan kualitas visual dari halaman web yang kita buat. Ayo kita mulai perjalanan kita menuju pemahaman yang lebih mendalam tentang penggunaan gambar dalam pembuatan website.
Table of Contents
Cara Tambahkan Gambar Pada HTML
Menambahkan gambar ke dalam halaman web menggunakan HTML adalah salah satu cara untuk meningkatkan visualisasi dan daya tarik konten yang disajikan kepada pengunjung. Hal ini dapat dilakukan dengan menggunakan tag <img>, yang merupakan elemen dasar untuk menampilkan gambar dalam dokumen HTML. Penting untuk dicatat bahwa tag <img> harus memiliki atribut src yang mengarahkan ke alamat URL atau path file gambar yang ingin ditampilkan. Tanpa atribut src yang valid, gambar tidak akan muncul di halaman web.
Berikut adalah contoh kode HTML untuk menampilkan gambar sawah dalam halaman web:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar sawah:</p>
<p>
<img src="sawah.jpg" />
</p>
</body>
</html>
```
Dalam contoh di atas, atribut src pada tag <img> menunjukkan bahwa gambar "sawah.jpg" akan ditampilkan di halaman web. Pastikan bahwa nama file dan path gambar sesuai dengan lokasi sebenarnya dari file gambar tersebut. Dengan menambahkan gambar ke dalam halaman web, kita dapat memberikan pengalaman visual yang lebih menarik dan memikat bagi pengunjung, meningkatkan interaksi mereka dengan konten yang disajikan.
Baca Juga : - Membuat Link
Cara Menampilkan Gambar Pada HTML dalam Folder Yang Berbeda
Memahami penempatan dan penulisan alamat path gambar dalam HTML sangatlah penting untuk memastikan gambar dapat ditampilkan dengan benar di halaman web. Jika file gambar disimpan di dalam folder yang berbeda dengan file HTML yang mengandung tag <img>, maka kita perlu menyesuaikan alamat path-nya agar gambar dapat diakses dengan tepat.
Misalkan kita ingin menyimpan gambar di dalam folder "images", berikut adalah contoh kode HTML yang menunjukkan penulisan alamat path gambar yang benar:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar sawah:</p>
<p>
<img src="images/sawah.jpg" />
</p>
</body>
</html>
```
Dalam contoh di atas, atribut src pada tag <img> menunjukkan bahwa gambar "sawah.jpg" terletak di dalam folder "images". Dengan menuliskan alamat path gambar yang tepat, kita memastikan bahwa gambar dapat ditampilkan dengan benar di halaman web, bahkan jika gambar tersebut disimpan di dalam folder yang berbeda dengan file HTML. Dengan demikian, pemahaman tentang penulisan alamat path gambar dalam HTML akan memudahkan pengembang web untuk mengatur struktur folder dan menyimpan file dengan lebih terorganisir.
Cara Menampilkan Gambar Ke HTML dari link website lain
Menggunakan gambar dari website lain atau internet dapat menjadi pilihan yang cerdas dalam memperkaya konten visual dari halaman web kita. Dengan memiliki akses ke berbagai sumber daya gambar yang tersedia secara online, pengembang web dapat menemukan gambar-gambar berkualitas tinggi yang sesuai dengan tema atau konten halaman web mereka. Namun, untuk menggunakan gambar-gambar tersebut, kita perlu menuliskan alamat URL lengkap dari gambar tersebut dalam atribut src pada tag <img>.
Dalam contoh kode HTML sebelumnya, kita telah menampilkan gambar pemandangan yang diambil dari pengunduhan/file internal dalam komputer. Dengan menyertakan alamat URL lengkap dari gambar tersebut, kita juga dapat menampilkan gambar tersebut di halaman web kita tanpa perlu menyimpannya di server kita sendiri. Ini dapat menghemat ruang penyimpanan dan mempercepat proses pembuatan halaman web.
Berikut adalah contoh kode HTML untuk menampilkan gambar Candi Borobudur dari website lain:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar Candi Borobudur:</p>
<p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Borobudur_Temple.jpg/320px-Borobudur_Temple.jpg" />
</p>
</body>
</html>
```
Dengan demikian, menggunakan gambar dari website lain atau internet dapat memberikan fleksibilitas lebih dalam memperkaya konten visual dari halaman web yang kita buat. Jadi, ya, menggunakan gambar dari web lain itu gampang, praktis, dan dapat meningkatkan kualitas visual dari halaman web kita secara signifikan.
Format File Gambar Pada HTML
Dalam pengembangan halaman web, pemilihan format file gambar menjadi faktor kunci dalam memastikan konten visual dapat ditampilkan dengan benar dan optimal di berbagai browser dan perangkat. Tidak semua format file gambar cocok untuk digunakan dalam HTML, karena setiap format memiliki karakteristik dan kegunaan yang berbeda-beda.
Salah satu format gambar yang sering digunakan dalam web adalah **JPEG** (Joint Photographic Expert Group image), yang biasanya memiliki ekstensi .jpg, .jpeg, .jfif, .pjpeg, atau .pjp. Format ini sangat efisien untuk menyimpan gambar-gambar dengan detail kompleks, seperti foto-foto atau gambar berwarna yang realistis.
Selain JPEG, format **PNG** (Portable Network Graphics) juga populer di web dengan ekstensi .png. PNG sering digunakan untuk gambar-gambar dengan latar belakang transparan atau grafis dengan teks atau garis-garis yang tajam, karena PNG mendukung transparansi alfa.
**GIF** (Graphics Interchange Format) adalah format lain yang sering digunakan, terutama untuk gambar-gambar animasi. GIF memiliki ekstensi .gif dan dapat menyimpan beberapa frame gambar yang diputar secara berurutan untuk menciptakan efek animasi sederhana.
Selain itu, ada juga format **SVG** (Scalable Vector Graphics) dengan ekstensi .svg, yang menggunakan grafik vektor untuk menyimpan gambar. SVG memungkinkan gambar untuk diperbesar atau diperkecil tanpa kehilangan kualitas, sehingga cocok untuk ikon atau grafik yang kompleks.
Format **WebP** (.webp) adalah format gambar baru yang dikembangkan oleh Google, yang menawarkan ukuran file yang lebih kecil dengan kualitas gambar yang tetap tinggi. Namun, perlu diingat bahwa dukungan untuk WebP mungkin terbatas pada browser-browsing tertentu atau versi yang lebih baru.
Selain format-format di atas, ada juga format seperti **APNG** (Animated Portable Network Graphics) dan **ICO** (Microsoft Icon) yang memiliki kegunaan khusus dalam halaman web, seperti gambar animasi atau ikon favicon.
Pemilihan format file gambar yang tepat perlu dipertimbangkan dengan cermat, terutama mengingat bahwa dukungan format tersebut juga tergantung pada versi browser yang digunakan oleh pengguna. Dengan memahami karakteristik dan kegunaan masing-masing format gambar, pengembang web dapat memastikan bahwa konten visual yang disajikan di halaman web dapat diakses dan ditampilkan dengan baik oleh pengguna, tanpa mengalami kendala kompatibilitas atau kualitas gambar yang buruk.
- Tutorial HTML Part 1 : Pengenalan
- Tutorial HTML Part 2 : Tag, Element dan Atribut
- HTML 3 : Tutorial Membuat Paragraf
- HTML 4 : Cara Membuat Heading
- HTML Part 5 : Cara Membuat Komentar
- HTML 6 : Belajar Teks Formatting
- Tutorial HTML 7 : Membuat Link Untuk Menghubungkan Web
- Tutorial HTML 8 : Cara Menampilkan Gambar
- Tutorial HTML 9 : Jenis Atribut tag IMG HTML
- Tutorial HTML 10 : Cara Membuat List
- Tutorial HTML 11 : Cara Membuat Tabel
- Tutorial HTML 12 : Cara Membuat Form
- Tutorial HTML 14 : Cara Menampilkan Video
- Tutorial HTML 13 : Belajar Elemen Semantik
- Tutorial HTML 15 : Cara Menampilkan Audio
- Tutorial HTML 16 : Cara Membuat Website Sederhana
- Membuat Aplikasi Keuangan Pribadi Menggunakan Python dan Django ( Tutorial Lengkap )
Last updated on June 03, 2026
