Menampilkan Gambar Pada Halaman HTML

Gambar atau image bisa ditampilkan dalam sebuah halaman HTML dengan menggunakan tag <img>. Terdapat beberapa atribut penting di dalamnya untuk bisa mengatur gambar yang akan ditampilkan. Sebelumnya harus siapkan dulu gambar yang sudah disimpan dalam sebuah media penyimpanan dan lokasinya. Contoh saya punya sebuah gambar yang saya simpan di Google Drive dan Urlnya adalah

https://googledrive.com/host/0B-_ZnBBqsgHJU2lRa2lXUFVXbFE

Selanjutnya untuk menampilkan gambar dari URL tersebut adalah dengan menggunakan tag <img> dan atributnya seperti sintak di bawah ini:

<img src="url_gambar" alt="teks_gambar" width="lebar" height="tinggi">

Dan jika diterapkan dalam halaman maka bisa disusun menjadi sintak seperti berikut.

<img src="https://googledrive.com/host/0B-_ZnBBqsgHJU2lRa2lXUFVXbFE" alt="gambar tampilanku" width="300" height="225">

Maka, dari kode di atas akan menghasilkan output seperti di berikut ini :

Mari kita bahas struktur atribute di dalamnya. <img> adalah tag utamanya, atribut src adalah nilai dari lokasi gambar yang disimpan. alt adalah atribute option apabila gambar tidak tampil maka akan digantikan dengan tulisan pada nilainya yaitu "gambar tampilanku". Width nilai untuk mengatur lebar dan height untuk mengatur tinggi gambar.

Untuk ukuran lebar dan tinggi dihitung dalam satuan piksel. Pengaturan ukuran lainnya juga bisa menggunakan style dan css. seperti contoh berikut:

<img src="https://googledrive.com/host/0B-_ZnBBqsgHJU2lRa2lXUFVXbFE" alt="gambar tampilanku" style="width:300px;height:225px;">

Hasilnya akan sama saja, penggunaan CSS agar koding bisa lebih rapi dan terkontrol. Anda akan memahaminya sendiri saat sudah memahami semua sintak dan mulai membuat sebuah situs dengan pemahaman Anda sendiri.

Jika bingung dan ada yang mau ditanyakan silahkan tinggalkan komentar di bawah. Tengkyu.