Palingit.com – Cara Menambahkan Gambar di HTML – Website akan lebih cantik dan menarik jika ditambahkan gambar yang mendukung. Sebab, jika tak ada visual gambar sekali, website akan terasa hambar dan membosankan. Sehingga visitor atau pengunjung tak betah berlama-lama di dalam website tersebut. Nah, untuk membuat website yang menarik, pastikan menambahkan gambar yang sesuai dengan tema website kamu.
Untuk kamu yang masih pemula dan mencari tahu cara menambahkan gambar di HTML, jangan lewatkan step by step-nya di sini!
Hingga saat ini, HTML memang merupakan bahasa pemrograman untuk membentuk website yang paling efektif. Menurut beberapa sumber, sekitar 90,4% website di seluruh dunia menggunakan HTML. Oleh karena itu, kamu harus tahu tutorial menambahkan gambar di HTML dan cara mengaturnya di sini!
Table of Contents
Cara Memasukkan Gambar di HTML
Agar tidak terjadi error saat memasukkan gambar saat kamu menggunakan HTML, pastikan menyimak baik-baik tutorial berikut ini.
1. Pilihlah Format Gambar yang Sesuai
Cara pertama yang harus kamu perhatikan adalah dengan memperhatikan format gambarnya, apakah sudah sesuai dengan website kamu. Sebab jika kamu salah memasukkan format gambarnya pada dokumen HTML, yang terjadi adalah kegagalan upload gambar.
Akibatnya, gambar tidak akan muncul di halaman website kamu. Berikut format gambar yang harus kamu perhatikan:
APNG = .apng
GIF = .gif
ICO = .ico , .cur
JPEG = .jpg , .jpeg , .jfif , .pjpeg , .pjp
PNG = .png
SVG = .svg
WebP = .jpg
Perhatikan dan hafalkan kode masing-masing format gambarnya. Di antara semua format gambar tersebut, yang paling terkini adalah format Webp. Format gambar ini baru dikeluarkan oleh Google, sehingga browser yang lama tak bisa menampilkan format gambar tersebut.
2. Masukkan Atribut untuk Tag <img>
Salah satu komponen penting dalam HTML adalah atribut. Dalam proses menambahkan gambar dalam HTML, kamu membutuhkan atribut tertentu untuk tag <img>.
Secara umum ada 4 atribut yang kerap digunakan pada tag image. Atribut-atribut tersebut adalah atribut alt, width, height, dan style. Mari kita praktikkan masing-masing atributnya.
Atribut Alt
Fungsi dari atribut alt adalah menambahkan teks alternatif pada gambar ketika terjadi kegagalan penampilan gambar. Kita lihat contoh berikut:
Maka nanti akan menampilkan seperti ini:
Sebagai disclaimer, sengaja tidak kami kosongkan nilai atribut src-nya, supaya gagal menampilkan gambar dan muncul teks alternatifnya. Sebab, tujuannya adalah untuk atribut alt dan memberikan teks alternatif ketika gambar gagal ditampilkan.
Perlu diketahui bahwa atribut alt ini tidak wajib kamu gunakan. Akan tetapi lebih baik tetap menggunakan, karena teks alternatif dapat berfungsi untuk meletakkan keyword SEO.
Atribut Width dan Height
Sesuai dengan namanya, dua atribut ini berguna untuk mengatur ukuran lebar dan tinggi gambar. Kita lihat demo berikut ini:
Ini langkah-langkah yang bisa kamu lakukan:
Untuk memanggil gambar dari tempat penyimpanan atau link yang mengarah ke gambar tersebut, gunakan atribut src, seperti contoh di atas.
Lalu masukkan nama file gambar yang ada dalam folder atau link gambarnya.
Kemudian angka setelah atribut width dan height adalah nilai pixel gambarnya. Kamu bebas mengisi berapa pixel, yang penting sesuai dengan kebutuhan gambar di dalam laman web. Dari contoh syntax di atas, akan menghasilkan gambar seperti ini:
Atribut Style
Atribut ini sesuai dengan namanya, berfungsi memberikan bentuk atau style gambar. Lihat contoh berikut:
Hasilnya akan seperti ini:
Untuk atribut style ini banyak sekali modelnya, bisa kamu cari kodenya di Google sesuai kebutuhanmu.
Cara Membuat Gambar Background
Bahasan ini sebenarnya masuk pada topik CSS, namun tidak kita bahas di sini karena masih menggunakan HTML. Kamu pasti pernah menemukan beberapa website dengan background webnya yang menggunakan gambar tertentu.
Jika gambarnya sesuai dengan apa yang menjadi tema utama websitenya, maka akan sangat menarik. Jika kamu ingin menambahkan gambar background pada website kamu, kamu bisa mengikuti cara berikut ini:
Masukkan atribut background-image
Kemudian isi dengan url gambar atau nama file gambar.
Pastikan format gambarnya tidak salah ya. Lihat contoh berikut:
Hasilnya seperti ini:
Gambar di atas hanya sekadar contoh saja. Tentunya kamu bisa memilih gambar yang pas dan lebih menarik untuk background web.
Cara Membuat Link pada Gambar
Ketika kamu mengeklik gambar dalam suatu web, kemudian laman web kamu akan diarahkan secara otomatis ke halaman web lainnya. Maka, sebenarnya terdapat link pada gambar tersebut.
Kamu juga bisa membuat link pada gambar di website melalui HTML, dengan cara:
Tambahkan tag <a> yang digabungkan dengan tag <img>.
Prosedurnya tag <a> harus mengurung atau mengapit tag <img>.
Misalnya sebagai berikut:
Di atas kami tambahkan link salah satu website tentang travel di Indonesia. Maka nanti ketika kamu mengeklik gambarnya, akan otomatis diarahkan ke halaman web yang ditunjukkan link tersebut. Seperti ini hasilnya:
Ketika di klik gambarnya maka akan di direct ke halaman web sesuai linknya, berikut penampakannya:
Lihatlah link halaman tersebut sama dengan link yang kami masukkan di tag <a> di atas.
Beberapa Tag Tambahan untuk Gambar di HTML5
HTML5 merupakan HTML versi yang terbaru, namun yang masih umum dan secara masif digunakan adalah HMTL biasa. Nah, tidak ada salahnya kamu tahu beberapa tag untuk gambar di HTML 5.
Ada dua tag tambahan untuk gambar di HTML 5, yaitu tag <figure> dan tag <picture>.  Mari kita terapkan masing-masing tag tersebut.
1. Tag Figure
Fungsinya adalah untuk memberikan bingkai terhadap gambar atau tag <img>, yang mana bingkai tersebut berupa teks caption. Sebagaimana yang umum diketahui, bahwa teks caption adalah teks yang berisi deskripsi atau penjelas gambar.
Untuk teks caption, kamu bisa menggunakan tag <figcaption>. Misalnya sebagai berikut:
Maka tampilan gambarnya akan ada teks caption di bawahnya. Berikut ini hasilnya:
2. Tag Picture
Beberapa website ada yang sangat baik tampilannya jika diakses melalui PC atau laptop. Namun ketika diakses melalui smartphone, kadang kala ada yang berantakan tampilannya.
Hal ini karena tampilan webnya belum diatur, sehingga bisa responsif sesuai dengan perangkat yang mengaksesnya. Nah, problem tersebut dijawab oleh tag <picture> ini. Fungsinya adalah mengatur gambar mana saja yang akan tampil dalam ukuran tertentu sesuai layarnya.
Agar kamu lebih paham, perhatikan contoh berikut:
Hasilnya akan seperti ini:
Gambar yang ada di halaman web tersebut akan otomatis mengecil jika perangkat yang mengakses juga semakin kecil ukurannya.
Itulah cara menambahkan gambar di HTML yang bisa kamu praktikkan. Tentunya penjabaran dalam artikel ini sangat lengkap jika dibandingkan artikel lainnya. Teruslah berlatih dan pantang menyerah hingga menjadi seorang programmer profesional.
Rekomendasi:
Harus Dicoba, Inilah 8 Game Gratis Terbaik 2023 palingit.com -Â Beberapa game hebat tidak memerlukan biaya apa pun. Lewatlah sudah hari-hari ketika game gratis disamakan dengan game puzzle tanpa henti dan game tiruan dengan label harga. Ada banyak game…
Terapkan 6 Tips Ini Agar Menyerap Ilmu Jadi Lebih Mudah! Palingit.com - Menyerap Ilmu - Siapa di sini kalau belajar materi yang diberikan guru sering sulit konsentrasi? Niat hati buka HP ingin menuntut ilmu, malah pusing setengah mati karena otak…
Cara Membuat Tabel di Html, Lengkap dan Mudah Palingit.com - Ketika kamu membuat suatu website, kadang kamu memerlukan kolom untuk kebutuhan tertentu, misalnya data siswa, atau yang lainnya. Namun bagi kamu yang masih tahap pemula dalam dunia pemrograman,…
Pengertian Hardware : Fungsi, Jenis dan Contoh Hardware palingit.com - Pengertian Hardware - Hardware atau yang dikenal juga dengan perangkat keras merupakan komponen fisik yang terdiri dari berbagai jenis komponen elektronik yang membentuk sistem komputer. Hardware meliputi semua…
Manfaat Webcam dan Cara Menyambungkan Webcam ke Laptop Palingit.com - Work from home pernah menjadi opsi perusahaan saat pandemi Covid-19 melumpuhkan dunia. Pasca pandemi, banyak orang ketergantungan dengan laptop dan belajar untuk menguasai cara menyambungkan webcam ke laptop.…
Cara Menghidupkan dan Mematikan Komputer secara Benar palingit.com - Cara menghidupkan komputer - Walaupun sekarang banyak yang sudah beralih dari komputer ke laptop. Namun masih banyak yang menggunakan komputer untuk menunjang kerja ataupun untuk bermain game. Selain…
Cara Download Game Di Laptop dan PC Mudah dan Praktis palingit.com - Cara Download Game Di Laptop - Game merupakan hiburan yang dapat di lakukan oleh semua orang, bisa lewat smartphone maupun laptop. Game ini harus di download terlebih dahulu…
Cara Download Foto Profil Instagram dengan Mudah Palingit.com - Cara download foto profil instagram sangat berguna jika kita ingin mengunduh foto profil instagram yang menarik. Instagram merupakan salah satu platform media sosial yang populer di kalangan pengguna…
Cara Mudah Mematikan HP Baterai Tanam Macet atau Hang [100%… Palingit.com - Mematikan HP Baterai Tanam - HP lagi nyaman dipakai tiba-tiba hang, tentu sangat menjengkelkan sekaligus panic mode on! Terlebih jika sedang ngerjain projek yang belum disimpan, sakit rasanya.…
Fungsi VGA Beserta Jenis dan Sejarahnya Palingit.com - Fungsi vga sangat penting diketahui bagi kita yang berkecimpung di dunia komputer ataupun sebagai pengguna biasa. VGA, atau Video Graphics Array, adalah salah satu komponen utama dalam sistem…
Cara Download Scribd Gratis via Situs dan Software Palingit.com - Cara download scribd gratis sangat berguna bagi kita yang membutuhkan dokumen scribd tertentu tanpa harus berlangganan premium. Scribd adalah platform berbagi dokumen online yang menyediakan akses ke berbagai…
9 Cara Membersihkan RAM HP Xiaomi Biar Nggak Lemot Palingit.com - Produk Xiaomi memang terkenal dengan produk yang spesifikasinya tinggi. Entah dari segi prosesor maupun RAM yang ada. Hanya saja, sama seperti ponsel lain. Xiaomi juga terkadang mengalami masalah…
Cara Membuat Link WhatsApp Untuk Grup Dengan Mudah palingit.com - Cara membuat link grup whatsapp - WhatsApp adalah aplikasi pesan instan yang memungkinkan pengguna untuk mengirim pesan teks, suara, gambar, dan video secara gratis. Aplikasi ini pertama kali…
Cara Membersihkan Cache di Laptop Sampai Tuntas Palingit.com - Cara membersihkan cache di laptop sampai tuntas memiliki berbagai manfaat yang dapat mengoptimalkan kinerja perangkat. Cache adalah data sementara yang disimpan oleh sistem operasi atau aplikasi di laptop…
6 Cara Mudah dan Cepat Mengecek Nomor Telkomsel palingit.com - Cara mengecek nomor telkomsel - Di zaman yang serba digital ini, setiap orang pasti memiliki setidaknya satu nomor telepon. Meskipun begitu, terkadang kita bisa lupa dengan nomor ponsel…
6 Cara Membuat Kamera Laptop Jernih Saat Online Meeting Palingit.com - Pandemi Covid-19 telah mengubah kehidupan kita, terutama dalam dunia kerja. Meski pandemi mulai mereda, masih ada karyawan yang memilih bekerja dari rumah. Mereka harus mencari cara membuat kamera…
Cara Membuat Halaman di Word Mudah Anti Ribet palingit.com - Cara Membuat Halaman di Word - Microsoft Word adalah salah satu program pengolah kata yang paling populer digunakan di seluruh dunia. Program ini dilengkapi dengan berbagai fitur yang…
Hati-Hati! 5 Kebiasaan Bikin Baterai HP Cepat Rusak Palingit.com - Kebiasaan Baterai HP Rusak - Tak jarang dipungkiri kalau bagian HP yang sering mengalami kerusakan ialah baterai. Padahal untuk menggantinya juga cukup menguras kantong para pengguna, karenanya mereka…
Aplikasi Desain Rumah Android Gratis Terbaik 2023 Palingit.com - Untuk memiliki rumah impian, tentu kamu harus menggambarkan tampilannya bukan? Saat ini, merancang desain interior dan eksterior terasa mudah meskipun bukan oleh arsitek. Tersedia berbagai pilihan aplikasi desain…
Penjelasan Password dan Kesalahan dalam Membuat Kata Sandi Palingit.com - Setelah membahas apa itu username, dilanjut dengan penjelasan password. Ya, karena di mana ada username maka tidak lain pasangannya ialah password. Secara umum, untuk mendapatkan akun suatu platform…
Sering Susah Sinyal? Ini Cara Mengatasi HP Susah Sinyal… Palingit.com - HP Susah Sinyal - Seluruh provider di Indonesia sudah tentu akan memberikan fasilitas layanan terbaik untuk para konsumennya, tidak lain di antaranya ialah kualitas jaringan stabil. Namun sayangnya,…
Tips Belajar Efektif Buat Kamu yang Ingin Selalu Maksimal! Palingit.com - Cara belajar yang tepat perlu diterapkan seefektif mungkin agar menyerap ilmu menjadi lebih maksimal. Selebihnya, tips belajar efektif juga akan membantu wawasan mudah masuk secara optimal pada otak.…
Penyebab dan Cara Mengatasi HP Mati Total Palingit.com - Cara Mengatasi HP Mati - Pada saat Hp mati total akan menjadi kasus yang cukup sering terjadi. Karena saat ini Hp sudah menjadi alat elektronik yang sangat dibutuhkan…
5 Fitur Baru Android 12, Menjadikan Personalisasi Lebih… Palingit.com - Fitur Baru Android 12 - Android merupakan sistem operasi yang paling banyak dikenal di belahan dunia manapun, termasuk Tanah Air Indonesia. Google secara resmi baru saja memperkenalkan versi…
Mudah! Ini Trik Belajar Fotografi HP untuk Pemula Palingit.com - Menghasilkan gambar yang bagus dan estetis kini menjadi salah satu skill yang diperlukan bagi pengguna media sosial. Tak perlu punya kamera mahal, pakai HP saja cukup, kok. Kamu…
Wajib Tahu, 5 Rekomendasi Game PS5 Terbaik 2023 palingit.com -Â Muat konsol baru Anda dengan judul-judul luar biasa ini. Selamat datang di pembaruan pertama daftar Game PS5 terbaik dari kami. Seperti biasa, saat bermain di PS5, kami menemukan game…
Script HTML Bucin versi Ulang Tahun! Palingit.com - Script HTML Bucin merupakan hasil codingan berbasis HTML, CSS, dan Javascript. Pada kesempatan kali ini saya akan membagikan sebuah HTML Bucin versi Buat Yang Lagi Ulang Tahun. Berikut…
10 Aplikasi Resep Masakan Offline yang Direkomendasikan Palingit.com - Di masa sekarang ini keterampilan memasak menjadi salah satu hal yang perlu dipelajari oleh setiap orang. Kamu perlu mengetahui aplikasi resep masakan offline supaya bisa lebih banyak mengeksplor…
Cara Menghapus Akun TikTok dengan Mudah dan Praktis palingit.com - Cara Menghapus Akun TikTok - Sejak peluncurannya TikTok telah mengalami perkembangan yang pesat dan menjadi salah satu platform media sosial yang paling populer di seluruh dunia. Pada tahun…
Cara Mengosongkan Ruang Penyimpanan Di HP palingit.com - Cara Mengosongkan Ruang Penyimpanan Di HP - Menjaga ruang penyimpanan yang cukup pada perangkat Anda sangat penting karena ruang penyimpanan adalah tempat di mana data Anda disimpan, termasuk…