Image di HTML dan Picture Elemen

Image di HTML dan Picture Elemen


Image di HTML

Image di HTML adalah tag <img> yang digunakan untuk menambahkan gambar ke dalam halaman web. Tag ini berfungsi untuk membuat halaman web lebih menarik dan interaktif. 

Tag <img> mempunyai atribut utama yaitu src, alt, width dan height. src untuk menentukan lokasi gambar, alt untuk menentukan teks alternatif jika gambar tidak dapat dimuat, width dan height untuk mengatur ukuran gambar.

Contoh penggunaan : 

  • Jika gambar berada dalam direktori yang sama dengan file HTML, cukup masukkan nama file dan ekstensi.
  • Jika gambar berada dalam subfolder, tambahkan path folder tersebut.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image HTML || Muhammad Fahmi 'Ainunnajib</title>
</head>

<body>
    <!-- Image di Luar Folder -->
    <img src="gambardiluar.jpeg" alt="gambardiluar">
    <br>
    <!-- Image di Dalam Folder -->
    <img src="img/pemandangan.jpg" alt="pemandangan" width="25%">
</body>

</html>


Hasil code : 




Picture Elemen

Elemen HTML <picture> memberi pengembang web lebih banyak fleksibilitas dalam menentukan sumber daya gambar.

Elemen <picture> berisi satu atau beberapa elemen <source>, yang masing-masing merujuk ke gambar yang berbeda melalui atribut srcset. Dengan cara ini, browser dapat memilih gambar yang paling sesuai dengan tampilan dan/atau perangkat saat ini.

Setiap elemen <source> memiliki atribut media yang menentukan kapan gambar tersebut paling sesuai digunakan.


Contoh pengunaan: 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Picture Element || Muhammad Fahmi 'Ainunnajib</title>
</head>

<body>
    <picture>
        <source media="(min-width: 800px)" srcset="img/kopi.jpg">
        <source media="(min-width: 400px)" srcset="img/hp.jpg">
        <img src="img/komputer.jpg" alt="komputer">
    </picture>
</body>

</html>

Hasil jika width diatas 800px : 


Hasil jika width diatas 400px : 


Hasil jika width dibawah 400px : 

Tag <img> sebagai fallback jika kondisi media lainnya tidak terpenuhi.




Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Simulasi Jaringan Komputer 2 Mikrotik, dengan VM

Gambar
Membuat Simulasi Jaringan Komputer 2 Mikrotik, dengan VM Membuat Simulasi Jaringan Komputer 2 Mikrotik, dengan VM 1. Membuat 2 mikrotik 2. Setting network di mikrotik 1 3. Setting network di mikrotik 2 4. Jalankan mikrotik 1 lalu ubah nama mikrotiknya  5. Setting interface-nya 6. Tambah IP address lalu ping default getway 7. Setting IP route lalu ping 8.8.8.8 8. Setting IP dns lalu ping website/domain 9. Tambah ip address untuk ethernet 2   10. Pindah ke mikrotik 2 lalu ubah nama mikrotik 2 11. Setting interface   12. Setting IP address lalu ping default getway  13. Setting IP route, dan IP dns lalu coba ping ke 8.8.8.8 dan masih gagal karena di mikrotik 1 belum di setting IP firewall nat 14. Setting IP firewall nat di mikrotik 1 15. Lalu kembali ke mikrotik 2 lalu ping ke 8.8.8.8 dan ke domain atau web 
Baca selengkapnya

Konfigurasi 3 Mikrotik

Gambar
Konfigurasi 3 Mikrotik 1. Siapkan Mikrotik 2. Ubah Settingan network di 3 Mikrotik 3. Setting di mikrotik 1, yaitu dari sytem identity, lalu interface, ip address, ip route dan ip dns, dan juga ping di default gateway, ping ke 8.8.8.8 lalu ke detik.com 4. Setting IP address di mikrotik1 untuk ke mikrotik lainnya dan juga setting ip firewall nat 5. Setting di mikrotik 2, yaitu dari sytem identity, lalu interface, ip address, ip route dan ip dns, dan juga ping di default gateway, ping ke 8.8.8.8 lalu ke google.com 6. Setting di mikrotik 3, yaitu dari sytem identity, lalu interface, ip address, ip route dan ip dns, dan juga ping di default gateway, ping ke 8.8.8.8 lalu ke google.com catatan : Mohon maaf tidak sesuai dengan topologi, karena jika saya menggunakan ip 192.168.10.1/30 dan 192.168.10.6/30 di mikrotik 2 dan 3 nya timeout, jadi saya ubah ke ip 192.168.43.1/30 dan 192.168.43.6/30
Baca selengkapnya

Form HTML

Gambar
 Form HTML Form merupakan bagian pada HTML yang dapat digunakan untuk membuat elemen Form atau formulir pada halaman Web. Jenis-Jenis atau Type Input pada Form  <input type="text"> : yang berfungsi untuk input teks bari tunggal <input type="submit">  : yang berfungsi sebagai tombol <input type="email">  : yang berfungsi sebagai tempat input email <input type="color">  : yang berfungsi sebagai tempat input color atau warna <input type="datetime">  : yang berfungsi sebagai tempat input tanggal dan waktu/jam <input type="time">  : yang berfungsi sebagai tempat input waktu atau jam <input type="file">  : yang berfungsi sebagai tempat input / upload file <input type="email">  : yang berfungsi sebagai tempat input email <input type="hidden">  : yang berfungsi sebagai tempat input yang tidak terlihat oleh user <input type="number">  : ...
Baca selengkapnya