Dasar Pemasangan Gambar Pada Laman HTML
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 :
- Membuat gambar bekerja sebagai link, (Nanti diarahkan ke linknya - contohnya anda bisa lihat di sini)
- Pemilihan warna untuk gambar, (Nanti diarahkan ke linknya)
- Pemasangan efek mouse pada gambar. (Nanti diarahkan ke linknya - contohnya anda bisa lihat di sini)
1. GIF dan JPG
Komputer menyimpan gambar dalam beberapa cara yang berbeda. Beberapa metode penyimpanan difokuskan pada mengompresi ukuran gambar sebanyak mungkin. Masalah utama dengan menggunakan gambar pada situs web adalah menggunakan banyak waktu untuk memuat gambar dibandingkan dengan menggunakan teks. Untuk mengurangi waktu download sebanyak mungkin, maka dua jenis gambar terbaik dalam mengompresi ukuran gambar di web adalah gambar berformat GIF dan JPG:
| GIF | JPG |
| 256 warna | Warna tak terbatas |
| Dapat dibuat transparan | Tidak dapat dibuat transparan |
| Format ini tidak baik untuk mengompresi photo | Sangat baik untuk mengompresi photo dan gambar lebih kompleks |
| Gambar ini sangat bagus untuk digunakan sebagai banner, sebagai tombol dan sebagai clipt art | Gambar ini tidak cocok untuk digunakan sebagai banner, sebagai tombol dan sebagai clipt art |
Ini berarti bahwa:
- Banner, tombol, pemisah, clip art dan gambar sederhana lainnya paling bagus menggunakan gambar berformat GIF.
- Foto dan gambar lebih kompleks, sangat bagus menggunakan gambar berformat JPG.
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 :
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:
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.
__________________
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:
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 :
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 :
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.
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 :
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.
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/AVvXsEgvjaGOA65L-4fROmUCzdfI7tQfknMIZJlLuvAFx_60OrxYsWAKgE8aAeKjMckKp3A5VLi6Q6D7Z5uOCN2nRnKzssKYhe69JwMAoaRwIOIYrbDb0mmsqPNiRtFdvsNJy31EWXAHePErY3d7/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.
0 Response to " Dasar Pemasangan Gambar Pada Laman HTML"
Post a Comment