Binti Qomariah –
Assalamu’alaikum Wr. Wb.
Hai teman-teman,
kali ini saya akan membagikan tutorial saya mengenai Penggunaan HTML
yaitu di media. Kali ini media yang akan saya masukkan di browser
antara lain : gambar, video dan musik. Oke, langsung saja ya ..
A. JUDUL KEGIATAN
Tutorial HTML : HTML Media.
B. PENDAHULUAN
1. Pengertian
Menurut Wikipedia, 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.
2. Latar Belakang
Mungkin banyak orang yang masih belum tahu bagaimana caranya untuk memasukkan media di browser menggunakan html.
3. Maksud dan Tujuan
Dapat mengimplementasikan dan mempraktekkan HTML Media.
4. Hasil yang
Diharapkan
Dapat mempraktekkan HTML Media.
C. ALAT DAN BAHAN
- Text Editor
- Laptop atau
Komputer
D. JANGKA WAKTU
PELAKSANAAN KEGIATAN
-/+ 15 menit.
E. TAHAPAN
PENGERJAAN
a. Memasukkan Media
Berupa Video
1. Siapkan text
editor, apa saja bisa misalnya saja sublime text, atom, notepad++,
gedit, visual studio dan masih banyak lagi. Tetapi kali ini saya
menggunakan text editor sublime text.
2. Kemudian buat
folder, dengan nama media.
Kemudian buat file html di dalam folder tersebut, dengan nama
video.html. Selain
file, masukkan juga video yang akan kita tampilkan di web browser
kita. Dan agar lebih rapi, pisahkan file html dengan media yang akan
kita gunakan di html. Karena kita akan menampilkan video, maka video
yang akan saya gunakan saya letakkan di folder bernama video.
3. Buka file video.html kita di sublime text. Kemudian ketikkan :
<!DOCTYPE html><html><head><title></title></head><body></body></html>
4. Selanjutnya, di dalam tag <title> isikan judul sesuai dengan
yang kita mau. Tag ini berfungsi untuk memberi judul halaman/page
browser. Kemudian di dalam tag <body> ketikkan :
<video width="700" height="600" controls><source src="video/pelantikan2.mp4" type="video/mp4">
Tag <video width="700" height="600" controls>
ini artinya sebagai penanda bahwa kita akan memasukkan video dengan
lebar 700 pixel dan tinggi 600 pixel. Controls ini berfungsi untuk
……….
Sedangkan
tag <source src="video/pelantikan2.mp4"
type="video/mp4"> ini artinya kita memasukkan video di
folder video dengan nama pelantikan2.mp4 dan
memiliki type video mp4.
5. Langkah terakhir, save atau simpan file html ini dan buka di
browser kita. Maka, hasilnya akan seperti ini :
b. Memasukkan Media Berupa Gambar
1. Pilih gambar yang
akan kita gunakan di html, letakkan gambar tersebut di sebuah folder,
karena kita akan memasukkan sebuah gambar, maka saya membuat folder
bernama img.
2.
Kemudian buka text editor kita, dan klik New Tab,
kemudian ketikkan :
<!DOCTYPE html><html><head><title></title></head><body></body></html>
Simpan
file ini dengan nama gambar.html.
Simpan file ini menjadi satu dengan video.html.
2.
Selanjuntnya sama seperti
tahap pada memasukkan video, kemudian di dalam tag <body>
masukkan perintah :
<img src="img/klaten.png" style="width: 260px; height: 280px;"><br/><img src="img/telkom.png" style="width: 260px; height: 280px;">
Tag
<img src="img/klaten.png"
ini digunakan untuk
memanggil gambar yang ada di folder img dan memanggilnya untuk di
tampilkan di browser. Sedangkan tag ...style="width:
260px; height: 280px;"> ini
digunakan untuk mengatur ukuran gambar. Yang artinya gambar tersebut
memiliki lebar 260 pixel dan tinggi 280 pixel. Tag <style> ini
termasuk ke dalam CSS.
3. Langkah terakhir, save file tersebut dan buka file tersebut di
browser kita.
c. Memasukkan Media Berupa Audio
1.
Untuk memasukkan audio ini, langkah-langkahnya sama seperti kita
memasukkan gambar dan video. Disini saya membuat folder untuk
menyimpan audio dengan nama audio.
Dan copy audio ke folder audio.
2.
Buka text editor kita, klik New Tab.
Ketikkan :
<!DOCTYPE html><html><head><title></title></head><body></body></html>
3. Kemudian, sisipkan script ini di dalam body :
<audio controls><source src="audio/01.mp3" type="audio/mp3"></audio>
Tag <audio controls> ini berfungsi untuk memberi tanda di
script atau memberi instruksi di script bahwa kita akan memasukkan
file berupa audio. Sedangkan tag <source src="audio/01.mp3"
type="audio/mp3"> ini berfungsi untuk memanggil audio
bernama 01.mp3 di dalam folder audio dengan type audio/mp3.
4. Save dan lihat hasilnya di browser kita.
4. Save dan lihat hasilnya di browser kita.
F. SCRENSHOOT
G. HASIL YANG
DIDAPATKAN
Dapat
mengimplementasikan penggunaan HTML Media.
H. MASALAH YANG
DIHADAPI
Sejauh ini belum ada
masalah yang saya hadapi dalam pembuatan HTML Media tersebut.
I. KESIMPULAN
HTML Media digunakan
untuk memasukkan media di browser, media tersebut dapat berupa foto,
video, audio dan lain sebagainya.
J. REFERENSI
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon