NASKAH WORKSHOP

BUILDING WEBSITE USING HTML5

Lembaga Pengembangan Komputerisasi

UNIVERSITAS GUNADARMA
 KATA PENGANTAR

Modul workshop yang kami beri judul “Buildng Website Using HTML5”
ini secara umum berisi tentang bagaimana membuat sebuah website sederhana
dengan menggunakan HTML5. Pembahasan modul ini di awali dengan pengertian
dan perkembangan HTML, kemudian dilanjutkan dengan pengenalan tentang
HTML5, kekurangan dan kemudahanya hingga fitur dan elemen-elemen yang ada
pada HTML5. Modul ini merupakan kumpulan dari beberapa sumber baik dari
buku maupun situs di Internet.
Kami selaku tim penyusun modul ini menyadari masih banyak kekurangan
dan dengan segala kerendahan hati kami akan menerima masukan serta kritikan
yang bersifat embangun dengan hati yang lapang.

Depok, September 2014

Tim Penyusun

i
 DAFTAR ISI

Halaman
KATA PENGANTAR .................................................................................... i
DAFTAR ISI ................................................................................................... ii
DAFTAR GAMBAR ..................................................................................... iv
DAFTAR TABEL ............................................................................................ v
1. PENDAHULUAN .................................................................................... 1
1.1 World Wide Web .......................................................................... 1
1.2 HTML ........................................................................................... 1
1.2.1 Fungsi HTML ................................................................... 1
1.2.2 Fitur-Fitur HTML ............................................................. 2
1.2.3 Perkembangan HTML ...................................................... 2
1.3 HTML5 .......................................................................................... 3
1.3.1 Kelebihan dan Kekurangan HTML5 ................................ 3
1.3.2 Faktor dan Kemudahan HTML5 ...................................... 4
1.3.3 Fitur-Fitur HTML5 ........................................................... 5
1.3.4 Browser yang Mendukung HTML5 ................................. 6

2. ELEMEN - ELEMEN HTML5 .................................................................... 7

2.1 Sintaks HTML5 ................................................................................ 7
2.2 Elemen Baru pada HTML5 .............................................................. 7
2.3 Input Type pada HTML5 ................................................................. 13
2.4 Elemen yang Di Hapus ..................................................................... 13

3. CONTOH MENGGUNAKAN HTML5 .................................................. 14

3.1 Membuat Teks .............................................................................. 14
3.2 Membuat Garis .............................................................................. 15
3.2.1 Garis Lurus Tipis ............................................................... 15
3.2.2 Garis Lurus Tebal .............................................................. 16
3.2.3 Beberapa Bentuk Garis ....................................................... 17
3.3 Membuat Bangun Datar ................................................................ 19

ii
 3.3.1 Lingkaran .............................................................................. 19
3.3.2 Persegi ................................................................................... 20
3.3.3 Setengah Lingkaran ............................................................... 21
3.4 Membuat Website Sederhana ........................................................... 22
3.4.1 Header, Body dan Footer ...................................................... 22
3.4.2 Membuat Halaman Utama .................................................... 22
3.4.3 Membuat Halaman Video ..................................................... 26
3.4.4 Membuat Halaman Canvas ................................................... 28
3.4.5 Membuat Halaman Examples ............................................... 30
3.4.6 Membuat Halaman About Me............................................... 34
3.5 Form HTML......................................................................................43
3.5.1 Kontrol Berupa Text...............................................................43
3.5.2 Kontrol Berupa Radio Button.................................................44
3.5.3 Dropdown List........................................................................44
3.5.4 Button......................................................................................45
3.5.5 Membuat Form HTML...........................................................45
4. HTML, CSS, dan JavaScript...........................................................................46
4.1 Cascading Style Sheet (CSS)............................................................46
4.1.1 Penggunaan CSS pada HTML...............................................46
4.2 JavaScript...........................................................................................47
4.2.1 Penggunaan JavaScript pada HTML......................................47
4.3 Membuat File CSS dan JavaScript untuk HTML..............................48

DAFTAR PUSTAKA ......................................................................................... 52

iii
 DAFTAR GAMBAR

Halaman
Gambar 3.1 Membuat Teks .............................................................. 15
Gambar 3.2 Garis Lurus Tipis .......................................................... 16
Gambar 3.3 Garis Lurus Tebal ......................................................... 17
Gambar 3.4 Beberpa Bentuk Garis ................................................... 18
Gambar 3.5 Lingkaran ...................................................................... 20
Gambar 3.6 Persegi ........................................................................... 21
Gambar 3.7 Setengah Lingkaran ...................................................... 22
Gambar 3.8 Halaman Utama ............................................................. 25
Gambar 3.9 Halaman Video .............................................................. 28
Gambar 3.10 Halaman Canvas ............................................................ 30
Gambar 3.11 Halaman Examples ........................................................ 34
Gambar 3.12 Halaman About Us ......................................................... 36

iv
 DAFTAR TABEL

Halaman
Tabel 2.1 Tabel Elemen Baru pada HTML5 ....................................... 7

v
 BAB 1 PENDAHULUAN

1.1 World Wide Web

World Wide Web adalah suatu ruang informasi yang dipakai oleh pengenal
global yang disebut pengidentifikasi sumber seragam untuk mengenal pasti sumber daya
berguna. WWW sering dianggap sama dengan Internet secara keseluruhan, walaupun
sebenarnya ia hanyalah bagian daripada Internet. WWW merupakan kumpulan peladen
web, yang peladennya tersebar di lima benua termasuk Indonesia yang terhubung
menjadi satu melalui jaringan Internet. Hal ini mempunyai kegunaan untuk
menyediakan data dan informasi untuk dapat digunakan bersama. Melalui web, para
pengguna dapat mengakses informasi-informasi yang tidak hanya berupa teks tetapi bisa
juga berupa gambar, suara, video dan animasi.
Setiap informasi tersimpan dalam sebuah file yang berbeda yang disebut Web
Page. Web Page merupakan sebuah halaman khusus dari Web Site. Setiap Web Site
memiliki sebuah Web Page pembuka yang berisi daftar isi atau menu dan informasi
mengenai situs web tersebut. Web Page pembuka ini disebut Home Page. Web Page
dibuat dengan bahasa format khusus yang dikenal sebagai Hypertext Markup Language
(HTML).

1.2 HTML
HTML berawal dari bahasa perograman di dunia percetakan dan penerbitan
yaitu SGML (Standars Generalized Markup Language). HTML adalah singkatan dari
HyperText Markup Language. Ini adalah bahasa yang digunakan untuk menghasilkan
dokumen untuk World Wide Web (www). Dalam membuat dokumen HTML
dibutuhkan sebuah HTML editor dan contoh gambar atau file –file yang akan
disertakan. Dokumen tersebut berisi kode-kode dengan format khusus yang ditulis
dalam tanda < > yang disebut tag. Kode HTML ini bersifat case sensitive, ini artinya
bahwa penulisan kode boleh menggunakan huruf besar maupun huruf kecil. Halaman
HTML didistribusikan di web menggunakan HyperText Transfer Protocol (HTTP).

1.2.1 Fungsi HTML

Halaman HTML berisi informasi tentang font, teks, warna teks, pembenaran,
warna latar belakang, paragraf, gambar, hyperlink dan elemen lain dari suatu halaman
web. Browser web dapat menginterpretasikan informasi ini untuk menampilkan
halaman dengan cara yang baik menarik dan berguna. Tag HTML dan atribut adalah
6
kasus sensitif. Oleh karena itu secara fungsional setara dengan Cascading Style Sheet
(CSS) yang digunakan di tempat tag untuk mengatur font, latar belakang dan warna dari
suatu halaman atau kumpulan halaman.

1.2.2 Fitur-Fitur HTML

a. (Jangkar) tag membuat hyperlink dalam HTML.
b. (Gambar) tag menunjukkan di mana gambar harus ditampilkan pada halaman dan
dapat link ke gambar yang tersimpan baik pada server yang sama atau pada server
yang berbeda sebagai sisa halaman.
c. (Ayat) tag paragraf menunjukkan tempat mulai dan berakhir.
d. (Line break) tag hanya membuat carriage return tunggal.

1.2.3 Perkembangan HTML

Sebelum suatu HTML disahkan sebagai suatu dokumen HTML standar, ia harus
disetujui dulu oleh W3C untuk dievaluasi secara ketat. Setiap terjadi perkembangan
suatu versi HTML, maka mau tak mau browser pun harus memperbaiki diri agar bisa
mendukung kode-kode HTML yang baru tersebut. Sebab jika tidak, browser tak akan
bisa menampilkan HTML tersebut.

HTML versi 1.0

Ini merupakan versi pertama yang memiliki kemampuan diantaranya heading,
paragraph, hypertext, list, serta cetak tebal dan miring pada teks. Versi ini juga
mendukung peletakan image pada dokumennya tanpa memperbolehkan meletakkan teks
disekelilingnya (wrapping).

HTMl versi 2.0

Versi ini mengalami penambahan kualitas HTML yang terletak pada
kemampuannya untuk menampilkan suatu form pada dokumen. Dengan adanya form
ini, maka kita dapat memasukkan nama, alamat, serta saran/kritik. HTML versi 2.0 ini
merupakan pionir dari adanya homepage interaktif.

HTML versi 3.0

HTML versi 3.0 menambahkan beberapa fasilitas baru seperti table. Versi ini
yang disebut juga sebagai HTML+ tidak bertahan lama dan segera digantikan HTML
versi 3.2
7
HTML versi 4.0
HTML versi 4 ini memuat banyak sekali perubahan dan revisi dari
pendahulunya. Perubahan ini terjadi di hampir segala perintah-perintah HTML seperti
table, image, link, text, meta, imagemaps, form, dan lain- lain.

HTML versi 5
HTML versi 5 ini merupakan HTML versi terakhir pada saat sumber ini diambil.
Pada HTML ini memiliki fitur baru yaitu : 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, nav,
section, Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.

1.3 HTML5
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. Sejak tahun 2009, W3C dan WHATWG bekerja
sama dalam pengembangan HTML5. 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 sebuah bahasa markah untuk menstrukturkan dan menampilkan
isi dari Waring Wera Wanua (World Wide Web Consortium, W3C) dengan tujuan utama
untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru,
mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. Versi sebelumnya
yaitu HTML 4.01, datang pada tahun 1999, dan internet telah berubah secara signifikan
sejak saat itu. HTML5 dirancang untuk menggantikan HTML 4, XHTML, dan HTML
DOM Level 2. Hal ini khusus dirancang untuk memberikan konten yang kaya tanpa
membutuhkan plugin tambahan. Versi saat memberikan segala sesuatu dari animasi
grafis, musik untuk film, dan juga dapat digunakan untuk membangun aplikasi web
yang rumit. HTML5 juga cross-platform.

8
1.3.1 Kelebihan dan Kekurangan HTML5
Kelebihan HTML5
 Penulisan kode yang lebih efisien.
 Lebih markup untuk menggantikan scripting
 Konten yang ada di situs lebih mudah terindeks oleh search engine.
 Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML)
danXML.
 Dukungan yang lebih baik untuk penyimpanan secara offline
 Terdapat unsur kanvas untuk menggambar
 Video dan elemen audio untuk media pemutaran file multimedia
 Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav,
section
 Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya
 Integrasi ('inline') dengan doctype yang lebih sederhana

Kekurangan HTML5
HTML5 masih dalam pengembangan, sehingga hanya beberapa browser yang
sudah mendukung HTML5. Karena fitur-fitur pada HTML5 tidak semuanya bisa
berfungsi dengan baik pada beberapa browser.

1.3.2 Faktor dan Kemudahan HTML5

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

Kemudahan yang ada pada HTML5 :

Untuk memperbaiki teknologi HTML agar mendukung teknologi
multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti
oleh mesin, diantaranya :
 <canvas> untuk menampilkan kertas gambar sehingga pengguna dapat
menggunakan canvas untuk menggambar ataupun menulis bagaikan kertas
biasa tanpa menggunakan plugin seperti Java.
9
  <audio> <video> untuk menampilkan audio dan video pada website kita
dengan menggunakan format Ogg Theora yang bersifat free atau gratis.
 menghilangkan beberapa tag ataupun element yang telah jarang dipakai dan
diganti menjadi seperti acronym, applet, basefont, big, center, dir, font,
frame, frameset, isindex, noframes, s, strike, tt, u.
 Pada bagian awal file HTML biasanya harus menulis coding DOCTYPE
yang panjang.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Pada HTML5, DOCTYPE dapat ditulis lebih ringkas :

<!DOCTYPE html>

 Kemudian pada baris berikutnya kita tulis seperti ini

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

 Versi HTML5 berubah menjadi

<meta charset="utf-8" />

1.3.3 Fitur-Fitur HTML5

 Canvas sebagai Media corat-coret untuk gambar 2D langsung tanpa flash
dan applet java.
 Video dan Audio pada HTML5 tidak perlu menempelkan flash, quickplayer,
atau realplayer untuk memutar audio dan video.
 Local Storage untuk media pemutaran tanpa penggunaan cookie.
 Web Workers dengan fitur threading, javascript bisa dipakai dalam beberapa
proses sekaligus tanpa menghambat proses terkait.
 Semantic yang mempermudah designer dengan tag khusus layout.
 Dukungan untuk penyimpanan lokal.
 Konten elemen baru tertentu, seperti <article>, <footer>, <header>, <nav>,
<section>.
 Bentuk kontrol baru, seperti kalender, tanggal, waktu, email, url, pencarian.
 (Jangkar) tag membuat hyperlink dalam HTML.
 (Gambar) tag menunjukkan di mana gambar harus ditampilkan pada
halaman dan dapat link ke gambar yang tersimpan baik pada server yang
sama atau pada server yang berbeda sebagai sisa halaman.

10
  (Ayat) tag paragraf menunjukkan tempat mulai dan berakhir.
 (Line break) tag hanya membuat carriage return tunggal.

1.3.4 Browser Yang Mendukung HTML5

a. Google Crome
b. Safari Apple v.4+
c. Internet Explorer 9
d. Opera
e. Firefox 4, 5, 6 dan seterusnya

11
 BAB 2 ELEMEN - ELEMEN HTML5

2.1 Sintaks HTML5

Deklarasi awal agar kita menggunakan HTML 5 ialah hanya menulis
"<!DOCTYPE html>" pada awal halaman yang kita buat. Hal tersebut untuk
membedakan HTML 5 dan HTML 4.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>

2.2 Elemen Baru pada HTML5

Tabel 2.1 Tabel Elemen Baru pada HTML5
Elemen Keterangan
<canvas> Menggambar grafis menggunakan JavaScrit
<audio> Mendefinisikan suara atau musik konten
<video> Mendefinisikan video atau konten film
<source> Mendefinisikan sumber untuk <video> dan <audio>
<track> Mendefinisikan trek untuk <video> dan <audio>
<embed> Mendefinisikan wadah untuk aplikasi eksternal (seperti plug-in)
<detailst> Mendefinisikan pilihan yang telah ditetapkan untuk kontrol input
<keygen> Mendefinisikan bidang key generator-pair (untuk formulir)
<output> Mendefinisikan hasil penghitungan
<header> Mendefinisikan sebuah header untuk dokumen atau bagian yang
<hgroup> Grup menuju elemen
<nav> Mendefinisikan link navigasi dalam dokumen
<section> Mendefinisikan sebuah bagian dalam dokumen
<main> Mendefinisikan isi utama dari dokumen

12
<article> Mendefinisikan sebuah artikel dalam dokumen
<aside> Mendefinisikan konten selain dari konten halaman
<footer> Mendefinisikan footer untuk dokumen atau bagian
Mendefinisikan rincian tambahan bahwa pengguna dapat melihat
<details>
atau menyembunyikan
<summary> Mendefinisikan sebuah heading terlihat untuk elemen <detil>
Mendefinisikan konten mandiri, seperti ilustrasi, diagram, foto,
<figure>
daftar kode, dll
<figcaption> Mendefinisikan keterangan untuk elemen <figure>
<mark> Mendefinisikan ditandai atau disorot teks
<time> Mendefinisikan tanggal / waktu

Mendefinisikan sebuah bagian dari teks yang dapat diformat dalam

<bdi>
arah yang berbeda dari teks lain di luar itu
<wbr> Mendefinisikan kemungkinan garis –break
<dialog> Mendefinisikan sebuah kotak dialog atau jendela
Mendefinisikan tombol perintah bahwa seorang pengguna dapat
<command>
meminta
Mendefinisikan pengukuran skalar dalam kisaran dikenal ( alat
<meter>
ukur )
<progress> Mendefinisikan kemajuan tugas
Mendefinisikan sebuah penjelasan ruby ( untuk tipografi Asia
<rubby>
Timur )
Mendefinisikan penjelasan / pengucapan karakter ( untuk tipografi
<rt>
Asia Timur )
Mendefinisikan apa yang harus ditampilkan di browser yang tidak
<rp>
mendukung penjelasan ruby

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. Dan untuk menambahkan file audio,
kita hanya perlu menggunakan tag <audio>.
Markup Semantik merupakan penandaan kata. HTML5 mempunyai struktur
elemen baru yang akan memudahkan para developer untuk membedakan isi dari sebuah

13
dokumen web. Menggunakan metode markup baru HTML5 tidak akan berpengaruh
secara langsung kepada pengguna, namun markup baru ini dapat menyederhanakan
penulisan halaman pada struktur isi HTML dan membuat halaman HTML menjadi lebih
mudah dibaca oleh mesin, juga mudah diakses. Sebagai contoh, pencarian dan sindikasi
mesin pencari pasti akan mengambil beberapa unsur seperti sistem crawl yang mencari
halaman indeks.

a. Tag <video>
Terdapat tiga jenis format video yang dapat di putar di HTML 5 ini, Ogg, mp4 dan
Webm. Setiap browser support berbeda-beda browser.
contoh :
1 <video width="320" height="240" controls="controls">
2 <source src="yourvideo.mp4" type="video/mp4" />
3 Brower anda tidak di dukung oleh elemen video.
4 </video>

b. Tag <audio>
Terdapat tiga jenis format video yang dapat di putar di HTML 5 ini, Ogg, mp4 dan
Waw. Setiap browser support berbeda-beda browser.
contoh :
1 <audio controls="controls">
2 <source src="song.ogg" type="audio/ogg" />
3 <source src="song.mp3" type="audio/mpeg" />
4 Brower anda tidak di dukung oleh elemen audio
5 </audio>

c. Tag <section>
Berdasarkan dokumentasi HTML5 W3C : "Section adalah Pengelompokan
tematic dari konten, biasanya bersama dengan heading.
contoh :
1 <section>
2 <h1>WWF</h1>
3 <p>The World Wide Fund for Nature (WWF) is. ...</p>
4 </section>

14
d. Tag <article>
Element <article> menentukan element independent, konten mandiri :
Article tersebut harus masuk akal dan memungkinkan untuk mendistribuskan
secara independent dari website sisa.
Element <article> dapat digunakan :
 Forum post
 Blog post
 News story
 Comment

Contoh :
1 <article>
2 <h1>Internet Explorer 9</h1>
3 <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
4 the public on March 14, 2011 at 21:00 PDT. ... </p>
5 </article>

e. Tag <nav>
Element <nav> dimaksudkan untuk blok besar dari link navigasi. Tidak smeua
link dalam dokumen harus berasa dalam element <nav>.
Contoh :
1 <nav>
2 <a href="/html/">HTML</a> |
3 <a href="/css/">CSS</a> |
4 <a href="/js/">JavaScript</a> |
5 <a href="/jquery/">jQuery</a>
6 </nav>

f. Tag <aside>
Element <aside> mendefinisikan beberapa konten yang diletakkan di dalamnya
(seperti sidebar).
Konten aside harus dihubungkan di sekitar konten.
Contoh :
1 <p>My family and I visited The Epcot center this summer.</p>

15
 2 <aside>
3 <h4>Epcot Center</h4>
4 <p>The Epcot Center is a theme park in Disney World, Florida.</p>
5 </aside>

g. Tag <hgroup>
Digunakan apabila memiliki judul dan ada sub judul, atau untuk judul web
kemudian memiliki slogan. Tetapi jika headingnya hanya satu maka tidak perlu
diberi <hgroup>.
contoh :
1 <header id="main-header">
2 <hgroup>
3 <h1>Ini Website HTML5 pertama saya</h1>
4 <h2>Dan juga yang terakhir karena saya bingung</h2>
5 </hgroup>
6 </header>

h. Tag <time>
Digunakan untuk menunjukan waktu, biasanya digunakan untuk menunjukkan
waktu publish artikel, komentar, forum dan lain sebagainya. <time> memiliki
atribut datetime yang berisi waktu bisa dalam format yyyy-mm-dd atau jam seperti
19:00. Hal ini digunakan agar mesin pencari dapat mengenali waktu dalam format
standar meskipun kita menulisnya tidak dalam format standar.
contoh :
1 <p>Ditulis oleh Dhimas pada <time datetime="2011-11-23">
2 Senin Pahing, 23 November 2011</time></p>

i. Tag <header>
Element <header> sebaiknya digunakan sebagai kontainer untuk mengenali
konten.Kita dapat menggunakan element header biasa dalam satu document.
Contoh berikut akan mendefinisikan header untuk sebuah article.
Contoh :
1 <article>
2 <header>

16
 3 <h1>Internet Explorer 9</h1>
4
5 <p><time pubdate="" datetime="2011-03-15"></time></p>
6 </header>
7 <p>Windows Internet Explorer 9 (abbreviated as IE9) was release to
the public on March 14, 2011 at 21:00 PDT. ... </p>
8 </article>

j. Tag <footer>
Element <footer> sebaiknya berisi informasi tentang element konten.
Footer biasanya berisikan penulis dokumen, informasi copyright, link untuk lama
penggunaan, kontak informasi, dll.
Kita dapat menggunaan beberapa element <footer> dalam satu dokumen.
Contoh :
1 <footer>
2 <p>Posted by: Yeni Yulinda FD</p>
3 <p><time pubdate="" datetime="2012-03-01"></time></p>
4 </footer>

k. Tag <figure> dan <figcaption>

Tag <figure> menentukan self-content (konten mandiri), seperti ilustrasi, diagram,
photo, listing kode, dll. Selama konten dari element <figure> dihubungkan ke alur
utama, posisi ini independen alur utama, dan jika dihapusmaka tidak akan
menimbulkan efek terhadap alur dari dokumen.

Tag <figcaption> mendefinisikan caption untuk elemen <figure>.

Element dapat digunakan sebagai anak pertama atau terakhir dari element
<figure>
contoh :
<figure>
1
<img src="img_pulpit.jpg" alt="The Pulpit Rock" height="228"
2
width="304">
3
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
4
</figure>

17
2.3 Input Type pada HTML5

a. Color : Memilih warna

Script : <input type=”color”>
b. Email : input harus bentuk email, jika tidak akan memvalidasi.
Script : <input type=”email”>
c. URL : menghasilkan tulisan (http://) tanpa harus diketik.
Script : <input type=”url”>
d. Tel : input nomor telp, dapat +, 0-9.
Script : <input type=”tel”>
e. Number : input 0-9, jika tidak akan otomatis memvalidasi.
Script : <input max=”10” min=”0” type=”number”>
f. Range : hanya men-drag saja beberapa nilai yang diinginkan.
Script : <input max=”10” min=”0” type=”range”>
g. Search : muncul simbol search (kaca mata pembesar) di beberapa
browser.
Script : <input type=”search” result=”5”>
h. Month : memilih satu bulan sekaligus dan hasilnya “tahun-bulan” saja.
Script : <input type=”month”>
i. Week : memilih satu minggu langsung.
Script : <input type=”week”>
j. Time : mengetikkan pukul berapa yang sesuai dengan keinginan.
Script : <input type=”time”>
k. Date & datetime : akan berbentuk tahun-bulan-tanggal
Script : <input type=”date”> dan <input type=”datetime”>
l. Datetime-local : sama dengan datetime tapi tidak adak keterangan UTC-
nya.
Script : <input type=”datetime-local”>

2.4 Elemen yang Di Hapus

 <acronym>  <dir>  <strike>
 <applet>  <font>  <longdesc>
 <basefont>  <frame>  <u>
 <big>  <frameset>  <tt>
 <center>  <noframes>
18
 BAB 3 CONTOH MENGGUNAKAN HTML5

3.1 Membuat Teks

1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <style>
5. body {
6. margin: 0px;
7. padding: 0px;
8. }
9. </style>
10. </head>
11. <body>
12. <canvas id="myCanvas" width="578" height="200"></canvas>
13. <script>
14. var canvas = document.getElementById('myCanvas');
15. var context = canvas.getContext('2d');
16.
17. context.font = 'italic 40pt Calibri';
18.
19. context.fillText('Hello World!', 150, 100);
20.
21. // stroke color
22. //context.strokeStyle = 'blue';
23. //context.strokeText('Hello World!', x, y);
24. </script>
25. </body>
26. </html>

19
 Gambar 3.1 Membuat Teks

3.2 Membuat Garis

3.2.1 Garis Lurus Tipis
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <style>
5. body {
6. margin: 0px;
7. padding: 0px;
8. }
9. </style>
10. </head>
11. <body>
12. <canvas id="myCanvas" width="578" height="200"></canvas>
13. <script>
14. var canvas = document.getElementById('myCanvas');
15. var context = canvas.getContext('2d');
16.
17. context.beginPath();
18. context.moveTo(100, 150);
19. context.lineTo(450, 50);
20. context.stroke();
21. </script>
22. </body>
23. </html>

20
 Gambar 3.2 Garis Lurus Tipis

3.2.2 Garis Lurus Tebal

1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <style>
5. body {
6. margin: 0px;
7. padding: 0px; }
8. </style>
9. </head>
10. <body>
11. <canvas id="myCanvas" width="578" height="200"></canvas>
12. <script>
13. var canvas = document.getElementById('myCanvas');
14. var context = canvas.getContext('2d');
15.
16. context.beginPath();
17. context.moveTo(100, 150);
18. context.lineTo(450, 50);
19. context.lineWidth = 15;
20. context.stroke();
21. </script>
22. </body>

21
 23. </html>

Gambar 3.3 Garis Lurus Tebal

3.2.3 Beberapa Bentuk Garis

1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <style>
5. body {
6. margin: 0px;
7. padding: 0px;
8. }
9. </style>
10. </head>
11. <body>
12. <canvas id="myCanvas" width="578" height="200"></canvas>
13. <script>
14. var canvas = document.getElementById('myCanvas');
15. var context = canvas.getContext('2d');
16.
17. // butt line cap (top line)
18. context.beginPath();
19. context.moveTo(200, canvas.height / 2 - 50);
20. context.lineTo(canvas.width - 200, canvas.height / 2 - 50);
21. context.lineWidth = 20;

22
22. context.strokeStyle = '#0000ff';
23. context.lineCap = 'butt';
24. context.stroke();
25.
26. // round line cap (middle line)
27. context.beginPath();
28. context.moveTo(200, canvas.height / 2);
29. context.lineTo(canvas.width - 200, canvas.height / 2);
30. context.lineWidth = 20;
31. context.strokeStyle = '#0000ff';
32. context.lineCap = 'round';
33. context.stroke();
34.
35. // square line cap (bottom line)
36. context.beginPath();
37. context.moveTo(200, canvas.height / 2 + 50);
38. context.lineTo(canvas.width - 200, canvas.height / 2 + 50);
39. context.lineWidth = 20;
40. context.strokeStyle = '#0000ff';
41. context.lineCap = 'square';
42. context.stroke();
43. </script>
44. </body>
45. </html>

Gambar 3.4 Beberapa Bentuk Garis

23
3.3 Membuat Bangun Datar
3.3.1 Lingkaran
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <style>
5. body {
6. margin: 0px;
7. padding: 0px;
8. }
9. </style>
10. </head>
11. <body>
12. <canvas id="myCanvas" width="578" height="200"></canvas>
13. <script>
14. var canvas = document.getElementById('myCanvas');
15. var context = canvas.getContext('2d');
16. var centerX = canvas.width / 2;
17. var centerY = canvas.height / 2;
18. var radius = 70;
19.
20. context.beginPath();
21. context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
22. context.fillStyle = 'green';
23. context.fill();
24. context.lineWidth = 5;
25. context.strokeStyle = '#003300';
26. context.stroke();
27. </script>
28. </body>
29. </html>

24
 Gambar 3.5 Lingkaran

3.3.2 Persegi
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <style>
5. body {
6. margin: 0px;
7. padding: 0px;
8. }
9. </style>
10. </head>
11. <body>
12. <canvas id="myCanvas" width="578" height="200"></canvas>
13. <script>
14. var canvas = document.getElementById('myCanvas');
15. var context = canvas.getContext('2d');
16.
17. context.beginPath();
18. context.rect(188, 50, 200, 100);
19. context.fillStyle = 'yellow';
20. context.fill();
21. context.lineWidth = 7;
22. context.strokeStyle = 'black';

25
 23. context.stroke();
24. </script>
25. </body>
26. </html>

Gambar 3.6 Persegi

3.3.3 Setengah Lingkaran

1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <style>
5. body {
6. margin: 0px;
7. padding: 0px;
8. }
9. </style>
10. </head>
11. <body>
12. <canvas id="myCanvas" width="578" height="200"></canvas>
13. <script>
14. var canvas = document.getElementById('myCanvas');
15. var context = canvas.getContext('2d');
16.
17. context.beginPath();
18. context.arc(288, 75, 70, 0, Math.PI, false);
19. context.closePath();

26
 20. context.lineWidth = 5;
21. context.fillStyle = 'red';
22. context.fill();
23. context.strokeStyle = '#550000';
24. context.stroke();
25. </script>
26. </body>
27. </html>

Gambar 3.7 Setengah Lingkaran

3.4 Membuat Website Sederhana

Untuk membuat sebuah Website sederhana dengan menggunakan HTML 5,
pertama-tama buatlah sebuah folder yang nantinya akan berisikan file-file seperti html,
css, image, video, dll. Untuk membuat sebuah file html, bisa menggunakan Notepad++
atau software editor lainnya.

3.4.1 Header, Body, dan Footer

Sebelum membuat website, kita harus mengenal header, body, dan footer.
Header adalah tampilan website di bagian atas, bisa terdiri dari banner, logo, menu, dll.
Body adalah isi dari website yang akan kita buat. Sedangkan footer adalah tampilan
yang berada di bawah halaman website, biasanya di footer tertulis copyright, sponsor,
alamat website, dll.

3.4.2 Membuat Halaman Utama

Halaman utama adalah halaman dimana ketika ada user membuka website kita,
halaman ini yang akan muncul. Kita namakan halaman utama ini dengan index.html
yang kemudian disave di dalam satu folder yang dinamakan html5.

27
<!DOCTYPE HTML>
<html>
<link rel="icon" href="img/logo_gundar.jpg" type="image/x-icon">
<link rel="shortcut icon" href="img/logo_gundar.jpg"
type="image/x-icon" />
<head>
<title>Websiteku</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords"
/>
<meta http-equiv="content-type" content="text/html; charset=windows-
1252" />
<link rel="stylesheet" type="text/css" href="style/style.css"
title="style" />
</head>

<body>
<div id="main">
<div id="header">
<div id="logo">
<div id="logo_text">
<!-- class="logo_colour", allows you to change the colour of
the text -->
<h1><a href="index.html">Lap<span
class="logo_colour">Net</span></a></h1>
<h2>Universitas Gunadarma</h2>
</div>
</div>
<div id="menubar">
<ul id="menu">
<!-- put class="selected" in the li tag for the selected
page - to highlight which page you're on -->
<li class="selected"><a href="index.html">Home</a></li>
<li><a href="video.html">Video</a></li>
<li><a href="canvas.html">Canvas</a></li>
<li><a href="examples.html">Examples</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
</div>
</div>
<div id="site_content">
<div class="sidebar">

28
 <!-- insert your sidebar items here -->
<h3>Latest News</h3>
<h4>Tersedia Video</h4>
<h5>February 27th, 2014</h5>
<p>Website ini bisa memutar video <br /><a
href="video.html">Read more</a></p>
<p></p>
<h4>Tentang Websiteku</h4>
<h5>January 30th, 2014</h5>
<p>Klik link di bawah ini untuk melihat biodataku<br /><a
href="#">Read more</a></p>
<h3>Useful Links</h3>
<ul>
<li><a href="http://www.gunadarma.ac.id/">Gunadarma</a></li>
<li><a href="http://lepkom.gunadarma.ac.id/">Lepkom</a></li>
<li><a href="http://baak.gunadarma.ac.id/">BAAK</a></li>
<li><a
href="http://ugpedia.gunadarma.ac.id/">UGPedia</a></li>
</ul>
<h3>Search</h3>
<form method="post" action="#" id="search_form">
<p>
<input class="search" type="text" name="search_field"
value="Enter keywords....." />
<input name="search" type="image" style="border: 0;
margin: 0 0 -9px 5px;" src="style/search.png" alt="Search"
title="Search" />
</p>
</form>
</div>
<div id="content">
<!-- insert the page content here -->
<h1>Selamat Datang di Websiteku</h1>
<p>Website ini menggunakan tag-tag baru di HTML5</p>
<p style="text-align: justify; text-indent: 0.5in;">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.
<h2>Browser Compatibility</h2>

29
 <p>This template has been tested in the following
browsers:</p>
<ul>
<li>Internet Explorer 8</li>
<li>Internet Explorer 7</li>
<li>FireFox 3.5</li>
<li>Google Chrome 6</li>
<li>Safari 4</li>
</ul>
</div>
</div>
<div id="content_footer"></div>
<div id="footer">
Copyright &copy; Dirgan Traviata 2014 | <a
href="http://validator.w3.org/check?uri=referer">HTML5</a> | <a
href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a
href="http://www.html5webtemplates.co.uk">design from
HTML5webtemplates.co.uk</a>
</div>
</div>
</body>
</html>

Gambar 3.8 Halaman Utama

30
3.4.3 Membuat Halaman Video
Pada halaman video ini berisikan contoh sebuah website yang menggunakan
HTML 5 meng-embed sebuah video yang diambil dari YouTube atau diambil dari video
yang berasal dari PC kita. Untuk memunculkan video dari PC, buat dahulu folder
“video” di dalam folder html5 kemudian masukkan file video tersebut. Untuk bagian
header dan footer pada halaman ini dan selanjutnya bisa disamakan dengan index.html
sebelumnya. Berikut body dari halaman video yang dinamakan dengan video.html :
<body>
<div id="main">
<div id="header">
<div id="logo">
<div id="logo_text">
<!-- class="logo_colour", allows you to change the colour of
the text -->
<h1><a href="index.html">Lap<span
class="logo_colour">Net</span></a></h1>
<h2>Universitas Gunadarma</h2>
</div>
</div>
<div id="menubar">
<ul id="menu">
<!-- put class="selected" in the li tag for the selected
page - to highlight which page you're on -->
<li><a href="index.html">Home</a></li>
<li class="selected"><a href="video.html">Video</a></li>
<li><a href="canvas.html">Canvas</a></li>
<li><a href="examples.html">Examples</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
</div>
</div>
<div id="site_content">
<div class="sidebar">
<!-- insert your sidebar items here -->
<h3>Latest News</h3>
<h4>Tersedia Video</h4>
<h5>February 27th, 2014</h5>
<p>Website ini bisa memutar video <br /><a
href="video.html">Read more</a></p>
<p></p>
<h4>Tentang Websiteku</h4>

31
 <h5>January 30th, 2014</h5>
<p>Klik link di bawah ini untuk melihat biodataku<br /><a
href="#">Read more</a></p>
<h3>Useful Links</h3>
<ul>
<li><a href="http://www.gunadarma.ac.id/">Gunadarma</a></li>
<li><a href="http://lepkom.gunadarma.ac.id/">Lepkom</a></li>
<li><a href="http://baak.gunadarma.ac.id/">BAAK</a></li>
<li><a
href="http://ugpedia.gunadarma.ac.id/">UGPedia</a></li>
</ul>
<h3>Search</h3>
<form method="post" action="#" id="search_form">
<p>
<input class="search" type="text" name="search_field"
value="Enter keywords....." />
<input name="search" type="image" style="border: 0;
margin: 0 0 -9px 5px;" src="style/search.png" alt="Search"
title="Search" />
</p>
</form>
</div>
<div id="content">
<!-- insert the page content here -->
<h2>Video ini embed dari YouTube, bisa diputar melalui flash player
atau html5</h2>
<iframe width="560" height="315"
src="http://www.youtube.com/embed/VcJasnxksxA" frameborder="0"
allowfullscreen></iframe> <!--katanya ini play pake flash otomatis -->
<br>

<h2>Video ini diambil dari folder video</h2>

<video width="560" height="315" controls>
<source src="video/Angry Birds.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">

32
 Your browser does not support the audio element.
</audio>
</div>
</div>

Gambar 3.9 Halaman Video

3.4.4 Membuat Halaman Canvas

Pada halaman ini menampilkan tag canvas yang sudah dibahas di bab 2 pada
modul ini. Kita namakan halaman ini dengan canvas.html. Berikut body cadi
canvas.html :
<body>
<div id="main">
<div id="header">
<div id="logo">
<div id="logo_text">
<!-- class="logo_colour", allows you to change the colour of
the text -->
<h1><a href="index.html">Lap<span
class="logo_colour">Net</span></a></h1>
<h2>Universitas Gunadarma</h2>
</div>
</div>
<div id="menubar">
<ul id="menu">

33
 <!-- put class="selected" in the li tag for the selected
page - to highlight which page you're on -->
<li><a href="index.html">Home</a></li>
<li><a href="video.html">Video</a></li>
<li class="selected"><a href="canvas.html">Canvas</a></li>
<li><a href="examples.html">Examples</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
</div>
</div>
<div id="site_content">
<div class="sidebar">
<!-- insert your sidebar items here -->
<h3>Latest News</h3>
<h4>Tersedia Video</h4>
<h5>February 27th, 2014</h5>
<p>Website ini bisa memutar video <br /><a
href="video.html">Read more</a></p>
<p></p>
<h4>Tentang Websiteku</h4>
<h5>January 30th, 2014</h5>
<p>Klik link di bawah ini untuk melihat biodataku<br /><a
href="#">Read more</a></p>
<h3>Useful Links</h3>
<ul>
<li><a href="http://www.gunadarma.ac.id/">Gunadarma</a></li>
<li><a href="http://lepkom.gunadarma.ac.id/">Lepkom</a></li>
<li><a href="http://baak.gunadarma.ac.id/">BAAK</a></li>
<li><a
href="http://ugpedia.gunadarma.ac.id/">UGPedia</a></li>
</ul>
<h3>Search</h3>
<form method="post" action="#" id="search_form">
<p>
<input class="search" type="text" name="search_field"
value="Enter keywords....." />
<input name="search" type="image" style="border: 0;
margin: 0 0 -9px 5px;" src="style/search.png" alt="Search"
title="Search" />
</p>
</form>
</div>

34
 <div id="content">
<!-- insert the page content here -->
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'purple';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#000000';
context.stroke();
</script>
</div>
</div>

Gambar 3.10 Halaman Canvas

3.4.5 Membuat Halaman Examples

Halaman ini berisikan contoh-contoh elemen yang bisa ditampilkan di HTML5
seperti header, text, table, dll. Kita namakan halaman ini dengan examples.html.
Berikut body dari examples.html :
<body>
<div id="main">
<div id="header">

35
 <div id="logo">
<div id="logo_text">
<!-- class="logo_colour", allows you to change the colour of
the text -->
<h1><a href="index.html">Lap<span
class="logo_colour">Net</span></a></h1>
<h2>Universitas Gunadarma</h2>
</div>
</div>
<div id="menubar">
<ul id="menu">
<!-- put class="selected" in the li tag for the selected
page - to highlight which page you're on -->
<li><a href="index.html">Home</a></li>
<li><a href="video.html">Video</a></li>
<li><a href="canvas.html">Canvas</a></li>
<li class="selected"><a
href="examples.html">Examples</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
</div>
</div>
<div id="content_header"></div>
<div id="site_content">
<div class="sidebar">
<!-- insert your sidebar items here -->
<h3>Latest News</h3>
<h4>Tersedia Video</h4>
<h5>February 27th, 2014</h5>
<p>Website ini bisa memutar video <br /><a
href="video.html">Read more</a></p>
<p></p>
<h4>Tentang Websiteku</h4>
<h5>January 30th, 2014</h5>
<p>Klik link di bawah ini untuk melihat biodataku<br /><a
href="#">Read more</a></p>
<h3>Useful Links</h3>
<ul>
<li><a href="http://www.gunadarma.ac.id/">Gunadarma</a></li>
<li><a href="http://lepkom.gunadarma.ac.id/">Lepkom</a></li>
<li><a href="http://baak.gunadarma.ac.id/">BAAK</a></li>

36
 <li><a
href="http://ugpedia.gunadarma.ac.id/">UGPedia</a></li>
</ul>
<h3>Search</h3>
<form method="post" action="#" id="search_form">
<p>
<input class="search" type="text" name="search_field"
value="Enter keywords....." />
<input name="search" type="image" style="border: 0;
margin: 0 0 -9px 5px;" src="style/search.png" alt="Search"
title="Search" />
</p>
</form>
</div>
<div id="content">
<!-- insert the page content here -->
<h1>Examples</h1>
<p>Berikut ini adalah contoh dari elemen-elemen html5</p>
<h2>Headings</h2>
<p>Contoh-contoh heading</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<h2>Text</h2>
<p>Ini contoh jenis-jenis text</p>
<p><strong>This is an example of bold text</strong></p>
<p><i>This is an example of italic text</i></p>
<p><a href="#">This is a hyperlink</a></p>
<h2>Lists</h2>
<p>This is an unordered list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<p>This is an ordered list:</p>
<ol>

37
 <li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h2>Images</h2>
<p>Gambar bisa ditempatkan di kiri, tengah, atau kanan.
Berikut contohnya</p>
<span class="left"><img src="style/graphic.png" alt="example
graphic" /></span>
<span class="center"><img src="style/graphic.png" alt="example
graphic" /></span>
<span class="right"><img src="style/graphic.png" alt="example
graphic" /></span>
<h2>Tables</h2>
<table style="width:100%; border-spacing:0;">
<tr><th>Item</th><th>Description</th></tr>
<tr><td>Item 1</td><td>Description of Item 1</td></tr>
<tr><td>Item 2</td><td>Description of Item 2</td></tr>
<tr><td>Item 3</td><td>Description of Item 3</td></tr>
<tr><td>Item 4</td><td>Description of Item 4</td></tr>
</table>
<h2>Form Elements</h2>
<form action="#" method="post">
<div class="form_settings">
<p><span>Form field example</span><input type="text"
name="name" value="" /></p>
<p><span>Textarea example</span><textarea rows="8"
cols="50" name="name"></textarea></p>
<p><span>Checkbox example</span><input class="checkbox"
type="checkbox" name="name" value="" /></p>
<p><span>Dropdown list example</span><select id="id"
name="name"><option value="1">Example 1</option><option
value="2">Example 2</option></select></p>
<p style="padding-top: 15px"><span>&nbsp;</span><input
class="submit" type="submit" name="name" value="button" /></p>
</div>
</form>
</div>
</div>

38
 Gambar 3.11 Halaman Examples

3.4.6 Membuat Halaman About Me

Pada halaman ini berisikan biodata si pembuat website. Bisa memasukkan
image, nama, twitter, email, no.telp, dll. Kita namakan halaman ini dengan about.html.
Berikut body dari about.html :
<body>
<div id="main">
<div id="header">
<div id="logo">
<div id="logo_text">
<!-- class="logo_colour", allows you to change the colour of
the text -->
<h1><a href="index.html">Lap<span
class="logo_colour">Net</span></a></h1>
<h2>Universitas Gunadarma</h2>
</div>
</div>
<div id="menubar">
<ul id="menu">
<!-- put class="selected" in the li tag for the selected
page - to highlight which page you're on -->
<li><a href="index.html">Home</a></li>
<li><a href="video.html">Video</a></li>
<li><a href="canvas.html">Canvas</a></li>
<li><a href="examples.html">Examples</a></li>
<li class="selected"><a href="about.html">About Me</a></li>
</ul>

39
 </div>
</div>
<div id="site_content">
<div class="sidebar">
<!-- insert your sidebar items here -->
<h3>Latest News</h3>
<h4>Tersedia Video</h4>
<h5>February 27th, 2014</h5>
<p>Website ini bisa memutar video <br /><a
href="video.html">Read more</a></p>
<p></p>
<h4>Tentang Websiteku</h4>
<h5>January 30th, 2014</h5>
<p>Klik link di bawah ini untuk melihat biodataku<br /><a
href="#">Read more</a></p>
<h3>Useful Links</h3>
<ul>
<li><a href="http://www.gunadarma.ac.id/">Gunadarma</a></li>
<li><a href="http://lepkom.gunadarma.ac.id/">Lepkom</a></li>
<li><a href="http://baak.gunadarma.ac.id/">BAAK</a></li>
<li><a
href="http://ugpedia.gunadarma.ac.id/">UGPedia</a></li>
</ul>
<h3>Search</h3>
<form method="post" action="#" id="search_form">
<p>
<input class="search" type="text" name="search_field"
value="Enter keywords....." />
<input name="search" type="image" style="border: 0;
margin: 0 0 -9px 5px;" src="style/search.png" alt="Search"
title="Search" />
</p>
</form>
</div>
<div id="content">
<!-- insert the page content here -->
<h1>About Me</h1>
<center> <img src="img/keepcalm.jpg" alt="logo gundar"
height="256" width="256"> </center>
<p>Nama : Dirgan Traviata M</p>
<p>NPM : 52410096 </p>
<p>Kelas : 4IA13</p>

40
 <p>About me : saya tuh apa adanya, blablablablabla </p>
</div>
</div>

Gambar 3.12 Halaman About Us

41
3.5 Form HTML
Salah satu fasilitas yang disediakan oleh dokumen HTML
memungkinkan kita untuk melakukan “interaksi lebih” terhadap halaman
dokumen tersebut. Semisal, kemampuan dokumen HTML mampu menyediakan
fasilitas yang dapat menerima masukkan atau isian data dari user. Data isian user ini
nantinya akan dapat diproses lebih lanjut menjadi informasi yang dibutuhkan oleh
user maupun oleh pemilik situs tersebut. Form dalam HTML adalah suatu bagian
yang berfungsi sebagai input atau masukan dari pengguna yang kemudian akan
diproses atau diolah untuk dapat digunakan sesuai dengan kebutuhan. Contohnya
proses pengiriman data, browse, hapus, penyuntingan data dan lain sebagainya.
Tag HTML yang digunakan untuk membuat form adalah :
<form>

...menu-menu input yang ada pada form….

</form>

Berikut adalah Jenis-jenis media input pada HTML.

3.5.1 Kontrol Berupa Text
Pengisian informasi dalam bentuk teks pada form HTML dapat dilakukan dengan
menggunakan dua buah elemen:textarea dan input. textarea digunakan untuk
masukan teks yang terdiri dafi beberapa baris, sementara inputdigunakan untuk
masukan teks yang hanya satu baris.
Penggunaan elemen textarea dapat dilakukan dengan sangat sederhana, hanya
langsung memasukkan tag-nya saja:
<textarea>
Contoh isi Text area
</textarea>

Gambar 3.13 Contoh penggunaan Elemen TextArea

Pengaturan panjang dan lebar dari textarea dapat dilakukan melalui CSS, dengan
menggunakan properti height danwidth. Walaupun dapat mengisikan teks
dengan banyak sekaligus, textarea tentunya tidak dapat digunakan untuk seluruh
kasus pengisian data. Seringkali kitamenginginkan pengguna hanya mengisikan
data singkat, tanpa isi teks yang banyak. Untuk jenis masukan seperti itu, kita
dapat menggunakan elemen input:
<input type="text">

Gambar 3.14 Contoh Penggunaan Element Input

Perhatikan juga bahwa kita menggunakan atribut type pada elemen ini untuk
42
 menentukan data-data yang akan diisikan. Terdapat banyak jenis tipe data
yang dapat kita isikan, dan browser akan menyesuaikan jenis masukan teks
yang ada, sesuai dengan atribut type yang kita tentukan. Nilai-nilai yang
dapat diisikan pada atribut type yaitu:
1. color 9. time
2. datetime-local 10. datetime
3. number 11. month
4. tel 12. search
5. week 13. url
6. date 14. password
7. email 15. text
8. range 16. file
3.5.2 Kontrol Berupa Radio Button
Radio button di gunakan untuk menyatakan pilihan yang bersifat tunggal,
umumnya pada web di gunakan untuk kelengkapan pertanyaan seperti pada
pendaftaran online, biasanya pertanyaan itu adalah pilihan untuk menyetakan
jenis kelamin , agama, ataupun sebagainya. Radio Button ini akan sering
kita temui saat kita berselancar di dunia maya yang terkait dengan proses input
data seperti pendaftaran dll. Radio button dibuat dalam HTML dengan
menggunakan elemen input, dengan atribut type bernilai : code`radio`:
<input type="radio" name="sex"
value="pria">Pria<br>
<input type="radio" name="sex"
value="wanita">Wanita

Gambar 3.15 Contoh Penggunaan Radio Button

Dalam pembuatan elemen radio button, kita juga wajib menambahkan dua
atribut lainnya, yaitu name dan value. Atribut name digunakan untuk
memberitahukan browser bahwa radio button dengan atribut name yang sama
adalah merupakan kumpulan radio button yang sama, sehingga pengguna
tidak boleh memilih dua buah pilihan pada radio button tersebut. Atribut value
digunakan untuk menyimpan nilai yang ingin kita kirimkan ke server.

3.5.3 Dropdown List

Pembuatan elemen dropdown dilakukan dengan menggabungkan dua elemen,
yaitu select dan option. Elemenselect membungkus seluruh elemen option
yang ada, untuk membentuk sebuah dropdown. Elemen option sendiri
merupakan nilai dari dropdown yang diinginkan. Perhatikan kode di bawah:
<select>
<option>SELECT KOTA</option>
<option>Bogor</option>
<option>Jakarta</option>
<option>Bekasi</option>
<option>Tangerang</option>
<option>Depok</option>
<option>cikarang</option>
<option>Banten</option>
</select>

43
 Gambar 3.16 Contoh penggunaan Elemen Dropdown

3.5.4 Button
Pada saat kita melakukan browsing di Internet, dan mengakses sebuah website.
Sering kita menemui tombol-tombol fungsi seperti reset, submit, send dan
lain sebagainya. Dan sering pula kita sering menemui gambar yang dibuat fungsi
seperti tombol.
Submit
Tombol ini berfungsi untuk memanggil url yang sudah didefisikan di atribut
action. Pembuatan tombol submit juga dilakukan dengan menggunakan elemen
input, yang atribut type-nya diisikan dengan nilai submit, seperti berikut:
<input onclick="simpan()"type="submit" name="submit" value="simpan"/>

Gambar 3.17 Contoh penggunaan tombol Submit

Perhatikan bahwa berbeda dengan elemen-elemen input sebelumya, nilai dari
atribut value diproses menjadi teks dari tombol yang ditampilkan ke
pengguna. Hal ini menyebabkan kita tidak lagi perlu menambahkan teks setelah
elemen form, seperti pada radio button ataupun checkbox.
Reset
Tombol ini berfungsi untuk mengembalikan form ke kondisi awal
(mengosongkan nilai semua elemen yang ada pada form). Pembuatan tombol
dilakukan sama persis seperti pada tombol submit, dengan perbedaan nilai pada
atribut type, yang diisikan dengan reset pada tombol penghapusan ini.
<input type="reset" name="reset" value="Batal"/>

Gambar 3.18 Contoh penggunaan tombol Reset

3.5.5 Membuat Form HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
<h1> Registration Form </h1>
<form>
<table>

44
 <tr>
<td>Nama Lengkap</td>
<td>:</td>
<td><input id="name"type="text" placeholder="Your
name.."></td>
</tr>

<tr>
<td>Tempat Lahir</td>
<td>:</td>
<td><input type="text" id="tempat" ></td>
</tr>

<tr>
<td>Tanggal Lahir</td>
<td>:</td>
<td><input type="Date" ></td>
</tr>

<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><input type="radio" name="sex"
id="jkp"value="pria">Pria
<br><input type="radio" name="sex"
id="jkl"value="wanita">Wanita </td>
</tr>

<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea cols="40" rows="3"
id="alamat"></textarea></td>
</tr>

<tr>
<td>E-mail</td>
<td>:</td>
<td><input type="text" id="email"></td>
</tr>

<tr>
<td>No Hp</td>
<td>:</td>
<td><input type="text" id="hp"></td>
</tr>

<tr>
<td>Kota</td>
<td>:</td>
<td><select>
<option>*****SELECT KOTA*****</option>
<option>Bogor</option>
<option>Jakarta</option>
<option>Bekasi</option>
<option>Tangerang</option>
<option>Depok</option>
<option>cikarang</option>
<option>Banten</option>
</select></td>
</tr>

<tr>
<td>&nbsp;</td>
45
 <td>&nbsp;</td>
<td><input onclick="simpan()"type="submit" name="submit"
value="simpan"/>
<input type="reset" name="reset" value="Batal"/></td>
</tr>

</table>
</form>
</body>
</html>

Akan menghasilkan output dalam bentuk form seperti berikut :

Gambar 3.19 Output form HTML

BAB 4 HTML , CSS, dan JavaScript

Sebagian besar Halaman web yang terdapat di internet tersusun atas 3 bahasa. 3
bahasa ini adalah HTML, CSS dan Javascript. Pemahaman tentang HTML, CSS dan
Javascript merupakan hal yang sangat penting demi kemudahan proses
pembangunan website.

4.1 Cascading Style Sheet (CSS)

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa
komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
CSS dapat mengendalikan ukuran gambar, warna body teks, warna tabel, ukuran
border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi
antar teks, margin kiri/kanan/atas/bawah, dan parameter lainnya.CSS adalah bahasa
style sheet yang digunakan untuk mengatur tampilan dokument. CSS memungkinkan
kita untuk menampilkan halaman yang sama dengan format yang berbeda.

CSS tidak dapat berdiri sendiri melainkan harus berada di dalam strukur
pemrograman lain yang didasari oleh HTML atau PHP.
46
4.1.1 Penggunaan CSS pada HTML.
Seperti yang kita ketahui, code bahasa CSS tidak dapat berjalan tanpa adanya file dari
bahasa lain yaitu HTML. Terdapat 3 Cara penggunaan kode css.
Pertama yaitu Inline Style Sheet. Cara ini cukup mudah yaitu langsung menuliskan
kode css kita pada tag HTML (dalam css disebut selector), contoh :
<body style='background:blue'>

 body : tag HTML

 style : attribute HTML
 background : property
 blue : value

Kedua, Internal / Embedded Style Sheet. Cara penggunaan internal / embedded style
sheet yaitu dengan menggabungkan kode css dengan file HTML namun ditulis di
dalam tag head. Contoh :
<html>
<head>
<style>
body{
background : blue;
}
</style>
</head>
<body>
</body>
</html>

Ketiga, External Style Sheet. Cara ini adalah cara yang paling banyak dipakai untuk
penggunaan css, yaitu dengan memisahkan kode css anda di file sendiri dengan
ekstensi .css. Contoh kode dalam file css :
body{
background: blue;
color: black;
}
p{
font-size: 12px;
}

Untuk menggunakan file CSS tersebut kita harus menambahkan sebaris kode dalam tag
head file HMTL. Contoh :

<html>
<head>
<link rel="stylesheet" type="text/css" href="css_saya.css">
</head>
<body>
</body>
</html>

4.2 JavaScript
JavaScript adalah bahasa scripting yang paling populer di internet dan bekerja pada

47
banyak browser seperti Internet Explorer, Mozilla, Firefox, Netscape, Opera.
JavaScript digunakan pada Web pages untuk meningkatkan design, validate forms,
detect browsers, create cookies, GUI dsb.
Sama seperti CSS, Javascript tidak dapat berdiri sendiri dan harus didasari oleh
HTML atau PHP. Namun perbedaan Javascript dengan CSS adalah, Javascript
mengatur logika seperti validasi untuk membuat tampilan website lebih dinamis dan
CSS mengatur tampilan dari website tersebut seperti gambar, warna , font, dll.

4.2.1 Penggunaan JavaScript pada HTML

Sama seperti CSS, JavaScript adalah salah satu bahasa penting untuk membuat
sebuah website. Terdapat dua cara menjalankan kode JavaScript melalui HTML :
Pertama, Menuliskan Javascript pada tag <script>. Penulisan kode Javascript
menggunakan tag <script> adalah cara umum yang digunakan.Tag <script> dapat kita
buat di dalam tag <head> maupun <body>. Contoh :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
<script>
console.log("Hi, ini kode Javascript");
</script>
</head>
<body>

<script>
document.write("Javascript itu keren!");
</script>
</body>
</html>
Hasilnya :

Gambar 4.1 JavaScript yang Sudah dijalankan

Kedua adalah Menuliskan JavaScript pada File eksternal. Pada cara ini kita akan
menuliskan kode javascript di file yang terpisah dengan file html. File javascript
memiliki ekstensi .js, pada file inilah kita akan menuliskan kode JavaScript kita.

48
Untuk menggunakan file JavaScript pada HTML, kita harus menghubungkannya
dengan tag script yang ada pada file HTML. Contoh :
<script src = “kode-script.js”></script>

4.3 Membuat File CSS dan JavaScript untuk HTML

Melanjutkan dengan file HTML form yang sudah dibuat pada bab 3, kita akan
menambahkan gaya pada form tersebut dengan kode CSS dan memberikan aksi pada
form tersebut dengan kode JavaScript.

Kode file CSS :

input[type=text],input[type=date],textarea, select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

input[type=submit], input[type=reset] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}

input[type=submit],input[type=reset]:hover {
background-color: #56da5c;
}

Kode file JavaScript

function simpan(){
var name = document.getElementById("name").value;
alert("Terimakasih telah mengisi formulir, "+ name );
}

Setelah membuat file CSS dan JavaScript, Kita akan Menghubungkannya dengan
menambahkan tag link dan script pada file HTML.

<link rel="stylesheet" href="style.css">

<script src="index.js"></script>
Setelah kita jalankan file HTML pada browser, outputnya akan berbeda, dan
memberikan action ketika tombol „submit‟ ditekan.

49
 Gambar 4.2 Tampilan form setelah diberikan sentuhan kode CSS

Gambar 4.3 Pop-up alert yang muncul setelah tombol submit di tekan

50
 DAFTAR PUSTAKA

1. http://www.codingku.com/html/html_contoh-contoh.html
2. http://mkr-site.blogspot.com/2012/07/apa-pengertian-html-dan-
penggunaannya.html
3. http://kutubuku.web.id/2546/apakah-singkatan-dan-definisi-html
4. http://sayamudji.blogspot.com/2013/04/hal-1-diri-stylebackground-40e0d0.html
5. http://id.wikipedia.org/wiki/HTML5
6. http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-
introduction/\
http://www.w3schools.com/html/html5_intro.asp
7. http://ocehandhimas.com/belajar-html5-dasar-pengenalan-tag-tag-html5-baru/
8. http://webcache.googleusercontent.com/search?q=cache:WsguQuMR_LAJ:pust
akaku.com/unduh/2013/03/tutorial-html-5.html+&cd=7&hl=en&ct=clnk

37