Cara Sisipkan Gambar

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

Selamat Datang di

Pusat BLOG

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 kaligrafi.gif, maka codenya adalah sebagai berikut ;

<img src="kaligrafi.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="kaligrafi.gif" border="2" />

<img 

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

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

/>

<img src="kaligrafi.gif" title="Gambar kaligrafi" />

Coba arahkan kursor ke gambar diatas dan sebuah tulisan “Gambar kaligrafi” 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>

Satu Tanggapan

  1. mas cara masukin untuk preview kode gimana?

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: