Mengolah Gambar dengan HTML

Mengolah Gambar dengan HTML

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 :

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

1. Menambahkan Gambar

Hal pertama sebelum mengolah gambar dengan HTML yaitu dengan menambah terlebih dahulu gambarnya. mausukkan kode di bawah ini:  

<img src="nama gambar yang dipilih.jpg" alt="text saat gambar tidak muncul" align="middle" />

2. Membuat Gambar Bergerak

Sama seperti membuat tulisan bergerak (lihat tulisan bergerak disini). masih menggunakan marquee. ini kode htmlnya: 

• Gambar bergerak biasa (standard)
  
  

<marquee><img src="nama gambar.jpg"  align="middle" /></marquee>

Sebagai contoh :

<marquee><img src="IMG_20150315_201713.jpg" /></marquee>

• Gambar bergerak ke atas/ bawah/ kanan /kiri
  

<marquee direction="arahnya(up/down/right/left)"><img src="nama gambar.jpg"/></marquee>

Arahnya pilih salah satu, jika ini gambar arahnya ke atas pilih up. Kebawah pilih down,kekanan pilih right, ke kiri pilih left.

Sebagai contoh:

<marquee direction="up"><img src="IMG_20150315_201713.jpg"/></marquee>

• Gambar bergerak memantul
  

<marquee behavior="alternate"><img src="nama gambar.jpg"/></marquee>

Sebagai  contohnya:

<marquee behavior="alternate"><img src="IMG_20150315_201713.jpg"/></marquee>

• Gambar bergerak lalu berhenti
  

<marquee behavior="scroll"><img src="nama gambar.jpg"/></marquee>

Sebagai contoh:

<marquee behavior="scroll"><img src="IMG_20150315_201713.jpg"/></marquee>

         

 
 3. Mengatur Besar Gambar

<marquee><img src="nama gambar.jpg" weight="lebar" height="panjang"/></marquee

 Jika ingin mengatur besar gambar, atau lebar dan tinggi gambar gunakan weight dan height.

Sebagai contoh:

 <marquee><img src="IMG_20150315_201713.jpg" weight="50" height="100"/></marquee>


4. Memberi Link pada Gambar
Bisa dibaca (disini)