BAHASA HTML

L.
Digitally signed
by L. Erawan
DN: cn=L.
L. Erawan
Erawan Date: 2014.09.26
Erawan

08:45:56 +07'00'
Bahan ajar ini berisi penjelasan tentang salah
satu bahasa standar web yaitu HTML. Bahasa
HTML digunakan untuk membuat struktur
konten dari sebuah halaman web. Penjelasan
meliputi struktur dokumen HTML, elemen dan
atributnya sampai dengan berbagai
Program Studi Sistem penjelasan tambahan yang diperlukan seperti
Informasi HTML entities, dan set karakter.

Fakultas Ilmu
Komputer

Universitas Dian
Nuswantoro

Semarang

Nopember 2013
 Diktat Pemrograman Web / versi 1.0

D AFTAR I SI

HTML ..................................................................................................................................... 6
(HyperText Markup Language) ...................................................................................... 6
Elemen HTML .................................................................................................................... 7
Dokumen HTML adalah Halaman Web......................................................................... 7
Browser Web .................................................................................................................... 7
Struktur Dokumen HTML................................................................................................... 7
Elemen HTML ....................................................................................................................... 9
Elemen HTML Bersarang .................................................................................................. 9
Tips .................................................................................................................................... 9
Tag Penutup ................................................................................................................. 9
Elemen Kosong atau Tag Tunggal ............................................................................ 10
Gunakan Lowercase Untuk Menulis Tag HTML ........................................................ 10
Atribut-atribut HTML .......................................................................................................... 11
Heading ............................................................................................................................. 12
Lines HTML ...................................................................................................................... 12
Komentar HTML .............................................................................................................. 12
Menampilkan Kode Sumber (Source Code) .............................................................. 13
Paragrap HTML.................................................................................................................. 14
Line Break HTML ............................................................................................................. 14
Tips Tentang Spasi dan Pindah Baris ............................................................................ 15
Tag-tag Formatting HTML ................................................................................................. 16
Tag Formatting............................................................................................................... 16
Tag “Keluaran Komputer” ............................................................................................ 16
Tag Definisi dan Kutipan ............................................................................................... 17
Editor HTML ........................................................................................................................ 18
Links HTML .......................................................................................................................... 20
Hyperlink (Link) HTML ..................................................................................................... 20
Atribut Target ................................................................................................................. 20
Atribut Name ................................................................................................................. 21
Tips .................................................................................................................................. 21
Image HTML....................................................................................................................... 22

L. Erawan, [Link] 2
 Diktat Pemrograman Web / versi 1.0

Atur Tinggi dan lebar Gambar dengan Height dan Width ....................................... 22
Table HTML ........................................................................................................................ 24
Atribut Border ................................................................................................................. 24
Header Tabel ................................................................................................................. 24
Tag <col> ....................................................................................................................... 25
Atribut Opsional ............................................................................................................. 26
List HTML ............................................................................................................................. 27
Unordered List ................................................................................................................ 27
Ordered List .................................................................................................................... 27
Definition List .................................................................................................................. 28
Elemen Block HTML ........................................................................................................... 29
Elemen <DIV> ................................................................................................................ 29
Elemen <span> .............................................................................................................. 29
Layout HTML ...................................................................................................................... 30
Layout Website .............................................................................................................. 30
Layout Dengan Elemen <div> ...................................................................................... 30
Layout Menggunakan Elemen Table .......................................................................... 31
Form HTML ......................................................................................................................... 33
Elemen Input .................................................................................................................. 33
Text Field...................................................................................................................... 33
Password Field ............................................................................................................ 34
Radio Button ............................................................................................................... 34
Checkbox ................................................................................................................... 34
Select List ..................................................................................................................... 35
Textarea ...................................................................................................................... 36
Submit Button.............................................................................................................. 36
Iframe HTML ....................................................................................................................... 38
Atribut Iframe ................................................................................................................. 38
Iframe Sebagai Target Suatu Link ................................................................................ 38
Color HTML ........................................................................................................................ 40
Color Values................................................................................................................... 40
16 Juta Warna Berbeda ................................................................................................ 40
Shades of Gray .............................................................................................................. 41
Web Safe Colors? .......................................................................................................... 42

L. Erawan, [Link] 3
 Diktat Pemrograman Web / versi 1.0

Color Names .................................................................................................................. 43

Multimedia ........................................................................................................................ 48
Browser Support ............................................................................................................. 48
Format Multimedia ........................................................................................................ 48
Format Video ................................................................................................................. 48
Format Sound ................................................................................................................ 49
Penggunaan Berbagai Format .................................................................................... 50
Elemen Object HTML ........................................................................................................ 51
HTML Helpers (Plug-Ins).................................................................................................. 51
Memainkan File Wave Audio Menggunakan QuickTime ....................................... 51
Memainkan File Video MP4 Menggunakan QuickTime.......................................... 51
Memainkan File Video SWF Menggunakan Flash.................................................... 51
Memainkan File Movie WMV Menggunakan Windows Media Player................... 52
Audio HTML........................................................................................................................ 53
Berbagai Masalah dan Solusi ....................................................................................... 53
Menggunakan Plugin.................................................................................................... 53
Penggunaan Elemen <embed> .................................................................................. 53
Penggunaan Elemen <object>.................................................................................... 54
Penggunaan Elemen <audio> HTML 5 ........................................................................ 54
Solusi Terbaik .................................................................................................................. 54
Cara Termudah Untuk Menambahkan Audio Ke Website ........................................ 55
Yahoo Media Player...................................................................................................... 55
Menggunakan Suatu Hyperlink .................................................................................... 56
Inline Sound .................................................................................................................... 56
Video HTML........................................................................................................................ 57
Permasalahan dan Solusi.............................................................................................. 57
Menggunakan Tag <embed>...................................................................................... 57
Menggunakan Tag <object> ....................................................................................... 57
Menggunakan Tag <video>......................................................................................... 58
Solusi Terbaik .................................................................................................................. 58
Solusi YouTube ............................................................................................................... 59
Catatan Tentang Video Inline...................................................................................... 59
Elemen Head HTML........................................................................................................... 60
Elemen title..................................................................................................................... 60

L. Erawan, [Link] 4
 Diktat Pemrograman Web / versi 1.0

Elemen base .................................................................................................................. 60

Elemen Link .................................................................................................................... 61
Elemen style ................................................................................................................... 61
Elemen meta ................................................................................................................. 61
Keywords Untuk Search Engine .................................................................................... 61
<!DOCTYPE> HTML ............................................................................................................ 63
Versi HTML....................................................................................................................... 63
HTML 5 ......................................................................................................................... 63
HTML 4.01 .................................................................................................................... 64
XHTML 1.0 .................................................................................................................... 64
Set Karakter HTML ............................................................................................................. 65
Set Karakter ISO ............................................................................................................. 65
Konsorsium Unicode ...................................................................................................... 66
HTML Entities ...................................................................................................................... 68
Karakter Spasi (Non-breaking Space) ......................................................................... 68
URL (Uniform Resource Locator) HTML ............................................................................ 74
Uniform Resource Locator ............................................................................................ 74
URL Encoding .................................................................................................................... 75
URL Encoding Functions ................................................................................................ 75
Referensi URL Encoding................................................................................................. 75

L. Erawan, [Link] 5
 Diktat Pemrograman Web / versi 1.0

HTML
(HYPERTEXT MARKUP LANGUAGE)

Tentu Anda telah sering melihat dan mengunjungi suatu situs web. Situs web terdiri
dari halaman-halaman web yang saling berhubungan. Halaman-halaman tersebut
menampilkan suatu informasi yang dapat terdiri dari teks, gambar, animasi, dan
video. Halaman-halaman web tersebut dibuat menggunakan salah satu bahasa
web yang paling terkenal, yaitu HTML.

HTML singkatan dari HyperText Markup Language merupakan bahasa yang

digunakan untuk membuat halaman web. Bahasa HTML berisi sekumpulan simbol-
simbol yang disebut dengan tag. Tag ini berfungsi untuk mengatur dan menentukan
bagaimana suatu objek web ditampilkan dalam suatu halaman web. Objek disini
dapat berupa teks, gambar, foto, audio, animasi, dan video. Tag ini disebut tag
HTML yang berketentuan:

• Tag HTML adalah nama tag (keyword) yang diapit dengan simbol kurung
siku, contoh <html>
• Normalnya tag HTML berpasangan seperti <h1> dan </h1>
• Tag pertama disebut tag awal dan tag kedua disebut tag akhir
• Tag akhir ditulis seperti tag awal dengan penambahan simbol garis miring
(blackslash) didepannya.
• Tag awal dan akhir sering juga disebut tag pembuka dan penutup

Berikut contoh bahasa HTML dalam penggunaannya:

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Penjelasan dokumen HTML diatas:

• Baris pertama, DOCTYPE, menetapkan jenis dokumen. Dokumen HTML terdiri

dari beberapa jenis, maka perlu ditentukan jenis dokumen yang digunakan.

L. Erawan, [Link] 6
 Diktat Pemrograman Web / versi 1.0

• Tag <html> dan </html> menyatakan bahwa teks didalamnya adalah kode-
kode HTML
• Teks diantara tag <body> dan </body> menyatakan konten halaman yang
tampak di browser.
• Teks diantara tag <h1> dan </h1> ditampilkan sebagai sebuah heading,
yaitu berhuruf besar, tebal, dan berjarak spasi lebih lebar dari sebuah baris
biasa.
• Teks diantara tag <p> dan </p> ditampilkan sebagai sebuah paragrap yang
mempunyai spasi lebih lebar dari sebuah baris.

ELEMEN HTML
Tag HTML dan elemen HTML sering digunakan untuk menyatakan hal yang sama.
Tetapi disini terdapat perbedaan mendasar diantara keduanya, yaitu elemen HTML
adalah semua yang berada diantara tag awal dan akhir termasuk tag-tag itu
sendiri. Jadi elemen HTML adalah:

<tagawal>konten</tagakhir>

Contoh suatu elemen HTML:

<p>Ini adalah sebuah paragrap</p>

DOKUMEN HTML ADALAH HALAMAN WEB

Dokumen HTML sama dengan halaman web. Sebuah dokumen HTML menyatakan
sebuah halaman web. Sehingga suatu dokumen HTML juga disebut halaman web.
Dokumen HTML ini berisi tag-tag HTML dan teks biasa (plain text).

BROWSER WEB
Kegunaan dari browser web (Firefox, Chrome, Internet Explorer, Opera) ini adalah
untuk membaca dokumen-dokumen HTML dan menampilkannya sebagai
halaman-halaman web. Browser web ini tidak menampilkan tag-tag HTML tetapi
menggunakan tag-tag tersebut untuk diterjemahkan menjadi konten suatu
halaman.

STRUKTUR DOKUMEN HTML

Penulisan suatu dokumen HTML mengikuti struktur tertentu yang sudah baku, yaitu:

<html>
<body>
<h1>Ini sebuah heading</h1>

L. Erawan, [Link] 7
 Diktat Pemrograman Web / versi 1.0

<p>Ini sebuah paragrap</p>

</body>
</html>

Struktur diatas terdiri dari sebuah elemen HTML, sebuah elemen BODY dan
kontennya yang disini berisi elemen H1 dan P. Dalam sebuah dokumen HTML hanya
ada satu elemen HTML dan satu elemen BODY.

L. Erawan, [Link] 8
 Diktat Pemrograman Web / versi 1.0

ELEMEN HTML

Elemen-elemen HTML dituliskan dalam suatu dokumen HTML. Elemen HTML adalah
tag awal dan tag akhir serta konten diantaranya. Sintaks elemen HTML:

• Diawali dengan tag awal atau pembuka

• Diakhiri dengan tag akhir ata penutup
• Konten elemen adalah segala sesuatu diantara tag awal dan akhir.
• Beberapa elemen tidak memiliki konten alias elemen kosong. Elemen ini tidak
memiliki pasangan atau hanya terdiri dari tag awal saja
• Elemen kosong ditutup pada tag awalnya. Karena tidak memiliki pasangan
atau tag akhir maka penutupan tag dilakukan pada tag awal dengan
menambahkan simbol blackslash setelah nama tag, contoh <br />.
• Sebagian besar elemen HTML memiliki atribut.

ELEMEN HTML BERSARANG

Sebagian besar elemen HTML dapat disarangkan atau memiliki elemen HTML lain
didalamnya. Sebenarnya, dokumen HTML berisi elemen-elemen HTML yang
bersarangan satu sama lain. Agar lebih jelas berikut sebuah contoh dokumen HTML:

<!DOCTYPE html>
<html>
<body>
<p>Ini adalah teks yang diatur untuk tampil sebagai paragrap</p>
</body>
</html>

Dokumen HTML diatas terdiri dari elemen-elemen HTML yang saling bersarang.
Elemen paragrap terletak didalam elemen BODY. Elemen BODY sendiri berada
didalam elemen HTML. Jadi, elemen HTML berisi elemen BODY yang berisi elemen
paragrap.

Elemen HTML elemen BODY elemen paragrap

TIPS

TAG PENUTUP
Bila kita lupa menutup suatu elemen HTML mungkin sebagian besar browser masih
akan menampilkan dengan baik, seperti elemen paragrap dibawah ini:

L. Erawan, [Link] 9
 Diktat Pemrograman Web / versi 1.0

<p>Ini adalah sebuah elemen paragrap yang tidak ditutup

Tetapi jangan pernah melakukan hal ini dan jangan pernah menyandarkan proses
pembuatan situs Anda dengan mentolerir hal ini. Mengapa? Karena banyak
elemen HTML yang akan memberikan hasil yang tidak diharapkan dan atau
kesalahan jika kita melupakan tag penutup.

ELEMEN KOSONG ATAU TAG TUNGGAL

Elemen HTML yang kosong atau tidak mempunyai pasangan seperti tag <br>
sebaiknya ditutup dengan menambahkan backslash di belakang nama tag seperti
berikut <br />.

GUNAKAN LOWERCASE UNTUK MENULIS TAG HTML

Tag-tag HTML bersifat case-insensitive yang berarti <p> sama dengan <P>. Tetapi
sebaiknya menulis tag-tag HTML menggunakan huruf kecil (lowercase) sebab World
Wide Consortium (W3C) merekomendasikan hal ini pada HTML 4. Dalam XHTML
penulisan tag-tag HTML juga memerlukan penggunaan huruf kecil dalam
penulisannya.

L. Erawan, [Link] 10
 Diktat Pemrograman Web / versi 1.0

ATRIBUT-ATRIBUT HTML

Atribut-atribut HTML menyediakan informasi tambahan tentang elemen HTML.

Penulisan atribut ini pada tag awal suatu elemen HTML. Atribut ditulis bersama
nilainya menggunakan simbol sama dengan serta nilai atribut harus diapit dengan
tanda petik, baik dobel maupun tunggal. Contoh:

<a href=”[Link] sebuah link</a>

Elemen anchor diatas menggunakan atributnya href yang berfungsi menetapkan

alamat link. Pisahkan satu spasi antara nama tag dengan atributnya. Juga antar
atribut-atribut jika menggunakan lebih dari satu atribut pada sebuah elemen HTML.

Atribut-atribut dan nilainyai sebaiknya juga ditulis dalam huruf kecil (lowercase)
meskipun bahasa HTML bersifat case-insensitive. Berikut ini beberapa atribut yang
merupakan standar atribut pada sebagian besar elemen HTML:

Atribut NIlai Penjelasan

class nama kelas menentukan nama kelas untuk suatu elemen
id nama id menentukan id unik untuk suatu elemen
style definisi style menentukan style inline suatu elemen
title teks tooltip membuat informasi tambahan tentang elemen
yang akan tampil dalam bentuk tooltips

L. Erawan, [Link] 11
 Diktat Pemrograman Web / versi 1.0

HEADING

Heading sangat penting dalam halaman web. Search engine seperti google
mengindeks struktur dan konten halaman web menggunakan heading. Jangan
menggunakan heading untuk keperluan membuat huruf besar atau tebal.

Heading dibuat menggunakan tag <h1> sampai dengan <h6>. Semakin besar
angka dibelakang huruf h semakin kecil ukuran heading. Heading juga akan
membuat jarak spasi yang lebih lebar daripada baris biasa.

Gunakan heading secara berurutan. Heading <h1> dapat digunakan sebagai judul
utama, kemudian <h2> untuk sub heading, <h3> untuk sub sub heading, dan
seterusnya. Contoh heading:

<h1>Ini heading terbesar<h1>

<h2>Ini heading terbesar setelah h1</h2>
<h3>Ini heading terbesar ketiga</h3>

LINES HTML
Untuk membuat garis horisontal HTML menyediakan tag <hr />. Tag ini dapat
digunakan misalnya untuk memisahkan konten. Contoh:

<p>Elemen garis ini berupa tag tunggal tanpa pasangan</p>

<hr />
<p>Penulisan tag diakhiri dengan backslash dibelakang nama tag</p>
<hr />
<p>Elemen garis ini cukup bermanfaat untuk memperjelas konten</p>

KOMENTAR HTML
Tag komentar digunakan oleh para webmaster untuk memberi catatan terhadap
kode HTML sehingga dapat membantu ingatan webmaster terhadap kode HTML
didalamnya. Selain itu juga dapat membantu pemahaman terhadap alur kode
HTML.

Tag komentar ini berbentuk seperti contoh berikut:

<!-- Ini adalah sebuah komentar -->

Perhatikan bahwa setelah tanda kurung siku awal diikuti dengan tanda seru
sedangkan kurung siku akhir tidak.

L. Erawan, [Link] 12
 Diktat Pemrograman Web / versi 1.0

MENAMPILKAN KODE SUMBER (SOURCE CODE)

Ketika Anda melihat suatu halaman web di Internet, pernahkah Anda penasaran
bagaimana kode HTMLnya untuk membuat tampilan halaman seperti itu? Tidak
perlu kuatir, Anda dapat melihat kode sumbernya dengan cara klik kanan pada
halaman web tersebut lalu pilih “View Source” atau “View Page Source”, atau
sejenisnya tergantung browser yang digunakan. Tindakan ini akan membuka
sebuah jendela yang berisi kode HTML halaman tersebut.

L. Erawan, [Link] 13
 Diktat Pemrograman Web / versi 1.0

PARAGRAP HTML

Dalam suatu naskah tulisan biasa digunakan paragrap untuk membuat tulisan
menjadi terstruktur, jelas, serta mudah dipahami isinya. Demikian juga dengan
konten halaman web yang berisi tulisan panjang perlu dibagi menjadi paragrap-
paragrap sehingga pokok-pokok pikiran tulisan menjadi jelas dapat dipahami
dengan mudah. Contoh penggunaan elemen ini:

<p>Paragrap yang baik biasanya mengandung satu pokok pikiran saja

sehingga mudah dipahami</p>

<p>Pokok pikiran paragrap sebaiknya juga diletakkan diawal paragrap

sehingga pembaca web dapat terbantu membaca isi paragrap dengan
cepat</p>

Ketika suatu paragrap ditampilkan, browser akan secara otomatis menambahkan

satu baris kosong sebelum dan setelah paragrap. Hal ini yang menyebabkan format
paragrap memiliki jarak spasi yang lebih lebar dengan teks diatas dan dibawahnya.

Perlu dicatat disini, bahwa tanpa tag penutup browser tetap dapat menampilkan
suatu paragrap. Tetapi hal ini sebaiknya dihindari karena melupakan tag penutup
dapat menghasilkan tampilan yang tidak diharapkan atau bahkan kesalahan.
Selain itu, versi HTML berikutnya tidak akan mengijinkan kita untuk meninggalkan tag
penutup.

LINE BREAK HTML

Line break yang dimaksud adalah elemen kosong yaitu tag <br />. Elemen ini
dapat digunakan jika kita ingin berpindah baris tanpa memulai suatu paragrap
baru (maksudnya jika kita tidak ingin jarak baris yang lebar dengan baris teks
sebelumnya). Karena elemen ini merupakan tag tunggal perhatikan cara
penulisannya yang standar, yaitu menambahkan backslash setelah nama tag.
Contoh:

<p>Ini sebuah paragrap.</p>

Baris ini memiliki jarak baris lebih lebar dengan paragrap diatas tetapi tidak
dengan baris berikutnya.<br />
Baris ini memiliki jarak baris tidak selebar sebelumnya karena
menggunakan line break untuk berpindah baris.

L. Erawan, [Link] 14
 Diktat Pemrograman Web / versi 1.0

TIPS TENTANG SPASI DAN PINDAH BARIS

Dalam menerjemahkan suatu dokumen HTML, browser hanya akan mengakui satu
spasi saja untuk jarak antar kata. Artinya, Anda tidak dapat memberi jarak spasi
lebih dari satu antar akata karena akan diabaikan oleh browser.

Demikian juga jika Anda menekan enter untuk berpindah baris pada saat menulis
suatu naskah dalam dokumen HTML. Perpindahan baris dengan menekan enter ini
juga akan diabaikan dan tetap akan ditampilkan oleh browser sebagai satu baris.
Browser hanya akan berpindah baris jika menjumpai tag <br /> atau elemen
paragrap pada saat menerjemahkan suatu dokumen HTML.

L. Erawan, [Link] 15
 Diktat Pemrograman Web / versi 1.0

TAG-TAG FORMATTING HTML

HTML menggunakan tag <i> dan <b> untuk memformat teks menjadi berhuruf miring
atau tebal. Tag-tag ini disebut tag formatting. Berikut beberapa tag formatting
yang ada di HTML.

TAG FORMATTING
Kelompok tag dibawah ini umum digunakan.

Tag Penjelasan
<b> membuat huruf tebal
<big> membuat huruf besar
<em> membuat teks yang ditekankan secara italic
<i> membuat huruf miring
<small> membuat huruf kecil
<strong> membuat penekanan teks dengan penebalan huruf
<sub> membuat subscript teks
<sup> membuat superscript teks
<ins> membuat sisipan teks
<del> membuat penghapusan teks

TAG “KELUARAN KOMPUTER”

Kelompok tag dibawah ini menyediakan format untuk menampilkan teks yang
berhubungan dengan proses pengolahan komputer. Misalnya, Anda mempunyai
sebuah naskah atau artikel tentang “Cara Kerja Komputer”. Tentu didalam naskah
akan ada teks yang menjelaskan tentang hasil keluaran komputer, input dari
keyboard, kode-kode komputer, dan sebagainya. Nah, bagian teks ini dapat
diformat tampilannya menggunakan kelompok tag ini.

Tag Penjelasan
<code> format teks kode-kode komputer
<kbd> format teks inputan keyboard
<samp> format contoh kode komputer
<tt> format tampilan teks mesin ketik
<var> format tampilan variabel
<pre> format teks preformatted

L. Erawan, [Link] 16
 Diktat Pemrograman Web / versi 1.0

TAG DEFINISI DAN KUTIPAN

Tag Penjelasan
<abbr> format singkatan
<acronym> format akronim
<address> format informasi kontak pemilik dokumen
<bdo> menentukan arah aliran teks
<blockquote> format kutipan panjang
<q> format kutipan pendek
<cite> format kutipan
<dfn> format definisi istilah

L. Erawan, [Link] 17
 Diktat Pemrograman Web / versi 1.0

EDITOR HTML

File HTML berjenis file text. Ini berarti untuk membuat file HTML (atau dokumen HTML)
dapat menggunakan berbagai jenis software teks editor yang dapat menghasilkan
file teks. Dan software jenis ini jumlahnya banyak. Beberapa software editor HTML
profesional yang dapat digunakan antara lain:

• Adobe Dreamweaver
• Microsoft Expression Web
• CoffeCup HTML Editor

Namun disarankan untuk mempelajari bahasa HTML ini lebih baik menggunakan
teks editor sederhana seperti Notepad (Windows) atau TextEdit (Mac). Pakar web
percaya bahwa belajar HTML akan lebih baik jika menggunakan teks editor
sederhana.

Perlu diketahui, bahwa suatu file yang berjenis text isinya berupa karakter yang
dapat dibaca oleh manusia alias bukan kode-kode mesin seperti file exe atau com.

Untuk membuat dokumen HTML menggunakan Notepad langkah-langkahnya

sebagai berikut:

1. Buka Notepad

Caranya bervariasi tergantung jenis windows yang digunakan. Untuk Windows 7:

All Programs - Accessories - Notepad

2. Tulis kode HTML Anda pada layar notepad

L. Erawan, [Link] 18
 Diktat Pemrograman Web / versi 1.0

3. Simpan file dengan menu Save as pada menu File. Ketika menyimpan file, Anda
dapat menggunakan akhiran html atau htm. Kedua akhiran ini dapat digunakan
bergantian tidak ada perbedaan sama sekali. Simpan file pada sebuah folder
yang mudah diingat.
4. Jalankan file dengan browser. Buka browser Anda dan buka file dengan menu
File - Open pada browser. Atau bisa juga dengan melakukan klik dua kali pada
nama file HTML yang akan dibuka. Seharusnya hasilnya seperti dibawah ini:

L. Erawan, [Link] 19
 Diktat Pemrograman Web / versi 1.0

LINKS HTML

Link adalah salah satu ciri khusus web. Link dapat dijumpai di setiap halaman web di
Internet. Link digunakan untuk melompat dari satu halaman ke halaman web yang
lain. Link menghubungkan halaman web satu sama lain.

HYPERLINK (LINK) HTML

Link juga disebut hyperlink, adalah suatu kata, kelompok kata, atau gambar yang
dapat diklik untuk melompat ke halaman web yang lain atau bagian tertentu dari
suatu halaman web. Ciri sebuah link adalah ketika kursor berada diatas atau
melintasi suatu link, gambar kursor akan berubah menjadi little hand. Suatu link
dibuat dengan tag anchor atau <a>.

Penggunaan tag anchor untuk membuat link terdapat 2 cara:

1. Untuk membuat link ke dokumen HTML yang lain dengan menggunakan

atribut href.
2. Untuk membuat bookmark dalam dokumen HTML dengan menggunakan
atribut name.

Sintak dari link HTML:

<a href=”url”>Teks link</a>

atribut href menentukan tujuan dari link, contoh:

<a href=”[Link] dunia W3</a>

Jika dijalankan akan tampak pada browser seperti ini:

Organisasi dunia W3

Jika link tersebut diklik maka user akan dibawa menuju halaman homepage situs
W3.

ATRIBUT TARGET
Atribut ini digunakan untuk menentukan akan dibuka dimana halaman web tujuan
link. Contoh dibawah ini akan membuka dokumen HTML tujuan ke jendela browser
yang baru:

<a href=”[Link] target=”_blank”>Organisasi dunia W3</a>

L. Erawan, [Link] 20
 Diktat Pemrograman Web / versi 1.0

ATRIBUT NAME
Atribut ini dapat digunakan untuk menentukan nama sebuah anchor. Atribut yang
digunakan untuk membuat bookmark didalam suatu dokumen HTML. Bookmark
disini berarti suatu penanda yang menandai bagian tertentu dari sebuah dokumen
HTML sehingga dapat menjadi tujuan sebuah link. Contoh penggunaan atribut ini
sebagai berikut:

Pada sebuah dokumen HTML ([Link]), dibagian tertentu dokumen tersebut,

Anda tambahkan kode pembuatan bookmark ini:

<a name=”hyperlink”>Bab 8: Hyperlink</a>

Dalam dokumen yang sama buatlah sebuah link menuju ke bookmark

tersebut:

<a href=”#hyperlink”>Menuju bab 8</a>

Atau Anda bisa membuat link dari dokumen lain menuju ke bookmark
tersebut:

<a href=”[Link]#hyperlink”></a>

TIPS
• Tambahkan selalu akhiran backslash di setiap alamat menuju suatu folder.
Contoh:

href=”[Link]

URL diatas (tanpa akhiran backslash) akan membuat 2 request ke server.

Pertama, server akan menambahkan backslash diakhir alamat. Kedua, server
membuat request baru seperti ini:

href=”[Link]

Dengan demikian akan menambah waktu proses request link yang tentunya
tidak kita harapkan

• Pemberian nama anchor sering digunakan untuk membuat daftar isi bagi
suatu dokumen HTML yang besar. Setiap bab dalam dokumen dinamai
dengan anchor (dibookmark), dan link menuju ke setiap bab diletakkan
dibagian atas dokumen.

L. Erawan, [Link] 21
 Diktat Pemrograman Web / versi 1.0

IMAGE HTML

Dalam HTML, gambar didefinisikan menggunakan tag <img> singkatan dari image.
Tag ini termasuk tag kosong alias tidak mempunyai pasangan tag. Untuk
menampilkan gambar pada halaman perlu atribut src, singkatan dari source. Nilai
dari atribut ini adalah URL dari file gambar yang ingin ditampilkan. Sintaks tag seperti
ini:

<img src=”url” alt=”teks_pengganti gambar” />

atribut alt disini berfungsi untuk menentukan teks yang akan menggantikan bila
gambar ternyata tidak bisa ditampilkan. Gagalnya gambar ditampilkan bisa
disebabkan oleh lambatnya koneksi internet, error pada atribut src, atau jika user
menggunakan screen reader.

Untuk menampilkan gambar dengan nama [Link] yang disimpan di folder yang
sama dengan dokumen HTML yang menampilkannya, maka nilai atribut src sebagai
berikut:

<img src=”[Link]” alt=”gambar kreasi digital” />

Bila gambar terletak dilokasi yang berbeda dengan dokumen HTML yang
menampilkannya, maka alamat path harus ditulis pula, misalnya:

<img src=”images/[Link]” alt=”gambar kreasi digital” />

Elemen image diatas menampilkan gambar yang terletak di server yang sama
dengan dokumen HTML tetapi di folder yang berbeda. Jika gambar terletak di
server yang berbeda, maka nilai atribut src berupa alamat URL absolut:

<img src=”[Link] alt=”gambar

kreasi digital” />

Alat absolut merupakan alamat lengkap beserta jenis protokolnya (http).

ATUR TINGGI DAN LEBAR GAMBAR DENGAN HEIGHT DAN WIDTH

Atribut height dan width digunakan untuk mengatur tinggi dan lebar gambar.
Satuan nilai atribut adalah piksel. Contoh:

<img src=”images/[Link]” alt=”gambar kreasi digital” width=”230”

height=”173” />

L. Erawan, [Link] 22
 Diktat Pemrograman Web / versi 1.0

Menentukan tinggi dan lebar gambar lebih baik dilakukan ketika menampilkan
sebuah gambar di halaman web. Jika atribut ini diset, browser akan menyiapkan
space yang dibutuhkan oleh gambar saat halaman dimuat. Tetapi jika tidak
ditentukan, browser tidak akan tahu ukuran gambar sehingga tidak akan
menyiapkan space untuk gambar. Akibatnya, tata letak halaman akan berubah
ketika gambar mulai dimuat (teks akan dimuat terlebih dahulu ke halaman sebelum
gambar).

Dalam menggunakan gambar pada suatu halaman web sebaiknya tidak

berlebihan sebab pemuatan gambar membutuhkan waktu. Semakin banyak
gambar yang digunakan akan semakin lama proses pemuatan halaman ke
browser.

L. Erawan, [Link] 23
 Diktat Pemrograman Web / versi 1.0

TABLE HTML

Tabel dibuat dengan menggunakan tag <table>. Tabel dibagi menjadi baris-baris
tabel yang dibuat menggunakan tag <tr>, singkatan dari table row. Setiap baris
dibagi menjadi sel-sel data yang dibuat dengan menggunakan tag <td>, singkatan
dari table data yang menampung isi sel data. Isi dari sel data ini yang akan tampak
dilayar browser. Tag <td> dapat berisi text, link, image, list, form, table lainnya, dan
lain-lain.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Tampilan dilayar browser dari contoh diatas:

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

ATRIBUT BORDER
Jika tidak ditentukan maka tabel akan ditampilkan dengan tanpa border. Untuk
menampilkan border tabel menggunakan atribut border:

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
</table>

HEADER TABEL
Tabel seringkali memiliki header. Header tabel adalah baris pertama tabel yang
berfungsi sebagai judul-judul kolom. Header tabel dapat dibuat dengan

L. Erawan, [Link] 24
 Diktat Pemrograman Web / versi 1.0

menggunakan tag <th>. Browser-browser yang sudah terkenal menampilkan teks

didalam elemen <th> dengan tebal dan ditengahkan.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Tampilan di browser dari kode HTML diatas:

Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

TAG <COL>
Tag ini berfungsi untuk menentukan nilai atribut pada satu atau beberapa kolom
didalam sebuah tabel. Tag ini bermanfaat untuk menerapkan style ke seluruh sel
pada suatu kolom daripada harus menentukan satu persatu di setiap sel pada
suatu kolom. Tag ini hanya dapat digunakan didalam elemen <html> atau elemen
<colgroup>. Lihat contoh:

<table border="1">
<colgroup>
<col span="2" style="background-color:red" />
<col style="background-color:yellow" />
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>

L. Erawan, [Link] 25
 Diktat Pemrograman Web / versi 1.0

<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>

Tampilan pada browser:

ATRIBUT OPSIONAL
Atribut-atribut opsional yang dapat digunakan pada tag <col>:

Attribute Value Description

align left Menentukan perataan konten dari suatu elemen

right <col>
center
justify
char

char character Perataan konten dari suatu elemen <col>

menggunakan suatu karakter sebagai acuan
perataan.

charoff number Menentukan jumlah karakter dari konten yang akan

diratakan dihitung dari karakter yang ditentukan
oleh atribut char

span number Menentukan jumlah kolom yang terpengaruh oleh

sebuah elemen <col>

valign top Menentukan perataan vertikal dari konten sebuah

middle elemen <col>
bottom
baseline

width % Menentukan lebar dari sebuah elemen <col>

pixels
relative_length

L. Erawan, [Link] 26
 Diktat Pemrograman Web / versi 1.0

LIST HTML

Dalam HTML, suatu list adalah tampilan dari sekelompok teks yang disusun seperti
sebuah daftar (list=daftar). List ada 2 jenis:

UNORDERED LIST
List jenis ini dibuat menggunakan tag <ul>, singkatan dari unordered list. Masing-
masing item dari daftar dibuat menggunakan tag <li>:

<ul>
<li>Kopi</li>
<li>Susu</li>
<li>Teh</li>
</ul>

Pada browser akan ditampilkan semacam ini:

• Kopi
• Susu
• Teh

Setiap item dari daftar ditandai dengan bullet yang biasanya berupa lingkaran
hitam kecil.

ORDERED LIST
Dibuat menggunakan tag <ol>, singkatan dari ordered list. Masing-masing item dari
daftar dibuat menggunakan tag <li>:

<ol>
<li>Kopi</li>
<li>Susu</li>
<li>Es Jus</li>
</ol>

Pada browser tampak seperti ini:

1. Kopi
2. Susu
3. Es Jus

L. Erawan, [Link] 27
 Diktat Pemrograman Web / versi 1.0

DEFINITION LIST
Pada list jenis ini, setiap itemnya ditampilkan dengan deskripsi disetiap itemnya.
Untuk membuat list ini digunakan tag <dl>. Tag ini satu rangkaian dengan tag <dt>,
singkatan dari data title, dan <dd>, singkatan dari data description.

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Tampilan dari kode diatas:

Coffee
- black hot drink
Milk
- white cold drink

Didalam item dari suatu list dapat diisi dengan teks, image, link, list yang lain, dan
obyek web lainnya.

L. Erawan, [Link] 28
 Diktat Pemrograman Web / versi 1.0

ELEMEN BLOCK HTML

Elemen-elemen didalam HTML dikategorikan sebagai elemen block level dan

elemen inline. Elemen-elemen block level pada browser akan ditampilkan dengan
diawali dan diakhiri dengan baris baru. Termasuk didalamnya:

<h1>, <p>, <table>, <ul>

sedangkan yang tergolong elemen inline ditampilkan tanpa diawali baris baru,
contoh:

<b>, <a>, <img>, <td>

ELEMEN <DIV>
Elemen <div> tergolong sebagai elemen block level. Elemen ini dapat digunakan
sebagai kontainer (penampung) untuk mengelompokkan elemen HTML lainnya.

Nama elemen ini tidak mempunyai arti khusus, selain bahwa elemen adalah
sebuah elemen block level yang berarti akan ditampilkan oleh browser dengan
baris baru diawal dan akhir elemen.

Saat digunakan bersama CSS, elemen ini dapat digunakan untuk mengatur style
tampilan dari satu blok besar dari konten.

Penggunaan umum lainnya dari elemen ini adalah untuk mengatur layout dari
sebuah dokumen HTML, menggantikan cara lama pengaturan layout
menggunakan tabel. Penggunaan tabel untuk pengaturan layout merupakan cara
yang tidak benar dari penerapan elemen <table>. Mengapa? Karena fungsi
sebenarnya dari elemen tabel adalah untuk menampilkan data dalam bentuk
tabular.

ELEMEN <SPAN>
Elemen ini tergolong elemen inline yang dapat digunakan sebagai kontainer teks.
Nama elemen ini tidak mempunyai arti khusus. Ketika digunakan bersama dengan
CSS, elemen ini dapat digunakan untuk mengatur style tampilan dari teks.

L. Erawan, [Link] 29
 Diktat Pemrograman Web / versi 1.0

LAYOUT HTML

Layout halaman web sangat penting untuk membuat tampilan website menjadi
baik. Oleh karena itu, layout halaman web sebaiknya dirancang secara hati-hati.

LAYOUT WEBSITE
Sebagian besar website menampilkan kontennya dalam bentuk multiple columns
(beberapa kolom), seperti tampilan konten majalah atau surat kabar. Kolom-kolom
ini dibuat dengan elemen <div> atau <table>. CSS digunakan untuk mengatur posisi
bagian-bagian halaman, atau untuk membuat latar belakang (background)
halaman, atau mengatur tampilan warna halaman-halaman web.

Perlu digarisbawahi, meskipun elemen table dapat digunakan untuk membuat

layout yang bagus, tetapi itu bukan cara yang benar karena fungsi elemen table
sebenarnya adalah untuk menampilkan data tabular bukan alat pengaturan
layout!

LAYOUT DENGAN ELEMEN <DIV>

Elemen div merupakan elemen block level yang digunakan untuk
mengelompokkan elemen-elemen HTML. Elemen ini sering digunakan untuk
pengaturan layout website. Contoh berikut pengaturan layout dengan
menggunakan 5 elemen div:

<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="backgroundcolor:#
FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="backgroundcolor:#
EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;textalign:

L. Erawan, [Link] 30
 Diktat Pemrograman Web / versi 1.0

center;">
Copyright © [Link]</div>
</div>
</body>
</html>
Hasil layout diatas di browser:

LAYOUT MENGGUNAKAN ELEMEN TABLE

Pengaturan layout dengan cara ini merupakan cara yang paling sederhana.
Meskipun demikian, cara ini tidak disarankan karena tidak sesuai dengan fungsi
elemen table sebenarnya.

Contoh layout dibawah ini menggunakan tabel 3 baris 2 kolom yang baris pertama
dan terakhirnya kolom-kolomnya digabungkan menggunakan atribut colspan.

<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />

L. Erawan, [Link] 31
 Diktat Pemrograman Web / versi 1.0

CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;textalign:
top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © [Link]</td>
</tr>
</table>
</body>
</html>

Tampilan layout diatas di browser sebagai berikut:

L. Erawan, [Link] 32
 Diktat Pemrograman Web / versi 1.0

FORM HTML

Form digunakan untuk mengirimkan data ke server. Sebuah form dapat berisi
elemen-elemen input seperti: text field, checkbox, radio-button, submit button,
select list, textarea, fieldset, legend, dan elemen label.

Untuk membuat elemen form HTML diperlukan tag <form>:

<form>
elemen-elemen input
</form>

ELEMEN INPUT
Elemen form yang paling penting adalah elemen input. Elemen ini digunakan untuk
memperoleh informasi user. Elemen input ini terdiri dari beberapa jenis, yang
ditentukan oleh atribut type. Elemen input dapat berupa text field, checkbox, radio
button, password, submit button, select list, dan textarea.

TEXT FIELD
Dibuat dengan kode:

<input type=”text” />

Elemen input jenis ini berupa bidang input satu baris yang dapat diisi dengan teks
oleh user. Atribut type digunakan untuk menentukan jenis elemen input yang akan
dibuat. Contoh:

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

Pada browser akan ditampilkan sebagai berikut:

First name:

Last name:

Pada contoh diatas, jenis elemen input ini akan tampak sebagai sebuah kotak
dengan lebar default 20 karakter. Kedalam kotak dapat dimasukkan teks oleh user.
Formnya sendiri tidak tampak pada layar.

L. Erawan, [Link] 33
 Diktat Pemrograman Web / versi 1.0

PASSWORD FIELD
Dibuat dengan kode:

<input type=”password” />

Contoh:

<form>
Password: <input type=”” name=”pwd” />
</form>

Pada browser akan tampak:

Password:

Karakter yang dimasukkan kedalam elemen jenis akan ditampilkan sebagai sebuah
simbol asterik atau lingkaran hitam kecil.

RADIO BUTTON
Dibuat dengan kode:

<input type=”radio” / >

Contoh:

<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>

Tampak di browser:

Male

Female

Elemen radion button ini mempersilahkan user untuk hanya memilih salah satu dari
pilihan yang disediakan.

CHECKBOX
Jenis ini user dibolehkan untuk memilih ZERO atau MORE pilihan yang tersedia.
Artinya, pilihan dapat dipilih lebih dari satu atau tidak dipilih sama sekali.

Dibuat dengan kode:

<input type=”checkbox” />

Contoh:

<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car

L. Erawan, [Link] 34
 Diktat Pemrograman Web / versi 1.0

</form>

Hasilnya pada browser:

I have a bike

I have a car

SELECT LIST
Pembuatan elemen ini sedikit berbeda. Kode yang dibutuhkan:

<select >
<option value=””>Label
<option value=””>Label
dst...
</select>

Tag yang digunakan adalah tag <select>, sedangkan untuk membentuk pilihannya
menggunakan tag <option> dengan atribut value untuk menentukan nilai data dari
pilihan. Contoh:

<form>
<select name=”city”>
<option value=”Semarang”>Semarang
<option value=”Jakarta”>Jakarta
</select>
</form>

Hasil di browser:

Pilihan akan ditampilkan kebawah jika tombol dengan simbol panah bawah diklik.

Salah satu atribut penting jenis input ini adalah untuk menentukan pilihan default.
Atribut tersebut adalah selected yang ditulis pada salah satu pilihan yang akan
dijadikan pilihan default. Contoh:

<form>
<select name=”city”>
<option value=”Semarang”>Semarang
<option value=”Jakarta” selected=”selected”>Jakarta
</select>
</form>

Hasil di browser:

L. Erawan, [Link] 35
 Diktat Pemrograman Web / versi 1.0

TEXTAREA
Elemen input ini digunakan untuk membuat inputan yang dapat diisi dengan teks
yang lebih dari satu baris. Dibuat dengan kode:

<textarea></textarea>

Contoh:

<form>
Description: <br />
<textarea name=”desc” rows=”5” cols=”50”></textarea>
</form>

Atribut rows untuk mengatur jumlah baris yang ditampilkan pada kotak textarea.
Kode diatas berarti jumlah baris yang akan ditampilkan adalah 5. Jika teks yang
diisikan kedalam kotak textarea lebih dari 5 baris, maka baris keenam dan
selanjutnya tidak akan tampak dan kotak textarea akan menampilkan batang scroll
vertikal. Sedangkan atribut cols untuk menentukan lebar kotak textarea dengan
satuan karakter. Jika jumlah karakter yang dimasukkan pada suatu baris lebih besar
dari nilai atribut cols maka karakter selanjutnya akan dicetak pada baris berikutnya.

Di browser akan tampak:

SUBMIT BUTTON
Dibuat dengan kode:

<input type=”submit” />

Tombol submit digunakan untuk mengirim data form ke server. Data dikirim ke
sebuah file yang ditentukan pada atribut action form. File ini biasanya berisi kode
untuk mengerjakan sesuatu terhadap data form yang diterima. Contoh:

<form name="input" action="html_form_action.php" method="post">

Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

L. Erawan, [Link] 36
 Diktat Pemrograman Web / versi 1.0

Hasil pada browser:

Username: Submit

Jika user memasukkan teks ke kotak masukan diatas, dan klik tombol “Submit”,
browser akan mengirim inputan user tersebut ke sebuah halaman yang bernama
html_form_action.php.

L. Erawan, [Link] 37
 Diktat Pemrograman Web / versi 1.0

IFRAME HTML

Elemen iframe digunakan untuk menampilkan halaman web didalam halaman web
lainnya. Format elemen ini akan membentuk sejenis bingkai didalam suatu halaman
web. Sintaks elemen:

<iframe src=”URL”></iframe>

Atribut src berfungsi untuk menentukan lokasi halaman web yang akan ditampilkan
sebagai halaman dalam.

ATRIBUT IFRAME
Beberapa atribut iframe yang penting antara lain:

• Height dan Width

Bingkai yang dibentuk oleh elemen iframe dapat diatur ukuran tinggi dan
lebarnya dengan atribut ini. Secara default nilai atribut ini bersatuan piksel.
Tetapi Anda dapat juga menggunakan satuan persen, misalnya “75%”. Contoh
penggunaan atribut ini:

<iframe src=”demo_iframe.html” width=”200” height=”350”></iframe>

Contoh diatas akan halaman web demo_iframe.html didalam suatu bingkai

iframe dengan ukuran lebar 200 piksel dan tinggi 350 piksel pada suatu
halaman web.

• Frameborder

Atribut ini untuk menentukan ditampilkan atau tidak border (garis batas
sekeliling bingkai) iframe. Untuk tidak menampilkan border, nilai atribut ini diset
0.

<iframe src=”demo_iframe.html” frameborder=”0”></iframe>

IFRAME SEBAGAI TARGET SUATU LINK

Kegunaan lain dari iframe adalah dapat digunakan sebagai target atau tujuan
suatu link. Biasanya halaman web tujuan dari suatu link akan ditampilkan pada
suatu jendela browser. Dengan elemen ini, halaman web tujuan tersebut dapat
ditampilkan kedalam bingkai iframe. Contoh:

L. Erawan, [Link] 38
 Diktat Pemrograman Web / versi 1.0

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p>
<a href="[Link] target="iframe_a">Situs Organisasi W3</a>
</p>

Pada contoh diatas, jika link “Situs Organisasi W3” diklik maka situs organisasi
pengelola web dunia dengan alamat [Link] akan tampil pada bingkai
iframe bernama “iframe_a” .

L. Erawan, [Link] 39
 Diktat Pemrograman Web / versi 1.0

COLOR HTML

Warna di halaman web ditampilkan sebagai kombinasi dari warna red, green, dan
blue.

COLOR VALUES
Warna dalam HTML didefinisikan menggunakan sebuah notasi heksadesimal (HEX)
yang berisi kombinasi nilai warna merah, hijau, dan biru (RGB). Nilai terendah untuk
setiap komponen nilai warna adalah 0 (dalam heksa dilambangkan 00) dan nilai
tertinggi adalah 255 (dalam heksa dilambangkan FF).

Nilai heksadesimal warna ini terdiri atas 3 pasangan dari 2 digit bilangan yang
diawali dengan lambang #.

16 JUTA WARNA BERBEDA

Kombinasi dari warna red, green, blue yang bernilai 0-255, memberikan 16 juta
warna yang berbeda (256 x 256 x 256).

Tabel dibawah ini menunjukkan warna merah yang bermacam-macam dengan

nilai merah diantara 0-255 dan nilai warna hijau dan biru dibuat tetap 0.

L. Erawan, [Link] 40
 Diktat Pemrograman Web / versi 1.0

SHADES OF GRAY
Warna gray atau abu-abu dibuat dengan memberikan nilai warna yang sama
untuk warna red, green, dan blue. Berikut tabel warna abu-abu:

L. Erawan, [Link] 41
 Diktat Pemrograman Web / versi 1.0

WEB SAFE COLORS?

Web safe colors disini berarti warna-warnqa yang aman digunakan pada web.
Beberapa tahun yang lalu ketika komputer hanya dapat mendukung 256 warna
yang berbeda, sebuah daftar web safe colors terdiri dari 216 warna disarankan,
sedangkan 40 warna dicadangkan.

Hal ini sudah tidak berlaku lagi sekarang ini, karena komputer sudah mampu
mendukung jutaan warna yang berbeda. Tabel dibawah menunjukkan deretan
web safe colors yang sekarang sudah tidak diperlukan lagi.

L. Erawan, [Link] 42
 Diktat Pemrograman Web / versi 1.0

COLOR NAMES
147 nama warna telah didefinisikan dalam HTML dan CSS color spesification. Terdiri
dari 16 nama warna dasar ditambah 130 nama warna tambahan. Ke-16 nama
warna dasar tersebut adalah:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver,
teal, white, dan yellow.

Dibawah ini tabel daftar 147 nama warna yang dimaksud.

L. Erawan, [Link] 43
 Diktat Pemrograman Web / versi 1.0

L. Erawan, [Link] 44
 Diktat Pemrograman Web / versi 1.0

L. Erawan, [Link] 45
 Diktat Pemrograman Web / versi 1.0

L. Erawan, [Link] 46
 Diktat Pemrograman Web / versi 1.0

L. Erawan, [Link] 47
 Diktat Pemrograman Web / versi 1.0

MULTIMEDIA

Multimedia dalam web meliputi sound, music, video, dan animation. Sebagian
besar browser modern mendukung banyak format multimedia.

Multimedia hadir dalam berbagai format berbeda. Multimedia berupa segala

sesuatu yang dapat didengar atau dilihat seperti text, pictures, music, sound,
videos, records, films, animations, dan masih banyak lagi.

BROWSER SUPPORT
Semula browser hanya mendukung teks bahkan teks dengan jenis font tunggal dan
satu warna. Perkembangan browser berikutnya, browser mendukung color, font,
dan style teks, dan dukungan terhadap pictures.

Dukunga terhadap sounds, animations, dan videos dilakukan dengan cara yang
berbeda oleh browser yang berbeda. Beberapa elemen dapat diterapkan secara
inline, beberapa yang lain membutuhkan sebuah program bantu tambahan
(sebuah plugin).

FORMAT MULTIMEDIA
Elemen multimedia seperti sound dan video disimpan dalam file-file media. Cara
paling umum dilakukan untuk mencari tahu tipe media adalah melihat ekstension
filenya. Ketika browser melihat ekstension .htm atau .html, maka dia akan
menganggap bahwa file tersebut adalah sebuah halaman web. Format picture
memiliki ekstension seperti .gif dan .jpg.

Elemen multimedia juga mempunyai format file mereka sendiri dengan ekstension
yang berbeda-beda seperti .swf, .wmv, .mp3, dan .mp4.

FORMAT VIDEO
Format mp4 adalah format terbaru untuk video internet. Didukung oleh YouTube,
Flash player, dan HTML 5.

Format File Penjelasan

AVI .avi Format AVI (Audio Video Interleave)
dikembangkan Microsoft. Didukung oleh semua
komputer yang menjalankan Windows, dan semua
browser paling populer. Format paling umum di

L. Erawan, [Link] 48
 Diktat Pemrograman Web / versi 1.0

Internet.
WMV .wmv Windows Media Format yang dikembangkan oleh
Microsoft. Format ini sebuah format yang umum di
Internet, tetapi tidak bisa dijalankan pada
komputer non Windows tanpa komponen
tambahan yang diinstall. Beberapa WMV terakhir
tidak bisa dijalankan sama sekali pada komputer
non Windows karena player tidak tersedia.
MPEG .mpg Format MPEG (Moving Pictures Expert Group)
.mpeg paling populer di Internet. Format ini lintas platform
dan didukung oleh semua web browser populer.
QuickTime .mov Dikembangkan oleh Apple. Format umum di
Internet, tetapi tidak dapat dijalankan pada
komputer Windows tanpa instalasi komponen
tambahan.
RealVideo .rm Dikembangkan oleh Real Media. Format ini
.ram mendukung video streaming (online video, TV
Internet) dengan bandwidth yang rendah. Karena
memprioritaskan bandwidth yang rendah, kualitas
sering berkurang.
Flash .swf Format Flash (Shockwave) dikembangkan oleh
.flv Macromedia. Membutuhkan komponen
tambahan untuk dimainkan. Tetapi komponen ini
sudah dtambahkan secara default pada browser
seperti Firefox dan IE.
Mpeg-4 .mp4 Mpeg-4 dengan kompresi video H.264 merupakan
format baru di Internet. Youtube
merekomendasikan format ini. Youtube menerima
banyak format, dan mengkonversi semuanya ke
format .flv atau .mp4 untuk penyebarannya.
Semakin banyak publisher video online yang
berpindah ke mp4 sebagai format berbagi di
Internet untuk Flash Player dan HTML5

FORMAT SOUND
Format File Penjelasan
MIDI .mid MIDI (Musical Instrument Digital Interface) adalah
.midi format alat musik elektronik seperti synthesizers dan
PC Sound Cards. File MIDI tidak berisi suara tetapi
berisi instruksi-intruksi musik digital yang dapat
dimainkan secara elektronik, misalnya oleh PC
Sound Card.
Karena hanya berisi instruksi-instruksi maka ukuran
file MIDI sangat kecil. MIDI didukung oleh banyak
sistem software dengan beragam platform. Semua
browser populer juga mendukung format ini.
RealAudio .rm Dikembangkan oleh Real Media. Mendukung
.ram video streaming dengan bandwidth rendah.
Karena prioritasnya pada bandwidth yang

L. Erawan, [Link] 49
 Diktat Pemrograman Web / versi 1.0

rendah, kualitasnya menjadi kurang.

Wave .wav Format wave (waveform) dikembangkan oleh IBM
dan Microsoft. Didukung oleh semua komputer
yang menjalankan Windows dan semua browser
populer, kecuali Google Chrome.
WMA .wma Format WMA (Windows Media Audio) sebanding
kualitasnya dengan format mp3 dan kompatibel
dengan sebagian besar player kecuali iPod. File
WMA dapat dikirimkan sebagai aliran data
kontinyu yang membuatnya menjadi praktis untuk
digunakan dalam Radio Internet atau musik
online.
MP3 .mp3 File mp3 sesungguhnya adalah bagian suara dari
.mpga file MPEG. Format MPEG aslinya dikembangkan
untuk video oleh Moving Pictures Expert Group.
Mp3 merupakan salah satu format suara paling
populer untuk musik. Sistem encodingnya
mengkombinasikan good compression (small files)
dengan kualitas tinggi. Diharapkan sistem software
masa depan masih mendukungnya.

PENGGUNAAN BERBAGAI FORMAT

WAVE adalah format suara tak terkompresi (uncompressed)yang paling populer di
Internet, didukung oleh semua browser populer. Cocok digunakan untuk
menyajikan suara musik atau percakapan kepada pengunjung pada sebuah
website.

MP3 merupakan format baru untuk rekaman musik yang terkompresi. Istilah mp3
menjadi sinonim dengan musik digital. Jika sebuah website memiliki konten tentang
rekaman musik, maka format ini pilihan yang tepat.

L. Erawan, [Link] 50
 Diktat Pemrograman Web / versi 1.0

ELEMEN OBJECT HTML

Kegunaan dari elemen ini untuk mendukung HTML Helper (HTML Plugin).

HTML HELPERS (PLUG-INS)

Suatu helper application adalah sebuah program yang dapat dijalankan oleh
browser dengan tujuan untuk “membantu”. Helper applications juga disebut Plug-
Ins.

Helper applications dapat digunakan untuk memainkan audio dan video serta
masih banyak lagi. Helper applications dijalankan menggunakan tag <object>.

Salah satu keuntungan menggunakan helper applications untuk memainkan audio

dan video adalah bahwa user dapat mengatur sendiri seting player seperti
memainkan dan menghentikan video, mengatur volume suara, dan sebagainya.

Berikut beberapa contoh kode HTML dalam memainkan suatu file audio atau video.

MEMAINKAN FILE W AVE AUDIO MENGGUNAKAN QUICKTIME

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="[Link]
<param name="src" value="[Link]" />
<param name="controller" value="true" />
</object>

MEMAINKAN FILE VIDEO MP4 MENGGUNAKAN QUICKTIME

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="[Link]
<param name="src" value="movie.mp4" />
<param name="controller" value="true" />
</object>

MEMAINKAN FILE VIDEO SWF MENGGUNAKAN FLASH

<object width="400" height="40"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="[Link]
pub/shockwave/cabs/flash/[Link]#version=8,0,0,0">
<param name="SRC" value="[Link]">
<embed src="[Link]" width="400" height="40"></embed>
</object>

L. Erawan, [Link] 51
 Diktat Pemrograman Web / versi 1.0

MEMAINKAN FILE MOVIE WMV MENGGUNAKAN W INDOWS MEDIA PLAYER

<object width="100%" height="100%"
type="video/x-ms-asf" url="[Link]" data="[Link]"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="[Link]">
<param name="filename" value="[Link]">
<param name="autostart" value="1">
<param name="uiMode" value="full" />
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="[Link]" width="100%" height="100%"
autostart="true" showcontrols="true"
pluginspage="[Link]
</object>

Selain untuk memainkan file-file audio atau video, helper applications atau plugins
dapat digunakan dengan berbagai macam tujuan, antara lain dapat digunakan
untuk menampilkan peta, verifikasi ID Bank Anda, mengontrol input, dan masih
banyak lagi.

L. Erawan, [Link] 52
 Diktat Pemrograman Web / versi 1.0

AUDIO HTML

BERBAGAI MASALAH DAN SOLUSI

File sound atau suara dapat dimainkan di HTML dengan berbagai metode atau
cara. Namun memainkan suara di HTML tidaklah mudah. Perlu mengetahui
berbagai trik untuk dapat memainkan file suara yang dapat berjalan disemua
browser dan semua hardware (PC, Mac, iPad, iPhone).

MENGGUNAKAN PLUGIN
Plugin browser adalah sebuah program kecil yang memperluas fungsi standar
browser. Plugin dapat dipakai untuk berbagai macam kegunaan: memainkan
musik, menampilkan peta, mengontrol input, dan masih banyak lagi.

Plugin dapat ditambahkan ke halaman HTML menggunakan tag <object> atau

<embed>. Tag-tag ini mendefinisikan suatu kontainer untuk berbagai sumber daya
(normalnya sumber daya non HTML) yang akan ditampilkan oleh browser atau
plugin eksternal, tergantung jenisnya.

PENGGUNAAN ELEMEN <EMBED>

Elemen ini mendefinisikan sebuah kontainer untuk sumber daya (non HTML)
eksternal. Elemen ini adalah salah satu elemen dari HTML 5, invalid di HTML 4, tetapi
dapat bekerja di semua browser. Potongan kode dibawah ini akan menampilkan
file MP3 yang ada pada sebuah halaman web:

<embed height=”100” width=”100” src=”horse.mp3” />

Permasalahan yang menghambat:

• Tag <embed> invalid di HTML 4. Halaman Anda tidak akan divalidasi sebagai
HTML 4.
• Browser yang berbeda mendukung format audio yang berbeda
• Jika browser tidak mendukung format file tersebut, file audio tidak akan bisa
dimainkan tanpa sebuah plugin.
• Jika plugin tidak diinstall di komputer user, file audio tidak akan dimainkan.
• Jika dikonversi ke format lain, file audio tersebut masih tetap tidak dapat
dimainkan di semua browser.

Untuk mengatasinya, salah satu solusi yang dapat dipakai adalah menggunakan
DOCTYPE HTML 5 yaitu <!DOCTYPE html>.

L. Erawan, [Link] 53
 Diktat Pemrograman Web / versi 1.0

PENGGUNAAN ELEMEN <OBJECT>

Elemen ini juga dapat digunakan untuk memainkan file audio. Contoh
penggunaan:

<object height=”100” width=”100” data=”horse.mp3”></object>

Permasalahan yang mungkin timbul:

• Browser yang berbeda mendukung format audio yang berbeda

• Jika browser tidak mendukung format file tersebut, file audio tidak akan bisa
dimainkan tanpa sebuah plugin.
• Jika plugin tidak diinstall di komputer user, file audio tidak akan dimainkan.
• Jika dikonversi ke format lain, file audio tersebut masih tetap tidak dapat
dimainkan di semua browser.

PENGGUNAAN ELEMEN <AUDIO> HTML 5

Elemen ini merupakan elemen HTML 5 dan invalid di HTML 4, tetapi dapat bekerja di
semua browser. Contoh penggunaan:

<audio controls=”controls”>
<source src=”horse.mp3” type=”audio/mp3” />
<source src=”[Link]” type=”audio/ogg” />
Browser Anda tidak mendukug format audio ini
</audio>

Contoh diatas adalah menggunakan file mp3 yang dapat berjalan di browser IE,
Chrome, dan Safari. Agar dapat berjalan juga di browser Firefox dan Opera, sebuah
file bertipe ogg ditambahkan. Jika kode ini gagal akan menampilkan pesan
kesalahan yang sudah didefinisikan.

Permasalahan:

• Tag <audio> invalid di HTML 4. Halaman web Anda tidak akan divalidasi
sebagai HTML 4.
• File audio harus dikonversi ke berbagai macam format.
• Elemen <audio> tidak bekerja di browser lama.

SOLUSI TERBAIK

Solusi paling baik adalah seperti contoh kode dibawah ini:

<audio controls=”controls” height=”100” width=”100”>

<source src=”horse.mp3” type=”audio/mp3” />
<source src=”[Link]” type=”audio/ogg” />
<embed height=”100” width=”100” src=”horse.mp3” />

L. Erawan, [Link] 54
 Diktat Pemrograman Web / versi 1.0

</audio>

Contoh diatas menggunakan 2 format berbeda. Elemen <audio> HTML 5 berupaya

untuk memainkan audio sebagai mp3 atau ogg. Jika ini gagal, maka elemen
<embed> akan dicoba digunakan.

Permasalahan:
• File audio yang digunakan harus dikonversi ke beberapa jenis format
• Elemen <audio> tidak divalidasi sebagai elemen HTML 4 dan XHTML
• Elemen <embed> tidak divalidasi sebagai elemen HTML 4 dan XHTML
• Elemen <embed> tidak bisa menampilkan pesan kesalahan.

CARA TERMUDAH UNTUK MENAMBAHKAN AUDIO KE WEBSITE

Cara termudah untuk melakukan hal ini salah satunya adalah dengan
menggunakan Yahoo Media Player.

Penggunaan Yahoo Media Player merupakan suatu pendekatan yang berbeda.

Disini tugas memainkan file audio dipasrahkan kepada Yahoo.

Yahoo Media Player ini dapat memainkan file audio mp3 dan format-format audio
lainnya. Untuk menambahkannya ke halaman web, menggunakan sebaris kode
yang akan langsung merubah halaman HTML Anda menjadi sebuah playlist yang
tampak profesional.

YAHOO MEDIA PLAYER

Berikut ini contoh penggunaan Yahoo Media Player pada suatu potongan kode
program:

<a href=”horse.mp3”>Play Sound</a>

<script type=”text/javascript”
src=”[Link]

Player Yahoo ini gratis. Untuk menggunakannya, sisipkan potongan kode javascript
ini dibawah kode HTML Anda:

<script type=”text/javascript”
src=”[Link]

Kemudian buat link ke file mp3, dan kode javascript diatas akan otomatis membuat
tombol play untuk setiap file audio yang digunakan:

<a href=”song1.mp3”>Mainkan Lagu 1</a>

<a href=”song2.mp3”>Mainkan Lagu 2</a>
dst...

L. Erawan, [Link] 55
 Diktat Pemrograman Web / versi 1.0

Media Player Yahoo akan menampilkan sebuah tombol play kecil daripada
menampilkan player secara penuh. Tetapi jika tombol play ini diklik, player akan
ditampilkan secara penuh.
Pada tampilan halaman web yang bersangkutan, player Yahoo ini selalu
ditampilkan di sisi bawah halaman web Anda. Untuk membuatnya tampil keluar, klik
saja padanya.

MENGGUNAKAN SUATU HYPERLINK

Jika sebuah file audio disertakan pada suatu halaman web menggunakan sebuah
link, maka sebagian besar browser akan menggunakan sebuah plugin untuk
memainkan file tersebut.

Potongan kode dibawah ini menampilkan sebuah link ke suatu file audio. Jika link ini
diklik, maka browser akan menjalankan sebuah plugin untuk memainkannya.

<a href=”horse.mp3”>Play the sound</a>

INLINE SOUND
Ketika suatu sound (suara) disertakan pada suatu halaman web, atau menjadi
bagian dari suatu halaman web, maka sound ini dinamakan inline sound.

Jika Anda berencana menggunakan inline sound di aplikasi web Anda, ingatlah
bahwa banyak orang menganggap inline sound ini menjengkelkan. Dan juga
beberapa user mungkin telah mematikan opsi inline sound pada browser mereka.

Langkah terbaik adalah sertakan inline sound dalam halaman web hanya jika user
menginginkannya. Artinya, suara tidak akan diperdengarkan sampai user mengklik
tombol play untuk mendengarkan suara tersebut.

L. Erawan, [Link] 56
 Diktat Pemrograman Web / versi 1.0

VIDEO HTML

File video dapat dijalankan di HTML dengan berbagai macam metode atau cara.
Dibawah ini contoh kode memainkan file video di HTML:

<video width=”320” height=”420” controls=”controls”>

<source src=”movie.mp4” type=”video/mp4” />
<source src=”[Link]” type=”video/ogg” />
<source src=”[Link]” type=”video/webm” />
<object data=”movie.mp4” width=”320” height=”240”>
<embed src=”[Link]” width=”320” height=”240” />
</object>
</video>

PERMASALAHAN DAN SOLUSI

Menampilkan video di halaman HTML mengandung beberapa permasalahan yang
membutuhkan trik yang tepat agar video Anda dapat tampil pada semua browser
dan semua hardware (PC, Mac, iPad, iPhone).

MENGGUNAKAN TAG <EMBED>

Kegunaan dari tag <embed> ini untuk “menanamkan” (embed) elemen-elemen
multimedia kedalam halaman HTML. Contoh:

<embed src=”[Link]” height=”200” width=”200” />

Masalah yang dapat terjadi disini:

• Tag <embed> tidak dikenal di HTML 4. Halaman web Anda tidak akan
divalidasi secara benar.
• Jika browser tidak mendukung flash, video akan tidak akan tampil.
• iPad dan iPhone tidak dapat menampilkan video flash.
• Jika dikonversi ke format lain, video akan masih tetap akan tidak dapat
ditampilkan di semua browser

MENGGUNAKAN TAG <OBJECT>

Kegunaan dari elemen ini sama dengan elemen <embed>. Contoh penggunaan:

<object data=”[Link]” height=”200” width=”200” />

L. Erawan, [Link] 57
 Diktat Pemrograman Web / versi 1.0

Permasalahannya disini:

• Video tidak akan tampil jika browser tidak mendukung flash.

• iPad dan iPhone tidak dapat menampilkan video flash.
• Jika dikonversi ke format lain, video masih tetap akan tidak dapat tampil
disemua browser.

MENGGUNAKAN TAG <VIDEO>

Elemen ini baru di HTML 5. Kegunaannya untuk menanamkan elemen video
kedalam halaman HTML. Contoh dibawah ini akan menampilkan video dalam
format ogg, mp4, atau webm:

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

<source src="movie.mp4" type="video/mp4" />
<source src="[Link]" type="video/ogg" />
<source src="[Link]" type="video/webm" />
Your browser does not support the video tag.
</video>

Permasalahannya disini:

• Video harus dikonversi ke banyak format

• Elemen <video> tidak bekerja di browser lama
• Elemen <video> tidak divalidasi di HTML 4 dan XHTML

SOLUSI TERBAIK

Solusi terbaik seperti contoh kode dibawah ini:

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

<source src="movie.mp4" type="video/mp4" />
<source src="[Link]" type="video/ogg" />
<source src="[Link]" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="[Link]" width="320" height="240" />
</object>
</video>

Contoh diatas menggunakan 4 format video yang berbeda. Elemen <video> HTML
5 mencoba untuk memainkan video dalam format mp4, ogg, atau webm. Jika ini
gagal, elemen <object> akan coba dijalankan. Jika gagal juga, elemen <embed>
akan coba digunakan.

Permasalahan disini:

L. Erawan, [Link] 58
 Diktat Pemrograman Web / versi 1.0

• Video harus dikonversi ke banyak format

• Elemen <video> tidak divalidasi di HTML 4 dan XHTML
• Elemen <embed> tidak divalidasi di HTML 4 dan XHTML

Sebagai catatan, menggunakan doctype HTML 5 yaitu <!DOCTYPE html> akan

memecahkan masalah validasi.

SOLUSI YOUTUBE
Cara termudah untuk menampilkan video di halaman HTML adalah dengan
menggunakan YouTube. Solusi ini dapat dilihat pada pembahasan tentang
penggunaan YouTube.

Menggunakan Hyperlink

Jika hyperlink digunakan untuk menambahkan sebuah file media kedalam

halaman HTML, maka sebagian besar browser akan menggunakan plugin untuk
menjalankannya. Contoh dibawah ini browser akan menggunakan plugin untuk
memutar file videonya.

<a href=”[Link]”>Play a video file</a>

CATATAN TENTANG VIDEO INLINE

Jika suatu video disertakan pada sebuah halaman web, video ini disebut inline
video.

Jika Anda berencana menggunakan inline video di aplikasi web Anda, ingatlah
bahwa banyak orang menganggap inline video ini menjengkelkan. Dan juga
beberapa user mungkin telah mematikan opsi inline video pada browser mereka.

Langkah terbaik adalah sertakan inline video dalam halaman web hanya jika user
menginginkannya. Artinya, video tidak akan diputar sampai user mengklik tombol
play untuk melihat video tersebut.

L. Erawan, [Link] 59
 Diktat Pemrograman Web / versi 1.0

ELEMEN HEAD HTML

Elemen <head> berfungsi sebagai kontainer bagi elemen-elemen head lainnya.

Didalam elemen <head> dapat berisi berbagai script, style sheet, informasi meta,
dan lainnya.

Tag-tag yang dapat diletakkan didalam bagian head antara lain: <title>, <base>,
<link>, <meta>, <script>, dan <style>.

ELEMEN TITLE
Elemen <title> menentukan judul dokumen HTML. Elemen ini dibutuhkan dalam
dokumen HTML atau XHTML. Elemen title akan:

• Ditampilkan sebagai judul dokumen pada toolbar browser.

• Menyediakan sebuah judul untuk halaman ketika halaman tersebut
ditambahkan ke favorites.
• Menampilkan sebuah judul untuk halaman dalam hasil pencarian mesin
pencari (search engine)

Contoh:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>

ELEMEN BASE
Elemen ini berguna untuk menentukan alamat default atau target default untuk
semua link pada suatu halaman. Contoh:

<head>
<base href="[Link] />
<base target="_blank" />
</head>

L. Erawan, [Link] 60
 Diktat Pemrograman Web / versi 1.0

ELEMEN LINK
Tag <link> mempunyai fungsi untuk menentukan hubungan antara dokumen
dengan eksternal resource. Paling sering digunakan untuk menghubungkan ke file
style sheet.

<head>
<link rel="stylesheet" type="text/css" href="[Link]" />
</head>

ELEMEN STYLE
Tag <style> digunakan untuk menentukan informasi style bagi dokumen HTML.
Dalam elemen style ini berisi instruksi bagaimana elemen-elemen HTML harus
dirender.

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

ELEMEN META
Metada adalah informasi tentang data. Tag <meta> menyediakan metadata
tentang dokumen HTML. Metadata tidak ditampilkan pada browser tetapi menjadi
sumber data bagi browser.

Elemen meta biasanya digunakan untuk menetapkan deskripsi (description)

halaman, keywords, penulis (author) dokumen, last modified dan metadata lainnya.

Metadata dapat digunakan oleh browser untuk mengetahui bagaimana konten

halaman ditampilkan atau reload halaman. Bagi search engine akan
menggunakan data keywords. Metadata juga digunakan oleh web service lainnya.

KEYWORDS UNTUK SEARCH ENGINE

Salah satu kegunaan dari elemen meta adalah untuk dipakai oleh search engine.
Atribut name dan content elemen meta digunakan oleh search engine untuk
mengindeks halaman. Contoh dibawah mendefinisikan sebuah deskripsi bagi
halaman:

<meta name=”description” content=”Free Web Tutorials on HTML, CSS,

XML” />

L. Erawan, [Link] 61
 Diktat Pemrograman Web / versi 1.0

Mendefinisikan keyword halaman:

<meta name=”keywords” content=”HTML, CSS, XML” />

L. Erawan, [Link] 62
 Diktat Pemrograman Web / versi 1.0

<!DOCTYPE> HTML

Ada banyak dokumen yang berbeda-beda di web. Browser akan menampilkan

suatu dokumen dengan benar jika mengetahui tipe dokumen tersebut.

Dokumen HTML juga mempunyai banyak versi, dan browser akan menampilkan
dokumen HTML dengan benar 100% jika mengetahui dengan pasti versi dokumen
HTML yang digunakan. Disini <!DOCTYPE> berperan.

Deklarasi <!DOCTYPE> membantu browser untuk menampilkan suatu halaman web

dengan benar.

<!DOCTYPE> bukan sebuah tag HTML, tetapi suatu informasi (deklarasi) kepada
browser tentang versi yang digunakan oleh sebuah dokumen HTML.

Contoh:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>

VERSI HTML
Ada banyak versi HTML semenjak adanya web:

Versi Tahun
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML 5 2012
XHTML 5 2013

Berikut deklarasi <!DOCTYPE> beberapa versi HTML:

HTML 5

L. Erawan, [Link] 63
 Diktat Pemrograman Web / versi 1.0

<!DOCTYPE html>

HTML 4.01
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
[Link]

XHTML 1.0
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
[Link] dtd>

L. Erawan, [Link] 64
 Diktat Pemrograman Web / versi 1.0

SET KARAKTER HTML

Agar dapat menampilkan halaman HTML dengan benar, browser harus tahu set
karakter yang digunakan oleh halaman HTML tersebut.

Pada awalnya, set karakter yang digunakan di web adalah ASCI yang mendukung
angka 0-9, huruf besar dan kecil A-Z, dan beberapa karakter khusus.

Browser modern saat menggunakan set karakter ISO-8859-1 yang mendukung

beberapa karakter khusus yang bukan bagian dari karakter ASCII, yang
dipergunakan oleh negara-negara tertentu.

Jika suatu halaman web menggunakan set karakter selain ISO-8859-1 maka harus
dispesifikasikan dalam tag <meta>.

SET KARAKTER ISO

ISO adalah International Standards Organization yang mendefinisikan berbagai set
karakter untuk berbagai bahasa.

Berbagai set karakter yang telah digunakan diseluruh dunia ditunjukkan pada tabel
dibawah ini.

L. Erawan, [Link] 65
 Diktat Pemrograman Web / versi 1.0

KONSORSIUM UNICODE
Unicode Consortium mengembangkan Unicode Standard. Tujuan mereka adalah
untuk menggantikan set karakter yang ada dengan standard mereka yaitu Unicode
Transformation Format (UTF).

Standard Unicode telah sukses dan diterapkan pada XML, Java, ECMA Script
(Javascript), LDAP, CORBA 3.0, WML, dan lainnya. Standard ini juga didukung oleh
banyak sistem operasi dan browser modern.

Organisasi Unicode Consortium bekerjasama dengan beberapa pelopor

pengembangan berbagai standard seperti ISO, W3C, dan ECMA.

Unicode dapat diterapkan dengan berbagai set karakter yang berbeda. Encoding
yang paling umum digunakan adalah UTF-8 dan UTF-16.

Character Set Description

UTF-8 Panjang sebuah karakter dalam UTF8 dapat 1
sampai dengan 4 bytes. UTF-8 merepresentasikan
semua karakter dalam standard Unicode. UTF-8
kompatibel dengan ASCII. UTF-8 ini merupakan
encoding yang disarankan untuk digunakan dalam
email dan halaman web

L. Erawan, [Link] 66
 Diktat Pemrograman Web / versi 1.0

UTF-16 UTF 16 bit ini merupakan sebuah karakter encoding

dengan panjang yang bervariasi. Digunakan pada
berbagai sistem operasi utama, seperti Microsoft
Windows 2000/XP/2003/Vista/CE dan Java serta .NET.

256 karakter pertama dari set karakter Unicode berkorespondensi dengan 256
karakter ISO-8859-1.

Seluruh prosesor HTML 4 telah mendukung UTF-8 dan semua prosesor XHTML dan XML
mendukung UTF-8 dan UTF-16.

L. Erawan, [Link] 67
 Diktat Pemrograman Web / versi 1.0

HTML ENTITIES

Beberapa karakter telah digunakan oleh HTML untuk membentuk tag-tagnya.

Karakter-karakter tidak dapat digunakan dalam naskah tulisan web yang dibuat,
misalnya karakter kurang dari (<) atau lebih dari (>).

Untuk menampilkan karakter-karakter ini perlu menggunakan entiti karakter pada

kode sumber HTML. Penulisan entiti karakter seperti ini:

&entity_name;

atau

&#entity_number

Untuk menampilkan sebuah karakter “kurang dari” ditulis: &lt; atau &#60;

Penggunaan nama entiti daripada nomor entiti akan lebih mudah untuk diingat,
akan tetapi browser mungkin tidak mendukung semua nama entiti. Sedangkan
untuk nomor entiti didukung semua oleh browser.

KARAKTER SPASI (NON-BREAKING SPACE)

Karakter entiti yang sering dipergunakan dalam HTML adalah non-breaking space
atau spasi (&nbsp;).

Browser akan selalu memotong spasi lebih dari satu didalam setiap halaman web.
Jika kita menggunakan 10 spasi secara berurutan dalam naskah tulisan HTML,
browser akan menghapus 9 spasi darinya, sebelum menampilkan halaman HTML
tersebut. Oleh karena itu, jika inging menambahkan spasi kedalam naskah tulisan,
kita dapat menggunakan entiti karakter &nbsp;.

Nama entiti bersifat case sensitive. Berikut adalah daftar entiti karakter:

L. Erawan, [Link] 68
 Diktat Pemrograman Web / versi 1.0

L. Erawan, [Link] 69
 Diktat Pemrograman Web / versi 1.0

L. Erawan, [Link] 70
 Diktat Pemrograman Web / versi 1.0

L. Erawan, [Link] 71
 Diktat Pemrograman Web / versi 1.0

L. Erawan, [Link] 72
 Diktat Pemrograman Web / versi 1.0

L. Erawan, [Link] 73
 Diktat Pemrograman Web / versi 1.0

URL (UNIFORM RESOURCE LOCATOR)

HTML

Nama lain dari URL adalah web address. URL dapat berupa susunan kata seperti
“[Link]” atau Internet Protocol (IP) Address seperti [Link]. Sebagian
besar pengguna internet menggunakan nama website daripada nomor IP karena
lebih mudah diingat.

UNIFORM RESOURCE LOCATOR

Ketika mengklik link pada suatu halaman HTML, tag <a> yang berkaitan akan
menunjuk ke sebuah alamat pada web. Artinya, user akan dibawa menuju ke suatu
alamat yang ditunjuk oleh link ketika mengklik suatu link.

URL digunakan untuk menentukan alamat sebuah dokumen atau data lain pada
web. Sintaks URL:

schema://[Link]:port/path/filename

schema : mendefinisikan tipe layanan internet. Biasanya berupa protocol http.

host : mendefinisikan host domain. Default host bagi http adalah www

domain : mendefinisikan nama domain internet, seperti [Link]

:port : mendefinisikan nomor port pada host. Default untuk http ialah 80

path : mendefinisikan suatu path pada server

filename : mendefinisikan nama dokumen atau resource

Tabel dibawah ini berisi daftar schema yang umum digunakan:

Schema Kepanjangan Halaman yang menggunakan

http Hypertext Transfer Protocol halaman web biasa
https Secure http halaman web terlindungi. Pertukaran
informasi di enkripsi
ftp File Transfer Protocol Mendownload dan upload file ke
website. Berguna untuk pemeliharaan
domain
file Sebuah file pada computer user

L. Erawan, [Link] 74
 Diktat Pemrograman Web / versi 1.0

URL ENCODING

URL encoding mengkonversi karakter-karakter ke suatu format yang dapat

ditransmisikan melalui internet.

URL hanya bisa dikirim lewat internet menggunakan set karakter ASCII. Karena
seringkali URL berisi karakter diluar karakter ASCII, maka URL harus dikonversi ke
format ASCII valid.

URL encoding mengganti karakter non ASCII dengan sebuah “%” diikuti 2 digit
heksadesimal. URL tidak dapat berisi spasi. Biasanya oleh URL encoding akan diganti
dengan sebuah spasi dengan sebuah tanda “+”.

URL ENCODING FUNCTIONS

Javascript, PHP, dan ASP memiliki fungsi yang dapat digunakan untuk meng-
encode suatu string.

Pada javascript dapat digunakan fungsi encodeURI(), PHP menggunakan fungsi

rawurlencode(), sedangkan ASP menggunakan fungsi [Link]().

REFERENSI URL ENCODING

ASCII Character URL-encoding

space %20

! %21

" %22

# %23

$ %24

% %25

& %26

' %27

( %28

) %29

L. Erawan, [Link] 75
 Diktat Pemrograman Web / versi 1.0

ASCII Character URL-encoding

* %2A

+ %2

, %2C

- %2D

. %2E

/ %2F

0 %30

1 %31

2 %32

3 %33

4 %34

5 %35

6 %36

7 %37

8 %38

9 %39

: %3A

; %3B

< %3C

= %3D

> %3E

? %3F

@ %40

A %41

B %42

C %43

L. Erawan, [Link] 76
 Diktat Pemrograman Web / versi 1.0

ASCII Character URL-encoding

D %44

E %45

F %46

G %47

H %48

I %49

J %4A

K %4B

L %4C

M %4D

N %4E

O %4F

P %50

Q %51

R %52

S %53

T %54

U %55

V %56

W %57

X %58

Y %59

Z %5A

[ %5B

\ %5C

] %5D

L. Erawan, [Link] 77
 Diktat Pemrograman Web / versi 1.0

ASCII Character URL-encoding

^ %5E

_ %5F

` %60

a %61

b %62

c %63

d %64

e %65

f %66

g %67

h %68

i %69

j %6A

k %6B

l %6C

m %6D

n %6E

o %6F

p %70

q %71

r %72

s %73

t %74

u %75

v %76

w %77

L. Erawan, [Link] 78
 Diktat Pemrograman Web / versi 1.0

ASCII Character URL-encoding

x %78

y %79

z %7A

{ %7B

| %7C

} %7D

~ %7E

%7F

` %80

%81

‚ %82

ƒ %83

„ %84

… %85

† %86

‡ %87

ˆ %88

‰ %89

Š %8A

‹ %8B

OE %8C

%8D

Ž %8E

%8F

%90

‘ %91

L. Erawan, [Link] 79
 Diktat Pemrograman Web / versi 1.0

ASCII Character URL-encoding

’ %92

“ %93

” %94

• %95

– %96

— %97

˜ %98

™ %99

š %9A

› %9B

oe %9C

%9D

ž %9E

Ÿ %9F

%A0

¡ %A1

¢ %A2

£ %A3

¤ %A4

¥ %A5

¦ %A6

§ %A7

¨ %A8

© %A9

ª %AA

« %AB

L. Erawan, [Link] 80
 Diktat Pemrograman Web / versi 1.0

ASCII Character URL-encoding

¬ %AC

%AD

® %AE

¯ %AF

° %B0

± %B1

² %B2

³ %B3

´ %B4

μ %B5

¶ %B6

· %B7

¸ %B8

¹ %B9

º %BA

»% BB

¼ %BC

½ %BD

¾ %BE

¿ %BF

À %C0

Á %C1

 %C2

à %C3

Ä %C4

Å %C5

L. Erawan, [Link] 81
 Diktat Pemrograman Web / versi 1.0

ASCII Character URL-encoding

Æ %C6

Ç %C7

È %C8

É %C9

Ê %CA

Ë %CB

Ì %CC

Í %CD

Î %CE

Ï %CF

Ð %D0

Ñ %D1

Ò %D2

Ó %D3

Ô %D4

Õ %D5

Ö %D6

× %D7

Ø %D8

Ù %D9

Ú %DA

Û %DB

Ü %DC

Ý %DD

Þ %DE

ß %DF

L. Erawan, [Link] 82
 Diktat Pemrograman Web / versi 1.0

ASCII Character URL-encoding

à %E0

á %E1

â %E2

ã %E3

ä %E4

å %E5

æ %E6

ç %E7

è %E8

é %E9

ê %EA

ë %EB

ì %EC

í %ED

î %EE

ï %EF

ð %F0

ñ %F1

ò %F2

ó %F3

ô %F4

õ %F5

ö %F6

÷ %F7

ø %F8

ù %F9

L. Erawan, [Link] 83
 Diktat Pemrograman Web / versi 1.0

ASCII Character URL-encoding

ú %FA

û %FB

ü %FC

ý %FD

þ %FE

ÿ %FF

L. Erawan, [Link] 84