Suatu halaman web akan terlihat kaku, terkesan formal, dan sedikit menjemukan bila tidak disertai dengan gambar. Kita bisa lihat saat ini, halaman web yang ada di internet, hampir semuanya memasukkan unsur gambar, animasi, bahkan audio dan video untuk menarik dan membuat tercengang para pengunjungnya.
Cara yang diperlukan untuk memasukkan atau menambahakan gambar ke dalam suatu halaman web sangatlah mudah. HTML telah menyediakan tag khusus untuk keperluan ini, yaitu <img>. Tag ini merupakan tag tunggal atau tidak memiliki pasangan. Atribut terpenting dari tag <img> adalah SRC (source atau sumber), yang berisi file gambar yang akan ditampilkan ke dalam halaman web.
Bentuk umum penggunaan tag <img> adalah :
<img src=”namafile”>
Jika file yang akan ditampilkan berada di direktori lain, atau bahkan berada di situs web lain, makan perlu menyebutkan juga lokasi dari file tersebut.
Contoh:
<img src= “../image/komputer.jpg”>
Atau
<img src=http://www.abcde.com/image/kamera.jpg/>
Contoh hasil dokumen HTML di Web Browser seperti gambar berikut :
Gambar 11.1. Menyajikan Format Gambar
Format gambar yang sering digunakan dalam halaman web adalah GIF (.gif ) dan JPEG (.jpg atau . jpeg ). GIF adalah singkatan dari Graphics Interface Format sedangkan JPEG, adalah singkatan dari Joint Photographic Expert Group. Selain kedua format tersebut, saaat ini juga sudah mulai banyak digunakan gambar dengan format PNG (.png ), yanag merupakan singkatan dari Portable Network graphics. Menggabung Gambar dan Teks
Jika kita ingin menggabungkan ataumenyisipkan gambar di dalam suatu teks atau paragraf tertentu, terdapat pilihan posisi gambar yang harus diperhatikan: Secara vertikal:
· Teks bisa berada sejajar dengan bagian atas gambar
· Teks bisa berada sejajar dengan bagian tengah gambar
· Teks bisa berada sejajar dengan bagian bawah gambar
Secara horisontal:
· Gambar bisa berada di bagian kiri teks/paragraf
· Gambar bisa berada di bagian kanan teks/paragraf
Untuk posisi gambar yang dilihat dari arah vertikal dapat ditentukan dengan mengisi nilai TOP, MIDDLE, atau BOTTOM ke dalam atribut ALIGN yang terdapat pada tag <img>.
Contoh hasil dokumen HTML di Web Browser seperti gambar berikut :
Adapun untuk posisi gambar yang dilihat dari arah horisontal ditentukribut an dengan mengisi nilai LEFT dan RIGHT kedalam ALIGN pada tag <img>. Dengan mengisi atribut tersebut dengan nilai LEFT maka gambar akan berada di sebelah kiri teks. Sebaliknya, jika diisi RIGHT akan menyeabkan posisi gambar akan berada di sebelah kanan teks.
Format tampilan file audio
Kebanyakan file audio diputar melalui sebuah plug-in, misalnya seperti flash. Namun, browser yang berbeda mungkin memiliki berbagai plug-in. HTML5 mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan file audio pada halaman web: elemen <audio> </audio>.
Untuk memasukkan suara pada html bisa menggunakan tag <audio>. Format suara yang telah didukung hingga saat ini adalah MP3, Ogg dan WAP. File-file Audio yang didukung HTML5 adalah MP3,WAV, dan OGG. Tidak semua tipe file audio tersebut didukung oleh browser.
· OGG merupakan format audio yang didukung oleh Mozilla firefox, opera, dan google chrome.
· MP3 merupakan format audio yang didukung oleh Google Chrome dan safari.
· WAV merupakan format audio yang didukung oleh Mozilla Firefox dan Opera.
MIME untuk format audio
MIME (Multipurpose Internet Mail Extension) digunakan untuk mekanisme untuk mengirim berbagai informasi seperti text, aplikasi, gambar, suara, video, dan lain sebagainya agar browser tidak salah menterjemahkan konten yg diterima. Tidak hanya pada web, email juga menggunakan MIME. Berikut adalah tipe mime untuk format audio.
Atribut yang digunakan pada tag <audio> </audio> dapat juga menggunakan atribut autoplay, loop dan controls. Detail atribut pada audio adalah sebagai berikut :
Plug-in audio
Plug-in merupakan sebuah program komputer kecil yang memperluas fungsi standar dari sebuah browser. Plug-in dapat ditambahkan ke halaman HTML menggunakan tag <object> atau tag <embed>.
Tag <embed>
Tag <embed> diartikan sebagai sebuah wadah untuk konten eksternal (Non-HTML).
Format tampilan file Video
Untuk menampilkan video pada halaman web dapat ditangani secara langsung oleh HTML5. Tag yang digunakan untuk menampilkan video adalah <video> </video>. Namun tidak semua format videonya dapat ditampilkan di web. Sementara ini, hanya beberapa format video yang bisa diproses, di antaranya adalah WebM ,OGG , MP4.
MIME untuk format Video
MIME (Multipurpose Internet Mail Extension) digunakan untuk mekanisme untuk mengirim berbagai informasi seperti text, aplikasi, gambar, suara, video, dan lain sebagainya agar browser tidak salah menterjemahkan konten yg diterima. Tidak hanya pada web, email juga menggunakan MIME. Berikut adalah tipe mime untuk format video :
Tag <video> memiliki beberapa atribut, tidak hanya width dan height saja. Kontrol atribut menambahkan kontrol video, seperti play, pause, dan volume. Berikut ini adalah atribut – atribut yang digunakan pada tag <video> :
Gambar dengan map
Gambar dengan map memungkinkan untuk memasang beberapa link dalam satu gambar. Hal tersebut memudahkan kita dalam memanggil sebuah halaman web dengan hanya menempatkan sekelompok gambar menjadi satu gambar. Untuk membuat image map, harus ditambahkan atribut USEMAP pada tag image.
<IMG SRC = ”directori gambar / nama gambar” usemap="#planetmap">
Tampilan gambar dengan map merupakan suatu area pada gambar /image yang dapat diberi hyperlink area yang biasanya disebut ”hotspots”. Koordinatnya gambar ditentukan menggunakan bidang geometri seperti rectangle, polygon dan lain sebagainya. Map sendiri dapat diartikan sebagai peta. Untuk membuat image map digunakan tag <map> dan <area>.
Perintah <map> dapat didukung oleh pelbagai browser, diantaranya internet explorer, mozilla firefox, opera, google chrome maupun safari.
Tag <map> digunakan untuk mendefinisikan sebuah tampilan gambar map pada sisi client-side. Sebuah gambar map adalah gambar merupakan area yang dapat diklik. Nama dari gambar yang dibutuhkan pada penulisan atribut pada tag <map>.Hal ini dikaitkan dengan <img> usemap atribut dan menciptakan hubungan antara gambar dan map nya. Bagian dari tag <map> berisi sejumlah elemen <area>, yang mendefinisikan suatu lokasi/daerah saat diklik di gambar map dapat menghubungkan ke gambar lainnya yang sudah ditentukan.
Format penulisan gambar map
Penulisan skript secara umum adalah sebagai berikut :
<map name =”nama map”>
<area shape = ”type” coords=”value” href=”link”>
</map>
Keterangan: - Nama map è nama dari map yang nantinya akan dipanggil oleh <image usemap> Area shape è jenis shape yang digunakan untuk menggambarkan area dari gambar map.
Adapun jenis shape map yan dapat digunakan adalah:
Aturan untuk menuliskan nilai untuk menentukan koordinat pada image yang berguna sebagai area hyperlink dapat dilihat pada daftar tabel di bawah ini
Berikut adalah contoh penulisan kode program untuk menampilkan gambar map, dimana tag<area> menggunakan atribut shape
<html>
<body>
<p>Klik gambar matahari atau salah satu planet yang terlihat lebih detail</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>
Pada kode program untuk menampilkan gambar dengan map
Bila kode program diatas dijalankan maka pada browser akan muncul gambar seperti dibawah ini. Gambar akan menampilkan gambar matahari beserta 2 planet disekitarnya. Bila diklik misalnya planet A maka akan muncul gambar D yang merupakan gambar detail planet A.
Selanjutnya bila ada yang ingin anda tanyakan atau kritik saran,anda dapat mengisi kolom komentar di bawah.
Sekian Terimakasih , Semoga Membantu Bagi yang Membutuhkan
0 komentar:
Posting Komentar