Dari kursus: Pelatihan Esensial HTML

Gambar - Tutorial HTML

Dari kursus: Pelatihan Esensial HTML

Mulai uji coba gratis 1 bulan Beli untuk tim saya

Gambar

“

- Gambar, dapatkah Anda membayangkan web tanpa gambar? Gambar ada di mana-mana. Web adalah web teks dan gambar. Untuk menempatkan gambar di halaman web, kita menggunakan elemen image. Ini ditulis sebagai IMG. Dan kemudian ada empat atribut yang ingin kita sertakan pada setiap elemen gambar. Atribut sumber, disingkat menjadi SRC. Atribut alt, ALT. Dan atribut lebar dan tinggi. Setiap gambar harus memiliki keempatnya. Atribut source adalah apa yang memberi tahu browser file gambar mana yang akan dimuat. Jadi izinkan saya menempelkan URL ke gambar kita ke sumbernya. Dan Anda bisa lihat, gambarnya sedang dimuat. URL ini kebetulan merupakan URL absolut ke CDN di CodePen yang menyimpan gambarnya untuk demo ini. Tampaknya kita sudah selesai dan hanya itu yang kita butuhkan, tetapi kita belum selesai. Kami juga membutuhkan atribut ALT. Ini bertindak sebagai pengganti gambar setiap kali gambar tidak dapat dilihat. Orang yang buta, misalnya, dapat menggunakan pembaca layar yang membacakan teks ALT dengan keras kepada mereka. Inilah yang mereka alami dari gambar ini, jadi mari kita buat itu menarik. Anjing hitam mengkilap tampak termenung. Kita tidak perlu mengatakan foto A. Itu terlalu bertele-tele. Dapat dipahami bahwa ini adalah gambar atau foto. Kami tidak ingin menggunakan lusinan kata untuk menulis segala sesuatu tentang foto ini, kami ingin menulis tentang apa yang paling penting. Mengapa kami menempatkan gambar ini di situs? Apa yang penting tentang itu? Teks kita bisa lucu atau puitis. Tidak harus kering. Jika tidak ada yang perlu diketahui orang tentang gambar tersebut, maka kita dapat membiarkan teks alt kosong. Berikut adalah contoh kapan hal itu mungkin terjadi. Di header ini, nama perusahaan dibungkus dengan h1 dan logo perusahaan adalah gambar. Jadi lihat teks alt B, mungkin kita bisa mengatakan anjing bahagia. Ini adalah gambar dan anjing yang bahagia. Tapi nama perusahaannya adalah Happy Dog Daycare, mendengar happy dog, happy dog, daycare sebenarnya bukan pengalaman yang lebih baik. Kami akan menyertakan atribut alt. Jadi jelas kami memikirkan teks alt, dan kemudian kami akan membiarkannya kosong. Ini akan dilewati dan tidak ada yang akan diucapkan dengan keras. Jika kita meninggalkan atribut alt sebagai gantinya, ada kemungkinan nama file untuk gambar akan dibacakan. Jadi jangan lakukan itu. Selanjutnya kita perlu memberi tahu browser seberapa besar gambar dalam piksel. Gambar ini memiliki lebar 400 piksel dan tinggi 300 piksel. Jika kita membukanya di sesuatu seperti Photoshop, kita dapat melihat bahwa itu sebenarnya seberapa besar foto itu. Jadi saya akan menambahkan informasi itu ke elemen gambar dan atribut lebar dan tinggi. Sekarang kami tidak menyertakan unit pada angka-angka ini, kami hanya memasukkan nomornya. Ini dipahami sebagai piksel, piksel aktual. Tidak masalah mana yang lebih dulu, tinggi atau lebarnya. Faktanya, urutan atribut dalam elemen HTML tidak pernah menjadi masalah, kita dapat menempatkannya dalam urutan apa pun yang kita inginkan. Jadi mengapa kita melakukan ini? Gambar telah dimuat dan terlihat baik-baik saja. Sepertinya tidak suka mengetik lebar dan tinggi melakukan apa pun. Nah, setelah file sudah dimuat dan di halaman, atribut lebar dan tinggi tidak melakukan apa-apa. Browser menemukan seberapa besar untuk menampilkan gambar dengan mengunduhnya, melihat file dan karakteristiknya, dan menggunakannya untuk menghitung tata letak. Masalahnya adalah jika browser harus mengeluarkan informasi ukuran dari file, maka itu tidak dapat menghitung bagian tata letak ini sampai setelah gambar diunduh. Jika sebaliknya kita memberi tahu browser seberapa besar setiap gambar, maka ia langsung tahu, dan itu memberi browser awal sepersekian detik dalam menghitung tata letak. Pernahkah Anda mulai membaca artikel di web dan terus melompat-lompat saat gambar dimuat, memindahkan semuanya saat Anda mencoba membaca? Nah, menyertakan atribut lebar dan tinggi pada gambar Anda akan memperbaikinya. Jadi itulah elemen gambar dengan atribut sumber, alt, lebar dan tinggi.

Konten