HIMANIFO UNIMMA
 Menampilkan Gambar di HTML Web Programming 

14:00:00, 13 November 2020

Web Programming

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>

Try Here >>

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>

Try Here >>

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>

Try Here >>

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>

Try Here >>

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

Gabung Diskusi