Draft Modul Level 8 ICT Gasal 2022 - Fix Insya Allah

DAFTAR ISI
DAFTAR ISI ............................................................................................................ i

DAFTAR GAMBAR ........................................................................................... viii
BAB 1 ..................................................................................................................... 1
PENGENALAN DASAR HTML ........................................................................... 1
1.1. Apa itu HTML .......................................................................................... 1
1.2. Sejarah HTML .......................................................................................... 1
1.3. Perkembangan HTML .............................................................................. 3
1.4. Persiapan untuk Belajar HTML................................................................ 4
1.4.1. Web Browser ..................................................................................... 4
1.4.2. Text Editor ........................................................................................ 5
1.4.3. Add-On .............................................................................................. 6
BAB 2 ..................................................................................................................... 8
MEMBUAT DOKUMEN HTML .......................................................................... 8
2.1. Membuat Website dalam 1 Menit ............................................................ 8
2.2. Nama file untuk HTML ............................................................................ 9
2.2.1. Extensi file HTML ............................................................................ 9
2.2.2. Nama khusus untuk HomePage ........................................................ 9
2.2.3. Hal-hal yang perlu dihindari ............................................................. 9
2.3. Struktur dasar HTML ............................................................................. 10
2.3.1. Bagian Deklarasi ............................................................................. 10
2.3.2. Bagian HEAD ................................................................................. 12
2.3.3. Bagian BODY ................................................................................. 12
BAB 3 ................................................................................................................... 13
MENGENAL TAG, ELEMEN DAN ATRIBUT ................................................. 13
3.1. Apa itu Tag ............................................................................................. 13
3.2. Cara menulis Tag HTML yang Benar .................................................... 14
3.3. Apa itu Elemen ....................................................................................... 15
i
3.4. Apa itu Atribut........................................................................................ 16
BAB 4 ................................................................................................................... 17
MEMUAT GAMBAR .......................................................................................... 17
4.1. Mengenal Atribut HTML ....................................................................... 17
4.2. Cara penulisan lokasi file ....................................................................... 19
BAB 5 ................................................................................................................... 21
MEMBUAT LINK ................................................................................................ 21
5.1. Link Standar ........................................................................................... 21
5.2. Link Email .............................................................................................. 23
BAB 6 ................................................................................................................... 24
HEADING (PENJUDULAN) ............................................................................... 24
BAB 7 ................................................................................................................... 26
MEMBUAT DAFTAR (LIST) ............................................................................. 26
7.1. Ordered List ............................................................................................ 26
7.2. Unordered List ........................................................................................ 27
7.3. Definition List ........................................................................................ 27
7.4. Nested List/Daftar bersarang .................................................................. 28
BAB 8 ................................................................................................................... 30
MEMBUAT FORM .............................................................................................. 30
8.1. Control-control Form ............................................................................. 30
8.1.1. Label ................................................................................................ 30
8.1.2. Text ................................................................................................. 31
8.1.3. Password ......................................................................................... 31
8.1.4. Text Area......................................................................................... 32
8.1.5. Radio ............................................................................................... 32
8.1.6. Check Box ....................................................................................... 33
8.1.7. Combo Box ..................................................................................... 34
8.1.8. Submit/Button ................................................................................. 34
BAB 9 ................................................................................................................... 36
ii
MEMBUAT TABEL ............................................................................................ 36
BAB 10 ................................................................................................................. 39
MEMAHAMI TAG DIV (DIVISION) ................................................................. 39
10.1. Menggunakan ID atau Class ............................................................... 40
10.1.1. ID ................................................................................................. 40
10.1.2. Class ............................................................................................ 41
10.2. Memahami hubungan Child, Parent dan Siblings .............................. 42
BAB 11 ................................................................................................................. 43
MENGENAL ELEMEN SEMANTIK PADA HTML ......................................... 43
11.1. Apa itu Elemen Semantik ................................................................... 43
11.2. Mengapa harus pakai Elemen Semantik ............................................. 44
11.3. Membuat Layout dengan Elemen Semantik ....................................... 45
11.4. Style untuk Elemen Semantik ............................................................. 46
11.5. Mencoba Elemen Semantik lainnya ................................................... 47
BAB 12 ................................................................................................................. 50
MEMUAT VIDEO DAN AUDIO PADA HTML ................................................ 50
12.1. Menambahkan Video pada HTML ..................................................... 50
12.2. Format Video yang didukung ............................................................. 50
12.3. Atribut untuk Video ............................................................................ 51
12.4. Menambahkan Video dari Youtube .................................................... 52
12.5. Menambahkan Audio pada HTML ..................................................... 52
12.6. Format File Audio yang didukung ...................................................... 53
12.7. Atribut untuk Audio ............................................................................ 54
12.8. Audio sebagai Backsound ................................................................... 54
BAB 13 ................................................................................................................. 55
CASCADING STYLE SHEET (CSS) .................................................................. 55
13.1. Pengenalan CSS .................................................................................. 55
13.1.1. Selector ........................................................................................ 55
13.1.2. Property dan Value ...................................................................... 56
iii
13.2. Penulisan CSS ..................................................................................... 57
13.2.1. Inline ............................................................................................ 57
13.2.2. Internal ......................................................................................... 57
13.2.3. External ....................................................................................... 58
BAB 14 ................................................................................................................. 59
BOX-MODEL ....................................................................................................... 59
14.1. Margin ................................................................................................. 59
14.2. Padding ............................................................................................... 61
14.3. CSS-Shorthand.................................................................................... 62
14.4. Border ................................................................................................. 63
BAB 15 ................................................................................................................. 65
TYPOGRAPHY .................................................................................................... 65
15.1. Apa itu Sans-Serif dan Serif ............................................................... 65
15.1.1. Serif ............................................................................................. 66
15.1.2. Sans-serif ..................................................................................... 66
15.2. Property untuk Font yang sering digunakan ....................................... 67
BAB 16 ................................................................................................................. 68
CSS-IMAGE ......................................................................................................... 68
16.1. background-image .............................................................................. 68
16.2. background-repeat .............................................................................. 69
16.3. background-position ........................................................................... 70
BAB 17 ................................................................................................................. 71
FLOATING ........................................................................................................... 71
17.1. Problem pada Floating ........................................................................ 71
17.2. CSS Reset ........................................................................................... 74
BAB 18 ................................................................................................................. 76
POSITIONING ..................................................................................................... 76
18.1. Static ................................................................................................... 76
18.2. Relative ............................................................................................... 77
iv
18.3. Absolute .............................................................................................. 78
18.4. Fixed ................................................................................................... 81
BAB 19 ................................................................................................................. 83
PSEUDO-CLASS ................................................................................................. 83
19.1. Pseudo-Class untuk Link/Anchor ....................................................... 83
19.2. Pseudo-Class :first-child dan :last-child ............................................. 84
BAB 20 ................................................................................................................. 86
PROJECT HTML DAN CSS ................................................................................ 86
20.1. Langkah-langkah pembuatan project .................................................. 86
20.2. Memberikan style pada halaman html ................................................ 90
20.3. Menambahkan file aset audio, image dan html_doa........................... 91
BAB 21 ................................................................................................................. 93
PENGANTAR JAVASCRIPT .............................................................................. 93
21.1. Pengenalan Javascript ......................................................................... 93
21.2. Fungsi pada Javascript ........................................................................ 95
21.3. Komentar pada Javascript ................................................................... 96
21.4. jQuery ................................................................................................. 97
21.5. jQuery Plugin ...................................................................................... 97
BAB 22 ................................................................................................................. 99
TIPE DATA DAN VARIABEL JAVASCRIPT .................................................. 99
22.1. Deklarasi Variabel .............................................................................. 99
22.2. Tipe Data........................................................................................... 100
BAB 23 ............................................................................................................... 102
OPERATOR PADA JAVASCRIPT ................................................................... 102
23.1. Operator Aritmatika .......................................................................... 102
23.2. Operator Pemberian Nilai ................................................................. 102
23.3. Operator + pada tipe data String ....................................................... 103
23.4. Operator Pembanding ....................................................................... 103
23.5. Operator Logika ................................................................................ 104
v
23.6. Operator Bersyarat ............................................................................ 104
BAB 24 ............................................................................................................... 105
PRAKTIKUM JAVASCRIPT ............................................................................ 105
24.1. Latihan 1. My First Javascript .......................................................... 105
24.2. Latihan 2. Variabel ........................................................................... 105
24.3. Latihan 3. Operator Aritmatika1 ....................................................... 106
24.6. Latihan 6. Mengkonversi Tipe Data ................................................. 107
24.7. Latihan 7. Tipe Data Array ............................................................... 107
24.8. Latihan 8. Statement ......................................................................... 107
BAB 25 ............................................................................................................... 108
FUNGSI DALAM JAVASCRIPT ...................................................................... 108
25.1. Fungsi pada Javascript ...................................................................... 108
BAB 26 ............................................................................................................... 110
PERCABANGAN DALAM JAVASCRIPT ...................................................... 110
26.1. Pernyataan if ..................................................................................... 110
26.2. Pernyataan if ... else ... ...................................................................... 110
26.3. Pernyataan if ... else if ... else ... ....................................................... 111
26.4. Pernyataan Switch............................................................................. 112
BAB 27 ............................................................................................................... 114
PERULANGAN DALAM JAVASCRIPT ......................................................... 114
27.1. Perulangan FOR ................................................................................ 114
27.2. Perulangan While .............................................................................. 115
BAB 28 ............................................................................................................... 118
PEMROSESAN FORM ...................................................................................... 118
28.1. Form .................................................................................................. 118
BAB 29 ............................................................................................................... 121
EVENT HANDLER............................................................................................ 121
vi
29.1. Mouse Events .................................................................................... 121
29.2. Keyboard Events ............................................................................... 121
29.3. HTML Control Events ...................................................................... 122
29.4. Window Events ................................................................................. 122
BAB 30 ............................................................................................................... 123
PROJECT JAVASCRIPT ................................................................................... 123
30.1. Langkah-langkah pembuatan project ................................................ 123
30.2. Menulis kode file index.html ............................................................ 124
30.3. Menulis kode file style.css ................................................................ 127
30.4. Menulis kode file script.js ................................................................. 130
REFERENSI ....................................................................................................... 134
vii
DAFTAR GAMBAR
Gambar 1. 1 Analogi HTML, CSS dan JS .............................................................. 1

Gambar 1. 2 Tim Berners-Lee ................................................................................ 2
Gambar 1. 3 Tim Berners-Lee (kiri) dan Robert Cailliau (kanan) .......................... 2
Gambar 1. 4 Web Browser ...................................................................................... 4
Gambar 1. 5 Text Editor (Notepad++, Sublime Text dan Gedit) ........................... 6
Gambar 2. 1 Save file HTML ................................................................................. 8

Gambar 2. 2 Tampilan file HTML di Web Browser ............................................... 8
Gambar 2. 3 Tampilan URL menggunakan spasi ................................................... 9
Gambar 2. 4 Struktur dasar HTML ....................................................................... 10
Gambar 2. 5 Validator file HTML ........................................................................ 11
Gambar 3. 1 Penulisan tag pembuka dan tag penutup .......................................... 13

Gambar 3. 2 Penulisan tag bertumpuk .................................................................. 15
Gambar 3. 3 Elemen HTML ................................................................................. 15
Gambar 3. 4 Penulisan atribut ............................................................................... 16
Gambar 4. 1 Lokasi gambar dan file HTML......................................................... 18

Gambar 4. 2 Kode HTML memuat gambar .......................................................... 18
Gambar 4. 3 Hasil memuat gambar pada browser ................................................ 18
Gambar 4. 4 Menyimpan gambar pada folder gambar ......................................... 19
Gambar 4. 5 Dokumen HTML dan gambar dalam folder berbeda ....................... 20
Gambar 5. 1 Penempatan file pada folder yang sama ........................................... 21

Gambar 5. 2 Kode membuat link file latihan3_kelas.html ................................... 22
Gambar 5. 3 Tampilan file latihan3_kelas.html .................................................... 22
Gambar 5. 4 Atribut target _blank pada tag <a>................................................... 23
viii
Gambar 6. 1 Kode membuat Heading ................................................................... 24
Gambar 6. 2 Penjudulan pada dokumen HTML ................................................... 25
Gambar 7. 1 Hasil Ordered List ............................................................................ 26

Gambar 7. 2 Hasil Unordered List ........................................................................ 27
Gambar 7. 3 Kode Definition List......................................................................... 28
Gambar 7. 4 Hasil Definition List di web browser ............................................... 28
Gambar 7. 5 Kode Nested List .............................................................................. 29
Gambar 7. 6 Hasil Nested List di web browser .................................................... 29
Gambar 8. 1 Contoh Label pada form ................................................................... 30

Gambar 8. 2 Text Input ......................................................................................... 31
Gambar 8. 3 Text Input dengan Value .................................................................. 31
Gambar 8. 4 Password Input ................................................................................. 32
Gambar 8. 5 Text Area .......................................................................................... 32
Gambar 8. 6 Radio Input ....................................................................................... 33
Gambar 8. 7 Check Box Input............................................................................... 33
Gambar 8. 8 Combo Box ...................................................................................... 34
Gambar 8. 9 Button ............................................................................................... 34
Gambar 8. 10 Kode latihan6 ................................................................................. 35
Gambar 8. 11 Tampilan hasil latihan6 di browser ................................................ 35
Gambar 9. 1 Kode menyatukan kolom dan baris dalam Tabel ............................. 37

Gambar 9. 2 Hasil tampilan menyatukan kolom dan baris dalam Tabel .............. 37
Gambar 9. 3 Struktur tabel yang dianjurkan ......................................................... 38
Gambar 10. 1 Kode penggunaan tag Div .............................................................. 40
Gambar 11. 1 Kode elemen semantik dengan Div ................................................ 44
ix
Gambar 11. 2 Kode elemen semantik tanpa Div................................................... 45
Gambar 11. 3 Membuat layout dengan elemen semantik ..................................... 46
Gambar 11. 4 Tampilan Membuat layout ............................................................. 46
Gambar 11. 5 Tampilan Membuat layout dengan style ........................................ 47
Gambar 11. 6 Struktur elemen semantik <details> dan <summary> .................... 48
Gambar 11. 7 Kode elemen semantik <details> dan <summary> ........................ 48
Gambar 11. 8 Hasil elemen <details> sebelum di klik ......................................... 48
Gambar 11. 9 Hasil elemen <details> sesudah di klik .......................................... 48
Gambar 12. 1 Struktur kode tag <video> .............................................................. 50

Gambar 12. 2 Struktur kode tag <audio> .............................................................. 53
Gambar 13. 1 Penulisan kode CSS ....................................................................... 55
Gambar 14. 1 Kode CSS Margin pada .box .......................................................... 60

Gambar 14. 2 Tampilan CSS Margin.................................................................... 60
Gambar 14. 3 Penambahan padding pada .box ..................................................... 61
Gambar 14. 4 Tampilan penambahan padding pada .box ..................................... 62
Gambar 14. 5 Tampilan penambahan border pada .box ....................................... 64
Gambar 14. 6 Skema box-model ........................................................................... 64
Gambar 15. 1 Font jenis Serif memiliki kait disetiap ujungnya ........................... 66
Gambar 15. 2 Font jenis Sans-Serif ...................................................................... 66
Gambar 16. 1 Kode Background ........................................................................... 68

Gambar 16. 2 Background ditampilkan berulang ................................................. 69
Gambar 16. 3 Background repeat-x (horizontal) .................................................. 69
Gambar 16. 4 Background repeat-y (vertical)....................................................... 69
Gambar 16. 5 Background tidak diulang .............................................................. 70
Gambar 16. 6 Background bergeser 500px dari kiri ............................................. 70
x
Gambar 16. 7 Background bergeser 500px ke bawah........................................... 70
Gambar 17. 1 Kode file floating1.html ................................................................. 71

Gambar 17. 2 Hasil file floating1.html ................................................................. 71
Gambar 17. 3 Kode file floating2.html ................................................................. 72
Gambar 17. 4 Kode file style.css .......................................................................... 72
Gambar 17. 5 Tampilan file floating2.html pada web browser ............................ 73
Gambar 17. 6 Penambahan style overflow:hidden ............................................... 73
Gambar 17. 7 Penambahan style clear:both .......................................................... 73
Gambar 17. 8 Hasil akhir masalah float ................................................................ 74
Gambar 18. 1 Box static tidak dapat ditentukan posisinya ................................... 77

Gambar 18. 2 Penambahan position:relative ........................................................ 77
Gambar 18. 3 Child elemen berada didalam parentnya ........................................ 78
Gambar 18. 4 #box2 terlepas dari parent saat ditambahkan position absolute ..... 79
Gambar 18. 5 Position absolute dapat dibatasi oleh elemen position relative ...... 80
Gambar 18. 6 Pengaturan posisi dengan position absolute ................................... 80
Gambar 18. 7 Contoh penggunaan Position Absolute .......................................... 81
Gambar 18. 8 Contoh penggunaan Position Fixed ............................................... 82
Gambar 18. 9 Contoh lawas penggunaan fixed position....................................... 82
Gambar 19. 1 Pseudo-Class :hover ....................................................................... 83

Gambar 19. 2 Pseudo-Class :first-child dan :last-child......................................... 85
Gambar 20. 1 Halaman index.html project HTML dan CSS ................................ 86

Gambar 20. 2 Kode HTML file index.html .......................................................... 87
Gambar 20. 3 Kode HTML file header.html......................................................... 87
Gambar 20. 4 Kode HTML file menu.html baris 1-25 ......................................... 87
Gambar 20. 5 Kode HTML file menu.html baris 26-100 ..................................... 88
Gambar 20. 6 Kode HTML file menu.html baris 101-128 ................................... 89
xi
Gambar 20. 7 Kode HTML file footer.html .......................................................... 89
Gambar 20. 8 Kode HTML file home.html .......................................................... 89
Gambar 20. 9 Menambahkan folder css ................................................................ 90
Gambar 20. 10 Kode CSS file header.css ............................................................. 90
Gambar 20. 11 Kode CSS file menu.css ............................................................... 91
Gambar 20. 12 Kode CSS file footer.css .............................................................. 91
Gambar 20. 13 Download aset project doa ........................................................... 92
Gambar 20. 14 Posisi folder aset audio, img dan html_doa.................................. 92
Gambar 21. 1 Kotak pesan dengan javascript ....................................................... 94

Gambar 21. 2 Contoh lain dengan javascript ........................................................ 94
Gambar 21. 3 Contoh penggunaan if-else (kondisi) ............................................. 95
Gambar 21. 4 Contoh fungsi dalam tag <head> ................................................... 95
Gambar 21. 5 Contoh fungsi dalam tag <body> ................................................... 96
Gambar 21. 6 jQuery4u telah merangkum sebagian plugin jQuery dari A-Z ....... 98
Gambar 23. 1 Coding operator bersyarat ............................................................ 104
Gambar 24. 1 Coding Latihan 1. My First Javascript ......................................... 105

Gambar 24. 2 Coding Latihan 2. Variabel .......................................................... 105
Gambar 24. 3 Coding Latihan 3. Operator Aritmatika1 ..................................... 106
Gambar 24. 6 Coding Latihan 6. KonversiTipeData .......................................... 107
Gambar 24. 7 Coding Latihan 7. TipeDataArray ................................................ 107
Gambar 24. 8 Coding Latihan 8. Statement ........................................................ 107
Gambar 25. 1 Contoh coding fungsi dalam Javascript ....................................... 108

Gambar 25. 2 Contoh coding fungsi dalam Javascript tanpa return ................... 109
xii
Gambar 26. 1 Coding percabangan if ................................................................. 110
Gambar 26. 2 Coding percabangan if ... else ... .................................................. 111
Gambar 26. 3 Coding percabangan if ... else if ... else ....................................... 112
Gambar 26. 4 Coding percabangan switch ......................................................... 113
Gambar 26. 5 Coding percabangan switch hari .................................................. 113
Gambar 27. 1 Coding perulangan for increment ................................................. 114

Gambar 27. 2 Coding perulangan for decrement ................................................ 115
Gambar 27. 3 Coding perulangan for lainnya ..................................................... 115
Gambar 27. 4 Coding perulangan while ............................................................. 117
Gambar 28. 1 Contoh coding membaca nilai input dari form............................. 119
Gambar 28. 2 Hasil coding membaca input ........................................................ 119
Gambar 28. 3 Hasil coding input form tampil alert ............................................ 119
Gambar 28. 4 Coding kalkulator sederhana ........................................................ 120
Gambar 28. 5 Hasil coding kalkulator sederhana ............................................... 120
Gambar 29. 1 Coding contoh event handler........................................................ 122
Gambar 30. 1 Halaman index.html project Javascript ........................................ 123

Gambar 30. 2 Download aset project tata surya ................................................. 123
Gambar 30. 3 Folder aset audio, gif dan img ...................................................... 124
Gambar 30. 4 Posisi file index.html, style.css dan script.js ................................ 124
Gambar 30. 5 Kode HTML file index.html baris 1-21 ....................................... 124
Gambar 30. 6 Kode HTML file index.html baris 22-92 ..................................... 125
Gambar 30. 7 Kode HTML file index.html baris 93-143 ................................... 126
Gambar 30. 8 Kode HTML file index.html baris 144-191 ................................. 127
Gambar 30. 9 Kode HTML file style.css baris 1-66 ........................................... 128
Gambar 30. 10 Kode HTML file style.css baris 67-130 ..................................... 129
Gambar 30. 11 Kode HTML file script.js baris 1-82 .......................................... 130
xiii
Gambar 30. 12 Kode HTML file script.js baris 83-173 ...................................... 131
Gambar 30. 13 Kode HTML file script.js baris 174-267 .................................... 132
Gambar 30. 14 Kode HTML file script.js baris 268-316 .................................... 133
xiv
BAB 1
PENGENALAN DASAR HTML
1.1. Apa itu HTML

Menurut wikipedia “HTML atau HyperText Markup Language
merupakan sebuah bahasa markah untuk membuat halaman web”. Jadi,
HTML adalah sebuah bahasa yang menggunakan markup atau penanda
untuk membuat halaman web. Penanda atau markup ini disebut sebagai
Tag.
HTML berperan untuk menentukan struktur konten dan tampilan dari
sebuah web. Misal kita analogikan, HTML itu seperti batu bata untuk
membangun rumah, batu bata ini dapat disusun hingga menjadi pondasi
dasar. Dalam membuat halaman web, HTML tidak sendirian, ada bahasa
lain yang menjadi pelengkapnya, yakni CSS dan Javascript.
Gambar 1. 1 Analogi HTML, CSS dan JS

CSS adalah bahasa khusus yang digunakan untuk mempercantik
tampilan web. Sedangkan Javascript bertugas untuk membuat halaman web
menjadi hidup, karena dengan Javascript kita dapat menentukan fungsi-
fungsi maupun efek yang akan diterapkan pada halaman web. Pembahasan
CSS dan Javascript akan kita bahas lebih dalam pada bab berikutnya.
1.2. Sejarah HTML

Kemunculan HTML dimulai dari tahun 1980. Pada saat itu seorang
ilmuwan bernama Tim Berners-Lee sedang bekerja di CERN. CERN sendiri
bukanlah perusahaan yang berkaitan dengan teknologi maupun internet.
1
CERN adalah singkatan dari bahasa prancis : Conseil Europeen pour la
Recherche Nucleaire yang artinya : Komisi Eropa untuk Penelitian Fisika
Nuklir.
Gambar 1. 2 Tim Berners-Lee

Para peneliti di CERN membutuhkan sebuah cara atau sistem agar
bisa saling berbagi dokumen hasil penelitian. Tim Berners-Lee kemudian
mencoba membuat ENQUIRE (software hypertext) yang akan digunakan
untuk berbagi dokumen. Kemudian pada tahun 1989, Tim Berners-Lee
memperkenalkan ide tentang hypertext berbasis internet. Ini nantinya akan
menjadi cikal-bakal HTML. Tim Berners-Lee kemudian memulai proyek
baru dengan rekannya bernama Robert Cailliau yang merupakan system
engineer di CERN, akan tetapi proyek ini tidak resmi diadopsi oleh CERN.
Gambar 1. 3 Tim Berners-Lee (kiri) dan Robert Cailliau (kanan)

2
Pada akhir tahun 1991, Tim Berners-Lee menerbitkan dokumen yang
berjudul : “HTML Tags”. Dokumen tersebut berisi penjelasan tentang 18
tags awal yang menjadi konsep dasar HTML yang dirancang berdasarkan
pada konsep bahasa markup yang dikenal dengan SGML (Standard
Generalized Markup Language).
SGML adalah sebuah standar internasional untuk membuat dokumen
dengan tanda (markup) seperti paragraf, list, heading, dan lainnya. HTML
adalah implementasi dari SGML seperti tag <title>, <p>, <li> dan <h1>
sampai <h6> berasal dari SGML. Namun, tidak semua yang ada di HTML
berasal dari SGML salah satunya adalah Hyperlink yang murni hasil
pemikiran Tim Berners-Lee. Ide tentang HTML ini kemudian disebarkan ke
dalam sebuah mailing list dan segera menjadi perhatian berbagai ilmuwan
komputer di seluruh dunia.
1.3. Perkembangan HTML

HTML memiliki beberapa versi, dari versi yang paling tua hingga
versi yang terbaru. Berikut ini perkembangan versi HTML :
• [Draft] HTML 1.0 (Juni 1993) adalah versi HTML pertama,
namun tidak resmi dirilis.
• HTML 2.0 (24 November 1995) adalah versi HTML kedua yang
resmi pertama kali beredar di pasaran dan dirilis oleh IETF.
• [Draft] HTML 3.0 (28 Maret 1996) versi ini gagal beredar, karena
banyak perubahan yang memicu perdebatan.
• HTML 3.2 (14 Januari 1997) versi resmi yang dirilis W3C pertama
kali.
• HTML 4.0 (24 April 1998) versi pengembangan dari yang
sebelumnya.
• HMTL 4.01 (24 Desember 1999) versi perbaikan dari HTML 4.0.
• XHTML 1.0 (26 Januari 2000) pengembangan dari HTML 4.01
dengan mengadopsi XML.
• XHTML 2.0 (Agustus 2002 – Juli 2006) versi kedua dari XHTML.
• HTML 5 (28 Oktober 2014) versi HTML sekarang.
3
Versi [Draft] adalah versi yang tidak resmi dirilis ke pasaran.
Bentuknya cuma masih dalam draft speksifikasi saja, tidak ada yang
menggunakan versi tersebut untuk membuat web.
1.4. Persiapan untuk Belajar HTML

Sebelum kita mempelajari HTML dan CSS, ada beberapa persiapan
yang perlu dilakukan. Seperti installasi aplikasi yang dibutuhkan dan
aplikasi pendukung dalam mempelajari HTML dan CSS.
1.4.1. Web Browser

Web browser adalah perangkat utama yang akan digunakan
untuk menampilkan halaman web yang pada dasarnya terbuat dari
HTML dan CSS. Mr. yakin di setiap komputer telah terinstall Web
Browser bawaan seperti Internet Explorer (Windows), Safari (Mac)
dan Firefox (Linux Ubuntu).
Setiap browser memiliki perbedaan dalam hal menampilkan
halaman web dan fitur-fitur yang didukung dalam HTML dan CSS.
Boleh jadi halaman web yang dibuat ditampilkan benar pada salah
satu browser namun acak-acakan pada browser lainnya. Untuk itu
perlu beberapa browser yang terinstall dalam komputer untuk
menguji penampilkan halaman web yang dibuat.
Isu-isu kompatibilitas ini akan kita temui ketika mempelajari
CSS nantinya yang berhubungan dalam penampilan halaman web.
Berikut ini adalah beberapa browser yang dapat kita download dari
Internet :
Gambar 1. 4 Web Browser
4
Kita bebas mau menggunakan web browser apapun, saran Mr.
gunakan web browser versi yang paling baru. Firefox atau Google
Chrome sudah cukup.
1. Firefox
Web browser ini bisa dikatakan web browser yang paling
digemari oleh para developer web karena kekayaannya dalam hal
Add-on/Plugin (Aplikasi tambahan yang dapat dipasang sehingga
memperkaya fitur Firefox). Kita dapat mendownload Firefox pada
halaman http://firefox.com.
2. Google Chrome
Google Chrome adalah web browser besutan Google yang
memiliki beberapa keunggulan. Chrome bisa dikatakan browser
yang sangat ringan, cepat (kecepatan loading web tergantung pada
kecepatan internet yang digunakan) dan kaya akan aplikasi/Add-on.
Selain itu Chrome menggunakan engine Webkit (engine/mesin
adalah kode utama dalam aplikasi untuk menampilkan halaman
web), engine webkit browser yang rata-rata mendukung fitur-fitur
terbaru dari teknologi HTML dan CSS. Kita dapat mendownload
Google Chrome pada halaman http://google.com/chrome.
3. Safari
Safari adalah web browser dari Apple. Sama halnya dengan
Chrome, safari menggunakan engine webkit sehingga mendukung
fitur-fitur terbaru HTML dan CSS. Kita dapat mendownload Safari
pada halaman http://www.apple.com/safari. Browser ini hanya
tersedia untuk Mac dan Windows saja.
1.4.2. Text Editor

Untuk membuat halaman web, kita perlu sebuah text editor.
Text editor yang akan kita gunakan adalah text editor ringan namun
penuh dengan fitur yang sangat membantu dalam proses
Coding(penulisan kode) HTML dan CSS.
5
Gambar 1. 5 Text Editor (Notepad++, Sublime Text dan Gedit)
1. Notepad++
Tersedia untuk Windows, memiliki beragam fitur yang sangat
mendukung para programmer. Kemampuannya untuk memperkaya
diri dengan plugin menjadi kelebihan lainnya dengan text editor
yang lainnya. Kita dapat mendownload Notepad++ pada halaman
http://notepad-plus-plus.org/downloads.
2. Sublime Text
Text editor yang terbilang masih baru yang sangat mudah
digunakan, tampilannya simple namun enak dipandang. Sublime text
adalah aplikasi berbayar, tetapi kita dapat mendownload versi demo-
nya (atau versi unregister). Sublime text tersedia untuk sistem
operasi Windows, Linux dan Mac. Kita dapat mendownload Sublime
Text pada halaman http://www.sublimetext.com.
3. Gedit
Untuk pengguna Linux, khususnya dengan desktop Gnome
sudah memiliki text editor bawaan, yakni Gedit. Gedit bisa
digunakan untuk menuliskan berbagai macam bahasa pemrograman.
Untuk Gedit versi Windows, kita dapat mendownload Gedit pada
halaman http://projects.gnome.org.
1.4.3. Add-On
Add-On adalah aplikasi tambahan untuk memeriksa kode
HTML dan CSS dari setiap halaman web.
1. Firebug
Firebug dapat digunakan untuk memeriksa kode HTML dari
setiap halaman web, melihat CSS yang digunakan dan untuk
menguji script javascript. Kita dapat menginstallnya pada browser
6
Firefox, untuk menginstallnya cukup masuk ke halaman Add-on dan
cari add-on firebug.
Jika kita menggunakan browser Google Chrome atau Safari,
tidak perlu menginstall firebug karena kedua browser tersebut
menggunakan engine webkit yang sudah memiliki tool serupa
dengan firebug yang disebut sebagai Developer Tool.
2. Web Developer Tools
Add-on ini digunakan untuk menguji halaman web dan
melakukan beberapa perubahan/perbaikan sementara terhadap
halaman web. Kita dapat menginstallnya dari add-on firefox atau
dari Chrome Web Store.
Itulah aplikasi-aplikasi yang diperlukan untuk mempelajari HTML

dan CSS, tetapi yang terpenting adalah kehadiran Web Browser dan Text
Editor, sisanya adalah optional yang fungsinya hanya sebagai pendukung
aktifitas kita dalam membangun halaman web. Seperti Firebug dan
Developer Tools memang tidak penting namun dapat membantu kita untuk
melakukan pengujian dan memperbaiki kesalahan yang ditimbulkan baik
dalam penulisan kode dan lainnya.
Untuk pembelajaran pada modul ini, kita sepakati menggunakan Web
Browser Google Chrome dan Text Editor Notepad++.
7
BAB 2
MEMBUAT DOKUMEN HTML
2.1. Membuat Website dalam 1 Menit

Sudah siap membuat website ? Kita mulai membuat website hanya
dalam 1 menit !
1. Buka aplikasi Notepad++.
2. Ketikkan teks dibawah ini :
Website pertama saya di kelas ICT
3. Pilih menu File → Save As.
4. Beri nama “latihan1_kelas.html” pada File name (tanpa tanda petik).
5. Pada bagian Save as type, pilih Hyper Text Markup Language file.
Gambar 2. 1 Save file HTML

6. Setelah disimpan, klik dua kali file HTML yang telah dibuat (atau
drag and drop ke web browser).
Gambar 2. 2 Tampilan file HTML di Web Browser

Demonstrasi diatas cukup mudah bukan ? sebagai langkah untuk
membuat file HTML. Akan tetapi cara diatas masih salah karena kita belum
menuliskan Tag HTML secara lengkap dan benar. Sub bab berikutnya akan
kita bahas cara penulisan Tag HTML yang lengkap dan benar.
8
2.2. Nama file untuk HTML
Ada beberapa hal yang perlu diperhatikan dalam membuat nama file
HTML :
2.2.1. Extensi file HTML

Setiap file HTML harus berekstensi .html, .xhtml (untuk
XHTML) dan .htm saja. Jika tidak menggunakan ekstensi tersebut,
maka tidak akan bisa terbaca oleh web browser.
2.2.2. Nama khusus untuk HomePage

Jika kita ingin membuat halaman untuk homepage, maka
sebaiknya menggunakan nama index.html karena itu akan
otomatis dibuka saat website dikunjungi.
2.2.3. Hal-hal yang perlu dihindari

1. Menggunakan Spasi
Nama file HTML biasanya akan tercantum pada URL
(Uniform Resource Locator), maka sebaiknya hindari
menggunakan spasi pada nama file HTML, agar URL yang
dibentuk lebih bagus. Spasi pada URL biasanya akan otomatis
dirubah menjadi %20.
Gambar 2. 3 Tampilan URL menggunakan spasi

Sebagai pengganti spasi, kita bisa menggunakan tanda min
( - ) atau underscore ( _ ).
9
2. Menggunakan karakter Alay
Berikan nama file HTML dengan yang sewajarnya,
hindari menggunakan campuran huruf besar dan huruf kecil,
juga hindari menggunakan simbol. Contoh :
• HeLLoWORLD.html
• da*#$.html
Meskipun nama ini bisa valid, tetapi kurang bagus untuk
dibaca baik oleh manusia maupun mesin komputer.
2.3. Struktur dasar HTML

Berikut ini adalah kode dasar HTML yang benar :
Gambar 2. 4 Struktur dasar HTML

Penulisan kode HTML selalu dimulai dengan deklarasi DOCTYPE,
lalu menuliskan tag <html> dan didalamnya terdapat tag <head> dan
tag <body>.
Apabila diperhatikan, struktur dasar kode HTML terdiri dari tiga
bagian utama :
2.3.1. Bagian Deklarasi

Coba perhatikan kode pada baris pertama : <!DOCTYPE
html>.
10
Ini adalah tag deklarasi untuk menyatakan tipe dokumen dan
versinya. Pada contoh diatas, kita menyatakan dokumen ini bertipe
HTML dan versinya adalah HTML 5.
Untuk HTML versi 4 berbeda lagi cara deklarasinya. Contoh
untuk HTML 4.01 :
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01
Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
Cukup panjang bukan ? Lalu apakah boleh kita tidak menuliskan
kode <!DOCTYPE html>. Jawabannya boleh-boleh saja,
dokumen HTML akan tetap bisa dibuka di web browser. Akan tetapi
ini tentunya akan melanggar aturan standar yang dibuat W3C.
Untuk mengecek apakah dokumen HTML kita sudah benar atau
tidak, dapat mengakses halaman web https://validator.w3.org/.
Gambar 2. 5 Validator file HTML

Berikutnya, dibawah tag deklarasi <!DOCTYPE html>
terdapat tag pembuka untuk HTML : <html lang=”en”>.
Tag <html> wajib ada disetiap dokumen HTML. Pada tag ini,
kita menambahkan atribut lang=”en” untuk menyatakan bahwa
konten dokumen HTML ini menggunakan bahasa inggris. Dalam tag
<html>, terdapat dua tag penting, yakni tag <head> dan tag
<body>. Setelah itu barulah terakhir tag HTML ditutup dengan
</html>.
11
2.3.2. Bagian HEAD
Bagian HEAD adalah bagian kepala dari HTML. Dimulai dari
tag <head> dan ditutup dengan </head>.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Belajar HTML</title>
</head>
<body>
<p>Hello Level 8</p>
</body>
</html>
Pada bagian HEAD, biasanya digunakan untuk menuliskan tag-

tag yang akan dibaca oleh mesin. Seperti :
• Tag meta untuk SEO (Search Engine Optimization).
• Tag <title> untuk judul.
• Tempat menulis kode CSS dan Javascript.
• dan lain-lain.
2.3.3. Bagian BODY

Bagian BODY adalah bagian yang akan ditampilkan pada web
browser. Penulisannya dimulai dari tag <body> sampai penutup
</body>.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Belajar HTML</title>
</head>
<body>
<p>Hello Level 8</p>
</body>
</html>
Disinilah nanti kita akan banyak menuliskan konten dengan

berbagai macam tag.
12
BAB 3
MENGENAL TAG, ELEMEN DAN ATRIBUT
3.1. Apa itu Tag

Tag adalah sebuah penanda awal dan penanda akhir dari sebuah
elemen di HTML. Tag dibuat dengan kurung siku <.....>, kemudian
didalamnya berisi nama tag dan terkadang juga ditambahkan dengan atribut.
Contoh : <p>, <a>, <body>, <i>, <b>, <u>, dan lainnya.
Tag selalu ditulis berpasangan. Ada tag pembuka dan ada tag
penutupnya. Akan tetapi, ada juga beberapa tag yang tidak memiliki
pasangan penutup (sekitar 15 tag). Tag penutup ditulis dengan
menambahkan garis miring ( / ) didepan nama tag.
Isi atau Konten
tag pembuka tag penutup
atribut tag nilai atribut
Gambar 3. 1 Penulisan tag pembuka dan tag penutup

Setiap tag memiliki fungsi masing-masing. Ada yang digunakan untuk
membuat judul, membuat link, membuat paragraf, heading, dan lainnya.
Masih ingat dengan sejarah HTML yang sudah kita bahas pada BAB I ?
Dahulu awalnya HTML hanya mempunyai 18 tag, sekarang HTML
sudah mempunyai sekitar 250 tag. Wow banyak ya. Apakah semua tag
wajib kita hafalkan ? jawabannya tidak harus, cukup mengetahui tag-tag
dasar dan cara penulisannya saja.
Berikut ini tag-tag dasar dan wajib untuk diingat :
13
Tag Fungsi
<html> Untuk memulai dokumen HTML
<head> Untuk membuat bagian head
<body> Untuk membuat bagian body
<h1> sampai <h6> Untuk membuat heading
<p> Untuk membuat paragraf
 Untuk membuat komentar
3.2. Cara menulis Tag HTML yang Benar

Beberapa orang kadang sering salah dalam menuliskan tag, apalagi
yang sedang dalam masa pembelajaran. Ada yang lupa menutup tag, salah
ketik nama tag dan lainnya. Berikut ini beberapa tips dan trik yang perlu
diikuti agar bisa menulis tag dengan benar :
1. Tag-tag wajib
Ada beberapa tag yang wajib ada di HTML. Tag ini harus ditulis,
kalau tidak, bisa jadi kode HTML kita akan error menurut validator
W3C. Berikut ini daftar tag yang wajib ada di dokumen HTML :
• <DOCTYPE html> → untuk deklarasi type dokumen.
• <html> → tag utama dalam HTML.
• <head> → untuk bagian kepala dari dokumen.
• <title> → untuk judul web.
• <body> → untuk bagian body dari dokumen.
2. Menggunakan huruf kecil
Ketika menuliskan nama tag hindari menggunakan huruf besar
dan sebaiknya menggunakan huruf kecil. Huruf kecil lebih mudah
diketik dan akan membuat kode HTML terlihat lebih bersih dan rapi.
Contoh : (bagus)
<body>
<p>Belajar tentang tag HTML</p>
</body>
Contoh : (buruk)
<BODY>
<P>Belajar tentang tag HTML</P>
</BODY>
14
3. Memastikan penutup Tag dengan Benar
Tag HTML nantinya akan ditulis bertumpuk, Artinya, di dalam
tag ada tag lagi. Kadang kita sering salah dalam menuliskan tag
penutup yang bertumpuk. Akibatnya, kode HTML kita tidak jalan dan
tidak valid. Tetapi tenang Mr. punya resep agar kita mudah untuk
mengingatnya.
Gambar 3. 2 Penulisan tag bertumpuk

Tag yang dibuat pertama, harus ditutup paling akhir. Jika kita
lihat secara detail urutannya adalah ibu memasak ubi (benar) bukan
ibu memasak ibu (salah).
3.3. Apa itu Elemen

Elemen dalam HTML adalah sebuah komponen yang menyusun
dokumen HTML. Elemen dibentuk dari tag pembuka, isi tag dan tag
penutup. Terkadang ditambahkan beberapa atribut. Contoh :
Elemen
Atribut
nama
nilai atribut
atribut
Tag
Tag Isi tag
penutup
pembuka
Gambar 3. 3 Elemen HTML
15
Pada contoh diatas terdapat satu elemen <p> dengan atribut
align=”center” dan memiliki isi teks yaitu Hello Mr. Dimas.
3.4. Apa itu Atribut

Atribut adalah kata (keyword) khusus yang berada didalam tag
pembuka. Atribut juga disebut sebagai modifier yang akan menentukan
perilaku dari elemen.
Atribut
nama atribut
nilai atribut
Gambar 3. 4 Penulisan atribut

Atribut dapat ditambahkan pada elemen manapun. Ada juga elemen
yang mewajibkan menggunakan atribut seperti elemen <a>, <img>,
<audio>, dll. Contoh :
<a href=”https://smpi.alabidin.sch.id/”>SMPI Al Abidin</a>
Tag <a> adalah tag untuk membuat link. Tag ini mewajibkan
menambahkan atribut href untuk menyatakan halaman tujuan dari link.
16
BAB 4
MEMUAT GAMBAR
Setelah kita mengetahui struktur dari sebuah HTML dan apa saja yang
harus ditulis pertama kali. Selanjutnya kita akan belajar cara
memuat/menampilkan sebuah gambar dan memahami apa itu atribut HTML.
Untuk memuat sebuah gambar pada dokumen HTML, kita akan
menggunakan tag <img>. Kemudian dimana kita meletakkan gambar tersebut di
dalam tag <img> ?
4.1. Mengenal Atribut HTML

Setiap tag HTML dapat memiliki satu atau lebih atribut. Atribut ini
berfungsi untuk menyimpan informasi yang berkaitan dengan tag tersebut.
Pada tag <img> kita akan menggunakan atribut src untuk
menyimpan lokasi gambar :
<img src>.
Selanjutnya untuk memasukkan nilai pada atribut, kita gunakan
operator sama dengan ( = ) diikuti dengan path lokasi gambar yang diapit
oleh tanda kutip :
<img src=”gambar.jpg”>.
Tag img termasuk ke dalam tag spesial dan tidak memiliki tag
penutup (disebut sebagai Self Closed Tag), tidak seperti tag lainnya. Karena
tag img tidak memiliki konten seperti :
<title>Ini adalah konten tag</title>.
Sebagai pengganti, kita tambahkan tanda slash ( / ) sebelum kurung
penutupnya :
<img src=”gambar.jpg” />.
Sekarang saatnya kita akan mencoba memuat gambar pada dokumen
HTML.
1. Buatlah file HTML baru dengan nama “latihan2_kelas.html”.
2. Carilah sebuah gambar dan simpan jadi satu folder dengan file HTML.
17
Gambar 4. 1 Lokasi gambar dan file HTML
3. Ketikkan kode HTML berikut :
Gambar 4. 2 Kode HTML memuat gambar

4. Buka file HTML lewat browser, kita akan melihat gambar telah termuat
atau tampil pada halaman web.
Gambar 4. 3 Hasil memuat gambar pada browser
18
Setiap tag img, selain memiliki atribut src untuk menyimpan lokasi
gambar, kita juga harus menyertakan atribut alt yang akan digunakan
sebagai teks alternatif ketika gambar tidak berhasil dimuat atau gambar
hilang.
<img src=”logo_smpi.png” alt=”Ini adalah teks
alternatif” />.
Dan atribut lainnya adalah width dan height yang berfungsi untuk
menentukan lebar dan tinggi dari gambar tersebut. Ketika gambar tidak
diatur lebar dan tingginya, maka akan ditampilkan sesuai ukuran
sebenarnya.
<img src=”logo_smpi.png” alt=”Ini adalah teks
alternatif” width=527 height=456 />.
Kita tidak perlu memberikan tanda kutip pada nilai lebar dan tinggi.
4.2. Cara penulisan lokasi file

Jika kita menyimpan gambar tersebut pada sebuah folder seperti
berikut ini :
Gambar 4. 4 Menyimpan gambar pada folder gambar

Maka untuk penulisan adalah menambahkan nama folder tersebut
diikuti dengan tanda slash ( / ) dan nama file gambar yang dimuat :
<img src=”gambar/logo_smpi.png” alt=”Ini adalah
teks alternatif” />.
Jika dalam folder tersebut masih ada folder lagi dan gambar yang akan
dimuat berada didalamnya, maka penulisannya menjadi :
<img src=”gambar/folder1/folder2/logo_smpi.png”
alt=”Ini adalah teks alternatif” />.
19
Kemudian apabila dokumen HTML dan gambar berada didalam folder
yang berbeda :
Gambar 4. 5 Dokumen HTML dan gambar dalam folder berbeda

Maka penulisan agar gambar yang didalam folder gambar dapat
dimuat adalah sebagai berikut :
<img src=”../gambar/logo_smpi.png” alt=”Ini adalah
teks alternatif” />.
Maksud dari titik titik ( .. ) adalah membaca mundur atau keluar dari
folder HTML, kemudian membaca masuk ke dalam folder gambar.
Selain penggunaan lokasi gambar diatas, kita juga dapat menampilkan
gambar yang sudah terdapat di internet, penulisannya seperti dibawah ini
disebut dengan hotlinking misalnya :
<img src=”https://smpi.alabidin.sch.id/logo.png”
alt=”logo” />.
Penggunaan hotlinking sangat tidak dianjurkan karena gambar yang
dimuat bukanlah milik kita dan tentunya juga akan merugikan pemilik
gambar yang asli.
20
BAB 5
MEMBUAT LINK
Dalam sebuah halaman website, kita pasti akan menemui yang namanya
link. Link ini akan membuat konten atau elemen HTML dapat di klik dan akan
mengarahkan/membawa kita ke halaman web lainnya. Biasanya suatu link
ditampilkan dengan warna biru dan bergaris bawah (secara default selama belum
diberi style).
5.1. Link Standar

Link atau biasa disebut dengan anchor (pengait) dapat dibuat dengan
menambahkan tag <a> pada teks yang ingin kita buat menjadi link.
Contoh :
Klik <a>disini</a> untuk mendownload.
Ketika script diatas dijalankan, kita tidak dapat melihat perubahan
pada teks “disini” karena kita belum “mengaitkan” ke halaman web lain.
Untuk itu kita akan menggunakan atribut href untuk menyimpan alamat
web yang akan dituju ketika link di klik (penulisan lokasi sama halnya
dengan atribut src pada tag img). Contoh :
Klik <a href=”https://www.youtube.com”>disini</a>
untuk membuka youtube.
Sebagai latihan kita akan membuat file HTML baru dan membuat link
untuk mengaitkan ke halaman web latihan1 dan latihan2.
1. Buat file baru dengan nama “latihan3_kelas.html”. Simpanlah didalam
folder yang sama dengan latihan1 dan latihan2.
Gambar 5. 1 Penempatan file pada folder yang sama
21
2. Ketikkan kode berikut ini pada file “latihan3_kelas.html”.
Gambar 5. 2 Kode membuat link file latihan3_kelas.html

3. Save file HTML dan buka latihan3 pada web browser. Kita dapat
meng-klik linknya satu persatu.
Gambar 5. 3 Tampilan file latihan3_kelas.html

Jika kita perhatikan kode yang terdapat dalam latihan3, ada beberapa
tag yang belum dibahas, yaitu tag <h1> dan <br>.
Tag <br> digunakan untuk memindahkan teks ke baris baru,
sehingga teks yang dipisahkan dengan tag ini akan ditampilkan di baris yang
berbeda.
Tag <br> merupakan salah satu tag yang tidak memiliki pasangan
atau penutup, maka untuk membuat penutupnya cukup tambahkan garis
miring ( / ) sebelum kurung sudut penutup yakni <br /> supaya file
HTML kita menjadi valid ketika dilakukan validasi di W3C.
Sedangkan tag <h1> digunakan untuk membuat heading atau judul
pada halaman web.
22
Setiap link yang di klik akan ditampilkan di window/tab yang sama
pada web browser, lalu bagaimana jika kita ingin membuka link tersebut di
tab/window baru ? jawabannya adalah tambahkan atribut target=”_blank”.
Gambar 5. 4 Atribut target _blank pada tag <a>
5.2. Link Email

Kita juga bisa membuat link untuk email, link ini berisi alamat email
yang ketika di klik, otomatis akan membuka aplikasi untuk mengirim email
yang sudah terisi dengan alamat tujuan yang sudah ditentukan.
Untuk membuat link email, kita tinggal menambahkan
mailto:alamat@email didalam atribut href. Contoh :
<a href=”mailto:dimaspamilihea@alabidin.sch.id”>Kirim
Email</a>.
23
BAB 6
HEADING (PENJUDULAN)
Heading digunakan untuk memberikan penjudulan pada dokumen HTML.

Untuk memformat penjudulan, kita menggunakan tag <h1> untuk judul utama
dan untuk judul sub bab dapat menggunakan tag <h2> sampai <h6>.
Setiap level judul memiliki ukuran huruf yang berbeda (namun kita masih
bisa mengubah ukurannya melalui CSS). Untuk latihan, buatlah file HTML baru
dengan nama “latihan4_kelas.html”. Kemudian ketikkan kode HTML berikut ini :
Gambar 6. 1 Kode membuat Heading
24
Gambar 6. 2 Penjudulan pada dokumen HTML
25
BAB 7
MEMBUAT DAFTAR (LIST)
Daftar dapat memiliki penomoran atau hanya menggunakan simbol seperti

lingkaran atau bentuk lainnya. Dalam HTML, daftar yang menggunakan
penomoran disebut ordered list dan yang menggunakan simbol disebut unordered
list.
7.1. Ordered List

Daftar berurut dapat dibuat menggunakan tag <ol> (singkatan dari
ordered list) dan untuk setiap listnya kita gunakan tag <li> (singkatan dari
list item). Contoh :
<h2>Kegiatan sehari-hari</h2>
<ol>
<li>Bangun Tidur</li>
<li>Sholat Subuh</li>
<li>Mandi</li>
<li>Makan</li>
<li>Berangkat Sekolah</li>
</ol>
Penomoran daftar akan dilakukan otomatis ketika kita menambahkan
list item. Hasilnya seperti berikut :
Gambar 7. 1 Hasil Ordered List
26
7.2. Unordered List
Berbeda dengan daftar berurut, unordered list akan menandai setiap
item dengan simbol baik berupa lingkaran atau persegi. Untuk membuat
daftar tidak berurut kita menggunakan tag <ul> dan seperti tag <ol> item
yang terdapat di dalamnya harus diapit dengan tag <li>.
Jika akan modifikasi contoh sebelumnnya dengan mengubah tag
<ol> menjadi tag <ul>, maka seperti berikut :
<h2>Kegiatan sehari-hari</h2>
<ul>
<li>Bangun Tidur</li>
<li>Sholat Subuh</li>
<li>Mandi</li>
<li>Makan</li>
<li>Berangkat Sekolah</li>
</ul>
Gambar 7. 2 Hasil Unordered List

Secara default, list item akan ditandai dengan simbol lingkaran hitam.
7.3. Definition List

Berbeda dengan Ordered List dan Unordered List yang memiliki
struktur sama, Data List memiliki struktur sendiri. Umumnya Data List
digunakan untuk membuat daftar istilah beserta definisinya seperti halnya
dalam kamus.
27
<dl>
<dt>Nama Istilah</dt>
<dd>Definisi dari Istilah</dd>
</dl>
Tag <dt> (definition term) digunakan untuk menampung istilah
yang akan didefinisikan, dan tag <dd> digunakan untuk menuliskan
definisi dari tag <dt> sebelumnya. Contoh :
Gambar 7. 3 Kode Definition List

Dan berikut tampilan pada web browser.
Gambar 7. 4 Hasil Definition List di web browser
7.4. Nested List/Daftar bersarang

Sebuah daftar bisa saja memiliki daftar lagi di dalamnya atau biasa
disebut dengan daftar/list bersarang (nested list). Contohnya kita akan buat
latihan baru dengan nama “latihan5_kelas.html”.
28
Gambar 7. 5 Kode Nested List
Dan berikut tampilan pada web browser.
Gambar 7. 6 Hasil Nested List di web browser
29
BAB 8
MEMBUAT FORM
Dalam sebuah website biasanya terdapat satu atau lebih form, seperti form
pencarian, registrasi dan lainnya. Form ini biasa digunakan untuk mengumpulkan
data dari pengunjung website.
Sebuah form, boleh jadi memiliki beragam kontrol, mulai dari teks input,
combo box, button dan lainnya. Kita akan mempelajari beberapa kontrol yang
sering digunakan dalam halaman web.
Untuk membuat form kita gunakan tag <form>, dan setiap kontrol yang
dibutuhkan ditempatkan didalam tag <form>
8.1. Control-control Form

Setiap control pada form dapat dibuat menggunakan tag <input>.
Dan yang membedakan tipe dari control tersebut berada pada atribut type.
Berikut ini adalah sebagian tipe kontrol yang biasa digunakan.
8.1.1. Label
Label digunakan untuk memberikan keterangan pada setiap
input yang ada. Perhatikan gambar berikut :
Gambar 8. 1 Contoh Label pada form

Untuk membuat label kita gunakan tag <label>.
<label for=”nama”>Keteranan Input</label>.
Atribut for diisi dengan nama dari atribut name pada kontrol
yang ingin diberikan label.
30
8.1.2. Text
Control input ini dapat diisi dengan teks yang memiliki kata
tidak terlalu panjang/hanya satu baris, biasa digunakan dalam form
pencarian, nama dan lainnya.
<label for=”nama”>Nama Lengkap</label>
<input type=”text” name=”nama”/>
Gambar 8. 2 Text Input

Jika text input yang akan ditampilkan ingin memiliki nilai awal,
maka tuliskan nilai tersebut didalam atribut value.
<input type=”text” name=”nama” value=”Mr.
Dimas”/>
Gambar 8. 3 Text Input dengan Value
8.1.3. Password
Control input ini sama hal nya dengan text, bedanya atribut tipe
diganti menjadi password. Maka ketika ditampilkan di web browser,
text yang ditulis akan diganti menjadi titik atau bintang.
<label for=”pswd”>Password</label>
<input type=”password” name=”pswd”/>
31
Gambar 8. 4 Password Input
8.1.4. Text Area

Sama halnya dengan Input Text, namun textarea dapat diisi
lebih dari satu baris dan cocok digunakan untuk isian yang panjang
seperti alamat, deskripsi atau biodata.
Berbeda dengan kontrol lainnya yang menggunakan tag
<input>, text area memiliki tag sendiri yaitu
<textarea></textarea>. Dan apa yang terdapat didalam tag
ini adalah value dari kontrol tersebut.
<label for=”alamat”>Alamat Lengkap</label>
<textarea name=”alamat”></textarea>
Gambar 8. 5 Text Area
8.1.5. Radio
Control input ini digunakan ketika kita melakukan input berupa
pilihan yang hanya dapat memilih satu. Misalkan input jenis
kelamin. Nah, supaya pilihan yang dipilih hanya satu, name dari
control ini harus disamakan antara input radio satu dengan input
radio lainnya.
32
<label for=”jk”>Jenis Kelamin</label>
<input type=”radio” name=”jk”
value=”pria”/>Pria
<input type=”radio” name=”jk”
value=”wanita”/>Wanita
Gambar 8. 6 Radio Input
8.1.6. Check Box

Control input ini kebalikannya dari Radio. Kalau input radio
hanya bisa memilih satu, check box dapat memilih lebih dari satu.
<label for=”hobi”>Hobi</label>
<input type=”checkbox” name=”hobi”
value=”bernyanyi”/>Bernyanyi
value=”menari”/>Menari
value=”membaca”/>Membaca
Gambar 8. 7 Check Box Input
33
8.1.7. Combo Box
Combo Box adalah kontrol yang memiliki pilihan ketika diklik.
Cara membuatnya seperti halnya membuat daftar namun dengan tag
yang berbeda.
<label for=”kota”>Kota</label>
<select name=”kota”>
<option>Surakarta</option>
<option>Karanganyar</option>
<option>Sukoharjo</option>
</select>
Gambar 8. 8 Combo Box
8.1.8. Submit/Button
Submit atau Button merupakan tombol yang dapat di klik. Text
yang ada didalam tombol dapat ditulis melalui atribut value.
<input type=”submit” value=”Kirim Data”/>
Gambar 8. 9 Button
34
Sebagai latihan, silahkan gabungkan kontrol-kontrol diatas menjadi satu
form utuh dengan membuat file baru dengan nama ”latihan6_kelas.html”.
Gambar 8. 10 Kode latihan6
Gambar 8. 11 Tampilan hasil latihan6 di browser
35
BAB 9
MEMBUAT TABEL
Untuk menampilkan data dengan tipe tabel dalam HTML, kita bisa
mengguanakan tag <table>.
<table></table>.
Untuk membuat baris tabel, kita gunakan tag <tr> singkatan dari table
row yang ditulis dalam tag table.
<table>
<tr></tr>
<table>
Untuk menentukan banyaknya kolom, kita gunakan tag <td> (table data)
yang digunakan dalam tag <tr>.
<table>
<tr>
<td>No</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
</table>
Untuk menyatukan kolom atau baris (merge-cell) kita tambahkan atribut
colspan (untuk merge horizontally) atau rowspan (untuk merge vertically).
36
Gambar 9. 1 Kode menyatukan kolom dan baris dalam Tabel
Jika diperhatikan pada tag pembuka <table>, ada tambahan atribut
border=1. Atribut tersebut digunakan untuk menambahkan border atau memberi
garis pada tabel.
Gambar 9. 2 Hasil tampilan menyatukan kolom dan baris dalam Tabel

Sebagai latihan, silahkan tuliskan kode tabel diatas dan tambahkan
beberapa data lagi, kemudian simpan file dengan nama “latihan7_kelas.html”.
Agar format tabel sesuai dengan ketentuan, kita dapat menggunakan tag
<thead> untuk baris yang menjadi judul tabel, tag <tbody> untuk data/isi
dari tabel, dan tag <tfooter> untuk kaki tabel.
37
Gambar 9. 3 Struktur tabel yang dianjurkan
38
BAB 10
MEMAHAMI TAG DIV (DIVISION)
Kita dapat membuat suatu group dari tag-tag HTML yang dibuat
menggunakan tag <div>. Setiap website/webblog, jika diperhatikan pasti
memiliki empat bagian/group utama, yaitu :
1. Header
Bagian kepala website yang berisi logo website, nama website, slogan
website, menu website dan lainnya
2. Content
Berisi isi dari website itu sendiri, jika website berupa webblog, maka
contentnya berisi postingan terbaru atau informasi lainnya.
3. Sidebar
Berada disamping Content dan biasanya berisi iklan, kategori artikel,
widget atau hiasan situs lainnya.
4. Footer
Bagian kaki dari website yang pada umumnya diisi dengan tag
website tersebut, misal copyright © 2022 by Mr.Dimas.
Lebih sederhananya, bayangkanlah surat resmi yang memiliki Kop Surat,
badan surat dan penutup surat.
Dalam HTML, kita dapat membagi bagian-bagian tersebut menggunakan
tag <div> (division/bagian) dan untuk memberikan nama setiap div kita
gunakan atribut id atau class (atribut id dan class tidak hanya digunakan dalam
tag div saja melainkan dapat digunakan di setiap tag HTML untuk memberikan
penamaan sebagai referensi jika diperlukan).
Berikut contoh penggunaan tag div jika kita terapkan pada bagian-bagian
website.
39
Gambar 10. 1 Kode penggunaan tag Div
Jika kita tampilkan pada browser, kita tidak akan melihat apa-apa karena
tag div tidak akan menampilkan efek visual. Tag ini hanya digunakan untuk
membuat dokumen HTML lebih terstruktur dengan membagi-bagi dokumen ke
dalam bagian-bagian yang lebih spesifik.
10.1. Menggunakan ID atau Class

Untuk yang baru belajar HTML dan CSS pasti menanyakan hal yang
sama ketika mau menggunakan ID atau Class. Karena atribut tersebut
digunakan untuk memberikan nama tag HTML. Kemudian apa
perbedaannya ?
10.1.1. ID
Atribut ID digunakan untuk penamaan elemen HTML yang
memiliki karakteristik unik/berbeda. Tidak boleh ada dua atau lebih
elemen yang mempunyai ID yang sama. Contoh :
40
<div id=”menu”>
<ul id=”menu”>
<li>Beranda</li>
<li>Tutorial</li>
</ul>
</div>
Penggunaan atribut ID diatas adalah SALAH. Karena
terdapat dua ID yang sama, yaitu “menu” pada tag <div> dan <ul>.
Perhatikan contoh diawal, bahwa kita menggunakan ID yang
berbeda untuk setiap div yakni, header, content, sidebar dan footer
karena semuanya memiliki struktur dan fungsi yang berbeda dalam
suatu dokumen HTML.
10.1.2. Class
Class digunakan untuk penamaan elemen yang memiliki
karakteristik/struktur sama dan dapat digunakan berulang kali
dalam markup (kode HTML). Contoh :
<ul id=”menu”>
<li class=”merah”>Beranda</li>
<li>Tutorial</li>
<li class=”merah”>Berita</li>
<li>Video</li>
</ul>
Pada kode HTML diatas, class Merah digunakan pada
beberapa list item, karena nantinya list item yang memiliki class
merah akan diberi style warna background merah.
Kesimpulannya adalah, ketika kita memiliki beberapa elemen
dengan karakter/format yang sama, gunakan Class sebagai
penamaannya dan gunakan ID untuk elemen yang berbeda dan
membutuhkan tanda pengenal yang lebih spesifik.
41
10.2. Memahami hubungan Child, Parent dan Siblings
Ketika suatu tag memiliki tag/konten didalamnya, maka hubungan
antar tag tersebut disebut dengan child-parent dan sibling. Perhatikan contoh
berikut :
<div id=”wrapper”>
<div id=”content”>
<div id=”article”></div>
<div id=”sidebar”></div>
</div>
</div>
Dalam contoh kode HTML diatas :
• <div id=”wrapper”> disebut Parent, dan tag HTML yang
ada didalamnya disebut dengan Child ( <div
id=”content”> ).
• <div id=”content”> disebut Parent untuk <div
id=”article”> dan <div id=”sidebar”>.
• Dan hubungan antara <div id=”article”> dan <div
id=”sidebar”> disebut dengan sibling (suadara).
42
BAB 11
MENGENAL ELEMEN SEMANTIK PADA HTML
Dalam HTML terdapat beberapa elemen yang khusus untuk menata

elemen-elemen agar terlihat bagus (membuat layout). Yakni dengan elemen
semantik seperti <header>, <aside>, <footer>, <article>, dll.
11.1. Apa itu Elemen Semantik

Awal hadirnya HTML dahulu, elemen semantik belum ada. Banyak
orang membuat layout dengan tag yang salah. Ada yang membuat dengan
tag <tabel> (termasuk Mr. hehe) dan ada juga dengan tag <div>. Ini
sebenarnya tidak sepenuhnya salah, karena membuat layout dengan kedua
tag tersebut memang benar-benar bisa. Tetapi ini bukanlah cara yang baik
dan akan membuat kode HTML akan sulit untuk dibaca. Karena itulah hadir
elemen semantik sebagai solusi.
Elemen semantik mulai ditambahkan pada HTML 5. Elemen semantik
adalah elemen-elemen yang menyatakan makna atau tujuan dari fungsi
elemen itu sendiri. Contoh tag <footer>, tag ini digunakan untuk
membuat elemen footer atau bagian kaki dari halaman website. Jangan
menggunakan tag tersebut dibagian paling atas, karena maknanya sudah
jelas untuk footer. Jadi tidak akan ada lagi yang namanya penyalahgunaan
tag, karena setiap tag sudah punya tujuan masing-masing. Berikut ini daftar
elemen-elemen semantik :
Tag Fungsi
<article> Untuk membuat elemen artikel
<aside> Untuk membuat elemen bagian samping
<details> Untuk membuat elemen detail/spoiler
<figcaption> Untuk membuat teks caption pada figur
Untuk membuat figur atau gambar pada
<figure>
artikel
43
Tag Fungsi
Untuk membuat elemen bagian kaki
<footer>
dari web
<header> Untuk membuat kepala kop dari web
<main> Untuk membuat elemen utama
<mark> Untuk menandai teks
<nav> Untuk membuat navigasi
<section> Untuk membuat bagian artikel
Untuk membuat ringkasan artikel atau
<summary>
isi spoiler
Untuk membuat elemen yang
<time>
menyatakan waktu
Dll Dan lain-lain masih banyak lagi.
11.2. Mengapa harus pakai Elemen Semantik

Salah satu keuntungan menggunakan elemen semantik adalah
dokumen HTML kita akan mudah dibaca, baik oleh manusia maupun
mesin. Contoh :
Gambar 11. 1 Kode elemen semantik dengan Div
44
Contoh diatas adalah layout yang dibuat dengan tag <div>. Tag ini
memang bagus untuk membungkus elemen HTML. Kita akan lebih mudah
untuk memahami dengan membaca nama-nama class yang diberikan pada
elemen <div>. Ada <div> yang bertugas untuk membuat elemen header,
article, footer dan sebagainya. Sekilas tidak ada masalah dengan hal itu,
namun apabila nanti elemen <div> sudah terlalu banyak, kita akan sulit
untuk membacanya. Sekarang kita bandingkan dengan kode dibawah ini :
Gambar 11. 2 Kode elemen semantik tanpa Div

Kode diatas tentunya akan lebih mudah dibaca. Elemen semantik ini
juga bagus untuk SEO (Search Engine Optimization).
11.3. Membuat Layout dengan Elemen Semantik

Sekarang kita akan belajar membuat layout dengan elemen semantik.
Buatlah file baru dengan nama “layout.html” kemudian isi dengan kode
HTML berikut :
45
Gambar 11. 3 Membuat layout dengan elemen semantik
Hasilnya ketika dibuka dengan web browser :
Gambar 11. 4 Tampilan Membuat layout

Hasilnya terlihat biasa saja karena kita belum menambahkan style
CSS. Maka dari itu mari kita coba untuk menambahkan style CSS untuk
elemen semantik.
11.4. Style untuk Elemen Semantik

Untuk memberikan style pada elemen semantik sama seperti kita
memberikan style pada elemen HTML yang lain. Yakni dengan
menambahkan atribut style. Kemudian mengisinya dengan kode style CSS.
46
Sekarang kita coba untuk mengedit file “layout.html” yang telah kita buat
sebelumnya. Tag yang kita tambahkan atribut style yaitu : body, header,
article dan footer.
<body style=”background-color: silver;”> → (baris 8)
<header style=” background-color: white;”> → (baris 9)
<article style=” background-color: white;”> → (baris 19)
<footer style=” background-color: white;”> → (baris 24)
Hasilnya sebagai berikut :
Gambar 11. 5 Tampilan Membuat layout dengan style
11.5. Mencoba Elemen Semantik lainnya

Tidak semua elemen semantik bertujuan untuk membuat layout, ada
juga beberapa elemen semantik lainnya yang bertujuan untuk membuat
elemen tertentu. Misalkan elemen <details> dan <summary>.
Tag <details> dan <summary> merupakan tag untuk membuat
elemen spoiler. Tag <details> akan berisi semua detail konten, kemudian
tag <summary> akan menjadi tombol yang bisa diklik untuk
menampilkan detail isinya.
47
Gambar 11. 6 Struktur elemen semantik <details> dan <summary>
Berikut ini contoh kode HTML nya :
Gambar 11. 7 Kode elemen semantik <details> dan <summary>

Dan hasilnya sebagai berikut :
Gambar 11. 8 Hasil elemen <details> sebelum di klik
Gambar 11. 9 Hasil elemen <details> sesudah di klik
48
Jadi untuk elemen <details> dan <summary> tampilan awal
akan ada simbol segitiga hitam yang mengarah ke kanan. Simbol tersebut
dapat di klik dan akan mengarah kebawah untuk menampilkan bagian
detailnya.
49
BAB 12
MEMUAT VIDEO DAN AUDIO PADA HTML
Pada Bab sebelumnya kita sudah belajar untuk menambahkan gambar,

sekarang konten di web tidak hanya teks dan gambar saja melainkan ada video
dan audio. Maka dari itu kita akan belajar untuk menambahkan video dan audio
pada HTML.
12.1. Menambahkan Video pada HTML

Untuk menambahkan video konsepnya hampir sama dengan ketika
kita menambahkan gambar. Perbedaannya adalah hanya pada tag yang
digunakan saja yakni tag <video>.
Gambar 12. 1 Struktur kode tag <video>

Jika tag video dibuka pada web browser yang tidak mendukung
format videonya, maka teks “browser tidak mendukung tag video” akan
ditampilkan. Namun jika mendukung, video yang akan ditampilkan.
12.2. Format Video yang didukung

Tidak semua format video dapat ditampilkan di HTML. Berikut ini
beberapa format video yang didukung :
Format FILE Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
50
Jika kita memiliki video dengan format selain diatas, maka harus
mengubah formatnya terlebih dahulu agar bisa ditambahkan ke HTML.
12.3. Atribut untuk Video

Tag <video> punya beberapa atribut yang bisa diberikan :
Nama Atribut Nilai Fungsi
autoplay true/false Agar video diputar otomatis
Untuk mengaktifkan control video
controls true/false
player
Untuk memutar video terus
loop true/false
menerus
muted true/false Untuk menonaktifkan audio
Untuk menentukan gambar cover
poster Image Path
dari video
Untuk menentukan tinggi dan
width & height angka
lebar video
Untuk memutar video secara
playsinline true/false
“inline”
Contoh : ketika nilainya true.
<video loop=”true”>
<source src=”video.mp4”>
</video>
atau
<video loop>
</video>
Jika nilai atribut adalah false, maka atribut boleh tidak ditulis atau
juga boleh ditulis.
Contoh : ketika nilainya false.
<video loop=”false”>
</video>
51
atau
<video>
</video>
12.4. Menambahkan Video dari Youtube

Ketika kita tidak ingin repot untuk mengubah format video, kita bisa
memanfaatkan Youtube. Tinggal upload videonya ke Youtube, nanti kita
akan mendapatkan id unik dari video. Id unik ini bisa kita dapatkan dari
URL video Youtube. Contoh : SeB1CmZRH5Q.
Youtube sendiri sudah memiliki media player, jadi kita tidak perlu
membuat sendiri dengan tag <video>.
Tag yang kita butuhkan untuk menambahkan video dari Youtube
adalah tag <iframe>. Tag ini sebenarnya berfungsi untuk menambahkan
halaman lain dalam sebuah frame. Contoh :
<iframe width=”560” height=”315”
src=”https://www.youtube.com/embed/SeB1CmZRH5Q”>
</iframe>
Perhatikan URL yang digunakan pada atribut src, disana kita
menggunakan /embed/. fungsi ini adalah halaman yang digunakan khusus
untuk embed video dari Youtube.
12.5. Menambahkan Audio pada HTML

Untuk menambahkan audio konsepnya sama dengan ketika kita
menambahkan video. Perbedaannya adalah hanya pada tag yang digunakan
saja yakni tag <audio>.
52
Gambar 12. 2 Struktur kode tag <audio>
12.6. Format File Audio yang didukung

Tidak semua format audio dapat didukung di HTML. Berikut ini
beberapa format video yang didukung :
Format Container MIME type
PCM WAV audio/wav
MP3 MP3 audio/mpeg
AAC MP4 audio/mp4
AAC AAC audio/aac
AAC AAC audio/aacp
Vorbis Ogg audio/ogg
Vorbis WebM audio/webm
Opus Ogg audio/ogg
Opus WebM audio/webm
FLAC FLAC audio/flac
FLAC Ogg audio/ogg
Format file yang biasanya digunakan adalah MP3 dan MP4 (M4A),
karena ukuran filenya relatif kecil. Sementara format FLAC adalah format
file audio dengan kualitas tinggi dan ukuran filenya relatif lebih besar.
53
12.7. Atribut untuk Audio
Tag <audio> punya beberapa atribut yang sering digunakan :
Nama Atribut Nilai Fungsi
Untuk mengaktifkan tombol
controls true/false kontrol (play, pause, stop, scroll
dan volume)
autoplay true/false Untuk memutar audio secara
otomatis
loop true/false Untuk mengulang-ulang
pemutaran audio
muted true/false Untuk mensenyapkan audio
12.8. Audio sebagai Backsound

Cara membuat musik backsound adalah dengan menambahkan atribut
autoplay, loop, dan menghilangkan kontrol (hidden).
<audio hidden autoplay loop>
<source src=”musik.mp3” type=”audio/mpeg”>
Browsermu tidak mendukung tag audio
</audio>
Jika tidak bekerja pada Google Chrome, karena ada pembaharuan
kebijakan dalam memutar audio, kita bisa coba menggunakan web browser
yang lainnya untuk mencoba hasilnya.
54
BAB 13
CASCADING STYLE SHEET (CSS)
13.1. Pengenalan CSS

CSS adalah kependekan dari Cascading Style Sheet yang berfungsi
untuk mempercantik penampilan HTML atau menentukan bagaimana
elemen HTML ditampilkan, seperti menentukan posisi, mengubah warna
teks atau background dan lainnya. Penulisan kode CSS sebagai berikut :
Gambar 13. 1 Penulisan kode CSS
13.1.1. Selector
Selector adalah elemen/tag HTML yang ingin diberi style.
Kita dapat menuliskan langsung nama tag yang ingin diberi style
tanpa perlu menambahkan tanda kurung sudut <>. Pada gambar
diatas, kita akan memberi style pada seluruh tag h1 yang terdapat
dalam file HTML.
Jika tag HTML yang ingin diberi style memiliki ID, kita
dapat menuliskan nama ID tersebut dengan diawali tanda kress (#).
Contoh : #header.
Dan jika tag yang diberi style memiliki Class, maka
penulisan selector bisa dilakukan dengan tanda titik (.) diikuti
dengan nama class. Contoh : .artikel.
55
Jika kita hanya menuliskan satu selector, seperti gambar
diatas, maka seluruh tag h1 yang terdapat dalam file HTML akan
memiliki style yang sama. Bagaimana jika kita hanya ingin
memberi style pada tag h1 yang hanya terdapat di dalam Class
artikel. Maka penulisan selectornya adalah berikut : .artikel h1.
Kode tersebut akan memerintahkan pada browser untuk
memberi style pada tag h1 yang hanya terdapat di dalam class
artikel (atau h1 yang merupakan child dari class artikel).
Kita juga dapat memilih lebih dari satu tag untuk
penghematan kode CSS. Misalnya ketika kita memiliki dua atau
lebih tag dengan style yang sama, dari pada menuliskan kode
seperti ini :
h1{background-color: #666666;}
p{background-color: #666666;}
a{background-color: #666666;}
Maka lebih baik menggabungkan selector dengan
menambahkan tanda koma pada nama tag yang ingin diberi style.
h1, p, a {background-color: #666666;}
13.1.2. Property dan Value

Property adalah sifat-sifat yang ingin diterapkan pada
selector, seperti warna text, warna background, jarak antar elemen,
garis tepi dan lainnya.
Untuk memberikan nilai/value pada property, kita
menggunakan tanda titik dua (:). Setiap property diakhiri dengan
titik koma (;), jika kita tidak mengakhirinya maka browser tidak
akan mengetahui maksud dari property tersebut.
Property pada CSS sangat mudah dimengerti karena lebih
mirip bahasa manusia. Misalnya untuk merubah warna text kita
gunakan property color, untuk merubah warna background kita
gunakan property background-color, dan untuk merubah ukuran
huruf kita gunakan property font-size. Mudah dimengerti bukan ?
56
.artikel h1 {
color : red;
background-color : blue;
font-size : 20px;
}
Menurut Mr, kode CSS sangatlah mudah untuk dipahami,
karena kata-kata yang digunakan sudah tidak asing lagi. Jika kita
perhatikan contoh diatas dan kita ubah menjadi bahasa manusia
sehari-hari, kira-kira seperti ini :
“Hey Brow (Browser), cari tag h1 yang terdapat didalam
class artikel, jika ditemukan/ada, maka ubah warnanya menjadi
merah, warna background menjadi biru dan ukuran huruf menjadi
20 pixel”.
13.2. Penulisan CSS

Ada tiga cara penulisan kode CSS, yaitu inline, internal, dan external.
Ketiganya bisa kita lakukan sesuai dengan kebutuhan. Berikut contoh
penggunaannya.
13.2.1. Inline
Penulisan kode CSS dengan metode inline bisa dilakukan
langsung pada tag yang ingin diberi style dengan menggunakan
atribut style.
<h1 style=”color : red;”>Judul Web</h1>
Pada metode ini, kita tidak perlu menuliskan selector, karena
kita menuliskan CSS langsung pada tag yang ingin diberi style.
Cara ini sangat tidak dianjurkan, karena kita akan
mencampurkan antara Format HTML dan CSS. Cara ini juga
kurang efektif ketika ada perubahan pada CSS.
13.2.2. Internal
Metode CSS internal ditulis didalam tag style yang
ditempatkan pada tag head.
57
<html>
<head>
<title>Judul Web</title>
<style>
h1 {color : red; }
</style>
</head>
</html>
Metode ini sangat dianjurkan untuk pengujian style, atau
ketika kita hanya memiliki satu halaman web saja.
13.2.3. External
Metode yang terakhir adalah dengan membuat file CSS dan
dipanggil didalam tag head. File CSS memiliki ekstensi (akhiran)
.CSS misalnya namafile.css.
Pemanggilan file CSS dilakukan dengan menggunakan tag
link:
<html>
<head>
<title>Judul Web</title>
<link rel=”stylesheet” href=”fileCSS.css” />
</head>
<html>
Atribut rel adalah informasi hubungan (relationship) dari tag

link tersebut, yaitu sebagai stylesheet. Href diisi dengan lokasi file
CSS yang ingin dipanggil. Pemanggilannya sama halnya dengan
memanggil gambar atau link.
58
BAB 14
BOX-MODEL
14.1. Margin
Property margin digunakan untuk memberikan jarak antar elemen/tag
HTML. Misalnya jarak antar <div> dan tag-tag HTML lainnya. Contoh
buatlah file baru dengan nama “margin.html” kemudian tulis lengkap tag
wajib HTML dan masukkan kode dibawah ini didalam tag body.
<div class=”box”>
Box pertama
</div>
<div class=”box”>
Box Kedua
</div>
Kemudian tambahkan tag <style> didalam tag <head> dan tuliskan
kode CSS berikut didalam tag <style> :
.box{
background-color : green;
color : yellow;
width : 100px;
height : 100px;
margin-bottom : 50px;
}
59
Gambar 14. 1 Kode CSS Margin pada .box
Gambar 14. 2 Tampilan CSS Margin

Jarak antar box sedikit berjauhan, karena kita menambahkan margin
bawah (margin-bottom) sebesar 50px. Untuk melihat perbedaan ketika kita
memberikan margin atau tidak, silahkan dihapus property margin-bottom
60
dan perhatikan perbedaannya. Kita juga dapat memberikan jarak atas (top),
kanan (right) dan kiri (left).
margin-top : 20px;
margin-right : 30px;
margin-left : 40px;
14.2. Padding
Pada latihan sebelumnya, kita telah memberikan jarak antar elemen
HTML dalam contoh sebelumnya jarak antar <div>, namun coba perhatikan
antara text (Box ke x) dengan garis tepi kotak, tidak ada jarak sama sekali,
merapat ke sisi box tersebut.
Untuk itu property padding yang akan memberikan jarak antara
konten elemen dengan elemen tersebut. Sebagai contoh kita tambahkan
kode CSS berikut ke class box yang kita buat pada file “margin.html”.
Gambar 14. 3 Penambahan padding pada .box
61
Gambar 14. 4 Tampilan penambahan padding pada .box
Sekarang dapat dilihat jarak antara text dengan tepi dari box. Perlu
diperhatikan juga, bahwa ketika kita menambahkan padding, ukuran .box
juga akan berubah. Misalkan kita menentukan ukuran lebar dari .box
sebesar 100px. Ketika kita menambahkan padding-left sebesar 20px, maka
total lebar dari .box tersebut menjadi 120px.
14.3. CSS-Shorthand
Pada pembahasan sebelumnya, bisa kita ambil kesimpulan bahwa
setiap property dapat memiliki lebih dari satu jenis, misalnya margin dapat
memiliki 4 jenis : margin-top, margin-right, margin-bottom, margin-left.
margin-top : 20px;
margin-right : 30px;
margin-left : 40px;
Daripada menuliskan seluruh property tersebut, kita bisa
menggunakan CSS-Shorthand yaitu menggabungkan seluruh value (top,
right, bottom, left) ke dalam satu property. Contohya :
margin : 20px 30px 50px 40px;
Masing-masing dari nilai tersebut adalah :
margin : top right bottom left;
62
CSS-Shorthand margin memiliki urutan searah dengan jarum jam
dimulai dari margin-top.
Kita juga bisa mencoba hal lainnya dengan property margin,
perhatikan dengan seksama contoh berikut :
• Ketika memberikan satu nilai pada property margin, artinya
memberikan nilai pada seluruh sisi (top, right, bottom, left).
margin : 20px;
• Ketika memberikan dua nilai pada property margin, artinya
memberikan nilai (top dan right), kemudian nilai (bottom=top dan
left=right).
margin : 20px 30px;
• Ketika memberikan tiga nilai pada property margin, artinya
memberikan nilai (top, right, bottom), kemudian nilai (left=right).
Sama halnya ketika memberi dua nilai.
margin : 20px 30px 40px;
Penggunaan nilai seperti ini juga berlaku pada padding dan property-
property yang sejenis lainnya.
14.4. Border
Property border digunakan untuk memberikan garis tepi pada elemen,
setidaknya ada tiga property yang harus diset yaitu, color, style dan width.
border-color : black;
border-style : solid;
border-width : 5px;
Namun kita juga dapat menggunakan CSS-Shorthand sehingga
menjadi seperti berikut :
border : width style color;
Jadi jika kita ubah contoh kode diatas menjadi CSS-Shorthand,
kodenya menjadi seperti berikut :
border : 5px solid black;
Silahkan tambahkan kode diatas pada latihan sebelumnya dan kita
akan mendapati hasilnya sebagai berikut :
63
Gambar 14. 5 Tampilan penambahan border pada .box
Sama halnya dengan padding, penambahan property border juga akan
merubah ukuran dari .box. Jadi jika ingin membuat ukuran lebar .box tetap
100px, maka kita harus menghitung ulang width dari .box tersebut.
Kita akan coba menghitungnya, border ditambahkan pada seluruh sisi
.box, artinya jika ukuran border 5px, maka untuk lebarnya adalah 10px (5px
sisi kiri dan 5px sisi kanan). Kemudian padding yang kita tambahkan adalah
20px dan ukuran width .box adalah 100px.
Sehingga ukuran lebar .box sekarang : 100px (width) + 20px
(padding) + 10px (border) = 130px.
Dalam CSS, kasus seperti ini disebut dengan box-model. Terdapat dua
property yang mempengaruhi ukuran dari sebuah box yaitu padding dan
border. Perhatikan skema box model berikut ini :
Gambar 14. 6 Skema box-model
64
BAB 15
TYPOGRAPHY
Secara default (bawaan), halaman web yang dibuat akan menggunakan

font standar yaitu Times New Roman. Namun kita dapat merubahnya dengan
property font-family.
font-family : calibri;
Namun perlu diperhatikan bahwa tidak semua komputer memiliki font
yang kita tentukan. Untuk itu kita dapat memberikan lebih dari satu jenis font
sebagai pengganti ketika font sebelumnya tidak ditemukan.
font-family : calibri, arial, tahoma, verdana, sans-serif;
Ketika font jenis calibri tidak ditemukan, maka akan menggunakan font
berikutnya yaitu arial, ketika font arial tidak ditemukan, maka akan menggunakan
font jenis tahoma dan begitu seterusnya sampai sans-serif atau serif dan browser
akan menggunakan font yang sesuai dengan jenis yang disebutkan (sans-serif atau
serif).
Perlu diingat, ketika nama font menggunakan spasi, maka untuk penulisan
perlu menggunakan tanda petik/kutip pada nama font tersebut. Misalnya “segoe
ui”.
Kemudian untuk menggunakan font dari google font kita wajib
menambahkan tag seperti berikut : <link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia"> diantara
tag <head>. Sofia adalah nama dari jenis font yang digunakan, kita bisa
merubahnya dengan jenis font lainnya. Untuk melihat daftar font dari google
dapat diakses di alamat web : https://fonts.google.com/. Perlu diingat agar font
google dapat digunakan, komputer harus terkoneksi dengan internet.
15.1. Apa itu Sans-Serif dan Serif

Dalam Typography jenis font dibagi menjadi dua yakni serif dan sans-
serif.
65
15.1.1. Serif
Kata Serif bisa diartikan sebagai kait, jadi jenis huruf serif
memiliki kait disetiap ujung hurufnya. Font jenis serif yang paling
terkenal adalah Times New Roman.
Gambar 15. 1 Font jenis Serif memiliki kait disetiap ujungnya

Font jenis ini bisa kita gunakan untuk teks dengan konteks
formal atau gaya klasik. Namun kita dapat memadupadankan jenis
font ini sehingga memberikan kesan tertentu pada halaman web.
15.1.2. Sans-serif
Arti dari sans adalah “tanpa”. Jadi sans-serif bisa diartikan
sebagai jenis font tanpa kait. Yang paling umum digunakan untuk
jenis sans-serif adalah arial.
Jenis font ini memberikan kesan dinamis dan luwes. Kita bisa
memadupadankan dengan jenis font yang lain untuk kesan tertentu.
Gambar 15. 2 Font jenis Sans-Serif

Dalam pengaturan browser, kita bisa memilih font untuk serif
dan sans-serif. Jadi ketika font-family menggunakan serif, maka
font yang telah kita pilihlah yang akan digunakan.
66
15.2. Property untuk Font yang sering digunakan
Property Satuan Fungsi
font-size px / pt untuk menentukan ukuran font
normal, bold,
font-weight untuk menentukan ketebalan
bolder
letter-spacing px / pt untuk menentukan jarak antar

huruf
line-height px / pt untuk menentukan jarak antar
baris
left, center,
text-align untuk menentukan perataaan text
right, justify
67
BAB 16
CSS-IMAGE
Image dalam CSS maksudnya adalah background-image. Bagaimana

menggunakan sebuah gambar menjadi background untuk suatu elemen. Pada
bagian ini kita akan mempelajari penggunaan background-image, background-
repeat.
16.1. background-image
Untuk memanggil gambar sebagai background dari elemen, kita
gunakan property background-image.
background-image : url (“images/background.jpg”);
Ketika gambar yang digunakan ukurannya kecil, maka background
akan ditampilkan berulang-ulang untuk memenuhi elemen tersebut.
Untuk percobaan buatlah file dengan nama “css_image.html” dan
selanjutnya buatlah elemen div dan tentukan ukuran width dan heightnya.
Gambar 16. 1 Kode Background
68
Gambar 16. 2 Background ditampilkan berulang
16.2. background-repeat
Pengulangan gambar background dapat diatur menggunakan property
background-repeat. Gambar dapat diulang secara horizontal (sesuai sumbu
x) atau secara vertical (sumbu y) atau tidak mengulangi background
tersebut.
background-repeat : repeat-x;
Gambar 16. 3 Background repeat-x (horizontal)

background-repeat : repeat-y;
Gambar 16. 4 Background repeat-y (vertical)
69
background-repeat : no-repeat;
Gambar 16. 5 Background tidak diulang
16.3. background-position
Posisi gambar background dapat kita tentukan letaknya dengan
menentukan jarak x dan y. Contohnya :
background-position-x : 500px;
Gambar 16. 6 Background bergeser 500px dari kiri

background-position-y : 500px;
Gambar 16. 7 Background bergeser 500px ke bawah

Kita juga dapat menggunakan CSS-Shorthand untuk background-
position :
background-position : nilaiX nilaiY;
background-position : 500px 500px;
70
BAB 17
FLOATING
Jika sebelumnya kita belajar untuk mengatur text/paragraf rata kanan atau
rata kiri menggunakan property text-align, namun bagaimana jika kita akan
mengatur rata kanan atau rata kiri dari elemen HTML ?
Untuk itu kita dapat menggunakan property float. Nilai yang digunakan
yaitu left dan right. Sebagai contoh buatlah file dengan nama “floating1.html”
dan isikan kode dibawah ini :
Gambar 17. 1 Kode file floating1.html
Gambar 17. 2 Hasil file floating1.html
17.1. Problem pada Floating

Ada satu permasalahan ketika kita menambahkan floating pada suatu
elemen, permasalahan ini bisa kita temui pada contoh kasus dalam file
bernama “floating2.html” berikut : (kalau contoh-contoh sebelumnya kita
menggunakan penulisan CSS Internal, untuk kali ini kita mulai
menggunakan penulisan CSS External).
71
Gambar 17. 3 Kode file floating2.html
Kemudian buatlah file CSS bernama “style.css” dan letakkan dalam
satu folder bersama file “floating2.html”.
Gambar 17. 4 Kode file style.css
72
Sekarang buka file “floating2.html” lewat web browser dan hasilnya
seperti tampilan berikut :
Gambar 17. 5 Tampilan file floating2.html pada web browser

Kelihatan ada yang aneh ? Ya. #content tidak memenuhi isi dari
#artikel dan #sidebar. Seharusnya tinggi #content otomatis sama dengan
tinggi elemen tertinggi di dalamnya, dalam hal ini adalah #artikel dengan
tinggi 600px.
Hal ini dikarenakan kita menambahkan floating pada #artikel dan
#sidebar, sehingga #content menganggap tidak ada elemen didalamnya.
Ada dua cara untuk menyelesaikan kasus ini :
1. Menambahkan style overflow:hidden pada #content.
Gambar 17. 6 Penambahan style overflow:hidden

2. Menambahkan div kosong dengan style clear:both; sebelum penutup
content.
Gambar 17. 7 Penambahan style clear:both
73
Float berarti melayang. Ketika kita memberikan float pada elemen,
maka elemen tersebut seolah-olah melayang dan elemen di atasnya (parent)
menganggap tidak ada elemen didalamnya (child).
Gambar 17. 8 Hasil akhir masalah float
17.2. CSS Reset

Pernahkan kita bertanya darimana warna link dari tag <a> berasal,
atau mengapa tag <b> dapat menebalkan teks, atau kenapa tag <h1>
sampai <h6> memiliki ukuran font yang berbeda-beda dan ketebalan yang
berbeda ? Padalah kita sama sekali belum menambahkan CSS pada markup
yang dibuat.
Setiap browser memiliki Style atau file CSS yang akan diterapkan
pada setiap halaman web yang dibuka. Keberadaan style yang dimiliki
browser ini sangat membantu namun terkadang juga membingungkan bagi
sebagian orang.
CSS Reset berfungsi untuk mereset atau mengatur ulang seluruh
property-property yang telah disetting oleh browser, seperti margin,
padding, warna teks (link), ukuran heading dan lainnya. Perhatikan contoh
CSS berikut :
*{
margin: 0;
padding: 0;
}
74
Selector bintang (*) digunakan untuk memberikan style pada seluruh
elemen/tag HTML. Contoh diatas adalah kita akan mengatur ulang margin
dan padding menjadi 0 pada seluruh elemen HTML yang ada.
75
BAB 18
POSITIONING
Dalam CSS kita juga dapat memposisikan elemen sesuai dengan kehendak
kita. Hal ini membuat desain web dengan CSS lebih fleksibel karena kira bisa
menempatkan elemen-elemen HTML sesuai dengan keinginan kita atau tuntutan
dari desain web.
18.1. Static
Secara default, seluruh elemen/tag HTML memiliki positioning static.
Artinya kita belum bisa/tidak dapat menentukan posisi elemen tersebut.
Ketika kita ingin merubah posisi dari elemen tersebut, maka kita harus
memberikan position:relative dan selanjutnya kita dapat menggunakan
property top, right, bottom dan left untuk menentukan posisi elemen yang
bersangkutan. Sebagai contoh perhatikan kode HTML dan CSS berikut :
<div id=”box”></div>
Kemudian kode CSSnya :
#box{
width : 300px;
height : 300px;
}
Ketika kita tidak memberikan nilai pada property position, maka
secara default, #box memiliki position:static, jadi kita tidak dapat
menggunakan property top, right, bottom dan left untuk menentukan posisi
#box tersebut.
#box{
background : green;
width : 300px;
height : 300px;
top : 100px;
left : 200px;
}
76
Gambar 18. 1 Box static tidak dapat ditentukan posisinya
18.2. Relative
Sekarang kita coba menambahkan position:relative pada #box dan
perhatikan bahwa box tersebut bergeser 100px dari atas dan 200px dari kiri.
#box{
background : green;
width : 300px;
height : 300px;
top : 100px;
left : 200px;
position : relative;
}
Gambar 18. 2 Penambahan position:relative
77
18.3. Absolute
Penambahan position:absolute akan membuat elemen tersebut
terlepas dari aturan penempatan elemen dan dibatasi oleh parent yang
memiliki positioning relative. Agak sulit penjelasan diatas, kita langsung ke
contohnya saja. Kita edit kembali contoh sebelumya, buat kode HTML
seperti berikut :
<div id=”box”>
<div id=”box2”></div>
</div>
Kemudian berikan CSS seperti berikut :
#box{
width : 300px;
height : 300px;
background : green;
}
#box2{
width : 50px;
height : 50px;
background : yellow;
}
Gambar 18. 3 Child elemen berada didalam parentnya

#box2 secara aturan ditampilkan berada di dalam div #box, kita dapat
terlepas dari aturan tersebut dengan menambahkan positioning absolute.
78
Sekarang tambahkan position:absolute dan tentukan property bottom dan
right.
#box2{
width : 50px;
height : 50px;
position : absolute;
bottom : 0px;
right : 0px;
}
Gambar 18. 4 #box2 terlepas dari parent saat ditambahkan position absolute
#box2 akan terlepas dari aturan penempatan elemen (keluar dari #box)
dan berada di kanan bawah browser. Untuk membatasi pergerakan dari
#box2 yang memiliki positioning absolute, maka kita harus menambahkan
positioning relative pada parentnya yakni #box.
#box{
width : 300px;
height : 300px;
background : green;
position : relative;
}
79
Gambar 18. 5 Position absolute dapat dibatasi oleh elemen position relative
Sekarang #box2 berada di kanan bawah parentnya yaitu #box. Kita
dapat bermain dengan nilai negative untuk mendapatkan efek tertentu.
#box2{
width : 50px;
height : 50px;
position : absolute;
bottom : -25px;
right : 20px;
}
Gambar 18. 6 Pengaturan posisi dengan position absolute
80
Perhatikan contoh penggunaan position absolute yang sering
ditemukan di internet seperti berikut :
Gambar 18. 7 Contoh penggunaan Position Absolute

Perhatikan gambar diatas, tombol sharing via facebook, twitter dan
nomor posting ditampilkan berjajar secara vertical dan setengah keluar dari
kotak artikelnya.
Sulit memahami Relative-Absolute ? Bayangkan “Relative” sebagai
sangkar untuk “Absolute”, oleh karena itu pergerakan “Absolute” dibatasi
oleh “Relative”.
18.4. Fixed
Sifat dari position fixed hampir sama dengan absolute, namun posisi
dari elemen fixed akan tetap berada pada posisi yang ditentukan walaupun
browser di zoom-in/out atau di-scroll up/down.
Perhatikan contoh kode HTML dan CSS berikut :
<div id=”social”></div>
Dan CSSnya :
#social{
width : 30px;
height : 100px;
position : fixed;
left : 0px;
top : 100px;
background : green;
}
81
Gambar 18. 8 Contoh penggunaan Position Fixed
Berikut ini adalah contoh penggunaan position:fixed yang sering
ditemui di internet.
Gambar 18. 9 Contoh lawas penggunaan fixed position

Bagian Sign Up di situs kaskus.co.id menggunakan position fixed
sehingga ketika kita men-scroll halaman web, bagian tersebut tetap berada
pada tempatnya.
82
BAB 19
PSEUDO-CLASS
Pseudo Class digunakan untuk memberikan efek-efek tertentu pada

selector. Misalnya efek ketika cursor berada diatas suatu elemen (hover). Ketika
cursor meng-klik suatu elemen dan lainnya.
Berikut adalah cara penulisan pseudo class ;
selector:pseudo-class {property:value;}
Misalnya kita akan menambahkan pseudo-class :hover pada sebuah link.
a:hover {
color : red;
}
Style tersebut akan memberikan efek perubahan warna link menjadi merah
ketika cursor berada diatasnya.
Gambar 19. 1 Pseudo-Class :hover
19.1. Pseudo-Class untuk Link/Anchor

Ada beberapa pseudo-class untuk link/anchor yaitu :
• Untuk link yang belum di klik
a:link { color:blue; }
• Untuk link yang sudah di klik
a:visited { color:green; }
• Ketika cursor berada di atas link
a:hover { color:red; }
• Ketika link dalam keadaan aktif atau terpilih
a:active { color:orange; }
Perhatikan juga urutan ketika penulisan semua pseudo class tersebut
(jika kita bermaksud menuliskan seluruh pseudo class untuk link):
83
1. :hover harus ditulis sesudah :link dan :visited
2. :active harus ditulis sesudah :hover
Jika tidak demikian, maka efek tersebut tidak akan bekerja dengan
baik.
Pseudo-Class :hover dan :active tidak hanya bisa digunakan untuk
link saja melainkan bisa diterapkan pada elemen/tag HTML lainnya.
19.2. Pseudo-Class :first-child dan :last-child

Selain pseudo-class untuk link/anchor ada juga pseudo class :first-
child dan :last-child. Keduanya digunakan untuk memilih elemen pertama
dan terakhir dari suatu selector. Misalnya kita mempunyai sebuah
unordered-list (ul) dengan beberapa list-item (li) didalamnya. Kita bisa
memberikan style khusus untuk list-item yang pertama dan yang terakhir
menggunakan :first-child dan :last-child.
<ul>
<li>Item ke-1</li>
<li>Item ke-2</li>
<li>Item ke-3</li>
<li>Item ke-4</li>
<li>Item ke-5</li>
</ul>
Dan jika kita tambahkan style CSS berikut :
ul li:first-child{
color : green;
}
ul li:last-child{
color : orange;
}
Maka yang akan kita dapatkan adalah tampilan seperti berikut :
84
Gambar 19. 2 Pseudo-Class :first-child dan :last-child
List-item yang pertama akan memiliki warna hijau dan yang terakhir
memiliki warna orange. Tidak hanya pada unordered list, kita dapat
menerapkannya pada deretan elemen lainnya. Misalnya elemen <p> dalam
div.
<div>
<p>Paragraf pertama</p>
<p>Paragraf kedua</p>
<p>Paragraf ketiga</p>
<p>Paragraf keempat</p>
</div>
85
BAB 20
PROJECT HTML DAN CSS
Untuk project HTML dan CSS, kita akan membuat sebuah halaman web
static. Dimana halaman web yang akan kita buat nantinya adalah web edukatif
untuk pembelajaran. Tampilannya seperti berikut :
Gambar 20. 1 Halaman index.html project HTML dan CSS
20.1. Langkah-langkah pembuatan project

1. Buatlah lima file html dalam satu folder dengan nama masing-masing :
• index.html
• header.html
• menu.html
• footer.html
• home.html
2. Isikan kode HTML pada setiap file html seperti berikut :
86
index.html
Gambar 20. 2 Kode HTML file index.html

header.html
Gambar 20. 3 Kode HTML file header.html

menu.html
Gambar 20. 4 Kode HTML file menu.html baris 1-25
87
88
footer.html
Gambar 20. 7 Kode HTML file footer.html

home.html
Gambar 20. 8 Kode HTML file home.html
89
20.2. Memberikan style pada halaman html
1. Tambahkan sebuah folder baru dengan nama “css” ditempat yang sama
dengan kelima file html sebelumnya.
Gambar 20. 9 Menambahkan folder css

2. Buatlah tiga file .css didalam folder css yang sudah kita buat diatas
dengan nama masing-masing :
• header.css
• menu.css
• footer.css
3. Isikan kode CSS pada setiap file css seperti berikut :
header.css
Gambar 20. 10 Kode CSS file header.css
90
menu.css
Gambar 20. 11 Kode CSS file menu.css

footer.css
Gambar 20. 12 Kode CSS file footer.css
20.3. Menambahkan file aset audio, image dan html_doa

1. Untuk menambahkan file aset, silahkan download terlebih dahulu pada
link berikut : https://bit.ly/AsetProjectDoaHarian2022.
91
Gambar 20. 13 Download aset project doa
2. Setelah download, lakukan ekstraksi pada file aset tersebut, sehingga
kita akan mendapatkan tiga folder bernama audio, img dan html_doa.
3. Silahkan pindahkan ketiga folder diatas (audio, img dan html_doa) ke
dalam folder yang sama dengan kelima file html yang sudah kita buat
sebelumnya.
Gambar 20. 14 Posisi folder aset audio, img dan html_doa

4. Selesai dan silahkan dibuka file html dengan menjalankan atau
membuka file index.html pada web browser.
92
BAB 21
PENGANTAR JAVASCRIPT
21.1. Pengenalan Javascript

Javascript adalah bahasa pemrograman web yang berjalan disisi
Client/Browser. Javascript biasa digunakan untuk memanipulasi element-
element HTML dan menambahkan Style secara otomatis atau lebih
sederhananya membuat dokumen HTML menjadi lebih Interaktif.
Untuk menambahkan Script javascript pada dokumen HTML, kita
dapat menggunakan tag <script> dan diletakkan di dalam tag <head> atau di
area manapun di dalam tag <body>.
<head>
<title>Javascript</title>
<script type=”text/javascript”>
... Script javascript ditulis disini ...
</script>
</head>
Mr akan memberikan contoh sederhana dari javascript ini, buatlah file
HTML baru dengan nama “latihan_javascript.html”, kemudian tambahkan
script berikut :
<head>
<title>Javascript</title>
alert(“Hello Mr. I am Javascript”);
</script>
</head>
Script diatas akan menampilkan MessageBox dengan teks “Hello Mr. I
am Javascript” ketika file HTML dibuka.
93
Gambar 21. 1 Kotak pesan dengan javascript
Berikut ini contoh lain dari penggunaan Javascript yang bisa kita lihat
dalam file HTML :
Gambar 21. 2 Contoh lain dengan javascript

Penjelasan Script :
Pertama, kita membuat sebuah variabel nama (variabel adalah sebuah
container atau wadah untuk menyimpan nilai sementara). Kemudian kita
meminta Javascript untuk menanyakan nama pengunjung, lalu pengunjung
dapat menuliskan namanya, kemudian nama akan disimpan Javascript di
dalam variabel nama.
Selanjutnya, kita memilih apakah variabel nama terisi (pengunjung
menuliskan nama), maka akan ditampilkan MessageBox dengan teks “Apa
kabar (Nama yang ditulis) ! Saya Javascript, senang berkenalan dengan
kamu”.
Jika pengunjung tidak menuliskan nama (langsung klik ok atau
cancel), maka akan ditampilkan MessageBox dengan teks “Hmmm
sepertinya Anda tidak mau berkenalan dengan Saya”.
94
Gambar 21. 3 Contoh penggunaan if-else (kondisi)
Script diatas adalah contoh sederhana dari penggunaan Javascript
yang ditulis didalam tag <head>. Contoh berikutnya script yang ditulis pada
bagian tag <body>.
<body>
document.write(“<h1>Hello Mr. Dimas</h1>”);
</script>
</body>
21.2. Fungsi pada Javascript

1. Penulisan javascript didalam tag <head>.
Fungsi akan dipanggil ketika tombol diklik.
Gambar 21. 4 Contoh fungsi dalam tag <head>
95
2. Penulisan javascript didalam tag <body>.
Fungsi akan dipanggil ketika tombol diklik.
Gambar 21. 5 Contoh fungsi dalam tag <body>
21.3. Komentar pada Javascript

Komentar pada suatu script tidak akan dikerjakan oleh Javascript.
Komentar ditambahkan pada script untuk memberikan penjelasan script atau
membuat script tidak dijalankan. Untuk memberikan komentar dapat
menggunakan tanda // untuk satu baris atau /* ... */ untuk banyak baris.
Contoh komentar satu baris (single line) :
// Untuk menuliskan Heading
document.getElementById(“myH1”).innerHTML=”Sela
mat Datang di website Saya”;
// Untuk menuliskan Paragraf
document.getElementById(“myP”).innerHTML=”Ini
adalah paragraf saya”;
Contoh komentar banyak baris (Multi line) :
/*
Kode berikut akan ditulis ke heading dan paragraf. Dan
akan menampilkan halaman utama.
*/
document.getElementById(“myH1”).innerHTML=”Sela
mat Datang di website Saya”;
document.getElementById(“myP”).innerHTML=”Ini
adalah paragraf saya”;
96
21.4. jQuery
jQuery adalah library atau sekumpulan kode javascript siap pakai
untuk memanipulasi elemen HTML dengan mudah dan cepat. Kita dapat
mendownload jQuery di situs resminya http://www.jquery.com.
Untuk menggunakan jQuery, kita diharuskan menyertakan jQuery
menggunakan tag <script>.
<script type=”text/javascript” src=”jquery.js”></script>
Berikut ini adalah contoh sederhana penggunaan jQuery untuk
memanipulasi HTML, buka kembali file “latihan_javascript.html”
tambahkan script berikut :
<script type=”text/javascript” src=”jquery.js”></script>
<script>
$(document).ready(function(){
$(“body”).CSS(‘background-color’,’red’);
});
</script>
Penjelasan Script :
$(document).ready(function(){
.....
});
Block kode diatas memastikan script dijalankan setelah file HTML
selesai dimuat.
$(body).CSS(‘background-color’,’red’);
Script diatas akan merubah warna body dengan menambahkan atribut
style yang memiliki nilai “background-color:red”.
21.5. jQuery Plugin

jQuery Plugin adalah plugin/suplemen untuk menambahkan
fungsionalitas dari jQuery. Plugin ini biasanya dibuat untuk memudahkan
pengguna dalam membuat suatu aplikasi. Salah satunya adalah membuat
Slider, Slideshow dan lainnya.
97
Kita tinggal memanggil library plugin jquery tersebut seperti kita
memanggil file javascript, selanjutnya tinggal memanggil fungsi yang
disediakan oleh library tersebut.
Sebagai contoh, ada sebuah plugin jQuery Slider dan kita akan
menerapkannya pada elemen HTML yang memiliki id slider. Plugin
tersebut menyediakan fungsi “slider()” untuk membuat markup HTML kita
menjadi sebuah slider, jadi kita tinggal mengetikkan script :
$(“#slider”).slider();
Kita dapat mencari plugin-plugin jQuery yang dibutuhkan di internet
atau mencari sebagian plugin jquery di halaman web
http://www.jquery4u.com/plugins/.
Gambar 21. 6 jQuery4u telah merangkum sebagian plugin jQuery dari A-Z
98
BAB 22
TIPE DATA DAN VARIABEL JAVASCRIPT
Umumnya bahasa pemrograman, javascript memiliki tipe data dan

variabel. Variabel pada javascript adalah sebuah kotak atau wadah yang
digunakan untuk menyimpan informasi yang senantiasa dapat diload. Sedangkan
tipe data terkait dengan jenis data atau nilai yang disimpan dalam variabel.
22.1. Deklarasi Variabel

Dalam Javascript, setiap kali akan menggunakan variabel, langkah
pertama yang harus dilakukan adalah mendeklarasikan keberadaan nama
variabel. Hal ini perlu dilakukan, dengan adanya deklarasi nama variabel,
komputer akan menyediakan beberapa bagian memori untuk menyimpan
nilai pada nama variabel tersebut. Untuk mendeklarasikan variabel
digunakan kata var. Dalam mendeklarasikan nama variabel ada beberapa
aturan yang harus diperhatikan, yaitu :
1. Nama variabel harus dimulai dengan huruf.
2. Nama variabel juga dapat dimulai dengan simbol $ dan _ (underscore).
3. Nama variabel adalah case sensitive (memperhatikan besar dan kecilnya
huruf).
4. Jangan menggunakan Reserved Word atau kata tercadang sebagai nama
variabel. Kata tercadang adalah kata yang sudah built in dalam
javascript yang sudah bermakna khusus. Penggunaan kata tercadang ini
akan mengakibatkan error.
Contoh 1 :
var namakota;
namakota=”Solo”;
atau, Contoh 2 :
var namakota=”Solo”;
atau, Contoh 3 :
var namakota=”Solo”, provinsi=”Jawa Tengah”,
kode=”57137”;
99
Pada contoh 1 diatas, dideklarasikan variabel namakota. Pada awal
pendeklarasian, nilai dari variabel namakota adalah null (kosong).
Kemudian variabel namakota diberi nilai Solo. Untuk memberikan nilai
pada suatu variabel digunakan tanda petik dua (“) apabila tipe datanya
berupa string.
Pada contoh 2 memberikan variabel namakota yang sekaligus
memberi nilai pada variabel namakota.
Pada contoh 3 diatas mendeklarasikan beberapa variabel sekaligus.
Untuk mendeklarasikan beberapa variabel digunakan tanda koma (,) untuk
memisahkan variabel satu dengan yang lainnya.
22.2. Tipe Data

Tipe data pada javascript meliputi : String, Integer, Float, Array,
Object dan Booleans. Tipe data string adalah data yang memuat karakter,
misalnya “Solo”. String adalah sebarang text yang ada didalam tanda petik,
baik petik ganda (“) maupun petik tunggal (‘). Tipe data integer dan float
merupakan tipe data numerik. Dalam mendeklarasikan tipe data object
digunakan tanda kurung kurawal ({...}). Setiap property dalam tipe data
object dipisahkan dengan tanda koma (,). Tipe data Booleans terdiri dari dua
nilai, yaitu true atau false. Berikut beberapa contoh penggunaan tipe data
pada javascript.
Contoh 4 :
var namakota=”Solo”; // tipe data string
var provinsi=’Jawa Tengah’; // tipe data string
var x1=34; // tipe data integer
var x2=3.14; // tipe data float
var y=123e4; // tipe data integer
var x=true; // tipe data boolean
Contoh 5 :
// berikut beberapa cara mendeklarasikan Array
var mobil=new Array();
mobil[0]=”Toyota”;
mobil[1]=”Daihatsu”;
100
mobil[2]=”Honda”;
var bulan=new Array(“Januari”,”Februari”,”Maret”,”April”);
var sekolah=[“TK”,”SD”,”SMP”,”SMA”];
Contoh 6 :
var siswa={nama:”Boby”, sex:”Laki-laki”, id:”1234”};
Pada contoh diatas dideklarasikan beberapa variabel dengan berbagai
tipe data. Pada contoh 4 diatas dideklarasikan variabel dengan tipe data
string, integer, float dan boolean. Contoh 5 mendeklarasikan tipe data array
dan beberapa cara penulisannya. Contoh 6 pendeklarasian variabel dengan
tipe data object.
101
BAB 23
OPERATOR PADA JAVASCRIPT
23.1. Operator Aritmatika

Operator aritmatika digunakan untuk melakukan operasi aritmatika
antara variabel dan atau nilai. Misal diberikan y = 5, tabel berikut
menjelaskan tentang operator aritmatika.
Operator Deskripsi Contoh Nilai x Nilai y
+ Penjumlahan x=y+2 7 5
- Pengurangan x=y-2 3 5
* Perkalian x=y*2 10 5
/ Pembagian x=y/2 2.5 5
% Modulus (sisa bagi) x=y%2 1 5
x=++y 6 6
++ Increment
x=y++ 5 6
x=--y 4 4
-- Decrement
x=y-- 5 4
23.2. Operator Pemberian Nilai

Operator pemberian nilai digunakan untuk memberikan nilai pada
variabel. Dalam contoh berikut, diberikan x = 10 dan y = 5. Tabel berikut
menjelaskan operator pemberian nilai.
Operator Contoh Sama dengan Hasil
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
102
23.3. Operator + pada tipe data String
Operator + juga dapat digunakan untuk menambahkan variabel bertipe
data string atau nilai text.
Contoh 1 :
// untuk menambahkan dua atau lebih variabel tipe
string, gunakan operator +
txt1=”Selamat Datang”;
txt2=”Di Program Unggulan ICT”;
txt3=txt1+” “+txt2;
Hasilnya adalah :
Selamat Datang Di Program Unggulan ICT
Contoh 2 :
// menambahkan string dan bilangan
x=5+5;
y=”5”+5;
z=”angka ”+5;
Hasilnya adalah :
10
55
angka 5
23.4. Operator Pembanding

Operator pembanding digunakan dalam pernyataan logika untuk
menentukan kesamaan atau perbedaan diantara nilai-nilai. Diberikan nilai x
= 5, tabel dibawah ini menjelaskan operator pembanding.
Operator Deskripsi Pembanding Balikan
sama dengan x==8 false
==
x==5 true
sama persis dengan (nilai dan x===”5” false
===
tipe data) x===5 true
!= tidak sama dengan x!=8 true
103
tidak sama dengan (nilai atau x!==”5” true
!==
tipe data) x!==5 false
> lebih besar dari x>8 false
< lebih kecil dari x<8 true
> lebih besar sama dengan x>=8 false
< lebih kecil sama dengan x<=8 true
23.5. Operator Logika

Operator logika digunakan untuk menunjukkan nilai kebenaran antara
beberapa variabel atau beberapa nilai. Diberikan nilai x = 6 dan y = 3, tabel
dibawah menjelaskan operator logika.
&& Dan (x<10 && y>1) true
|| Atau (x==5 || y==5) false
! Negasi/Ingkaran !(x==y) true
23.6. Operator Bersyarat

Javascript juga memuat operator bersyarat yang memberikan suatu
nilai ke suatu variabel berdasarkan kondisi yang sama.
Syntaxnya : NamaVariabel=(syarat)?nilai1: nilai2
Contoh 3 :
Gambar 23. 1 Coding operator bersyarat
104
BAB 24
PRAKTIKUM JAVASCRIPT
24.1. Latihan 1. My First Javascript
Gambar 24. 1 Coding Latihan 1. My First Javascript
24.2. Latihan 2. Variabel
Gambar 24. 2 Coding Latihan 2. Variabel
105
24.3. Latihan 3. Operator Aritmatika1
Gambar 24. 3 Coding Latihan 3. Operator Aritmatika1
106
24.6. Latihan 6. Mengkonversi Tipe Data
Gambar 24. 6 Coding Latihan 6. KonversiTipeData
24.7. Latihan 7. Tipe Data Array
Gambar 24. 7 Coding Latihan 7. TipeDataArray
24.8. Latihan 8. Statement
Gambar 24. 8 Coding Latihan 8. Statement
107
BAB 25
FUNGSI DALAM JAVASCRIPT
25.1. Fungsi pada Javascript

Fungsi adalah suatu blok kode yang dijalankan ketika ada script yang
memanggil fungsi tersebut. Fungsi merupakan bagian sub program yang
melaksanakan suatu tugas tertentu ketika diperlukan. Fungsi ini dapat
dipanggil dengan cara menuliskan nama fungsinya saja dan disertai dengan
parameter apabila ada. Jadi parameter dalam suatu fungsi bersifat opsional.
Suatu fungsi ditulis sebagai blok kode dengan syntax sebagai berikut :
function namafungsi (parameter)
{
Beberapa code untuk dijalankan
}
Contoh 1 :
Gambar 25. 1 Contoh coding fungsi dalam Javascript

Proses pada script diatas sebagai berikut :
Mula-mula user diminta memasukkan harga awal, harga ini
dimasukkan ke dalam variabel harga, misalnya 1000. Selanjutnya script
mencetak harga setelah didiskon. Dalam hal ini, script akan memanggil
function diskon(harga) atau diskon(1000). Karena function diskon memiliki
parameter hargaAwal, maka nilai dari hargaAwal ini sama dengan nilai dari
variabel harga, pada contoh ini adalah bernilai 1000. Selanjutnya akan
108
dihitung nilai diskon yaitu 0.5 * 1000 = 500 dan hargaDiskon yaitu 1000 –
500 = 500.
Perintah return hargaDiskon, artinya akan mengembalikan nilai
hargaDiskon(500) ke function yang memanggilnya, yaitu diskon(harga).
Suatu function tidak harus terdapat return value. Perhatikan contoh
berikut ini :
Contoh 2 :
Gambar 25. 2 Contoh coding fungsi dalam Javascript tanpa return
109
BAB 26
PERCABANGAN DALAM JAVASCRIPT
Percabangan atau pernyataan bersyarat digunakan untuk menampilkan

aksi yang berbeda berdasarkan kondisi yang berbeda. Percabangan dalam
javascript antara lain :
1. Pernyataan if
2. Pernyataan if ... else ...
3. Pernyataan if ... else if ...
4. Pernyataan Switch
26.1. Pernyataan if
Digunakan untuk mengeksekusi code apabila syarat yang ditentukan
terpenuhi (bernilai benar). Syntaxnya seperti berikut :
if (syarat)
{
Kode yang akan dieksekusi apabila syarat dipenuhi
}
Contoh 1 :
Gambar 26. 1 Coding percabangan if
26.2. Pernyataan if ... else ...

Digunakan untuk mengeksekusi beberapa kode apabila syarat yang
ditentukan terpenuhi dan untuk kode apabila syarat tidak terpenuhi.
Syntaxnya seperti berikut :
110
if (syarat)
{
Kode yang dieksekusi apabila syarat dipenuhi
}
else
{
Kode yang dieksekusi apabila syarat tidak dipenuhi
}
Contoh 2 :
Gambar 26. 2 Coding percabangan if ... else ...
26.3. Pernyataan if ... else if ... else ...

Digunakan untuk mengeksekusi satu dari beberapa kode apabila syarat
yang ditentukan terpenuhi dan untuk kode apabila syarat tidak dipenuhi.
Syntaxnya seperti berikut :
if (syarat 1)
{
Kode yang dieksekusi apabila syarat 1 dipenuhi
}
else if (syarat 2)
{
Kode yang dieksekusi apabila syarat 2 dipenuhi
}
else
111
{
Kode yang dieksekusi apabila syarat 1 dan syarat 2
tidak dipenuhi
}
Contoh 3 :
Gambar 26. 3 Coding percabangan if ... else if ... else ...
26.4. Pernyataan Switch

Pernyataan switch memiliki fungsi yang sama dengan pernyataan if ...
else if ... else. Syntaxnya seperti berikut :
switch(variabel)
{
case option1 : statement 1; break;
...
...
...
default : statement x; break;
}
Proses dari switch diatas adalah melakukan cek pada value variabel.
Apabila valuenya sama dengan option1 maka statement yang dilakukan
adalah statement 1. Apabila valuenya sama dengan option2 maka statement
112
2 yang dijalankan, begitu seterusnya. Namun apabila tidak ada value yang
sama, maka statement x lah yang dijalankan.
Tipe data dari variabel yang akan dicek haruslah ordinal, misalkan
integer. Dalam hal ini tipe data riil tidak dapat digunakan. Untuk
memastikan bahwa nilai yang akan dicek pada variabel adalah bertipe
integer, sebaiknya gunakan perintah parseInt().
Contoh 4 :
Gambar 26. 4 Coding percabangan switch

Contoh 5 :
Gambar 26. 5 Coding percabangan switch hari
113
BAB 27
PERULANGAN DALAM JAVASCRIPT
Perulangan adalah suatu blok perintah atau kode yang diulang selama
syarat bernilai true. Dalam javascript, perulangan ini dapat dinyatakan dalam 2
bentuk, yaitu dengan For dan While.
27.1. Perulangan FOR

Perulangan for sering digunakan untuk membuat perulangan dengan
jumlah perulangan telah diketahui secara pasti. Syntaxnya seperti berikut :
for (statement 1; statement 2; statement 3)
{
Kode yang dieksekusi apabila syarat dipenuhi
}
Keterangan :
Statement 1 akan dieksekusi sebelum perulangan dimulai.
Statement 2 mendefinisikan kondisi untuk menjalankan perulangan.
Statement 3 dieksekusi setiap kali kode blok selesai dieksekusi.
Contoh 1 :
Gambar 27. 1 Coding perulangan for increment
114
Contoh 2 :
Gambar 27. 2 Coding perulangan for decrement

Dari contoh 1 dan contoh 2 diatas, dapat disimpulan bahwa
perulangan tidak selalu dalam betuk increment, akan tetapi juga dapat dalam
bentuk decrement. Selain itu kenaikan atau penurunannya tidak selalu naik 1
atau turun 1. Perhatikan contoh berikut ini :
Contoh 3 :
Gambar 27. 3 Coding perulangan for lainnya
27.2. Perulangan While

Pada prinsipnya bentuk perulangan while adalah mirip dengan
perulangan for. Secara umum syntak dari perulangan while sebagai berikut :
statement 1;
while(statement 2)
{
Kode yang dieksekusi apabila syarat dipenuhi;
statement 3;
}
Dalam sintak diatas, bagian statement akan terus diulang selama
syarat bernilai true.
115
Sebagai contoh, perhatikan statement for dan while berikut. Kedua
statement adalah ekuivalen atau sama (perhatikan statement yang dikasih
warna).
for(counter=1; counter<=5; counter++)
{
document.write(“Hello Mr. Dimas <br>”);
}
________________________________________________________
counter = 1;
while(counter<=5)
{
document.write(“Hello Mr. Epin <br>”);
counter++;
}
Meskipun semua statement for dapat juga dinyatakan sebagai while,
namun tidak berlaku sebaliknya. Tidak semua statement while dapat
dinyatakan dalam for. Inilah kelebihan perulangan while.
Kelebihan while dibandingkan for adalah bahwa while dapat
digunakan apabila jumlah perulangan tidak diketahui. Sedangkan untuk for
harus diketahui jumlah perulangannya.
Sebagai contoh perumpamaan, ada statement seperti ini : “Saya akan
terus makan selama saya masih lapar”. Statement tersebut adalah juga
termasuk konsep perulangan dalam kehidupan sehari-hari. Dalam hal ini,
jumlah berapa kali harus makan tidak diketahui. Melainkan hanya syarat
makannya saja yang diketahui, yaitu selama masih lapar. Perhatikan contoh
berikut ini, script akan terus meminta user untuk mengisikan suatu angka
selama yang dimasukkan bukan angka 5.
116
Gambar 27. 4 Coding perulangan while
Perhatikan syarat (angka != 5) pada script diatas. Syarat tersebut
bermakna, selama nilai angka tidak sama dengan 5, maka user akan selalu
diminta memasukkan angka. Sehingga dalam kasus ini tidak diketahui
berapa jumlah perulangan yang harus dilakukan, namun perulangannya
tergantung dari syarat.
117
BAB 28
PEMROSESAN FORM
Pada bagian ini akan dijelaskan bagaimana memproses suatu input data
yang berasal dari komponen form, seperti textbox, textarea, combo box, radio,
button dan lainnya. Pada dasarnya untuk semua tag komponen form, disiapkan
dalam tag form.
28.1. Form
Tag form dalam HTML memiliki syntax seperti berikut :
<form name=”namaform”>
...
...
...
</form>
Contoh 1 :
<form name=”coba_form”>
<input type=”text” name=”edit1”>
<input type=”text” name=”edit2”>
...
...
</form>
Untuk membaca value yang diinputkan melalui komponen dalam form
menggunakan javascript menggunakan object document dengan syntax
berikut :
document.namaform.namakomponen.value;
Sebagai contoh, script berikut ini adalah script untuk membaca nilai
yang diinputkan user melalui komponen text kemudian menampilkan
sebagai alert.
118
Contoh 1 :
Gambar 28. 1 Contoh coding membaca nilai input dari form

Apabila script diatas dijalankan, maka akan muncul tampilan seperti
berikut :
Gambar 28. 2 Hasil coding membaca input
Gambar 28. 3 Hasil coding input form tampil alert
119
Selanjutnya, perhatikan contoh dibawah ini. Kita akan membuat
semacam kalkulator sederhana yang mengoperasikan penjumlahan,
pengurangan, perkalian dan pembagian dari dua bilangan.
Contoh 2 :
Gambar 28. 4 Coding kalkulator sederhana

Hasilnya seperti berikut :
Gambar 28. 5 Hasil coding kalkulator sederhana
120
BAB 29
EVENT HANDLER
Pada bab sebelumnya kita telah memberikan beberapa contoh script yang
telah menggunakan event handler onclick() yaitu apabila suatu elemen diklik
maka akan terjadi suatu efek/action tertentu. Apakah ada event yang lainnya ?
Jawabannya jelas ada, berikut beberapa event yang dapat kita gunakan.
29.1. Mouse Events

Event Description
onclick Muncul ketika user meng-klik elemen/komponen
Muncul ketika user meng-klik ganda pada
ondbclick
elemen/komponen
onmousedown Muncul ketika user menekan pada mouse
onmousemove Muncul ketika user menggerakkan pointer mouse
Muncul ketika user menggerakkan pointer mouse
onmouseout
keluar dari elemen/komponen control
Muncul ketika user menggerakkan pointer mouse
onmouseover
melalui/melewati elemen
onmouseup Muncul ketika user melepas tombol mouse
29.2. Keyboard Events

Event Description
Muncul ketika user menekan suatu tombol pada
onkeydown
keyboard
Muncul ketika user menekan suatu tombol keyboard
onkeypress
dan akan terus muncul sampai user melepas tombol
onkeyup Muncul ketika user melepas tombol yang telah ditekan
121
29.3. HTML Control Events
Event Description
onblur Muncul ketika HTML control kehilangan focus
Muncul ketika HTML control kehilangan focus dan
onchange
nilainya berubah
onfocus Muncul ketika HTML control sedang focus
onreset Muncul ketika user menekan tombol reset dalam form
onselect Muncul ketika user memilih teks pada HTML control
onsubmit Muncul ketika user melakukan submit form
29.4. Window Events

Event Description
onload Muncul ketika window telah selesai loading
onresize Muncul ketika user mengubah ukuran window
onunload Muncul ketika user keluar dari halaman/dokumen web
Contoh 1 :
Gambar 29. 1 Coding contoh event handler
122
BAB 30
PROJECT JAVASCRIPT
Untuk project Javascript, kita akan membuat sebuah halaman web static.
Dimana halaman web yang akan kita buat nantinya adalah web edukatif untuk
pembelajaran mengenal tata surya. Tampilannya seperti berikut :
Gambar 30. 1 Halaman index.html project Javascript
30.1. Langkah-langkah pembuatan project

1. Pertama, silahkan download asetnya terlebih dahulu pada link berikut :
https://bit.ly/AsetProjectTataSurya2022.
Gambar 30. 2 Download aset project tata surya
123
2. Setelah download, lakukan ekstraksi pada file aset tersebut, sehingga
kita akan mendapatkan tiga folder bernama audio, gif dan img.
Gambar 30. 3 Folder aset audio, gif dan img

3. Berikutnya, buatlah tiga file dalam satu folder dengan hasil ekstraksi
aset sebelumnya dengan nama masing-masing seperti berikut :
• index.html
• style.css
• script.js
Gambar 30. 4 Posisi file index.html, style.css dan script.js
30.2. Menulis kode file index.html

1. Isikan kode file index.html seperti berikut :
index.html
Gambar 30. 5 Kode HTML file index.html baris 1-21
124
125
126
30.3. Menulis kode file style.css

1. Isikan kode file style.css seperti berikut :
style.css
127
Gambar 30. 9 Kode HTML file style.css baris 1-66
128
Gambar 30. 10 Kode HTML file style.css baris 67-130
129
30.4. Menulis kode file script.js
1. Isikan kode file script.js seperti berikut :
script.js
Gambar 30. 11 Kode HTML file script.js baris 1-82
130
131
132
133
REFERENSI
[1]. https://www.w3schools.com/
[2]. https://www.petanikode.com/
[3]. Ariona, Rian. Belajar HTML dan CSS. Diakses melalui www.ariona.net
[4]. Ari, Rosihan. Dasar Javascript. Diakses melalui www.rosihanari.net
[5]. Goodman, Danny with Michael Morrison. Javascript 5 Bible. Wiley
Pubhlising, Inc.
[6]. HTML 5 cheat. Diakses melalui http://www.veign.com tahun 2009.
[7]. Cascading Style Sheets (CSS 3) cheat. Diakses melalui
http://www.veign.com tahun 2009.
[8]. https://htmlcheatsheet.com/
[9]. https://htmlcheatsheet.com/css/
[10]. https://htmlcheatsheet.com/js/
134

Draft Modul Level 8 ICT Gasal 2022 - Fix Insya Allah

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Draft Modul Level 8 ICT Gasal 2022 - Fix Insya Allah

Diunggah oleh

Hak Cipta:

Format Tersedia

DAFTAR ISI

DAFTAR ISI ............................................................................................................ i

Gambar 1. 1 Analogi HTML, CSS dan JS .............................................................. 1

Gambar 2. 1 Save file HTML ................................................................................. 8

Gambar 3. 1 Penulisan tag pembuka dan tag penutup .......................................... 13

Gambar 4. 1 Lokasi gambar dan file HTML......................................................... 18

Gambar 5. 1 Penempatan file pada folder yang sama ........................................... 21

Gambar 7. 1 Hasil Ordered List ............................................................................ 26

Gambar 8. 1 Contoh Label pada form ................................................................... 30

Gambar 9. 1 Kode menyatukan kolom dan baris dalam Tabel ............................. 37

Gambar 10. 1 Kode penggunaan tag Div .............................................................. 40

Gambar 11. 1 Kode elemen semantik dengan Div ................................................ 44

Gambar 12. 1 Struktur kode tag <video> .............................................................. 50

Gambar 13. 1 Penulisan kode CSS ....................................................................... 55

Gambar 14. 1 Kode CSS Margin pada .box .......................................................... 60

Gambar 16. 1 Kode Background ........................................................................... 68

Gambar 17. 1 Kode file floating1.html ................................................................. 71

Gambar 18. 1 Box static tidak dapat ditentukan posisinya ................................... 77

Gambar 19. 1 Pseudo-Class :hover ....................................................................... 83

Gambar 20. 1 Halaman index.html project HTML dan CSS ................................ 86

Gambar 21. 1 Kotak pesan dengan javascript ....................................................... 94

Gambar 23. 1 Coding operator bersyarat ............................................................ 104

Gambar 24. 1 Coding Latihan 1. My First Javascript ......................................... 105

Gambar 25. 1 Contoh coding fungsi dalam Javascript ....................................... 108

Gambar 27. 1 Coding perulangan for increment ................................................. 114

Gambar 29. 1 Coding contoh event handler........................................................ 122

Gambar 30. 1 Halaman index.html project Javascript ........................................ 123

PENGENALAN DASAR HTML

1.1. Apa itu HTML

Gambar 1. 1 Analogi HTML, CSS dan JS

1.2. Sejarah HTML

Gambar 1. 2 Tim Berners-Lee

Gambar 1. 3 Tim Berners-Lee (kiri) dan Robert Cailliau (kanan)

1.3. Perkembangan HTML

1.4. Persiapan untuk Belajar HTML

1.4.1. Web Browser

Gambar 1. 4 Web Browser

1.4.2. Text Editor

Itulah aplikasi-aplikasi yang diperlukan untuk mempelajari HTML

MEMBUAT DOKUMEN HTML

2.1. Membuat Website dalam 1 Menit

Gambar 2. 1 Save file HTML

Gambar 2. 2 Tampilan file HTML di Web Browser

2.2.1. Extensi file HTML

2.2.2. Nama khusus untuk HomePage

2.2.3. Hal-hal yang perlu dihindari

Gambar 2. 3 Tampilan URL menggunakan spasi

2.3. Struktur dasar HTML

Gambar 2. 4 Struktur dasar HTML

2.3.1. Bagian Deklarasi

Gambar 2. 5 Validator file HTML

Pada bagian HEAD, biasanya digunakan untuk menuliskan tag-

2.3.3. Bagian BODY

Disinilah nanti kita akan banyak menuliskan konten dengan

MENGENAL TAG, ELEMEN DAN ATRIBUT

3.1. Apa itu Tag

tag pembuka tag penutup

atribut tag nilai atribut

Gambar 3. 1 Penulisan tag pembuka dan tag penutup

3.2. Cara menulis Tag HTML yang Benar

Gambar 3. 2 Penulisan tag bertumpuk

3.3. Apa itu Elemen

Gambar 3. 3 Elemen HTML