Dokumen tersebut membahas tentang penggunaan multimedia dalam HTML, termasuk cara menambahkan gambar, suara, video, serta elemen figure dan caption untuk memberikan keterangan pada konten multimedia.
Mata Pelajaran : Pemrograman Web
Kelas : X
Jurusan : Rekayasa Perangkat Lunak
Tahun Ajaran : 2016/2017
Kelompok 4
Ketua :
Ashabul Kahfi Ash Shiddiq (168006)
Anggota :
- Muhammad Andika (168016)
- Nur Azisa Syamsuddin (168020)
- Nur Fitri Rahmadani (168021)
Sebelum kita membahas lebih dalam bagaimana cara membuat website yang aman,
ada beberapa komponen suatu website yang perlu kalian ketahui, beberapa hal yang
perlu diperhatikan agar website kalian dapat dikategorikan sebagai website yang baik,
yaitu :
Web Design (UI & UX)
User interface dan User Experience atau sering disebut dengan UI & UX adalah
bagian dari “Web Design” dimana website yang akan di rancang harus mempermudah
seorang pengunjung website tersebut agar dapat menjawab permasalahan yang
mereka cari.
PEMANFAATAN MEDIA KIT GENETIKA SEBAGAI UPAYA MENINGKATKAN HASIL BELAJAR BIOL...SMK Negeri 6 Malang
Pembelajaran biologi di SMPN 1 Jombang belum berjalan maksimal. Oleh karena itu, peneliti menggunakan media untuk memudahkan proses belajar khususnya materi pewarisan sifat. Media yang dipilih adalah kit genetika. Instrumen yang digunakan dalam penelitian ini berupa catatan pengamatan aktivitas dan data hasil tes. Data tersebut dianalisis dengan teknik mean score. Hasil analisis aktivitas memperlihatkan antusias saat belajar. Pada siklus I diperoleh 84,38% dan siklus II 96,88%. Dengan kata lain, terdapat kenaikan sebesar 12,5%. Hasil rata-rata evaluasi siklus I sebesar 71,77 dan siklus II 82,74. Hasil tersebut meningkat 10,97, sedangkan ketuntasan belajar pada siklus I sebesar 71,875% (23 siswa) dan siklus II 93,75% (30 siswa). Hasil itu menunjukkan kenaikan 21,88%. Hasil tersebut menunjukkan bahwa penggunaan kit genetika dan belajar berkelompok dapat meningkatkan hasil belajar dan menumbuhkan motivasi.
PENERAPAN MODEL PEMBELAJARAN LANGSUNG (DIRECT INSTRUCTION) DENGAN PENDEKATAN ...SMK Negeri 6 Malang
Pembelajaran Fisika di kelas VIII E SMP Islam Ma’arif 02 Malang yang selama ini dilakukan dengan metode ceramah bervariasi menyebabkan motivasi dan prestasi belajar rendah. Oleh karena itu, peneliti menerapkan model pengajaran langsung dengan pendekatan kontekstual. Penelitian ini dilakukan pada semester genap tahun ajaran 2017/2018. Subjek dalam penelitian ini berjumlah 39 orang siswa di kelas VIII E. Hasil penelitian menunjukkan bahwa motivasi belajar siswa meningkat saat penerapan model pembelajaran langsung dengan pendekatan kontekstual, pada siklus I yaitu 66,59% dan pada siklus II yaitu 75,78%. Prestasi belajar siswa sebelum penerapan model pembelajaran langsung dengan pendekatan kontekstual adalah 60,8, pada siklus I adalah 62,26, dan pada siklus II adalah 76,07. Dengan demkian dapat disimpulkan bahwa penerapan model pembelajaran langsung dengan pendekatan kontekstual dapat meningkatkan motivasi dan prestasi belajar.
Mata Pelajaran : Pemrograman Web
Kelas : X
Jurusan : Rekayasa Perangkat Lunak
Tahun Ajaran : 2016/2017
Kelompok 4
Ketua :
Ashabul Kahfi Ash Shiddiq (168006)
Anggota :
- Muhammad Andika (168016)
- Nur Azisa Syamsuddin (168020)
- Nur Fitri Rahmadani (168021)
Sebelum kita membahas lebih dalam bagaimana cara membuat website yang aman,
ada beberapa komponen suatu website yang perlu kalian ketahui, beberapa hal yang
perlu diperhatikan agar website kalian dapat dikategorikan sebagai website yang baik,
yaitu :
Web Design (UI & UX)
User interface dan User Experience atau sering disebut dengan UI & UX adalah
bagian dari “Web Design” dimana website yang akan di rancang harus mempermudah
seorang pengunjung website tersebut agar dapat menjawab permasalahan yang
mereka cari.
PEMANFAATAN MEDIA KIT GENETIKA SEBAGAI UPAYA MENINGKATKAN HASIL BELAJAR BIOL...SMK Negeri 6 Malang
Pembelajaran biologi di SMPN 1 Jombang belum berjalan maksimal. Oleh karena itu, peneliti menggunakan media untuk memudahkan proses belajar khususnya materi pewarisan sifat. Media yang dipilih adalah kit genetika. Instrumen yang digunakan dalam penelitian ini berupa catatan pengamatan aktivitas dan data hasil tes. Data tersebut dianalisis dengan teknik mean score. Hasil analisis aktivitas memperlihatkan antusias saat belajar. Pada siklus I diperoleh 84,38% dan siklus II 96,88%. Dengan kata lain, terdapat kenaikan sebesar 12,5%. Hasil rata-rata evaluasi siklus I sebesar 71,77 dan siklus II 82,74. Hasil tersebut meningkat 10,97, sedangkan ketuntasan belajar pada siklus I sebesar 71,875% (23 siswa) dan siklus II 93,75% (30 siswa). Hasil itu menunjukkan kenaikan 21,88%. Hasil tersebut menunjukkan bahwa penggunaan kit genetika dan belajar berkelompok dapat meningkatkan hasil belajar dan menumbuhkan motivasi.
PENERAPAN MODEL PEMBELAJARAN LANGSUNG (DIRECT INSTRUCTION) DENGAN PENDEKATAN ...SMK Negeri 6 Malang
Pembelajaran Fisika di kelas VIII E SMP Islam Ma’arif 02 Malang yang selama ini dilakukan dengan metode ceramah bervariasi menyebabkan motivasi dan prestasi belajar rendah. Oleh karena itu, peneliti menerapkan model pengajaran langsung dengan pendekatan kontekstual. Penelitian ini dilakukan pada semester genap tahun ajaran 2017/2018. Subjek dalam penelitian ini berjumlah 39 orang siswa di kelas VIII E. Hasil penelitian menunjukkan bahwa motivasi belajar siswa meningkat saat penerapan model pembelajaran langsung dengan pendekatan kontekstual, pada siklus I yaitu 66,59% dan pada siklus II yaitu 75,78%. Prestasi belajar siswa sebelum penerapan model pembelajaran langsung dengan pendekatan kontekstual adalah 60,8, pada siklus I adalah 62,26, dan pada siklus II adalah 76,07. Dengan demkian dapat disimpulkan bahwa penerapan model pembelajaran langsung dengan pendekatan kontekstual dapat meningkatkan motivasi dan prestasi belajar.
PROBLEMATIKA PENDIDIKAN KEJURUAN DALAM REVOLUSI INDUSTRI 4.0SMK Negeri 6 Malang
Penelitian ini bertujuan untuk mengkaji problematika yang terjadi dalam program link and match yang berkaitan dengan tuntutan revolusi industri 4.0 dan masyarakat ekonomi ASEAN. Akan tetapi, masih ada masalah yang terkait dengan pengangguran, masalah pendidikan (kurikulum, desain silabus, dan proses pembelajaran) serta perubahan zaman yang cepat. Hal tersebut dapat diminalkan dengan penyelenggaraan SMK 4 tahun sehingga dapat memenuhi KKNI level 3 dan meningkatkan kesejahteraan lulusan SMK. Selain itu, perubahan hubungan dengan DU/DI disarankan untuk diwujudkan seperti Voolzeit dan Teilzeit di Jerman, karena sepertinya model hubungan ini lebih memberikan keuntungan bagi kedua belah pihak.
Di dalam kehidupan kita sehari-hari, sadar atau tidak sadar, kita seringkali menemukan cara-cara yang dilakukan individu untuk meregulasi emosinya, misalnya dengan expressive writing. Expressive writing adalah menulis secara ekpresif, berusaha menumpahkan segala emosi yang dirasakan ke dalam tulisan. Kita akan merasa lebih lega, karena emosi-emosi khususnya emosi negatif yang mengganggu, sudah terlampiaskan ke dalam tulisan-tulisan tadi. Selain expressive writing, ada cara lain yaitu emotional eating. Sering kita temukan seseorang yang sedang kacau emosinya, diliputi oleh emosi-emosi negatif, berusaha menyalurkan emosi itu dengan makan. Terjadi peningkatan frekuensi serta porsi makan dan selalu berusaha mencari makanan yang dia sukai. Inilah emotional eating. Keduanya termasuk dalam strategi “emotion-focused”, karena individu hanya terpaku dengan usaha untuk memperbaiki keadaan emosi negatif yang ia rasakan, tanpa berusaha secara langsung memperbaiki masalah yang terjadi.
PENINGKATAN KEMAMPUAN MENGHAFAL DAN MEMAHAMI AYAT-AYAT PILIHAN DALAM AL-QUR’A...SMK Negeri 6 Malang
Penelitian ini merupakan penelitian tindakan kelas yang bertujuan untuk meningkatkan kemampuan menghafal dan memahami ayat-ayat pilihan dalam Al-Qur’an melalui teknik berpasangan antar teman secara terbimbing, dalam proses kegiatan belajar mengajar pada Mata Pelajaran Pendidikan Agama Islam dan Budi Pekerti. Subyek penelitian ini adalah peserta didik kelas XII RPL 3 SMK Negeri 6 Malang. Penelitian dilaksanakan dalam dua siklus yang masing-masing terdiri dari kegiatan perencanaan, pelaksanaan, observasi, dan refleksi. Data hasil belajar peserta didik dikumpulkan menggunakan teknik tes lisan dan tulisan, serta pengamatan selama proses belajar berlangsung. Hasil penelitian menunjukkan bahwa ada peningkatan menghafal dan memahami ayat-ayat pilihan dalam Al-Qur’an pada peserta didik setelah mengikuti pembelajaran melalui teknik berpasangan antar teman secara terbimbing.
PENGGUNAAN MEDIA WAYANG PAHLAWAN NASIONAL UNTUK MENINGKATKAN HASIL BELAJAR BA...SMK Negeri 6 Malang
Wawancara melalui angket yang diberikan pada peserta didik menunjukkan bahwa pembelajaran Bahasa Jawa dengan materi Kepahlawanan belum maksimal. Akibatnya, peserta didik beranggapan bahwa Bahasa Jawa susah dipahami dan tentu saja berdampak pada menurunnya hasil belajar. Berdasarkan fakta tersebut, penelitian tindakan kelas dilaksanakan guna meningkatkan hasil belajar melalui penggunaan media wayang pahlawan nasional. Instrumen yang digunakan adalah penyebaran angket observasi dan tes tulis. Hasil penelitian menunjukkan bahwa penggunaan media wayang pahlawan nasional dapat menumbuhkan motivasi dan mampu meningkatkan hasil belajar peserta didik. Hal ini tampak dari adanya peningkatan ketuntasan hasil belajar sebesar 7,81% dan rerata hasil belajar siswa sebesar 14,37. Sebanyak 25 peserta didik tuntas pada siklus I dengan rerata 76,25 sedangkan pada siklus II sebanyak 29 peserta didik tuntas dengan rerata 84,06.
PENINGKATAN KOMPETENSI MENGGAMBAR TEKNIK SISWA KELAS X TEKNIK INSTALASI TENAG...SMK Negeri 6 Malang
Penelitian ini bertujuan untuk meningkatkan kompetensi menggambar teknik siswa melalui model pembelajaran project based learning. Kompetensi dalam penelitian ini terdiri atas aspek afektif, kognitif, dan psikomotorik. Penelitian tindakan kelas ini dilaksanakan secara bersiklus di SMK Negeri 6 Malang dengan subjek penelitian adalah siswa Kelas X Teknik Instalasi Tenaga Listrik. Setiap siklus dilaksanakan dalam tiga kali pertemuan. Data dikumpulkan dengan menggunakan lembar observasi aktivitas siswa, instrumen pretest dan posttest, lembar kerja siswa, dan dokumen nilai siswa tahun sebelumnya. Setelah terkumpul, data-data tersebut dianalisis dengan metode deskriptif kuantitatif. Kriteria keberhasilan pada masing-masing indikator pengamatan aktivitas siswa adalah 80% siswa dinyatakan lulus dan nilai rata-rata memperoleh minimal 7,5. Hasil penelitian ini menunjukkan bahwa penerapan model pembelajaran project based learning dapat meningkatkan kemampuan aspek afektif, kognitif, dan psikomotorik siswa.
PENGARUH KEPEMIMPINAN DAN DIKLAT SERTA KELENGKAPAN SARANA PRAKTIK DI SMK T...SMK Negeri 6 Malang
Tujuan penelitian ini untuk menganalisis pengaruh kepemimpinan (X1), diklat (X2) dan kelengkapan sarana praktik (X3) terhadap kinerja guru (Y), baik pengaruh secara simultan maupun parsial dan mengetahui variabel berpengaruh terhadap kinerja guru. Penelitian ini termasuk explanatory research dengan populasi seluruh guru di SMK Negeri 6 Kota Malang, sejumlah 162 orang dengan jumlah sampel sebanyak 78 responden. Adapun teknik analisa data adalah dengan regresi linier berganda untuk mengetahui korelasi antara kepemimpinan, diklat dan kelengkapan sarana praktik terhadap kinerja guru. Hasil penelitian menunjukkan : 1). Terdapat pengaruh secara parsial antara kepemimpinan, diklat dan kelengkapan sarana praktik terhadap kinerja guru. 2). Variabel yang berpengaruh secara dominan terhadap kinerja guru adalah kepemimpinan, meliputi kemampuan mencipta, kemampuan membuat perencanaan, kemampuan mengorganisasi, kemampuan berkomunikasi, kemampuan memberi motivasi dan kemampuan melakukan evaluasi.
ppt profesionalisasi pendidikan Pai 9.pdfNur afiyah
Pembelajaran landasan pendidikan yang membahas tentang profesionalisasi pendidikan. Semoga dengan adanya materi ini dapat memudahkan kita untuk memahami dengan baik serta menambah pengetahuan kita tentang profesionalisasi pendidikan.
Sebuah buku foto yang berjudul Lensa Kampung Ondel-Ondelferrydmn1999
Indonesia, negara kepulauan yang kaya akan keragaman budaya, suku, dan tradisi, memiliki Jakarta sebagai pusat kebudayaan yang dinamis dan unik. Salah satu kesenian tradisional yang ikonik dan identik dengan Jakarta adalah ondel-ondel, boneka raksasa yang biasanya tampil berpasangan, terdiri dari laki-laki dan perempuan. Ondel-ondel awalnya dianggap sebagai simbol budaya sakral dan memainkan peran penting dalam ritual budaya masyarakat Betawi untuk menolak bala atau nasib buruk. Namun, seiring dengan bergulirnya waktu dan perubahan zaman, makna sakral ondel-ondel perlahan memudar dan berubah menjadi sesuatu yang kurang bernilai. Kini, ondel-ondel lebih sering digunakan sebagai hiasan atau sebagai sarana untuk mencari penghasilan. Buku foto Lensa Kampung Ondel-Ondel berfokus pada Keluarga Mulyadi, yang menghadapi tantangan untuk menjaga tradisi pembuatan ondel-ondel warisan leluhur di tengah keterbatasan ekonomi yang ada. Melalui foto cerita, foto feature dan foto jurnalistik buku ini menggambarkan usaha Keluarga Mulyadi untuk menjaga tradisi pembuatan ondel-ondel sambil menghadapi dilema dalam mempertahankan makna budaya di tengah perubahan makna dan keterbatasan ekonomi keluarganya. Buku foto ini dapat menggambarkan tentang bagaimana keluarga tersebut berjuang untuk menjaga warisan budaya mereka di tengah arus modernisasi.
Form B1 Rubrik Observasi Presentasi Visi Misi -1.docx
webdesign dasar : 12 multimedia
1. Multimedia
Ketika sedang mencari atau mempelajari informasi, kerap kali kita akan menemukan informasi
yang ada disajikan dalam bentuk teks. Sering juga, untuk melengkapi teks yang ada, terdapat
gambar yang berguna dalam membantu kita mengilustrasikan hal-hal yang sulit dibayangkan.
Untuk media digital, kita bahkan dapat menambahkan suara dan video ke dalam teks untuk
menambahkan informasi kepada pengguna.
HTML sendiri menyediakan fitur untuk memberikan gambar, suara, maupun video untuk
digunakan dalam dunia web. Bagaimana caranya? Mari kita lihat!
Menambahkan Gambar
Untuk menambahkan gambar pada HTML, kita dapat menggunakan elemen img. Elemen img
sendiri merupakan elemen yang bersifat self-contained, yaitu tidak memiliki tag penutup.
Elemen img juga harus memiliki atribut src, yang dapat diisikan dengan dua cara, yaitu tempat
dari gambar disimpan relatif terhadap file HTML dan URL dari gambar tersebut.
Berikut adalah contoh penggunaan tag img:
<img src="images/sintel.png" alt="Sintel merupakan sebuah film singkat.">
<img src="http://i.imgur.com/cYWveEa.jpg" alt="Contoh Pengunaan URL untuk
src.">
Atribut alt, yang bersifat opsional, berguna untuk memberikan keterangan gambar secara
semantik. Keterangan ini juga akan ditampilkan ketika mouse diletakkan di atas gambar, dan
ketika gambar tidak dapat ditemukan.
Catatan: Dukungan format gambar yang ada pada HTML diserahkan kepada masing-masing
pembuat browser. Begitupun, sangat disarankan untuk menggunakan format gambar yang
didukung oleh hampir semua perangkat secara umum, seperti png, jpg, atau gif.
Layaknya elemen-elemen lain pada HTML, kita dapat mengubah tampilan elemen img dengan
menggunakan CSS.
Mengubah Ukuran Gambar
Perubahan ukuran gambar dapat dilakukan dengan menggunakan properti width dan height,
seperti pada elemen-elemen lainnya. Yang perlu diperhatikan dalam perubahan ukuran ialah
bagaimana sebuah gambar dapat menyesuaikan ukuran yang tepat ketika kita hanya memberikan
salah satu dimensi. Misalnya, sebuah gambar dengan ukuran asli 800x600 akan secara otomatis
berubah menjadi 1024x768 meskipun kita hanya mengisikan nilai width saja. Browser secara
otomatis akan menghitung rasio panjang dan lebar gambar lalu menyesuaikan ukuran gambar
dengan nilai yang kita berikan.
2. Tetapi perlu diingat bahwa pengisian nilai width dan height dengan rasio panjang-lebar yang
tidak tepat tentunya akan menyebabkan gambar menjadi “tertarik”. Untuk lebih jelasnya, coba
jalankan kode berikut pada gambar yang diberi nama gambar.jpg:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Perubahan Ukuran Gambar</title>
<style type="text/css">
#set-width {
width: 360px;
}
#set-height {
height: 600px;
}
#set-width-height {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<img src="images/gambar.jpg"
<img src="images/gambar.jpg"
<img src="images/gambar.jpg"
<img src="images/gambar.jpg"
</body>
</html>
id="standar"><br>
id="set-width"><br>
id="set-height"><br>
id="set-width-height">
kemudian jalankan dan lihat hasilnya.
Hal lain yang perlu dicatat yaitu bahwa meskipun perubahan ukuran gambar dapat dilakukan
secara otomatis oleh browser, sebaiknya perubahan dilakukan dengan sangat hati-hati. Ketika
memperkecil sebuah gambar yang berukuran 1024x768 menjadi 320x240 misalnya, meskipun
pengguna melihat gambar yang kecil, gambar yang harus diunduh oleh browser tetaplah
berukuran 1024x768. Resolusi gambar tentunya mempengaruhi ukuran, sehingga pengguna akan
mengambil gambar yang tidak diperlukan, dan menyia-nyiakan bandwidth. Jadi, selalu pastikan
gambar yang diberikan ke pengguna merupakan gambar yang optimal. Perubahan ukuran gambar
umumnya dilakukan untuk memastikan konten yang diisikan oleh pengguna tidak terlalu besar
atau kecil, sehingga mengganggu keseluruhan alur dokumen.
Perubahan Posisi Gambar
Seperti yang dapat dilihat pada kode sebelumnya, elemen img merupakan inline level element.
Menambahkan gambar pada tengah-tengah teks akan menyebabkan gambar tersebut diselipkan
ditengah-tengah teks, mengacaukan alur teks, seperti pada kode berikut:
3. <p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute
<img src="http://i.imgur.com/r03c371.jpg">
irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
untuk mendapatkan hasil sebagai berikut:
Demonstrasi Properti Inline pada Gambar | Demo
Penampilan gambar seperti ini tentunya sangat tidak optimal. Untuk menanggulanginya, kita
dapat membuat gambar menjadi block level element:
img {
display: block;
}
ataupun dengan memberikan properti float kepada gambar, seperti berikut:
img {
4. background: #E8EAE9;
border: 1px solid #C6C9CC;
float: left;
margin: 10px;
padding: 4px;
}
contoh pengunaannya yaitu sebagai berikut:
Gambar dengan Float | Demo
Menambahkan Suara (Audio)
Selain menampilkan gambar, HTML juga memiliki fitur untuk menambahkan pemutar suara
(audio) pada dokumen web. Elemen audio digunakan untuk tujuan ini, dan sama seperti elemen
5. img,
kita harus memberikan nilai tempat menyimpan file audio melalui atribut src. Tetapi
berbeda dengan img, elemen audio memiliki tag penutup:
<audio src="audios/piano.mp3"></audio>
Secara normal, ketika kita memasukkan elemen audio seperti pada kode di atas, kita tidak akan
dapat melihat elemen audio, dan bahkan file audio yang dimasukkan tidak akan dapat dimainkan.
Untuk menampilkan elemen audio, kita harus menambahkan atribut controls pada elemen:
<audio src="audios/piano.mp3" controls></audio>
dan jika kita ingin memastikan audio dapat dimainkan secara otomatis ketika halaman selesai
diunduh oleh browser, kita dapat menggunakan atribut autoplay:
<audio src="audios/piano.mp3" controls autoplay></audio>
Tentunya selain ketiga atribut di atas kita juga memiliki atribut lainnya, yaitu loop dan preload.
Seperti namanya, atribut loop digunakan untuk memastikan audio dapat diputar kembali secara
otomatis ketika sudah selesai dimainkan. Atribut preload sendiri berfungsi untuk mengatur
seberapa banyak data yang ingin dikirimkan ke browser ketika pertama kali mengunduh audio.
Atribut preload dapat diisikan dengan tiga nilai, yaitu none, auto, dan metadata. Seperti
namanya, none berarti tidak ada data yang diunduh terlebih dahulu, auto melakukan unduh
terhadap informasi-informasi mengenai file audio (durasi, nama seniman, dst), dan metadata
hanya mengunduh informasi tentang file audio (tanpa mengunduh audio itu sendiri).
Elemen Audio standar pada Chrome
Sumber Suara Tambahan
Ketika menambahkan audio pada dokumen web, terdapat beberapa hal yang harus kita
perhatikan untuk memastikan bahwa audio dapat dimainkan dengan benar oleh pengguna. Hal
paling utama yang perlu diperhatikan ialah apakah browser pengguna dapat menjalankan file
audio yang diberikan tanpa masalah. Beberapa browser open source seperti Firefox menolak file
audio tertutup seperti WMV dan hanya dapat menjalankan format OGG. Untuk menanggulangi
hal ini, kita dapat memberikan beberapa jenis format file sekaligus dan membiarkan browser
memilih format yang dapat dijalankannya.
Memberikan beberapa format file dapat dilakukan dengan menambahkan elemen source di
dalam elemen audio, seperti berikut:
<audio controls>
<source src="audios/piano.ogg" type="audio/ogg">
<source src="audios/piano.mp3" type="audio/mpeg">
</audio>
6. Nilai pada atribut type harus diisikan dengan kode media Internet (MIME), sesuai dengan
format yang diinginkan. Baca di sini untuk melihat daftar MIME untuk format-format umum
yang dijumpai pada Internet.
Tambahan lagi, selain memberikan sumber suara dalam bentuk file audio, kita juga dapat
menambahkan sumber berupa flash player untuk browser yang belum mendukung elemen
audio. Penambahan elemen flash player dilakukan layaknya menambahkan elemen flash standar
pada browser, tetapi tidak akan dibahas lebih jauh pada artikel ini karena penambahan tersebut
akan memerlukan perubahan pada sisi server juga. Singkatnya, penambahan elemen flash dapat
dilakukan kira-kira seperti berikut:
<audio controls>
<source src="audios/piano.ogg" type="audio/ogg">
<source src="audios/piano.mp3" type="audio/mpeg">
<object type="application/x-shockwave-flash"
data="player.swf?audio=piano.mp3">
<paran name="movie" value="player.swf?audio=piano.mp3">
<p>Tidak terdapat dukungan browser untuk flash.</p>
</object>
</audio>
Kode di atas merupakan kode yang paling aman untuk memastikan audio dapat dijalankan oleh
pengguna, karena browser modern yang mendukung elemenn audio umumnya telah mendukung
format OGG, dan untuk browser yang tidak mendukung, norma yang ada ialah menggunakan
flash player untuk menyajikan audio / video.
Menambahkan Video
Penambahan video pada dokumen HTML dilakukan dengan elemen video, yang sangat mirip
dengan elemen audio. Atribut-atribut yang dapat digunakan pada elemen audio juga digunakan
pada elemen video, sehingga perbedaan utama dari kedua elemen ini terdapat pada nama elemen
dan dukungan format. Karenanya, setelah mengetahui tentang tag audio, kita dapat dengan
mudah menambahkan video seperti berikut:
<video controls autoplay>
<source src="videos/trailer.ogv" type="video/ogg">
<source src="videos/trailer.mp4" type="video/mp4">
</video>
dan sama seperti pada kasus audio, umumnya browser telah mendukung format OGV, sehingga
penambahan kedua format standar (OGV dan MP4) umumnya telah cukup untuk mendukung
seluruh browser modern. Jika ingin menambahkan dukungan video flash, kita dapat
menambahkannya dengan cara yang sama dengan pada elemen audio:
<video controls autoplay>
<source src="videos/trailer.ogv" type="video/ogg">
<source src="videos/trailer.mp4" type="video/mp4">
7. <object type="application/x-shockwave-flash"
data="player.swf?video=trailer.mp4">
<param name="movie" value="player.swf?video=trailer.mp4">
<p>Tidak ada dukungan flash</p>
</object>
</video>
dan kita akan dapat melihat elemen audio langsung pada browser:
Elemen Video standar pada Chrome
Hal lain yang membedakan elemen video dengan audio ialah atribut poster. Atribut poster
berguna untuk memberikan gambar awal pada video, sebelum video dijalankan oleh pengguna.
Atribut poster biasanya diisikan dengan gambar yang relevan dengan video, dan menerima nilai
berupa URL ke sebuah gambar, dengan format yan didukung oleh browser pada umumnya.
Berikut adalah contoh penggunaan atribut poster:
<video controls autoplay poster="images/trailer-poster.jpg">
<source src="videos/trailer.ogv" type="video/ogg">
<source src="videos/trailer.mp4" type="video/mp4">
<object type="application/x-shockwave-flash"
data="player.swf?video=trailer.mp4">
<param name="movie" value="player.swf?video=trailer.mp4">
<p>Tidak ada dukungan flash</p>
</object>
</video>
yang akan menghasilkan elemen berikut ketika pengguna pertama kali membuka halaman:
8. Elemen Video dengan Poster pada Chrome
Elemen Figure dan Caption
Pada media cetak tradisional seperti buku, majalah, atau tabloid, sebuah gambar, grafik, atau
potongan kode umumnya memiliki sebuah caption berupa keterangan dari apa yang ditampilkan
oleh elemen-elemen tersebut. HTML menyediakan elemen figure dan figcaption untuk
fasilitas-fasilitas tersebut.
Elemen figure merupakan sebuah block level element yang berfungsi sebagai pembungkus dari
media, baik berupa gambar, audio, video, ataupun media-media lainnya. Kita bahkan dapat
memasukkan beberapa media sekaligus ke dalam elemen figure. Karena hanya berperan
sebagai pembungkus dengan makna semantik (media ini relevan dengan dokumen), kita dapat
menuliskan figure layaknya block level element lainnya:
<figure>
<img src="images/gambar.jpg" alt="gambar dalam figure">
</figure>
dan kemduian, kita dapat menambahkan keterangan pada media tersebut dengan menggunakan
elemen figcaption yang harus berada di dalam elemen figure:
<figure>
<img src="images/gambar.jpg" alt="Contoh Gambar di dalam Figure">
<figcaption>
Contoh Gambar di dalam Figure
</figcaption>
</figure>
Untuk lebih jelasnya, silahkan coba demo penggunaan elemen figuredi sini.