Skip to content Skip to sidebar Skip to footer
loading...

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

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. 

Lokasi File Image

3. Ketikkanlah kode HTML berikut :

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

hasil dari image src


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" />
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:

Cara mengatur Ukuran gambar di HTML

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:

Cara membuat Gambar Menjadi link di HTML

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

Cara membuat Gambar Menjadi link di HTML

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

berikut hasil dari kode diatas:

Cara membuat Gambar Menjadi Background

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.

2 comments for "Cara Memasukkan (memuat) gambar di HTML Lengkap"

= > Silahkan berkomentar sesuai artikel diatas
= > Berkomentar dengan url ( mati / hidup ) tidak akan di publish

loading...
loading...
loading...