Tutorial kali ini, admin akan menunjukkan cara menambahkan gambar ke halaman web anda. Admin akan memulai penjelasan tutorial ini dari dua jenis gambar utama pada halaman web anda, yakni gambar berformat jpg dan gif. Setelah itu, admin akan menunjukkan beberapa cara yang bisa anda lakukan untuk memasukkan dan menyesuaikan gambar anda secara khusus dengan bantuan pihak ketiga untuk mensejajarkan gambar dengan baris atau mensejajarkan gambar dengan gambar lainnya yang biasa disebut align.
Beberapa bagian yang berkaitan dengan gambar yang tidak dibahas di sini adalah :
Jika anda ingin menggunakan gambar berformat JPG atau GIF, maka anda harus membuat gambar anda terlebih dahulu menggunakan desain grafis, kemudian menyimpannya sebagai JPG atau GIF.
2. Menginsert gambar ke HTML
Tag yang digunakan untuk memasukkan gambar adalah <img>. Di bawah ini tentunya dan pasti anda melihat gambar yang disebut "Preloader.gif".
Kode HTML yang digunakan untuk menyisipkan gambar tersebut pada halaman blog ini adalah :
<Img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1WU5hIF4yE8zcF6puRfNXzgrb8BQJ3xO3bJaw4oEbPczf-s-f2QIIp_OAXT2Fm0WLRHUaY4pJKDJmR3vZx9nX_CTcVhX8UrunEx2i-Ik43rdfQD4A_9QBcBLSjfW_CRgO_3_0Wi1oiGlj/s1600/Preloader.gif">
Jika gambar disimpan dalam folder hostingan yang sama pada sebuah website, anda tidak perlu menuliskan nama domainnya (misalnya, website anda berdomain jibankontemporer.web.id), cukup dengan memasukkan nama gambarnya saja seperti:
<Img src = "Preloader.gif">
3. Mengubah resolusi gambar
Anda dapat mengubah resolusi gambar dengan menggunakan atribut
width dan atribut
height. Secara umum, tidak dianjurkan untuk mengurangi ukuran gambar menggunakan pengaturan ini, karena gambar akan ditransfer melalui internet dalam ukuran aslinya. Misalnya, gambarnya berukuran 3MB kemudian anda memperkecil resolusi gambar anda di tampilan web, maka tetap gambar yang dimuat adalah gambar yang berukuran 3MB, dan tentunya, hal ini akan memperlambat loading halaman web anda.
Jika anda memiliki gambar yang lebih besar dari ukuran yang anda inginkan pada halaman anda, maka anda harus mengurangi ukuran gambar anda melalui desain grafis, bukan memperkecil resolusi pada halaman web menggunakan atribut
width dan atribut
height. Sebaliknya, kadang-kadang menjadi solusi terbaik dengan cara memperbesar gambar menggunakan teknik ini dari gambar yang ukurannya kecil.
Di bawah ini adalah dua tampilan gambar yang serupa dengan pengaturan yang berbeda untuk lebar dan tinggi.
<img src="http://jibankontemporer.web.id/Preloader.gif" width="128" height="128">
__________________
<img src="http://jibankontemporer.web.id/Preloader.gif" width="320" height="320">
Jika anda tidak menggunakan atribut
width dan atribut
height, maka browser secara otomatis akan menggunakan ukuran resolusi asalnya. Namun, sebaiknya anda selalu menggunakan atribut
width dan atribut
height, walaupun pada dasarnya menggunakan ukuran asalnya. Alasannya adalah jika anda tidak menggunakan atribut
width dan atribut
height, maka browser tidak bisa memunculkan halaman sampai gambar dimuat seluruhnya. Akibatnya, pengunjung tidak bisa membaca teks di sekitar gambar sedangkan gambar itu sendiri adalah pemuatan, dan pada gilirannya akan memberikan kesan kepada para pengunjung kalau halaman yang dikunjunginya lambat loading. Hal ini juga slalu terjadi jika gambar diletakkan dalam tabel. Tabel juga tidak bisa ditampilkan sampai gambar tersebut dimuat seluruhnya.
4. Menambahkan border pada gambar
Anda dapat menambahkan batasan garis pada gambar dengan menggunakan atribut
border yang ditunjukkan pada contoh di bawah ini:
<img src="http://jibankontemporer.web.id/Preloader.gif" border="5">
5. Menambahkan teks alternatif pada gambar
Anda juga bisa menambahkan teks alternatif pada gambar dengan menggunakan atribut
alt yang ditunjukkan pada contoh di bawah ini :
<img src="http://jibankontemporer.web.id/Preloader.gif" alt="Gambar Sedang Loading">
Tujuan dari teks alternatif ini adalah ketika sebuah halaman belum berhasil memuat gambar, maka yang diperlihatkan adalah teks alternatif dari gambar tersebut, sehingga para pengunjung langsung melihat ide gambar yang akan ditampilkan dari gambar yang akan dimuat nantinya.
6. Menambahkaan spasi horizontal dan vertikal pada gambar
Anda juga dapat menambahkan spasi ke atas dan spasi ke bawah gambar dengan menggunakan atribut
vSpace. Dengan cara yang sama menambahkan spasi ke kiri dan spasi ke kanan gambar menggunakan atribut
hSpace. Berikut adalah contoh dalam menggunakan atribut ini :
<Img src = "http://jibankontemporer.web.id/Preloader.gif" hSpace = "30" vSpace = "10">
Tujuan dari spasi ini adalah untuk menambahkan jarak antara gambar dengan yang ada di sekitarnya, kiri, kanan, atas, dan bawah. Baik itu jarak antara gambar dengan tulisan maupun jarak antara gambar yang satu dengan gambar yang lainnya.
<Img src = "http://jibankontemporer.web.id/gambar_lainnya.gif" hSpace = "30" vSpace = "10"><Img src = "http://jibankontemporer.web.id/Preloader.gif" hSpace = "30" vSpace = "10">
7. Penjajaran gambar dengan teks atau gambar lainnya yang berada di sekitarnya
Pensejajaran ini menggunakan pihak ke tiga, yakni teks atau gambar lainnya untuk memposisikan di bagian mana gambar anda harus diletakkan dengan menggunakan atribut
align. Anda bisa mempraktekkan satu per satu dari kode di bawah ini untuk memposisikan gambar anda :
<img src="http://jibankontemporer.web.id/Preloader.gif" align="texttop">
<img src="http://jibankontemporer.web.id/Preloader.gif" align="top">
<img src="http://jibankontemporer.web.id/Preloader.gif" align="middle">
<img src="http://jibankontemporer.web.id/Preloader.gif" align="absmiddle">
<img src="http://jibankontemporer.web.id/Preloader.gif" align="bottom">
<img src="http://jibankontemporer.web.id/Preloader.gif" align="absbottom">
<img src="http://jibankontemporer.web.id/Preloader.gif" align="baseline">
<img src="http://jibankontemporer.web.id/Preloader.gif" align="left">
<img src="http://jibankontemporer.web.id/Preloader.gif" align="right">
Beberapa kode di atas, anda bisa mempraktekkan bagaimana posisi gambar tersebut jika berada dalam paragraf, berada di antara gambar lainnya, dan berada di dalam kalimat.
Beberapa dasar dalam pemasangan gambar di atas, sangat cocok bagi anda yang kreatif dengan gambar dan juga menyukai postingan yang rapi. Ada sedikit perbedaan dari yang lainnya, antara yang suka copas dan yang suka mengetik, itu bisa dilihat dari keapikan postingan yang disharingnya.