Menambahkan Media Di HTML
Menambahkan Media Di HTML
Halo :) Disini saya akan membagi sedikit materi yang berkaitan dengan menambahkan media di HTML. Saya baru memulai belajar HTML baru-baru ini jadi saya minta maaf bila ada kesalahan dan sebagainya.
Yang pertama, saya akan menambahkan suara terlebih dahulu.
Caranya cukup buka text editor anda, tulis kodingan-kodingan dasar terlebih dahulu seperti title body dsb lalu tulis kode sbb:
Di sini saya memasukkan file yang berjudul "2002". Untuk source mp3 sendiri, tergantung dimana anda meletakkan file mp3 tersebut.
Berikut ini adalah hasilnya:
Yang kedua, adalah memasukkan audio juga namun dengan auto play dan tombol scroll untuk menggeser. Jadi ketika web dibuka, maka audio akan otomatis dijalankan dan tidak memakan banyak ruang. Untuk melakukannya cukup tulis kode berikut:
Di atas juga sudah ada kode yang mampu membuat kita bisa mengatur berapa lebar dan tinggi audio tersebut. Berikut ini adalah hasilnya:
Sama dengan audio, video juga bisa ditampilkan pada halaman web dengan menggunakan coding yang tidak beda jauh.
Kita juga cukup menambahkan center agar video tersebut terlihat lebih rapi. Berikut ini adalah hasilnya:
Ada juga menampilkan video dengan thumbnail. Berikut saya akan menambahkan foto anime sebelum dimulainya video. Caranya cukup tulis kode sbb:
Ini adalah hasilnya:
Ada juga cara menampilkan konten flash. Pertama-tama anda harus mendownload terlebih dahulu konten flash tersebut di google. Lalu tulis kode sbb:
Hasilnya:
Yang terakhir, saya akan menunjukkan hasil akhir dari kodingan saya, yang menampilkan halaman tentang one direction serta gambar audio, video, dan biodata singkatnya menggunakan tabel.
Berikut ini adalah hasilnya:
Terima kasih sudah berkunjung :D
Yang pertama, saya akan menambahkan suara terlebih dahulu.
Caranya cukup buka text editor anda, tulis kodingan-kodingan dasar terlebih dahulu seperti title body dsb lalu tulis kode sbb:
<audio controls>
<source src="D:\Music Videos\2002.mp3" type="audio/mpeg">
</audio>
<source src="D:\Music Videos\2002.mp3" type="audio/mpeg">
</audio>
Di sini saya memasukkan file yang berjudul "2002". Untuk source mp3 sendiri, tergantung dimana anda meletakkan file mp3 tersebut.
Berikut ini adalah hasilnya:
Yang kedua, adalah memasukkan audio juga namun dengan auto play dan tombol scroll untuk menggeser. Jadi ketika web dibuka, maka audio akan otomatis dijalankan dan tidak memakan banyak ruang. Untuk melakukannya cukup tulis kode berikut:
<embed height="30" width="100" src="D:\Music Videos\2002.mp3">
</embed>
</embed>
Di atas juga sudah ada kode yang mampu membuat kita bisa mengatur berapa lebar dan tinggi audio tersebut. Berikut ini adalah hasilnya:
Sama dengan audio, video juga bisa ditampilkan pada halaman web dengan menggunakan coding yang tidak beda jauh.
<center>
<video width="400" height="300" controls>
<source src="Friends.mp4" type="video/mp4">
</video>
</center>
<video width="400" height="300" controls>
<source src="Friends.mp4" type="video/mp4">
</video>
</center>
Kita juga cukup menambahkan center agar video tersebut terlihat lebih rapi. Berikut ini adalah hasilnya:
Ada juga menampilkan video dengan thumbnail. Berikut saya akan menambahkan foto anime sebelum dimulainya video. Caranya cukup tulis kode sbb:
<center>
<video width="320" height="240" controls poster="anime.png">
<source src="Friends.mp4" type="video/mp4">
</video>
</center>
<video width="320" height="240" controls poster="anime.png">
<source src="Friends.mp4" type="video/mp4">
</video>
</center>
Ini adalah hasilnya:
Ada juga cara menampilkan konten flash. Pertama-tama anda harus mendownload terlebih dahulu konten flash tersebut di google. Lalu tulis kode sbb:
<embed src="level3.swf" height="900" width="1700"></embed>
Hasilnya:
<!DOCTYPE html>
<html>
<head>
<title>AuliaAgusXIRPL1</title>
</head>
<body>
<font face="Gabriola">
<table width="800" height="542" align="center">
<tr>
<td bgcolor="crimson" height="23" align="center" strong><font size="+5">One Direction</font></strong></td>
</tr>
<tr>S
<td height="457" align="center" bgcolor="beige">
<img src="OneDpic.jpg" height="300" width="500">
<p><big><font color="crimson">
Jumlah Pendengar Di Spotify : 14.000.000+ <br>
Jumlah Penghargaan yang telah dimenangkan : 300+ <br>
Berikut adalah Single pertama One direction : What Makes You Beautiful <br>
<audio controls>
<source src="Wandi.mp3" type="audio/mpeg">
</audio>
</p>
<p>Ini adalah salah satu dari music Video nya<br>
<video width="350" height="250" controls>
<source src="NightChanges.mp4" type="video/mp4">
</video>
</p></big></font>
</td>
</tr>
<tr>
<td height="23" align="center" bgcolor="crimson"> <font color="#FF0000"><a href="https://onedirectionmusic.com"> onedirectionmusic.com </a></font></td>
</tr>
</table>
</font>
</body>
</html>
<html>
<head>
<title>AuliaAgusXIRPL1</title>
</head>
<body>
<font face="Gabriola">
<table width="800" height="542" align="center">
<tr>
<td bgcolor="crimson" height="23" align="center" strong><font size="+5">One Direction</font></strong></td>
</tr>
<tr>S
<td height="457" align="center" bgcolor="beige">
<img src="OneDpic.jpg" height="300" width="500">
<p><big><font color="crimson">
Jumlah Pendengar Di Spotify : 14.000.000+ <br>
Jumlah Penghargaan yang telah dimenangkan : 300+ <br>
Berikut adalah Single pertama One direction : What Makes You Beautiful <br>
<audio controls>
<source src="Wandi.mp3" type="audio/mpeg">
</audio>
</p>
<p>Ini adalah salah satu dari music Video nya<br>
<video width="350" height="250" controls>
<source src="NightChanges.mp4" type="video/mp4">
</video>
</p></big></font>
</td>
</tr>
<tr>
<td height="23" align="center" bgcolor="crimson"> <font color="#FF0000"><a href="https://onedirectionmusic.com"> onedirectionmusic.com </a></font></td>
</tr>
</table>
</font>
</body>
</html>
Berikut ini adalah hasilnya:
Terima kasih sudah berkunjung :D
Komentar
Posting Komentar