Minggu, 04 November 2018

/

Image, ImageMap dan Multimedia

Pengantar

Selain tulisan, web dapat memuat gambar, animasi, grafik, audio, dan video. Untuk gambar, Format yang biasanya digunakan antara lain : GIF (Graphic Interchange Format), PNG (Portable Network Graphics) dan JPEG (Joint Photographic Experts Group).

Element Gambar HTML

  • Gambar didefinisikan menggunakan tag <img>.

    <img src = "url" alt = "some_text" style = "width:width;height:height;">

  • Termasuk empty element, sehingga bisa juga ditulis dengan <img/>
  • Attribut:
    • src: nama file gambar (lengkap dengan Url jika merupakan gambar eksternal, relative path jika merupakan gambar pada website yang sama).
    • alt: teks alternatif jika gambar tidak dapat ditampilkan (karena koneksi lambat atau kesalahan pada atribut src).
    • Style: dapat mengatur lebar (width), tinggi (height) gambar, mengatur peletakkan gambar ke kiri atau ke kanan (float), garis pinggir (border).
Contoh :


Tag <figure> dan <figcaption>

  • <figure> digunakan bersamaan dengan <figcaption> untuk menandai diagram, ilustrasi, atau foto.
  • <figcaption> mendefinisikan caption (judul) untuk untuk tag <figure> biasa diletakan dibawah gambar yang menjadi figure.
contoh:



Tag <picture> dan <source>

  • Tag <picture> untuk menambah fleksibilitas ketika menampilkan gambar yang dapat terdiri dari berbagai tag <source>
  • Tag <source> untuk mereferensikan berbagai sumber gambar.
contoh:

*note: srcset dan src berisi url dimana file disimpan



Hasil : 
Ketika browser di zoom
Untuk lebih jelasnya silahkan zoom gambar dibawah ini untuk melihat perubahan dengan menekan tombol Ctrl + Scroll Up

PRSCustom24

Image Map

Merupakan gambar dengan area yang dapat diklik dan menampilkan halaman lainnya.

Jenis - jenis image map :
  • Polygon

  • Rectangle


  • Circle

Contoh Image Map :

Amd Or Intel?
Source : https://www.techadvisor.co.uk/feature/pc-components/amd-vs-intel-3528212/

Video dan Audio

Tag yang digunakan :
  • Tag <video> memutar video dengan format : MP4, WebM dan Ogg.
  • Tag <audio> memutar audio dengan format : MP3, Wav dan Ogg.
  • Tag <source> mendefinisikan berbagai sumber media untuk diputar pada tag <video> dan <audio>.
Contoh :

contoh detail : 




[Lanjutkan ke Table]

Posted by 

No comments

Edit

0 komentar:

Posting Komentar

Unordered List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Popular Posts

Recent Posts