Menyisipkan Gambar pada html
Selain teks, halaman web juga dapat memuat gambar/image. Terdapat beberapa jenis format gambar yang dapat digunakan pada halaman web, antara lain :
▫ GIF (Graphical Interchange Format) (.gif)
▫ JPEG (Joint Photographic Expert Image) (.jpg)
▫ PNG( Portable Network Graphic) (.png)
▫ BMP (Bitmap) (.bmp)
Untuk menyisipkan suatu gambar dalam halaman web dapat dilakukan dengan menggunakan tag <IMG>.
Atribut <IMG>
Tag tersebut memiliki elemen tambahan sebagai berikut :
Attribute | Value | Description |
| alt | text | Specifies an alternate text for an image |
crossorigin | anonymous | Allow images from third-party sites that allow cross-origin access to be used with canvas |
| height | pixels | Specifies the height of an image |
| ismap | ismap | Specifies an image as a server-side image map |
| longdesc | URL | Specifies a URL to a detailed description of an image |
width | pixels | Specifies the width of an image |
sizes | sizes | Specifies image sizes for different page layouts |
| src | URL | Specifies the path to the image |
srcset | URL | Specifies the path to an image to use in different situations |
usemap | #mapname | Specifies an image as a client-side image map |
Alamat gambar (Path)
Terdapat dua cara untuk memuat gambar dalam web dengan menggunakan tag <IMG>, yaitu:
▫ pada folder yang sama dengan halaman web, sehingga cukup dipanggil nama filenya saja, atau dapat berupa alamat dari suatu website. Contoh :
<img src=”http://techpedia04.my.id/image/logo.gif”>
<img src=”logo.gif”>
▫ pada folder yang terpisah dengan folder halaman webnya. Contoh :
<img src=”/image/logo.gif”>
<img src=”../logo.gif”>
Contoh :
<html>
<body>
<p><img src="facebook3.jpg" width="144" height="50" border=”1”><br>
Contoh penyisipan gambar <img src="facebook2.jpg" width="48" height="48">tinggal
meletakkan tag IMG di bagian yang akan disisipi gambar. Secara default atribut align
adalah <i><b>bottom</b></i> </p>
<p><img src="facebook2.jpg" width="60" height="60" align="top">Atribut align
<u>TOP</u></p>
<p><img src="twitter1.jpg" width="60" height="60" align="middle">Atribut align
<u>MIDDLE</u></p>
<p><img src="twitter3.jpg" width="60" height="60" align="right">Atribut align
<u>RIGHT</u></p>
<p><img src="android.png" width="100" height="60" alt="logo android">Penggunaan
Atribut <u>Alt</u>, karena gambar tidak dapat dimunculkan </p>
<p><img src="images/android.png" width="100" height="60" alt="logo
android">Penggunaan <u>relative address</u>, karena letak gambar berada di folder
lain </p>
</body>
</html>
Hasil:
Belum ada Komentar untuk "Menyisipkan Gambar pada html"
Posting Komentar