Digital Audio Processor RDW 4.8

pada tanggal
6

HTML Image

pada tanggal
contoh gambar yang ditampilkan
Pada pembahasan kali ini saya akan memberi source code untuk menyertakan gambar atau image kedalam tampilan web. Gambar yang disertakan bisa offline maupun online, maksudnya adalah gambar yang ditampilkan nantinya bisa berasal dari hardisk kita sendiri ataupun dari hasil link yang didapat dari sebuah website atau web sharing gambar. 

gambar yang ditampilkan bisa berupa file gambar dengan format apapun, asalkan browser yang nantinya digunakan support untuk menampilkan gambar tersebut. Untuk gambar yang berupa file dengan format flash dibutuhkan sebuah aplikasi khusus yaitu flash player. Namun untuk browser yang terkini kebanyakan sudah support untuk menampilkan gambar flash sehingga tidak perlu lagi menambahkan aplikasi flash player.

Sintaks HTML untuk menampilkan gambar adalah sebagai berikut :
<img src="url" alt="some_text" style="width:width;height:height;">

Contoh :
<img src="Gambar.jpeg" alt="Gambar" style="width:100px; height:100px;">

Jika sudah paham silahkan coba script HTML dibawah ini :
 <!DOCTYPE html>

<html>

<head>

    <title>HTMl Gambar</title>

</head>

<body>

<b>Menampilkan gambar dari hardisk / offline</b> <br>

gambar_kucing.jpg <br>

<img src="gambar_kucing.jpg">

<br>

gambar kucing dengan atribute dan size 100px<br>

<img src="gambar_kucing.jpg" alt="Gambar Kucing" style="height: 100px; width: 100px">

<br>NB:<br>

Gambar harus berada dalam satu folder dengan file HTMl.<br>

Jika gambar berada berbeda folder maka harus menyertakan alamat file gambar dengan tepat.<br>

Contoh : foto lucu kucing dengan ukuran 150 X 200 px dari folder Gambar<br>

<img src="Gambar/foto-lucu-kucing.jpg" alt="Foto Kucing Lucu" style="height: 150px; width: 200px">

<br>

<b>Menampilkan Gambar dari alamat url / online</b><br>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyfGO1EO-EWDfofuOFRo4YpCZb-tcPFCn_azog-9EfrD02RHvp7CGEg33inyJOBcuBJGv9qIqqYlAVCBleTWKm91lqJNgzaXvJyN7TbqZhsjYrkdCuJErLAjCI1FRNZU7GGebx7neF1g/s320/gambar+kucing+5.JPG" > <br>

Menampilkan gambar dengan atribut dan size 150 X 250 px: <br>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyfGO1EO-EWDfofuOFRo4YpCZb-tcPFCn_azog-9EfrD02RHvp7CGEg33inyJOBcuBJGv9qIqqYlAVCBleTWKm91lqJNgzaXvJyN7TbqZhsjYrkdCuJErLAjCI1FRNZU7GGebx7neF1g/s320/gambar+kucing+5.JPG" alt="Gambar kucing dari web" style="width: 250px; height: 150px">

</body>

</html>
simpan dengan nama file "gambar.html" dan buka dengna browser kesayangan.

Komentar

Posting Komentar