Fungsi Tag Image HTML Dan Tutorial/Cara Menambahkan Gambar Di HTML

Posted on

Gambar di dalam suatu web page merupakan daya penarik bagi pengunjung suatu web site. Umumnya web site dilengkapi dengan gambar-gambar untuk membuat orang tertarik untuk melihat dan membaca isi yang ada di suatu web site.
Umumnya browser web dapat menampilkan inline image (yaitu, gambar yang disajikan bersamaan dengan teks), yang mempunyai format X Bitmap (XBM), GIF, atau JPEG. Format-format gambar lain juga sedang ada yang digabungkan ke dalam browser web [misalnya: format PNG (Portable Network Graphic)]. Setiap gambar akan membutuhkan waktu tambahan untuk didownload dan memperlambat awal penampilan suatu dokumen dalam browser. Karenanya hati-hati memilih gambar dan menyertakannya ke dalam suatu dokumen.
Untuk menyertakan sebuah inline image dalam dokumen web dan:
<img src=”namaimage”> dengan namaimage adalah URL dari file image tersebut.

img

Alignment Image

Contoh ini mendemonstrasikan bagaimana mengatur align image dengan teks. Lihat contoh gambar dibawah ini:

81

Lihat Source Code

<!-coba_imagealign.html->
<html>
<body>
<p>
Sebuah gambar
<img src=”../../pictures/html.gif” align=”bottom” width=”100″
height=”50″>
In the text
</p>
<p>
An image
<img src =”../../pictures/html1.jpg” align=”middle” width=”100″
height=”50″>
in the text
</p>
<p>
An image
<img src =”../../pictures/html2.jpg” align=”top” width=”100″ height=”50″> in the text </p>
<P>
Note that bottom alignment is the
default alignment
</P>
<p>
An image
<img src =”../../pictures/html3.jpg” width=”100″ height=”50“> in the text </p>
<p>
<img src =”../../pictures/html4.jpg” width=”100″ height=”50″>
An image before the text
</p>
<P>
An image after the text
<img src=”../../pictures/html5.png” width=”100″ height=”50″>
</p>
</body>
</html>

Floating Image

Contoh ini mendemonstrasikan bagaimana membiarkan suatu image mengambang di kiri atau di kanan paragraf.  Lihat contoh gambar dibawah ini:

82

Lihat Source Code

<!–coba_imagefloating.html–>
<html>
<body>
<p>
<img src =”../../pictures/html1.jpg” align =”left” width=”100″ height=”50″>
A paragraph with an image. The align attribute of the image is set to “left”. The image will float to the left of this text.
</p>
<p>
<img src =”../../pictures/html2.jpg” align =”right” width=”100″ height=”50″>
A paragraph with an image. The align attribute of the image is set to “right”. The image will float to the right of this text. </p>
</body>
</html>