PEMROGRAMAN WEB

UNTUK PEMULA HINGGA MAHIR

Muhammad Zen, S.T., M. Kom

Dr. Sayuti Rahman
Haida Dafitri, S.T., [Link]
Risko Liza, S.T., [Link]
Rachmat Aulia, [Link]., [Link]
Nurjamiyah, [Link]., [Link]

Tahta Media Group

ii
iii
iv
 PEMROGRAMAN WEB
UNTUK PEMULA HINGGA MAHIR

Penulis:
Muhammad Zen, S.T., M. Kom
Dr. Sayuti Rahman
Haida Dafitri, S.T., [Link]
Risko Liza, S.T., [Link]
Rachmat Aulia, [Link]., [Link]
Nurjamiyah, [Link]., [Link]
Desain Cover:
Tahta Media

Editor:
Tahta Media

Proofreader:
Tahta Media

Ukuran:
xv, 156 , Uk: 15,5 x 23 cm

ISBN: 978-623-8070-19-0

Cetakan Pertama:
November 2022

Hak Cipta 2022, Pada Penulis

Isi diluar tanggung jawab percetakan
Copyright © 2022 by Tahta Media Group
All Right Reserved

Hak cipta dilindungi undang-undang

Dilarang keras menerjemahkan, memfotokopi, atau
memperbanyak sebagian atau seluruh isi buku ini
tanpa izin tertulis dari Penerbit.

PENERBIT TAHTA MEDIA GROUP

(Grup Penerbitan CV TAHTA MEDIA GROUP)
Anggota IKAPI (216/JTE/2021)

v
 PRAKATA

Assalamualaikum wr. wb.

Segala puji bagi Allah SWT. yang telah memberikan rahmat-Nya yang
tak terhingga, sehingga buku ini dapat kami selesaikan. Adapun buku ini
berjudul PEMROGRAMAN WEB UNTUK PEMULA HINGGA
MAHIR. Buku ini kami persembahkan untuk siapa saja yang ingin belajar
pemrograman web dari dasar. Harapan kami untuk para pembaca adalah dapat
mendalami pemrograman web dengan mudah melalui buku ini.
Pemrograman web merupakan salah satu pemrograman dalam bidang
komputer yang berkembang pesat seiring kemajuan internet. Sehingga banyak
dari masyarakat umum maupun pelajar atau mahasiswa mempelajarinya.
Buku ini berisi materi berkaitan dengan algoritma seperti kondisi, perulangan
dan array. Buku ini juga memperkenalkan beberapa bahasa seperti HTML,
CSS, PHP dan SQL kepada pemula.
Banyak kode yang perlu dipelajari untuk membangun sebuah aplikasi
berbasis web, namun semua itu biasanya tidak dikerjaan seorang diri. Apalagi
banyak kerangka kerja yang memudahkan kita mengembangkan aplikasi.
Dalam pembuatan alikasi berbasis web, proses pekerjaan minimal terbagi dua
yaitu tampilan dan logika atau program. Untuk yang ingin belajar membuat
tampilan dapat memperdalam keahlian desain tampilan halaman web yaitu
mempelajari HTML dan CSS. Sedangkan yang ingin mempelajari logika atau
program dapat memperdalam PHP dan basis data.
HTML adalah salah satu bahasa yang wajib dipelajari oleh pemula. Buku
ini menerangkan fungsi HTML untuk mebuat tampilan halaman web.
Tampilan seperti isi halaman maupun layout. Setiap materi sudah disusun
sedemikan rupa sehingga mudah dipahami bagi pemula.
Setelah mempelajari HTML, pembaca akan diajak memahami
pemrograman web secara menyeluruh. PHP merupakan bahasa pemrograman
yang berjalan di sisi server. Bahasa pemrograman ini sangat populer sehingga
mudah untuk mencari informasi seperti penanggulangan kesalahan. Dalam
materi PHP penulis menyajikan materi dari dasar, sampai kebutuhan-

vi
kebutuhan algoritma seperti array dan lainnya. Buku ini juga membahas
tentang session dan cookies.
Hal yang paling penting dalam membuat aplikasi sistem informasi adalah
manipulasi basis data yang dikenal dengan Create, Read, Update, Delete
(CRUD). Pada buku ini ada contoh kasus aplikasi sederhana yang
mengandung manipulasi basis data CRUD.
Materi terakhir di dalam buku ini adalah CSS sebagai cara untuk
memperindah tampilan halaman web. Pada buku ini dibahas cara menuliskan
kode CSS diantaranya inline CSS, internal CSS, dan eksternal CSS.
Terima kasih kepada Universitas Pembangunan Panca Budi Medan yang
telah mendukung secara moril maupun materil. Terima kasih juga kepada
rekan-rekan penulis dan keluarga besar kami yang telah memberikan
dukungannya baik materil maupun moril. Akhir kata, kami ucapkan terima
kasih kepada semua pihak yang tidak dapat kami sebutkan satu persatu dan
telah membantu sampai terbitnya buku ini.

Penulis

vii
 DAFTAR ISI

Prakata ......................................................................................................... vi
Daftar Isi ....................................................................................................viii
BAB 1 HTML ................................................................................................ 1
1.1 Heading ........................................................................................... 2
1.2 Paragraf ........................................................................................... 3
1.3 Format Teks .................................................................................... 4
1.3.1 Tebal ............................................................................... 5
1.3.2 Miring ............................................................................. 5
1.3.3 Garis Bawah .................................................................... 5
1.3.4 Superscript ...................................................................... 5
1.3.5 Subscript ......................................................................... 5
1.4 Daftar .............................................................................................. 7
1.4.1 Daftar Tidak Berurut ........................................................ 7
1.4.2 Daftar Berurut ................................................................. 8
1.5 Tabel ............................................................................................. 10
1.5.1 Mewarnai Tabel ............................................................. 13
1.5.2 Cellspacing ................................................................... 17
1.5.3 Cellpadding ................................................................... 18
1.6 Atribut ........................................................................................... 20
1.7 Uniform Resource Locator (URL) ................................................ 20
1.7.1 Absolut URL ................................................................. 21
1.7.2 Relatif URL ................................................................... 21
1.8 Hyperlink (link)............................................................................. 21
1.8.1 Link ke Halaman Lain .................................................... 22
1.8.2 Link ke Bagian Halaman ................................................. 26
1.9 Formulir ........................................................................................ 29
1.9.1 Elemen Form ................................................................. 30
BAB 2 PENGENALAN PHP ....................................................................... 36
2.1 Pendahuluan .................................................................................. 36
2.2 Kode Dasar PHP ........................................................................... 36
BAB 3 VARIABEL ...................................................................................... 40

viii
 3.1 Tipe Data String ............................................................................ 41
3.1.1 Jumlah String ................................................................ 42
3.1.2 Membalik String ............................................................ 43
3.1.3 Menggabungkan String .................................................. 44
3.1.4 Huruf Besar (Uppercase) ................................................ 45
3.1.5 Huruf Kecil (Lowercase) ................................................ 46
3.1.6 Memecah String ............................................................. 46
3.1.7 Mengambil Beberapa Karakter Dari Kanan atau Kiri ........ 48
3.2 Tipe Data Integer .......................................................................... 49
3.3 Tipe Data Double .......................................................................... 50
3.4 Tipe Data Boolean ........................................................................ 51
3.5 Tipe Data Array ............................................................................ 51
3.6 Tipe Data Objek ............................................................................ 52
3.7 Tipe Data Null ............................................................................... 53
3.9 Fungsi Untuk Pengecekan Variabel .............................................. 54
BAB 4 OPERATOR PHP ............................................................................ 55
4.1 Operator Aritmatika ...................................................................... 55
4.2 Operator Penugasan ...................................................................... 61
4.3 Operator Bitwise ............................................................................ 67
4.4 Operator Perbandingan ................................................................. 75
4.5 Operator Logika ............................................................................ 78
4.6 Operator Penggabungan String ..................................................... 80
4.7 Operator Increment dan Decrement .............................................. 80
BAB 5 KONDISI ......................................................................................... 82
5.1 If-Else ............................................................................................ 82
5.2 Switch-Case ................................................................................... 85
BAB 6 PERULANGAN ............................................................................... 87
6.1. For................................................................................................. 87
6.2. While ............................................................................................. 91
6.3. Do-While ....................................................................................... 92
BAB 7 ARRAY ............................................................................................ 94
7.1 Deklarasi dan Pengisian Array ...................................................... 94
7.1.1 Cara Mengisi Array Pertama ........................................... 94
7.1.2 Cara Mengisi Array Kedua ............................................. 95

ix
 7.1.3 Cara Mengisi Array Ketiga ............................................. 96
7.2 Mencetak Nilai Array.................................................................... 97
7.2.1 Cara Mencetak Nilai Array Pertama ................................ 97
7.2.2 Cara Mencetak Nilai Array Kedua .................................. 99
7.2.3 Cara Mencetak Nilai Array Ketiga .................................. 99
7.3 Fungsi-Fungsi Pada Array .......................................................... 101
BAB 8 METODE GET DAN POST .......................................................... 102
8.1 Metode GET Pada Form ............................................................. 102
8.2 Metode GET Pada URL .............................................................. 104
8.3 Berpindah Halaman Otomatis ..................................................... 105
8.4 Metode POST Pada Form ........................................................... 106
BAB 9 SESSION DAN COOKIES ............................................................ 109
9.1 SESSION ..................................................................................... 109
9.1.1 Cara Membuat Session ................................................. 109
9.1.2 Cara Menggunakan Session .......................................... 109
9.1.3 Cara Menghapus Session .............................................. 110
9.1.4 Contoh Kasus Session .................................................. 110
9.2 Cookies ........................................................................................ 113
BAB 10 APLIKASI CRUD........................................................................ 116
10.1 MySQL ........................................................................................ 116
10.1.1 Membuat Database ...................................................... 116
10.1.2 Membuat Tabel ............................................................ 116
10.1.3 Menambahkan Data (Insert) ......................................... 117
10.2 Membaca Data (Read) ................................................................ 117
10.3 Mengubah Data (Update)............................................................ 117
10.4 Menghapus Data ......................................................................... 118
10.5 Fungsi-Fungsi Mysql Dalam PHP .............................................. 118
10.6 File Koneksi ................................................................................ 119
10.7 File Tambah Data (Create) ......................................................... 120
10.8 Membaca dan Menampilkan Data (Read)................................... 123
10.9 Mengubah Data (Update)............................................................ 126
10.10 Menghapus Data (Delete) ........................................................... 128
BAB 11 INCLUDE DAN REQUIRE ........................................................ 130
11.1 Include......................................................................................... 130

x
 11.2 Include_Once .............................................................................. 132
11.3 Require ........................................................................................ 134
11.4 Require_once .............................................................................. 135
BAB 12 UPLOAD FILE ............................................................................ 136
12.1 Upload File ................................................................................. 136
12.2 Pengecekan File Sebelum Di-upload .......................................... 138
12.2.1 Pengecekan Format File ............................................... 139
12.2.2 Pengecekan Ukuran File ............................................... 139
BAB 13 PENGENALAN CSS ................................................................... 140
13.1 Pengenalan CSS .......................................................................... 140
13.2 Bagian-bagian CSS ..................................................................... 140
13.2.1 Selector ....................................................................... 141
13.2.2 Propery dan Value ....................................................... 142
13.3 Cara Penulisan CSS .................................................................... 143
13.3.1 Inline CSS ................................................................... 143
13.3.2 Internal CSS ................................................................ 144
13.3.3 Eksternal CSS .............................................................. 145
13.4 Parent Child dan Decendant ....................................................... 146
13.4.1 Parent Child ................................................................ 146
13.5 Parent Decendant ....................................................................... 148
BAB 14 STYLE TEKS .............................................................................. 150
14.1 Mewarnai Teks ............................................................................ 150
14.2 Jenis Huruf .................................................................................. 151
BIORGRAFI PENULIS ............................................................................. 154

xi
 DAFTAR GAMBAR

Gambar 1. 1. Tampilan Standar Kode HTML ................................................ 2

Gambar 1. 2. Tampilan Heading .................................................................... 3
Gambar 1. 3. Tampilan Paragraf .................................................................... 4
Gambar 1. 4. Tampilan Format Teks .............................................................. 6
Gambar 1. 5. Tampilan Daftar Tidak Berurut ................................................ 8
Gambar 1. 6. Tampilan Daftar Berurut........................................................... 9
Gambar 1. 7. Tabel Tanpa Border ................................................................ 11
Gambar 1. 8. Tabel Menggunakan Border ................................................... 12
Gambar 1. 9. Mewarnai Seluruh Tabel........................................................ 14
Gambar 1. 10. Mewarnai Baris Tabel........................................................... 15
Gambar 1. 11. Mewarnai Sel Tabel .............................................................. 16
Gambar 1. 12. Cellspacing Tabel ................................................................. 18
Gambar 1. 13. Cellspadding Tabel ............................................................... 19
Gambar 1. 14. Link ke Halaman Lain .......................................................... 23
Gambar 1. 15. Halaman Home ..................................................................... 23
Gambar 1. 16. Halaman About ..................................................................... 24
Gambar 1. 17. Halaman Contact .................................................................. 25
Gambar 1. 18. Pertama dijalankan atau Link ke Atas diklik ........................ 28
Gambar 1. 19. Link Home diklik .................................................................. 28
Gambar 1. 20. Link About diklik .................................................................. 29
Gambar 1. 21. Link Contact diklik ............................................................... 29
Gambar 1. 22. Input Text .............................................................................. 30
Gambar 1. 23. Input Number ........................................................................ 30
Gambar 1. 24. Input Password ..................................................................... 30
Gambar 1. 25. Input Email ........................................................................... 31
Gambar 1. 26. Input Date ............................................................................. 31
Gambar 1. 27. Input Time ............................................................................. 31
Gambar 1. 28. Radio ..................................................................................... 32
Gambar 1. 29. Checkbox .............................................................................. 32
Gambar 1. 30. Select ..................................................................................... 33
Gambar 1. 31. Datalist ................................................................................. 33
Gambar 1. 32. Textarea ................................................................................ 34
Gambar 1. 33. Button Submit ....................................................................... 34

xii
Gambar 1. 34. Reset...................................................................................... 34
Gambar 1. 35. Button.................................................................................... 35
Gambar 2. 1. Folder Proyek ......................................................................... 36
Gambar 2. 2. Pengenalan PHP ..................................................................... 38
Gambar 2. 3. Kode Sumber .......................................................................... 38
Gambar 3. 1. Variabel .................................................................................. 40
Gambar 3. 2. Tipe Data String...................................................................... 41
Gambar 3. 3. Jumlah String .......................................................................... 42
Gambar 3. 4. Membalik String ..................................................................... 43
Gambar 3. 5. Menggabungkan String ........................................................... 44
Gambar 3. 6. Huruf Besar............................................................................. 45
Gambar 3. 7. Huruf Kecil ............................................................................. 46
Gambar 3. 8. Memecah String Berdasarkan Karakter .................................. 47
Gambar 3. 9. Memecah String Satu Persatu ................................................. 48
Gambar 3. 10. Mengambil Beberapa Karakter ............................................. 49
Gambar 3. 11. Tipe Data Integer .................................................................. 50
Gambar 3. 12. Tipe Data Double.................................................................. 50
Gambar 3. 13. Tipe Data Boolean ................................................................ 51
Gambar 3. 14. Tipe Data Array .................................................................... 52
Gambar 3. 15. Tipe Data Obyek ................................................................... 53
Gambar 3. 16. Tipe Data Null ...................................................................... 53
Gambar 4. 2. Penjumlahan ........................................................................... 56
Gambar 4. 3. Pengurangan ........................................................................... 57
Gambar 4. 4. Perkalian ................................................................................. 59
Gambar 4. 5. Pembagian .............................................................................. 60
Gambar 4. 6. Modulus .................................................................................. 61
Gambar 4. 7. Sama Dengan .......................................................................... 62
Gambar 4. 8. Tambah Sama Dengan ............................................................ 63
Gambar 4. 9. Kurang Sama Dengan ............................................................. 63
Gambar 4. 10. Titik Sama Dengan ............................................................... 64
Gambar 4. 11. Kali Sama Dengan ................................................................ 65
Gambar 4. 12. Bagi Sama Dengan ............................................................... 66
Gambar 4. 13. Modulus Sama Dengan ......................................................... 67
Gambar 4. 14. Operator Bitwise AND .......................................................... 69
Gambar 4. 15. Operator Bitwise OR ............................................................. 70

xiii
Gambar 4. 16. Operator Bitwise XOR .......................................................... 72
Gambar 4. 17. Operator Bitwise Shift Left ................................................... 73
Gambar 4. 18. Operator Bitwise Shift Right ................................................. 75
Gambar 4. 19. Operator Perbandingan ......................................................... 78
Gambar 4. 20. Operator Logika .................................................................... 80
Gambar 5. 1. Kondisi.................................................................................... 82
Gambar 5. 2. Kondisi Menggunakan Boolean ............................................. 83
Gambar 5. 3. Kondisi Dengan If-Else........................................................... 84
Gambar 5. 4. Banyak Kondisi Dengan If-Else ............................................. 85
Gambar 5. 5. Kondisi Dengan Switch-Case ................................................. 86
Gambar 6. 1. Perulangan Menggunakan For ............................................... 88
Gambar 6. 2. Perulangan Menurun Menggunakan For ................................ 89
Gambar 6. 3. Perulangan Dalam Perulangan ................................................ 90
Gambar 6. 4. Perulangan Dengan While....................................................... 92
Gambar 6. 5. Perulangan Dengan Do-While ................................................ 93
Gambar 7. 1. Array ....................................................................................... 94
Gambar 7. 2. Cara Mengisi Array Pertama .................................................. 95
Gambar 7. 3. Cara Mengisi Array Kedua ..................................................... 96
Gambar 7. 4. Cara Mengisi Array Ketiga ..................................................... 97
Gambar 7. 5. Cara Mencetak Nilai Array Pertama ....................................... 98
Gambar 7. 6. Cara Mencetak Nilai Array Kedua ......................................... 99
Gambar 7. 7. Cara Mencetak Nilai Array Ketiga ....................................... 100
Gambar 8. 1. Metode GET Pada Form ....................................................... 104
Gambar 8. 2. Metode GET Pada URL ........................................................ 105
Gambar 8. 3. Berpindah Halaman Otomatis............................................... 106
Gambar 8. 4. Metode POST Pada Form ..................................................... 108
Gambar 9. 1. Login Gagal .......................................................................... 112
Gambar 9. 2. Login Berhasil ...................................................................... 113
Gambar 9. 3. Cookies ................................................................................. 114
Gambar 9. 4. Cookies di Web Browser ....................................................... 115
Gambar 10. 1. Gagal Terhung Dengan Database ...................................... 120
Gambar 10. 2. Halaman Tambah Data ....................................................... 122
Gambar 10. 3. Aksi Tambah Data .............................................................. 123
Gambar 10. 4. Membaca dan Menampilkan Data (Read) .......................... 125
Gambar 10. 5. Mengubah Data (Update) ................................................... 127

xiv
Gambar 11. 1. Include ................................................................................ 131
Gambar 11. 2. Include File Tidak Ditemukan ............................................ 132
Gambar 11. 3. Menggunakan Include_Once .............................................. 133
Gambar 11. 4. Menggunakan Include ........................................................ 134
Gambar 11. 5. Require File Tidak Ditemukan ........................................... 135
Gambar 12. 1. Upload File ......................................................................... 138
Gambar 12. 2. Upload File Berhasil ........................................................... 138
Gambar 13. 1. Bagian-bagian CSS ............................................................. 140
Gambar 13. 2. Inline CSS ........................................................................... 144
Gambar 13. 3. Internal CSS ........................................................................ 145
Gambar 13. 4. Eksternal CSS ..................................................................... 146
Gambar 13. 5. Parent Child CSS ............................................................... 148
Gambar 13. 6. Parent Decendant CSS ....................................................... 149
Gambar 14. 1. Mewarnai Teks ................................................................... 151
Gambar 14. 2. Jenis Huruf .......................................................................... 152

xv
 BAB 1

HTML adalah singkatan dari Hypertext Markup Language. HTML

merupakan bahasa yang digunakan untuk membuat tampilan halaman web.
HTML dieksekusi pada web browser, sehingga tanpa web server pun kita
dapat menjalankan kode HTML dan mendapatkan hasil tampilannya. HTML
bukanlah bahasa pemrograman yang dapat memproses sebuah logika.
Kode-kode pada HTML disebut tag. Contohnya tag <p>, dibaca tag p.
Tag HTML umumnya berpasangan seperti <html> dan </html>, namun
adapula yang tunggal seperti <br/> atau <br>. Berikut ini adalah tag dasar
HTML dari sebuah halaman website.

<html>
<head>
<title>Judul Pada Tab</title>
</head>
<body>
Isi Halaman
</body>
</html>

Untuk menjalankan kode HTML tidak diperlukan server. Sehingga untuk

membukanya cukup dengan melakukan klik dua kali (double click) pada file
HTML tersebut. Maka web browser default akan memproses kode HTML
tersebut. Hal ini menandakan bahwa kode HTML diterjemahkan oleh web
browser untuk menghasilkan tampilan. Pada Gambar 1.1 dapat dilihat alamat
dari file yang dibuka oleh web browser pada bagian address bar. Hal tersebut
terjadi karena file dibuka dengan cara mengklik dua kali (double click).

Pemrograman Web Untuk Pemula Hingga Mahir | 1

 Gambar 1. 1. Tampilan Standar Kode HTML

Kode HTML tidak mengenal enter, tab atau lebih dari satu spasi.
Sehingga tampilan tidak akan berubah meskipun anda menambahkan enter,
tab atau banyak spasi. Spasi yang dianggap oleh HTML hanya satu spasi.

<title>Judul Pada Tab</title>

Sama Dengan

<title>
Judul Pada Tab
</title>

Pada contoh kode di atas, kedua kode HTML akan menghasilkan

tampilkan hasil yang sama. Penggunaan enter untuk menurunkan kode HTML
ke baris baru ataupun tab untuk membuat kode maju ke kanan. Semua
bertujuan agar kode program terlihat rapi dan juga mudah dibaca saja.

1.1 HEADING
Tag heading digunakan untuk menuliskan judul pada artikel halaman
web. Seperti membuat artikel umumnya diperlukan judul dengan ukuran yang
lebih besar daripada isi paragraf. Untuk membuat judul dengan HTML
terdapat enam pilihan tag heading yaitu:

2 | Pemrograman Web Untuk Pemula Hingga Mahir

 <H1>Judul Artikel</H1>
<H2>Judul Artikel</H2>
<H3>Judul Artikel</H3>
<H4>Judul Artikel</H4>
<H5>Judul Artikel</H5>
<H6>Judul Artikel</H6>

Secara tampilan tag <h1> akan menampilkan judul paling besar. Hal ini
memiliki arti bahwa tag <h1> digunakan untuk judul besar. Kemudian tag
<h2> adalah sub judulnya dan begitu seterusnya sampai tag <h6>.

Gambar 1. 2. Tampilan Heading

Pada Gambar 1.2 dapat dilihat perbedaan antara heading 1 sampai

dengan heading 6. Bila diimplementasikan dengan benar maka halaman web
akan tampil dengan baik.

1.2 PARAGRAF
Hal yang umum dilakukan untuk membuat artikel di halaman web adalah
membuat paragraf. Tag yang digunakan untuk membuat paragraf adalah <p>
dan </p>. Penulisan paragraf dapat dilihat pada kode program berikut:

Pemrograman Web Untuk Pemula Hingga Mahir | 3

<html>
<head>
<title>Judul Pada Tab</title>
</head>
<body>
<h1>Judul Artikel</h1>
<p> Ini adalah sebuah paragraf tanpa perataan teks. Ini adalah sebuah paragraf
tanpa perataan teks. Ini adalah sebuah paragraf tanpa perataan teks. Ini adalah
sebuah paragraf tanpa perataan teks. Ini adalah sebuah paragraf tanpa perataan
teks.</p>
</body>
</html>

Pada kode HTML di atas terlihat tag dasar HTML. Pada bagian tag
<body> berisi artikel yang terdiri dari judul dan paragraf. Untuk membuat
paragraf, tuliskan isi paragraf ditengah tag <p> buka dan tag </p> tutup.
Dengan menggunakan tag tersebut maka antara satu paragraf dengan paragraf
lainnya akan berpisah satu baris seperti umumnya paragraf. Kode program
diatas menghasilkan tampilan seperti tersaji pada Gambar 1.3.

Gambar 1. 3. Tampilan Paragraf

Seperti terlihat pada Gambar 1.3, dapat dilihat sebuah artikel dengan satu
paragraf. Antar paragraf akan berpisah satu baris, dimana satu paragraf
dihitung dari tag <p> buka sampai tag </p> tutup.

1.3 FORMAT TEKS

Ada banyak format teks yang bisa kita buat dihalaman web layaknya di
Microsoft Word. Namun pada kesempatan ini kita akan mempelajari beberapa
format teks diantaranya:

4 | Pemrograman Web Untuk Pemula Hingga Mahir

1. Tebal
2. Miring
3. Garis Bawah
4. Superscript
5. Subscript

1.3.1 Tebal
Untuk membuat teks tebal tag yang digunakan adalah
<b>tebal</b>. Teks yang akan ditebalkan letakkan di antara tag buka dan
tutup.
1.3.2 Miring
Untuk membuat teks miring tag yang digunakan adalah
<i>miring</i>. Teks yang akan dimiringkan letakkan di antara tag buka
dan tutup.
1.3.3 Garis Bawah
Untuk membuat teks bergaris bawah tag yang digunakan adalah
<u>garis bawah</u>. Teks yang akan dibuat garis bawah letakkan di
antara tag buka dan tutup.
1.3.4 Superscript
Untuk membuat teks superscript tag yang digunakan adalah
^superscript. Teks yang akan dibuat superscript letakkan di
antara tag buka dan tutup.
1.3.5 Subscript
Untuk membuat teks subscript tag yang digunakan adalah
_subscript. Teks yang akan dibuat subscript letakkan di
antara tag buka dan tutup.

Pemrograman Web Untuk Pemula Hingga Mahir | 5

<html>
<head>
<title>Format Teks</title>
</head>
<body>
<b>Teks Tebal</b><br>
<i>Teks Miring</i><br>
<u>Teks Garis Bawah</u><br>
Superscript O²<br>
Subscript H₂O
</body>
</html>

Pada kode HTML di atas dapat dilihat bahwa teks yang diletakkan
diantara tag buka dan tutup. Maka akan mendapat efek atau format dari tag
tersebut. Seperti tebal, miring, garis bawah dan lain-lain.

Gambar 1. 4. Tampilan Format Teks

Pada gambar di atas dapat dilihat hasil dari tag-tag yang diperuntukkan
sebagai format teks. Seperti tebal, miring, garis bawah, dan lain-lain.

6 | Pemrograman Web Untuk Pemula Hingga Mahir

1.4 DAFTAR
Daftar atau list umumnya digunakan untuk menampilkan informasi agar
mudah untuk dibaca. Pada microsoft word kita mengenal bullets dan
numbering, sedangkan untuk halaman web dikenal dengan istilah daftar tidak
berurut (unordered list) dan daftar berurut (ordered list).

1.4.1 Daftar Tidak Berurut

Daftar tidak berurut dikenal dengan istilah unordered list dengan
tag yaitu <ul> dan </ul>. Setiap daftarnya diletakkan diantara <li> daftar
</li>. Daftar tak berurut ini seperti bullets di microsoft word.

<html>
<head>
<title>List Tidak Berurut (Unordered List)</title>
</head>
<body>
<h4>Daftar Makanan
<ul>
<li>Nasi Goreng</li>
<li>Mie Goreng</li>
<li>Ayam Penyet</li>
</ul>
</body>
</html>

Kode program di atas lengkap dengan tag dasar HTML. Tag <ul>
berperan sebagai induk dan tag <li> sebagai anak. Di dalam kode HTML
kita akan menjumpai tag-tag seperti demikian. Dimana tag tersebut tidak
sebatas tag buka dan tag tutup saja. Melainkan berisi tag anak yang
dibutuhkan untuk mencapai tujuan dan diistilahkan dengan elemen.
Tag <ul> berfungsi menandai bahwa daftar yang dibuat adalah
daftar tidak berurut. Sedangkan tag <li> berfungsi sebagai penanda dari
daftar-daftar yang tersedia. Kedua tag saling membutuhkan untuk
membuat daftar tidak berurut. Kode program diatas jika dibuka dengan

Pemrograman Web Untuk Pemula Hingga Mahir | 7

 browser akan menapilkan list atau daftar sesuai format yang diberikan,
seperti ditampilkan pada Gambar 1.5.

Gambar 1. 5. Tampilan Daftar Tidak Berurut

Pada Gambar 1.5, dapat dilihat hasil dari tag <ul> dan tag <li>
yaitu sebuah daftar tidak berurut. Daftar tidak berurut ditandai dengan
simbol (bulat kecil) disetiap daftarnya. Dapat dilihat setiap daftar akan
dibuat baris baru. Hal ini menandakan tag <li> memiliki sifat membuat
baris baru, meskipun dituliskan sejajar horizontal.

1.4.2 Daftar Berurut

Daftar berurut dikenal dengan ordered list dengan tag <ol> dan
</ol>. Setiap daftarnya diletakkan diantara <li> daftar </li>. Daftar
berurut ini seperti numbering di microsoft word.

8 | Pemrograman Web Untuk Pemula Hingga Mahir

<html>
<head>
<title>List Berurut (Ordered List)</title>
</head>
<body>
<h4>Daftar Belanja
<ol>
<li>Beras</li>
<li>Gula</li>
<li>Minyak Makan</li>
</ol>
</body>
</html>

Pada kode HTML di atas dapat dilihat perbedaan untuk membuat

daftar berurut hanya pada tag <ol> atau ordered list. Untuk memudahkan
dalam mengingatnya cukup memperhatikan awalan huruf tag tersebut.
Kode program diatas akan menghasilkan seperti yang ditampilkan pada
Gambar 1.6.

Gambar 1. 6. Tampilan Daftar Berurut

Pada Gambar 1.6, dapat dilihat tampilan daftar berurut. Daftar

tersebut ditandai dengan awalan angka atau huruf. Penggunaan daftar
berurut adalah untuk menggambarkan tingkat kepentingan dari isi daftar
dan mengetahui jumlah daftar dengan mudah.

Pemrograman Web Untuk Pemula Hingga Mahir | 9

1.5 TABEL
Tabel digunakan untuk menampilkan data yang banyak agar mudah
untuk dibaca dan juga untuk merapikan tampilan (layout) halaman web.
Membuat tabel di halaman web berarti menuliskan kode tabel HTML. Tag
yang digunakan untuk membuat sebuah tabel sekurang-kurangnya ada tiga tag
yaitu: <table> </table>, <tr> </tr>, dan <td> </td>. Berikut kode untuk
membuat tabel sederhana:

<html>
<head>
<title>Tabel</title>
</head>
<body>
<table>
<tr>
<td>No.</td>
<td>Nama</td>
<td>Jenis Kelamin</td>
</tr>
</table>
</body>
</html>

Agar mudah paham dalam membuat tabel, anda juga dapat menuliskan
setiap kolom atau sel ke kanan sesuai tampilan sebenarnya. Tag <tr> berarti
meminta baris baru kemudian <td> adalah kolom atau sel nya. Kode diatas
dapat ditulis juga seperti dibawah. Secara penulisan kode, penulisan ini kurang
baik dari pada kode HTML di atas. Namun untuk pemula cara ini cukup baik
agar mudah dalam membuat sebuah tabel.

10 | Pemrograman Web Untuk Pemula Hingga Mahir

<html>
<head>
<title>Tabel</title>
</head>
<body>
<table>
<tr> <td>No.</td> <td>Nama</td> <td>Jenis Kelamin</td>
</tr>
</table>
</body>
</html>

Pada kode HTML di atas terlihat perbedaan dari kode sebelumnya.

Namun hasil yang ditampilkan akan tetap sama. Sesuai dengan penjelasan
sebelumnya bahwa kode HTML mengabaikan enter. Berikut tampilan tabel
tanpa border sesuai kode program diatas seperti disajikan pada Gambar 1.7.

Gambar 1. 7. Tabel Tanpa Border

Untuk menambahkan border cukup dengan menambahkan atribut

border pada tag <table>. Brikut ini contohnya kode programnya :

Pemrograman Web Untuk Pemula Hingga Mahir | 11

<html>
<head>
<title>Tabel</title>
</head>
<body>
<table border="1">
<tr>
<td>No.</td>
<td>Nama</td>
<td>Jenis Kelamin</td>
</tr>
<tr>
<td>1</td>
<td>Muhammad Zen</td>
<td>Laki-Laki</td>
</tr>
</table>
</body>
</html>

Pada kode program di atas atribut border=1 diletakkan pada tag <table>,
maka tabel tersebut akan menampilkan border. Semakin besari nilai atribut
tersebut, maka semakin tebal border tabel tersebut.
Pada kebutuhan lain, border sengaja dibuat tidak tampak. Hal tersebut
berguna untuk merapikan tampilan dan bukan untuk menyajikan data yang
banyak seperti guna tabel umumnya.

Gambar 1. 8. Tabel Menggunakan Border

12 | Pemrograman Web Untuk Pemula Hingga Mahir

 Pada Gambar 1.8 tampak border sebuah tabel. Garis border terlihat
seperti dua garis. Hal ini dapat diubah menjadi satu garis dengan mengatur
atribut cellspacing=0. Terdapat atribut lain pada tag <tabel> seperti perataan.
Sebuah tabel dapat ditampilkan rata kiri, tengah, dan juga rata kanan dengan
atribut align.

1.5.1 Mewarnai Tabel

Mewarnai tabel sangat berguna untuk memperindah atau
meperjelas tabel. Untuk mewarnai tabel tambahkan properti bgcolor pada
tag <table> atau <tr> atau <td>, kemudian sesuaikan value (warna) sesuai
keinginan. Untuk mewarnai seluruh tabel properti bgcolor di tag <table>,
sedangkan untuk mewarnai per baris di tag <tr>. Terakhir untuk
mewarnai setiap sel properti bgcolor di tag <td>.

<html>
<head>
<title>Tabel</title>
</head>
<body>
<table border="1" bgcolor="green">
<tr>
<td>No.</td>
<td>Nama</td>
<td>Jenis Kelamin</td>
</tr>
<tr>
<td>1</td>
<td>Muhammad Zen</td>
<td>Laki-Laki</td>
</tr>
</table>
</body>
</html>

Pemrograman Web Untuk Pemula Hingga Mahir | 13

 Pada kode HTML di atas tampak atribut bgcolor di tuliskan pada
tag <table>. Maka semua tabel akan berwarna. Dengan kata lain, tabel
tersebut memiliki satu warna, seperti terlihat pada Gambar 1.9.

Gambar 1. 9. Mewarnai Seluruh Tabel

Selain mewarnai seluruh tabel, anda juga dapat mewarnai baris

demi baris tabel dengan warna-warna yang berbeda.

<html>
<head>
<title>Tabel</title>
</head>
<body>
<table border="1">
<tr bgcolor="#ccddcc">
<td>No.</td>
<td>Nama</td>
<td>Jenis Kelamin</td>
</tr>
<tr>
<td>1</td>
<td>Muhammad Zen</td>
<td>Laki-Laki</td>
</tr>
<tr bgcolor="#dddddd">
<td>2</td>
<td>Indah</td>

14 | Pemrograman Web Untuk Pemula Hingga Mahir

 <td>Perempuan</td>
</tr>
</table>
</body>
</html>

Pada kode HTML di atas dapat dilihat bahwa atribut bgcolor juga
dapat dituliskan pada tag <tr>. Sehingga warna latar belakang hanya
sebatas satu baris saja. Sehingga warna tiap baris dapat berbeda-beda.
Merwarnai baris satu persatu memang cukup merepotkan. Namun
semua itu akan mudah bila dibantu oleh bahasa pemrograman. Pada
materi HTML ini pemahaman tentang desain tampilan yang diutamakan.
Untuk mengoptimalkan hal tersebut, maka perlu dibantu program.

Gambar 1. 10. Mewarnai Baris Tabel

Contoh di atas mewarnai baris dengan nilai warna berupa kode

hexadesimal. Penulisannya diawali tanda #. Formatnya adalah
“RRGGBB”, dua untuk nilai red, dua untuk green dan dua untuk blue.
Terakhir anda dapat mewarnai setiap sel tabel.

<html>
<head>
<title>Tabel</title>
</head>
<body>
<table border="1">
<tr>
<td>No.</td>
<td bgcolor="#dddddd">Nama</td>

Pemrograman Web Untuk Pemula Hingga Mahir | 15

 <td>Jenis Kelamin</td>
</tr>
<tr>
<td>1</td>
<td bgcolor="#dddddd">Muhammad Zen</td>
<td>Laki-Laki</td>
</tr>
<tr>
<td>2</td>
<td bgcolor="#dddddd">Indah</td>
<td>Perempuan</td>
</tr>
</table>
</body>
</html>

Pada kode HTML di atas, dapat dilihat cara mewarnai sel. Untuk
mendapatkan warna yang sama pada sebuah kolom. Perlu untuk
mewarnai seluruh sel pada kolom tersebut. Pada kode di atas, sel yang
diwarnai adalah seluruh sel dengan urutan kedua. Sehingga tampak
kolom ke dua seperti diwarnai dengan warna yang sama.

Gambar 1. 11. Mewarnai Sel Tabel

16 | Pemrograman Web Untuk Pemula Hingga Mahir

 1.5.2 Cellspacing
Cellspacing berfungsi memberi jarak setiap sel. Jarak yang
dimaksud adalah jarak sel dengan sel di sekitarnya. Atribut yang
digunakan adalah cellspacing. Berikut ini contohnya:

<html>
<head>
<title>Tabel</title>
</head>
<body>
<table border="1" cellspacing="10">
<tr>
<td>No.</td>
<td>Nama</td>
<td>Jenis Kelamin</td>
</tr>
<tr>
<td>1</td>
<td>Muhammad Zen</td>
<td>Laki-Laki</td>
</tr>
<tr>
<td>2</td>
<td>Indah</td>
<td>Perempuan</td>
</tr>
</table>
</body>
</html>

Pada kode HTML di atas atribut cellspacing diletakkan pada tag

<table>. Fungsi cellspacing tersebut hampir sama dengan margin.
Dimana jarak yang diatur adalah jarak luar kotak atau sel. Semakin besar
nilai yang diberikan pada atribut cellspacing maka semakin lebar pula
jarak antar sel tersebut.

Pemrograman Web Untuk Pemula Hingga Mahir | 17

 Gambar 1. 12. Cellspacing Tabel

Pada Gambar 1.12 tampak sebuah tabel dengan nilai cellspacing

sepuluh. Apabila tabel tersebut diperuntukkan untuk mengatur tata letak.
Maka cukup dengan menghilangkan border tabel tersebut. Maka isi antar
sel akan semakin berjauhan bila nilai cellspacing diperbesar.
1.5.3 Cellpadding
Cellpadding fungsinya untuk mengatur jarak isi sel dengan
bordernya. Padding berarti jarak kotak sel terhadap isi sel. Cellpadding
merupakan kebalikan dari cellspacing. Semakin besar nilai dari
cellpadding maka jarak border sel dengan isi semakin lebar. Berikut ini
contoh kode programnya:

<html>
<head>
<title>Tabel</title>
</head>
<body>
<table border="1" cellpadding="10">
<tr>
<td>No.</td>
<td>Nama</td>
<td>Jenis Kelamin</td>
</tr>
<tr>
<td>1</td>

18 | Pemrograman Web Untuk Pemula Hingga Mahir

 <td>Muhammad Zen</td>
<td>Laki-Laki</td>
</tr>
<tr>
<td>2</td>
<td>Indah</td>
<td>Perempuan</td>
</tr>
</table>
</body>
</html>

Pada kode HTML di atas atribut cellpadding diletakkan pada tag

<table>. Nilai cellpadding yang diberikan pada tabel tersebut adalah
sepuluh. Semakin besar nilainya, maka semakin jauh jarak antara isi sel
dengan bordernya.

Gambar 1. 13. Cellspadding Tabel

Pada Gambar 1.13 terlihat jarak isi sel (teks) dengan border tabel
cukup jauh. Nilai yang diberikan pada atribut cellpadding tabel di atas
adalah sepuluh. Semakin besar nilai yang diberikan, maka semakin jauh
jarak isi sel dengan bordernya.

Pemrograman Web Untuk Pemula Hingga Mahir | 19

1.6 ATRIBUT
Atribut pada HTML digunakan untuk mengatur tampilan HTML. Atribut
dapat juga diartikan sebagai pengaturan tambahan sebuah tag HTML. Atribut
tersebut diletakkan pada tag buka HTML. Beberapa tag mempunyai properti
yang sama namun tidak sedikit pula yang berbeda. Formatnya
namaatribut=”nilai”. Berikut ini contohnya:

<h1 align=”center”> Judul Artikel</h1>

<input type=”number” name=”no_telp”>

Pada kode HTML di atas dapat dilihat bahwa atribut adalah kode
tambahan yang letaknya dalam tag buka. Pada atribut tersebut yang paling
menonjol adalah adanya tanda sama dengan. Bagian sebelah kiri adalah nama
atribut, sedangkan bagian kanan adalah nilai.
Pada baris pertama tag HTML yang dituliskan adalah tag <h1>. Tag
tersebut dapat pengaturan tambahan melalui atribut align (perataan). Atribut
tersebut berfungsi untuk mengatur perataan teks. Seperti umumnya, perataan
terdiri dari rata kiri, rata kanan, rata kiri-kanan dan rata tengah.
Pada baris kedua, tag yang dituliskan adalah tag <input>. Tag tersebut
adalah tag tunggal. Dimana tag tersebut tidak berpasangan dengan tag
tutupnya. Pada tag ini diperlihatkan bahwa atribut sebuah tag cukup banyak.
Pada sebuah tag boleh dituliskan lebih dari satu atribut dengan cara dipisahkan
oleh spasi.

1.7 UNIFORM RESOURCE LOCATOR (URL)

URL fungsinya untuk menemukan alamat suatu file. Baik berupa file
HTML, PHP, CSS, JS, gambar maupun yang lain. Ada dua jenis URL yaitu
absolut URL dan relatif URL. Memahami cara menggunakan URL sangat
penting dalam belajar HTML. Karena jika URL salah, maka file akan gagal
dimuat.
Secara umum URL diketikkan di address bar web browser. Namun di
dalam kode HTML, URL dituliskan sebagai nilai dari sebuah atribut.
Misalnya pada tag <a>, URL digunakan sebagai nilai dari atribut href. Masih
banyak lagi tag-tag HTML yang menggunakan nilai URL.

20 | Pemrograman Web Untuk Pemula Hingga Mahir

 Ada dua jenis URL yang sering digunakan yaitu absolut URL dan relatif
URL. Absolut URL berarti alamat tersebut tetap. Sedangkangkan Relatif URL
berarti URL tersebut relatif atau bisa berubah tergantung yang memanggil
alamat tersebut.

1.7.1 Absolut URL

Absolut URL menemukan file dari nama domain kemudian folder
dan file itu berada. Contohnya : [Link] URL
tersebut adalah absolut URL untuk menemukan alamat file [Link] yang
di terlusuri dari root folder yaitu buku. Pada contoh URL di atas terlihat
bahwa file url. html berada dalam folder buku. URL tersebut punya ciri-
ciri awalan [Link] Kemudian diikuti nama domain atau localhost jika
lokal. Ini berarti file HTML yang akan diakses dengan absolut URL harus
berada di folder htdocs. URL jenis ini sangat cocok untuk aplikasi yang
besar dan kompleks. Pengalamatan-pengalamatan sumber jauh lebih
mudah ditelusuri menggunakan absolut URL untuk aplikasi yang sangat
besar.

1.7.2 Relatif URL

Berbeda dengan absolut URL, relatif URL menemukan file
berdasarkan lokasi file pemanggil. Sehingga bentuk URL akan berubah-
ubah terhadap siapa yang memanggil. Contohnya seperti berikut ini.

../gambar/[Link]

URL di atas adalah relatif url untuk menemukan file [Link] yang
ditelusuri dari alamat file pemanggil. Langkah pertama keluar folder “..”
lalu masuk kedalam folder gambar “/gambar” terakhir nama filenya
“/[Link]”.

1.8 HYPERLINK (LINK)

Sebuah sistem atau aplikasi terdiri dari beberapa halaman yang terhubung
dengan halaman utama. Link berfungsi untuk berpindah dari satu halam ke
halaman lain. Tag yang digunakan link adalah tag <a> dan </a>. Format yang
digunakan untuk berpindah kehalaman adalah <a hrf=”url”> Objek </a>. URL

Pemrograman Web Untuk Pemula Hingga Mahir | 21

diisi alamat file yang dituju, misalnya HTML, PHP atau gambar. Objek yang
digunakan dapat berupa teks, gambar, atau tombol.
URL yang digunakan pada hyperlink kali ini adalah jenis relatif URL.
Untuk program sederhana atau awal belajar pemrograman, URL ini mudah
dipelajari. Karena relatif URL tidak perlu meletakkan file HTML dalam file
htdocs. URL pun menjadi lebih pendek ketika file yang dipanggil berada
dalam satu folder dengan file yang memanggil.

1.8.1 Link ke Halaman Lain

Berpindah ke halaman lain adalah fungsi utama dari link. Link
paling umum terdapat pada halaman utama. Pada halaman utama link
dibuat untuk memanggil halaman lain yang berisi informasi yang tidak
ditampilkan pada halaman utama. Berikut ini contohnya:

<!DOCTYPE html>
<html>
<head>
<title>Halaman Utama</title>
</head>
<body bgcolor="#ddffdd">
<a href="[Link]">Home</a> | <a href="[Link]">About</a> | <a
href="[Link]">Contact</a>
</body>
</html>

Pada kode program di atas dapat dilihat nilai dari atribut href berisi
URL. Halaman ini menandakan link di atas adalah link ke bagian
halaman. Jenis URL yang digunakan adalah relatif URL. Relatif url ini
ditandai dengan URL tidak diawali localhost atau nama domain. URL
pada atribut href yang berisi nama file saja mengindikasikan bahwa file
tujuan berada dalam satu folder dengan pemanggilnya.

22 | Pemrograman Web Untuk Pemula Hingga Mahir

 Gambar 1. 14. Link ke Halaman Lain

Pada halaman ini dapat dilihat tiga buah menu yaitu Home, About
dan Contact. Masing-masing menu tersebut akan menuju ke halaman
lain. File di atas di akses atau dibuka dengan cara mengklik dua kali file
tersebut. Sehingga tampil link seperti di atas.

<!DOCTYPE html>
<html>
<head>
<title>Halaman Home</title>
</head>
<body bgcolor="#ddddaa">
<h3>Halaman Home</h3>
</body>
</html>

Kode program di atas hanya contoh halaman saja. Halaman

tersebut berjudul halaman home dengan isi berupa teks bertuliskan
Halaman Home.

Gambar 1. 15. Halaman Home

Pemrograman Web Untuk Pemula Hingga Mahir | 23

 Gambar 1.15 menunjukkan tampilan halaman home ketika menu
home pada Gambar 1.14 diklik. Ketika berpindah halaman, URL pada
address bar web browser juga ikut berubah. Dapat dilihat file yang
sedang dibuka adalah [Link].
Saat terjadi error atau halaman tidak ditemukan, penting untuk
memperhatikan URL pada address bar web browser. Umumnya
kesalahan dapat diidentifikasi melalui URL yang di tampilkan di address
bar.

<!DOCTYPE html>
<html>
<head>
<title>Halaman About</title>
</head>
<body bgcolor="#ddddaa">
<h3>Halaman About</h3>
</body>
</html>

Kode HTML di atas hanya untuk menampilkan halaman sederhana

yang bertuliskan halaman about. Kode HTML di atas sudah lengkap
dengan tag dasar HTML. Tag <DOCTYPE html> di atas berperan dalam
deklarasi versi HTML yaitu HTML 5. Sangat penting untuk
mendeklarasikan HTML 5 karena beberapa fitur tidak bekerja karena
kurangnya hal tersebut.

Gambar 1. 16. Halaman About

24 | Pemrograman Web Untuk Pemula Hingga Mahir

 Pada Gambar 1.16, dapat dilihat tampilan halaman about. Halaman
tersebut hanya bertuliskan halaman about. Karena pada materi ini hanya
membuktikan link yang dibuat berhasil. Perhatikan juga URL di atas.
URL tersebut menunjukkan file yang dibuka adalah [Link].

<!DOCTYPE html>
<html>
<head>
<title>Halaman Contact</title>
</head>
<body bgcolor="#ddddaa">
<h3>Halaman Contact</h3>
</body>
</html>

Kode HTML di atas dibuat untuk menampilkan halaman contact.

Halaman ini biasanya berisi informasi kontak yang dapat dihubungi.
Namun halaman serderhana ini hanya difungsikan untuk menampilkan
tulisan halaman contact saja.

Gambar 1. 17. Halaman Contact

Pada Gambar 1.17, tampak URL membuka file bernama

[Link]. Membagi-bagi halaman ini merupakan teknik dalam desain
web yang baik. Apabila terlalu banyak informasi yang akan ditampilkan
dalam halaman web, maka baiknya membagi informasi tersebut ke dalam
halaman-halaman lain. Sehingga fungsi link adalah menyatukan kembali
atau membuat akses terhadap informasi yang terpisah-pisah tersebut.

Pemrograman Web Untuk Pemula Hingga Mahir | 25

 1.8.2 Link ke Bagian Halaman
Sebenarnya tidak semua link berpindah ke halaman lain. Ada link
yang difungsikan untuk menunjuk bagian tertentu dari sebuah halaman.
Contohnya ketika berkunjung kehalaman web tertentu. Ketika menu di
klik maka halaman tersebut akan bergeser kebawah tepat dimana
informasi tersebut di tampilkan. Hal tersebut dapat dijadikan ilustrasi
meskipun ada tambahan kode lain.
Link ke bagian halaman punya ciri-ciri tanda pagar # di URL.
Pernahkah anda melihat tanda pagar pada alamat URL? tanda pagar
tersebut menandakan link ke bagian halaman. Setelah tanda pagar adalah
nama dari alamatnya. Untuk lebih jelasnya perhatikan kode program
berikut:

<!DOCTYPE html>
<html>
<head>
<title>Halaman Utama</title>
</head>
<body bgcolor="#ddffdd">
<a name="atas"></a>
<a href="#home">Home</a> | <a href="#about">About</a> | <a
href="#contact">Contact</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br
><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><
br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br
><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><
br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<a name="home"> </a> Ini adalah halaman home. Halaman home
menampilkan informasi umum. <a href="#atas">Ke atas</a>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br
><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><
br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

26 | Pemrograman Web Untuk Pemula Hingga Mahir

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br
><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><
br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<a name="about"></a>
Ini adalah halaman about. Halaman about menjelaskan tentang website ini.
<a href="#atas">Ke atas</a>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br
><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><
br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br
><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><
br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<a name="contact"></a>
Ini adalah halaman contact. Halaman contak menampilkan nomor telepon,
email atau alamat yang dapat dihubungi. <a href="#atas">Ke atas</a>
</body>
</html>

Pada kode HTML di atas terdapat tiga link kebagian halaman

masing-masing adalah home, about dan contact. Masing-masing URL
diawali tanda pagar yaitu #home, #about dan #contact. Perhatikan link ke
bagian halaman beriku. Kode berikut adalah bagian pemanggil. Tag yang
digunakan adalah tag <a> dan atribut nya adalah href.

<a href="#home">Home</a>

Tag yang digunakan sebagai tujuan link juga tag <a>. Namun
atributnya berbeda yaitu atribut name. Nilai dari atribut name tersebut
tidak perlu menggunakan tanda pagar lagi.

<a name="home"> </a>

Pemrograman Web Untuk Pemula Hingga Mahir | 27

 Saat link home diklik maka halaman otomatis bergulir kebawah
tepat pada tujuan link tersebut. Tujuan tersebut adalah tag <a> dengan
atribut name. Perhatikan halaman awal berikut.

Gambar 1. 18. Pertama dijalankan atau Link ke Atas diklik

Pada Gambar 1.18, dapat dilihat link atau menu yaitu home, about,
dan contact. Link tersebut merupakan link ke bagian halaman. Ketika link
tersebut diklik maka secara otomatis halaman akan bergulir kebawah.
Ketika link home diklik maka halaman akan bergulir kebagian home,
begitu juga dengan about dan contact.

Gambar 1. 19. Link Home diklik

Perhatikan alamat URL di atas, terlihat tanda #home setelah nama

file link_kebagianhalaman.html. Bagian ini otomatis naik ke atas atau
bergulir ketika link atau menu home di klik. Diujung tulisan terlihat link
dengan label Ke atas. Jika diklik maka menu akan muncul kembali
(bergulir ke atas).

28 | Pemrograman Web Untuk Pemula Hingga Mahir

 Gambar 1. 20. Link About diklik

Perhatikan alamat URL di atas, terlihat tanda #about setelah nama

file link_kebagianhalaman.html. Bagian ini otomatis naik ke atas atau
bergulir ketika link atau menu about di klik. Diujung tulisan terlihat link
dengan label Ke atas. Jika diklik maka menu akan muncul kembali
(bergulir ke atas).

Gambar 1. 21. Link Contact diklik

Perhatikan alamat URL di atas, terlihat tanda #contact setelah

nama file link_kebagianhalaman.html. Bagian ini otomatis naik ke atas
atau bergulir ketika link atau menu contact di klik. Diujung tulisan
terlihat link dengan label Ke atas. Jika diklik maka menu akan muncul
kembali (bergulir ke atas).

1.9 FORMULIR
Interaksi pengguna dengan sistem atau aplikasi berbasis web salah
satunya dapat menggunakan formulir (form). Formulir sebagai salah satu
sarana input atau masukan bagi sistem. Berikut ini tag form di HTML <form>
</form>. Atribut yang penting dari tag <form> adalah action dan method.
Action berisi URL data akan dikirimkan sedangkan method adalah metode
pengiriman. Sedangkan data yang akan dikirim tempatnya di elemen form.

<form action=”url” method=”POST atau GET”> </form>.

Pemrograman Web Untuk Pemula Hingga Mahir | 29

 1.9.1 Elemen Form
Elemen form adalah user interface yang dapat berinteraksi dengan
pengguna, baik di klik mauput di input. Berikut ini beberapa contoh
element form.

1. Input Text
Input text berfungsi untuk menerima input text dari pengguna. Tag
HTML yang digunakan adalah tag <input> dengan attribut type=”text” .
Berikut ini contohnya.

<input type="text" name="nama" maxlength="9" required="">

Gambar 1. 22. Input Text

2. Input Number
Input number berfungsi untuk menerima input angka dari
pengguna. Tag HTML yang digunakan adalah tag <input> dengan
attribut type=”number” . Berikut ini contohnya.

<input type="number" name="nohp" maxlength="12" required="">

Gambar 1. 23. Input Number

3. Input Password
Input password berfungsi untuk menerima input password dari
pengguna. Tag HTML yang digunakan adalah tag <input> dengan
attribut type=”password” . Berikut ini contohnya.

<input type="password" name="password" required="">

Gambar 1. 24. Input Password

30 | Pemrograman Web Untuk Pemula Hingga Mahir

4. Input Email
Input email berfungsi untuk menerima input email dari pengguna.
Tag HTML yang digunakan adalah tag <input> dengan attribut
type=”email” . Berikut ini contohnya.

<input type="email" name="email" required="">

Gambar 1. 25. Input Email

5. Input Date
Input date berfungsi untuk menerima input tanggal dari pengguna.
Tag HTML yang digunakan adalah tag <input> dengan attribut
type=”date” . Berikut ini contohnya.

<input type="date" name="tanggal" required="">

Gambar 1. 26. Input Date

6. Input Time
Input time berfungsi untuk menerima input waktu dari pengguna.
Tag HTML yang digunakan adalah tag <input> dengan attribut
type=”time” . Berikut ini contohnya.

<input type="time" name="jam" required="">

Gambar 1. 27. Input Time

7. Radio
Radio berfungsi untuk menerima pilihan dari pengguna, dimana
pengguna hanya bisa memilih salah satu. Tag HTML yang digunakan

Pemrograman Web Untuk Pemula Hingga Mahir | 31

 adalah tag <input> dengan attribut type=”radio” . Untuk radio nilai atau
value diberikan di kode. Berikut ini contohnya.

<input type="radio" value="hadir" name="absensi" checked="" > Hadir

<input type="radio" value="alpa" name="absensi"> Alpa

Gambar 1. 28. Radio

8. CheckBox
CheckBox berfungsi untuk menerima pilihan dari pengguna,
dimana pengguna bisa memilih beberapa pilihan sekaligus. Tag HTML
yang digunakan adalah tag <input> dengan attribut type=”checkbox” .
Untuk checkbox nilai atau value diberikan di kode. Hampir sama dengan
radio, namun berbeda di attribut name. Berikut ini contohnya.

<input type="checkbox" value="Renang" name="hobi1" checked="" >

Renang
<input type="checkbox" value="Kuliner" name="hobi2"> Kuliner

Gambar 1. 29. Checkbox

9. Select
Select berfungsi untuk menerima pilihan dari pengguna. Pilihan
tersusun ke bawah jika diklik. Berikut ini contohnya.
<select name="warna">
<option value="">Pilih</option>
<option value="Merah">Merah</option>
<option value="Hijau">Hijau</option>
<option value="Biru">Biru</option>
<option value="Hitam">Hitam</option>
</select>

32 | Pemrograman Web Untuk Pemula Hingga Mahir

 Gambar 1. 30. Select

10. DataList
Datalist berfungsi untuk menerima pilihan dari pengguna. Hampir
sama dengan select, datalist memiliki kelebihan dapat dicari atau diketik.
Pilihan tersusun ke bawah jika diklik. Berikut ini contohnya.

<input list="id_warna" name="pilihwarna">

<datalist id="id_warna">
<option value="Merah">Merah</option>
<option value="Hijau">Hijau</option>
<option value="Biru">Biru</option>
<option value="Hitam">Hitam</option>
</datalist>

Gambar 1. 31. Datalist

11. Textarea
Textarea berfungsi untuk menerima input text dari pengguna.
Hampir sama dengan input text, namun ukurannya bisa diperbesar.

Pemrograman Web Untuk Pemula Hingga Mahir | 33

 Textarea bisa digunakan sebagai editor. Tag HTML yang digunakan
adalah tag <textarea> </textarea> dengan attribut cols dan rows . Berikut
ini contohnya.

Gambar 1. 32. Textarea

12. Button Submit
Button submit berfungsi untuk memulai pengiriman data dalam
form. Bentuk nya sama dengan button biasa. Tag HTML yang digunakan
adalah tag <button> </button> dengan attribut type=”submit”. Berikut
ini contohnya

<button type="submit" name="ok">OK</button>

Gambar 1. 33. Button Submit

13. Button Reset

Button reset berfungsi untuk mengosongkan atau mengatur ulang
data dalam form. Bentuk nya sama dengan button biasa. Tag HTML yang
digunakan adalah tag <button> </button> dengan attribut type=”reset”.
Berikut ini contohnya

<button type="reset">Reset</button>

Gambar 1. 34. Reset

14. Button Biasa

Button biasa digunakan untuk link. Tag HTML yang digunakan
adalah tag <button> </button> dengan attribut type=”button”. Bila tidak
diberi link atau aksi, button ini tidak berfungsi. Berikut ini contohnya.

34 | Pemrograman Web Untuk Pemula Hingga Mahir

<button type="button" name="ok">Cancel</button>

Gambar 1. 35. Button

Pemrograman Web Untuk Pemula Hingga Mahir | 35

DAFTAR PUSTAKA

Cara Memotong atau Mengambil Sebagian String (fungsi substr). (n.d.).

Retrieved November 10, 2022, from [Link]/tutorial-php-cara-
memotong-atau-mengambil-sebagian-string-fungsi-substr/
CSS Gradient Text. (n.d.). Retrieved November 10, 2022, from
[Link]
PHP. (n.d.). Retrieved November 10, 2022, from [Link]
PHP Data Types. (n.d.). Retrieved November 10, 2022, from
[Link]
Solichin, A., & Kom, S. (2005). Pemrograman Web dengan PHP dan MySQL.
Tagger, B., & Mulia. (2014). Modul Pemrograman Web. Dimulai dari
penggunaan HTML sampai Javascript (p. 117).

Daftar Pustaka | 153

BIORGRAFI PENULIS

Muhammad Zen, S.T., M. Kom merupakan Dosen di

Universitas Pembangunan Panca Budi Medan. Mengajar
di Program Studi Sistem Komputer. Sejak karirnya sebagai
dosen, Zen tertarik mendalami bidang pemrograman web,
text processing dan keamanan data. Muhammad Zen lahir
di Bukit Gantung, Kec. Wampu, Kab. Langkat pada
tanggal 07 Mei 1992.

Dr. Sayuti Rahman merupakan Dosen di Universitas

Harapan Medan. Studi S3 di Universitas Syiah Kuala,
Banda Aceh. Sejak karirnya sebagai dosen, Sayuti
tertarik dengan mendalami bidang citra digital.
Sehingga saat ini Sayuti fokus dalam penelitian yang
berkaitan dengan mengekstraksi informasi didalam
citra digital yaitu Visi komputer. Penelitian yang
sedang dikerjakan saat ini adalah membangun sistem parkir cerdas dengan
mongoptimalkan CNN dalam mengklasifikasi ruang parkir. Sayuti Rahman
lahir di Bukit gantung, Kec. Wampu, Kab. Langkat pada tanggal 18 juni 1987.

154 | Biografi Penulis

 Haida Dafitri, S.T., [Link] lahir di Medan
pada tanggal 17 Mei 1988. Penulis
memperoleh gelar Sarjana Teknik di Sekolah
Tinggi Teknik Harapan pada Program Studi
Teknik Informatika, Maret 2010. Kemudian
Juli 2011, Penulis melanjutkan studi Magister
di Universitas Sumatera Utara, Program Studi
Teknik Informatika Fakultas Ilmu Komputer
dan Teknologi Informasi Hingga lulus pada
September 2013. Dari Tahun 2011 hingga saat
ini, Penulis adalah Dosen di Program Studi
Teknik Informatika Fakultas Teknik dan Komputer di Universitas Harapan
Medan. Menjadi Dosen Pembimbing Lapangan pada Program Kampus
Mengajar Angkatan 3 di Tahun 2021 menjadi suatu pengalaman menarik bagi
penulis dalam mendampingi dan membimbing koordinasi mahasiswa dengan
Dinas Pendidikan Kabupaten/Kota dan Satuan Pendidikan atau sekolah
sasaran, selain itu penulis dapat meningkatkan kemampuan dalam
mengembangkan ide-ide yang inovatif dalam pembelajaran. Penulis memiliki
ketertarikan penelitian di bidang Pemrosesan Informasi Multimedia,
Augmented dan Virtual Reality, Pemrosesan Informasi Dalam Belajar,
Kecerdasan Buatan, Data Mining, Sistem Pendukung Keputusan.

Risko Liza, S.T., [Link] lahir di Medan, 09 November

1978 adalah Dosen yang mengajar di salah satu Universitas
di Medan. Saat ini Penulis mengajar di Program Studi
Teknik Informatika Fakultas Teknik dan Komputer,
Universitas Harapan Medan. Mata Kuliah yang diampu
termasuk pada peminatan Jaringan, Multimedia dan
Mikrokontroller (Robotics). Penulis lebih suka pada hal hal
baru pada teknologi baru apalagi berbau tantangan. Penulis juga sedang
melakukan riset mandiri yang berhubungan dengan teknologi terbarukan
dengan kolaborasi antar Program studi.

Biografi Penulis | 155

 Rachmat Aulia, [Link]., [Link]. adalah seorang
dosen di Perguruan Tinggi Swasta bernama
Universitas Harapan Medan. Lahir di Medan
tanggal 27 Desember 1983. Beliau menyelesaikan
pendidikan S1 tahun 2006 di Universitas Budi
Luhur dan pendidikan S2 tahun 2008 di University
Utara Malaysia. Karir dosennya dimulai tahun 2008
dengan menjadi dosen tetap di Program Studi
Teknik Informatika Sekolah Tinggi Teknik
Harapan (saat ini berubah menjadi Universitas Harapan Medan). Beliau telah
menghasilkan publikasi karya ilmiah dalam bentuk jurnal (nasional
terakreditasi, ber-ISSN, dan internasional) dan conference (seminar nasional
dan internasional) hingga saat ini. Beberapa jurnal dan conference yang
dihasilkan berkaitan dengan database, data mining, kriptografi, dan robotics.
Saat ini, beliau sedang mendalami bidang data mining yang mengarah ke
pendidikan selanjutnya. Selain itu, beliau mahir membuat program
menggunakan bahasa program web baik secara manual maupun dengan
bantuan tools.

Nurjamiyah, [Link]., [Link]. merupakan dosen tetap pada Program Studi

Sistem Informasi Universitas Harapan Medan sejak
tahun 2014, seorang wanita kelahiran kota Pematang
Siantar pada tanggal 2 Agustus 1982. Beliau meraih
gelar Masters of Computer Science ([Link].) dari
Universitas Gadjah Mada Yogyakarta pada tahun 2012.
Selain sebagai dosen, sejak tahun 2018 Beliau menjadi
seorang Entrepreneur di bidang jasa Laundry, sehingga
sampai saat ini diberikan kewenangan untuk mengajar
mata kuliah yang berhubungan dengan Kewirausahaan
dan E-Business, selain mata kuliah yang berhubungan
dengan Sistem Informasi.

156 | Biografi Penulis