ke bawah
Selain memperindah halaman, kadang gambar juga dibutuhkan sebagai ilustrasi pada artikel atau promosi suatu product. Tapi perlu diingat bahwa semakin banyak gambar yang disimpan pada halaman maka semakin lama saat loading.
Tag <img>, Atribut "src:" dan atribut "alt:"
Untuk menempatkan gambar pada halaman, dalam penulisan dokumen html digunakan tag <img>, atribut src dan atribut alt.
<img src="http://alamat_gambar/
gambarku.jpg" alt="gambarku" />
- tag<img>: berfungsi untuk menempatkan gambar pada halaman.
- atribut src: (source=sumber) untuk menginformasikan dimana letak (sumber) gambar itu berada.
- atribut alt yang merupakan singkatan dari kata "alternate", berfungsi sebagai informasi alternatif apabila karena satu dan lain hal gambar yang kita tempatkan tidak muncul, sebagai gantinya adalah teks tersebut.
- tag <img> tidak menggunakan tag penutup, sebagai gantinya adalah ditutup pada tag awal yaitu dicantumkannya tanda slash ( / ) sebelun tanda >, yang sebelumnya harus diberi spasi.
Memposisikan gambar
Posisi gambar dapat diatur menggunakan atribut style dengan properti: float dan dengan value /nilai: left (untuk posisi sebelah kiri), dan right (untuk posisi sebelah kanan.)<img src="http://...../gambarku.jpg" alt="gambarku" style="float:left \right" />
letak gambar sebelah kiri
letak gambar sebelah kanan.
Untuk meletakan gambar dengan posisi ditengah halaman, kita bisa memasukan elemen img pada blok elemen, misalnya pada tag <p>, elemen <div> tag <table> dan lainnya, menggunakan atribut style dengan properti text-align.
Sebagai contoh, misalnya kita menggunakan elemen div seperti ini.
<div style="text-align:center"> <img src="http://..../gambarku.jpg" alt="gambarku">
</div>
Menentukan ukuran gambar
Untuk menentukan ukuran gambar digunakan atribut width untuk menentukan lebar gambar dan atribut height untuk menentukan tinggi gambar. Sedangkan nilai ukurannya bisa menggunakan satuan pixel (px) atau persen (%).<img src="http://..../gambarku.jpg" alt="gambarku" width="....px" height="....px" />
gambar diperkecil.
gambar diperbesar
Membuat bingkai gambar
Untuk membuat bingkai/border gambar kita perlu menambahkan properti border pada atribut style, dengan nilai dalam satuan "px" kemudian diikuti dengan tulisan solid dan nilai warna (sebagai warna bingkai), yang penulisannya diantarai dengan spasi.Berikut ini adalah Contoh bagaimana membuat bingkai/border setebal:5px, dengan warna border: lemon.
<img src="http://...../gambarku.jpg" alt="gambarku" width="60%" style="border:5px solid #00FF00" />
hasilnya seperti berikut ini : gambar dengan bingkai.
Gambar sebagai Background.
Cara memasang gambar sebagai background sama saja dengan background warna, kita hanya mengganti propertinya saja dengan "background-image" dengan value : "url(http://..../gambarku.jpg)" pada atribut style yang dapat dipasang pada tag <p>, tag <hx> dan tag <body>.<p style="background-image:
url(http://.../gambarku.jpg)"> Tulisan pada paragraf ini dilatarbelakangi oleh gambar.
</p>
hasilnya seperti ini :
Tulisan pada paragraf ini dilatarbelakangi oleh gambar.
Demikian juga untuk background gambar pada heading dan body.back to top
Tidak ada komentar:
Posting Komentar