Kali ini saya akan memberikan tutorial menampilkan gambar pada halaman web.
- 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.
- Buatlah satu folder bernama image, atau terserah anda.
- Siapkan Text Editor HTML, disini saya memakai Notepad++
- 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 !!!
terima kasih ilmunya gan :D
ReplyDeletetanks juga gan uda mampir,
DeleteMAKASIH ATAS ILMUNYA,,, MEMBANTU BGT NIH....
ReplyDeletetrims
ReplyDeletekenapa ga muncul yah ? saya simpen file gambarnya di D
ReplyDeletesangat membantu gan.. makasih
ReplyDeleteTerima kasih gan
ReplyDeleteGan kok gambarnya broken ya
ReplyDeletejadi 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.
ReplyDeleteKunjungi website saya ya https://lusianaselviani.mahasiswa .atmaluhur.ac.id
Dan website kampus saya http://www.atmaluhur.ac.id
makasi ya atas informasinya yang sangat membantu
ReplyDeletescript html nya jalan lancar, makasih ya kakak
ReplyDeletekalau untuk kode html dofollow bagaimana ya?
ReplyDeletebagaimana 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