Tutorial Belajar Images di HTML

Kita dapat menampilkan gambar pada HTML dengan elemen <img>. Elemen ini tidak memiliki konten, hanya menggunakan atribut saja dan tidak memilik tag penutup.

<img src="gambar.jpg" />

Atribut src digunakan untuk menentukan alamat gambar yang hendak ditampilkan.

Kita juga dapat mengatur ukuran gambar menggunakan atribut width untuk panjang gambar dan height untuk tinggi gambar.

<img src="gambar.jpg" width="100px" height="100px" />

PRAKTEK

Jalankan kode pada editor dan lihat gambar apa yang muncul?
Ganti alamat gambar pada elemen <img> dengan i.imgur.com/40jvWac.jpg. Gambar apa yang muncul?
Pastikan kamu menambahkan http://sebelum alamat gambarnya, sehingga menjadi http://i.imgur.com/40jvWac.jpg
Gambar kedua yang Kamu pasang terlalu besar ya. Untuk itu tambahkan atribut width dengan nilai 200px dan height dengan nilai 200px. Jalankan kembali kode dan lihat hasilnya.
Apakah ukuran gambarnya sudah berubah menjadi lebih kecil? Tapi apakah ukurannya proporsional? Bila tidak, itu karena Kamu mengeset atribut width dan heightbersamaan, sehingga ukuran gambar dipaksa menjadi lebar dan tinggi sekian. Coba hapus salahsatu atribut width atau height (gunakan salahsatunya saja) dan jalankan kembali kodenya.

<!DOCTYPE html>

<html>

<head>

<title>Belajar HTML</title>

</head>

<body>

</body>

</html>

Hasilnya:

Tutorial Belajar Images di HTML

PRAKTEK

0 Response to "Tutorial Belajar Images di HTML"

Posting Komentar