Praktikum III HTML 5 Video Tag Dengan Button Dan Slider

Praktikum III

HTML 5 Video Tag Dengan Button Dan Slider

I.     Tujuan

Tujuan dari praktikum ini adalah:

1. Mahasiswa memahami cara menambahkan dokumen Flash ke halaman website

2. Mahasiswa memahami cara menambahkan video dan audio ke halaman website

3.  Mahasiswa dapat menyajikan file audio dilengkapi control dan slider menggunakan HTML5, Jquery UI dan Bootstrap. 

II.   Alat & Bahan

Alat dan bahan yang digunakan diantaranya:

1.      Komputer

2.      Jquery UI

3.      Bootstrap

III.  Dasar Teori

Css 
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. 

Bootstrap 
Bootstrap adalah sebuah framework css yang dapat digunakan untuk mempermudah membangun tampilan web. Bootstrap pertama kali di kembangkan pada pertangahan 2010 di Twitter oleh Mark Otto dan Jacob Thornton. Saat ini Bootstrap dikembangkan secara open source dengan lisensi MIT. 

Jquery UI 
JQuery UI adalah plugin komponen user interface (hal-hal yang berhubungan dengan antarmuka pengguna) berupa interaksi, widget berfitur lengkap dan efek animasi yang berada di bawah framework JQuery.Setiap komponen dibangun sesuai dengan arsitektur kerja JQuery (menemukan sesuatu, kemudian memanipulasinya) dan memiliki kemampuan untuk menerima tema yang bermacam-macam sesuai dengan keperluan desain Slider, button, dialog boxkotak dialog/modal, accordion, tooltip, tabs, dihasilkan dari jquery ui. 

IV.  Praktikum

Berikut ini langkah kerja yang perlu anda lakukan selama menyelesaikan semua percobaan yang ada pada praktikum ini

1. Tempatkan folder “Praktikum1” beserta isinya pada lokasi yang anda inginkan

2. Pastikan anda menyimpan semua hasil percobaan pada praktikum ini di dalam folder tersebut

3.  Buka teks editor pilihan anda

4.  Ketikkan semua kode yang ada pada tiap percobaan

5. Setiap kali anda menyelesaikan satu percobaan, simpan dengan nama file sesuai nomor percobaan dengan ekstensi .html

6. Apabila anda menggunakan notepad, pastikan anda merubah pilihan tipe file pada “Save asType” menjadi “All Files”

7.  Apabila anda menggunakan notepad++, pada pilihan tipe file, pilih yang bertipe HTML

Hasil Praktikum 

http://hamidahnh.mb.student.pens.ac.id/Pemograman/Menambahkan%20Video%20HTML5.htm

› Read More

Audio Tag dengan tambahan Slider

I. Tujuan

Mahasiswa mampu dan mengetahui cara menampilkan slider untuk mengontrol file audio yang telah ditambatkan.

II. Alat dan Bahan

• Notepad++
• Jquerry UI
• Bootstrap

III. Dasar Teori

CSS
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

BOOTSTRAP
Bootstrap adalah sebuah framework css yang dapat digunakan untuk mempermudah membangun tampilan web. Bootstrap pertama kali di kembangkan pada pertangahan 2010 di Twitter oleh Mark Otto dan Jacob Thornton. Saat ini Bootstrap dikembangkan secara open source dengan lisensi MIT.

JQUERY UI
JQuery UI adalah plugin komponen user interface (hal-hal yang berhubungan dengan antarmuka pengguna) berupa interaksi, widget berfitur lengkap dan efek animasi yang berada di bawah framework JQuery.Setiap komponen dibangun sesuai dengan arsitektur kerja JQuery (menemukan sesuatu, kemudian memanipulasinya) dan memiliki kemampuan untuk menerima tema yang bermacam-macam sesuai dengan keperluan desain Slider, button, dialog boxkotak dialog/modal, accordion, tooltip, tabs, dihasilkan dari jquery ui. 

IV. Tugas

  Dibawah ini merupakan hasil praktikum yang telah saya lakukan :

Link youtube:https://youtu.be/hhDOHfEjymw

› Read More

PEMOGRAMAN MULTIMEDIA PRAKTIKUM 1

Praktikum I

HTML 5 Audio

Surabaya, 3 Maret 2016

I.            Tujuan

Tujuan dari praktikum ini adalah:

1.      mahasiswa memahami cara menambahkan dokumen Flash ke halaman website

2.       Mahasiswa memahami cara menambahkan video dan audio ke halaman website

3.      Mahasiswa memahami element <audio> pada HTML5

II.            Alat & Bahan

Alat dan bahan yang digunakan diantaranya:

1.      Komputer

2.      Modul Praktikum 3

III.            Dasar Teori

HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman  standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser). HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan.

Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web".

Tag merupakan suatu pasangan yang terdiri 2 bagian yang disebut dengan tag awal dan tag akhir. Tag awal dinyatakan dalam bentuk <nama tag> dan tag akhir ddinyatakan dalam bentuk </nama tag>. Format penulisan suatu tag adalah sebagai berikut :

<nama tag> ... </nama tag>

Contoh :

<blink> Teks yang akan ditampilkan </blink>

Sedangkan atribut adalah suatu karakteristik yang menyertai/ada di dalam suatu tag awal. Tag awal dapat memiliki lebih dari satu atribut yang menyatakan karakteristik dari tag tersebut. Format penulisan atributdalam suatu tag bisa dituliskan seperti ini <tag atribut1="value" atribut2="value" ... > dan ditutup dengan tag akhir yaitu </tag>.

IV.            Praktikum

Berikut ini langkah kerja yang perlu anda lakukan selama menyelesaikan semua percobaan yang ada pada praktikum ini

1.      Tempatkan folder “Praktikum1” beserta isinya pada lokasi yang anda inginkan

2.      Pastikan anda menyimpan semua hasil percobaan pada praktikum ini di dalam folder tersebut

3.      Buka teks editor pilihan anda

4.      Ketikkan semua kode yang ada pada tiap percobaan

5.      Setiap kali anda menyelesaikan satu percobaan, simpan dengan nama file sesuai nomor percobaan dengan ekstensi .html

6.      Apabila anda menggunakan notepad, pastikan anda merubah pilihan tipe file pada “Save asType” menjadi “All Files”

7.       Apabila anda menggunakan notepad++, pada pilihan tipe file, pilih yang bertipe HTML.

V.            Hasil Praktikum

1.      Memasukkan audio HTML 5

·         Script Coding

 

·         Hasil pada Chrome

2.      Memasukkan Button Player dengan JavaScript

·         Script Code

·         Hasil Pada Chrome

 

Hasil Player

LINK YOUTUBE: https://youtu.be/YBy19rGCAIA

› Read More