Perancangan Web ( Pertemuan 3 ) Menambah Gambar,Link pada gambar,memberi animasi

Posted by : Unknown Thursday, March 13, 2014

Menambahkan Gambar

Dokumen HTML akan terlihat lebih menarik apabila disisipkan gambar. Format gambar yang dapat ditampilkan : GIF, JPEG, PCX, PNG, WMF, dll. Sedangkan format gambar yang dikenal oleh hampir semua browser adalah GIF dan JPEG. Untuk menambah gambar digunakan tag <img />.Tag <img /> mempunyai atribut :

Atribut Fungsi

Src : Merujuk kepada URL atau direktori lokasi gambar.

Align : Posisi text disekitar gambar, nilainya adalah top, middle, bottom, left, right.

Width : Lebar gambar dalam satuan pixel.

Height : Tinggi gambar dalam satuan pixel.

Alt : Menampilkan text pengganti jika gambar tidak tampil.

Latihan:

<html>

<head>

<title>Menambahkan Gambar</title>

</head>

<body>

Gambar ini terdapat pada windows 98 secara default, anda boleh

menggantinya.

</body>

</html>

Menambah Link dan Gambar

<html>

<head>

<title>Menggunakan Link</title>

</head>

<body>

<a href="http://www.unit.com">Klik disini</a> untuk menuju situs

Unit 2.<br />

Atau dapat juga mengklik gambar ini :

<a href="http://www.unit.com">

<img src="file:///E|/TUGAS BISNIS/web/Gambar/kjkjkl.JPG" alt="gambar gelembung" width="84" height="72" align="middle" />

</a>

</body>

</html>

Beberapa Animasi yang bisa digunakan untuk menggerakan tulisan atau membuat gambar bergerak gunakan script di bawah dan tambakan gambar yang ingin kamu jadikan animasi bergerak

<marquee direction = “left” scrollamount = “3” onmouseover = “this stop”() on mouse = “this.strat()”> toko kami menyediakan</marquee>

· <marquee behavior = “alternate” direction = “down” heigth= “200” toko buku serba murah </marquee>

· <marquee behavior = “alternate” direction = “down” height = “50”><marquee direction =”left”>toko buku serba murah</marquee></marquee>

CONTOH Penulisannya

<html>
   <head>
      <title>Menambahkan Gambar</title>
   </head>
   <body>
   <marquee direction = “left” scroll amount = “3” onmouseover = “this stop”() on mouse = “this.strat()”> <img src="file:///C|/Users/TOSHIBA/Pictures/Valentine.jpg" alt="gambar gelembung" align="middle" /></marquee>
   </body>
</html>