Untuk menambah daya tarik tampilan dokumen HTML kita, yang harus dilakukan adalah selain bisa menampilkan informasi yang menarik dan memformat teks juga dibutuhkan unsur lain yaitu adanya gambar. Selain itu, adanya gambar ditampilan dokumen HTML kita mungkin akan menunjang atau memperjelas terhadap informasi yang ditampilkan. Untuk menampilkan gambar tersebut yang diperlukan selain gambar itu sendiri, kita juga membutuhkan tag-tag HTML yang berperan untuk menampilkan gambar.
Tipe gambar banyak jumlahnya, tetapi tidak semua tipe gambar dapat ditampilkan dalam dokumen HTML. Sebelum kita mulai belajar menampilkan gambar kedalam tampilan dokumen kita, sebaiknya kita mengenal tipe gambar yang sering atau umum digunakan pada sebuah dokumen HTML agar tidak terjadi masalah pada tampilan kita di browser nantinya.
| Jenis Gambar |
Ekstensi Gambar |
| JPEG |
.jpg/.jpeg |
| TIFF/TIF |
.tiff |
| PNG |
.png |
| GIF |
.gif |
1. Menampilkan Gambar
Tag yang digunakan untuk menampilkan gambar pada dokumen HTML adalah <img>. Atribut yang menyertai tag ini banyak sekali, tetapi tag yang harus selalu disertakan hanya ada satu, yaitu atribut src. Bentuk penulisan dari tag <img> adalah sebagai berikut :
<IMG SRC = “nama_gambar”>
2. Background Gambar
Background atau latar belakang sebuah web selain menggunakan warna kita juga bisa menggunakan background berupa gambar. hal ini diperlukan untuk menambah daya tarik sebuah dokumen yang dibuat. Namun untuk membuat background yang berupa gambar kita harus pandai memilih gambar yang digunakan, jangan sampai dengan adanya gambar membuat orang yang melihat menjadi kurang nyaman. Untuk menyertakan suatu gambar sebagai latar belakang, anda bisa menggunakan atribut background pada tag <img>.
<body background = “nama berkas gambar”>
3. Atribut Border pada Gambar
Untuk memberikan border/bingkai pada sebuah gambar, kita dapat menggunakan atribut border pada tag <img>. Untuk menampilkan border tersebut caranya adalah dengan memberikan bilangan pada atribut border.
4.Atribut Align Pada Gambar
Pada tag <IMG> terdapat atribut bernama align yang digunakan untuk mengatur penempatan teks terhadap gambar.
Nilai yang terdapat pada atribut align adalah :
- BOTTOM : Teks terletak pada bagian bawah
- MIDDLE : Teks terletak di tengah-tengah
- TOP : Teks terletak di bagian atas
5. Atribut untuk Mengatur Ukuran Gambar
Ukuran gambar yang tampil umumnya menyesuaikan pada keadaan asli gambar tersebut. Bila kita menginkan perubahan ukuran gambar tersebut sesuai dengan area yang kita sediakan, kita bisa memberikan atribut pada tag <IMG> yang terdiri dari atribut height dan width.
- HEIGHT untuk mengatur tinggi gambar
- WIDTH untuk mengatur lebar gambar
Untuk mengatur ukuran gambar tersebut kita harus memberikan nilai tertentu pada kedua atribut tersebut. Nilai yang diberikan pada kedua atribut berupa nilai dengan satuan piksel. Untuk mengetahui penggunaan kedua atribut tersebut perhatikan pada baris program berikut :
<img src = "images/hery.jpg" ><br>
<img src = "images/hery.jpg" height=100 width=100 >
<img src = "images/hery.jpg" height=50 width=50 >
Semkain mengenai Cara Menampilkan Gambar dalam HTML.
Postingan
