Pemrograman web ~ Multimedia & Form

Assalamualaikum warohmatullahi wabarokatu

Halloo semuanyaa..Balik lagi dengan saya. kali ini saya akan kembali membagikan sedikit ilmu saya tentang Pemrograman Web mengenai Muktimedia & Form.

Multimedia

Ketika sedang mencari atau mempelajari Informasi kerap kali kita mendapatkan Informasi dalam bentuk teks. Sering juga , untuk melengkapi teks yang ada, terdapat gambar yang berguna dalam membantu kita menilustrasikan hal-hal yang sulit dibayangkan. 

Html juga meyediakan fitur untuk memberikan gambar , suara maupun video untuk digunakan dalam dunia web, ingin tau caranya? mari kita simak!

 Menampilkan Audio

Selain menampilkan gambar , Html juga memiliki fitur untuk menambahkan pemutas suara (audio) pada web. elemen Audio digunakan untuk tujuan ini, dan sama seperti elemen img, kita harus memberikan nilai tempat menyimpan file audio melalui atribut src.

See the Pen LatAudio by taufik (@fikmr) on CodePen.

JIka kita ingin audio dapat dimainkan secara otomatis ketika halaman selesai diunduh oleh browser , kita dapat menggunakan embbed autoplay

See the Pen AutoEmmbed by taufik (@fikmr) on CodePen.

Menambahkan Video

Penambahan video pada halaman Html dilakukan dengan elemen video, yang sangat mirip dengan elemen audio. Atribut - atribut yang digunakan pada elemen audio juga digunakan pada elemen video sehingga perbedaan utama pada kedua elemen ini ada pada nama elemen dan dukungan formatnya, kita dapat menambahkan video seperti berikut : 

See the Pen Latvideo by taufik (@fikmr) on CodePen.

Kita juga dapat menambahkan thumbnail diawal video sebelum video dijalankan dengan atribut Poster . Atribut Poster  biasanya disisikan dengan gambar yang relevan dengan video , dan menerima nilai berupa URL  ke sebuah gambar dengan format yang didukung oleh browser pada umumnya.

See the Pen LatThumbnailvideo by taufik (@fikmr) on CodePen.

Menampilkan Flash

Selain Gambar , Audio, dan Video kita juga dapat menambahkan flash atau file yang berformat .swf  dengan menggunakan Atribut Embbed lalu memberi nilai yang berformat .swf . Kita dapat mendownload Flas file/ file .swf di Web-web yang menyediakan file tersebut. Contoh codingan yang menampilkan Flash/ file .swf :

See the Pen LatFlash by taufik (@fikmr) on CodePen.

Kita harus memberikan ijin Adobe Flash Player pada browser nya agar dapat menampilkan isi file . swf nya. Jika tetap tidak bisa berarti Browser nya tidak mensupport file format .swf .

Setelah Kita mengenal Atibut Multimedia pada Html kita juga dapat menggabungkan Atribut - atribut tersebut ke dalam 1 dokumen Html. Berikut contoh yang saya buat dengan menggambungkan Attibut-atribut diatas :

See the Pen Mymedia by taufik (@fikmr) on CodePen.

Menyaikan Komponen Entri Text (Form)

Pada Html tedapat entri textyang fungsinya berbeda-beda salah satunya yang belum dipelajari adalah TextArea .

Atribut TextArea merupakan komponen entri text yang digunakan untuk memasukan textyang tersusun lebih dari 1 baris. Format Umum pengkodean TextsArea :

<textarea atribute="value">

Terdapat beberapa atribut di textarea , diantaranya :

TextArea

Textarea biasanya digunakan untuk meninput atau menuliskan sesuatu diweb yang dapat yang tersusun lebih dari 1 baris.

See the Pen TextArea by taufik (@fikmr) on CodePen.

Kita juga apat menggunakan Atribut cols(kolom) yang berguna menentukan lebar dari TextArea. Contohnya kita dapat menampilkan 3 komponen textarea dengan lebar yang bervariasi.

See the Pen eYOJRWp by taufik (@fikmr) on CodePen.

Di TextArea ini kita dapat membuat agar tulisan yang terdapat pada TextArea hanya dapat dibaca dan disalin tapi tidak dapat diubah yaitu dengan menggunakan Atribut READONLY.

See the Pen PoYZjKy by taufik (@fikmr) on CodePen.

dan kita juga dapat membuat tulisannya tidak bisa diubah tidak bisa disalin tetapi hanya bisa dibaca dengan menambahkan Atribut Disabled

See the Pen TextareaDisabled by taufik (@fikmr) on CodePen.

Didalam Form terdapat beberapa Komponen/Atribut yang biasa digunakan seperti TextField, Button, Checkbox, Uploadfile, OptionvaluedanDatalist.

TextField

TextField adalah salah satu komponen form yang biasanya digunakan untuk Login pada suatu web.Karena diTextField terdapat atribut yang membuat isi dari textnya tesembunyi atau seperti mengisi Password.

See the Pen TextField by taufik (@fikmr) on CodePen.

TextAreaHidden

Atribut ini dugunkan agar hasil inputan/valuenya tidak dapat dilihat atau tesembunyi .

See the Pen TextAreaHidden by taufik (@fikmr) on CodePen.

UploadFile

Agar dapat meng input sebuah file kita dapat menggunakan Komponen UploadFile. Biasanya untuk menginput sebuah gambar yang dipinta saat pengisian form sebuah web.

See the Pen Uploadfile by taufik (@fikmr) on CodePen.

Button

Komponen Button biasanya digunakan disaat penginputan yang memerlukan beberapa pilihan yang hanya bisa dipilih salah satunya saja. Type input yang digunakan yaitu radio.

See the Pen oNvbevy by taufik (@fikmr) on CodePen.

CheckBox

CheckBox hampir sama dengan button hanya saja diCheckbox kita dapat memilih berbagai pilihan tidak perlu memilih salah satu pilihan. Type inputnya checkbox.

See the Pen Checkbox by taufik (@fikmr) on CodePen.

Kita juga dapat menambahkan gambar/icon

OpionvaluedanDatalit

Untuk kompnen ini kegunaanya hampir sama dengan Button dan Checkboc. Akan tetapi tampilan nya sangat berbeda. Komponen ini menampilkan pemilihan yang berupa list.

See the Pen OptionDatalist by taufik (@fikmr) on CodePen.

Dari beberapa Komponen berikut kita dapat membuat form sederhana dengan menggambungkan komponen diatas. Contohnya kita dapat membuat Form Pendaftaran :

See the Pen LYPGjeM by taufik (@fikmr) on CodePen.

Okayy segitu saja yang bisa saya sampaikann . Jangan lupa tunggu Artikel-artikel betikutnya tentang Pemrograman Web ini karena Artikel berikutnya akan ada Kejutan buat kalian semua . See you next time..

Wassalamualikim warohmatullahi wabarokatu