Belajar HTML Part 6 Menambahkan Multi Media
Assalamualaikum Wr. Wb
PENGERTIAN
Apa itu multimedia ? Multimedia adalah penggunaan komputer untuk menyajikan dan menggabungkan teks, suara, gambar, animasi audio dan video dengan alat bantu (tool) dan koneksi (link) sehingga pengguna dapat melakukan navigasi, berinteraksi, berkarya, dan berkomunikasi. Multimedia hadir dengan berbagai format dan hampir dapat menjadi apapun yang kita dengar atau lihat. Seperti teks, gambar, musik, suara video rekaman, film, animasi dan sebagainya.
Pada pertama kali penggunaan browser internet hanya mendukung teks saja, bahkan teks yang didukungpun sangat terbatas hanya pada satu jenis huruf saja dalam satu warna. Kemudian pada perjalanannya browser pun datang dengan dukungan pada warna, jenis huruf dan teks style, serta menambahkan dukungan untuk gambar untuk selanjutnya mendukung penambahan multimedia dan akan masih terus berkembang. Dukungan untuk suara, animasi dan video ditangani secara berbeda-beda pada setiap browser. Beberapa elemen dapat ditangani oleh browser itu sendiri namun, ada juga beberapa elemen yang membutuhkan sebuah program pembantu tambahan (plug-in).
Pada umumnya elemen multimedia (seperti suara/video) disimpan dalam file media dan cara yang paling umum untuk melihat format sebuah media adalah dengan melihat ekstensi yang digunakan oleh file tersebut. Ketika browser menemukan file berekstensi ".htm/.html" maka browser akan berasumsi bahwa file tersebut merupakan halaman HTML. Ektensi ".xml" diindikasikan sebagai file XML dan ekstensi ".css" diindikasikan sebagai file style sheet, sedangkan ekstensi untuk format gambar yang diakui seperti ".jpg , .gif , dan lain-lain. Selain itu elemen multimedia juga mempunyai format filenya sendiri yang memiliki ekstensi yang berbede-beda seperti .swf , .wmv , .mp3 , dan .mp4.
LATAR BELAKANG
Memudahkan dalam menambahkan file multimedia dari direktori kita ke dalam web dengan menggunakan HTML tersebut.
MAKSUD & TUJUAN
- Memberikan kemudahan dalam menambahkan filenya, karena hanya memasukkan url dari file tersebut berada.
- Mendukung beberapa browser
- Dapat mengatur ukuran, panjang kecilnya multimedia tersebut.
ALAT & BAHAN
- PC/Laptop
- Text Editor
- Browser
- File Multimedia
LANGKAH KERJA
Multimedia itu bermacam-macam jenisnya, mulai dari gambar, suara, rekaman, video, audio, film, dll. Pada kesempatan kali ini kita akan belajar menambahkan audio dan video pada HTML.
- Video
Yang pertama kita akan belajar menambahkan video dengan html. Sebelum HTML5 video hanya bisa diputar di browser dengan plug-in (flash). Tapi di HTML5 kali ini bisa menentukan cara standar menanamkan video tersebut di dalam web. Untuk menambahkan video tersebut dapat menggunakan syntax berikut.
<video width="320" height="240" controls>
<source src="url" type="video/mp4">
<source src="url" type="video/ogg">
</video>
Nb: syntax control berfungsi untuk memeberikan kontrol bermain seperti play, pause, stop. Kemudian syntax width & height mengatur ukuran video tersebut, kemudian syntax src berfungsi untuk menambahkan alamat dari video tersebut, dan type yaitu tipe dari file tersebut. Contoh penggunaanya.
Pertama salin kode di atas, kemudian ganti srcnya dengan videomu sendiri. Kemudian save dalam bentuk html, dan jalankan di browser. Jika berhasil maka tampilannya akan seperti ini.
Nah sudah pada tahukan tentang syntax control tadi, dari gambar di atas bisa disimpulkan bahwa syntax controls berfungsi menambahkan kontrol pada video tersebut. Selanjutnya kita akan menambahkan Audio di dalam HTML.
- Audio
Sama halnya dengan video, audio sebelum ada HTML5 hanya bisa diputar di dalam browser yang ada plug-innya saja. Tapi semenjak ada HTML5 audio bisa menentukan cara standar aga dapat diputar di halaman web. Untuk menambahkan audio ke dalam HTML dapat menggunakan syntax berikut.
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Syntaxnya hampir sama dengan video hanya berbeda tag pembuka dan penutupnya. Jadi langsung saja kita coba untuk menambahkan audio ke dalam HTML. Berikut adalah contohnya.
Perintahnya sama hanya tinggal mengganti nama filenya. Kemudian kita coba lihat hasilnya, jalankan di browser kalian kemudian lihat. Hasilnya akan seperti ini.
Kemudian untuk menjalankannya tinggal klik tombol play pada audio di atas.
Selesai mudah bukan, tinggal kita percantik tampilannya.
Mungkin itu saja dari saya kurang lebihnya mohon maaf.
Jangan lupa klik ikuti di pojok bawah :D
Syukron
Wassalamualaikum Wr. Wb.
Referensi
Alhamdulillah, terima kasih atas artikel admin karna sangat membantu saya sebagai pemula untuk belajar Html multimedia ,karna dengan adanya artikel ini dapat membantu saya dan yang lainnya juga semoga admin bisa menciptakan karya karya terbaru lagi yang pastinya sangant bermanfaat bagi orang banyak ,ditunggu artikel selanjutnya yaaa,,
ReplyDeleteperkenalkan nama saya Miftahul Jannah
Kunjungi website kampus saya https://www.atmaluhur.ac.id/
Terima kasih kak atas artikelnya sangat membantu dalam pemrograman html multimedia saya,karena dengan melihat dan membaca artikel kakak sangat menghemat waktu saya dalam menyusun pemrograman ,oleh karena itu,saya terus mencoba agar terbiasa.Terus berkarya kak dalam artikelnya,semoga kakak sukses dalam artikelnya agar semua orang dapat terbantu kak.Perkenalkan nama saya Dhita Heru Pambudi,kunjungi website kampus saya https://www.atmaluhur.ac.id/
ReplyDeleteterimakasih min artikelnya sangat mudah di pahami dan juga membantu bgt dalam belajar tentang multimedia html,semoga kedepannya artikelnya bisa memantu temen2 yang lain dalam belajar multimedia html,semangat terus bikin artikelnya min.
ReplyDeleteperkenalkan nama saya Denni Ramli,jangan lupa kunjugi website kampus kami di https://www.atmaluhur.ac.id/
assalamualaikum,selamat malam kak terimakasih ya atas ilmu yang kakak bagi melalui blog ini.kata yang kakak gunakan dalam pembelajaran ini sangat mudah di pahami membuat saya semangat untuk mempelajarinya,tetap semangat untuk membuat blog ini kak
ReplyDeleteperkenalkan nama saya:RiskiTassyahAudifa
Nim:1922500091
kelompok SI2J
Matkul desin dan pemograman web
jangan lupa kunjungi website kampus kami kak di https://www.atmaluhur.ac.id
Selamat malam kak, terimakasih atas ilmu yang kakak berikan di blog ini, tulisan kakak sangat membantu saya yang masih pemula dalam memahami html multimedia, semangat terus untuk menulis kak, saya tunggu tulisan-tulisan kakak selanjutnya. Perkenalkan nama saya Ranum Fatwa Aulia, Nim 1922500033, silahkan kunjungi website kampus saya di https://www.atmaluhur.ac.id/
ReplyDeletekereeennnnnnnn
ReplyDeletemin seringg sering ya buat artikel seperti ini , ga tau kenapa kaloo baca"artikel yang admin buat jadi semangat belajarrrr .. padahal banyak artikel"lainnya tapi aku pilih artikel ini karnaa lengkap bgt ..
semngat terus ya min buat artikel"lainnya .. terus berkarya 👍
perkenalkan namaku indah lestari kunjungi website kampus ku ya https://www.atmaluhur.ac.id
Wahh artikelnya sangat bermanfaat sekali min untuk saya yang baru pemula , awalnya saya binggung mempelelajari ini,Tapi setelah saya baca artikelnya saya jadi mengerti....Thanks ya min
ReplyDeletePerkenalkan nama saya Sawalia Safitri
Kunjungi web kapus saya https://www.atmaluhur.ac.id/
Terimakasih telah membuat artikel ini, artikelnya bagus, sangat membatu saya yang bru mempelajari dasar-dasar HTML. Sangat membatu saya untuk memperdalam ilmu-ilmu dalam mempelajari HTML, semoga kedepanya bisa lebih bgus lagi dan memperbanyak pmbelajarannya. Perkenalkan nama saya GITA LESTARI. kunjungi website kampus saya di https://www.atmaluhur.ac.id/
ReplyDeleteTerimakasih kak atas infonya, setelah membaca artikel tentang html ini pengetahuan saya tentang html bisa bertambah, semangat berkarya kak, saya mahasiswa dari isb atmaluhur, nama saya fira karunia, kunjungi juga website kampus saya untuk kakak bertukar informasi https://www.atmaluhur.ac.id
ReplyDeleteTerima Kasih banyak ilmunya..sangat bermanfaat dengan metode yang mudah di pahami,
ReplyDeleteSaya: Randika
Https://mahasiswa.atmaluhur.ac.id/
Selamat siang,
ReplyDeleteTerimakasih kak Artikel ini membantu saya dalam memahami HTML multimedia sehingga saya tau cara menampilkan video,audio dan gambar penjelasan sangat rinci dan mudah dipahami. Ditunggu artikel selanjutnya. Perkenalan saya Elma Aferla Nim 2022500160 Kelompok SI2J. Kunjungi juga website kampus kami di https://www.atmaluhur.ac.id/
Terimakasih untuk artikel nya kak, artikel ini sangat membantu saya dan sangat bermanfaat buat saya dalam mempelajari dan memahami HTML multimedia sehingga saya bisa menampilkan audio, video nya. Ditunggu artikel-artikel selanjutnya kak.
ReplyDeleteSaya Egi Mulyaningsih, Nim : 2022500156 , mahasiswa ISB Atma Luhur. Dan kunjungi juga website kampus kami di https://www.atmaluhur.ac.id
Terimakasih kak atas ilmunya Artikel ini sangat membantu saya dalam mempelajari HTML serta menambah wawasan saya. Saya mahasiswa isb atmaluhur kunjungi juga website kampus kami di https://www.atmaluhur.ac.id/
ReplyDeleteSelamat malam kak
ReplyDeleteTerimakasih atas ilmu yang telah kakak sampaikan, artikel ini sangat bermanfaat untuk saya yang sedang mempelajari HTML, semangat berkarya dan berbagi pengetahuan kepada sesama ya kak. Saya Sutia Dinarti Nim : 2022500146 kunjungi juga website kampus kami di https://www.atmaluhur.ac.id/
Malam kak
ReplyDeleteArtikel nya sangat membantu saya yang sedang belajar materi tentang menambahkan multimedia pada HTML, terimakasih kak atas ilmu nya, tetap semangat dalam membuat artikel lain nya yg bermanfaat bagi pembaca lainnya,
Saya Fauziah syafarina (2022500128)
Kunjungi website kampus saya
Https://www.atmaluhur.ac.id