Tuesday 23 June 2009

Menyisipkan Gambar

Sekarang kita akan belajar menyisipkan gambar ke dalam website kita. Sekarang sebagai contoh, kita akan membuat website yang hasilnya kira-kira seperti ini :

Nah, tahu kan kira-kira seperti apa scriptnya? Baiklah, sebelum saya kasih source codenya, kita akan kasih tahu dulu cara memasukkan gambar pada website. Berikut ini adalah kode untuk memasukkan gambar :

<img src="file_gambar" />

Gampang kan? Nah, misalnya dari contoh diatas, file gambar yang digunakan bernama gambar.gif, maka codenya adalah sebagai berikut ;

<img src="gambar.gif" />

Ingat, file gambar harus diletakkan di folder yang sama dengan file htmlnya. Jadi misalkan file htmlnya berada di D:\website\ maka file gambar juga harus diletakkan di folder tersebut.

Atribut Gambar

Gambar yang kita sisipkan, bisa kita atur tampilannya. Berikut ini atribut yang bisa kita terapkan untuk gambar kita :

  1. border - untuk memberi bingkai pada gambar
  2. width - mengatur lebar gambar
  3. height - mengatur tinggi gambar
  4. alt - memberi text alternatif bila gambar tak berhasil dimunculkan pada website (biasanya karena pengunjung menghilangkan fungsi menampilkan gambar)
  5. title - memberi text penunjuk keterangan gambar. Saat pengunjung mengarahkan kursor pada gambar, maka akan muncul tulisan yang menerangkan gambar tersebut.

Berikut ini contoh penggunaan atribut gambar :

<img src="gambar.gif" border="2" />













<img

src="gambar.gif" width="50" />













<img src="gambar.gif" height="50"

/>








<img src="gambar.gif" title="Gambar logo" />


Coba arahkan kursor ke gambar diatas akan muncul. Untuk alt, sengaja tak ditampilkan disini karena hasilnya akan sama aja di layar.

Membuat background gambar

Seperti contoh diatas, kita akan menempatkan gambar sebagai background website kita. Maka kita perlu menyisipkan kodenya di tag <BODY> sehingga hasilnya sebagai berikut :

<HTML>

<BODY

BACKGROUND="background.gif">

Test gambar

background

</BODY></HTML>

Sekarang coba buatlah sebuah website yang tampilannya seperti contoh pertama kali diatas.

Komentar :

ada 0 comments ke “Menyisipkan Gambar”

Post a Comment

Recent Comments