cara menampilkan gambar pada HTML
Tag img ( <img> ) merupakan tag single (tanpa penutup) , tag tersebut berfungsi untuk menampilkan gambar di halaman HTML. Tag img memiliki beberapa atribut yaitu src,border,width,height,align,alt.
fungsi atribut src pada tag img yaitu untuk memanggil gambar yang ingin ditampilkan, atribut ini sangat dan harus dipakai dalam menggunakan tag img. Dibawah ini merupakan script penggunaan tag img pada html.
<html>
<head>
<title>SiiCoder.xyz</title>
</head>
<body>
<img src="https://preview.ibb.co/cgR8pJ/1532135503_picsay.jpg">
</body>
</html>
<head>
<title>SiiCoder.xyz</title>
</head>
<body>
<img src="https://preview.ibb.co/cgR8pJ/1532135503_picsay.jpg">
</body>
</html>
Maka hasilnya akan seperti ini
selanjutnya ada atribut border ,atribut ini berfungsi membuat border pada sisi - sisi gambar tersebut dengan warna default hitam. Dibawah ini merupakan contoh cara menggunakan atribut border pada tag img.
<html>
<head>
<title>SiiCoder.xyz</title>
</head>
<body>
<img src="https://preview.ibb.co/cgR8pJ/1532135503_picsay.jpg" border="5">
</body>
</html>
<head>
<title>SiiCoder.xyz</title>
</head>
<body>
<img src="https://preview.ibb.co/cgR8pJ/1532135503_picsay.jpg" border="5">
</body>
</html>
maka hasilnya akan seperti ini.
maka terdapat border berwarna hitam di setiap sisi gambar tersebut.
Selanjutnya atribut width dan height, atribut ini berfungsi untuk mengatur besarnya gambar yg ingin ditampilkan.Width untuk mengatur lebar gambar, dan height untuk mengatur tinggi gambar yang dinyatakan dengan ukuran px (pixel) atau % (persen).Dibawah ini merupakan contoh script penggunaan width dan height.
<html>
<head>
<title>SiiCoder.xyz</title>
</head>
<body>
<img src="https://preview.ibb.co/cgR8pJ/1532135503_picsay.jpg" border="5" height="200px" width="400px">
</body>
</html>
<head>
<title>SiiCoder.xyz</title>
</head>
<body>
<img src="https://preview.ibb.co/cgR8pJ/1532135503_picsay.jpg" border="5" height="200px" width="400px">
</body>
</html>
Maka hasilnya akan seperti ini.
terlihat ukuran gambar diatas berbeda dengan ukuran gambar sebelumnya.
sepanjutnya yaitu atribut align, atribut ini berfungsi untuk mengatur letak gambar yang ingin ditampilkan. Ada beberapa value untuk mengisi atribut align yaitu center,right,left. center membuat gambar berada di bagian tengah, right membuat gambar berada dibagian kanan, left membuat gambar berada dibagian kiri. Dibawah ini contoh script penggunaan atribut align dengan value right.
<html>
<head>
<title>SiiCoder.xyz</title>
</head>
<body>
<img src="https://preview.ibb.co/cgR8pJ/1532135503_picsay.jpg" border="5" height="100px" width="100px" align="right">
</body>
</html>
<head>
<title>SiiCoder.xyz</title>
</head>
<body>
<img src="https://preview.ibb.co/cgR8pJ/1532135503_picsay.jpg" border="5" height="100px" width="100px" align="right">
</body>
</html>
Maka hasilnya akan seperti ini.
terlihat gambar diatas berada dibagian kanan.
selanjutnya ada atribut alt, sebenernya atribut ini SiiCoder juga belum mengetahui pasti apa fungsinya, tapi beberapa kali SiiCoder melakukan percobaan, ternyata fungsinya untuk menampilkan sesuatu tulisan atau nama jika gambar gagal ditampilkan. Dibawa ini merupakan contoh script penggunaannya.
<html>
<head>
<title>SiiCoder.xyz</title>
</head>
<body>
<img src="https://preview.ibb.co/cgR8pJ/503_picsy.jpg" alt="siicoder">
</body>
</html>
<head>
<title>SiiCoder.xyz</title>
</head>
<body>
<img src="https://preview.ibb.co/cgR8pJ/503_picsy.jpg" alt="siicoder">
</body>
</html>
berhubung link diatas SiiCoder sengaja membuatnya salah agar gambar tersebut tidak ditampilkan, maka hasilnya akan seperti ini.
terlihat diatas hanya terdapat tulisan siicoder dan tidak menampilkan gambar karena alamat gambar sengaja SiiCoder salahkan.
Tag img bisa menampilkan file-file gambar yaitu .png , .jpg , .gif , dll
Sertakan sumber apabila ingin menggunakan post ini untuk sesuatu kepentingan kalian
Follow SiiCoder & Share It :) .
Komentar (0)
Post a Comment