PENGGABUNGAN IMAGE,

ANIMASI, AUDIO, VIDEO

DALAM SAJIAN MULTIMEDIA
INTERAKTIF BERBASIS
HALAMAN WEBSITE

DESAIN MEDIA INTERAKTIF

RENI NURHIDAYAH, S.KOM
 WEBSITE
• Website dapat diartikan sebagai kumpulan halaman yang berisi
informasi data digital baik berupa teks, gambar, animasi, suara dan video
atau gabungan dari semuanya yang disediakan melalui jalur koneksi
internet sehingga dapat diakses dan dilihat oleh semua orang di seluruh
dunia (Abdulloh Roni)

2
Web Statis Web Dinamis
Yang bisa dilakukan pengguna hanya
Pengguna bisa mengupdate informasi
sekedar melihat – lihat saja, tidak bisa
website langsung dari websitenya.
mengisi data.
Informasi jarang diupdate dan kalau pun Informasi dapat diubah melalui CMS yang
ingin diupdate tidak bisa langsung sudah ada, biasanya untuk mengubah
diupdate, melainkan harus merubah informasi bisa dilakukan di halaman
scriptnya. admin.
Web Dinamis digunakan secara
Biasanya digunakan untuk website
fungsionalnya, misalnya jejaring sosial,
company profile, yang hanya
toko online, web blog, dan lain
menampilkan informasi penting saja.
sebagainya.
Web dinamis menggunakan database,
Web Statis tidak menggunakan database,
database inilah yang digunakan untuk
semua informasi sudah ada dalam sebuah
menampung banyaknya data, sehingga
file dan file itulah yang ditampilkan di
website tinggal mengambil data dari
halaman web.
database.
Waktu pengerjaannya memakan waktu
Waktu pengerjaan memakan waktu yang
yang singkat, kecuali ingin membuat
lama.
banyak halaman.
CONTOH MEDIA PEMBELAJARAN INTERAKTIF
BERBASIS WEBSITE/ SITUS ONLINE
• Zenius education
• Kelas kita
• Wolfram alpha
• Amazon Web Services (AWS)
• Indonesia x
 • Menyisipkan media dengan cara
embed (penyematan)
Merupakan cara yang dilakukan untuk menyematkan media
dari pihak ketiga misalnya youtube, cara ini diawali dengan
tag <iframe>. Untuk menggunakan cara ini tentu harus

MEYISIPKAN mempersiapkan media di pihak ketidag terlebih dahulu dan

code penyematannya berbeda-beda.

MEDIA
• Menyisipkan media dengan source
Cara ini dilakukan dengan cara memanggil link file yang
bersangkutan kemudian ditambahkan tag HTML yang sesuai
misalnya
Catatan: dalam memanggil media di HTML perlu
memasukakan jenis file/ekstensinya juga misalnya .png,
.jpg, .mp4 dll

5
PENGGABUNGAN MEDIA DALAM SAJIAN MULTIMEDIA
INTERAKTIF BERBASIS HALAMAN WEBSITE

• Grafik atau gambar 01 02 • Audio

• Animasi 03 04 • Video

6
MENYISIPKAN
GAMBAR
• Grafik atau gambar merupakan sarana
pembetukan informasi yang lebih mudah untuk
dipahami. Untuk menampilkan gambar pada
halaman dapat digunakan tag <img>. Format file
yang dapat didukung oleh tag <img> bermacam-
macam mulai BMP, JPG, GIF, TGA dan lain-lain.Tag
img memiliki beberapa atribut yaitu:

• ‐ src : letak file gambar yang akan ditampilkan

• ‐ border: tebal bingkai gambar
• ‐ height : menentukan tinggi image/gambar
• ‐ width : menentukan lebar image/gambar
• ‐ alt : memberikan penamaan kepada gambar
yang tidak akan ditampilkan di halaman website

7
MENYISIPKAN
VIDEO
Video adalah gambar–gambar yang
saling berurutan sehingga
menimbulkan efek gerak. Pembuatan
video dalam tampilan multimedia
bertujuan untuk membuat tampilan
yang dihasilkan lebih menarik.
MENYISIPKAN
AUDIO
Audio atau suara di dalam multimedia biasanya
berupa suara musik, suara dari voice record dan
efek-efek suara lainnya

9
 Atribut Nilai Fungsi

autoplay – Menentukan bahwa audio akan diputar langsung ketika halaman sudah diload secara otomatis.

Menunjukkan bahwa controls audio (setiap browser memiliki tampilan controls audio yang berbeda
controls – – beda) ditampilkan seperti player yang biasanya berisi perintah seperti tombol play/pause, slider,
volume dan lain sebagainya.

Digunakan untuk mematikan atau membisukan suara yang berarti audio akan diputar tanpa suara
muted –
pada awal inisial.

loop – Digunakan untuk memutar ulang audio yang sudah selesai diputar.

Menunjukkan lokasi penyimpanan file audio atau URL yang menunjukkan keberadaan audio file
src URL lokasi file audio
tersebut.

preload auto, none, metada Menunjukkan seberapa penting audio harus diload ketika halaman web dimuat.
 Atribut Nilai Fungsi
Menunjukkan lokasi penyimpanan
file audio atau URL yang
src URL lokasi file audio
menunjukkan keberadaan audio
file tersebut.
Menentukan MIME (Multipurpose
type MIME_type Internet Mail Extension) type dari
audio tersebut
MEMBUAT STRUKTUR
HALAMAN WEBSITE
<html>
<head>
<title>ini judul</title>
</head>
<body>
<img src =“gambar.png”>
<audio src=“lagu.mp3” type=“audio/mp3” controls></audio>
<video src=“video.mp3” type=“video/mp4” controls></video>
</body>
</html>
Reni.nurhidayah96@gmail.com