TUTORIAL HTML 5 LENGKAP

PENAKAMPUS.BLOGSPOT.COM STMIK AMIKOM YOGYAKARTA

HTML 5

HTML5 merupakan 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. (sumber : Wikipedia)

HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium) dan

WHATWG(Web Hypertext Application Technology Working Group).

Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan

pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja

sama dan membentuk versi baru dari HTML.

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 utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML

agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah

dimengerti oleh mesin.

ATURAN UNTUK MEMPELAJARI HTML5

Beberapa aturan yang harus kamu pelajari saat belajar HTML5, yaitu :

Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript.

Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).

Lebih baik penanganan kesalahan.

Lebih banyak penggunaakn markup untuk mengganti scripting.


HTML5 harus independen.

Proses development-nya harus terlihat untuk umum (visible).

FITUR-FITUR BARU DI HTML5

Video dan Audio : tidak perlu menempelkan flash, quickplayer, atau realplayer untuk memutar audio dan video.

Canvas : Media corat-coret langsung tanpa flash dan applet java.

Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, dan search.

Semantic: Mempermudah designer dengan tag khusus layout, seperti: artikel, footer, header, navigasi, dan section.

Dukungan yang lebih baik untuk penyimpanan secara offline.

API (APPLICATION PROGRAMMING INTERFACES) BARU

Untuk menambah keluwesan pemformatan, pada HTML5 telah dispesifikasikan

pengkodean application programming interfaces (APIs). Antarmuka document object model

(DOM) yang ada dikembangkan dan fitur de facto didokumentasikan. Beberapa APIs terbaru

pada HTML5 antara lain :

Elemen canvas, sebagai mode untuk menggambar object dua dimensi (2D). Lihat

spesifikasi 1.0 untuk canvas 2D.

Timed media playback

Media penyimpanan luring (aplikasi web luring).

Penyuntingan dokumen

Drag and Drop

Cross-document messaging

Manajemen sejarah kunjungan penjelajah web

Tipe MIME dan penanggung jawab protokol registrasi.

Tidak semua teknologi di atas dimasukkan pada spesifikasi HTML5 W3C, meski teknologi

tersebut telah termasuk dalam spesifikasi milik WHATWG HTML. Beberapa teknologi yang

juga terkait namun tidak dijadikan bagian dalam spesifikasi HTML5 W3C dan WHATWG

HTML5 adalah :

Geolocation

Web SQL Database, media penyimpanan database lokal.

API Database terindeks, mode penyimpanan hierarkis key-value (WebSimpleDB).

Web Speech API


DUKUNGAN BROWSER HTML5

Chrome

Safari Apple v.4+

Internet Explorer 9

Opera

Maxthon

Firefox 4, 5, 6 dan seterusnya

MENGUJI BROWSER

Untuk menguji browser yang terinstall di komputer. Apakah telah mendukung HTML5 dapat

diuji dengan link berikut : http://html5test.com/

HASIL UJI COBA

Browser google chrome Versi 33.0.1750.146 m

DOCTYPE UNTUK HTML5


DOCTYPE adalah instruksi untuk web browser tentang apa versi bahasa markup halaman yang ditulis.

Deklarasi DOCTYPE mengacu pada Document Type Definition(DTD).

DTD menetapkan aturan untuk bahasa markup, sehingga browser dapat membuat konten halaman tersebut dengan benar.

Penggunaan DOCTYPE pada html5 lebih di sederhanakan.

Sintak penulisannya :

STRUKTUR DASAR HTML5

ELEMEN YANG DI HAPUS PADA HTML5

Element Use instead

CSS

CSS

CSS

CSS


CSS

CSS

HTML5 SEMANTIC ELEMENTS

Semantic= arti/makna

Semantic elements = elemen dengan makna

Apa Unsur Semantic? Unsur semantik jelas menggambarkan maknanya untuk browser dan developer.

Contohnon-semantikelemen:

dan -tidak menjelaskan tentang isinya.

Contohsemantikelemen:

, , dan -Jelas mendefinisikan isinya.

ELEMEN SEMANTIK BARU di HTML5 Banyak situs web yang ada saat ini mengandung kode HTML seperti ini:

, , atau , untuk menunjukkan link

navigasi, header, dan footer.

HTML5 menawarkan elemen semantik baru untuk mendefinisikan bagian yang berbeda

dari sebuah halaman web:


New Semantic/Structural Elements

Tag Description

Defines an article in the document

Defines content aside from the page content

Defines a part of text that might be formatted in a different direction

from other text

Defines additional details that the user can view or hide

Defines a dialog box or window

Defines a caption for a element

Defines self-contained content, like illustrations, diagrams, photos,

code listings, etc.

Defines a footer for the document or a section

Defines a header for the document or a section

Defines the main content of a document

Defines marked or highlighted text

Defines a command/menu item that the user can invoke from a popup

menu

Defines a scalar measurement within a known range (a gauge)

Defines navigation links in the document

Defines the progress of a task

Defines what to show in browsers that do not support ruby

annotations


Defines an explanation/pronunciation of characters (for East Asian

typography)

Defines a ruby annotation (for East Asian typography)

Defines a section in the document

Defines a visible heading for a element

Defines a date/time

Defines a possible line-break

Contoh :

VIDEO

Digunakan untuk memasukkan video, misalnya ingin memutar video kedalam

halaman web. Pada versi HTML sebelumnya untuk memutar video pada sebuah web

menggunakan plugins tambahanyang biasa disebut flash Player.

Tag Video Pada HTML5, setidaknya ada 3 jenis format videoyang mendukung yaitu :


Ogg(File Ogg dengan Video Codec Theora dan Audio Codec Vorbis) (.ogg)

MPEG4(File MPEG4 dengan Video Codec H.264 dan Audio Codec AAC) (.mp4)

WebM(File WebM dengan Video Codec VP8 dan Audio Codec Vorbis)(.webm) Apabila anda mempunyai video dengan format video bukan ogg, mp4, dan webm. Anda bisa

menggunakan aplikasi video converter salah satunya miro video converter. Tag

Sintaks Penulisanya :

atau

ATRIBUT PADA TAG

Atribute Value Description

controls controls Menentukan kontrol video yang akan ditampilkan

(Contoh: tombol play/pause)

autoplay autoplay Menentukan bahwa video akan mulaiberputar otomatis

src URL Menentukan alamat URL dari mana sumber video

width pixels Mengatur lebar dari video player

height pixels Mengatur tinggi dari video player

loop loop Untuk mengulang / memainkan kembali video yang telah

selesai diputar.

muted muted Menentukan bahwa output suara akan dimute/dihilangkan

poster URL Menentukan gambaryang akan tampil ketika video masih

belum berputar.

preload auto

metadata

none

Menentukanjika dan bagaimana kapan video ini harus diputar

menjalani proses loading ketika halaman terbuka.

Contoh Tag


OUTPUT BROWSER

AUDIO

Digunakan untuk memasukkan suara/audio, misalnya ingin memutar lagu kedalam

halaman web. Ketika di generasi sebelumnya (HTML 4.01) memasukkan audio ke dalam web

masih harus menggunakan flash. Tag Audio Pada HTML5, setidaknya ada 3 jenis format

audioyang mendukung yaitu:Ogg, MP3, Wav.

Tag


ATRIBUT PADA TAG

Atribute Value Description

controls controls Menentukan kontrol video yang akan ditampilkan(Contoh:

tombol play/pause)

autoplay autoplay Menentukan bahwa video akan mulaiberputar otomatis

src URL Menentukan alamat URL dari mana sumber video

loop loop Untuk mengulang / memainkan kembali video yang telah

selesai diputar.

preload auto

metadata

none

Menentukanjika dan bagaimana kapan video ini harus

diputar menjalani proses loading ketika halaman terbuka.


Contoh Tag Audio :

OUTPUT BROWSER

INPUT FORM BARU DI HTML5

Macam -macam jenis input form baru di HTML5 yaitu:

Tag Description


Defines pre-defined options for input controls

Defines a key-pair generator field (for forms)

Defines the result of a calculation

Tipe Inputan barunya :

New Input Types New Input Attributes

color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week

autocomplete

autofocus

form

formaction

formenctype

formmethod

formnovalidate

formtarget

height and width

list

min and max

multiple

pattern (regexp)

placeholder

required step

Artibut Sintaks yang baru :

Type Example

Empty

Unquoted

Double-quoted

Single-quoted



CONTOH INPUT FORM

OUTPUT BROWSER


HTML5 Graphics

Tag Description

Defines graphic drawing using JavaScript

Defines graphic drawing using SVG

New Media Elements

Tag Description

Defines sound or music content

Defines containers for external applications (like plug-ins)

Defines sources for and

Defines tracks for and

Defines video or movie content

ELEMEN HEADER

What Does WWF Do? WWF's mission: WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.


ELEMEN FOOTER

Posted by: Hege Refsnes Contact information: [email protected].

ELEMEN NAVIGASI

HTML | CSS | JavaScript | jQuery


ELEMEN ASIDE

My family and I visited The Epcot center this summer. Epcot Center The Epcot Center is a theme park in Disney World, Florida.

ELEMEN FIGURE DAN FIGCAPTION


Fig1. - The Pulpit Rock, Norway.

TUTORIAL HTML 5 LENGKAP

Documents

Transcript of TUTORIAL HTML 5 LENGKAP