Cara Memasukkan Gambar Di Html Dalam 6 Langkah Mudah

Mar 07, 2025 01:13 PM - 1 minggu yang lalu 16251

Mar 07, 2025

Faradilla A.

5menit Dibaca

Ketika membikin website dengan CMS terkenal seperti WordPress, Anda mungkin pernah mau mengupload gambar tertentu, tapi tidak bisa lantaran terdapat batas fitur.

Hal ini terkadang memang menyebalkan, terutama ketika Anda perlu menyisipkan gambar krusial seperti logo website di header dan footer.

Tapi tenang, Anda tetap bisa melakukannya, ialah dengan langkah memasukkan gambar di HTML tema website. Meskipun memerlukan sedikit pemahaman tentang penggunaan HTML di WordPress, prosesnya tidak susah dan tetap bisa diikuti oleh pemula, kok.

Di tulisan ini, kami bakal menunjukkan langkah menyisipkan gambar ke HTML di website Anda. Ada enam langkah yang kami jelaskan, jadi pastikan untuk mengikutinya dengan cermat, ya!

Langkah-langkah memasukkan gambar di HTML

Ada tiga langkah untuk mengupload dan memasukkan gambar di HTML: melalui FTP client seperti FileZilla, melalui File Manager hPanel, dan melalui dashboard WordPress. Untuk tutorial ini, kita bakal menggunakan opsi kedua.

Kami juga bakal menguraikan kode HTML gambar dan menjelaskan atribut yang diperlukan untuk menyisipkan gambar di website Anda. Langsung saja, simak tutorialnya di bawah ini yuk!

1. Upload file gambar

Pada langkah ini, kita bakal mengupload file gambar ke berkas public_html di website WordPress melalui file manager Hostinger. Langkah-langkahnya tidak bakal terlalu berbeda meskipun Anda menggunakan control panel hosting lainnya.

Akses hPanel Anda, buka bagian Website → Daftar Website, lampau klik Dashboard di samping website Anda. Setelah itu, buka File Manager.

tampilan menu file manager hostinger di laman dashboard hpanel

Buka berkas public_html dan klik dua kali berkas wp-admin, lampau pilih berkas images.

folder images di dalam wp admin - public html

Klik tombol Upload File di perspektif kanan atas menu bar, lampau pilih File.

memilih upload file di file manager hostinger

Pilih file gambar yang mau Anda upload. Pastikan namanya jelas dan mudah dibaca, lantaran bakal menjadi atribut titel gambar HTML Anda. Selain itu, gunakan tanda hubung untuk memisahkan kata-kata dalam namanya. Langkah ini juga bakal membantu mesin pencari memahami konten gambar, yang turut meningkatkan SEO website.
Tekan UPLOAD dan tunggu hingga prosesnya selesai.

Cara lainnya adalah dengan menambahkan gambar melalui dashboard WordPress. Berikut langkah-langkahnya:

Di Dashboard WordPress, buka Media → Add New (Tambah File Media Baru).

dashboard wordpress menampilkan menu menambahkan media baru yang dipilih

Pilih gambar yang mau Anda tambahkan, lampau tunggu sampai gambar selesai diupload.

Untuk menentukan format gambar terbaik, ada dua kategori yang bisa dipilih, ialah raster dan vektor. JPEG/JPG, PNG, dan GIF adalah beberapa contoh format file gambar raster, sedangkan vektor mencakup PDF, SVG, dan EPS.

2. Akses berkas tema

Tips berguna

Karena kita bakal mengedit arsip HTML, backup website Anda dulu sebelum melakukan perubahan apa pun. Hal ini bakal memastikan tidak ada informasi yang lenyap jika terjadi error selama proses berlangsung.

Untuk langkah ini, pertama akses editor tema WordPress dan file HTML tempat Anda mau menyisipkan gambar:

Dari Dashboard WordPress, buka Appearance (Tampilan) → Theme Editor (Editor Tema).

dashboard wordpress dengan opsi theme penyunting yang dipilih

Pilih tema yang digunakan website Anda, misalnya Twenty-Twenty.
Scroll ke bagian Theme Files (File Tema) dan klik file HTML yang mau Anda tambahkan gambar. Contohnya, jika Anda mau menambahkan logo ke header, klik file .header.php.

tampilan file header tema (header.php) wordpress

Temukan baris tempat tag body HTML alias <body> dimulai. Di bawah tag <div> yang pertama, masukkan tag gambar: <img>.

Tag gambar bakal berfaedah untuk menyematkan gambar ke dalam file HTML. Ini adalah tag kosong yang menyertakan atribut HTML, seperti img src dan alt, dan tidak memerlukan tag penutup.

Sekarang, kita bakal menguraikan komponen HTML lain yang diperlukan setelah tag img.

3. Tambahkan atribut img src pada gambar

Atribut img src merupakan atribut HTML wajib bagi komponen gambar, yang menentukan path file gambar dalam HTML. Apabila img src tidak ditentukan dengan benar, gambar tidak bakal dimuat.

Ada dua langkah untuk menulis atribut img src, ialah menggunakan path relatif alias absolut. Dengan path relatif, sumber gambar ditentukan pada direktori alias berkas gambar saat ini.

Opsi ini digunakan ketika gambar diupload ke direktori yang sama dengan file HTML yang mau Anda edit.

Syntax path relatif terlihat seperti ini:

Sementara itu, path absolut menentukan URL gambar sebagai sumbernya. Gunakan path ini ketika gambar diupload melalui Media WordPress alias berada di berkas yang berbeda dengan file HTML yang Anda edit.

Struktur syntax path absolut adalah sebagai berikut:

Untuk tutorial ini, kita bakal menggunakan path absolut. Dalam perihal ini, contoh img src untuk gambar yang kita upload di berkas images bakal terlihat seperti ini:

Apabila Anda mengupload gambar melalui media WordPress, ikuti petunjuk ini untuk menemukan sumber gambar:

Dari Dashboard WordPress, buka Media → Library (Pustaka).

dashboard wordpress dengan opsi library media yang dipilih

Klik gambar yang bakal Anda tambahkan, lampau scroll sidebar hingga Anda menemukan kolom File URL.
Tekan tombol Copy URL to clipboard (Salin URL ke clipboard) dan cukup tempelkan sebagai sumber gambar.

bagian url file di sidebar media wordpress untuk menyalin url gambar

4. Atur lebar dan tinggi gambar

Atribut lebar dan tinggi menentukan ukuran gambar, biasanya dalam piksel. Penting untuk mengatur kedua atribut ini, lantaran bakal menentukan ruang yang dibutuhkan oleh gambar tersebut saat browser memuat laman web.

Kalau tidak diatur, browser tidak bakal bisa menentukan ukuran gambar dan bakal menggunakan ukuran aslinya. Hal ini bisa mengubah tata letak laman web dan menyebabkan error saat browser memuat gambar.

Berikut adalah syntax untuk atribut lebar dengan contoh ukurannya:

Sedangkan syntax atribut tinggi adalah:

Ubah 50px ke ukuran yang diinginkan, tergantung tempat Anda mau meletakkan gambar dan kreasi laman web Anda.

5. Tambahkan atribut alt

Atribut alt HTML berfaedah untuk menambahkan teks pengganti alias info pada gambar. Teks deskriptif ini berfaedah untuk menunjukkan keterangan gambar ketika kandas dimuat akibat error alias hubungan yang lambat. Teks ini juga membantu aplikasi pembaca layar menjelaskan gambar kepada visitor yang mempunyai gangguan penglihatan.

Selain itu, alt text membantu mesin pencari memahami konten gambar tersebut selama proses crawling. Hal ini meningkatkan kesempatan gambar muncul dalam hasil pencarian gambar, serta membantu mengoptimalkan ranking laman web Anda.

Ingat, jelaskan penjelasan gambar secara spesifik beserta konteksnya. Selain itu, pastikan untuk menyisipkan kata kunci sasaran jika memungkinkan.

Syntax atribut alt adalah seperti berikut:

6. Simpan perubahan

Setelah Anda memasukkan semua atribut dan info krusial ke dalam file gambar HTML, kode gambarnya bakal terlihat seperti ini:

kode gambar yang disisipkan ke dalam file header php wordpress

Periksa kode sekali lagi sebelum mengklik tombol Update File (Perbarui file) untuk menyimpan perubahan. Kemudian, muat ulang website untuk memandang apakah langkah ini berhasil.

contoh postingan dengan file gambar yang sudah sukses dimasukkan ke HTML header

Bonus: Tambahkan link ke gambar

Saat mengupload foto dan gambar original ke website Anda, krusial untuk menambahkan URL alias link unik ke foto dan gambar tersebut. Hal ini berfaedah untuk mencegah website lain mengambil dan menggunakannya tanpa izin, kredit, alias backlink.

Apabila Anda belum tahu caranya, Anda bisa melacak file yang disematkan melalui URL gambar. Tempel URL pada Google Penelusuran Gambar, lampau daftar website yang menggunakan gambar tersebut bakal ditampilkan.

Cukup apit komponen anchor pada kode gambar jika Anda mau menautkan gambar dalam HTML. Anchor adalah teks yang menandai awal dan akhir link hypertext. Elemen ini mencakup tag pembuka <a> dan tag penutup </a>.

Kode gambar dengan syntax anchor tag bakal terlihat seperti ini:

Namun, jika Anda mengupload gambar melalui Media WordPress, Anda tidak perlu membikin URL khusus. URL gambar dibuat secara otomatis ketika file diupload.

Kesimpulan

Ketika menyesuaikan website, Anda mungkin tidak bisa menambahkan gambar ke laman lantaran beberapa batas fitur. CMS dan tema website biasanya menyediakan opsi sendiri untuk menyisipkan gambar, yang mungkin tidak sesuai dengan kebutuhan semua orang.

Solusinya, Anda bisa menambahkan gambar di HTML. Melalui tulisan ini, Anda sudah mempelajari langkah memasukkan gambar di HTML dalam enam langkah. Berikut rangkumannya:

Upload file gambar ke berkas di berkas public_html website melalui file manager yang disediakan oleh web host alias Media WordPress.
Akses file HTML tempat Anda mau menyisipkan gambar, lampau tambahkan tag img.
Sertakan atribut img src untuk menentukan sumber gambar.
Tambahkan atribut lebar dan tinggi untuk menentukan gimana browser kudu menampilkan gambar.
Sisipkan atribut alt untuk mendeskripsikan gambar.
Simpan perubahan.

Anda mungkin juga perlu menambahkan URL gambar unik untuk file Anda. Namun, jika menggunakan media WordPress, link ini sudah dibuat secara otomatis.

Selamat mencoba dan semoga berhasil! Kalau tetap mempunyai pertanyaan lebih lanjut, silakan sampaikan lewat bagian komentar di bawah tulisan ini ya.

Author

Faradilla, or Ninda, is a Content Marketing Specialist with a passion for technology, a curiosity for digital marketing trends, and a love for languages. When she's not writing Hostinger tutorials, you can find her learning about life sciences. Follow her on LinkedIn.

Selengkapnya