Elemen Media HTML5

Ini lanjutan dari postingan html 5 seblumnya di sini. Pada html 5 ada fungsi atau tag baru untuk multimedia, termasuk audio dan video. Dengan adanya tag ini programmer web tidak begitu tergantung lagi dengan flash. Secara kecepatan memang flash sedikit lebih baik pada web streaming. Tetapi flash tidak bisa terindex oleh Google, juga pemakain memori yang besar.

Sebaliknya html 5 lebih gampang terindex oleh Google, karena memang bahasa mark up standar web, dan pemakaian memori yang kecil. Tetapi memang html 5 sangat bergantung pada penggunaan web browser. Saya menganjurkan menggunakan Google Chrome versi 10, untuk belajar html 5 ini, karena kodek yang di gunain sudah sangat canggih dan yang paling terbaru untuk mendukung penuh teknologi baru ini.

Tag	Description
<audio>	Untuk konten multimedia, sound, musik, dan autio stream lain.
<video>	Untuk konten video, contohnya video klip atau film
<source>	Untuk media resource, didefinisakn di dalam tag video dan audio
<’embed>	Untuk meng-embed elemen flash atau yang lain nya

Inilah sedikit contoh penggunaan tag html, bisa dicoba sendiri kok, karena html5 ga perlu server untuk menjalan kan nya. (Saya menggunakan Google Chrome versi 10, bisa di coba sendiri)

1. Tag Audio

<audio controls="controls">

<source src="ugly.mp3" type="audio/mpeg" />

Your browser does not support the audio element.

</audio>

2. Tag Video

<video src="transformers.mp4" controls="controls">

your browser does not support the video tag

</video>

 3. Tag Embed (elemen flash)

<'embed src="kabuto.swf"></'embed>

source   Plagiarist_punya-magna

Read more

Elemen Baru di HTML 5

Internet telah berubah banyak sejak HTML 4 menjadi standar pada tahun 1999. Sejak sekarang elemen di html 4 yang udah usang atau ga di pake lagi, elemen ini di hapus dan di perbaharui serta di tulis ulang menjadi HTML 5.

Elemen Mark Up yang baru

Elemen baru untuk struktur yang lebih baik.

Tag	Description
<article>	Untuk konten, seperti berita atau artikel, blog,forum dan konten lain nya
<aside>	Untuk konten aside, ditempatkan di dalam.
<command>	Sebuah tombol, atau radio atau cekbox
<details>	Untuk menjelaskan rincian atau detail
<summary>	Sebuah judul, atau ringkasan di dalam elemen details
<figure>	Untuk mengelompokkan bagian yang berdiri sendiri
<figcaption>	Judul dari bagian figure
<footer>	Untuk memberi catatan kaki
<header>	Untuk memberi header
<hgroup>	For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings
<mark>	For text that should be highlighted
<meter>	For a measurement, used only if the maximum and minimum values are known
<nav>	For a section of navigation
<progress>	The state of a work in progress
<ruby>	For ruby annotation (Chinese notes or characters)
<rt>	For explanation of the ruby annotation
<rp>	What to show browsers that do not support the ruby element
<section>	For a section in a document. Such as chapters, headers, footers, or any other sections of the document
<time>	For defining a time or a date, or both
<wbr>	Word break. For defining a line-break opportunity.

Elemen Media Baru

Html 5 memberikan standar baru untuk media, nah ini yang paling keren.

Tag	Description
<audio>	Untuk konten multimedia, seperti sound, audio streaming
<video>	For video content, such as a movie clip or other video streams
<source>	For media resources for media elements, defined inside video or audio elements
<,embed>	For embed content

Elemen Canvas

Elemen canvas ini, bergabung dengan Javascript untuk membuat gambar di halaman web

Tag	Description
<canvas>	For making graphics with a script

Elemen Form yang Baru
Html 5 menawarkan unsur-unsur betuk yang baru, dengan fungsional lebih

Tag	Description
<datalist>	A list of options for input values
<keygen>	Generate keys to authenticate users
<output>	For different types of output, such as output written by a script

Atribut Input Type yang Baru
Atribut jenis elemen input yang memiliki nilai-nilai baru, untuk kontrol input yang lebih baik sebelum mengirimnya ke server

Type	Description
tel	The input value is of type telephone number
search	The input field is a search field
url	The input value is a URL
email	The input value is one or more email addresses
datetime	The input value is a date and/or time
date	The input value is a date
month	The input value is a month
week	The input value is a week
time	The input value is of type time
datetime-local	The input value is a local date/time
number	The input value is a number
range	The input value is a number in a given range
color	The input value is a hexadecimal color, like #FF8800

src  Plagiarist_punya-magna

Read more

Apa itu HTML5 Part 1

HTML singkatan dari Hyper Text Markup Language adalah file teks atau file ASCII yang berisi instruksi/script kepada web browser untuk menampilkan suatu tampilan grafis dari sebuah halaman web. Didalam file HTML terdapat beberapa “tag” atau kode-kode yang dimengerti oleh web browser dan dapat menampilkannya di layar monitor. HTML5 lahir pada tahun 2009 yang merupakan  standar  baru  untuk  HTML, XHTML dan DOM HTML. Sejak munculnya HTML versi 4.01, perkembangan situs dunia semakin berkembang. 

HTML5 merupakan hasil proyek dari   W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group). WHATWG bekerja dengan bentuk situs dan aplikasi, sedangkan W3C merupakan pengembang dari XHTM L 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

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". 

Tujuan dibuatnya HTML5 antara lain:

1. Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript. 
2. Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).
3. Penanganan kesalahan yang lebih baik.
4. Lebih banyak markup untuk menggantikan scripting.
5. HTML5 merupakan perangkat mandiri.

Fitur baru dalam HTML5:

• Elemen canvas, sebagai mode untuk menggambar object dua dimensi (2D).
• Video dan elemen audio untuk media pemutaran.
• Drag-and-Drop
• Dukungan yang lebih baik untuk penyimpanan secara offline.
• Elemen  konten yang  lebih  spesifik, seperti  artikel, footer, header,
  navigation, section.
• Bentuk kontrol form seperti kalender, tanggal, waktu, e-mail, URL, search.

Beberapa kelebihan yang dijanjikan pada HTML5:

• Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML.
• Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya.
• Integrasi ('inline') dengan doctype yang lebih sederhana.
• Penulisan kode yang lebih efisien.

Konten yang ada di situs lebih mudah terindeks oleh search engine. 

Perbedaan Antara HTML5 dan HTML4.01

• Aturan baru saat melakukan parsing berorientasi pada towards dan kompatibilitas; tidak berbasis pada SGML
• Kemampuan untuk mendukung format SVG dan MathML pada text/html
• Elemen baru: article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr
• Tipe baru pada kontrol form : dates and times, email, url, search, color
• Atribut baru: ping (pada elemen a and area), charset (pada meta), async (ada script)
• Atribut global (atribut berikut dapat diterapkan pada setiap elemen html) : id, tabindex, hidden, data-* (atribut data kustom)
• Selain dapat bernilai GET atau POST, elemen attribut <form> kini telah mendukung nilai PUT dan DELETE. (Sebagai contoh kasus lihat Representational State Transfer)
• Elemen yang telah deprecated secara bersamaan akan dihapus : acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u

Kunjungi http://dev.w3.org untuk melihat pembaharuan draft terkini antara Html 5 dan Html 4, tautan ini menyediakan secara lengkap berbagai daftar tambahan, penghapusan, dan perubahan yang terjadi di dalam spesifikasi Html5.

Elemen dan atribut yang tidak digunakan dalam HTML5

Berikut ini beberapa elemen dan atribut yang tidak lagi muncul pada HTML 5:

• center,
• font
• strike, u, big
• frame, frameset, noframes
• acronym
• longdesc
• scope pada td

Contoh HTML 5

<!doctype html> <html> <head> <meta charset=”UTF-8″> <title>Contoh dokumen HTML 5</title> </head> <body> <p>Teks paragraf disini.</p> </body> </html>

Yang menarik dari kesederhanaan kode di atas:

1.  Tidak perlu lagi memakai <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>. Walau tag meta tersebut masih diijinkan digunakan.

2.  Deklarasi <!DOCTYPE html> adalah ‘case-insensitive’. Tidak harus huruf besar/kapital semua.

Saat ini HTML5 masih dalam pengembangan, namun hanya beberapa browser sudah mendukung HTML5. Beberapa browser tersebut seperti Safari, Chrome, Firefox, dan Opera. Kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5. Faktanya adalah, HTML5 adalah masa depan apakah kita suka atau tidak, kita harus tetap mengikuti perkembangannya. Sebenarnya  HTML5 tidak sulit untuk digunakan atau dipahami. Beberapa  alasan untuk mulai menggunakannya sekarang.

Contoh Aplikasi dari HTML5 bisa di lihat di sini

Browser Anda sudah siap untuk HTML5 ? Test saja di sini.

Plagiarist_punya-magna

Read more