Perkembangan Bahasa Pemrograman HTML5

Disusun Untuk Memenuhi Tugas Mata Kuliah

Teknologi Informasi Dan Komunikasi

Hari Kamis Pukul 07:00-08:40 WIB

Dosen Pengampu :

Septia Luthfi, S.Kom, M.Kom

Oleh :

Kartin Yuliyanti

1102412091

Rombel : 01

KURIKULUM DAN TEKNOLOGI PENDIDIKAN

UNIVERSITAS NEGERI SEMARANG

2013

BAB I

PENDAHULUAN

A. LATAR BELAKANG

Informatika adalah disiplin ilmu teknik yang menangani masalah

transformasi atau pengolahan fakta simbolik dengan menggunakan komputer

melalui proses-proses logika, membahas informatika pastinya sangat berhubungan

dengan bahasa pemrograman. Bahasa pemrograman itu sendiri sering diistilahkan

dengan bahasa komputer, adalah teknik komando atau instruksi standard untuk

memerintah komputer, untuk itu bahasa pemrograman merupakan suatu alat yang

sangat penting bagi programer untuk mengoprasikan komputer.

Di dunia komputer terdapat beraneka ragam bahasa pemrograman, setiap

bahasa pemrograman memiliki kelebihan dan kekurangan masing-masing untuk

itu programer berhak untuk menentukan bahasa pemrograman mana yang akan

digunakan.

B. RUMUSAN MASALAH

a. Bagaimana sejarah dan perkembangan HTML5?

b. Apa saja fitur yang ada pada HTML5?

c. Apa kelebihan pada HTML5?

d. Apa kekurangan yang dimiliki HTML5?

e. Bagaimana cara membuat kode dalam HTML5?

f. Bagaimana perbandingan HTML5 dengan HTML sebelumnya?

C. TUJUAN

a. Mengetahui sejarah dan perkembangan HTML5

b. Mengetahui fitur yang ada pada HTML5

c. Mengetahui kelebihan pada HTML5

d. Mengetahui kekurangan yang dimiliki HTML5

e. Mengetahui cara membuat kode dalam HTML5

f. Mengetahui perbandingan HTML5 dengan HTML sebelumnya

D. MANFAAT

Penyusunan makalah ini diharapkan dapat bermanfaat bagi siapa saja yang

membacanya. Sebagai pengetahuan tentang bahasa pemrograman menggunakan

HTML5, dari pengertian, sejarah dan perkembangan, versi, kelebihan,

kekurangan dan implementasinya di bidang pendidikan maupun bisnis.

BAB II

PEMBAHASAN

A. PENGERTIAN DAN PERKEMBANGAN

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan

menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet.

HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada

tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga

bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan

HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung

teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah

dimengerti oleh mesin.

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua

(World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa

markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML.

HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML

1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-

beda oleh banyak perangkat lunak pembuat 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. 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.

HTML5 adalah suatu spesifikasi atau standard yang dikeluarkan oleh

W3C (World Wide Web Consortium) sebagai revisi dari standard HTML.

Saat ini ditulis kita banyak menjumpai aplikasi web yang masih menggunakan

standard HTML4 namun beberapa sudah mulai migrasi ke standard web

HTML5.

Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk

mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang

menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser.

Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan

Silverlight.

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:

• Unsur kanvas untuk menggambar.

• Video dan elemen audio untuk media pemutaran.

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

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.

Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai

banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif.

Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web

ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya

adalah Flash dan Silverlight.

Semakin menjamurnya plugin didalam aplikasi atau browser membuat

aplikasi web ini susah untuk menembus banyak browser. Hal ini dikarenakan

setiap plugin mempunyai cara yang berbeda-beda, sebagai contoh kita ingin

memasang plugin flash untuk sharing video maka pada halaman web kita

harus ditulis sebagai berikut

<object type="application/x-shockwave-flash" width="400" height="220"

wmode="transparent" data="flvplayer.swf?file=movies/holiday.flv">

<param name="movie" value="flvplayer.swf?file=movies/holiday.flv" />

<param name="wmode" value="transparent" />

</object>

Contoh diatas menggunakan plugin Flash dari Adobe untuk menjalankan

aplikasi web pada browser maka lain caranya bila kita menggunakan

Silverlight. Teknologi Silverlight dikembangkan oleh Microsoft. Contoh

penggunaan Silverlight pada halaman web dapat dilihat pada HTML dibawah

ini

<object width="300" height="300" data="data:application/x-silverlight-

2," type="application/x-silverlight-2" >

<param name="source" value="SilverlightApplication1.xap"/>

</object>

HTML5 ini dibuat menyederhanakan kompleksitas penggunaan media

video dengan standard baru yaitu penggunaan tag <video>. Dengan fitur baru

ini maka kita cukup menulis script untuk menjalankan file video sebagai

berikut

<video src=tutorialku.mp4>

</video>

Isu bagaimana menjalankan file video pada aplikasi web merupakan

salah satu contoh bagaimana HTML4 tidak dapat mencakup masalah ini dan

masih banyak lagi isu pada HTML4. Oleh karena itu, kita sudah saatnya

memanfaatkan HTML5 sebagai standard aplikasi web kita.

B. FITUR HTML5

HTML5 adalah generasi berikutnya dari html 4, dimana pada html 5 ini

ditambahkan fitur – fitur baru yang mengedepankan penjalanan konten yang

berat pada device dengan tenaga rendah yang pastinya membuat para

programer lebih mudah dalam menerapkannya dan berakibat lebih user

friendly dari sisi pengguna.

Pada HTML5 terdapat fitur elemen <video>, <audio> dan

<canvas>, tetapi juga integrasi dari konten gambar grafis vektor (yang

sebelumnya kita ketahui dengan tag <object>). Artinya, konten multi media

dan grafis dalam website akan dapat ditangani dan dieksekusi dengan lebih

mudah dan lebih cepat, tanpa membutuhkan plugin dan dan API tambahan.

Adapun fitur yang tersedia :

1. <canvas>, memungkinkan menggambar menggunakan script kode seperti

JavaScript. Dibandingkan dengan versi terdahulunya yang perlu

menggunakan aplikasi tambahan untuk membuat interaksi seperti flash.

2. <audio> dan <video>, merupakan tag penanda untuk konten audio dan

video. Jadi kita dapat menyisipkan konten audio dan video secara langsung,

berbeda dengan generasi sebelumnya yang harus menggunakan flash untuk

menyisipkan konten ini.

3. , digunakan untuk menampilkan konten interaktif (plugin) atau aplikasi

eksternal.

4. <section>, digunakan untuk mendefinisikan section apapun pada

dokumen. Dapat dikategorikan bekerja seperti div yang memisahkan section

yang berbeda.

5. <article>, mendifinisikan artikel, komentar pengguna atau sesuatau konten

yang independen.

6. Local Storage, berfungsi sebagai pengganti cache sebagai media

penyimpan halaman history web. memungkinkan menyimpan data cache

lebih banyak pada local dibanding dengan browser biasa.

7. Web Workers, pada dasarnya membuat proses load java script yang

kadang kali mengganggui dengan menjadikan proses lambat menjadi lebih

cepat, shingga dapat dilakukan proses multi tasking.

8. Semantic , membuat halaman web lebih dinamis, diantaranya akan

menghentikan programer dalam menggunakan tag div atau nav sebagai

navigasi.

DOCTYPE

HTML5 memerlukan DOCTYPE yang ditentukan untuk memastikan

bahwa browser merender atau membaca halaman situs dalam mode standar.

Deklarasi DOCTYPE untuk sintaks HTML dan bersifat case-sensitive,

<DOCTYPE html!>. Doctypes dari versi sebelumnya dari HTML lebih

panjang karena masih berbasis SGML dan karena itu diperlukan suatu

referensi untuk DTD. Dengan HTML5 ini tidak lagi digunakan dan browser

hanya memerlukan syntax yang lebih sederhana, <DOCTYPE html!>.

HTML5 DOCTYPE

<!DOCTYPE html>

Vesri HTML sebelumnya DOCTYPE menggunakan rerferensi DTD,

seperti contoh ini:

HTML 4.01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5 Set Karakter

Untuk menampilkan halaman HTML dengan benar, browser harus tahu

apa Character Sets (charset) yang digunakan. Pada HTML 5 charset Anda

dapat menggunakan elemen <meta> dengan atribut charset yang menentukan

pengkodean.

Berikut adalah contoh sederhana:

<meta charset="UTF-8">

Contoh di atas dapat menggantikan pemakaian <meta http-equiv="Content-

Type" content="text/html; charset=UTF-8"> meskipun sintaks tersebut masih

diperbolehkan.

Contoh struktur dokumen HTML5 minimum :

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>...</title>

</head>

<body>

<header>...</header>

<nav>...</nav>

<article>

<section>

...

</section>

</article>

<aside>...</aside>

<footer>...</footer>

</body>

</html>

C. KELEBIHAN

HTML5 adalah sebuah prosedur pembuatan tampilan web baru yang

merupakan penggabungan antara CSS, HTML itu sendiri dengan Java Script.

Teknologi ini mulai diluncurkan pada tahun 2009, namun sampai saat ini

masih dalam tahap pengembangan. Beberapa kelebihan yang dimiliki oleh

HTML5 (sebagai hipotesis awal) adalah:

Cleaner code, karena sebagian besar kode telah termasuk di dalam sintaks

html5, maka kode nampak terlihat lebih sederhana daripada penggabungan

antara html, css dan java script.

Greater consistency, HTML5 telah melakukan banyak sekali penambahan

sintaks yang dibuat dalam struktur lebih baik dan lebih sederhana daripada

sintaks-sintaks sebelumnya. Hal ini membuat developer terbantu dalam

meningkatkan konsistensi dalam membangun sebuah web.

Improve Semantics, dengan berbagai elemen kode di dalam html5 yang

telah distandarisasi, maka nilai semantik dari sebuah web dapat lebih

ditingkatkan. Itu berarti bahwa bagian-bagian dari web seperti header, nav,

footer dan beberapa bagian lainnya terdefinisi dengan jelas maksud serta

tujuannya selain itu juga terbentuk dalam sebuah “machine readible format”

Improved Accessibility, dengan teknologi HTML5 yang memudahkan

struktur pembangunan sebuah web, maka developer dapat membangun

pemahaman yang lebih detil mengenaik halaman web.

Client-side Database, HTML5 menyediakan model database SQL yang

baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini di

sisi client.

Geolocation, HTML5 mempunyai API yang terintegrasi terhadap

geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain

seperti Google Latitude pada iphone.

Offline Aplication Cache, pengguna dapat terus melakukan interaksi

dengan aplikasi meskipun mereka terputus dari jaringan internet.

Smarter Forms, terdapat semacam reguler expression (regex) yang

membuat form mampu mengenali secara lebih baik tentang input, validasi

data dan interaksi dengan elemen lain (misal : format email, password dll)

Sharper focus on Web Application Requiments, HTML5 membuat sebuah

mekanisme yang lebih mudah dalam hal pembuatan front end, aplikasi chat,

tools drag and drop, video player, pengolah grafis dan masih banyak lagi.

Fitur kanvas untuk menggambar menggunakan script code

Fitur video dan audio untuk media pemutar file multimedia

Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya

Integrasi (‘inline’) dengan doctype yang lebih sederhana

Penulisan kode yang lebih efisien

Penanagan kesalahan yang lebih baik

Mengurangi kebutuhan untuk plugin eksternal

Lebih markup untuk menggantikan scripting

Tag Baru seperti header, footer, nav, section, asidedll memungkinkan

browser untuk mengakses konten dengan mudah. Sebelumnya, kita hanya

menentukan hal tersebut dengan tag dan menggunakan atribut id ataupun

class.

D. KEKURANGAN

Kekurangan yang dimiliki HTML 5, saat ini HTML5 masih dalam

pengembangan, sehingga hanya beberapa browser yang sudah mendukung

HTML5, seperti fitur-fitur pada HTML 5 tidak semuanya bisa berfungsi

dengan baik pada beberapa browser. Beberapa browser yang sudah

mendukung HTML 5 seperti Safari, Chrome, Firefox, dan Opera. Namun

kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari

HTML5.

E. Membuat kode HTML

Belajar HTML sebernarnya diperlukan kalau kita ingin terjun di dunia

online, misalnya bisnis online karena sedikit banyak akan menuntut

kemampuan kita dalam mengedit kode - kode HTML. Walaupun kita

menggunakan blog engine seperti Wordpress yang mempunyai plugin -

plugin yang lengkap, namun sering ditemui kita harus mengedit sidebar,

menempatkan kode HTML, mengedit kode warna HTML, menempatkan

tabel dan banyak kasus lainnya kita harus menguasai dasar - dasar kode atau

script HTML.

Struktur kode HTML yang harus selalu ada di setiap halaman situs

adalah:

<html>

<head>

<title>Tulis Judul Anda di Sini</title>

<meta name="description" content="tulis deskripsi/penjelasan singkat situs

anda di sini">

<meta name="keyword" content="tulis kata kunci halaman anda di sini">

</head>

<body>

Di sini adalah konten / isi halaman anda

</body>

</html>

Latihan 1. Belajar membuat halaman sederhana dengan kode HTML

Sebagai bahan untuk belajar HTML, sekarang buka program Notepad anda.

Caranya klik " start " pilih program, cari program Notepad, jika sudah anda

buka kemudian tuliskan kode - kode HTML di bawah ini :

<html>

<head>

<title>Modul Belajar HTML</title>

<meta name="description" content="Modul belajar HTML untuk pemula">

<meta name="keyword" content="modul html,belajar html">

</head>

<body>

Modul HTML ini berisi latihan - latihan sederhana untuk beljar membuat

sebuah halaman website agar dapat online di internet. Bagi anda yang masih

pemula sebaiknya mengikutinya dengan memparaktekkan secara langsung

agar lebih mudah dalam memahami setiap variasi kode - kode HTML.

</body>

</html>

Setelah selesai menuliskan kode - kode HTML di atas kemudian anda

simpan. Caranya : klik " file " kemudian pilih " save as " tentukan lokasi

penyimpanan, misalnya pada folder " latihan " di " my document " , pada "

file name " tulis nama file misalnya " latihan1.html " pada save as type isikan

" all file " kemudian klik " save ".

Untuk mengetahui hasilnya pada browser, caranya sebagai berikut :

Cari file " latihan1.html " yang anda simpan pada folder " latihan " di " my

document " , setelah ketemu kemudian klik kanan, pilih " open with " lalu

pilih browsernya misalnya " internet explorer " maka hasilnya akan tampak

seperti gambar di bawah ini :

Latihan 2. Belajar membuat link atau tautan dengan kode HTML :

misalnya : kata yang terlihat dalam link ( ancor text ) adalah "cara membuat

website"

sedangkan alamat/URL dari halaman yang dituju tersebut

adalah http://edyutomo.com/internet-dan-komputer/cara-membuat-website

maka kode HTML nya adalah :

<a href="http://edyutomo.com/internet-dan-komputer/cara-membuat-

website">cara membuat website</a>

Latihan 3. Belajar kode warna HTML untuk mengedit warna teks :

<font color="red">kata yang diedit</font>, ini akan mengubah warna teks

menjadi merah.

Lihat contoh berikut ini :

<font color="red">Modul HTML</font> ini berisi latihan - latihan.....

hasilnya akan tampak sebagai berikut :

Latihan 4. Kombinasi kode warna HTML, paragraf baru, ukuran huruf

dan jenis huruf :

<p align="left"><font face="arial" size="6" color="red">kata yang

diedit</font></p>

ini akan membuat paragraf menjadi rata kiri, dengan jenis huruf arial, ukuran

6 dan warna teks menjadi merah.

Lalu bagaimana untuk membuat warna menjadi warna campuran, ah... itu

gampang. Caranya anda buka photoshop, lihat gambar di bawah :

klik kotak merah yang saya lingkari, kemudian akan muncul kotak dialog

color picker, lalu cari warna yang anda inginkan, lalu copy code warna yang

ada di bawah ( saya tandai ), setelah itu anda paste pada kode warna HTML

untuk mengedit warna.

Contoh : color="#ed260b"

mudah - mudahan jelas ya.

Kode HTML lainnya :

<p>isi paragraf</p> , untuk membuat paragraf baru

<br>isi kalimat</br> , untuk membuat baris baru

<b>kata/kalimat</b> , untuk membuat teks tebal

<i>kata/kalimat</i> , untuk membuat kata miring

<u>kata/kalimat</u> , untuk membuat garis bawah

Latihan 5. Belajar cara menyisipkan gambar dengan kode HTML :

Sebelum kita menyisipkan gambar, terlebih dahulu kita harus mengupload

foto atau gambar untuk mendapatkan link dari gambar tersebut untuk

keperluan menyisipkan gambar yang telah kita tentukan. Lihat cara upload

foto atau gambar.

sebagai contoh saya telah mengupload gambar pada situs image hosting

http://photobucket.com, sehingga saya mendapatkan url link gambar seperti

berikut ini :

http://i1095.photobucket.com/albums/i480/satujambi/contoh1.gif

Sebagai contoh, lihat ilustrasi contoh penerapan kode HTML di bawah ini :

<p>di bawah ini adalah contoh gambar :</p>

<img

src="http://i1095.photobucket.com/albums/i480/satujambi/contoh1.gif">

Latihan 6. Belajar kode HTML untuk menyisipkan link pada gambar

Sebagai contoh, berdasarkan gambar di atas, kita akan menyisipkan link

menuju halaman http://edyutomo.com/anak-dan-balita/kumpulan-puisi-anak,

maka kode HTML yang perlu dibuat adalah sebagai berikut :

<a href="http://edyutomo.com/anak-dan-balita/kumpulan-puisi-anak"><img

src="http://i1095.photobucket.com/albums/i480/satujambi/contoh1.gif"></a>

Jika diklik gambarnya akan terbuka halaman yang dituju.

1. HTML5 Semantic

HTML5 Semantic adalah beberapa tag baru yang diperkenalkan dalam

HTML5 untuk mendukung struktur halaman yang lebih rapi. Beberapa

elemen baru digunakan untuk mengurangi pemakaian tag <div>.

Elemen-elemen baru yang ditambahkan pada HTML5 adalah:

Tag Keterangan

<article> Menspesifikasikan konten

yang bersifat independen,

seperti artikel, blog post, forum

post, dan sejenisnya.

<aside> Digunakan untuk sebuah

subkonten. Biasanya digunakan

di dalam tag <article>.

<bdi> Untuk teks yang tidak boleh

terikat pada arah teks-elemen

induknya

<command> Sebuah button, atau

radiobutton, atau checkbox.

<details> Untuk menjelaskan detail

tentang sebuah dokumen atau

sebagian dari dokumen.

<summary> Digunakan pada sebuah

ringkasan dan sejenisnya di

dalam tag <details>

<figure> Untuk mengelompokkan

sekumpulan section, biasanya

berupa video.

<figcaption> Berisi caption/keterangan

yang ditempatkan di dalam tag

<figure>

<footer> Digunakan sebagai footer

dari sebuah halaman

<header> Digunakan sebagai header

dari sebuah halaman

<hgroup> Digunakan untuk

sekumpulan heading

<mark> Digunakan pada teks yang

akan di highlight

<meter> Digunakan untuk

pengukuran, dimana nilai

maksimal dan minimal telah

ditentukan

<nav> Digunakan untuk

sekumpulan navigasi

<progress> Membuat Progress bar

<ruby> Digunakan untuk anotasi

ruby

<rt> Untuk menjelaskan anotasi

ruby

<rp> Menunjukkan elemen jika

browser tidak mendukung ruby

<section> Untuk sebuah section di

dalam halaman. Seperti Bab,

Footer, dan sebagainya

<time> Untuk mendefinisikan waktu

dan tanggal

<wbr> Word Break. Untuk

memisah suatu kata bila

diperlukan.

1. HTML5 Audio

Salah satu fitur baru HTML5 yang paling mencengangkan adalah

disediakannya tag baru yang memungkinkan kita untuk memutar audio

sesuai yang kita inginkan tanpa menggunakan plugin tambahan seperti flash

player. Dengan menggunakan tag <audio> kita sudah bisa memasukkan file

mp3 dan ogg ke dalam halaman web kita.

Untuk menambahkan audio ke dalam web kita, cukup ketikkan kode

berikut

<!DOCTYPE html>

<html>

<body>

<audio controls="controls">

<source src="music/FromHere.ogg" type="audio/ogg">

Your browser does not support the audio element.

</audio>

</body>

</html>

Sehingga akan menampilkan output seperti berikut :

· Mozilla version 9.0.1

Google chrome Version 22.0.1229.94

Opera version 12.10 beta RC

Penjelasan dari tags diatas:

< <audio>, tag audio utama, digunakan untuk memasukkan audio ke

dalam HTML.

· <source>, digunakan untuk mengambil source file yang akan

dimainkan audionya.

Atribut pada audio

· Autoplay, atribut ini digunakan untuk member opsi kepada tag

audio apakah langsung dimainkan secara otomatis atau tidak.

· Controls, atribut ini memberikan pilihan untuk menampilkan

kontrol audio (volume, seeker, play/pause button).

· Type, digunakan untuk mendefinisikan tipe audio yang dimainkan.

· Src, digunakan untuk mendefinisikan source audio yang dimainkan.

Saat ini, ada tiga tipe file audio yang sudah didukung HTML5 yaitu MP3,

WAV, dan OGG. Berikut adalah data dukungan browser terhadap audio.

2. HTML5 Video

Fitur multimedia lainnya yang didukung oleh HTML5 adalah video. Jika

selama ini kita harus menggunakan flash player untuk memasukkan konten

video, pada HTML5 kita tidak perlu lagi menggunakannya.

Untuk menambahkan elemen video kita gunakan kode berikut

<!DOCTYPE html>

<html>

<body>

<video width="320" height="240" controls="controls">

<source src="video/movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

</body>

</html>

Sehingga akan menampilkan output sebagai berikut :

· Mozilla version 9.0.1

Google chrome Version 22.0.1229.94

Opera version 12.10 beta RC

3. HTML5 Canvas

Fitur yang lain pada HTML5 adalah <canvas>. Canvas memungkinkan

kita untuk memasukkan objek 2D atau 3D kedalam halaman web. Canvas

juga sama seperti GeoLocation, tidak bias bekerja sendiri. Dibutuhkan

javascript untuk membuat objek di dalamnya, baik 2D maupun 3D.

Untuk membuat objek di dalam canvas kita gunakan kode berikut :

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #c3c3c3;">

Your browser does not support the HTML5 canvas tag.

</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

</script>

</body>

</html>

Sehingga kita dapatkan hasil output seperti berikut :

· Mozilla version 9.0.1

Google chrome Version 22.0.1229.94

Opera version 12.10 beta RC

4. HTML5 Form Element

Pada HTML5 kita mengenal beberapa elemen form baru. Jika dahulu kita

terbatas pada input dan textarea, kali ini HTML5 menambahkan tiga elemen

baru yaitu datalist, keygen, dan output.

Namun untuk keygen, dukungan browser saat ini belum memenuhi standar

keamanan, sehingga lebih aman untuk para web programmer menggunakan

enkripsi pada server-side seperti md5, sha1, dan base64_encode.

· Form Datalist

<!DOCTYPE html>

<html>

<body>

<form action="demo_form.asp" method="get">

<input list="browsers" name="browser">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

<input type="submit"></form>

</body>

</html>

Sehingga kita dapatkan hasil output seperti berikut :

· Mozilla version 9.0.1

Google chrome Version 22.0.1229.94

Opera version 12.10 beta RC

· Form Output

<!DOCTYPE html>

<html>

<body>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

<input type="range" name="a" value="50">100 +

<input type="number" name="b" value="50">=

<output name="x" for="a b"></output>

</form>

</body>

</html>

Sehingga kita dapatkan hasil output seperti berikut :

· Mozilla version 9.0.1

Google Chrome Version 22.0.1229.94

Opera version 12.10 beta RC

a. Referensi Tag HTML

1. Heading

Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam

suatu dokumen HTML. Heading berbeda dengan tag <TITLE> yang tidak

bisa muncul dalam halaman web. HTML menyediakan enam tingkatan

heading. Heading level 1 biasanya untuk judul utama.

Contoh:

<HTML>

<HEAD>

<TITLE>Headings</TITLE>

</HEAD>

<BODY>

<H1>Heading Level 1</H1>

</BODY>

</HTML>

2. Paragraf

Untuk membuat paragraf digunakan tag <P>. Setelah tag <P> Anda bisa

menulis isi paragraf dan paragraf tersebut harus diakhiri dengan penutup

</P>. Anda bisa mengatur posisi paragraf dengan attribut ALIGN. Atribut

ALIGN diikuti dengan posisi yang diinginkan. LEFT untuk rata kiri,

CENTER untuk rata tengah dan RIGHT untuk rata kanan.

Contoh:

<HTML>

<HEAD>

<TITLE>Paragraf</TITLE>

</HEAD>

<BODY>

<P ALIGN=”right”>

<P ALIGN=”center”>

<P ALIGN=”left”>

</P>

</BODY>

</HTML>

3. Blockquote

Perintah tag <BLOCKQUOTE> digunakan untuk menulis kutipan teks.

Dengan perintah ini browser akan menampilkan teks menjorok ke dalam

(meng-identasi teks) atau menampilkan teks dalam bentuk huruf miring.

Contoh:

<HTML>

<HEAD>

<TITLE>BLOCKQUOTE</TITLE>

</HEAD>

<BODY>

<H3>Sesuatu yang tidak perlu dicoba</H3>

<BLOCKQUOTE>

</BLOCKQUOTE>

</BODY>

</HTML>

4. Preformatted Text

Preformatted Text (PRE) digunakan untuk menampilkan teks sama seperti

yang Anda ketikkan dalam dokumen HTML. Browser akan menampikan teks

tersebut dalam font monospaced, yaitu seperti terlihat dalam teks yang

tampilkan oleh aplikasi berbasis teks (misalnya telnet).

Contoh:

<HTML>

<HEAD>

<TITLE>Preformatted Text</TITLE>

</HEAD>

<BODY>

<PRE>

</PRE>

</BODY>

</HTML>

5. Begin Row (BR)

Tag ini digunakan untuk menulis teks pada baris berikutnya. Tag <BR>

membuat baris baru tanpa memberi baris kosong di bawahnya.

Contoh:

<HTML>

<HEAD>

<TITLE>Begin Row</TITLE>

</HEAD>

<BODY>

<P>Banyak cara yang dapat digunakan untuk melakukan instalasi

FreeBSD. Namun ada tiga cara yang paling sering dilakukan ,yaitu:

<BR>Instalasi melalui FTP

<BR>Instalasi melalui CDROM

<BR>Instalasi melalui partisi DOS

</BODY>

</HTML>

6. Ukuran Font

Untuk mengatur huruf dokumen HTML digunakan tag <FONT SIZE>.

Tag <FONT SIZE> memiliki beberapa atribut untuk mengatur ukuran huruf

yang akan digunakan.

Contoh:

<HTML>

<HEAD>

<TITLE>Ukuran font</TITLE>

</HEAD>

<BODY>

<FONT SIZE=1>Ukuran font 1</FONT>

<FONT SIZE=2>Ukuran font 2</FONT>

<FONT SIZE=3>Ukuran font 3</FONT>

<FONT SIZE=4>Ukuran font 4</FONT>

<FONT SIZE=5>Ukuran font 5</FONT>

<FONT SIZE=6>Ukuran font 6</FONT>

<FONT SIZE=7>Ukuran font 7</FONT>

</BODY>

</HTML>

7. Jenis Font

Atribut FACE digunakan untuk mengatur jenis huruf yang diinginkan.

Atribut FACE harus diisi dengan string jenis font seperti Arial, Times New

Roman,Verdana, dan sebagainya.

Contoh:

<HTML>

<HEAD>

<TITLE>Jenis Font</TITLE>

</HEAD>

<BODY>

<FONT SIZE=5>

<FONT FACE = “Arial”>Arial, contoh AC Milan <P>

<FONT FACE = “Verdana”>Verdana , contoh Persebaya <P>

<FONT FACE = “Times New Roman”>Times New Roman, contoh

Indonesia P>

</BODY>

</HTML>

8. Warna Font

Atribut COLOR digunakan untuk mengatur warna font yang akan

digunakan. Untuk memberi nilai pada atribut color, ada dua cara. Cara

pertama dengan menuliskan nama warna seperti Red, Blue, Yellow, White,

dll. Sedangkan cara kedua adalah dengan menggunakan nilai RGB (Red

Green Blue) dari suatu warna, misalnya FF0000 untuk Red, 00FF00 untuk

green, dan 0000FF untuk Blue.

Contoh:

<HTML>

<HEAD>

<TITLE>Warna Font</TITLE>

</HEAD>

<BODY>

<FONT SIZE=5>

<FONT COLOR = “red”>PSM Makassar<P>

<FONT COLOR = “#FF0000″>tetap PSM Makassar kan?<P>

<FONT COLOR = “#00FF00″>Ini baru Persebaya<P>

</BODY>

</HTML>

9. Link

Perintah anchor <A> digunakan untuk membuat suatu link. Untuk

membuat link ke dokumen HTML lain digunakan perintah <A HREF =

“nama_dokumen”>Teks pada browser</A>.

Anda juga bisa membuat link dalam sebuah dokumen HTML. Untuk itu

perlu dipersiapkan nama anchor lokasi tujuan dari link tersebut. Nama

anchor dibuat dengan menambahkan atribut NAME pada tag <A>. Misalnya

<A NAME = “Bugs”</A>. Cara melakukan link ke bagian tersebut adalah

<A HREF = “#nama_anchor”>teks pada browser</A>.

Contoh:

<HTML>

<HEAD>

<TITLE>Link</TITLE>

</HEAD>

<BODY>

<A NAME=”lengkap”>Pemain-pemain AC Milan menurut abjad</A>

<BLOCKQUOTE>

<P>Abbiati ,<A HREF=”#abbiati”>info lengkap</A>

<P>Ayala

<P>Ambrosini

<P>Albertini

<P>Boban

<P>

<A HREF=”linktujuan.html”>kalo mau tahu lagi klik disini</A>

</BLOCKQUOTE>

<P><A NAME=”abbiati”>Abbiati</A>

<BLOCKQUOTE>

<P>Kiper ketiga timnas Italia runner up Euro 2000

<BR>Kiper utama U-21 juara Piala Eropa U-21

<BR>Kiper utama AC Milan juara Seri-A 1998-1999

</BLOCKQUOTE>

<P><A HREF=”#lengkap”>kembali ke atas</A>

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE>Link tujuan</TITLE>

</HEAD>

<BODY>

<P ALIGN=”center”> Maaf, hanya sedikit

<BR>Chamot

<BR>Dida

<BR>Shevchenko

<BR><A HREF=”contohlink.html”>kembali</A>

</BODY>

</HTML>

b. Membuat Kode Dasar HTML Table

Untuk Belajar HTML Table dan membuat website sendiri, maka kita

harus membuat persiapan lebih dulu. Pertama kita buka notepad. Kemudian

ketik di notepad ini kode html seperti dibawah ini:

<table>

<head>

<title> </title>

</head>

<body>

</body>

</html>

Kemudian sisipkan kalimat Belajar HTML Table diantara <title> dan

</title> sehingga kode html nya sekarang menjadi:

<table>

<head>

<title>Belajar HTML Table</title>

</head>

<body>

</body>

</html>

F. PERBANDINGAN HTML 5 DENGAN HTML SEBELUMNYA

HTML saat ini merupakan standar Internet yang didefenisikan dan

dikendalaikan oleh World wide Web Consotium(W3C). HTML dibuat oleh

Caillau TIM dan Berners-lee Robert ketika mereka bekerja di CERN pada

tahun 1989.

HTML 5

HTML 5 merupakan sebuah bahasa baru yang perbaikan dan upgrade dari

generasi bahasa web sebelumnya, HTML 5 banyak mengalami upgrade pada

spesifikasi Web presentation, bahkan HTML 5 akan menjadi pengganti game

untuk Web application development, walaupun sebelumnya sudah mendukung

sistem plug-in-dengan Internet application (RIA) yang kaya akan teknologi

seperti Adobe Flash, Microsoft Silverlight, dan Sun JavaFX.

HTML 5 menampilkan elemen baru ke HTML untuk pertama kali sejak tahun

1990-an. Unsur – unsur struktural baru yang di tampilakn seperti aside, figure,

dan section.Elemen inline baru seperti waktu, meter, dan progress dan unsur

Embedding baru seperti video dan audio. Elemen interaktif baru seperti

details, datagrid, dan command.

Perkembangan standar untuk web didorong oleh kelompok Web Hypertext

Application Technology Working Group (WHATWG) merupakan sebuah

kelompok kerja yang terdiri dari para wakil pengembangan browser utama

seperti Google, Apple, Mozila dan Opera. Berdasarkan spesifikasi HTML 5

akan diterapkan mulai tahun 1999 untuk menggantikan Standar HTML 4.01.

dan salah satunya adalah menerapkan unsur HTML 5 yang mampu

menggambar atau memanipulasi geometri yang ada pada sebuah website,

beserta fitu – fitur lain misalnya kemudahan dalam mengintegrasikan video,

audio dan aplikasi lain menggunakan HTML 5.

Tentang Spesifikasi HTML 5

Spesifikasi HTML 5 menjabarkan vokabular yang dapat ditulis dalam

duasintak yaitu html dan XML yang disesuaikan dengan kebutuhan

pemrogram,pasar atau aplikasi. Vokabular HTML dari jaman sebalumnya

(HTML+,HTML 2.0, HTML 3.2) umumnya ditulis menggunakan aturan

sintak SGML.Pada HTML 4 telah diterapkan dua sintak yaitu: SGML

(disebut sebagaiHTML 4.01) dan XML (disebut XHTML 1.0).Sementara itu,

HTML 5 menenerapan dua sintak yaitu: html dan XML.Karena SGML

nyaris tidak pernah didukung baik oleh browsers maupunkebanyakan tools

untuk html authoring yang ada, maka HTML 5 mendefinisikanserialisasi

baru (lihat diagram) dan disebut sebagai html, yang sepintas mirip dengan

SGML seperti dikenal sebelumnya.

Halaman Web yang Biasa ditulis Dengan HTML 4

<html><head>

<title>Hobo Web LTD Scotland</title>

</head>

<body>

<div id="page">

<div id="header">

<h1><a href="/blog/">Hobo Web</a></h1>

</div>

<div id="container">

<div id="center" class="column">

<div class="post" id="post-102">

<h2><a href="/test-page/">

Test Page 1</a></h2><div class="entry">

<p>Article Text here</p>

</div>

</div>

<div class="post" id="post-101">

<h2><a href="/test2/">

Test 2</a></h2>

<div class="entry">

<p>Article 2 Text here</p>

</div>

</div>

</div>

<div class="navigation">

<div class="alignleft">

<a href="/blog/page/2/">« Previous Entries</a>

</div>

<div class="alignright"></div>

</div>

</div>

<div id="right" class="column">

<ul id="sidebar">

<li><h2>Hobo Stuff</h2>

<ul>

<li><a href="/blog/comment-policy/">Comment Policy</a></li>

<li><a href="/blog/todo-list/">Todo List</a></li>

</ul></li>

<li><h2>Archives</h2>

<ul>

<li><a href='/blog/2008/04/'>April 2008</a></li>

<li><a href='/blog/2008/03/'>March 2008</a></li>

<li><a href='/blog/2008/02/'>February 2008</a></li>

<li><a href='/blog/2008/01/'>January 2008</a></li>

</ul>

</li>

</ul>

</div>

<div id="footer"><p>Copyright 2008 Hobo Web LTD</p>

</div>

</div>

</body>

</html>

Contoh Halaman Web yang Ditulis dengan HTML5;

<html><head>

<title>Hobo Web LTD Scotland</title>

</head>

<body>

<header>

<h1><a href="http://blog/">Hobo Web</a></h1>

</header>

<section>

<article>

<h2><a href="/test-page/">

Test Page 1</a></h2><p>Article Text here</p>

</article>

<article>

<h2><a href="/test2/">

Test 2</a></h2>

<p>Article Text 2 here</p>

</article>

<nav>

<a href="/blog/page/2/">« Previous Entries</a>

</nav>

</section>

<nav>

<ul>

<li><h2>Hobo Stuff</h2>

<ul>

<li><a href="/blog/comment-policy/">Comment Policy</a></li>

<li><a href="/blog/todo-list/">Todo List</a></li>

</ul></li>

<li><h2>Archives</h2>

<ul>

<li><a href='/blog/2008/04/'>April 2008</a></li>

<li><a href='/blog/2008/03/'>March 2008</a></li>

<li><a href='/blog/2008/02/'>February 2008</a></li>

<li><a href='/blog/2008/01/'>January 2008</a></li>

</ul>

</li>

</ul>

</nav>

<footer>

<p>Copyright 2008 Hobo Web LTD</p>

</footer>

</body>

</html>

Perbedaan HTML 5 dengan versi sebelumnya

HTML 5 menambahkan unsur-unsur baru seperti :

1. Section : Sebuah bagian atau bab dalam sebuah buku, sebuah bagian

dalam sebuah bab, atau pada dasarnya apa pun yang memiliki pos sendiri

dalam HTML 4.

2. Header : Header Halaman yang ditampilkan pada halaman , tidak sama

dengan unsur kepala.

3. Footer : Halaman footer di mana baik cetak pergi; tanda tangan dalam

sebuah pesan e-mail.

4. Nav : Koleksi link ke halaman lain.

5. Article : Sebuah entri independen dalam sebuah blog, majalah, ringkasan,

dan sebagainya.

BAB III

PENUTUP

A. Simpulan

Dalam pembuatan website, dikenal dua komponen penting yaitu www dan

HTML. Dimana www merupakan suatu protokol standar dari internet,

sedangkan HTML merupakan script atau program standar yang dijalankan

oleh www atau internet. Proyek HTML ini dibuat dengan menggunakan

media web editor notepad.

Di dalam HTML terdapat dua bagian dokumen yaitu bagian kepala (head) dan

bagian tubuh (body). Pembuatan proyek web/HTML sekolah dengan

menggunakan notepad ini dimulai dengan pembuatan bahasa HTML dalam

notepad. Yang kemudian untuk setiap baris dalam proyek ini selalu dibuat

dengan bahasa HTML tersendiri sesuai dengan apa yang akan kita buat.

DAFTAR PUSTAKA

http://pelitarezza.blogspot.com/2013/01/kelebihan-dan-kekurangan-

html5.html diakses tanggal 04 oktober 2013

http://wellysan99.blogspot.com/2013/03/kelebihan-html-5.html diakses

tanggal 04 oktober 2013

http://under-88.blogspot.com/2012/05/definisi-dan-pengertian-

html5.html#axzz2giaIgkD0 diakses tanggal 04 oktober 2013

http://rvp17.blogspot.com/2013/10/perbandingan-html5-dan-html-

sebelumnya.html DIAKSES TANGGAL 23 OKTOBER 2013

http://arif-rahmans.blogspot.com/