Dengan adanya gambar, tampilan website, blog ataupun dokumen html kita akan lebih menarik. Gambar seringkali juga kita manfaatkan untuk mempromosikan produk dalam benuk banner. Kalau kita memposting artikel pada blog dan ingin menambahkan gambar, maka kita tinggal upload gambar dengan diawali klik pada "Insert Image" pada saat kita memposting artikel. Pada kesempatan kali ini, kita akan mempelajari sebenarnya tag dan atribut apa saja yang digunakan jika kita ingin menambahkan gambar pada website atau blog kita, sehingga pada saat kita menambahkan gambar diblog, kita tidak sekedar upload gambar, tapi kita bisa mengedit gambar yang kita upload itu disesuaikan dengan kebutuhan.
Tag yang kita gunakan untuk menambahkan gambar pada html adalah <img> tanpa tag penutup. Ditambah beberapa atribut yang dibutuhkan. Beberapa atribut yang dibutuhkan :
src --> atribut inilah yang berfungsi untuk menampilkan gambar pada halaman web kita. src merupakan singkatan dari "source". Sedangkan value dari atribut src adalah url dari gambar yang akan kita tampilkan.alt --> berfungsi sebagai teks alternatife sebagai pengganti gambar, jika gambar tidak bisa ditampilkan. Valuenya berupa teks yang kita sesuaikan dengan gambarnya. Hal ini berguna misalnya ketika koneksi internet kurang bagus sehingga gambar tidak tampil maka teks yang kita tulis pada alt yang akan tampil. Dengan demikian pembaca mengetahui maksud dari gambar itu. Dalam SEO alt juga mempermudah mesin pencari untuk mengindeks artikel yang kita buat yaitu saat kita mengisi teks pada alt dengan kata kunci yang kita targetkan atau deskripsi dari gambar.
Berikut contoh penulisan kode htmlnya :
<img src="url" alt="teks">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3LRJYhzp10RX_giN0VCYMZwTUwOUTRHO-NLLW5R7Pn8J4u7yv_mYtAtKL4YDJqniaLXh_fZw7xrMBFgoGAv-VeWyUyHEmyh8Dgq1ONQ1IvAc624rv69I2s7a3NY_eTTPnKAUlRol8diMa/s320/motifasi.JPG" alt="Sebening Embun">
Hasilnya :
Pada contoh kode diatas, url nya merupakan url gambar yang kita unggah di blogspot. Hal ini dapat kita lihat kodenya saat kita upload gambar pada saat posting tulisan dengan edit HTML.
| Revolusioner!! 4 Langkah Mudah bisa HTML, PHP dan MySQL |
Tidak ada komentar:
Posting Komentar
Harap berkomentar dengan kata kata yang baik dan sopan ya..:)