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
use-credentials

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

pixelsSpecifies 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:


Sekian pembasaran mengenai bagaimana menyisipkan gambar pada html, untuk menyisipkan link saya akan buat di postingan selanjutnya terimakasih.

Posting Komentar

Post a Comment (0)

Lebih baru Lebih lama