Cara Menambahkan Gambar Pada HTML

hi guys, bagaimaka kabarnya nih? semoga baik baik saja ya, so kali ini mimin akan membahas mengenai cara menambahkan gambar pada HTML. Untuk menambahkan gambar digunakan tag khusus yaitu <img>. Tag ini tidak memilik penutup, di dalam tag ini memiliki beberapa atribut yang dapat kalian gunakan yaituCara Menambahkan Gambar Pada HTMLhi guys, bagaimaka kabarnya nih? semoga baik baik saja ya, so kali ini mimin akan membahas mengenai cara menambahkan gambar pada HTML. Untuk menambahkan gambar digunakan tag khusus yaitu <img>. Tag ini tidak memilik penutup, di dalam tag ini memiliki beberapa atribut yang dapat kalian gunakan yaitu

src, untuk menentukan sumber dari gambar.
width, untuk menentukan lebar gambar.
height, untuk menentukan tinggi gambar.
alt, untuk memberikan text alternatif yang akan ditampilkan jika gambar tidak tampil.
title, untuk memunculkan text ketika crussor diarahkan kegambar.

format gambar yang didukung dengan tag <img> ini yaitu .jpg, .png dan .gif. nama dan format harus dituliskan dengan lengkap pada atribut src. untuk lebih jelasnya cara memasukkan gambar pada tag <img> menggunakan atribut src seperti berikut.

jika gambar dan dokumnet HTML atau PHP maka penulisannya yaitu <img src=’nama_gambar.jpg’>
jika gambar terletak pada folder tertentu maka penulisannya menjadi <img src=’path_folder/nama_gambar.jpg’>

contoh, kita akan memasukkan gambar berikut kedalam sebuah code HTML

kita akan mencoba memasukkan gambar yang bernama rc kedalam index.php. Gambar tersebut berekstensi .png, maka code yang akan kita gunakan seperti berikut

<img src=’rc.png’>

code lengkapnya :

<!DOCTYPE html>
<head>
    <title>Document</title>
</head>
<body>
    <h1>Cara Memasukkan Gambar</h1>
    <img src="rc.png">
</body>
</html>

ternyata gambarnya terlalu besar, kita dapat mengatur ukurannya dengan menggunakan atribut width dan height, misal kita ingin menggunakan atribut yang telah kita bahas.

<!DOCTYPE html>
<head>
    <title>Document</title>
</head>
<body>
    <h1>Cara Memasukkan Gambar</h1>
    <img src="rc.png" width="500px" title="menggunakan px">
    <img src="rc.png" width="10%" title="menggunaan %">
    <hr>
    <img src="rc.png" height="100px">
    <hr>
    <img src="img.png" width="10%" alt="gambar di sini">
    <img src="img.png" width="10%">
    
</body>
</html>

pada code tersebut memiliki nilai yang berbeda, ada yang menggunakan px dan %. Kedua satuan ini tentulah berbeda.

jika klaian menggunakan px, yang berarti menggunakan satuan pixel, ukurannya akan menyesuaikan dengan banyaknya pixel. Dan jika klaian menggunakan % maka ukurannya akan menyesuaikan dengan lebarnya jendela dengan berapa persen ukuran dari jendela tersebut. Ketika menjalankan code di atas coba kalian perbesar kemudian perkeceil jendela browser kalian.

Terlehit juga perbedaan jika kita menggunakan ALT dan tidak, jika menggunakan alt, ketika gambar tidak tampil maka isi alt yang akan ditampilkan.

pertanyaan berikutnya, bagaimana jika kita ingin memasukkan file gambar yang berada disebuah folder?

semisal kita memasukkan gambar tersebut kedalam sebuah folder img

maka tag yang digunakan <img src=”folder_gambar/file_gambar.ekstensi”>

<!DOCTYPE html>
<head>
    <title>Document</title>
</head>
<body>
    <h1>Cara Memasukkan Gambar</h1>
    <img src="img/rc.png" width="50%" alt="gambar RC" title="Belajar Html dan PHP">
    
</body>
</html>

jika semisal file berada di sebuah folder yang berbeda. Kita memasukkan file index.php pada sebuah folder yang namnya home.

dan kita ingin memasukkan gambar yang ada pada folder img.

ada dua cara yaitu dengan kembali atau naik ke path lvl teratas dengan menggunakan ../ atau dengan menuliskan link awalnya atau yang biasa dikenal dengan base_url.

<!DOCTYPE html>
<head>
    <title>Document</title>
</head>
<body>
    <h1>Cara Memasukkan Gambar</h1>
    <img src="../img/rc.png" width="40%" alt="gambar RC" title="Belajar Html dan PHP">
    <img src="https://localhost/gambar/img/rc.png" width="40%" alt="gambar RC" title="Belajar Html dan PHP">
    
</body>
</html>

hasil