Computer & Networking: Penggunaan Image pada HTML

Penggunaan image atau gambar pada dokumen HTML akan menambah daya tarik sebuah halaman web. Saat ini sudah jarang situs web yang tidak menambahkan elemen gambar pada situs tersebut. Oleh karena itu penggunaan gambar pada HTML cukup penting untuk dipelajari. Untuk memasukan elemen gambar pada dokumen HTML dapat dilakukan dengan menggunakan tag <img>. Tag ini merupakan salah satu tag HTML yang tidak memiliki pasangan sehingga alangkah baiknya jika diakhir penulisan tag ini dibubuhi tanda / (slash) untuk menandakan bahwa tag tersebut berakhir. Ada beberapa poin penting dalam mengatur keberadaan sebuah gambar dalam dokumen HTML, diantaranya adalah sebagai berikut :

Sumber Gambar
Keterangan Gambar
Ukuran Gambar
Border Gambar
Tooltip Gambar
Alignment Gambar

————————————————————————————————————

SUMBER GAMBAR

Sumber gambar yaitu letak dimana file gambar berada; ditandai dengan atribut src yang merupakan singkatan dari kata source. Nilai dari atribut ini adalah letak dan nama gambar yang bersangkutan. Penggunaan umum dalam memasukan gambar pada dokumen HTML adalah dengan menggunakan
tag <img src="namafilegambar" />, namun penulisan tag tersebut berlaku jika file gambar berada satu folder / direktori dengan file HTML-nya. Sebagai contoh, sebuah gambar bernama "heart.jpg" yang terletak satu folder dengan sebuah file HTML akan dimasukan ke dalam dokumen HTML tersebut, maka penulisan tagnya adalah

Contoh Penggunaan Image

Berikut adalah hasil dari tag di atas

Hasil Penggunaan Image

Tag di atas merupakan cara yang digunakan untuk memasukan gambar yang letaknya berada satu folder dengan dokumen HTML. Lalu, bagaimana jika ingin memasukan gambar yang letaknya tidak satu folder dengan file HTML? Hal itu dapat dilakukan dengan membubuhkan letak gambar (nama folder dimana file gambar berada) dan dilanjutkan dengan tanda / (garis miring atau slash) lalu diikuti dengan nama gambar yang akan dimasukan. Sebagai contoh, jika gambar "heart.jpg" berada pada folder "images", dan folder images merupakan subfolder dari folder yang menyimpan file HTML, maka nilai yang digunakan pada atribut src adalah sebagai berikut

Kemudian jika file gambar berada pada folder di atas folder yang menyimpan file HTML, maka nilai atribut src pada tag <img> dibubuhkan tanda .. (2 titik) yang kemudian diikuti oleh tanda / (slash) lalu nama file gambar. Hal itu dimaksudkan untuk menandakan bahwa file HTML berada pada subfolder dari folder yang menyimpan file gambar. Sebagai contoh, pada drive C:\ terdapat file gambar "heart.jpg" dan folder "HTML", dan pada folder HTML terdapat file HTML yang kita buat. Untuk memasukan gambar heart.jpg ke dalam file HTML yang kita desain, dapat dilakukan dengan menggunakan tag berikut

Penulisan nilai atribut src akan berbeda jika struktur direktori letak dimana file gambar dan dokumen HTML-nya merupakan direktori bertingkat. Jika hal tersebut terjadi, maka penulisan nilai atribut src dapat dilakukan dengan mengkombinasikan tanda .. dengan nama folder tujuan. Sebagai contoh, struktur direktori yang akan digunakan adalah sebagai berikut

Contoh Struktur Direktori Bertingkat

Dari skema struktur direktori di atas ditunjukan bahwa file coba.html dengan file heart.jpg ditempatkan pada direktori bertingkat, maka cara yang digunakan untuk memasukan file gambar kedalam dokumen HTML adalah dengan menggunakan nilai atribut src seperti berikut

Tag untuk Direktori Bertingkat

————————————————————————————————————

KETERANGAN GAMBAR

Keterangan gambar yaitu keterangan mengenai gambar yang bersangkutan; ditandai dengan atribut alt yang merupakan singkatan dari kata alternative. Nilai dari atribut ini adalah sebuah teks yang merupakan keterangan dari gambar yang bersangkutan. Alternative akan memudahkan proses pencarian yang dilakukan web browser karena gambar yang dicari sudah mendapatkan nama dari atribut ini. Contoh penggunaannya adalah sebagai berikut

Tag Alternative

————————————————————————————————————

UKURAN GAMBAR

Konfigurasi ini maksudnya yaitu pengaturan lebar dan panjang dari gambar dalam dokumen HTML. Dalam mengatur ukuran gambar pada HTML perlu adanya perhitungan perbandingan yang tepat sehingga estetika gambar akan sempurna dan menambah nilai look dan feel dari halaman web. Untuk mengatur ukuran gambar, dapat dilakukan dengan menggunakan atribut width (lebar gambar) dan height (panjang gambar). Nilai dari kedua atribut ini adalah bilangan desimal (numerik) yang menjadi ukuran panjang dan lebar, biasanya dipresentasikan dalam satuan pixel. Sebagai contoh, berikut adalah penggunaan atribut width dan height

Pengaturan Ukuran Gambar

Dari konfigurasi di atas, maka hasilnya adalah sebagai berikut

————————————————————————————————————

BORDER GAMBAR

Border yaitu penambahan garis pinggir pada gambar. Cara penggunaannya adalah dengan menambahkan atribut border pada tag <img>, kemudian nilai dari atribut ini adalah bilangan desimal (numerik) yang tidak memiliki kisaran / batasan, sehingga pemakaian border gambar pada HTML harus melalui perhitungan yang matang. Contoh penggunaannya adalah sebagai berikut

Contoh Penggunaan Border

Dari tag di atas menghasilkan border gambar seperti berikut

Hasil Pengaturan Border

————————————————————————————————————

TOOLTIP GAMBAR

Yaitu pemberian keterangan gambar seperti halnya alternative, tetapi keterangan dengan tooltip dapat dilihat oleh user yang mengakses halaman web yang kita desain. Cara penggunaannya adalah dengan menambahkan atribut title pada tag <img>, kemudian nilai dari atribut ini adalah sebuah teks atau kalimat yang menjadi keterangan dari gambar, dan dapat dilihat oleh pengakses halaman web jika cursor mouse didekatkan pada gambar yang bersangkutan. Berikut contoh penggunaannya

Contoh Penggunaan Tooltip

Dari tag di atas dapat dihasilkan tooltip seperti berikut


Hasil Penggunaan Tooltip

————————————————————————————————————

ALIGNMENT GAMBAR

Atribut ini biasa digunakan untuk sebuah gambar yang akan dimasukan ke dalam dokumen HTML dan berdampingan dengan sebuah teks maupun paragraf. Maksud align disini bukanlah perataan gambar, tetapi cara bagaimana memposisikan teks terhadap gambar yang berdampingan dengannya. Cara untuk mengatur alignment gambar terhadap suatu teks / paragraf adalah dengan menambahkan atribut align pada tag <img>. Jika kita ingin menyisipkan sebuah gambar di dalam suatu teks atau paragraf tertentu, terdapat pilihan posisi gambar yang dapat diterapkan, antara lain :

Secara Vertikal :

Teks berada sejajar dengan bagian atas gambar.
Teks berada sejajar dengan bagian tengah gambar.
Teks berada sejajar dengan bagian bawah gambar.

Secara Horizontal :

Gambar berada di bagian kiri teks / paragraf.
Gambar berada di bagian kanan teks / paragraf.

Pertama-tama saya akan membahas mengenai penempatan alignment gambar terhadap suatu teks / paragraf secara vertikal. Untuk posisi gambar yang dilihat dari arah vertikal dapat ditentukan dengan mengisi atribut align pada tag <img> dengan nilai top, middle, dan bottom. Berikut ini adalah contoh kode yang menunjukan perbedaan dari ketiga nilai tersebut

Vertical Alignment

Dari tag di atas dihasilkan alignment gambar seperti screenshot berikut

Hasil Vertical Alignment

Di atas merupakan contoh dari penggunaan alignment gambar secara vertikal, sekarang saya akan membahas mengenai penggunaan alignment gambar secara horizontal. Adapun untuk posisi gambar dilihat dari arah horizontal ditentukan dengan mengusu atribut align pada tag <img> dengan nilai left dan right. Berikut adalah contoh penggunaan tag-nya