HIMANIFO UNIMMA
Menampilkan Gambar di HTML Web Programming
14:00:00, 13 November 2020
MENAMPILKAN GAMBAR DI HTML
Gambar dapat memperindah tampilan dan meningkatkan design website. Cara menampilkan gambar di HTML yaitu menggunakan tag <img>.
Tag <img> memiliki dua atribut yang diperlukan:
1. atribut wajib (src): Menentukan jalur ke gambar
2. atribut optional (alt): Menentukan teks alternatif untuk gambar
Berikut contoh menampilkan gambar:
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan Gambar di HTML</title>
</head>
<body>
<img src="https://himanifo.my.id/assets/example/image.png" alt="Himanifo.my.id"/>
</body>
</html>
UKURAN GAMBAR
Ukuran gambar (lebar dan tinggi) dapat ditentukan dengan menggunakan atribut style dengan properti CSS yaitu width dan height.
Alternative lain, ukuran gambar juga dapat ditentukan dengan menggunakan atribut lebar dan tinggi.
<!DOCTYPE html>
<html>
<head>
<title>Ukuran Gambar di HTML</title>
</head>
<body>
<img src="https://himanifo.my.id/assets/example/image.png" alt="Himanifo.my.id" width="20px" height="20px"/>
<img src="https://himanifo.my.id/assets/example/image.png" alt="Himanifo.my.id" style="width:20px; height:20px;"/>
</body>
</html>
POSISI GAMBAR
Posisi gambar (lebar dan tinggi) dapat ditentukan dengan menggunakan atribut style dengan properti CSS yaitu float.
<!DOCTYPE html>
<html>
<head>
<title>Posisi Gambar di HTML</title>
</head>
<body>
<img src="https://himanifo.my.id/assets/example/image.png" alt="Himanifo.my.id" style="float:right; width:20px; height:20px;"/>
<br>
<img src="https://himanifo.my.id/assets/example/image.png" alt="Himanifo.my.id" style="float:left; width:20px; height:20px;"/>
<br>
</body>
</html>
GAMBAR BACKGROUND
Agar gambar bisa ditampilkan sebagai background, maka kita harus menggunakan atribute style dengan properti CSS yaitu background-image lalu diisi dengan URL dari gambar.
<!DOCTYPE html>
<html>
<head>
<title>Gambar Backround di HTML</title>
</head>
<body style="background-image: url(https://himanifo.my.id/assets/example/image.png);">
<h1>Halaman Background Image</h1>
<p>Halaman ini menggunakan gambar sebagai background</p>
</body>
</html>
FORMAT UMUM GAMBAR
Berikut adalah jenis file gambar yang paling umum, yang didukung di semua browser (Chrome, Edge, Firefox, Safari, Opera):
1. APNG: .apng
2. PNG: .png
3. SVG: .svg
4. ICO: .ico, .cur
5. JPEG: .jpg, .jpeg, .jfif, .pjpeg, .pjp
MUDAH KAN ?? SELANJUTNYA..
Menampilkan Video di HTML Web Programming | HIMANIFO UNIMMA →
Jika ada pertanyaan bisa gabung diskusi dibawah atau kontak langsung
Mail :
ajiwahyu12592@gmail.com
#Himanifo Unimma
#Menampilkan Gambar Di HTML
#Belajar Web Programming
#Himpunan Mahasiswa Jurusan Teknik Informatika