~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~SAYA MENDENGAR LALU SAYA LUPA ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SAYA MEMBACA LALU SAYA INGAT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SAYA MELAKUKAN LALU SAYA MENGERTI~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

4 April 2015

Pelajaran 07 : Menyisipkan Gambar (Insert Image) Pada HTML


Dalam pembuatan web agar lebih menarik biasanya disipi dengan gambar (image). File gambar yang disisipkan dalam web perlu dipilih file yang mempunyai byte kecil seperti misalnya file gambar dengan extention GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Groups) agar pada saat web tersebut diload tidak lambat. Untuk menyisipkan gambar digunakan tag <IMG SRC="nama file.gambar">. Untuk mengatur letak gambar dapat menggunakan atribut ALIGN atara lain BOTTOM (bawah), CENTER (tengah), TOP (atas), LEFT (kiri) dan RIGHT (kanan). Sedangkan untuk mengatur besar kecilnya gambar dapat menggunakan atribut WIDTH (lebar) dan HEIGHT (tinggi) yang diikuti dengan angka pembesarannya.
Ikuti penjelasannya sebagai berikut :
  • menyisipkan gambar
  • mengatur lebar gambar
  • mengatur posisi penempatan kiri dan kanan
  • mengatur posisi atas , tengah , bawah
  • border dan title gambar

1. Menyisipkan Gambar

Menyisipkan gambar menggunakan tag <img src="file gambar">. Misalnya menyisipkan gambar berikut.



Contoh penulisannya:

<html>
<head><title>sisip gambar</title></head>
<body>
File gambar yang disisipkan dalam web perlu
dipilih file yang mempunyai byte kecil
seperti misalnya file gambar dengan extention <br>
GIF (Graphics Interchange Format) <IMG SRC="tutwuri.GIF"><br>
JPEG (Joint Photographic Experts Groups) <IMG SRC="garuda.JPG">
</body>
</html>
 



2. Mengatur Lebar Gambar

Mengatur lebar gambar secara horisontal (melebar kanan-kiri) menggunakan tag <img src="file gambar" width="...."> dan secara vertikal (meninggi keatas-bawah) <img src="file gambar" height="....">.

Contoh penulisannya:

<html>
<head><title>mengatur lebar gambar</title></head>
<body>
<IMG SRC="tutwuri.GIF" WIDTH="100" HEIGHT="100">
diatur dengan lebar width="100" height="100" <br>
<IMG SRC="tutwuri.GIF" WIDTH="50" HEIGHT="50">
diatur dengan lebar width="50" height="50"
</body>
</html>
 



3. Mengatur Posisi Penempatan Kiri dan Kanan

Mengatur penempatan gambar diposisi kiri menggunakan tag <img src="file gambar" align="LEFT"> dan posisi kanan menggunakan tag <img src="file gambar" align="RIGHT">.

Contoh penulisannya:

<html>
<head><title>posisi gambar</title></head>
<body>
<IMG SRC="tutwuri.GIF" WIDTH="50" HEIGHT="50" align="LEFT">
<IMG SRC="garuda.JPG" WIDTH="50" HEIGHT="50" align="RIGHT">
gambar sebelah kiri disisipkan dengan menggunakan atribut align=LEFT, 
sehingga gambar ditampilkan disebelah kiri text. 
Sedangkan gambar disebelah kanan menggunakan atribut align=RIGHT, 
sehingga gambar ditampilkan disebelah kanan. 
</body>
</html>
 


4. Mengatur Posisi Atas, Tengah, Bawah

Mengatur penempatan posisi gambar dibawah pada baris menggunakan tag <img src="file gambar" align="BOTTOM"> , posisi gambar ditengah pada baris menggunakan tag <img src="file gambar" align="CENTER"> dan posisi gambar diatas pada baris menggunakan tag <img src="file gambar" align="TOP">.

Contoh penulisannya:

<html>
<head><title>posisi gambar</title></head>
<body>
atribut <IMG SRC="garuda.JPG" align="BOTTOM"> ALIGN=BOTTOM 
<br>
atribut <IMG SRC="garuda.JPG" align="CENTER"> ALIGN=CENTER 
<br>
atribut <IMG SRC="garuda.JPG" align="TOP"> ALIGN=TOP 

</body>
</html>
 



5. Border dan Title Gambar

Membuat border pada gambar menggunakan tag <img src="file gambar" border="....."> dan membuat titel pada gambar menggunakan tag <img src="file gambar" alt="informasi titel">.

Contoh penulisannya:
 
<html>
<head><title>border dan titel</title></head>
<body>
atribut <IMG SRC="garuda.JPG" border="0" alt="gambar garuda"> 
BORDER=0 ALT="gambar garuda" <br><br>
atribut <IMG SRC="garuda.JPG" border="3" alt="garuda juga"> 
BORDER=3 ALT="garuda juga" 
</body>
</html>
 
 
by herman @smkn3buduransda 



ARTIKEL TERKAIT:


BACA JUGA TULISAN MENARIK LAINNYA :

0 Komentar:

Post a Comment