Cara Memasukkan (memuat) gambar di HTML Lengkap

Setelah anda mengetahui struktur dari sebuah file HTML dan apa saja yang harus ditulis pertama kali. Selanjutnya saya akan mengajak anda untuk mempelajari cara memuat/menampilkan sebuah gambar dan memahami apa itu atribut HTML. Untuk memuat sebuah gambar pada dokumen HTML,Gambar adalah elemen yang sangat penting dalam menampilkan informasi. kita akan menggunakan tag <img>. Lalu dimana kita meletakkan gambar tersebut? Di dalam tag <img> kah?Setiap tag HTML dapat memiliki satu atau lebih atribut, atribut ini berfungsi untuk menyimpan informasi yang berkaitan dengan tag tersebut. Cara Memasukkan (memuat) gambar di HTML Lengkap

Pada tag <img> kita akan menggunakan atribut src untuk menyimpan lokasi gambar : <img src>

Selanjutnya untuk memasukkan nilai pada atribut, kita gunakan operator sama dengan (=) diikuti dengan lokasi gambar yang diapit oleh tanda kutip. <img src="gambar.jpg">

Tag img termasuk ke dalam tag spesial dan tidak memiliki tag penutup (Disebut juga sebagai Self Closed Tag), seperti tag-tag lainnya. Ini dikarenakan tag ini tidak memiliki konten seperti : <title>Ini adalah Konten tag title </title> Sebagai pengganti, kita tambahkan tanda slash (/) sebelum kurung tutup : <img src="gambar.jpg"/>

Baca Juga : Cara Penulisan Lokasi File / Gambar di HTML

Sekarang saatnya anda mencoba memuat gambar pada file HTML.

1.Buatlah file HTML baru dengan nama gambar.html

2.Carilah sebuah gambar dan simpan satu folder dengan file HTML anda. Untuk menampilkan gambar anda harus menyiapkan sebuah gambar dengan format JPG, GIF, BMP, dan sebaginya. Gambar hendaknya diletakkan pada area yang sama (folder yang sama dengan file HTML), hal ini untuk memudahkan dalam pemanggilan file gambar. 

3. Ketikkanlah kode HTML berikut :

Bukalah pada browser, anda akan melihat gambar telah termuat pada file HTML anda.

Setiap tag img, selain memiliki atribut src untuk menyimpan lokasi gambar, anda juga harus menyertakan atribut alt yang akan digunakan sebagai teks alternatif ketika gambar tidak berhasil dimuat atau gambar hilang. <img src="logo.png" alt="Ini adalah teks alternatif" />

Baca Juga:

• Cara Membuat Link di HTML
• Cara Membuka link pada tab/jendela baru
• Cara Mengatur Karakter Huruf di HTML

Contoh kode diatas akan menampilkan gambar sesuai dengan komposisi/ukuran sesuai dengan gambar yang asli, HTML menyediakan tag untuk membatasi ukuran gambar yang akan ditampilkan dengan cara mengatur tinggi dan lebar gambar tersebut.Untuk lebih jelasnya ketikkan kode berikut kemudian simpan dengan nama ukuran_gambar.html.

Hasil tampilan dari tag diatas adalah:

Selain itu gambar juga dapat memberikan fasilitas hubungan (link) atau menapilkan gambar sesuai dengan aslinya. Sebagai contoh ketik kode berikut lalu simpan dengan nama link_gambar.html.

Hasil dari kode diatas:

Dan jika anda klik gambar maka akan menuku situs/laman yang anda link kan. di sini saya link kan ke latihan1.html berikut hasilnya:

Gambar juga dapat digunakan sebagai latar belakang web anda. Berikut contohnya, kemudian simpan dengan nama gambar_background.html.

berikut hasil dari kode diatas:

Nah Bagaimana…? apakah sekarang kamu sudah mengerti Cara memasukkan gambar di HTML? Mungkin itu saja tulisan yang membahas tentang Cara Memasukkan (memuat) gambar di HTML, jika terdapat kekurangan ataupun kesalahan dalam penulisan mohon di maafkan dan perbaiki atau lengkapi saja jika terdapat kesalahan. Kalau memang tulisan ini bermanfaat tidak ada salahnya jika men-Sharenya kepada teman kamu yang lain, sekian dan terimakasih.

Share :