Assalamu alikum Wr Wb.
Dalam pertemuan kali ini, saya akan memaparkan mengenai Gambar Pada HTML.
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>HTML Gambar</h2>
<img src="html5.png" alt="Gambar View" style="width: 304px;height: 228px;">
</body>
</html>
Hasil:
Gambar HTML Sintaks
Dalam HTML, gambar didefinisikan dengan <img> tag.
<img> tag kosong, berisiatribut saja, dan tidak memiliki tag penutup. Atribut src menentukan URL (alamat web) dari gambar.
<img src="url" alt="some_text" style="width:width;height:height;">
Alt Atribut
Atribut alt menyediakan teks alternatif untuk gambar, jika pengguna untuk beberapan alasan tidak bisa melihatnya (karena koneksi yang lambat, kesalahan dalam atribut src, atau jika pengguna menggunakan pembaca layar).
Jika browser tidak dapat menemukan gambar, itu akan menampilkan nilai dari atribut alt.
Contoh
<!DOCTYPE html>
<html>
<body>
<p>Jika sebuah browser tidak bisa menemukan sebuah gambar, itu akan ditampilkan teks alternatif:</p>
<img src="namatidakditemukan.gif" alt="HTML 5" style="width: 128px;height: 128px;">
</body>
</html>
Hasil:
Atribut alt diperlukan. Sebuah halaman web tidak akan memvalidasi dengan benar tanpa itu.
Pembaca Layar HTML
Seorang pembaca layar adalah program software yang membaca kode HTML, mengkonversi teks, dan memungkinkan pengguna untuk "mendengarkan" untuk konten. Pembaca layar yang berguna untuk orang-orang yang buta, tunanetra, atau pelajar cacat.
Ukuran Gambar - Lebar dan Tinggi
Anda dapat menggunakan gaya atribut untuk menentukan lebar dan tinggi dari suatu gambar.
Nilai-nilai yang ditentukan dalam pixel (menggunakan px setelah nilai).
Contoh
<!DOCTYPE html>
<html>
<body>
<img src="html5.gif" alt="HTML 5" style="width: 128px;height: 128px;">
</body>
</html>
Hasil:
Atau, Anda dapat menggunakan lebar dan tinggi atribut. Di sini, nilai-nilai yang ditentukan dalam pixel secara default.
Contoh
<!DOCTYPE html>
<html>
<body>
<img src="html5.gif" alt="HTML 5" width="128" height="128">
</body>
</html>
Hasil:
Catatan: Selalu menentukan lebar dan tinggi dari suatu gambar. Jika lebar dan tinggi yang tidak ditentukan, halaman akan berkedip sementara beban gambar.
Lebar dan Tinggi, atau Style?
Kedua lebar, tinggi, dan atribut gaya yang berlaku di HTML5. Namun, kami sarankan menggunakan atribut style. Ini mencegah gaya internal atau eksternal lembar dari mengubah ukuran asli gambar.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
img{
width: 100%;
}
</style>
</head>
<body>
<p>Itu adalah digunakan untuk yang berbeda dengan atribut style untuk set tinggi dan lebar dari sebuah gambar.</p>
<p>Menggunakan atribut style</p>
<img src="html5.gif" alt="HTML 5" style="width: 128px;height: 128px;">
<p>Menggunakan Atribut Lebar dan Tinggi:</p>
<img src="html5.gif" alt="HTML 5" width="128" height="128">
</body>
</html>
Hasil:
Gambar di Folder Lain
Jika tidak ditentukan, browser mengharapkan untuk menemukan gambar dalam folder yang sama sebagai halaman web. Namun, itu adalah umum untuk menyimpan gambar dalam sub-folder. Anda kemudian harus menyertakan nama folder dalam atribut src.
Contoh
<!DOCTYPE html>
<html>
<body>
<img src="file:///media/allif/Data%20Sekolah%20dan%20PKL/Data%20PKL/BLC%20Telkom%20Klaten/Pemrograman/Tutorial%20HTML/HTML%20Gambar/html5.gif" alt="HTML 5" style="width: 128px;height: 128px;">
</body>
</html>
Hasil:
Gambar di Server Lain
Beberapa situs web menyimpan gambar mereka di server gambar. Sebenarnya, Anda dapat mengakses gambar dari alamat web di dunia.
Contoh
<!DOCTYPE html>
<html>
<body>
<img src="file:///media/allif/Data%20Sekolah%20dan%20PKL/Data%20PKL/BLC%20Telkom%20Klaten/Pemrograman/Tutorial%20HTML/HTML%20Gambar/html5.png" alt="Tutorial HTML5" style="width: 104px;height: 142px;">
</body>
</html>
Hasil:
Gambar Animasi
Standar GIF memungkinkan gambar animasi.
Contoh
<!DOCTYPE html>
<html>
<body>
<p>Gambar Animasi GIF</p>
<img src="html5.gif" alt="HTML5" style="width: 48px;height: 48px;">
</body>
</html>
Hasil:
Perhatikan bahwa sintaks memasukkan gambar animasi tidak berbeda dari gambar non-animasi.
Menggunakan Gambar sebagai Sebuah Link
Untuk menggunakan gambar sebagai link, hanya sarang <img> tag di dalam tag <a>.
Contoh
<!DOCTYPE html>
<html>
<body>
<p>Gambar Link. Kamu bisa klik disini.</p>
<a href="1.html">
<img src="html5.gif" alt="HTML 5" style="width: 42px;height: 42px;">
</a>
</body>
</html>
Hasil:
Setelah Gambar di klik .
Catatan : border 0; ditambahkan untuk mencegah IE9 (dan sebelumnya) dari menampilkan perbatasan di sekitar gambar (ketika gambar adalah link).
Gambar Mengambang
Gunakan CSS mengapung properti untuk membiarkan gambar float ke kanan atau ke kiri teks.
Contoh
<!DOCTYPE html>
<html>
<body>
<p><strong>Gambar Mengapung ke kanan:</strong></p>
<p>
<img src="html5.gif" alt="HTML 5" style="float:right;width:42px;height:42px;">
Sebuah paragraf dengan gambar mengambang. Sebuah paragraf dengan gambar mengambang. Sebuah paragraf dengan gambar mengambang.
</p>
<p><strong>Float the image to the left:</strong></p>
<p>
<img src="html5.gif" alt="HTML 5" style="float:left;width:42px;height:42px;">
Sebuah paragraf dengan gambar mengambang. Sebuah paragraf dengan gambar mengambang. Sebuah paragraf dengan gambar mengambang.
</p>
<p>Silahkan menggunakan properti CSS float. Atribut align sudah ditinggalkan di HTML 4, dan tidak didukung di HTML5.</p>
</body>
</html>
Hasil:
Gambar Maps
Gunakan <map> tag untuk mendefinisikan gambar-map. Gambar-map adalah gambar dengan area yang dapat diklik. Atribut nama <map> tag dikaitkan dengan <img> atributnya usemap dan menciptakan hubungan antara gambar dan map. Tag <map> tag berisi sejumlah <area> tag, yang mendefinisikan daerah yang dapat diklik pada gambar-peta.
Contoh
<!DOCTYPE html>
<html>
<body>
<p>klik di bawah sinar matahari atau di salah satu planet untuk menonton lebih dekat:</p>
<img src="html5.gif" alt="HTML5" usemap="#html5map" style="width:145px;height:126px;">
<map name="html5map">
<area shape="rect" coords="0,0,82,126" alt="1" href="1.html">
<area shape="circle" coords="90,58,3" alt="2" href="2.html">
<area shape="circle" coords="124,58,8" alt="3" href="3.html">
</map>
</body>
</html>
Hasil:
KESIMPULAN
- Tag HTML <img> digunakan untuk menentukan gambar.
- Tag HTML src digunakan untuk menentukan URL Gambar
- Tag HTML alt digunakan untuk mendefinisikan teks alternatif untuk gambar, jika gambar tidak dapat ditampilkan.
- Tag HTML width dan height digunakan untuk menentukan ukuran gambar.
- Tag CSS width dan height digunakan untuk menentukan ukuran gambar (alternatif).
- Tag CSS float digunakan untuk membiarkan gambar mengapung.
- Tag HTML <map> digunakan untuk menentukan gambar-peta.
- Tag HTML <area> digunakan untuk menentukan daerah-daerah yang dapat diklik pada gambar-peta.
- Tag HTML <img> yang menggunakan usemap digunakan untuk menunjuk ke gambar-peta.
Catatan: Memuat gambar membutuhkan waktu. Gambar besar dapat memperlambat halaman Anda. Gunakan gambar dengan hati-hati.
REFERENSI
No comments:
Post a Comment