Anak Males – Kali ini kita akan mencoba belajar caranya menampilkan gambar di html. Sebenarnya mudah saja untuk menampilkan gambar di html yaitu menggunakan img.
Karena seperti yang kita tau, HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web.
HTML menggunakan tanda-tanda (tag) yang dikelilingi oleh kurung siku untuk menandai konten di dalam dokumen.
Tag-tag ini menentukan bagaimana konten tersebut akan ditampilkan di layar atau bagaimana ia akan terhubung dengan konten lainnya.
HTML dikembangkan oleh Tim Berners-Lee pada tahun 1989 saat ia bekerja di CERN (Organisasi Eropa untuk Penelitian Nuklir).
Saat ini, HTML merupakan standar industri untuk membuat halaman web, dan versi terbaru dari HTML adalah HTML5.
HTML memiliki banyak elemen yang dapat digunakan untuk membuat struktur dokumen, seperti elemen untuk membuat paragraf, judul, daftar, tabel, dan banyak lagi.
Selain itu, HTML juga memiliki atribut yang dapat digunakan untuk memberikan informasi tambahan tentang elemen, seperti ukuran, warna, dan lain-lain.
HTML juga memiliki kemampuan untuk terhubung dengan file lain, seperti gambar, video, dan dokumen lainnya, yang memungkinkan Anda membuat halaman web yang interaktif dan menarik.
Cara Membuat Gambar di HTML
Untuk menampilkan gambar di dalam dokumen HTML, Anda dapat menggunakan elemen <img>. Elemen ini memiliki atribut src yang digunakan untuk menentukan lokasi file gambar yang akan ditampilkan.
Contoh penggunaan elemen <img> adalah sebagai berikut:
<img src="image.jpg" alt="Gambar">Di sini, src menentukan lokasi file gambar yang akan ditampilkan, sedangkan alt adalah teks alternatif yang akan ditampilkan jika gambar tidak dapat dimuat atau ditampilkan.
Anda juga dapat menentukan lebar dan tinggi gambar dengan menggunakan atribut width dan height, seperti ini:
<img src="image.jpg" alt="Gambar" width="200" height="100">Sebagai catatan, sebaiknya gunakan atribut width dan height dengan hati-hati karena dapat mempengaruhi ukuran sebenarnya dari gambar yang ditampilkan.
Lebih baik untuk menyesuaikan ukuran gambar terlebih dahulu menggunakan perangkat lunak editing gambar sebelum menampilkannya di dalam dokumen HTML.
Tag img pada html sangat berguna sekali untuk membuat gambar pada website. Selain membuat website menjadi lebih menarik, menggunakan gambar juga bisa meningkatkan SEO.
Peran Gambar Terhadap SEO
Gambar dapat memainkan peran yang penting dalam SEO (Search Engine Optimization) karena dapat membantu meningkatkan relevansi dan kegunaan halaman web Anda bagi pengguna dan mesin pencari.
Berikut adalah beberapa cara di mana gambar dapat membantu meningkatkan SEO:
- Memberikan konten visual yang menarik bagi pengguna: Gambar yang berkualitas tinggi dan relevan dapat meningkatkan kegunaan dan kepuasan pengguna terhadap halaman web Anda.
- Menambahkan kata kunci yang relevan: Anda dapat menambahkan kata kunci yang relevan dalam nama file gambar, judul, dan deskripsi gambar. Hal ini dapat membantu mesin pencari mengerti lebih baik tentang apa yang terkandung dalam gambar tersebut.
- Mempercepat waktu loading halaman: Gambar yang disesuaikan dengan ukuran yang sesuai dapat mempercepat waktu loading halaman. Hal ini penting karena waktu loading yang lama dapat mempengaruhi ranking halaman web dalam mesin pencari.
- Meningkatkan kemampuan untuk diindeks oleh mesin pencari: Mesin pencari dapat mengindeks gambar yang ditampilkan di dalam halaman web Anda. Namun, untuk membantu mesin pencari mengerti apa yang terkandung dalam gambar, Anda harus memberikan informasi yang cukup dengan menggunakan tag alt dan judul gambar.
Sementara itu, ada beberapa hal yang perlu diperhatikan saat menggunakan gambar untuk SEO, seperti menggunakan nama file yang deskriptif dan tidak menggunakan gambar yang tidak sesuai dengan konten halaman web.
Selain itu, pastikan untuk mengoptimalkan ukuran gambar agar tidak memperlambat waktu loading halaman.
Format img Yang ada Di HTML
Terdapat banyak jenis format file gambar yang dapat digunakan, namun yang paling umum digunakan adalah:
1. JPEG (Joint Photographic Experts Group)
- Merupakan format file gambar yang paling umum digunakan, terutama untuk foto dan gambar yang memiliki banyak warna.
- Dapat menyimpan gambar dengan kompresi yang tinggi, sehingga ukurannya lebih kecil dibandingkan dengan format lainnya.
- Tidak cocok untuk gambar yang memiliki garis tajam atau teks yang jelas, karena akan terlihat buram setelah dikompresi.
2. PNG (Portable Network Graphics)
- Merupakan format file gambar yang dapat menyimpan gambar dengan transparansi (tidak memiliki latar belakang).
- Dapat menyimpan gambar dengan kualitas yang lebih tinggi dibandingkan dengan JPEG, namun ukurannya lebih besar.
- Cocok untuk digunakan pada gambar yang memiliki garis tajam atau teks yang jelas, seperti logo atau icon.
3. GIF (Graphics Interchange Format)
- Merupakan format file gambar yang dapat menyimpan animasi.
- Dapat menyimpan hanya 256 warna, sehingga tidak cocok untuk digunakan pada foto yang memiliki banyak warna.
- Ukurannya lebih kecil dibandingkan dengan format lainnya.
4. BMP (Bitmap)
- Merupakan format file gambar yang sederhana dan dapat menyimpan gambar dengan resolusi tinggi.
- Ukurannya lebih besar dibandingkan dengan format lainnya.
- Tidak dapat dikompresi, sehingga tidak cocok untuk digunakan pada gambar yang akan diunggah ke internet.
5. TIFF (Tagged Image File Format)
- Merupakan format file gambar yang dapat menyimpan gambar dengan kualitas tinggi dan dapat dikompresi.
- Dapat menyimpan gambar dengan resolusi tinggi dan warna yang banyak.
- Ukurannya lebih besar dibandingkan dengan format lainnya, sehingga tidak cocok untuk digunakan pada gambar yang akan diunggah ke internet.
Pilihan format file gambar yang tepat tergantung pada kebutuhan dan tujuan Anda. Misalnya, jika Anda ingin menyimpan foto dengan kualitas tinggi, maka format file JPEG atau TIFF mungkin yang terbaik.
Namun, jika Anda ingin menyimpan gambar yang memiliki transparansi atau garis tajam yang jelas, maka format file PNG atau GIF mungkin yang lebih sesuai.
Jika Anda hanya ingin menyimpan gambar dengan resolusi tinggi namun tidak terlalu memperhatikan kualitas, maka format file BMP mungkin yang paling sesuai.
Sementara itu, ada juga beberapa format file gambar lain yang kurang umum digunakan, seperti SVG (Scalable Vector Graphics) yang dapat menyimpan gambar vektor dan dapat diperbesar tanpa menurunkan kualitas, dan WebP yang dapat menyimpan gambar dengan kompresi yang tinggi namun tidak didukung oleh semua browser.
Untuk menyimpan gambar dalam format yang berbeda, Anda dapat menggunakan perangkat lunak editing gambar seperti Adobe Photoshop atau GIMP. Anda juga dapat menggunakan situs web online seperti https://convertio.co/ untuk mengonversi file gambar dari satu format ke format lain.
Atribut Tag img Pada HTML
Elemen <img> dalam HTML memiliki beberapa atribut yang dapat digunakan untuk memberikan informasi tambahan tentang gambar yang ditampilkan. Berikut adalah beberapa atribut yang sering digunakan:
src: Atribut ini digunakan untuk menentukan lokasi file gambar yang akan ditampilkan. Contoh:<img src="image.jpg">alt: Atribut ini digunakan untuk memberikan teks alternatif yang akan ditampilkan jika gambar tidak dapat dimuat atau ditampilkan. Contoh:<img src="image.jpg" alt="Gambar">width: Atribut ini digunakan untuk menentukan lebar gambar dalam pixel. Contoh:<img src="image.jpg" width="200">height: Atribut ini digunakan untuk menentukan tinggi gambar dalam pixel. Contoh:<img src="image.jpg" height="100">title: Atribut ini digunakan untuk memberikan informasi tambahan tentang gambar yang ditampilkan. Informasi ini akan ditampilkan sebagai tooltip ketika pengguna mengarahkan mouse ke atas gambar. Contoh:<img src="image.jpg" title="Gambar pertama">class: Atribut ini digunakan untuk menentukan kelas elemen<img>, yang dapat digunakan untuk menentukan gaya dengan menggunakan CSS. Contoh:<img src="image.jpg" class="gambar-besar">id: Atribut ini digunakan untuk memberikan identitas unik pada elemen<img>, yang dapat digunakan untuk menentukan gaya dengan menggunakan CSS atau untuk mengidentifikasi elemen dengan JavaScript. Contoh:<img src="image.jpg" id="gambar-utama">
Selain atribut-atribut di atas, elemen <img> juga dapat menggunakan atribut-atribut lain yang ditentukan oleh HTML, seperti atribut style untuk menentukan gaya dengan menggunakan inline CSS, atribut data-* untuk menyimpan informasi tambahan yang tidak terdefinisi secara resmi, dan lain-lain.
Penutup
Mungkin kita cukupkan untuk tutorial menambahkan img pada html kali ini, sampai jumpa di tutorial berikutnya.