Website tanpa gambar = membosankan. Show
Setuju? Ya saya juga setuju. Gambar akan membuat website kita terlihat lebih menarik. Karena otak kita lebih mudah menyerap informasi dengan visual dibandingkan hanya teks saja. Karena itu, gambar sangatlah penting. Pada tutorial ini, kita akan belajar cara menambahkan gambar di HTML. Mari kita mulai.. Menambahkan Gambar di HTMLGambar dapat kita tambakan di HTML dengan menggunakan tag Jika kita tidak mengisi atribut Alamat URL gambar pada atribut Contoh:
Hasilnya: Perhatikan! Pada contoh di atas, kita menuliskan langsung nama file dari gambar. Ini karena kita menaruh gambar di dalam folder yang sama dengan file HTML. Apabila file gambarnya tersimpan di folder yang berbeda, maka kita hanya perlu menuliskan alamat path-nya. Misalkan, kita akan menyimpan gambar di dalam folder Maka di HTML, kita bisa tulis seperti ini:
Hasilnya akan sama seperti contoh di atas. Lalu bagaimana kalau gambarnya berada di internet atau website lain? Nah, jika kita menggunakan gambar dari website lain.. ..kita harus menuliskan alamat URL lengkap dari gambar tersebut. Contoh:
Hasilnya: Gampang kan? Nah, berikutnya kita akan pelajar format gambar apa saja yang bisa
digunakan di HTML dan juga atribut lainnya untuk Silahkan lanjutkan.. Format File Gambar untuk HTMLTidak semua format file gambar dapat ditampilkan di HTML. Karena tiap file gambar memiliki tujuan masing-masing. Misalnya file gambar dengan format PSD, ia adalah file gambar untuk Photoshop. Jelas ini tidak akan bisa ditampilkan di HTML. Lalu, format apa saja yang didunkung oleh HTML? Berikut ini daftar beberapa format gambar yang sering digunakan dalam web:
Format file ini juga akan bergantung pada versi browser yang digunakan. Kita ambil contoh format WebP, ini adalah format file gambar baru yang dikembangkan oleh Google. Jika kita menggunakan browser versi lama, gambar ini tidak akan bisa ditampilkan. Atribut untuk Tag <img>Ada beberapa atribut yang sering digunakan pada tag
Mari kita coba satu per satu.. Atribut altAtribut Contoh:
Hasilnya: Pada contoh tersebut, kita sengaja mengosongkan nilai atribut Apakah kita wajib
menggunakan atribut Sebenarnya tidak wajib, tapi sebaiknya tetap menggunakan atribut ini. Karena, nantinya teks alternatif akan dibaca oleh screen reader. Screen reader adalah aplikasi pembaca yang digunakan oleh tuna netra agar bisa mengetahui informasi yang ada di komputer. Selain itu, atribut Atribut width dan heightAtribut
Contoh:
Hasilnya: Satuan yang digunakan untuk nilai Atribut Atribut styleAtribut Contoh:
Hasilnya: Perhatikan gambar di atas ☝️.. Gambar pertama kita berikan style garis (border) dengan ukuran Lalu gambar kedua, kita berikan style Pada gambar ketiga, kita berikan nilai Membuat Gambar BackgroundSebenarnya ini sudah masuk ke dalam pembahasan tentang CSS, tapi tidak apa-apa kita bahas di sini. Agar gambar bisa ditampilkan sebagai background, maka kita harus menggunakan CSS dengan atribut Contoh:
Hasilnya: Membuat Link dengan GambarMembuat gambar sebagai link pernah kita bahas di Tutorial membuat link di HTML, tapi tidak apa-apa.. kita akan bahas lagi biar semakin paham. Baiklah… Cara membuat link dengan gambar adalah dengan menggabungkan tag Contoh:
Hasilnya: Membuat Link pada Bagian GambarLink dapat kita buat pada bagian tertentu pada gambar
dengan menggunakan tag Contoh: 1
Hasilnya: Tag Tambahan untuk Gambar di HTMLPada HTML versi 5, ada beberapa tag tambahan yang bisa digunakan untuk membantu tag Diantaranya:
Mari kita coba: Tag <figure>Tag figure berfungsi untuk membungkus tag Contoh:
Hasilnya: Tag <picture>Di era mobile seperti saat ini, website tidak hanya dibuka melalui komputer saja, tapi juga smartphone. Ukuran layar komputer dengan smartphone tentunya berbeda. Karena itu, website harus bersifat responsif agar bisa menyesuaikan diri dengan media yang digunakan. Nah, tag Mari kita coba contohnya:
Hasilnya: Apa Selanjutnya?Sejauh ini kita sudah belajar cara menampilkan gambar di HTML. Intinya, kamu hanya perlu mengingat cara menggunakan tag Berikutnya, silahkan pelajari:
Kenapa tidak bisa menampilkan gambar di HTML?Salah satu penyebab gambar tidak muncul di web adalah kesalahan nama folder gambar di kode HTML. Kesalahan tersebut membuat server tidak akan bisa menemukan gambar yang diminta untuk ditampilkan. Jika nama folder sudah dikoreksi, akses kembali halaman website yang gambarnya tidak muncul.
Bagaimana cara untuk memberi background berupa gambar pada HTML?Tikkan <div style="background-image: url('[image url]');"> di baris berikutnya. Inilah label HTML untuk menambahkan gambar latar belakang pada halaman web. Ganti "[image url]" dengan lokasi URL asli dari gambar yang diinginkan.
Bagaimana cara menampilkan gambar di HTML?Dalam HTML, tag yang berfungsi untuk menampilkan gambar adalah tag <img>, singkatan dari image. Tag <img> merupakan jenis tag yang berdiri sendiri atau dalam konteks elemen, merupakan elemen tanpa tag penutup (empty element). Tag <img> memiliki atribut khusus yaitu src singkatan dari source yang berarti sumber.
Bagaimana cara menambahkan warna latar belakang dalam HTML?Jika Anda ingin menggunakan warna-warna dasar pada kode HTML, tikkan nama warna tanpa tagar (“#”) sebagai pengganti kode warna HTML. Sebagai contoh, jika Anda ingin menggunakan warna oranye sebagai warna latar halaman, tikkan background-color: orange; .
|