Prak 01 – HTML5 Audio Tag

-
1. Tujuan

Mengenal cara menyajikan file audio menggunakan HTML5

2. Alat

Notepad++

3. Bahan

Stance Gives You Balance by Hogan Grip download info

4. Dasar Teori

 - HTML
HTML adalah kependekan dari Hypertext Markup Language dan pengertiannya adalah sekumpulan text atau file ASCII yang berisi intruksi atau perintah program untuk web browser untuk menampilkan tampilan grafis sebuah halaman website. File HTML dapat dibuat menggunakan aplikasi text editor pada semua system operasi,contohnya adalah Notepad di windows atau simple text di Macintosh. HTML merupakan cross platform karena walau pembuatannya menggunakan operating system tertentu, namun akan memiliki tampilan yang sama disemua operating system.

- HTML5
HTML5 adalah Generasi selanjutnya dari HTML sebelumnya. HTML5 diciptakan dalam pengembangan bahasa HTML untuk memperbaiki konten dan memperbarui teknologi multimedia yang sudah ada padaHTML 4 dan versi sebelumnya agar mudah dijalankan oleh browser dan mudah dimengerti. HTML5merupakan kerjasama antara World Wide Web Consortium (W3C) dan Web Hypertext Application Teknologi Working Group (WHATWG). WHATWG bekerja dengan bentuk web dan aplikasi, dan W3Cbekerja dengan XHTML 2.0. Pada tahun 2006, mereka memutuskan untuk bekerja sama dan membuat versi baru dari HTML yaitu HTML5.

Struktur dari HTML5
Sumber : http://under-88.blogspot.co.id/2012/05/definisi-dan-pengertian-html5.html#axzz41uFxGScx
- HTML Tag
Tag HTML pada umumnya dibuat berpasangan, ada tag pembuka dan ada tag penutup. Format umum tag HTML adalah :

<nama_tag> Teks yang akan ditampilkan </nama_tag>

Sebuah contoh, misalnya judul halaman ini menggunakan tag header : 
<h3> Apa itu tag HTML ? </h3>

Tag tersebut akan memberikan informasi kepada web browser untuk menampilkan teks "Apa itu tag HTML ?" dengan style header level 3. Tag HTML dapat menginstruksikan web browser untuk menebalkan sebuah teks (bold), menampilkan dengan format miring/italic, membuatnya sebagai sebuah header dengan level tertentu, atau membuatnya sebagai sebuah hyperlink ke halaman web yang lain.

Sebuah tag penutup </nama_tag> selalu diberikan karakter "/", yang berfungsi untuk memberhentikan proses tagging kepada web browser. Banyak tag HTML yang selalu berpasangan dengan cara seperti ini. Bila kita lupa memberikan tag penutup maka web browser akan menganggap bahwa tag tersebbut berlaku untuk keseluruhan dokumen dan hasil tampilan halaman web tersebut tidak seperti yang kita inginkan.

- HTML5 Audio Tag

HTML audio element menunjukkan sebuah sound atau audio yang dapat disisipkan pada halaman web dan diputar untuk didengarkan. Modern browser mendukung beberapa format file audio diantaranya: mp3, ogg dan wav. Konten lain (seperti teks) dapat disisipkan untuk browser yang tidak mendukung HTML5 audio, dan apabila audio file tidak dapat diputar, maka konten ini akan muncul sebagai gantinya (fallback).
http://dul.web.id/belajar/html/tag-element/audio.php
5. Hasil Praktikum
Percobaan 1


Percobaan 2
6. Kesimpulan

Komentar

Posting Komentar

Postingan populer dari blog ini

Praktikum 5 - Head Turn with Anticipation

-
Gambar
Tujuan Membuat animasi kepala menoleh dengan antisipasi (head turn with anticipation) Dasar Teori 1. Anticipation Anticipation adalah persiapan sebelum aksi, yang diikuti oleh sebuah aksi kemudian penyelesaian aksi tersebut. Hal ini dapat membangkitkan ketegangan atau kelucuan pada suatu aksi tertentu. Bagaimana antisipasi ini digunakan tergantung pada banyaknya aksi yang akan digunakan. Misalnya, awalan untuk lari, melompat atau perubahan ekspresi. http://www.gamasutra.com/db_area/images/feature/6026/anticipation.png 2. Timing Gambar yang jumlahnya banyak akan menghasilkan gerakan lambat dan halus. Gambar sedikit menghasilkan gerakan lebih cepat dan lebih kasar. Berbagai waktu lambat dan cepat dalam adegan menambahkan tekstur dan menarik bagi gerakan. Juga, ada waktu dalam akting dari karakter untuk membangun suasana hati, emosi, dan reaksi terhadap karakter lain atau situasi. Agar timing akurat, diperlukan pengaturan dope sheets pada animasi manual maupun timel...
Baca selengkapnya

Kober Mie Setan Surabaya

-
Gambar
Bagi pecinta kuliner pedas, makanan yang satu ini layak untuk dicoba. Terletak di Jalan Kaca Piring No 14 Surabaya ini memang selalu ramai didatangi pengunjung. Restauran ini mulai buka pukul 02.00 PM - 12.00 PM. Walau begitu pengunjung mulai ramai berdatangan ketika waktu mulai beranjak sore. Menu makanan yang dijual disana ada 2 yaitu Mie Goreng Setan dan Mie Goreng Iblis. Untuk tingkat kepedasannya kita disediakan beberapa tingkatan yaitu Level S untuk 10 cabai, Level M untuk 20 cabai, Level XL untuk 50 cabai dan Level XXL untuk 100 cabai. Selain itu juga disediakan request level yang memperbolehkan anda untuk memesan jumlah cabai sesuai keinginan anda. Minuman yang dijual disana mempunyai nama yang unik seperti Es Genderuwo, Es Kuntilanak, Es Pocong, Es Tuyul dan masih banyak lagi. Harga yang dibandrol pun cukup murah, sesuai dengan kantong pelajar. Untuk minuman antara 7000 - 8000 IDR dan untuk mie setannya 8500 - 9500 IDR.
Baca selengkapnya

Membuat Bouncing Ball dengan Pencil 2D

-
Gambar
Untuk membuat animasi bola memantul atau Bouncing Ball tidaklah sulit, ini merupakan tahap dasar dalam membuat animasi 2d. Berikut ini adalah langkah-langkah untuk membuat bouncing ball. Bukalah software Pencil 2D pada PC/Laptop anda. Klik dua kali pada Bitmap Layer, lalu ubah nama layer yang akan dijadikan sebagai background kemudian klik OK. Klik dua kali pada Vector Layer, lalu ubah nama layer yang akan dijadikan sebagai character kemudian klik OK. Setelah itu, klik Layer Background dan tambahkan beberapa key frame Klik layer Backrground, lalu kita tarik garis pada workspace untuk jalan pantulan bolanya. Klik layer Character, lalu tambahkan beberapa key frame untuk menggambar objek. Pilih tombol Select Rectangle , lalu select pada seluruh garis. Klik kedua layer sekaligus untuk membuat sebuah objek, dengan cara klik tombol diatas layer. Klik toolbar Pen tool, ubah size sesuai keinginan. Lalu buat lingkaran pada workspace. Jika sudah, klik toolbar Select Rectangle, lal...
Baca selengkapnya