HTML Menyajikan komponen Audio, Video, flash serta penggunaan form
PRAKTIKUM SESI 7-8
Format embed audio & auto play
Nama: Muhammad Fadlul Hafiizh
Kelas : XI-RPL 2
Dalam blog yang kaliini saya buat, kita akan mulai menyajikan suatu format baik audio, vidio ataupun flash dalam HTML. Tidak begitu sulit untuk menginput suatu format dalam HTML, kita hanya perlu menyiapkan format file-nya dan disimpan dalam folder yang mudah untuk dijadikan destinasi agar mudah untuk diinput dalam proses koding. Langsung kita mulai ke bagian praktikumnya :
Format Tampilan Audio
Dalam blog yang kaliini saya buat, kita akan mulai menyajikan suatu format baik audio, vidio ataupun flash dalam HTML. Tidak begitu sulit untuk menginput suatu format dalam HTML, kita hanya perlu menyiapkan format file-nya dan disimpan dalam folder yang mudah untuk dijadikan destinasi agar mudah untuk diinput dalam proses koding. Langsung kita mulai ke bagian praktikumnya :
MENYAJIKAN FORMAT AUDIO, VIDEO DAN FLASH
Format Tampilan Audio
Digunakan <audio controls> sebagai format pemanggilan audio, dan dilanjutkan <source src="../..."> maksudnya yaitu letak dimana anda menyimpan format file. sebagai contoh saya menyimpan format file audio di dalam folder bernama audio dan file audio itu bernama 6.mp3 sengaja saya rubah nama file menjadi 1 bentuk angka agar mudah untuk dipanggil. Jadi cara memanggilnya dengan audio/6.mp3. Dan hasilnya akan seperti ini :
Jika dilihat nanti hasilnya tidak akan jauh berbeda dengan format tampilan audio diatas, hanya saja kaliini ketika dibuka audio akan otomatis terputar.
Format Tampilan Video
Sama halnya dengan audio, pemanggilan format video dalam html tidak jauh berbeda.kurang lebih seperti dibawah ini kodingannya beserta hasilnya :
Format Video dengan Thumbnail
Perbedaan vidio yang diinput kaliini yaitu vidio ini memeiliki sebuah thumbnail atau bisa juga diartikan tampilan/gambar yang muncul berupa foto sebelum vidio itu dimulai. Jika kalian melihat para youtuber meng-upload sebuah vidio dalam channelnya, biasanya mereka menggunakan thumbnail agar vidio mereka menarik & membuat penasaran para penikmat youtube. Sebelumya kalian siapkan terlebih dahulu format vidio & foto untuk thumbnailnya lalu simpan dalam folder yang menurut kalian ga ribet untuk digunakan nanti. Agar lebih paham langsung saja kalian lihat contoh kodingan beserta hasilnya :
Format Tampilan Flash
Untuk format tampilan flash ini sangat mudah, kalian hanya perlu mencari file berformat .swf di google dan kalian hanya perlu menginput file tersebut dalamkodingan kalian. kurang lebih seperti ini contohnya :
Pastikan fitur adobe flash player dalam browser anda dalam kondisi aktif karena jika adobe flash player dalam browser kalian mati maka file swf ini tidak akan terbaca oleh browser.
Dan yang ini adalah kreasi saya sendiri. membuat tampilan web yang didalamnya terdapat format audio beserta vidio pula. seperti ini :
Hasilnya akan terlihat menjadi seperti ini :
MENYAJIKAN KOMPONEN ENTRI TEKS
Kaliini komponen entri teks yang kita pelajari yaitu komponen textarea. Textarea merupakan komponen entri teks yang digunakan untuk memasukan teks yang tersusun lebih dari 1 baris. terdapat beberapa macam atribut dari textarea seperti dalam tabel dibawah ini :
Agar kalian paham dalam penggunaan dan bentuk dari textarea ini, langsung saja lihat contoh pengkodean textarea berikut :
Maka hasilnya akan menjadi seperti ini guys :
Yaa, jadi textarea itu bisa diibaratkan sebagai sebuah papan tulis digital yang didalamnya bisa kita isi dengan bebas atau sesuai dengan apa yang diperintahkan. Sekarang kita coba variasikan dengan menggunakan cols (kolom).
TextArea dengan Cols
Atribut cols ini digunakan untuk menentukan lebar dari text area, contohnya seperti ini :
Maka hasil dari pengkodean diatas itu akan menampilkan text area sepperti berikut :
Nahh jadi terlihatkan bagaimana fungsi dari cols ini, kurang lebih seperti hasil screenshot diatas.
TextArea Readonly
Textarea ini adalah sebuah textarea dimana didalamnya sudah terisi sebuah value baik angka, huruf, kata ataupun kalimat yang tidak dapat di tambahkan, dikurangi atau apapun yang intinya tidak akan bisa merubah isi dari textarea tersebut, akan tetapi teks bisa untuk disalin. untuk contohnya seperti ini:
Dan untuk hasil dari pengkodean diatas akan jadi seperti ini :
TextArea Disabled
Sama seperti readonly, akan tetapi disini orang lain sama sekali tidak akan bisa mengakses konten didalamnya. baik menambahkan ataupun mengurangi yang ada dalam textarea bahkan untuk menyalinpun tidak akan bisa
Maka hasilnya menjadi seperti ini :
TextField dengan Atribut Password
Seperti yang kita ketahui bahwa saat input password biasanya semua layout yang diinput akan ditutupi dengan buatan hitam ataupun bintangyang tujuannya agar tidak dapat dilihat oleh orang lain yang sedang bersebelahan dengan kita. untuk pengkodeannya sederhana, hanya seperti ini :
Seperti yang kita ketahui bahwa saat input password biasanya semua layout yang diinput akan ditutupi dengan buatan hitam ataupun bintangyang tujuannya agar tidak dapat dilihat oleh orang lain yang sedang bersebelahan dengan kita. untuk pengkodeannya sederhana, hanya seperti ini :
Maksud dari max length disitu adalah untuk membatasi berapa banyak karakter yang diinput. maka hasilnya akan seperti ini :
Checkbox dan Image Button
Checkbox ini sama seperti radio button, hanya saja bentuknya kotak dan apabila di klik akan menjadi tanda centang sedangkan image button adalah kita menggunakan sebuah gambar sebagai sebuah tombol agar terlihat lebih menarik. kurang lebih seperti inilah pengkodean beserta priviewnya :
TextArea Hidden
Disini akan ada 2 contoh pengkodean agar kita dapat mengetahui fungsi dari Teaxtarea hidden ini. pertama :
Kedua :
Jadi apa yang kalian dapat dari 2 screenshot diatas? jika kita pahami fungsi hidden di ss pertama adalah membuat user tidak bisa mengubah negaranya karena sudah ditentukan didalamnya. Jadi ketika user menginput namanya secara otomatis negaranya sudah terisi dengan "Indonesia". sedangkan ss kedua membiarkan user untuk mengisi data negaranya secara mandiri.
Upload File
Fungsi pengkodean yang satu ini adalah agar kita bisa menginput suatu file yang ada dalam penyimpanan kita kedalam web. pengkodean dan hasilnya seperti ini :
Radio Button
Radio button ini seperti sebuah tombol option atau opsi pilihan. biasanya digunakan dalam pengisian form dll yang didalamnya memiliki beberapa option. untuk lebih jelasnya bisa dilihat dari pengkodean beserta hasilnya agar kalian paham wujud dari si radio button ini:v
Checkbox dan Image Button
Checkbox ini sama seperti radio button, hanya saja bentuknya kotak dan apabila di klik akan menjadi tanda centang sedangkan image button adalah kita menggunakan sebuah gambar sebagai sebuah tombol agar terlihat lebih menarik. kurang lebih seperti inilah pengkodean beserta priviewnya :
Option Value dan Datalist
Dalam pengkodean yang satu ini kita akan membuat option value, yang merupakan opsi yang didalamnya secara sengaja sudah disediakan beberapa pilihan tertentu. biasanya digunakan untuk sebuah web pendaftaran, berita dan informasi serta masi banyak lagi. supaya ga pusing karena ga kebayang mening langsung liat kodingannya aja deh😂
Membuat Form Pendaftaran
Sekarang waktunya kita coba membuat sendiri suatu form yang menggabungkan beberapa metode yang sudah disampaikan diatas untuk menguji kemampuan kita dari apa yang sudah kita pelajari diatas. disini saya membuat form pendaftaran yang didalamnya terdapat button, textarea, option value & datalist dan digabungkan dengan table agar hasilnya tertata. langsung saja ini adalah contoh yang dapat kalian jadikan sebagai referensi ataupun contoh dalam metode pembelajaran :
Tampilan yang keluar dari pengkodean diatas akan jadi seperti ini :
Tips :
Dari apa yang sudah kita dapat dan pelajari dari materi diatas sebaiknya kita coba berkreasi & berani mencoba untuk membuat sesuatu yang lebih inovatif sebagai bahan evaluasi dan ajang mengasah keampuan diri untuk lebih paham terhadap materi yang terpaparkan diatas.
Komentar
Posting Komentar