Pengaturan Gambar Dalam Dasar HTML

BAB III

 GAMBAR

 3.1Pengantar Gambar 

Gambar (image) pada sebuah halaman web dapat memperindah tampilan dan bahkan memperjelas suatu informasi yang terkandung di dalam halaman tersebut. Dengan adanya gambar, pengakses internet dapat berlama-lama di depan layar membaca isi berita yang ditampilkan pada halaman web. Pada dasarnya, hampir semua format gambar dapat dimasukkan ke dalam halaman web, namun terkadang ada beberapa browser yang tidak bisa menampilkan gambar dengan format tertentu. Hal ini menyebabkan format gambar gif, jpeg (jpg), dan png yang paling banyak digunakan untuk halaman web dari sekian banyak format gambar. Bisa dikatakan bahwa ketiga format tadi adalah format standar gambar untuk halaman web. Masing-masing format gambar memiliki karakteristik yang berbeda-beda. Berikut adalah daftar karakteristik masing-masing format:

Karakteristik format gambar tersebut akan berpengaruh pada hasil tampilan pada halaman web, sehingga penggunaannya disesuaikan dengan kebutuhan. Misal, format gif akan lebih cocok digunakan untuk tombol navigasi sedang untuk gambar foto akan lebih cocok menggunakan format jpeg atau png. Penggunaan format gambar ini juga akan berpengaruh pada kecepatan loading halaman web saat dibuka.

3.2 Memasukkan Gambar

Elemen yang dibutuhkan untuk memasukkan gambar ke dalam halaman web adalah . Atribut-atribut yang akan sering digunakan pada elemen ini adalah:

 src, nama dan alamat sumber tempat gambar berada. 

 height, untuk menentukan tinggi gambar pada browser. 

 width, untuk mengatur lebar gambar pada browser

 align, untuk mengatur posisi gambar, di bagian kiri, tengah atau kanan halaman. Atribut ini juga            untuk mengatur posisi teks relatif pada gambar, di sisi top, midle atau bottom. 

 hspace, untuk mengatur lebar spasi horisontal.

 vspace, untuk mengatur lebar spasi vertikal 

 border, untuk mengatur ketebalan border gambar. 

 alt, sebagai informasi alternatif untuk gambar. 

Contoh Program:

Hasilnya :

Nilai bilangan untuk atribut height dan width menggunakan satuan pixel. Penambahan tanda persen (%) akan menyebabkan ukuran gambar yang dimasukkan adalah ukuran relatif terhadap ukuran browser.

3.3 Gambar sebagai Latar Belakang 

Gambar dapat ditampilkan sebagai latar belakang dokumen HTML. Gambar dapat dimasukkan ke dalam tag dengan atribut background.

Hasilnya :

3.4 Alignment Gambar 

Penulisan gambar di dalam dokumen HTML bersama dengan teks akan membuat suatu teks ditampilkan sejajar pada bagian bawah dari gambar. Gambar dapat diposisikan di sebelah kiri maupun kanan dari teks. Contoh Program:

Hasilnya :

3.5 Memanipulasi Ukuran Gambar 

Gambar memiliki ukuran dengan dimensi piksel (pixel), yaitu lebar x tinggi (width x height). Pada saat gambar ditampilkan di atas browser, maka gambar tersebut ditampilkan dalam ukuran sebenarnya. Kita dapat memanipulasi ukuran gambar yang ditampilkan di atas browser dengan memberikan atribut width dan height di dalam tag . Contoh program:

Hasilnya :

3.6 Alternate Text

 Atribut alt dapat digunakan di dalam tag img untuk memberikan alternate text dari suatu gambar. Alternate teks ini ditampilkan ketika browser tidak dapat meload gambar. Contoh Program:

Hasilnya:

Perhatikan, karena gambar mypenguin.jpg tidak ada, sehingga tidak dapat diload, maka muncul keterangan dari gambar tersebut. Bila gambar tersebut ada dan dapat diload, maka keterangan (alt) akan muncul pada saat mouse didekatkan pada gambar tersebut. Sebagai tambahan, untuk memberikan border pada gamar dapat Anda tambahkan atribut BORDER pada tag . Misalnya:

Catatan: besarnya ukuran gambar yang ditampilkan di dalam dokumen HTML, mempengaruhi kecepatan browser untuk me-load dokumen HTML tersebut. Semakin besar ukuran gambar yang ditampilkan, semakin lama browser meload dokumen HTML.

Sumber : Modul Dasar Pemograman Web 2019/2020 Pesantren PeTIK Rangkapan Jaya, Depok, Jawa Barat