Belajar HTML Dasar 9 - Image html

pada tanggal

 Assalamualaikum ...


Melanjutkan seri belajar pemrograman dasar website, frontend Developer yang ke 9 hari ini adalah kita akan mengenali tag image pada HTML. Dengan penulisan :

<img src=""> Tentunya tag ini berfungsi untuk menampilkan gambar pada website kita, terdapat beberapa cara untuk menampilkan gambar yaitu :

  • Internal Resource, dimana kita memanggil gambar dari file kita sendiri (.jpg .png .webp ...)
  • External Resource, dimana kita memanggil gambar dari situs web lain misalnya : (img src="https://www.google.com/image/srpr/logo11w.png)
untuk yang external resource tidak saya sarankan, dikarenakan kita bisa saja menampilkan gambar yang memiliki hak cipta, ataupun jika kita memanggil gambar dari situs web lain, jika website itu down, maka gambar nya pun akan tidak bisa ditampilkan di website kita.

Atribut yang ada pada tag image :

<img> src, alt, title, width, height.

  1. src : berfungsi sebagai sumber nama file untuk gambar ditampilkan (contoh.jpg)
  2. alt : berfungsi sebagai alternatif nama jika gambar gagal dimuat
  3. title : berfungsi sebagai pemberi judul pada gambar kita
  4. width : berfungsi untuk memberikan nilai lebar pada gambar
  5. height : berfungsi untuk memberikan nilai tinggi pada gambar
  6. nilai pada width dan height : ada px dan ada %, kalo px kita memberikan nilai gambar sesuai pixel, tetapi jika kita memberikan nilai persen (%), maka gambarnya menyesuaikan dengan halaman misal : img src = "contoh.png" width=50%, maka gambar akan menampilkan setengah dari halaman web kita.
Untuk penggunaan width dan height, disarankan gunakan salahsatunya saja, karena yang lain akan mengikuti ukuran nilai secara otomatis, misal : img src = "contoh.png" width = 20px otomatis height nya akan mengikuti nilainya, jadi gak usah ditulis heightnya.

Dan selanjutnya kita akan praktek gambar yang bisa diklik dan menuju ke halaman web tertentu, okeee..langsung saja kalian ikuti seperti dalam video ini 

Seperti biasa sampai disini dulu aja, dan selamat menunggu postingan dari saya selanjutnya, apabila postingan saya ini memiliki manfaat alangkah baiknya kalian share pada temen-temen kalian.

Komentar

Posting Komentar