HTML - Gambar
Gambar sangat penting untuk mempercantik sekaligus untuk menggambarkan banyak konsep kompleks dengan cara yang sederhana di halaman web Anda. Tutorial ini akan memandu Anda melalui langkah-langkah sederhana untuk menggunakan gambar di halaman web Anda.
Sisipkan Gambar
Anda dapat memasukkan gambar apa pun di halaman web Anda dengan menggunakan <img>menandai. Berikut ini adalah sintaks sederhana untuk menggunakan tag ini.
<img src = "Image URL" ... attributes-list/>Tag <img> adalah tag kosong yang artinya hanya dapat berisi daftar atribut dan tidak memiliki tag penutup.
Contoh
Untuk mencoba contoh berikut, mari simpan file HTML test.htm dan file gambar test.png di direktori yang sama -
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Anda dapat menggunakan file gambar PNG, JPEG atau GIF berdasarkan kenyamanan Anda, tetapi pastikan Anda menentukan nama file gambar yang benar di srcatribut. Nama gambar selalu peka huruf besar / kecil.
Itu alt Atribut adalah atribut wajib yang menentukan teks alternatif untuk gambar, jika gambar tidak dapat ditampilkan.
Atur Lokasi Gambar
Biasanya kami menyimpan semua gambar di direktori terpisah. Jadi mari kita simpan file HTML test.htm di direktori home kita dan buat subdirektoriimages di dalam direktori home tempat kita akan menyimpan image test.png kita.
Contoh
Dengan asumsi lokasi gambar kita adalah "image / test.png", coba contoh berikut -
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Atur Lebar / Tinggi Gambar
Anda dapat mengatur lebar dan tinggi gambar berdasarkan kebutuhan Anda menggunakan width dan heightatribut. Anda dapat menentukan lebar dan tinggi gambar dalam piksel atau persentase dari ukuran sebenarnya.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Atur Perbatasan Gambar
Secara default, gambar akan memiliki border di sekitarnya, Anda dapat menentukan ketebalan border dalam bentuk piksel menggunakan atribut border. Ketebalan 0 berarti, tidak ada batas di sekeliling gambar.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Atur Image Alignment
Secara default, gambar akan sejajar di sisi kiri halaman, tetapi Anda dapat menggunakan align atribut untuk mengaturnya di tengah atau kanan.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Grafik Web Gratis
Untuk Grafik Web Gratis termasuk pola, Anda dapat melihat Grafik Web Gratis