Halo… Kali ini saya akan memberikan tutorial cara menampilkan multimedia pada HTML
MENAMPILKAN IMAGE
Silahkan salin code dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan Gamabar pada HTML</title>
</head>
<body>
<!-- Memanggil Gambar -->
<!-- pertama pastikan gambar yang akan ditampilkan berada pada folder
yang sama dengan file html-->
<h3>Single Picture</h3>
<img src="https://4.bp.blogspot.com/-3spPyrdL7JQ/Vy8-XxC0lEI/AAAAAAAABLY/uBSErAAllwUKBppAgSHSLhw_QXB-OG7EQCLcB/s1600/Sunset%2Btanjung%2Bsetia%2Bbeach%2B5.JPG" width="400" height="300" alt="Sunset">
<!-- "alt" alternatif bila gambar tidak muncul/diakses -->
<h3>Picture with text</h3>
<img src="https://4.bp.blogspot.com/-3spPyrdL7JQ/Vy8-XxC0lEI/AAAAAAAABLY/uBSErAAllwUKBppAgSHSLhw_QXB-OG7EQCLcB/s1600/Sunset%2Btanjung%2Bsetia%2Bbeach%2B5.JPG" width="200" height="150" align="left" hspace="20"
vspace="0" alt="Sunset">
Selain menggunakan link gambar, kalian juga bisa menggunakan file gambar asalkan code html dan file gambar tersebut berada pada satu folder yang sama.
<!-- "Hspace" mengatur jarak gambar dengan tulisan secara horizon
"Vspace" sama tetapi secara vertikal-->
</body>
</html>Hasilnya seperti ini.
Untuk memauskkan image (gambar) pertama kalian harus menggetik <img> yang diikuti oleh src=” “. Nah, src ini lah yang digunakan untuk memasukkan gambar, gambar dapat berupa link maupun file dengan ketentuan jika gambar yang mau di insert berupa file maka harus berada di folder yang sama dengan codingan html kalian.
Lalu ada heigth yang digunakan untuk mengatur tinggi gambar sedangkan weight digunakan untuk mengatur lebar gambar. Sementara vspace digunakan untuk mengatur jarak vertikal gambar, dan hspace digunakan untuk mengatur jarak gambar secara horizontal (keduanya lebih seperti mengatur posisi gambar pada halaman web).
Lalu ada alt yang berfungsi sebagai alternatif jika misalnya gambar tidak muncul atau error, contohnya jika gambar di atas tidak muncul di halaman web maka yang muncul adalah tulisan sunset yang merupakan isi dari alt. Yang terakhir adalah align yang berfungsi untuk mengatur posisi gambar sesuai dengan format tertentu (left, right, dan center), selain gambar align juga bisa digunakan pada tulisan, singkatnya seperti yang ada di microsoft word.
Contoh lain
<!DOCTYPE html>
<html>
<head>
<title>Pancasila</title>
</head>
<body>
<h1 align="center">PANCASILA</h1>
<img src="http://pwrionline.com/wp-content/uploads/2018/09/Arti-Lambang-Pancasila-Sila-Pertama.jpg"
width="200" height="200" alt="Bintang" hspace="20" vspace="20" align="left">
<br><h2>Ketuhanan Yang Maha Esa</h2>
<br><br><br><br><br><br><br><br>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Pancasila_Sila_2_Chain.svg/1024px-Pancasila_Sila_2_Chain.svg.png"
width="200" height="200" alt="Rantai" hspace="20" vspace="20" align="right">
<br><h2 align="right">Kemanusiaan Yang Adil dan Beradab</h2>
<br><br><br><br><br><br><br><br>
<img src="http://lppmkreativa.com/wp-content/uploads/2016/11/Pohon-Beringin.png"
width="200" height="200" alt="Beringin" hspace="20" vspace="20" align="left">
<br><h2>Persatuaan Indonesia</h2>
<br><br><br><br><br><br><br><br>
<img src="http://pwrionline.com/wp-content/uploads/2018/09/banteng.png"
width="200" height="200" alt="kepala banteng" hspace="20" vspace="20" align="right">
<br><h2 align="right">Kerakyatan yang dipimpin oleh hikmat kebijaksanaan dalam permusyawaratan/perwakilan</h2 align="right">
<br><br><br><br><br><br><br><br>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRY_cB3A_gGhnwSU4_pw4wSTPQ31roU2z4fZLLvBI5nAGccZxdh&s"
width="200" height="200" alt="Padi dan Kapas" hspace="20" vspace="20" align="left">
<br><h2>Keadialan sosial bagi seluruh rakyat Indonesia</h2>
</body>
</html>Untuk mengetahui hasilnya bisa kalian coba sendiri
MENAMPILKAN AUDIO DAN VIDEO
selain gambar html juga dapat menapilkan sebuah audio dan video, untuk lebih lengkapnya silahkan salin code dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Multimedia</title>
</head>
<body>
<h3>Audio</h3>
<audio controls>
<source src="http://23.237.126.42/ost/legend-of-zelda-a-link-to-the-past-re-arranged/sltxgtrt/01%20-%20main%20title.mp3" type="audio/mp3">
Browser doesn't support audio
<!-- "control" untuk menunjukan play/pause, volume, kalimat "browser..."
menunjukkan kalau browser tidak support audio -->
</audio>
<h3>Video</h3>
<video controls>
<source src="video.mp4" type="video/mp4" height="50%" weight="50%">
</video>
</body>
</html>Hasilnya seperti ini.
<audio control> audio merupakan tag yang digunkan untuk mendefinisikan bahwa code yang ada didalam tag tersebut merupakan code untuk audio ke html sedangkan control digunakan untuk agar kita dapat pause/start, dan mengecilkan atau membesarkan volume. Untuk src sendiri hampir mirip dengan image, bedanya untuk link hanya kita harus memasukkan link audio. Karena kiti disini menginsert audio maka typenya kita isi audio/mp3.
Untuk <video control> hampir sama dengan audio control hanya saja igunakan untuk mendefinisikan bahwa code yang ada didalam tag tersebut merupakan code untuk video. Untuk srcnya harus berda pada satu folder dengan code htmlnya. Pada video kita dapat menggunakan format .mp4 , .WebM, .ogg.
Bonus
Cara membuat resep makanan sederhana
<!DOCTYPE html>
<html>
<head>
<title>Resep Masakan</title>
</head>
<body>
<h1 align="center">Resep Donat Indomie</h5><br>
<img src="https://img-global.cpcdn.com/recipes/196b2e9456a01b92/751x532cq70/donat-indomie-foto-resep-utama.jpg"
width="400" height="300" alt="Donat Indomie" align="right">
<h3>Bahan-Bahan</h3>
<ul><font size="5">
<li>2 bungkus indomie goreng</li>
<li>2 butir telur</li>
<li>2 buah sosis/bakso/daging cincang</li>
<li>3 sdm keju parut"optional</li>
<li>sejumput garam</li>
Pelapis :
<li>2 sdm terigu + sedikit garam</li>
<li>1 butir telur</li>
<li>Tepung roti secukupnya</li>
</font></ul><hr> <!-- Horizontal rule -->
<br><br>
<h3>Langkah</h3>
<ol type="1"><font size="5">
<li>Rebus mie seperti biasa sampai matang, tiriskan</li>
<img src="https://img-global.cpcdn.com/steps/0074da6d8d272738/154x116cq70/donat-indomie-langkah-memasak-1-foto.jpg"
width="200" height="200" alt="Mie rebus">
<li>Campur semua bahan (termasuk bumbu mie) kecuali pelapis. Aduk rata</li>
<img src="https://img-global.cpcdn.com/steps/49adf70ca761cd89/154x116cq70/donat-indomie-langkah-memasak-2-foto.jpg"
width="200" height="200" alt="Bahan dicampur">
<li>Tuang di loyang datar atau loyang bulat kecil. Kukus selama 15 menit (loyang dioles minyak dahulu)</li>
<img src="https://img-global.cpcdn.com/steps/9cac86176a6a844a/154x116cq70/donat-indomie-langkah-memasak-3-foto.jpg"
width="200" height="200" alt="Mie dimasukkan keloyang">
<li>Angkat lalu cetak menggunakan cetakan donat</li>
<img src="https://img-global.cpcdn.com/steps/2c62f67ab1d38d62/154x116cq70/donat-indomie-langkah-memasak-4-foto.jpg"
width="200" height="200" alt="Mie dibentuk donat">
<li>Lapisi dengan tepung terigu</li>
<img src="https://img-global.cpcdn.com/steps/c21c236a4d9959f6/154x116cq70/donat-indomie-langkah-memasak-5-foto.jpg"
width="200" height="200" alt="Donat dilapisi tepung">
<li>Celupkan ke telur yang telah dikocok</li>
<img src="https://img-global.cpcdn.com/steps/954048608eb0877f/154x116cq70/donat-indomie-langkah-memasak-6-foto.jpg"
width="200" height="200" alt="Donat dilapisi telur">
<li>Kemudian lapisi dengan tepung roti</li>
<img src="https://img-global.cpcdn.com/steps/001fd3398692e50f/154x116cq70/donat-indomie-langkah-memasak-7-foto.jpg"
width="200" height="200" alt="Donat dilapisi tepung roti">
<li>Goreng dalam minyak panas sampai kecoklatan</li>
<img src="https://img-global.cpcdn.com/steps/52900f45bccbe4f8/154x116cq70/donat-indomie-langkah-memasak-8-foto.jpg"
width="200" height="200" alt="Donat digoreng">
<li>Angkat dan tiriskan, donat indomie siap disantap</li>
<img src="https://img-global.cpcdn.com/steps/8f083f505772529c/154x116cq70/donat-indomie-langkah-memasak-9-foto.jpg"
width="200" height="200" alt="Donat dipiring">
</font></ol>
</body>
</html>
Andra Stories 