Gambar (image) HTML

Dengan gambar atau image 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="http://htmlcssguides.com/images/gambar-avril.jpg" alt="Gambar Avril" width="100" height="100" />

Hasil:

Gambar Avril

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="http://htmlcssguides.com/images/gambar-avril.jpg" style="float:right;" alt="Gambar Avril" width="100" height="100" />

Hasil:

Gambar Avril

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.

<div style="text-align:center;"><img src="http://htmlcssguides.com/images/gambar-avril.jpg" alt="Gambar Avril" width="100" height="100" /></div>

Hasil:

Gambar Avril

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="http://htmlcssguides.com/images/gambar-avril.jpg" style="border:4px solid #000" alt="Gambar Avril" width="100" height="100" />

Hasil:

Gambar Avril


» Tutorial selanjutnya:

« Tutorial sebelumnya:

Posted in HTML Tutorial by Masim man

Post a comment

30 Responses to “Gambar (image) HTML”

  1. uang said:

    mantap..
    kebetulan sedang desain gambar untuk blog baru..
    terimakasih bos..
    salut buat anda..

  2. ViviGo said:

    Thanks u very much

    sangat detail dan enak dipelajari

    Muantapp

    thanks

  3. Rudi said:

    Ga salah saya dapat web ini, thank banget Bos!

  4. Salfashion said:

    sangat membantu

  5. Ini yang aku cari, thanks mas bro, langsung praktek :p

  6. dino said:

    gan boleh nnya ga ?? soalnya saya masih belum paham dengan ini gmn yach caranya img src ngebaca di local disk komputer kita ???

    • Masim man said:

      Misal klo nama gambarnya sunrise.jpg dan berada di dalam folder Wallpapers di drive D, maka kita bisa membuat local link seperti berikut: <img src="file:///D:/Wallpapers/sunrise.jpg" />

      • nandar said:

        Mas kalo nampilin image dari server lain tetapi dari jaringan lokal, misal

        keterangan :
        local1 : nama komputer
        foto : nama folder foto

        Gambarnya tetep gk muncul mas ….

      • Masim man said:

        Maksudnya mau nampilin gambar dari komputer lain yang ada jaringan networknya?

        Jika ya, pertama gambarnya harus berada di dalam folder yang di sharing, misal bila nama gambarnya "image.jpg" dan berada di drive D didalam folder "foto" yang sudah di sharing, sedangkan nama komputernya adalah "local1" maka link untuk menampilkan gambarnya bisa seperti berikut:

        <img src="file://///local1/foto/image.jpg" />

  7. syam said:

    man tab

  8. XAMthone said:

    wah ternyata mudah juga yah,.. Terima kasih atas posnya sangat membantu sayah.

  9. hary said:

    keren bank aslinya

  10. Membantu sekali gan infonya kebetulan lagi buat sidebar dan gambar kepengen di tengah

  11. yani said:

    Saya akan coba praktekan.makasih atas artikelnya.

  12. nanang said:

    mantap gan mendetil jadi mudah di pahami

  13. ismail said:

    Terima kasih gan, postingannya membantu banget.

  14. ngebantu saya yg lagi ngerjain tugas. thnks gan !

  15. Ramadhan said:

    manfaat banget buat pemula seperti saya. sukses gan

  16. Haji Taufiq said:

    trimkash gan infonya sangat bermanfaat sekali

  17. Khazzanah said:

    kalau gambar bergerak apakah bisa juga ya menggunakn CSS ini ?

  18. mantap om kode nya lengkap, tanya dong, klo kode gambar buat blog agar gambarnya besa mengikuti besar layar / mobile friendly gimana ya?

    • Masim man said:

      Cari aja template yang responsive…

      klo CSS untuk gambarnya saja bisa menggunakan kode seperti berikut:

      img{max-width:100%;height:auto;display:block;}

  19. panji said:

    ada ga kode, kalau gambar yg jadi src nya ga ada, tapi diganti gambar default gitu?

  20. andi said:

    gan supaya gambar dan texs tidak brantakan saat di buka di hp gimana ya, website saya semua gambar nya ada 3 susun kiri tengah dan kanan dengan masing ” judul yang berbeda tapi saat di buka di hp brantakan kecuali hp nya di miringin

    • Masim man said:

      Gambar dan teksnya harus berada di dalam satu blok elemen seperti DIV kemudian gunakan CSS untuk memposisikannya, atau bila menggunakan HTML5 bisa dicoba menggunakan tag figcaption untuk teksnya.

  21. zulvan said:

    mantap deh..

Back to top