[2] HMTL - Menambahkan GAMBAR

Menambahkan GAMBAR

 

Dalam HTML tag yang digunakan untuk menambahkan gambar adalah <img>. Tag <img> tidak memiliki penutup. Atribut yang dapat diberikan ke tag <img> adalah :

Src,  Menentukan sumber dan nama gambar

Width, menentukan lebar gambar

Height, menentukan tinggi gambar

Alt, memberikan teks Alternatif jika gambar tidak dapat ditampilkan

Title,  membuat text tampil saat mouse di arahkan ke gambar

Jika ukuran gambar yang disisipkan tidak diatur ukuran tinggi dan lebarnya, maka ukuran gambar yang akan ditampilkan sesuai dengan aslinya. Namun, jika ditentukan lebar dan tinggi gambarnya , ukuran gambar menjadi tidak proporsional.

Format gambar yang didikung oleh tag <img> adalah jpg, png dan gif.

Nama & format gambar harus ditulis lengkap padaatribut src. Ada beberapa kemungkinan penulisan nama dan letak gambar, sebagai berikut :

1. Jika gambar satu folder dengan file HTML maka penulisannya src=”nama_gambar.jpg”

2. Gambar terletak di dalam folder yang sama dengan folder file HTML, maka penulisannya src=”nama_folder/nama_gambar.jpg”

3. Gambar terletak pada folder yang berbeda dengan folder yang berisi file HTML, penulisannya sebagai berikut src=”../nama_folder/nama_gambar.jpg”

Tanda ../ artinya keluar dari folder yang berisi file HTML.

Contoh script dengan nama file gambar.html

<html>

<head>

<title>Menambahkan gambar</title>

</head>

<body>

<img src="gambar/gambarku.jpg" width="150" height="200">

<img src="gambar/gambarku1.jpg" width="200" height="200">

<img src="gambar/gambarku2.jpg" width="200" height="200">

<img src="gambar/gambarku3.jpg" width="200" height="200">

<!-- mengambil gambar pada folder gambar/nama file gambar-->

</body>

</html>

 

Pada browser akan tampil sebagai berikut : 

 


 _SELAMAT MENCOBA👌👌👍😇_ 

Semoga bermanfaat buat sobat yang baru tau👊👊👋😉

 

 

Post a Comment

0 Comments

Comments