Hingga saat ini, definisi gambar Anda seharusnya terlihat kurang lebih seperti ini:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
Elemen img sebaiknya diberikan beberapa atribut. Pertama adalah alt. Teks yang didefinisikan di sini akan ditampilkan oleh browser jika gambar - atas alasan apa pun juga - tidak dapat dimuat.
Sayangnya, terkadang terjadi kebingungan terkait atribut alt. Atribut alt hanya digunakan saat gambar tidak ditampilkan. Beberapa browser menampilkan nilai atribut alt dalam sebuah tooltip saat kursor tetap di atas gambar.
Perilaku ini salah. Untuk tooltip seperti itu, seharusnya menggunakan atribut title. Definisi yang tepat akan terlihat sebagai berikut:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logo dari PSD-Tutorials.de" />
Pada kasus ini, nilai dari title akan menutupi nilai dari alt.
Ukuran Gambar
Banyak hal dalam HTML saat ini lebih banyak diselesaikan melalui CSS daripada atribut. Namun, definisi ukuran masih dilakukan dengan atribut width dan height. Berikut contohnya:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logo dari PSD-Tutorials.de" width="200" height="150" />
Jika tidak ada unit di width atau height, nilai angka diinterpretasikan sebagai ukuran dalam pixel oleh browser. Jadi, gambar pada contoh sebelumnya lebarnya 200 piksel dan tingginya 150 piksel. Penggunaan persentase juga mungkin.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logo dari PSD-Tutorials.de" width="20%" height="15%" />
Percentase mengacu pada ruang tampilan yang tersedia. Jika tidak ada ukuran yang ditetapkan, browser akan menampilkan grafik dalam ukuran aslinya.
Gambar dan Paragraf Teks
Jika Anda meletakkan gambar dalam kombinasi dengan teks berjalan, berhati-hatilah.
<p><img src="logo.png" alt="" width="180" height="150" /> Teks ini akan ditampilkan di samping gambar.</p>
img adalah Inline-Element. Grafik bisa ditempatkan langsung di dalam teks. Jika gambar lebih tinggi dari tinggi baris, teks akan disesuaikan oleh browser di dalam baris tersebut. Secara default, teks akan diatur di bagian bawah untuk berdampingan dengan gambar.
Penyelarasan di versi HTML yang lebih lama dilakukan dengan atribut align. Jangan gunakan atribut ini lagi karena telah dihapus dari standar HTML5. Sebagai gantinya, gunakan kemungkinan yang ditawarkan CSS untuk memungkinkan teks mengalir di sekitar gambar.
Deskripsi Panjang
HTML menyediakan opsi untuk memberikan deskripsi yang lengkap untuk sebuah gambar. Ini berguna ketika gambar memerlukan penjelasan lebih lanjut. Informasi tambahan dapat disimpan di lokasi yang berbeda dan dirujuk ke sana.
Informasi tambahan dapat ditempatkan di berbagai lokasi.
<img src="bild1.png" alt="Diagram 1" title="Diagram 1" longdesc="#diagramm" />
Di sini diasumsikan bahwa di dalam halaman ada area dengan ID diagramm.
Mungkin yang paling umum adalah informasi disimpan dalam file eksternal.
<img src="bild1.png" alt="Diagram 1" longdesc="diagramm1.htm" />
Namun, dukungan browser masih belum memadai. Selain itu, atribut ini tampaknya membuat para pembuat browser bingung tentang bagaimana cara mengimplementasikannya dengan mudah.
Karena cara kerja atribut longdesc tidak cantik, terutama pada Firefox misalnya. Jika atribut longdesc diterapkan pada suatu gambar, pengunjung situs biasa tidak akan mengetahuinya secara langsung. Mereka harus mengklik gambar dengan tombol kanan mouse.
Kemudian, di dalam menu konteks akan terdapat opsi Tampilkan Deskripsi. Jika opsi ini dipilih, informasi tambahan yang ditetapkan dalam longdesc akan ditampilkan. Itulah cara kerjanya di Firefox, meskipun tidak begitu elegan.
Opera telah menyelesaikannya dengan cara yang sangat mirip. Jika Anda mengklik gambar dengan tombol kanan mouse di browser ini, maka akan muncul entri Deskripsi Panjang.
Ini kemudian akan mengarah ke informasi tambahan yang ditentukan.
WC3 juga menyarankan untuk menyediakan deskripsi panjang dalam bentuk URL Data.
<img src="logo.png" alt="W3C" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E %3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20W3C%20Logo%3C/title%3E%3C/head%3E %3Cbody%3E%3Cp%3EA%20blue%20capital%20letter%20%22W%22%20with%20kerning%20so%20it%20 touches%20a%20blue%203%2C%20followed%20by%20a%20black%20shadow%20of%20a%20white%20 capital%20letter%20C%20all%20on%20a%20white%20background%3C/body%3E%3C/html%3E" />
Jika Anda belum berpengalaman dengan URL Data ini, Anda dapat menemukan informasi detail di http://de.wikipedia.org/wiki/Data-URL.
Definisikan Deskripsi Gambar
Selama ini, tidak ada cara dalam HTML untuk mendefinisikan keterangan gambar dan pengelompokan gambar. Namun aspek ini telah berubah dengan HTML5. Di sini, dua elemen baru figure dan figcaption diperkenalkan.
Figure sebenarnya tidak hanya untuk digunakan dalam kaitannya dengan grafik. Sebenarnya, elemen ini dapat digunakan untuk semua elemen yang melengkapi dokumen. Hal ini dapat berupa selain gambar, misalnya diagram, contoh kode, dan video.
Selain itu, ada juga figcaption. Dengan ini, konten yang tidak dapat dibaca oleh kelompok pengguna tertentu dapat dilengkapi dengan deskripsi alternatif.
Berikut adalah contoh penggunaan kedua elemen figure dan figcaption:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>Ini adalah logo baru kami.</figcaption> </figure>
Setelah dilihat di browser, hasilnya adalah:
Bagaimana cara browser menangani dua elemen tersebut, pada akhirnya tergantung pada mereka. Namun pada dasarnya, tata letaknya tentu saja dapat dipengaruhi kembali dengan CSS.
Dalam sebuah elemen figure, Anda dapat menyisipkan sebanyak gambar atau elemen lain yang diinginkan. Namun, dalam elemen figure hanya boleh ada satu elemen figcaption. Berikut contoh lainnya:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <img src="logo_gross.jpg" width="400" height="250" alt="PSD-Tutorials.de" /> <figcaption>Ini adalah logo baru kami.</figcaption> </figure>
Dengan cara ini, Anda juga dapat menyatukan beberapa gambar dalam satu elemen figur.
Terutama dalam hal strukturisasi logis dari halaman web, HTML5 memiliki banyak perubahan. Semua ini juga akan Anda pelajari secara mendetail dalam rangkaian ini.
