Gambar HTML

Dalam pelajaran ini Anda akan belajar cara menampilkan gambar di halaman web Anda. Untuk ini, kami menggunakan tag img, menentukan sumber file:

< img  src = "rubiks-cube.jpg" />

Ini adalah tag tunggal sehingga tidak ada tag pembuka dan penutup yang terpisah.

Kami telah belajar tentang tautan relatif dan absolut. Kami dapat menentukan jalur ( URL ) ke file gambar kami dengan dua cara.

Tinggi lebar

Browser web mengunduh dan merender kode HTML terlebih dahulu dan setelah itu gambar. Ini berarti bahwa browser tidak mengetahui ukuran gambar saat ketika menampilkan halaman. Ini akan menambahkan mereka ke halaman nanti, setelah selesai mengunduh file gambar tetapi Anda dapat memesan tempat yang diinginkan pada halaman untuk membuat pemuatan terlihat lebih berbau.

Untuk memesan area untuk gambar, Anda harus memasukkan atribut tinggi dan lebar dalam piksel. Untuk menemukan tinggi dan lebar gambar, Anda dapat mengunduh editor gambar gratis seperti IrfanView atau Paint Dot Net . Setelah Anda mengunduh dan menginstal salah satu dari program ini, Anda dapat menemukan properti gambar, dalam kasus kami 200x200 piksel.

Sekarang yang perlu Anda lakukan adalah mencolokkannya ke tag gambar Anda.

< img  src = "rubiks-cube.jpg"  width = "200"  height = "200" />

 Atribut alt

Ini berguna dan direkomendasikan oleh Google untuk menambahkan atribut alt ke gambar Anda. Ini adalah deskripsi singkat untuk para penyandang cacat yang menggunakan komputer karena mereka tidak dapat melihat gambar saat berselancar di internet, ini memberi tahu mereka seperti apa gambar itu. Yang perlu Anda lakukan adalah memasukkan deskripsi singkat. Simpan deskripsi di bawah 5 atau 6 kata.

< img  src = "rubiks-cube.jpg"  width = "200"  height = "200"  alt = "orak-arik Rubik Cube" />

Sejajarkan Gambar HTML

Anda juga dapat menggunakan atribut style untuk mengesampingkan gambar. Lihat cara melayang gambar dengan margin kecil yang menciptakan celah antara gambar dan teks.

< img  src = "rubiks-cube.jpg"  width = "200"  height = "200"  alt = "Kubus Rubik"  style = "float: right; margin: 0 0 10px 20px;" />

Mengoptimalkan Kecepatan Pemuatan Halaman - Mengubah Ukuran Gambar

Menjadi seorang Webmaster kita harus menjaga halaman kita memuat cepat. Kami tidak dapat membuat orang duduk di sana selama satu atau dua menit menunggu grafik dimuat, jika tidak mereka hanya akan meninggalkan situs Anda. Anda harus menjaga ukuran gambar Anda ke minimum dan ada beberapa cara untuk melakukannya. Sebelum saya menjelaskannya, saya harus meminta Anda untuk mengunduh Paint Dot Net (jika belum) karena kami akan menggunakan program itu untuk mengedit gambar. Anda dapat menggunakan program lain seperti Paint Shop Pro atau Adobe Photoshop , tetapi mereka mahal dan untuk saat ini Anda benar-benar tidak perlu melakukan editing waktu besar.

Gunakan perintah Ctrl + R  keyboard atau pilih Image / Resize di menu file. Pilih ukuran yang diinginkan dan akhirnya simpan file tersebut. Cobalah untuk menghindari file yang lebih besar dari 50 kb. Gunakan Penguji Kecepatan Halaman Web untuk melihat gambar besar pada halaman web.

Ekstensi Gambar

Ekstensi gambar yang paling umum, didukung oleh semua browser populer adalah jpg, png dan gif. Gunakan file .svg untuk gambar vektor-grafis.

jpg, png, gif

• jpg - Kompresi yang baik tetapi kehilangan kualitas, gunakan ini sebagai format default.
• png - File yang lebih besar dan mendukung transparansi.
• gif - Lebih sedikit warna dan Anda dapat menghidupkan gambar.

jpg:          png:        gif:

Menghubungkan Gambar

Kami mempelajari tentang tautan pada bab sebelumnya, sekarang saatnya belajar bagaimana membuat tautan gambar yang dapat diklik:

< A  href = "https://ruwix.com/"  Target = "_blank" > 
  < img  src = "/html/tutorial/img/rubiks-cube.jpg"  width = "200"  height = "200"  alt = "Rubik's Cube" /> 
</ a >

Gambar yang dapat diklik ini menghasilkan seperti ini di situs web:

Mulai Generator Gambar HTML