Menampilkan Gambar di HTML

Posted by Unknown on Sunday, November 18, 2012

Gambar merupakan elemen yang sangat penting dalam halaman web. Tanpa gambar kita mungkin akan kembali pada jaman web 1.0 dimana halaman web hanya berupa text atau tulisan saja.
Kali ini saya akan memberikan tutorial menampilkan gambar pada halaman web.

  1. Pertama yang harus disiapkan adalah tentu saja file gambar, bisa berupa .jpg, .gif, dll. Gambar yang akan saya gunakan kali ini berformat .jpg dengan nama gambar yaitu gambar1.jpg. Supaya lebih semangat dalam berlatihnya saya menggunakan contoh gambar yang bikin tambah fresh dalam coding :D. 
  2. Buatlah satu folder bernama image, atau terserah anda.
  3. Siapkan Text Editor HTML, disini saya memakai Notepad++
  4. Tag HTML yang harus anda mengerti kali ini adalah tag <img>
Source Code :


Kemudian silahkan simpan dengan nama index.html kedalam folder image

Keterangan :
  • <img src="gambar1.jpg" = Pemanggilan gambar. Jika file index.html disimpan di luar folder images, maka pemanggilannya menjadi <image src="images/gambar1.jpg"
  • align="left"> = posisi gambar
Berikut untuk priviewnya dengan menggunakan browser Mozilla Firefox:






















Jika kita sudah mendapat ilmu tentang menampilkan gambar dengan HTML, berikutnya kita akan mengatur ukuran gambar yang akan kita tampilkan.
Kita bisa mengaturnya melalui atribut pada tag <img> yang bernama height dan width.

  • Height = Untuk mengatur tinggi gambar
  • Width = Untuk mengatur lebar gambar
Berikut source code setelah dirubah untuk mengatur ukuran gambar :



Dalam hal ini yang sering digunakan satuannya adalah pixel yang disingkat menjadi px.
Berikut priview dari index.html yang telah ditambahkan pengaturan ukurannya. 





















Akan terlihat gambar yang sebelah kanan adalah gambar yang belum disetting ukurannya sehingga tampak memenuhi tampilan di browser.Sedangkan gambar yang sebelah kiri adalah gambar yang sudah disetting ukurannya. Gambar yang kecil adalah gambar yang telah dirubah ukurannya menjadi height="500px" dan width="400px".

Selamat mencoba !!!









   

13 comments:

  1. MAKASIH ATAS ILMUNYA,,, MEMBANTU BGT NIH....

    ReplyDelete
  2. kenapa ga muncul yah ? saya simpen file gambarnya di D

    ReplyDelete
  3. jadi ka untuk mengatur ukuran gambarnya harus pake pixel ya ka, kenapa engga pake %(persen) ka? mohon penjelasannya ka saya baru pemula ka buat web. oiya thanks kaka udah share ilmunya.



    Kunjungi website saya ya https://lusianaselviani.mahasiswa .atmaluhur.ac.id
    Dan website kampus saya http://www.atmaluhur.ac.id

    ReplyDelete
  4. makasi ya atas informasinya yang sangat membantu

    ReplyDelete
  5. script html nya jalan lancar, makasih ya kakak

    ReplyDelete
  6. kalau untuk kode html dofollow bagaimana ya?

    ReplyDelete
  7. bagaimana kalau gambar di taruh di drive d folder foto..? sudah saya tulis <img src="d:/foto/gambar1.jpg" tetapi gambar tidak mau muncul.. mohon pencerahan

    ReplyDelete