About Me

Hayy.. Welcome to myblog :)

Tuesday, October 18, 2016

Cara Memasukkan Video, Audio, Gambar dengan HTML

           Hay guys.. Ketemu lagi sama saya. Tau lah siapa saya, orang paling ganteng di keluarga saya wkwkwk.. Ga usah gugup guys, yang baca ini juga ganteng-ganteng dan cantik-cantik kok. Udah senyumnya berhenti hahaa.. Klo masih ketawa berarti suka sama blog ini, mkasih.. Langsung ke pokok pikirannya aja yah guys.

              Sebuah blog biasanya memiliki video, gambar, ataupun audio. Mengapa demikian? karena video dapat membuat sebuah blog menjadi semakin menarik. Video juga dapat memperbanyak pengunjung sehingga blog kita semakin berkembang. Apalagi jika blog itu sendiri dilengkapi dengan gambar ataupun audio yang baik. Secara otomatis pengunjung akan tertarik bahkan penasaran dengan blog kita sendiri sehingga mereka akan terus-menerus melihat atau mengupdate isi dari blog kita. Namun, lebih baik memposting video, gambar, atau audia yang bermanfaat bagi semua orang. 

              Oleh karena itu, ada cara tersendiri untuk memasukkan gambar, audio, ataupun video itu. Disini saya akan memposting cara memasukan video, gambar, dan audio dalam HTML. Dalam proses ini kita akan  menggunakan Notepad++


A. Memasukan Video

   Untuk memasukkan video ke dalam dokumen HTML, juga digunakan tag yang sama yaitu tag < embed >  Format untuk video yaitu mp4, flv, avi, 3gp dll


Atau bisa menggunakan cara lain dibawah ini

  • Jalankan aplikasi text editor seperti Notepad++ untuk menulis sebuah dokumen HTML
  • Kemudian simpan dokumen HTML dengan format "Nama_File.html" tanpa tanda kutip, kemudian pada "Save as type" Anda pilih "All files" agar dokumen yang anda simpan menjadi dokumen HTML bukan dokumen text biasa.
  • Kita mulai untuk membuat video pada dokumen HTML seperti di bawah ini.

<!DOCTYPE html>

<html>


<head>

<title> Cara Memasukkan Playlist Lagu Pada Dokumen HTML </title>
</head>

<body>
<video width="320" height="240" controls autoplay>
  <source src="judul video.mp4" type="video/mp4">
</video>
</body>


</html>



  • Kemudian simpan Script di atas yg sudah di Copy Paste di Notepad.
  • Selanjutnya buat folder kosong terlebih dahulu sebelum di Save.Kemudian Masukkan File HTML yg sudah kalian buat.
  • Anda bisa mengganti " judul video.mp4" diatas dengan judul musik yang ingin dimasukkannya tetapi tanpa menghilangkan ".mp4" nya. Contoh: "JKT48-Dakishimecha Ikenai (Tidak Boleh Pelukan).mp4"
  • Selanjutnya masukkan file videonya yang kalian inginkan di folder tadi (jangan lupa edit skrip di Notepad++ kembali jika kalian mau mengganti file videonya).
  • Terakhir, buka file HTML yang sudah kalian buat dengan browser yang kalian inginkan atau yang kalian punya.

B. Memasukan Gambar

Untuk memasukkan gambar kedalam HTML, kita menggunakan tag < img >. Atribut-atribut yang bisa kita gunakan adalah sebagai berikut.
  • src untuk bmenunjukkan lokasi file gambar
  • align untuk menentukan posisi gambar
  • height untuk menentukan tinggi gambar dalam pixel ketika di tampilkan di browser
  • width untukmenentukan lebar gambar dalam pixel ketika di tampilkan di browser, apa bila tidak disebutkan atribut height dan width, maka ukuran gambar akan di tampilkan ke dalama browser dengan ukuran asli file nya
  • hspace untuk menentukan jarak antara gambar dengan text secara horizontal
  • vspace untuk menentukan jarak antara gambar dengan text secara vertikal
  • border untuk menentukan batas batas pada gambar

Contoh :


hasilnya akan jadi: 


C. Memasukan Audio

Untuk memasukkan audio kedalam HTML, kita menggunakan tag < embed >. Atribut-atribut yang bisa kita gunakan adalah  sebagai berikut.

  • src digunakan untuk menentukan lokasi file music
  • align digunakan untuk menentukan posisi.
  • border digunakan untuk menentukan batas-batas.
  • height digunakan untuk menentukan tinggi dari object yang dimasukkan.
  • width digunakan untuk menentukan lebar dari object yang dimasukkan.
  • hspace digunakan untuk menentukan jarak horizontal antara object dengan text.
  • vspace digunakan untuk menentukan jarak vertikal antara object dengan text.
Contoh:


Apa bila ingin menjadikannya bgsound (Suara latar belakang) dalam halaman web kita maka di kunakan tag < bgsound >
Contoh :


Nah.. Itu lah ulasan tentang cara memasukan atau menginput video, audio, gambar dalam HTML pada blog. Silakan yang ingin berkomentar tetapi dengan etika sopan dan santun. Jangan bosan untuk mampir kesini lagi ya guys. Terima Kasih ^_^
Tunggu Artikel selanjutnya yah guys...
#Warbyazah


45 comments:

  1. Artikel yang bermanfaat,,blog akan semakin menarik apabila disisipkan audio, video ataupun gambar,Makasih Ilmunya
    Kunjungi website kampus saya ya http://www.atmaluhur.ac.id
    Dan web blog saya https://astutiernawati.mahasiswa.atmaluhur.ac.id/

    ReplyDelete
  2. mas,kalo foto & video gabisa di gabung satu html kah??????

    ReplyDelete
  3. Assalammualaikum, Terima kasih atas website ini yang membahas cara memasukan video, gambar, audio di html, dengan melihat informasi di website ini sangat membantu untuk saya yang baru belajar html, dan dengan di sertai script html yang di sertai admin membuat saya lebih mudah memahaminya, di harapkan admin bisa membuat website yang lebih menarik lagi tentang html, semoga kedepannya website ini berkembang lebih pesat, perkenalkan nama saya Rian Cahya Fajar, silahkan kunjungi website kampus kami https://www.atmaluhur.ac.id/

    ReplyDelete
  4. Terima kasih admin atas website nya, website dari admin ini sangat mudah di mengerti dan sangat bermanfaat. apalagi untuk saya yang sedang belajar Pemrograman web saya harap admin disini masih update memberikan informasi dan website dengan konteks yang serupa. Sukses selalu...
    Perkenalkan nama saya Mozza Muthia Rahman
    Kunjungi website kampus saya di link ini
    Https://www.atmaluhur.ac.id/

    ReplyDelete
  5. Assalamualaikum,terima kasih atas artikel nya kak tentang cara memasukkan vidio,gambar,dan audio nya,berkat artikel nya,saya yang sedang belajar tentang pemograman web ini mengerti.dan sangat bermanfaat,saya kedepannya website ini berkembang lebih pesat lagi,dan sukses selalu.. perkelkan nama saya afgar wira satriaji
    Ini website kampus kami
    Https://www.atmaluhur.ac.id/

    ReplyDelete
  6. terimakasih min untuk artikelnya sangat membantu saya dalam bljar,semangat terus bikin artikelnya min dan terus bikin artikel yang keren2 lainnya.
    perkenalkan nama saya Denni Ramli,ini website kampus kami https://www.atmaluhur.ac.id/

    ReplyDelete
  7. Terimakasih min untuk artikelnya,yang membahas memasukkan multimedia html..sangat lengkap sekali dimulai dari cara memasukan gambar,audio,vidio
    Semoga blog ini selalu aktif dan semangat untuk membuat artikel yang bermanfaat lainnya seperti ini
    Saya tunggu artikel selanjutnya..oh disini kakak belum membahas menambah file gambar animasi..saya harap ,semoga nanti dibuat..saya tunggu artikel kakak selanjutnya
    Perkenalkan nama saya ernita resva juli a
    Silahkan kunjungi website kampus ku https://www.atmaluhur.ac.id/

    ReplyDelete
  8. Arigatou gozaimasu. Artikel yang admin berikan disertai dengan penjelasan cara memasukan gambar,audio,vidio dalam HTML Multiimedia. bermanfaat buat saya dalam belajar HTML Multimedia.
    Perkenalkan nama saya Jheny Sandella dan jangan lupa ya kak kunjungi alamat website kampus anna https://www.atmaluhur.ac.id/

    ReplyDelete
  9. Thank you kak atas artikel yang membahas cara memasukkan gambar,video dan audio diHTML, penjelasannya sangat mudah dimengerti dan sangat bermanfaat. Semoga website ini selalu aktif untuk memberikan informasi seputaran pemrograman web.
    saya tunggu artikel selanjutnya kak....
    perkenalkan nama saya Meilianda Aryanti Abelia, kunjungi website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  10. setelah saya cari-cari ternyata saya menemukan bagaimana cara memasukkan gambar,video dan audio di html saya semakin mengerti bagaimana melakukannya,sangat membantu saya dalam meningkatkat pengetahuan. terimakasih yaa min terus karya dan semoga semakin sukses. Nama Saya Ulfa Maryanti website kampus saya https://atmaluhur.ac.id/

    ReplyDelete
  11. Terima kasih kak atas artikel yang sangat bermanfaat dan menarik ini. dan membantu kami dalam mengetahui tentang cara memasukan gambar,video dan audio di html ini. semohga artikel ini kedepan nya bisa selalu aktif dan berkembang pesat. Amiinnnn. sukses selalu kak. Nama Saya Derma Anzeny website kampus saya https://atmaluhur.ac.id/

    ReplyDelete
  12. terima kasih atas artikel yang kakak berikan. artikel tersebut sangat bermanfaat dan membantu saya dalam mengetahui cara memasukan file gambar,audio, dan video ke dalam HTML. semoga artikel ini masih update untuk kedepanya. perkenalkan nama saya reza pahlevi dari kampus STMIK atma luhur pangkalpinang. mampir juga ke website kampus saya di https://atmaluhur.ac.id/.

    ReplyDelete
  13. Terimakasih kak atas artikelnya yang membahas tentang cara memasukan gambar,vidio,dan audio diHTML MULTIMEDIA.artikelnya sangat bermanfaat untuk saya dan teman-teman saya dalam belajar HTML MULTIMEDIA.
    Semangat terus yaa kak...
    Ditunggu artikel selanjutnya..
    Perkenalkan nama saya ADEKA SRI PURWANTI,website kampus saya di https://atmaluhur.ac.id/

    ReplyDelete
  14. Hallo kak. Terimakasih ya kak artikel nya bagus mudah dipahami bagi saya yang baru belajar tentang HTML. Artikel nya juga sangat membantu dalan memenuhi tugas kuliah saya kak. Semoga dapat memberikan artikel yang bermanfaat lainnya ya kak. Terimakasih kak sukses selalu . Perkenalkan Saya Ardila Yunita, NIM 1922500096, link kampus saya https://atmaluhur.ac.id/

    ReplyDelete
  15. Masya allah artikel ini sangat bagus dan berguna untuk saya, dan pastinya untuk yang lain juga. Karna dari sini saya dapat mengetahui cara menampilkan multimedia di halaman html. Penjelasannya sangat jelas dan mudah dimengerti bagi kami yang mempelajari hal terkait karna admin membahas tentang cara memasukan gambar, audio, vidio di html multimedia dan mencantumkan contoh script nya.. jadi makin mudah dimengerti hehehe. apalagi saya yang kuliah dibagian komputer, sangat terbantu sekali dengan artikel yang kakak buat dan dapat membantu banyak orang. terimakasih ya penjelasan dan bantuannya.. semoga kedepannya bisa menulis artikel lainnya, saya sangat senang sekali, sukses selalu ya kak untuk kedepannya .. perkenalkan nama saya Reza Anggraini, dan silahkan kunjungi situs web kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  16. Masya allah artikel ini sangat bagus dan berguna untuk saya, dan pastinya untuk yang lain juga. Karna dari sini saya dapat mengetahui cara menampilkan multimedia di halaman html. Penjelasannya sangat jelas dan mudah dimengerti bagi kami yang mempelajari hal terkait karna admin membahas tentang cara memasukan gambar, audio, vidio di html multimedia dan mencantumkan contoh script nya.. jadi makin mudah dimengerti hehehe. apalagi saya yang kuliah dibagian komputer, sangat terbantu sekali dengan artikel yang kakak buat dan dapat membantu banyak orang. terimakasih ya penjelasan dan bantuannya.. semoga kedepannya bisa menulis artikel lainnya, saya sangat senang sekali, sukses selalu ya kak untuk kedepannya .. perkenalkan nama saya Reza Anggraini, dan silahkan kunjungi situs web kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  17. Terimakasih gan untuk artikelnya,yang telah mengeshare cara memasukkan multimedia html,artikel ini sangat membantu sekali untuk dapat mengetahui cara memasukan gambar,audio,dan vidio
    Semoga blog ini selalu memberikan artikel-artikel yang bermanfaat dan sukses selalu untul adminnya..
    Saya tunggu artikel selanjutnya..
    perkenalkan nama saya Rachma Dini
    silahkan kunjungi website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  18. terimakasih min, artikelnya cukup berguna untuk saya yang baru memperlajari tentang materi ini. disini saya bisa mengetahui cara memasukkan gambar, audio, vidio di html multimedia. apalagi untuk saya yang kuliah di bagian komputer, artikel ini sangat membantu saya dan dapat membantu banyak orang juga. semoga kedepannya admin bisa membuat banyak artikel bermanfaat lainnya. terimakasih min, semoga kedepannya admin bisa makin sukses yaa.. Perkenalkan nama saya Ferlyta Athiyyah Rahil, silahkan kunjungi website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  19. Terima kasih admin atas website nya, website ini sangat bermanfaat bagi saya tentang memasukan gambar,audio,dan vidio di html multimedia, apalagi untuk saya yang sedang belajar Pemrograman web. saya harap admin disini selalu update memberikan informasi,Sukses selalu...
    perkenalkan nama saya Nabil Rizky Hibatullah,kunjungi website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  20. Selamat malam kak, terima kasih atas materinya kak, tulisan pada blog kakak sangat membantu saya dalam belajar memasukan gambar, video, audio di html multimedia. Saya harap kakak dapat menulis banyak artikel bermanfaat lainnya, saya tunggu tulisan selanjutnya kak. Perkenalkan nama saya Ranum Fatwa Aulia, Nim 1922500033 dan jangan lupa kunjungi website kampus saya http://www.atmaluhur.ac.id/

    ReplyDelete
  21. Terima kasih kak atas artikelnya. Artikel ini sangat bermanfaat bagi saya untuk memasukan gambar. audio. dan video di html multimedia untuk saya yang sedang belajar Pemrograman web.terus update informasinya hehe, kak Perkenalkan saya Meilita Sari, kunjungi situs web kampus saya https://www.atmaluhur.ac.id/

    Balasan

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. Thanks gan atas informasinya yang sudah mau berbagi ilmu di artikel ini karna sudah membantu banyak mahasiswa kampus Atma luhur khusus nya untuk membuat tugas-tugas kuliah nya menjadi lebih mudah gan. Semoga slalu bisa memberi informasi yang bermanfaat terus gan, good job.
    Perkenalkan nama saya Peri Supriyanto
    Kunjungi website kampus kami
    https://www.atmaluhur.ac.id/

    ReplyDelete
  24. Terimakasih artikelnya, kak! Artikel kakak sangat bermanfaat bagi saya mahasiswa baru yang baru belajar tentang pemrograman. Cara penulisan, penyampaian, dan bahasa kakak dalam artikel juga cepat dimengerti dan dipahami. Berkat artikel kakak saya sudah mengerti bagaimana cara memasukkan gambar, audio, video di html multimedia.
    Semoga kedepannya kakak lebih banyak berkarya dalam membuat artikel seperti ini, jadi dapat membantu mahasiswa-mahasiswa yang lagi perlu.
    oh iya, nama saya Putra Raniansyah, saya dari STMIK Atma Luhur Pangkalpinang. Kapan-kapan mampir ya kak ke web kampus kita! https://www.atmaluhur.ac.id

    ReplyDelete
  25. Terimakasih atas pelajaran yang telah di buat oleh kakak sangat membantu saya untuk belajar tentang html , perkenalkan nama saya Ryonaldo Putra Wijaya dan saya seorang mahasiswa semester di suatu kampus di bangka belitung, saya sedang belajar html dan dengan ada nya blog i i sangat membantu saya terimakasih banyak atas semua pelajaran yang telah di bagi kekami dan ini situs kampus saya
    Https://www.atmaluhur.ac.id/

    ReplyDelete
  26. Terimakasih kak atas artikel yang sangat bermanfaat bagi saya yang baru belajar html dan membantu saya dalam mengerjakan tugas. Sukses terus ya kak... Perkenalkan nama saya Teddy dinarsyah dari kampus STMIK ATMA LUHUR. website kampus saya https://mahasiswa.atmaluhur.ac.id/

    ReplyDelete
  27. terima kasih banyak min untuk artikel nya, ini sangat membantu untuk saya sebagai pemula, semoga kedepan nya admin bisa lebih memberi informasi - informasi tentang artikel ini.
    perkenalkan saya M. Azel Gibran
    jangan lupa kunjungi website kampus kami https://www.atmaluhur.ac.id

    ReplyDelete
  28. Terima kasih kak atas artikelnya. Artikel ini sangat membantu saya untuk memasukan gambar. audio. dan video di html multimedia untuk saya yang sedang belajar Pemrograman web.terus update informasinya hehe, kak Perkenalkan saya Genaro Miana, jangan lupa kunjungi situs web kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  29. Wahh.. thanks min atas artikelnya yang sudah membahas cara memasukkan video dihalaman web, penjelasan sangat membantu saya dan sangat bermanfaat bagi para pengunjung web ini,semoga Mimin selalu bisa memberikan artikel bermanfaat seperti ini dan sukses selalu ya min.. perkenalkan saya Aqilla Fadiya Haya , oh iya nama kenalkan nama link kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  30. Waw cara pembahasannya sangat keren dan sangat membantu saya dalam memahami bagaimana cara menambahkan vidio dan lainnya pada html. Terimakasih banyak kak, sukses selalu dan salam ilmu komputer. Perkenalkan saya EKA SUKMA DEWI, dan kenalkan website kampus saya https://www.atmaluhur.ac.id

    ReplyDelete
  31. Artikelnya cukup keren dan bagus dan sangat membantu saya dalam memahami bagaimana cara menambahkan video dan lainnya pada html.perkenalkan Nim saya 1922500184,Nama Martin,kelompok sI2k,link kampus saya www.atmaluhur.ac.id

    ReplyDelete
  32. Assalammualaikum, Terima kasih atas website ini yang membahas cara memasukan video, gambar, audio di html, dengan melihat informasi di website ini sangat membantu untuk saya yang baru belajar html, semoga kedepannya admin bisa membuat banyak artikel bermanfaat lainnya. terimakasih min, semoga kedepannya admin bisa makin sukses yaa. Perkenalkan Nama Saya Muhammad Rafi, dan website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  33. Nanya dong kalo gabungin tiga bagian itu dalam satu website caranya gimana ya

    ReplyDelete
  34. Mantap mas ijin share y artikwl koding nya
    Makasih mas smoga maki sukses

    ReplyDelete
  35. Terimakasih 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

    ReplyDelete
  36. This comment has been removed by the author.

    ReplyDelete
  37. seblumnya,saya sempat bingun dalam belajar membuat web dengan html5 tapi alhamdulilah setelah saya melihat web ini dengan berbagai tutorial nya saya jadi mudah untuk mempelajari dan mempraktekan nya di rumah dan sekarang saya mulai terbiasa dengan bahasa pemograman html 5,untuk admin terimakasih dan terus berikan yang terbaik untuk membaca,karena sungguh artikel ini sangat berguna bagi pemula seperti saya.
    perkenalkan saya Muhammad akbar
    silahkan kunjungi website kampus saya di link ini

    https://www.atmaluhur.ac.id/

    ReplyDelete
  38. Assalamualaikum, Terimakasih atas website yang sangat membantu saya sebagai mahasiswa baru dalam memahami html, dari yang saya pahami dari website ini sangat mudah di pahami, dicermati, dan di praktekan.
    Semoga kedepannya website ini selalu aktif untuk memberikan informasi seputaran pemograman web.
    Perkenalkan nama saya Tarisa Marcella, kunjungi website kampus saya : https://mahasiswa.atmaluhur.ac.id/

    ReplyDelete
  39. Makasih pak artikelnya sangat membantu dan mendidik, jadi makin tambah ilmu serta tambah wawasan.saya jadi terbantu, jadi bisa pisahkan setiap bagian di hmtl script nya

    terima kasih banyak pak …
    Saya : RANDIKA
    Https://mahasiswa.atmaluhur.ac.id/

    ReplyDelete
  40. Haiii kak, terimakasih kak artikel ini sangat membantu saya dalam belajar html, semoga artikel ini bermanfaat bagi pembaca lainnya
    Perkenalkan saya Fauziah syafarina

    Kunjungi website kampus saya
    https://www.atmaluhur.ac.id

    ReplyDelete
  41. Hallo kak terimakasih artikel nya setidaknya bisa membantu saya dalam mempelajari htlm.ditunggu artikel berikunya.
    Kunjungi website kampus kami https://www.atmaluhur.ac.id/

    ReplyDelete
  42. Hallo kak terimakasih artikel nya setidaknya bisa membantu saya dalam mempelajari htlm.ditunggu artikel berikunya.
    Kunjungi website kampus kami https://www.atmaluhur.ac.id/

    ReplyDelete
  43. Casinos Near Harrisburg, PA - Mapyro
    A map showing casinos 아산 출장안마 and other gaming facilities 경상남도 출장샵 located 나주 출장마사지 near Harrisburg, PA, in Pennsylvania, 용인 출장마사지 This map shows gambling facilities, revenue, 대전광역 출장안마

    ReplyDelete