Prak 01 – HTML5 Audio Tag
Prak 01 – HTML5 Audio Tag
1. Tujuan
Mengenal cara menyajikan file audio menggunakan HTML5
2. Alat
3. Bahan
4. Dasar Teori
Hyper Text Markup
Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah
halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web
Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format
ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Sedangkan
HTML5 adalah Generasi selanjutnya dari HTML sebelumnya. HTML5 diciptakan dalam
pengembangan bahasa HTML untuk memperbaiki konten dan memperbarui teknologi
multimedia yang sudah ada pada HTML 4 dan versi sebelumnya agar mudah
dijalankan oleh browser dan mudah dimengerti. HTML5 merupakan kerjasama antara
World Wide Web Consortium (W3C) dan Web Hypertext Application Teknologi Working
Group (WHATWG). WHATWG bekerja dengan bentuk web dan aplikasi, dan W3C bekerja
dengan XHTML 2.0. Pada tahun 2006, mereka memutuskan untuk bekerja sama dan
membuat versi baru dari HTML yaitu HTML5.
Berikut adalah tag
html :
Tag
|
Description
|
Basic
|
|
<!DOCTYPE>
|
Defines the document type
|
<html>
|
Defines an HTML document
|
<title>
|
Defines a title for the document
|
<body>
|
Defines the document's body
|
<h1> to <h6>
|
Defines HTML headings
|
<p>
|
Defines a paragraph
|
<br>
|
Inserts a single line break
|
<hr>
|
Defines a thematic change in the content
|
<!--...-->
|
Defines a comment
|
Formatting
|
|
<acronym>
|
Not supported in HTML5. Defines an acronym
|
<abbr>
|
Defines an abbreviation
|
<address>
|
Defines contact information for the author/owner of a document/article
|
<b>
|
Defines bold text
|
<bdi>
|
Isolates a part of text that might be formatted in a different direction
from other text outside it
|
<bdo>
|
Overrides the current text direction
|
<big>
|
Not supported in HTML5. Defines big text
|
<blockquote>
|
Defines a section that is quoted from another source
|
<center>
|
Not supported in HTML5. Deprecated in HTML 4.01. Defines centered
text
|
<cite>
|
Defines the title of a work
|
<code>
|
Defines a piece of computer code
|
<del>
|
Defines text that has been deleted from a document
|
<dfn>
|
Defines a definition term
|
<em>
|
Defines emphasized text
|
<font>
|
Not supported in HTML5. Deprecated in HTML 4.01. Defines font,
color, and size for text
|
<i>
|
Defines a part of text in an alternate voice or mood
|
<ins>
|
Defines a text that has been inserted into a document
|
<kbd>
|
Defines keyboard input
|
<mark>
|
Defines marked/highlighted text
|
<meter>
|
Defines a scalar measurement within a known range (a gauge)
|
<pre>
|
Defines preformatted text
|
<progress>
|
Represents the progress of a task
|
<q>
|
Defines a short quotation
|
<rp>
|
Defines what to show in browsers that do not support ruby annotations
|
<rt>
|
Defines an explanation/pronunciation of characters (for East Asian
typography)
|
<ruby>
|
Defines a ruby annotation (for East Asian typography)
|
<s>
|
Defines text that is no longer correct
|
<samp>
|
Defines sample output from a computer program
|
<small>
|
Defines smaller text
|
<strike>
|
Not supported in HTML5. Deprecated in HTML 4.01. Defines
strikethrough text
|
<strong>
|
Defines important text
|
<sub>
|
Defines subscripted text
|
<sup>
|
Defines superscripted text
|
<time>
|
Defines a date/time
|
<tt>
|
Not supported in HTML5. Defines teletype text
|
<u>
|
Defines text that should be stylistically different from normal text
|
<var>
|
Defines a variable
|
<wbr>
|
Defines a possible line-break
|
Forms
|
|
<form>
|
Defines an HTML form for user input
|
<input>
|
Defines an input control
|
<textarea>
|
Defines a multiline input control (text area)
|
<button>
|
Defines a clickable button
|
<select>
|
Defines a drop-down list
|
<optgroup>
|
Defines a group of related options in a drop-down list
|
<option>
|
Defines an option in a drop-down list
|
<label>
|
Defines a label for an <input> element
|
<fieldset>
|
Groups related elements in a form
|
<legend>
|
Defines a caption for a <fieldset>, < figure>, or
<details> element
|
<datalist>
|
Specifies a list of pre-defined options for input controls
|
<keygen>
|
Defines a key-pair generator field (for forms)
|
<output>
|
Defines the result of a calculation
|
Frames
|
|
<frame>
|
Not supported in HTML5. Defines a window (a frame) in a frameset
|
<frameset>
|
Not supported in HTML5. Defines a set of frames
|
<noframes>
|
Not supported in HTML5. Defines an alternate content for users that
do not support frames
|
<iframe>
|
Defines an inline frame
|
Images
|
|
<img>
|
Defines an image
|
<map>
|
Defines a client-side image-map
|
<area>
|
Defines an area inside an image-map
|
<canvas>
|
Used to draw graphics, on the fly, via scripting (usually JavaScript)
|
<figcaption>
|
Defines a caption for a <figure> element
|
<figure>
|
Specifies self-contained content
|
Audio/Video
|
|
<audio>
|
Defines sound content
|
<source>
|
Defines multiple media resources for media elements (<video> and
<audio>)
|
<track>
|
Defines text tracks for media elements (<video> and <audio>)
|
<video>
|
Defines a video or movie
|
Links
|
|
<a>
|
Defines a hyperlink
|
<link>
|
Defines the relationship between a document and an external resource
(most used to link to style sheets)
|
<nav>
|
Defines navigation links
|
Lists
|
|
<ul>
|
Defines an unordered list
|
<ol>
|
Defines an ordered list
|
<li>
|
Defines a list item
|
<dir>
|
Not supported in HTML5. Deprecated in HTML 4.01. Defines a directory
list
|
<dl>
|
Defines a definition list
|
<dt>
|
Defines a term (an item) in a definition list
|
<dd>
|
Defines a description of an item in a definition list
|
<menu>
|
Defines a list/menu of commands
|
<command>
|
Defines a command button that a user can invoke
|
Tables
|
|
<table>
|
Defines a table
|
<caption>
|
Defines a table caption
|
<th>
|
Defines a header cell in a table
|
<tr>
|
Defines a row in a table
|
<td>
|
Defines a cell in a table
|
<thead>
|
Groups the header content in a table
|
<tbody>
|
Groups the body content in a table
|
<tfoot>
|
Groups the footer content in a table
|
<col>
|
Specifies column properties for each column within a <colgroup>
element
|
<colgroup>
|
Specifies a group of one or more columns in a table for formatting
|
Style/Sections
|
|
<style>
|
Defines style information for a document
|
<div>
|
Defines a section in a document
|
<span>
|
Defines a section in a document
|
<header>
|
Defines a header for a document or section
|
<footer>
|
Defines a footer for a document or section
|
<hgroup>
|
Groups heading (<h1> to <h6>) elements
|
<section>
|
Defines a section in a document
|
<article>
|
Defines an article
|
<aside>
|
Defines content aside from the page content
|
<details>
|
Defines additional details that the user can view or hide
|
<dialog>
|
Defines a dialog box or window
|
<summary>
|
Defines a visible heading for a <details> element
|
Meta Info
|
|
<head>
|
Defines information about the document
|
<meta>
|
Defines metadata about an HTML document
|
<base>
|
Specifies the base URL/target for all relative URLs in a document
|
<basefont>
|
Not supported in HTML5. Deprecated in HTML 4.01. Specifies a default
color, size, and font for all text in a document
|
Programming
|
|
<script>
|
Defines a client-side script
|
<noscript>
|
Defines an alternate content for users that do not support client-side
scripts
|
<applet>
|
Not supported in HTML5. Deprecated in HTML 4.01. Defines an embedded
applet
|
<embed>
|
Defines a container for an external (non-HTML) application
|
<object>
|
Defines an embedded object
|
<param>
|
Defines a parameter for an object
|
Salah satu tag HTML5
terbaru yang dapat dipakai developer web untuk memperkaya fitur aplikasinya
adalah tag audio. Penggunaan tag audio ini sama sekali tidak membutuhkan plugin
sejenis flash atau silverlight. Seperti pada HTML5 video. HTML5 audio ini ada
tambahan atribut control yaitu play, pause dan volume. Kita harus insert text
diantara tag <audio> dan </audio> untuk browser yang tidak support
elemen <audio>. Elemen <audio> mengijinkan banyak elemen
<source>. Elemen <source> ini dapat menghubungkan kedalam beberapa
file audio.
Sedangkan untuk
mengendalikan audio menggunakan javascript adalah dengan menambahkan elemen
play, pause dan current time. Seperti di bawah ini :
5. Tugas Praktikum
1.
Menampilkan file audio yang diberikan ke dalam sebuah halaman
web menggunakan HTML5 Audio Tag
2.
Membuat screenrecord yang menunjukkan percobaan tentang
manipulasi audio tag melalui Javascript. Diantaranya adalah penggunaan perintah
play(), pause(), dan properti currentTime
7. Hasil Praktikum
8. Kesimpulan
Dari hasil praktikum ini dapat disimpulkan bahwa HTML5 memiliki syntax untuk memutar audio.
Syntax javascript dapat digunakan untuk memanipulasi perintah pada HTML5, yaitu dengan menambahkan aturan play(), pause(), dan currentTime() untuk memanipulasi perintah syntax HTML5.
Syntax javascript dapat digunakan untuk memanipulasi perintah pada HTML5, yaitu dengan menambahkan aturan play(), pause(), dan currentTime() untuk memanipulasi perintah syntax HTML5.
9. Referensi
Mohhasbias.com
Comments
Post a Comment