//
Tulisan terbaru
HTML

Format image HTML


Baiklah tutorial kali ini kita menggunakan gambar atau image dan kita akan membuat website lebih menarik dan enak di pandang, tapi perlu diperhatikan bahwa semakin banyak gambar di website kita maka semakin lama juga waktu yang dibutuhkan untuk mengakses website kita.

Format Gambar

Untuk format gambar ada 3 macam yang sering digunakan yaitu: GIF, JPG dan PNG. GIF dan PNG bisa digunakan untuk membuat gambar yang transparan serta biasa juga digunakan untuk gambar yang warnanya minim seperti untuk logo, banner, icon, dsb, Gif bisa membuat gambar animasi juga. Untuk menampilkan gambar yang berkualitas bagus dengan warna yang memadai digunakan format JPG.

Memasukkan gambar ke HTML

Untuk memasukkan gambar ke dalam dokumen HTML digunakan elemen img di ikuti dengan src (source) sebagai sumber atau lokasi dari gambar.

<img src="lokasi gambar" />

Ketika memasukkan gambar ke dalam dokumen HTML ada tiga atribut yang sangat penting harus selalu disertakan dengan elemen img yaitu alt, width dan height.

Alt (alternate) adalah sebagai teks alternatif yang ditampilkan oleh browser ketika gambar tidak dapat ditampilkan atau ditemukan sedangkan width dan height adalah ukuran lebar dan tinggi gambar dalam satuan pixel(px).

<img src="lokasi gambar" alt="teks alternatif"
width="lebar" height="tinggi" />

Contoh:

<img src="https://bonekahantu.files.wordpress.com/2012/04/
 soekarno.png"alt="Ir.Soekarno"width="100"height="100" />

Hasil :
Soekarno

Memposisikan Gambar

Untuk memposisikan gambar ke kiri dan ke kanan digunakan atribut style dengan properti float di ikuti dengan nilai (value) left (kiri) atau right (kanan).

Contoh membuat gambar disebelah kanan

<img src=" https://bonekahantu.files.wordpress.com
/2012/04/soekarno.png"style="float:right;"alt="Soekarno"
width="100" height="100" />

Hasil :
Soekarno

Membuat gambar di tengah dokumen
Untuk membuat gambar berada ditengah dokumen HTML kita harus memasukkan gambar tersebut di dalam blok elemen seperti p, div, table dsb. Kemudian kita masukkan atribut style dengan properti text-align kedalam elemen blok tersebut, dalam contoh kita akan menggunakan elemen div.
Hasil :

Soekarno

Membuat border gambar
Untuk membuat border pada gambar anda dapat menambahkan atribut style dengan properti border dengan nilai dalam px atau jika ingin menghilangkan border anda cukup menuliskan style=”border:none”
Berikut adalah contoh gambar dengan border 4px warna hitam.

<img src="https://bonekahantu.files.wordpress.com/2012/04/
soekarno.png" style="border:4px solid #000"
alt="Soekarno"width="100" height="100" />

Hasil :
Soekarno

Semoga bermanfat

Lihat juga :

About Boneka Hantu

SELALU INGIN BERBAGI

Diskusi

Belum ada komentar.

Komentar Dong's

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

Facebook Fans

Masukkan alamat surat elektronik Anda untuk mengikuti blog ini dan menerima pemberitahuan tentang tulisan baru melalui surat elektronik.

Singgah

  • 95,513 hits
Powered by Wordpress ~ Designed by WooThemes ~ Redesigned by Boneka Hantu