Code/Tag di HTML5
Halaman ini akan menerangkan Tag/Kode-kode pada HTML5, dan memberikan contoh untuk Video dan Audio di HTML5. Sebelum melanjutkan anda harus mengerti Tentang Apa itu HTML5 dan apa keunggunalan-nya, serta mengerti perbedaan antara HTML5 dan HTML4. Oke kita langsung saja memperkenalkan Tag/Kode-kode pada HTML5 disertai apa yang Terbaru di HTML5
TAG/CODE
|
DISKRIPSI
|
<!--…à
|
Mendefinisikan sebuah komentar
|
<!DOCTYPE>
|
Mendefinisikan tipe dokumen
|
<a>
|
Mendefinisikan sebuah hyperlink
|
<abbr>
|
Mendefinisikan sebuah singkatan
|
<address>
|
Mendefinisikan informasi kontak untuk pemilik atau penulis dokumen/artikel
|
<area>
|
Mendefinisikan area didalam sebuah gambar
|
<article> New!
|
Mendefinisikan artikel
|
<aside> New!
|
Mendefisikan isi selain dari konten utama
|
<audio> New!
|
Mendefinisikan suara/music
|
<b>
|
Mendefinisikan cetak tebal dalam teks (bold)
|
<base>
|
Menentukan URL dasar/target untuk semua URL relatif dalam dokumen
|
<bdi> New!
|
Membatasi bagian teks yang mungkin memiliki format baca berbeda dengan teks diluarnya
|
<bdo>
|
Mengganti arah teks saat ini
|
<blockquote>
|
Mendefinisikan sebuah bagian yang dikutip dari sumber lain
|
<body>
|
Mendefinisikan tubuh dokumen
|
<br>
|
Mendefinisikan perintah untuk ganti satu baris
|
<button>
|
Mendefinisikan tombol yang dapat di-klik
|
<canvas> New!
|
Digunakan untuk menggambar grafis melalui script
|
<caption>
|
Mendefinisikan caption untuk tabel
|
<cite>
|
Mendefinisikan judul suatu objek
|
<code>
|
Mendefinisikan suatu teks berupa kode-kode computer
|
<col>
|
Menentukan properties dari kolom didalam element <colgroup>
|
<colgroup>
|
Menentukan kelompok satu atau lebih kolom dalam format sebuah tabel
|
<command> New!
|
Mendefinisikan sebuah tombol komando (command button)
|
<datalist> New!
|
Menentukan daftar pilihan standar untuk kontrol input
|
<dd>
|
Mendefinisikan deskripsi sebuah item yang ada pada definition list
|
<del>
|
Mendefinisikan efek strikethrough pada kalimat teks
|
<details> New!
|
Mendefinisikan detail tambahan yang dapat ditampil-sembunyikan oleh user
|
<dfn>
|
Mendefinisikan definition term
|
<div>
|
Mendefinisikan section dalam dokumen
|
<dl>
|
Mendefinisikan sebuah definition list
|
<dt>
|
Mendefinisikan istilah (term) dalam definition list
|
<em>
|
Mendefinisikan efek emphasized pada teks
|
<embed> New!
|
Mendefinisikan sebuah aplikasi eksternal / plugins
|
<fieldset>
|
Mengelompokkan elemen-elemen yang mirip dalam bentuk form
|
<figcaption> New!
|
Mendefinisikan caption untuk elemen <figure>
|
<figure> New!
|
Menentukan sebuah konten mandiri
|
<footer> New!
|
Mendefinisikan sebuah footer pada dokumen atau section
|
<form>
|
Mendefinisikan sebuah form untuk input user
|
<h1> to <h6>
|
Mendefinisikan heading untuk HTML
|
<head>
|
Mendefinisikan informasi yang terkait dengan dokumen
|
<header> New!
|
Menentukan pengenalan awal halaman web atau kelompok dari elemen navigasi untuk dokumen
|
<hgroup> New!
|
Mengelompokkan elemen <h1> sampai <h6> ketika heading memiliki multiple level
|
<hr>
|
Mendefinisikan sebuah penanda perubahan tematik dalam konten
|
<html>
|
Mendefinisikan akar dari dokumen HTML
|
<i>
|
Mendefinisikan efek italic pada teks
|
<iframe>
|
Mendefinisikan sebuah frame
|
<img>
|
Mendefinisikan sebuah gambar
|
<input>
|
Mendefinisikan sebuah kontrol input
|
<ins>
|
Mendefinisikan teks yang telah dimasukkan dalam dokumen (diikuti efek underline)
|
<keygen> New!
|
Mendefinisikan sebuah key generator untuk form
|
<kbd>
|
Mendefinisikan input dari keyboard (format teks)
|
<label>
|
Mendefinisikan label untuk elemen <input>
|
<legend>
|
Mendefinisikan sebuah caption untuk elemen <fieldset>, <figure> dan <details>
|
<li>
|
Mendefinisikan daftar item
|
<link>
|
Mendefinisikan relasi diantara dokumen dan sebuah sumber eksternal, kebanyakan digunakan untuk merelasikan kepada CSS
|
<map>
|
Mendefinisikan sebuah gambar yang dapat berfungsi sebagai client-side map
|
<mark> New!
|
Mendefinisikan sebuah teks yang disorot/ditandai
|
<menu>
|
Mendefinisikan sebuah daftar/menu
|
<meta>
|
Mendefinisikan sebuah metadata tentang dokumen HTML
|
<meter> New!
|
Mendefinisikan pengukur untuk ukuran skalar dalam kisaran yang diketahui
|
<nav> New!
|
Mendefinisikan link navigasi
|
<noscript>
|
Mendefinisikan sebuah konten alternatif untuk pengguna yang telah menonaktifkan script pada browser atau memiliki browser yang tidak mendukung script tersebut
|
<object>
|
Mendefinisikan objek yang melekat di dalam dokumen HTML, contohnya file multimedia
|
<ol>
|
Mendefinisikan numbered list
|
<optgroup>
|
Mengelompokkan opsi-opsi yang terkait ke dalam bentuk drop-down
|
<option>
|
Mendefinisikan sebuah pilihan dalam bentuk drop-down
|
<output> New!
|
Mendefinisikan sebuah hasil dari kalkulasi/perhitungan
|
<p>
|
Mendefinisikan sebuah paragraph
|
<param>
|
Mendefinisikan sebuah parameter untuk objek
|
<pre>
|
Mendefinisikan teks yang belum ditentukan formatnya
|
<progress> New!
|
Mendefinisikan sebuah perkembangan jalannya proses
|
<q> New!
|
Mendefinisikan sebuah kalimat kutipan (quote)
|
<rp> New!
|
Mendefinisikan apa yang harus ditampilkan apabila browser tidak mensupport tag <ruby>
|
<rt> New!
|
Mendefinisikan penjelasan atau cara baca dari karakter Asia timur ( <ruby> )
|
<ruby> New!
|
Menentukan sebuah penulisan huruf Asian (kanji, mandarin, dll)
|
<s>
|
Menentukan teks yang tidak lagi benar, akurat atau relevan (diikuti efek strikethrough)
|
<samp>
|
Mendefinisikan sampel output dari program computer (format teks)
|
<script>
|
Mendefinisikan sebuah script
|
<section> New!
|
Mendefiniskan section dalam dokumen
|
<select>
|
Mendefinisikan sebuah list dalam bentuk drop-down
|
<small>
|
Mendefinisikan teks yang lebih kecil (format teks)
|
<source> New!
|
Mendefinisikan sumber elemen media yang beruntun ( <video> dan <audio> )
|
<span>
|
Mendefinisikan section dalam dokumen
|
<strong>
|
Mendefinisikan teks penting (format teks)
|
<style>
|
Menyimpan info style sebuah dokumen
|
<sub>
|
Mendefinisikan teks subsricpt
|
<summary> New!
|
Mendefinisikan heading untuk bagian <detail>
|
<sup>
|
Mendefinisikan teks superscript
|
<table>
|
Mendefinisikan sebuah tabel
|
<tbody>
|
Mengelompokkan bagian tubuh (body) dari tabel HTML
|
<td>
|
Mendefinisikan sebuah cell dalam tabel
|
<textarea>
|
Mendefinisikan kontrol input yang terdiri dari banyak baris
|
<tfoot>
|
Mengelompokkan bagian footer dari tabel HTML
|
<th>
|
Menentukan dalam tabel bahwa didalam tag <th> adalah header tabel
|
<thead>
|
Mengelompokkan bagian header dari tabel HTML
|
<time> New!
|
Mendefinisikan waktu (24 jam) atau tanggal dalam format Gregorian
|
<title>
|
Mendefinisikan judul dokumen
|
<tr>
|
Mendefinisikan sebuah baris dalam tabel
|
<track> New!
|
Mendefinisikan subtitle dari elemen multimedia ( <audio> dan <video> )
|
<ul>
|
Mendefinisikan bulleted list
|
<var>
|
Mendefinisikan sebuah variable
|
<video> New!
|
Mendefinisikan video atau film
|
<wbr> New!
|
Mendefinisikan ganti baris ketika teks dirasa terlalu panjang
|
Tutorial Membuat Tag/Code Video<video> pada HTML5
Pada versi HTML sebelumnya, tidak disertai oleh tag <video>.Apabila ingin memasukkan video ke dalam sebuah web masih harus menggunakan plugins tambahan yang biasa disebut flash player. Kelebihan di dalam tag <video> adalah dalam browser tidak perlu menggunakan flash player, dan buffering menjadi lebih ringan karena fasilitasnya sudah di backing oleh kode HTML sendiri.
Atribut Opsional
| ||
Attribute
|
Value
|
Description
|
autoplay
|
autoplay
|
Menentukan bahwa video akan mulai berputar otomatis
|
controls
|
controls
|
Menentukan kontrol video yang akan ditampilkan (Contoh: tombol play/pause)
|
height
|
pixels
|
Mengeset tinggi dari video player
|
loop
|
loop
|
Menentukan bahwa video akan berputar kembali meski video telah habis
|
muted
|
muted
|
Menentukan bahwa output suara akan di mute / dihilangkan
|
poster
|
URL
|
Menentukan gambar yang akan tampil ketika video masih belum berputar
|
preload
|
auto
metadata
none
|
Menentukan jika dan bagaimana kapan video ini harus menjalani proses loading ketika halaman terbuka
|
src
|
URL
|
Menentukan alamat URL dari mana
|
Contoh kode tag/code <video> pada HTML5
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls" >
<source src="bbb.mp4" type="video/mp4" />
<source src="bbb.ogg" type="video/ogg" />
<source src="bbb.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</body>
</html>
|
Output yang akan muncul pada browser
<video width="320" height="240" controls="controls" >
width="320", height"240" dan controls="controls" adalah Attribut Opsional
Note : Akan ada angka jumlah waktu video ketika sebelum anda play. jika tidak muncul angka, pasti ada yang salah, silahkan di perbaiki lagi !!
Tutorial Membuat Tag/Code Audio<audio> pada HTML5
Digunakan untk memasukkan audio, misalnya lagu kedalam halaman web. Pada HTML5, hal itu dipermudah dengan tag <audio>, ketika di generasi sebelumnya (HTML 4.01) memasukkan audio ke dalam web masih harus menggunakan flash.
Atribut opsional
| ||
Attribute
|
Value
|
Description
|
autoplay
|
autoplay
|
Menentukan bahwa audio akan mulai berputar otomatis
|
controls
|
controls
|
Menentukan kontrol audio yang akan ditampilkan (Contoh: tombol play/pause)
|
loop
|
loop
|
Menentukan bahwa audio akan berputar kembali meski
audiotelah habis
|
preload
|
auto
metadata
none
|
Menentukan jika dan bagaimana kapan audio ini harus menjalani proses loading ketika halaman terbuka
|
src
|
URL
|
Menentukan alamat URL dari mana sumber audio
|
Contoh tag <audio>
<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src="multimedia/song.ogg" type="audio/ogg" />
<source src="multimedia/song.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio>
</body>
</html>
|
Output yang akan muncul dalam browser
Note : Akan ada angka jumlah waktu audio ketika sebelum anda play. jika tidak muncul angka, pasti ada yang salah, silahkan di perbaiki lagi !!
Itu adalah Code/Tag di HTML5 Serta Contoh-nya
Baca artikel lain nya tentang HTML5 dan CSS3 disini
.jpg)
Posts
No comments:
Post a Comment