Menampilkan gambar di php dari folder

Hallo coders, kali ini kita akan belajar menampilkan gambar di Html. Setelah kemarin kita belajar tentang tag a atau link . Disini kita akan belajar cara menampilkan gambar ke halaman html kita dan mengatur lebar dan tinggi dari sebuah gambar. Pasti temen temen sudah tau ya, implementasinya karena di sebuah website pasti ada sebuah gambar apalagi ecommerce atau toko online seperti https://shopee.co.id/. Website tanpa gambar bisa dibilang sangat hambar ya wkwkwk, maka dari itu gambar ini sangat penting ya gaess.

Daftar Isi

• Menampilkan gambar di Html
• Atribut alt untuk tag img Html
• Atribut width dan height tag Html
• Format File Yang di Support di html
• Mengkombinasikan tag a dan tag img

Menampilkan gambar di Html

Html menyediakan tag khusus untuk menampilkan gambar. Tag tersebut adalah

Atribut ini berfungsi untuk menghubungkan file dengan gambar. Ada dua cara untuk memanggil gambar di atribut src ini temen temen, yang pertama jika gambar berada di satu file dengan folder html kita kita tinggal memanggil nama folder dan nama gambarnya. Yang kedua kita bisa memanggil berdasarkan link atau bisa dibilang gambar ini berasal dari website lain. Dibawah ini adalah contoh kode jika menggunakan url.

Maka hasilnya akan muncul gambar roket dibrowser kalian menarik bukan. Selanjutnya kita akan mencoba mendownload gambar jadi silahkan temen temen download gambar apapun bisa roket ini kemudian simpan kedalam folder seperti ini.

Selanjutnya temen temen bisa koding seperti dibawah ini.

Jika berhasil hasilnya akan tidak jauh berbeda dari yang diatas.

Atribut alt untuk tag img Html

Nah setelah tadi kita mempelajari atribut img, atibut khusus lainnya untuk tag img adalah tag “alt=”. Atribut ini adalah atribut untuk memberika text alternatif jika gambar yang kita panggil tadi itu itdak ada sehinggal tidak tampil. Jika tidak tampil maka akan menjadi seperti ini.

Dengan text alternatif kita bisa lakukan seperti ini

Disini saya sengaja membuat salah dalam pemanggilan agar gambar tidak terbaca dan kemudian akan kita berikan tag alt sebagai contohnya.

Atribut width dan height tag Html

Di tag img kita bisa mengaut ukuran gambar tanpa menggunakan css yaitu dengan menggunakan atribut width dan height. Width untuk mengatur lebar dan height untuk mengatur tinggi dari sebuah gambar.

Menarik bukan, tetapi kita tidak harus menggunakan semuanya. untuk ukurannya kita bisa menggunakan px % dan lainnya seperti css tetapi defaultnya pixel gaess jadi jika kita hanya menulis 300 maka akan terhitung pixel. Hasilnya seperti dibawah ini.

Format File Yang di Support di html

Seperti yang saya bilang diatas tidak semua format file gambar disuport oleh html. itu dikarenakan setiap file gambar memiliki tujuannya masing masing.

Lalu format file gambar apa saja yang disupport html. Berikut ini adalah daftar beberapa format gambar yang disupport dan sering digunaakan dalam pembuatan sebuah website.

1. APNG, format file = Animated Portable Network Graphics, file extension .apng
2. GIF, format file = Graphics Interchange Format, file extension .gif
3. ICO, format file = Microsoft Icon, file extension .ico, .cur
4. JPEG, format file = Joint Photographic Expert Group image, file extension .jpg, .jpeg, .jfif, .pjpeg, .pjp
5. PNG, format file= Portable Network Graphics, file extension .png
6. SVG, format file= Scalable Vector Graphics, file extension .svg

Mengkombinasikan tag a dan tag img

Seperti yang kita pelajari sebelumnya tag link dapat digunakan untuk mengganti ke halaman baru. nah disini kita bisa mengkombinasikan kedua tag ini. idenya ketika user mengeklik gambar maka akan pindah ke halaman tertentu. Contohya adalah seperti dibawah ini.

Jadi tag img yang kita buat kita bungkus dengan tag a sehingga jika gambar kita klik akan menuju halaman tertentu.

Nah keren banget ya gaess. Mungkin sampai sini dulu pembelajaran kita pada kesempatan kali ini. JIka temen temen ada pertanyaan temen temen bisa ketikan di kolom komentar insyallah mimin balas secepatnya hehe.