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 goresan pena saja.
Kali ini aku akan menawarkan tutorial menampilkan gambar pada halaman web.
- Pertama yang harus disiapkan yaitu tentu saja file gambar, sanggup berupa .jpg, .gif, dll. Gambar yang akan aku gunakan kali ini berformat .jpg dengan nama gambar yaitu gambar1.jpg. Supaya lebih semangat dalam berlatihnya aku menggunakan teladan gambar yang bikin tambah fresh dalam coding :D.
- Buatlah satu folder berjulukan image, atau terserah anda.
- Siapkan Text Editor HTML, disini aku menggunakan Notepad++
- Tag HTML yang harus anda mengerti kali ini yaitu 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 menerima ilmu perihal menampilkan gambar dengan HTML, berikutnya kita akan mengatur ukuran gambar yang akan kita tampilkan.
Kita sanggup mengaturnya melalui atribut pada tag <img> yang bernama height dan width.
- Height = Untuk mengatur tinggi gambar
- Width = Untuk mengatur lebar gambar
Berikut source code sesudah dirubah untuk mengatur ukuran gambar :
Dalam hal ini yang sering dipakai satuannya yaitu pixel yang disingkat menjadi px.Berikut priview dari index.html yang telah ditambahkan pengaturan ukurannya.
Akan terlihat gambar yang sebelah kanan yaitu gambar yang belum disetting ukurannya sehingga tampak memenuhi tampilan di browser.Sedangkan gambar yang sebelah kiri yaitu gambar yang sudah disetting ukurannya. Gambar yang kecil yaitu gambar yang telah dirubah ukurannya menjadi height="500px" dan width="400px".
Selamat mencoba !!!
EmoticonEmoticon