Jumat, 09 Oktober 2015


Menampilkan modul-C2-Pemrograman Web-X-1.pdf.
Halaman 3 dari 259

Halaman 4 dari 259

PEMROGRAMAN WEB SEMESTER 1
ii | P a g e
DISKLAIMER (DISCLAIMER)
Penerbit tidak menjamin kebenaran dan keakuratan isi/informasi yang tertulis di
dalam buku tek ini. Kebenaran dan keakuratan isi/informasi merupakan tanggung
jawab dan wewenang dari penulis.
Penerbit tidak bertanggung jawab dan tidak melayani terhadap semua komentar
apapun yang ada didalam buku teks ini. Setiap komentar yang tercantum untuk
tujuan perbaikan isi adalah tanggung jawab dari masing-masing penulis.
Setiap kutipan yang ada di dalam buku teks akan dicantumkan sumbernya dan
penerbit tidak bertanggung jawab terhadap isi dari kutipan tersebut. Kebenaran
keakuratan isi kutipan tetap menjadi tanggung jawab dan hak diberikan pada
penulis dan pemilik asli. Penulis bertanggung jawab penuh terhadap setiap
perawatan (perbaikan) dalam menyusun informasi dan bahan dalam buku teks
ini.
Penerbit tidak bertanggung jawab atas kerugian, kerusakan atau
ketidaknyamanan yang disebabkan sebagai akibat dari ketidakjelasan,
ketidaktepatan atau kesalahan didalam menyusun makna kalimat didalam buku
teks ini.
Kewenangan Penerbit hanya sebatas memindahkan atau menerbitkan
mempublikasi, mencetak, memegang dan memproses data sesuai dengan
undang-undang yang berkaitan dengan perlindungan data.
Katalog Dalam Terbitan (KDT)
Teknik Komunikasi Informasi Edisi Pertama 2013
Kementerian Pendidikan & Kebudayaan
Direktorat Jenderal Peningkatan Mutu Pendidik & Tenaga Kependidikan,
th. 2013: Jakarta
Halaman 4 dari 259

Halaman 5 dari 259

Pemrograman Web Semester 1
iii | P a g e
KATA PENGANTAR
Puji syukur kami panjatkan kepada Tuhan yang Maha Esa atas tersusunnya
buku teks ini, dengan harapan dapat digunakan sebagai buku teks untuk Peserta
Didik Sekolah Menengah Kejuruan (SMK) Bidang Studi Keahlian Teknologi
Informasi dan Komunikasi, Program Keahlian Teknik Komputer dan Informatika.
Penerapan kurikulum 2013 mengacu pada paradigma belajar kurikulum abad 21
menyebabkan terjadinya perubahan, yakni dari pengajaran (teaching) menjadi
BELAJAR (learning), dari pembelajaran yang berpusat kepada guru (teachers- centered) menjadi pembelajaran yang berpusat kepada peserta didik (student- centered), dari pembelajaran pasif (pasive learning) ke cara belajar peserta didik
aktif (active learning-CBSA) atau Student Active Learning-SAL.
Buku teks Pemrograman Web ini disusun berdasarkan tuntutan paradigma
pengajaran dan pembelajaran kurikulum 2013 diselaraskan berdasarkan
pendekatan model pembelajaran yang sesuai dengan kebutuhan belajar
kurikulum abad 21, yaitu pendekatan model pembelajaran berbasis peningkatan
keterampilan proses sains.
Penyajian buku teks untuk Mata Pelajaran Pemrograman Web ini disusun
dengan tujuan agar supaya peserta didik dapat melakukan proses pencarian
pengetahuan berkenaan dengan materi pelajaran melalui berbagai aktivitas
proses sains sebagaimana dilakukan oleh para ilmuwan dalam melakukan
eksperimen ilmiah (penerapan scientifik), dengan demikian peserta didik
diarahkan untuk menemukan sendiri berbagai fakta, membangun konsep, dan
nilai-nilai baru secara mandiri.
Kementerian Pendidikan dan Kebudayaan, Direktorat Pembinaan Sekolah
Menengah Kejuruan, dan Direktorat Jenderal Peningkatan Mutu Pendidik dan
Tenaga Kependidikan menyampaikan terima kasih, sekaligus saran kritik demi
kesempurnaan buku teks ini dan penghargaan kepada semua pihak yang telah
berperan serta dalam membantu terselesaikannya buku teks siswa untuk Mata
Pelajaran Pemrograman Web kelas X /Semester 1 Sekolah Menengah Kejuruan
(SMK).
Jakarta, 12 Desember 2013
Menteri Pendidikan dan Kebudayaan
Prof. Dr. Mohammad Nuh, DEA
Halaman 5 dari 259

Halaman 6 dari 259

PEMROGRAMAN WEB SEMESTER 1
iv | P a g e
DAFTAR ISI
HALAMAN SAMPUL............................................................................................. i
DISKLAIMER (DISCLAIMER).............................................................................. ii
KATA PENGANTAR............................................................................................iii
DAFTAR ISI........................................................................................................ iv
GLOSARIUM....................................................................................................... x
PETA KEDUDUKAN BAHAN AJAR.................................................................... xi
BAB 1 PENDAHULUAN.......................................................................................1
A.Diskripsi........................................................................................................................ 1
B.Prasyarat...................................................................................................................... 1
C.Petunjuk..................................................................................................................... n1
D.Tujuan Akhir ................................................................................................................ 2
E.Kompetensi inti dan kompetensi dasar ...................................................................... 3
BAB 2 PEMBELAJARAN.....................................................................................5
A.Diskripsi........................................................................................................................ 5
B. Kegiatan Belajar.......................................................................................................... 6
1. Kegiatan Belajar 1: Profesi dalam Pengembangan Aplikasi Web ....................... 6
a. Tujuan Pembelajaran ...................................................................................... 6
b. Uraian Materi.................................................................................................. 6
c. Rangkuman ................................................................................................... 21
d. Tugas............................................................................................................. 22
e. Tes Formatif .................................................................................................. 22
f. Lembar Jawaban Tes Formatif ...................................................................... 23
g. Lembar Kerja Peserta Didik........................................................................... 25
2. Kegiatan Belajar 2: Alur dan Perangkat Pengembangan Aplikasi Web ............ 26
a. Tujuan Pembelajaran .................................................................................... 26
b. Uraian Materi................................................................................................ 26
c. Rangkuman ................................................................................................... 39
d. Tugas............................................................................................................. 39
Halaman 6 dari 259

Halaman 7 dari 259

Pemrograman Web Semester 1
v | P a g e
e. Tes Formatif .................................................................................................. 40
f. Lembar Jawaban Tes Formatif ...................................................................... 40
g. Lembar Kerja Peserta Didik........................................................................... 42
3. Kegiatan Belajar 3 : Menyajikan format teks dalam dokumen web ................ 43
a. Tujuan Pembelajaran .................................................................................... 43
b. Uraian Materi................................................................................................ 43
c. Rangkuman ................................................................................................... 50
d. Tugas............................................................................................................. 50
e. Tes Formatif .................................................................................................. 52
f. Lembar Jawaban Tes Formatif ...................................................................... 53
g. Lembar Kerja Peserta Didik........................................................................... 54
4. Kegiatan Belajar 4 : Menyajikan pemformatan Teks dan Paragraf Web.......... 55
a. Tujuan Pembelajaran .................................................................................... 55
b. Uraian Materi................................................................................................ 55
c. Rangkuman ................................................................................................... 57
d. Tugas............................................................................................................. 57
e. Tes Formatif .................................................................................................. 61
f. Lembar Jawaban Tes Formatif ...................................................................... 62
g. Lembar Kerja Peserta Didik........................................................................... 63
5. Kegiatan Belajar 5 : Menyajikan hasil Pembuatan List Minimal ....................... 64
a. Tujuan Pembelajaran .................................................................................... 64
b. Uraian Materi................................................................................................ 64
c. Rangkuman ................................................................................................... 68
d. Tugas............................................................................................................. 68
e. Tes Formatif .................................................................................................. 70
f. Lembar Jawaban Tes Formatif ...................................................................... 70
g. Lembar Kerja Peserta Didik........................................................................... 71
6. Kegiatan Belajar 6 : Menyajikan Pembuatan List Kombinasi ............................... 73
a. Tujuan Pembelajaran .................................................................................... 73
b. Uraian Materi................................................................................................ 73
c. Rangkuman ................................................................................................... 75
Halaman 7 dari 259

Halaman 8 dari 259

PEMROGRAMAN WEB SEMESTER 1
vi | P a g e
d. Tugas............................................................................................................. 75
e. Tes Formatif .................................................................................................. 76
f. Lembar Jawaban Tes Formatif ...................................................................... 77
g. Lembar Kerja Peserta Didik........................................................................... 78
7. Kegiatan Belajar 7 : Menyajikan Pembuatan Tabel............................................. 80
a. Tujuan Pembelajaran .................................................................................... 80
b. Uraian Materi................................................................................................ 80
c. Rangkuman ................................................................................................... 82
d. Tugas............................................................................................................. 82
e. Tes Formatif .................................................................................................. 85
f. Lembar Jawaban Tes Formatif ...................................................................... 85
g. Lembar Kerja Peserta Didik........................................................................... 86
8. Kegiatan Belajar 8 : Menyajikan Tabel dengan Spaning ................................... 88
a. Tujuan Pembelajaran .................................................................................... 88
b. Uraian Materi................................................................................................ 88
c. Rangkuman ................................................................................................... 89
d. Tugas............................................................................................................. 89
e. Tes Formatif .................................................................................................. 92
f. Lembar Jawaban Tes Formatif ...................................................................... 92
g. Lembar Kerja Peserta Didik........................................................................... 93
9. Kegiatan Belajar 9 : Pembuatan Tabel dalam Tabel ......................................... 94
a. Tujuan Pembelajaran .................................................................................... 94
b. Uraian Materi................................................................................................ 94
c. Rangkuman ................................................................................................... 96
d. Tugas............................................................................................................. 96
e. Tes Formatif .................................................................................................. 99
f. Lembar Jawaban Tes Formatif ...................................................................... 99
g. Lembar Kerja Peserta Didik......................................................................... 100
10. Kegiatan Belajar 10 : Menyajikan Desain Halaman Web dengan Konsep
Tabel 102
a. Tujuan Pembelajaran .................................................................................. 102
Halaman 8 dari 259

Halaman 9 dari 259

Pemrograman Web Semester 1
vii | P a g e
b. Uraian Materi.............................................................................................. 102
c. Rangkuman ................................................................................................. 121
d. Tugas........................................................................................................... 122
e. Tes Formatif ................................................................................................ 122
f. Lembar Jawaban Tes Formatif .................................................................... 123
g. Lembar Kerja Peserta Didik......................................................................... 126
11. Kegiatan Belajar 11 : Menyajikan Format Tampilan Gambar ..................... 127
a. Tujuan Pembelajaran .................................................................................. 127
b. Uraian Materi.............................................................................................. 127
c. Rangkuman ................................................................................................. 131
d. Tugas........................................................................................................... 132
e. Tes Formatif ................................................................................................ 139
f. Lembar Jawaban Tes Formatif .................................................................... 139
g. Lembar Kerja Peserta Didik......................................................................... 140
12. Kegiatan Belajar 12 : Format Tampilan Audio ............................................ 142
a. Tujuan Pembelajaran .................................................................................. 142
b. Uraian Materi.............................................................................................. 142
c. Rangkuman ................................................................................................. 148
d. Tugas........................................................................................................... 148
e. Tes Formatif ................................................................................................ 149
f. Lembar Jawaban Tes Formatif .................................................................... 149
g. Lembar Kerja Peserta Didik......................................................................... 150
13. Kegiatan Belajar 13 : Format Tampilan Video dan Animasi........................ 151
a. Tujuan Pembelajaran .................................................................................. 151
b. Uraian Materi.............................................................................................. 151
c. Rangkuman ................................................................................................. 159
d. Tugas........................................................................................................... 159
e. Tes Formatif ................................................................................................ 160
f. Lembar Jawaban Tes Formatif .................................................................... 160
g. Lembar Kerja Peserta Didik......................................................................... 163
14. Kegiatan Belajar 14 : Format Tampilan Gambar dengan Map.................... 164
Halaman 9 dari 259

Halaman 10 dari 259

PEMROGRAMAN WEB SEMESTER 1
viii | P a g e
a. Tujuan Pembelajaran .................................................................................. 164
b. Uraian Materi.............................................................................................. 164
c. Rangkuman ................................................................................................. 168
d. Tugas........................................................................................................... 169
e. Tes Formatif ................................................................................................ 171
f. Lembar Jawaban Tes Formatif .................................................................... 171
g. Lembar Kerja Peserta Didik......................................................................... 172
15. Kegiatan Belajar 15 : Menyajikan Hyperlink ............................................... 174
a. Tujuan Pembelajaran .................................................................................. 174
b. Uraian Materi.............................................................................................. 174
c. Rangkuman ................................................................................................. 176
d. Tugas........................................................................................................... 176
e. Tes Formatif ................................................................................................ 178
f. Lembar Jawaban Tes Formatif .................................................................... 178
g. Lembar Kerja Peserta Didik......................................................................... 179
16. Kegiatan Belajar 16 : Jenis – Jenis Link dalam HTML ................................. 181
a. Tujuan Pembelajaran .................................................................................. 181
b. Uraian Materi.............................................................................................. 181
c. Rangkuman ................................................................................................. 184
d. Tugas........................................................................................................... 184
e. Tes Formatif ................................................................................................ 188
f. Lembar Jawaban Tes Formatif .................................................................... 188
g. Lembar Kerja Peserta Didik......................................................................... 190
17. Kegiatan Belajar 17 : Menyajikan Link ke Bagian Dokumen HTML............. 191
a. Tujuan Pembelajaran .................................................................................. 191
b. Uraian Materi.............................................................................................. 191
c. Rangkuman ................................................................................................. 192
d. Tugas........................................................................................................... 193
e. Tes Formatif ................................................................................................ 197
f. Lembar Jawaban Tes Formatif .................................................................... 197
g. Lembar Kerja Peserta Didik......................................................................... 198
Halaman 10 dari 259

Halaman 11 dari 259

Pemrograman Web Semester 1
ix | P a g e
18. Kegiatan Belajar 18 : Menyajikan Format Target Link, Email dan Telepon 199
a. Tujuan Pembelajaran .................................................................................. 199
b. Uraian Materi.............................................................................................. 199
c. Rangkuman ................................................................................................. 201
d. Tugas........................................................................................................... 202
e. Tes Formatif ................................................................................................ 203
f. Lembar Jawaban Tes Formatif .................................................................... 203
g. Lembar Kerja Peserta Didik......................................................................... 204
19. Kegiatan Belajar 19 : Mengidentifasi Anatomi dan Cara Kerja Form.......... 206
a. Tujuan Pembelajaran. ................................................................................. 206
b. Uraian materi. ............................................................................................. 206
c. Rangkuman ................................................................................................. 220
d. Tugas........................................................................................................... 221
e. Test Formatif............................................................................................... 221
f. Lembar Jawaban Test Formatif (LJ)............................................................. 221
g. Lembar Kerja Peserta Didik......................................................................... 223
20. Kegiatan Belajar 20: Menyajikan Hasil Pemformatan Form pada Sebuah
Halaman Web.......................................................................................................... 224
a. Tujuan Pembelajaran. ................................................................................. 224
b. Uraian materi. ............................................................................................. 224
c. Rangkuman ................................................................................................. 240
d. Tugas........................................................................................................... 241
e. Test Formatif............................................................................................... 241
f. Lembar Jawaban Test Formatif (LJ)............................................................. 241
g. Lembar Kerja Peserta Didik......................................................................... 243
DAFTAR PUSTAKA......................................................................................... 244
Halaman 11 dari 259

Halaman 12 dari 259

PEMROGRAMAN WEB SEMESTER 1
x | P a g e
GLOSARIUM
CERN adalah Organisation Europeenne pour la Recherche Nucleaire, Pusat
Penelitian Fisika Partikel Eropa.
Domain adalah Pola penamaan host di Internet.
HTML adalah Hyper Text Markup Language, sebuah bahasa markup yang
digunakan untuk membuat sebuah halaman web.
HTTP adalah Hyper Text Transfer Protocol, tata cara komunikasi untuk
mentransfer Web dari server ke komputer lain.
ISP adalah Interrnet Service Provider, perusahaan pemberi jasa akses Internet.
Server adalah komputer yang memberikan layanan di jaringan.
Tag HTML adalah kata kunci (nama tag) yang dikelilingi oleh kurung sudut
seperti <html>
W3C adalah World Wide Web Consortium organisasi yang mengembangkan
teknologi web beralamat di www.w3c.org.
Web browser adalah sebuah perangkat lunak aplikasi yang memungkinkan
pengguna mengakses Web atau Server di jaringan.
WWW; World Wide Web sering di singkat Web.
Halaman 12 dari 259

Halaman 13 dari 259

Pemrograman Web Semester 1
xi | P a g e
PETA KEDUDUKAN BAHAN AJAR
Peta kedudukan bahan ajar merupakan suatu diagram yang menjelaskan
struktur mata pelajaran dan keterkaitan antar mata pelajaran dalam satu
kelompok bidang paket keahlian. Gambar 1 menjelaskan peta kedudukan bahan
ajar untuk paket keahlian rekayasa perangkat lunak . Kelompok C1 merupakan
kelompok mata pelajaran wajib dasar bidang kejuruan. C2 merupakan kelompok
mata pelajaran wajib dasar kompetensi kejuruan dan C3 merupakan kelompok
mata pelajaran wajib paket keahlian.
Gambar 1. Peta Kedudukan Bahan Ajar Kelompok C2
Mata Pelajaran Pemrograman Web
Halaman 13 dari 259

Halaman 14 dari 259

PEMROGRAMAN WEB SEMESTER 1
xii | P a g e
Sementara itu peta konsep mata pelajaran menjelaskan struktur urutan
kegiatan belajar dan topik materi pelajaran. Gambar 2 dibawah ini menjelaskan
peta konsep mata pelajaran Pemrograman web untuk kelas X semester 1.
Gambar 2. Peta Konsep Mata Pelajaran Pemrograman Web Kelas X Semester 1
Halaman 14 dari 259

Halaman 15 dari 259

Pemrograman Web Semester 1
1 | P a g e
BAB 1 PENDAHULUAN
A.Diskripsi
Pemrograman web 1 merupakan salah satu mata pelajaran wajib dasar pada
dasar program keahlian Teknik Komputer dan Informatika (TKI). Berdasarkan
struktur kurikulum mata pelajaran Pemrograman web 1 disampaikan dikelas X
semester 1 yang disampaikan dalam waktu 4 jam pelajaran per minggu.
Pada semester 1 ini materi pemrograman web ditekankan pada pengenalan
teknologi web, profesi yang berhubungan dengan dunia web sehingga peserta
didik mendapatkan gambaran akan dunia kerja nantinya. Perintah-perintah dari
HTML untuk pembuatan halaman web juga merupakan materi pokok pada
pemrograman web 1. Dikenalkan juga pengintegrasian komponen multimedia
kedalam teknologi web sehingga dapat menyajikan sebuah halaman web sesuai
dengan kaidah/aturan yang berlaku.
B.Prasyarat
Untuk kelancaran pencapaian kompetensi dalam mata pelajaran
pemrograman web ini dibutuhkan beberapa peryaratan baik pengetahuan
maupun ketrampilan dasar. Persyaratan tersebut antara lain ialah: peserta didik
mempunyai kompetensi dalam hal pemanfaatan teknologi informasi, seperti
mengoperasikan hardware komputer dan mengoperasikan perangkat lunak
aplikasi. Perangkat lunak aplikasi tersebut antar lain ialah pengolah data untuk
menganalisis data hasil eksperimen, pengolah kata untuk membuat laporan dan
aplikasi presentasi untuk mengkomunikasikan dan mempresentasikan hasil
laporan.
C.Petunjuk
Buku pedoman siswa ini disusun berdasarkan kurikulum 2013 yang
mempunyai ciri khas penggunaan metode scientific. Buku ini terdiri dari dua bab
yaitu bab satu pendahuluan dan bab dua pembelajaran. Dalam bab pendahuluan
beberapa yang harus dipelajari peserta didik adalah diskripsi mata pelajaran
yang berisi informasi umum, rasionalisasi dan penggunaan metode scientifik.
Selanjutnya pengetahuan tentang persyaratan, tujuan yang diharapkan,
kompetensi inti dan dasar yang akan dicapai serta test kemampuan awal.
Halaman 15 dari 259

Halaman 16 dari 259

PEMROGRAMAN WEB SEMESTER 1
2 | P a g e
Bab dua menuntun peserta didik untuk memahami deskripsi umum tentang
topik yang akan dipelajari dan rincian kegiatan belajar sesuai dengan kompetensi
dan tujuan yang akan dicapai. Setiap kegiatan belajar terdiri dari tujuan dan
uraian materi topik pembelajaran, tugas serta test formatif. Uraian pembelajaran
berisi tentang diskripsi pemahaman topik materi untuk memenuhi kompetensi
pengetahuan. Uraian pembelajaran juga menjelaskan deskripsi unjuk kerja atau
langkah-langkah logis untuk memenuhi kompetensi skill.
Tugas yang harus dikerjakan oleh peserta didik dapat berupa tugas praktek,
eksperimen atau pendalaman materi pembelajaran. Setiap tugas yang dilakukan
melalui beberapa tahapan scientifik yaitu : 1) melakukan pengamatan setiap
tahapan unjuk kerja 2) melakukan praktek sesuai dengan unjuk kerja 3)
mengumpulkan data yang dihasilkan setiap tahapan 4) menganalisa hasil data
menggunakan analisa diskriptif 5) mengasosiasikan beberapa pengetahuan
dalam uraian materi pembelajaran untuk membentuk suatu kesimpulan 6)
mengkomunikasikan hasil dengan membuat laporan portofolio. Laporan tersebut
merupakan tagihan yang akan dijadikan sebagai salah satu referensi penilaaian
D.Tujuan Akhir
Setelah mempelajari uraian materi dalam bab pembelajaran dan kegiatan
belajar diharapkan peserta didik dapat memiliki kompetensi sikap, pengetahuan
dan ketrampilan yang berkaitan dengan materi:
 Teknologi aplikasi web
 Format teks halaman web
 Multimedia pada halaman web
 Hyperlink halaman web
 Format halaman web
Halaman 16 dari 259

Halaman 17 dari 259

Pemrograman Web Semester 1
3 | P a g e
E.Kompetensi inti dan kompetensi dasar
1. Kompetensi Inti 1 : Menghayati dan mengamalkan ajaran agama yang
dianutnya.
Kompetensi Dasar :
1.1. Memahami nilai-nilai keimanan dengan menyadari hubungan
keteraturan dan kompleksitas alam dan jagad raya terhadap kebesaran
Tuhan yang menciptakannya
1.2. Mendeskripsikan kebesaran Tuhan yang menciptakan berbagai sumber
energi di alam
1.3. Mengamalkan nilai-nilai keimanan sesuai dengan ajaran agama dalam
kehidupan sehari-hari.
2. Kompetensi Inti 2: Menghayati dan Mengamalkan perilaku jujur, disiplin,
tanggung jawab, peduli (gotong royong, kerjasama, toleran, damai), santun,
responsif dan proaktif dan menunjukan sikap sebagai bagian dari solusi atas
berbagai permasalahan dalam berinteraksi secara efektif dengan lingkungan
sosial dan alam serta dalam menempatkan diri sebagai cerminan bangsa
dalam menempatkan diri sebagai cerminan bangsa dalam pergaulan dunia.
Kompetensi Dasar:
2.1. Menunjukkan perilaku ilmiah (memiliki rasa ingin tahu; objektif; jujur;
teliti; cermat; tekun; hati-hati; bertanggung jawab; terbuka; kritis; kreatif;
inovatif dan peduli lingkungan) dalam aktivitas sehari-hari sebagai wujud
implementasi sikap dalam melakukan percobaan dan berdiskusi
2.2. Menghargai kerja individu dan kelompok dalam aktivitas sehari-hari
sebagai wujud implementasi melaksanakan percobaan dan melaporkan
hasil percobaan.
3. Kompetensi Inti 3: Memahami,menerapkan dan menganalisis pengetahuan
faktual, konseptual dan prosedural berdasarkan rasa ingintahunya tentang
ilmu pengetahuan, teknologi, seni, budaya, dan humaniora dalam wawasan
kemanusiaan, kebangsaan, kenegaraan, dan peradaban terkait penyebab
fenomena dan kejadian dalam bidang kerja yang spesifik untuk memecahkan
masalah.
Kompetensi Dasar:
3.1. Memahami konsep teknologi aplikasi web
3.2. Memahami format teks pada halaman web
Halaman 17 dari 259

Halaman 18 dari 259

PEMROGRAMAN WEB SEMESTER 1
4 | P a g e
3.3. Memahami format tabel pada halaman web
3.4. Memahami tampilan format multimedia
3.5. Memahami format kaitan pada halaman web
3.6. Memahami format formulir pada halaman web
4. Kompetensi Inti 4: Mengolah, menalar, dan menyaji dalam ranah konkret dan
ranah abstrak terkait dengan pengembangan dari yang dipelajarinya di
sekolah secara mandiri, dan mampu melaksanakan tugas spesifik dibawah
pengawasan langsung.
Kompetensi Dasar:
4.1. Menyajikan pelbagai teknologi pengembangan aplikasi web
4.2. Menyajikan teks dalam format tertentu pada halaman web
4.3. Menyajikan tabel pada halaman web
4.4. Menyajikan tampilan format multimedia pada halaman web
4.5. Menyajikan format kaitan pada halaman web
4.6. Menyajikan formulir pada halaman web
4.7. Menyajikan style tertentu pada halaman web
Halaman 18 dari 259

Halaman 19 dari 259

Pemrograman Web Semester 1
5 | P a g e
BAB 2 PEMBELAJARAN
A.Diskripsi
Pemrograman web 1 merupakan salah satu mata pelajaran wajib dasar pada
dasar program keahlian Teknik Komputer dan Informatika (TKI). Berdasarkan
struktur kurikulum mata pelajaran Pemrograman web 1 disampaikan dikelas X
semester 1 yang disampaikan dalam waktu 4 jam pelajaran per minggu.
Pada semester 1 ini materi pemrograman web ditekankan pada pengenalan
teknologi web, profesi yang berhubungan dengan dunia web sehingga peserta
didik mendapatkan gambaran akan dunia kerja nantinya. Perintah-perintah dari
HTML untuk pembuatan halaman web juga merupakan materi pokok pada
pemrograman web 1. Dikenalkan juga pengintegrasian komponen multimedia
kedalam teknologi web sehingga dapat menyajikan sebuah halaman web sesuai
dengan kaidah/aturan yang berlaku.
Halaman 19 dari 259

Halaman 20 dari 259

PEMROGRAMAN WEB SEMESTER 1
6 | P a g e
B. Kegiatan Belajar
1. Kegiatan Belajar 1: Profesi dalam Pengembangan Aplikasi Web
a. Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar 1 ini Peserta Didik diharapkan dapat :
1) Memahami profesi dalam bidang Teknologi Informasi
2) Memahami profesi dalam pengembangan aplikasi web
3) Memahami sejarah web
4) Memahami cara kerja web
5) Menyajikan cara kerja web
b. Uraian Materi
1) Profesi dalam bidang Teknologi Informasi
Saat ini ada banyak aneka profesi di bidang Teknologi Informasi atau TI.
Perkembangan dunia TI telah melahirkan bidang baru yang tidak terlepas dari
tujuan utamanya yaitu untuk semakin memudahkan manusia dalam melakukan
segala aktifitas. Munculnya bidang TI yang baru juga memunculkan profesi di
bidang TI yang semakin menjurus sesuai dengan keahlian masing-masing.
Secara umum, pekerjaan di bidang teknologi informasi setidaknya dapat
dikelompokan sesuai bidangnya, misalnya.
a. Kelompok pertama, adalah mereka yang bergelut di dunia perangkat lunak
(software), baik mereka yang merancang sistem operasi, database maupun
sistem aplikasi.
Pada lingkungan kelompok ini, terdapat pekerjaan-pekerjaan seperti :
*Sistem analis, merupakan orang yang bertugas menganalisa system yang akan
diimplementasikan, mulai dari menganalisa system yang ada, kelebihan dan
kekurangannya, sampai studi kelayakan dan desain system yang akan
dikembangkan
* Programer, merupakan orang yang bertugas mengimplementasikan rancangan
system analis, yaitu membuat program ( baik aplikasi maupun system operasi )
sesuai system yang dianalisa sebelumnya.
Halaman 20 dari 259

Halaman 21 dari 259

Pemrograman Web Semester 1
7 | P a g e
* Web designer, merupakan orang yang melakukan kegiatan perencanaan,
termasuk studi kelayakan, analisis dan desain terhadap suatu proyek pembuatan
aplikasi berbasis web.
* Web programmer, merupakan orang yang bertugas mengimplementasikan
rancangan web designer, yaitu membuat program berbasis web sesuai desain
yang telah dirancang sebelumnya.
b. Kelompok kedua, adalah mereka yang bergelut di bidang perangkat keras
(hardware).
Pada lingkungan kelompok ini, terdapat pekerjaan-pekerjaan seperti :
* Technical engineer, sering juga disebut teknisi, yaitu orang yang berkecimpung
dalam bidang teknik, baik mengenai pemeliharaan maupun perbaikan perangkat
system computer.
* Networking engineer, adalah orang yang berkecimpung dalam bidang teknis
jaringan computer dari maintenance sampai pada troubleshooting-nya.
c. Kelompok ketiga, adalah mereka yang berkecimpung dalam operasional
system informasi.
Pada lingkungan kelompok ini, terdapat pekerjaan-pekerjaan seperti :
*EDP Operator, adalah orang yang bertugas mengoperasikan program-program
yang berhubungan dengan electronic data processing dalam lingkungan sebuah
perusahaan atau organisasi lainnya.
*System Administrator, merupakan orang yang bertugas melakukan administrasi
terhadap system, memiliki kewenangan menggunakan hak akses terhadap
system, serta hal-hal lain yang berhubungan dengan pengaturan operasional
sebuah system.
2) Profesi dalam pengembangan aplikasi web
Ada banyak ragam dalam profesi di dalam bidang Teknologi Informasi,
bagaimana dengan profesi yang berada dalam lingkungan pengembangan
aplikasi web? Berikut ini adalah profesi-profesi yang langsung terkait dalam
pengembangan aplikasi web, diantaranya :
Halaman 21 dari 259

Halaman 22 dari 259

PEMROGRAMAN WEB SEMESTER 1
8 | P a g e
Web Designer
Seorang desainer Web adalah orang yang bertanggung jawab untuk menentukan
tampilan sebuah website. Tugasnya adalah pendisainan tampilan situs (web)
mulai dari pengolahan gambar, tata letak, warna, dan semua aspek visual situs.
Fokus utama mereka adalah tampilan / layout dari web. Mereka lebih konsen
dengan bagaimana halaman terlihat dan apakah berfungsi sempurna ketika
sudah diberikan bahasa pemrograman. Didalam pendandanan suatu situs
seorang Web Designer harus menguasai :
- HTML, DHTML
- Pengolah Gambar
- Animasi, Movie (Film)
Web Programmer
Web Programmer bertugas dalam melakukan pengcodingan atau pemograman
sebuah website agar dinamis. dimana agar sebuah web tersebut dapat telihat
mudah bagi seorang web admin.
Jika situs yang akan dibuat mempunya fasilitas interaksi antara pengunjung dan
situs misalnya menyangkut dengan transaksi, input output data dan database
maka seorang Web Programmer yang akan mengerjakannya dengan membuat
aplikasi-aplikasi yang berkerja diatas situs (web). Penguasaan yang biasanya
harus dikuasai pada umumnya oleh Web Programmer :
- CGI Perl, PHP, MySQL (Unix base)
- ASP (NT base)
- Java Script dan Applet
Web Administrator
Tugasnya adalah untuk memaintenance suatu server, mengerti akan Sistem
Operasi Server, baik itu mulai dari instalasi sampai kepada masalah
(troubleshooting), biasanya seorang Web Administrator harus menguasai :
- OS Unix (LInux, FreeBSD, dll)
- OS NT
- Jaringan (LAN, WAN, Intranet)
- Keamanan Server
Halaman 22 dari 259

Halaman 23 dari 259

Pemrograman Web Semester 1
9 | P a g e
Web Master
Seoarang Web Master adalah seorang yang mengerti akan kesemua hal mulai
dari disain, program dan keamanan server namun tidak terlalu turut mencampuri
ke masing-masing divisi, cukup dengan mempertanggun jawabkan atas jalannya
suatu situs (web). Penguasaan yang harus dimiliki :
- HTML, DHTML
- CGI Perl, PHP, MySQL, ASP, Java
- Penguasaan bermacam OS (Operating System)
- Keamanan Server
- Jaringan (LAN, WAN, Intranet)
Web Developer
Kegiatan diatas secara keseluruhan dinamakan suatu team yang dinamakan
Web Developer.
Web developer memberi bantuan seperti konsultasi web, konsep web yang akan
di buat, membangun sebuat website..
Dari semua jenis pekerjaan diatas tidak semua adalah sebuah profesi karena
tidak semua orang ahli dalam bidang tersebut. Yang bisa dikatakan sebagai
sebuah profesi yaitu jika seseorang sudah ahli di dalam bidang pekerjaan
tersebut. Jika di pekerjaan diatas yang bisa dikatakan sebagai sebuah profesi
adalah web designer, web programmer, web administrator, web master dan web
developer karena dalam bidang tersebut seseorang memang sudah memiliki
keahlian di dalamnya.
3) Sejarah web
Internet adalah jaringan komputer yang saling terhubung. Tidak ada perusahaan
yang memiliki internet, yang merupakan upaya kerja sama diatur oleh sistem
standar dan aturan. Tujuan dari menghubungkan komputer bersama-sama, tentu
saja, adalah untuk berbagi informasi. Ada banyak cara informasi dapat dikirimkan
antar komputer, termasuk email, transfer file (File Transfer Protocol), dan banyak
layanan yang lebih khusus yang dibangun dalam layanan Internet. Metode ini
standar untuk mentransfer data atau dokumen melalui jaringan dikenal sebagai
protokol.
Halaman 23 dari 259

Halaman 24 dari 259

PEMROGRAMAN WEB SEMESTER 1
10 | P a g e
World Wide Web, biasa lebih terkenal disingkat sebagai WWW adalah suatu
ruang informasi yang dipakai oleh pengenal global yang disebut URL (Uniform
Resource Locator) untuk mengenal pasti sumber daya berguna. WWW sering
dianggap sama dengan Internet secara keseluruhan, walaupun sebenarnya ia
hanyalah bagian daripada Internet.
WWW merupakan kumpulan web server dari seluruh dunia yang mempunyai
kegunaan untuk menyediakan data dan informasi untuk dapat digunakan
bersama. WWW adalah bagian yang paling menarik dari Internet. Melalui web,
para pengguna dapat mengakses informasi-informasi yang tidak hanya berupa
teks tetapi bisa juga berupa gambar, suara, video dan animasi.
Kegunaan ini tergolong masih baru dibandingkan surat elektronik, sebenarnya
WWW merupakan kumpulan dokumen yang tersimpan di peladen web, dan yang
peladennya tersebar di lima benua termasuk Indonesia yang terhubung menjadi
satu melalui jaringan Internet. Dokumen-dokumen informasi ini disimpan atau
dibuat dengan format HTML (Hypertext Markup Language).
Suatu halaman dokumen informasi dapat terdiri atas teks yang saling terkait
dengan teks lainnya atau bahkan dengan dokumen lain. Keterkaitan halaman
lewat teks ini disebut pranala. Dokumen infomasi ini tidak hanya terdiri dari teks
tetapi dapat juga berupa gambar, mengandung suara bahkan klip video. Kaitan
antar-dokumen yang seperti itu biasa disebut hipermedia.
Jadi dapat disimpulkan bahwa WWW adalah sekelompok dokumen multimedia
yang saling bertautan dengan menggunakan tautan hiperteks. Dengan mengeklik
pranala (hyperlink), maka para pengguna bisa berpindah dari satu dokumen ke
dokumen lainnya.
WWW adalah suatu program yang ditemukan oleh Tim Berners-Lee pada tahun
1991. Awalnya Berners-Lee hanya ingin menemukan cara untuk menyusun
arsip-arsip risetnya. Untuk itu, beliau mengembangkan suatu sistem untuk
keperluan pribadi. Sistem itu adalah program peranti lunak yang diberi nama
Halaman 24 dari 259

Halaman 25 dari 259

Pemrograman Web Semester 1
11 | P a g e
Enquire. Dengan program itu, Berners-Lee berhasil menciptakan jaringan yang
menautkan berbagai arsip sehingga memudahkan pencarian informasi yang
dibutuhkan. Inilah yang kelak menjadi dasar dari sebuah perkembangan pesat
yang dikenal sebagai WWW.
Gambar. 1.1 Tim Berners-Lee (Sumber : http://www.hdwallpapersinn.com)
WWW dikembangkan pertama kali di Pusat Penelitian Fisika Partikel Eropa
(CERN : Organisation Europeenne pour la Recherche Nucleaire), Jenewa,
Swiss. Pada tahun 1989 Berners-lee membuat pengajuan untuk proyek
pembuatan hiperteks global, kemudian pada bulan Oktober 1990, 'World Wide
Web' sudah dapat dijalankan dalam lingkungan CERN. Pada musim panas tahun
1991, WWW secara resmi digunakan secara luas pada jaringan Internet.
Halaman 25 dari 259

Halaman 26 dari 259

PEMROGRAMAN WEB SEMESTER 1
12 | P a g e
Gambar.1.2 Website CERN http://home.web.cern.ch
Standart Web
HTML (Hypertext Markup Language) merupakan bahasa standar web yang didefinisikan
dan dikelola penggunaannya oleh W3C (World Wide Web Consurtium). HTML dibuat dan
dikembangkan oleh Tim Berners-Lee. Selanjutnya , bahasa tersebut dipopulerkan oleh
browser Mosaic. Selama tahun 90-an telah muncul berbagai versi HTML dengan
berbagai macam fiturnya. Versi HTML yang ada tersebut antara lain:
1) Versi 1.0
Merupakan versi pertama setelah lahirnya HTML dan mempunyai kemampuan
seperti untuk heading, paragraph, hypertext, list, cetak tebal, dan cetak miring
pada teks. Selain itu juga dukungan peletakan image pada dokumen dengan
tidak memperbolehkan peletakan teks di sekelilingnya (wrapping).
Halaman 26 dari 259

Halaman 27 dari 259

Pemrograman Web Semester 1
13 | P a g e
2) Versi 2.0
Diliris pada tanggal 14 Januari 1996 dengan beberapa kemampuan tambahan
seperti penambahan form. Hal ini menjadi pionir untuk membuat sebuah web
yang interaktif.
3) Versi 3.0
Diliris pada tanggal 18 Desember 1997, yang dikenal dengan HTML+. Versi ini
memiliki beberapa vitur tambahan seperti fitur table dalam paragraph.
4) Versi 3.2
Diliris pada buan Mei 1998, merupakan versi terbaru penyempurnaan dari versi
3.0.
5) Versi 4.0
diliris pada tanggal 24 Desember 1999 dengan penambahan beberapa fitur
seperti adanya link, imagemaps, image, dan lain-lain.
6) Versi 5.0
Diliris pada tahun 2009 yang menjadi standar baru untuk HTML, XHTML, dan
DOM HTML. HTML5 ini merupakan proyek kerja sama antara W3C (World Wide
Web Consurtium) dan WHATG (Web Hypertext Application Technology Working
Group).
Spesifikasi HTML5 belum final saat ini, tetapi diyakini oleh banyak orang
akan menjadi standar yang diterima di masa depan. Beberapa browser (lihat
Tabel 1.1) sudah mendukung HTML5.
Tabel 1.1 Browser yang mendukung HTML5
Browser Keterangan
Chrome Mulai versi 1.0
Firefox Mulai versi 1.5
Internet Explorer Mulai versi 8
Opera Mulai versi 9.0
Safari Mulai versi 1.3
Halaman 27 dari 259

Halaman 28 dari 259

PEMROGRAMAN WEB SEMESTER 1
14 | P a g e
Pada HTML5, dalam menuliskan tag dan atribut dengan huruf kecil
tidak ada lagi. Diberi kebebasan untuk menggunakan huruf kecil, huruf
capital, atau kombinasinya. Bahkan, nilai suatu atribut akan diberi
tanda petik atau tidak sama saja. Browser tidak lagi mempedulikan hal- hal seperti itu.
4) Cara kerja web
Sebuah web browser adalah program perangkat lunak yang gunakan untuk
mengakses World Wide Web dari Internet. Browser pertama, yang disebut
NCSA Mosaic, dikembangkan di Pusat Nasional untuk Aplikasi Super
Komputer di awal 1990-an. Yang mudah digunakan, cukup klak-klik sehingga
membantu mempopulerkan Web.
Meskipun banyak browser yang berbeda yang tersedia, Microsoft Internet
Explorer dan Mozilla Firefox yang jauh yang paling populer. (Banyak
pengguna Mac lebih memilih browser Safar) Persaingan untuk mendominasi
pasar telah membawa perbaikan terus-menerus untuk perangkat lunak.
(keduanya didasarkan pada NCSA Mosaic)
dapat mendownload Internet Explorer dan Firefox secara gratis dari situs web
masing-masing perusahaan. Jika sudah memiliki satu browser, dapat menguji
yang lain. Juga mencatat bahwa ada sedikit perbedaan antara versi Windows
dan Macintosh.
Anatomi Browser
Ketika pertama kali membuka browser web, biasanya dengan mengklik dua
kali pada icon di desktop komputer, halaman web yang telah ditetapkan
muncul. Halaman ini disebut sebagai halaman “home” atau halaman awal.
Dengan Mozilla Firefox misalnya, mungkin akan dibawa ke halaman awal
Mozilla atau ke halaman yang dipilih oleh penyedia layanan Internet. Tetapi
jika ingin, dapat dengan mudah mengubah halaman awal tersebut.
World Wide Web sampai saat ini adalah bagian yang paling populer dari
Internet. Setelah menghabiskan waktu di Web akan merasa bahwa tidak ada
Halaman 28 dari 259

Halaman 29 dari 259

Pemrograman Web Semester 1
15 | P a g e
batas untuk apa yang dapat ditemukan. Web memungkinkan beragam
komunikasi, juga memungkinkan untuk mengakses dan berinteraksi dengan
teks, grafis, animasi, foto, audio dan video.
Jadi apa saja yang membentuk web ini? Pada tingkat yang paling sederhana,
Web secara fisik terdiri dari komputer pribadi atau perangkat mobile,
perangkat lunak web browser, sambungan ke penyedia layanan Internet,
komputer yang disebut server yang disebut hosting dan router dan switch
yang mengarahkan aliran informasi.
Ada banyak pilihan perangkat lunak server, tetapi dua yang paling populer
adalah Apache (perangkat lunak open source untuk server) dan Internet
Information Services (IIS ) dari Microsoft. Apache tersedia secara bebas
untuk komputer berbasis Unix dan dapat diinstal pada Mac menjalankan Mac
OS X. Ada versi Windows juga. Microsoft IIS adalah bagian dari keluarga
Microsoft.
Setiap komputer dan perangkat (modem, router, smartphone, mobil, dll) yang
terhubung ke Internet diberi alamat IP numerik yang unik (IP singkatan dari
Internet Protocol). Sebagai contoh, komputer yang dihosting google.com
memiliki alamat IP 173.194.34.99. Semua angka-angka tersebut dapat
memusingkan, untungnya ada Domain Name System (DNS) yang
dikembangkan untuk memungkinkan kita merujuk ke server dengan nama
domainnya, "google.com ", juga. Alamat IP numerik berguna untuk perangkat
lunak komputer, sedangkan nama domain adalah lebih mudah diakses oleh
manusia. Pencocokan nama domain ke alamat IP numerik masing-masing
adalah tugas dari server.
Hal ini dimungkinkan untuk mengkonfigurasi server web sehingga lebih dari
satu nama domain dipetakan ke satu alamat IP, sehingga memungkinkan
beberapa situs untuk berbagi server tunggal.
Sebuah halaman web adalah dokumen elektronik yang ditulis dalam bahasa
komputer yang disebut HTML, singkatan dari Hypertext Markup Language.
Setiap halaman web memiliki alamat yang unik, yang disebut URL atau
Halaman 29 dari 259

Halaman 30 dari 259

PEMROGRAMAN WEB SEMESTER 1
16 | P a g e
Uniform Eerources Locator yang mengidentifikasi di mana web server yang
memuat dokumen web.
Sebuah website memiliki satu atau lebih halaman web terkait, tergantung
pada bagaimana itu dirancang. Halaman web pada situs yang dihubungkan
bersama melalui sistem hyperlink, memungkinkan untuk melompat di antara
halaman web dengan mengklik pada link.
Halaman Web bervariasi dalam desain dan konten, tetapi banyak
menggunakan format majalah tradisional. Di bagian atas halaman adalah
“header” seperti kop surat atau gambar banner, kemudian daftar item dan
artikel. Daftar item atau menu biasanya link ke halaman lain atau situs lain.
Kadang-kadang link ini disusun dalam daftar, seperti indeks. Dapat juga
kombinasi dari keduanya. Sebuah halaman web mungkin juga menggunakan
gambar sebagai link ke konten lainnya.
Bagaimana bisa membedakan mana teks yang ada tautan/link? Link muncul
dalam warna yang berbeda dari teks - biasanya dengan warna biru dan
sering digarisbawahi. Bila memindahkan kursor di atas link teks atau melalui
link grafis, perubahan icon dari panah ke tangan.
Web adalah media yang dinamis. Untuk mendorong pengunjung untuk
kembali ke sebuah situs, banyak penerbit web sering memperbarui konten.
Itulah yang membuat Web sangat menarik.
Memahami Alamat Web
World Wide Web adalah koleksi besar file elektronik yang tersimpan di jutaan
komputer di seluruh dunia. Uniform Resource Locators atau URL adalah
alamat yang digunakan untuk menemukan file.
Informasi yang terkandung dalam URL memberi kemampuan untuk
berpindah dari satu halaman web yang lain hanya dengan klik. Ketika
Halaman 30 dari 259

Halaman 31 dari 259

Pemrograman Web Semester 1
17 | P a g e
mengetik URL ke browser atau klik link hypertext, browser mengirim
permintaan ke komputer remote, yang disebut server web, untuk men- download satu atau lebih file. Setiap URL unik, mengidentifikasi satu file
tertentu.
Apa yang dari khas URL? Berikut adalah beberapa contoh :
http://belajar.kemdikbud.go.id/
Halaman Rumah Belajar Kementrian Pendidikan dan Kebudayaan.
http://www.facebook.com/pustekkom
Halaman Facebook untuk Pusat Teknologi Informasi - Kementrian
Pendidikan dan Kebudayaan.
ftp://rtfm.mit.edu/pub/
Sebuah direktori file di MIT tersedia untuk di-download.
news : rec.gardens.roses
Sebuah newsgroup dengan topik berkebun.
http://blogs.reuters.com/soccer
Sebuah blog tentang sepak bola dari kantor berita Reuters
Bagian pertama dari URL ( sebelum dua garis miring ) memberitahu jenis
sumber daya atau metode akses di alamat itu. Sebagai contoh:
http : dokumen hypertext atau direktori
ftp : file yang tersedia untuk di-download atau direktori file tersebut
news : newsgroup
file : file yang terletak pada drive lokal komputer Anda
Halaman 31 dari 259

Halaman 32 dari 259

PEMROGRAMAN WEB SEMESTER 1
18 | P a g e
Bagian kedua biasanya adalah alamat komputer di mana data atau layanan
berada. Bagian tambahan mungkin menentukan nama file, port untuk
menghubungkan ke, atau teks untuk mencari dalam database.
Bagian-bagian dari URL
Sebuah URL lengkap umumnya terdiri dari tiga komponen : protokol,
nama situs, dan path absolut ke dokumen atau sumber daya, seperti yang
ditunjukkan pada Gambar berikut.
http:// www.example.com /2011/samples/first.html
Gambar 1.3. Sebuah contoh URL
http://
Hal pertama yang dilakukan adalah URL menentukan protokol yang akan
digunakan untuk transaksi tertentu. Aturan HTTP membiarkan server tahu
untuk menggunakan Hypertext Transfer Protocol, atau masuk ke dalam
"modus web"
www.example.com
Bagian berikutnya dari URL mengidentifikasi situs dengan nama domainnya.
Dalam contoh ini, nama domain adalah example.com. www di bagian awal
adalah nama host tertentu di domain tersebut. Nama host " www " telah
menjadi sebuah kesepakatan. Tetapi, kadang-kadang nama host dapat
dihilangkan. Bisa lebih dari satu website di domain (kadang-kadang disebut
subdomain). Misalnya, ada : development.example.com,
clients.example.com, dan sebagainya.
/2012/samples/first.html
Halaman 32 dari 259

Halaman 33 dari 259

Pemrograman Web Semester 1
19 | P a g e
Ini adalah path absolut melalui direktori pada server ke dokumen HTML yang
diminta, first.html. Kata-kata dipisahkan oleh garis miring adalah nama
direktori, dimulai dengan direktori root dari host ( seperti yang ditunjukkan
oleh awal /), URL pada Gambar 1.3. mengatakan ingin menggunakan
protokol HTTP untuk terhubung ke server web di Internet disebut
www.example.com dan meminta first.html dokumen ( terletak di direktori
sampel yang ada di direktori 2012).
Sebagian dari URL yang akan menggunakan start dengan http, yang
merupakan singkatan dari Hypertext Transfer Protocol, metode yang file
HTML yang ditransfer melalui Web. Berikut adalah beberapa hal-hal lain
untuk mengetahui tentang URL :
 Sebuah URL biasanya tidak memiliki spasi.
 Penulisan URL tidak sensitif huruf besar-kecil. Jadi mengetik
"http://www.kemdikbud.go.id" atau
"HTTP://WWW.KEMDIKBUD.GO.ID" atau variasi huruf besar dan
kecil akan membawa ke halaman yang sama.
Jika mengetik URL tidak benar, browser tidak akan dapat menemukan situs
atau sumber daya yang inginkan. Jika mendapatkan pesan error atau
mengakses situs yang salah, periksalah untuk melihat apakah mengeja
alamat dengan benar.
File standar
Tidak setiap URL adalah terlihat begitu panjang. Banyak alamat tidak
termasuk nama file, tapi hanya menunjuk ke sebuah direktori, seperti ini :
http://www.w3schools.com/
http://w3schools.com/html/
Ketika server menerima permintaan untuk nama direktori bukan file tertentu,
terlihat dalam direktori tersebut untuk dokumen default, biasanya bernama
index.html.
Jadi, sebenarnya secara tidak langsung, kita mengetikkan alamat lengkap
seperti ini (sebagai contoh jika index.html sebagai default) :
Halaman 33 dari 259

Halaman 34 dari 259

PEMROGRAMAN WEB SEMESTER 1
20 | P a g e
http://www.w3schools.com/index.html
Nama file default ( juga disebut sebagai file indeks) dapat bervariasi, dan
tergantung pada bagaimana server dikonfigurasi. Dalam contoh ini, dinamai
index.html, tetapi beberapa server menggunakan nama file default.htm. Jika
situs menggunakan pemrograman server-side untuk menghasilkan halaman,
file indeks mungkin diberi nama index.php atau index.asp.
Hal lain yang perlu diperhatikan adalah bahwa dalam contoh pertama, URL
asli tidak memiliki garis miring untuk menunjukkan itu adalah sebuah
direktori. Ketika slash dihilangkan, server hanya menambahkan satu jika
menemukan direktori dengan nama itu.
File index ini juga berguna untuk keamanan. Beberapa server ( tergantung
pada konfigurasi mereka) menampilkan isi direktori jika file default tidak
ditemukan.
Salah satu cara untuk mencegah orang melihat file-file pada direktori adalah
memastikan ada file index di setiap direktori. Administrator server juga dapat
menambahkan perlindungan lain untuk mencegah direktori ditampilkan di
browser.
Setelah file index dibuka oleh browser, maka akan disajikan seluruh informasi
yang ada dalam dokumen HTML dari file tersebut. Sebagai contoh dapat
dilihat pada gambar berikut :
Halaman 34 dari 259

Halaman 35 dari 259

Pemrograman Web Semester 1
21 | P a g e
Gambar 1.4. Contoh Web
Di bagian atas Gambar 1.4, menampilkan halaman web minimal seperti yang
muncul dalam browser. Meskipun terlihat sebagai satu halaman yang
koheren, sebenarnya dirakit dari empat file terpisah: dokumen HTML (
index.html ), sebuah style sheet ( kitchen.css ), dan dua grafis (foods.gif dan
spoon.gif). Dokumen HTML akan menampilkan semuanya.
c. Rangkuman
Secara umum, pekerjaan di bidang teknologi informasi setidaknya dapat
dikelompokan sesuai bidangnya, misalnya.
 Kelompok pertama, adalah mereka yang bergelut di dunia perangkat
lunak (software), baik mereka yang merancang system operasi, database
maupun system aplikasi.
 Kelompok kedua, adalah mereka yang bergelut di bidang perangkat keras
(hardware).
 Kelompok ketiga, adalah mereka yang berkecimpung dalam operasional
system informasi.
Profesi-profesi yang langsung terkait dalam pengembangan aplikasi web,
diantaranya : Web Designer, Web Programmer, Web Administrator, Web
Master, Web Developer
Halaman 35 dari 259

Halaman 36 dari 259

PEMROGRAMAN WEB SEMESTER 1
22 | P a g e
d. Tugas
Membuat Ringkasan Cara Kerja Web dan Layanan Hosting
Sebelum mengerjakan tugas, buatlah kelompok terdiri atas 2-3 orang. Peserta
Didik mengamati dan memahami cara kerja web dan layanan hosting web.
Masing-masing kelompok membuat ringkasannya. Kemudian secara bergantian
masing-masing kelompok mempresentasikan hasilnya didepan kelas.
1.1. Carilah beberapa layanan hosting web di Internet.
1.2. Cermati layanan hosting yang disediakan, cara hosting pada
layanan tersebut.
1.3. Bandingkan beberapa penyedia layanan hosting
1.4. Cara Kerja Web :
i. Bukalah website berikut ini :
http://www.learnthenet.com/animated-internet/how- the-web-works/
ii. Perhatikan animasi dari “how the web works” atau
bagaimana web bekerja.
iii. Tulislah tahapan dari penjelasan/animasi
bagaimana web bekerja, tersebut. Diskusikan
dan simpulkan hasilnya
1.5. Presentasikan hasil ringkasan di depan kelas.
e. Tes Formatif
1. Jelaskan apa tugas profesi dalam pengembangan aplikasi web berikut :
a. Web Designer
b. Web Programmer
c. Web Administrator
d. Web Master
Halaman 36 dari 259

Halaman 37 dari 259

Pemrograman Web Semester 1
23 | P a g e
2. Apa kepanjangan dari istilah-istilah berikut ini :
a. WWW
b. HTML
c. URL
d. W3C
e. HTTP
d. FTP
f. IP
3. Sebutkan versi HTML dari versi awal hingga sekarang !
4. Sebutkan berbagai jenis browser!
f. Lembar Jawaban Tes Formatif
LJ- 01 : Tugas profesi dalam pengembangan aplikasi web
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
LJ- 02 : Kepanjangan dari istilah-istilah
...................................................................................................................
...................................................................................................................
Halaman 37 dari 259

Halaman 38 dari 259

PEMROGRAMAN WEB SEMESTER 1
24 | P a g e
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
LJ- 03 : Versi HTML dari versi awal hingga sekarang
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
LJ- 04 : Jenis-jenis browser
.............................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
Halaman 38 dari 259

Halaman 39 dari 259

Pemrograman Web Semester 1
25 | P a g e
g. Lembar Kerja Peserta Didik
Halaman 39 dari 259

Halaman 40 dari 259

PEMROGRAMAN WEB SEMESTER 1
26 | P a g e
2. Kegiatan Belajar 2: Alur dan Perangkat Pengembangan Aplikasi
Web
a. Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar 2 ini Peserta Didik diharapkan dapat :
1) Memahami Alur Pengembangan Aplikasi Web
2) Menyajikan Perangkat Pengembangan Aplikasi Web
b. Uraian Materi
 Alur Pengembangan Aplikasi Web
Berdasarkan persepsi dari beberapa pengembang perangkat lunak dan ahli-ahli
dalam bidang rekayasa perangkat lunak (software engineering professional),
Pengembangan Aplikasi Web tidaklah sama dengan rekayasa perangkat lunak
walaupun keduanya melibatkan pemrograman dan pengembangan perangkat
lunak.
Walaupun banyak mengadopsi prinsip-prinsip rekayasa perangkat lunak,
Pengembangan Aplikasi Web memiliki banyak pendekatan, metoda, alat bantu,
teknik dan panduan yang memenuhi persyaratan pembuatan sistem berbasis
web.
Pengembangan sistem berbasis web berbeda dengan pengembangan perangkat
lunak konvensional, dimana pengembangan sistem berbasis web lebih banyak
menghadapi tantangan. Pengembangan Aplikasi Web adalah gabungan dari print
publishing dan pengambangan perangkat lunak, diantara marketing dan
perhitungan dan diantara seni dan teknologi.
Alternatif model dari Pengembangan Aplikasi Web adalah sebagai berikut :
Formulasi (formulation)
Kegiatan yang berfungsi untuk merumuskan tujuan dan ukuran dari aplikasi
berbasis web serta menentukan batasannya sistem.
Tujuan yang ingin dicapai bisa dibedakan menjadi dua kategori, yaitu :
1. Tujuan yang bersifat informatif
Halaman 40 dari 259

Halaman 41 dari 259

Pemrograman Web Semester 1
27 | P a g e
Menyediakan suatu informasi tertentu kepada pengguna, berupa teks, grafik,
audio, dan video.
2. Tujuan yang bersifat fungsional
Kemampuan untuk melakukan suatu fungsi yang dibutuhkan pengguna, misal
dengan menggunakan aplikasi tersebut seorang guru dapat memperoleh nilai
akhir dan statistik nilai guru dari data-data ujian, tugas, kuis yang ia input ke
dalam aplikasi.
Perencanaan (planning)
Kegiatan yang digunakan untuk menghitung estimasi biaya proyek pembuatan
aplikasi berbasis web ini, estimasi jumlah pengembang, estimasi waktu
pengembangan, evaluasi resiko pengembangan proyek, dan mendefinisikan
jadwal pengembangan untuk versi selanjutnya (jika diperlukan).
Analisis (analysis)
Kegiatan untuk menentukan persyaratan-persyaratan teknik dan mengidentifikasi
informasi yang akan ditampilkan pada aplikasi berbasis web. Analisis yang
digunakan pada rekayasa web dilakukan dari empat sisi, yaitu :
1. Analisis isi informasi
Mengidentifikasi isi yang akan ditampilkan pada aplikasi berbasis web ini. Isi
informasi dapat berupa teks, grafik, audio, maupun video.
2. Analisis interaksi
Analisis yang menunjukkan hubungan antara web dengan pengguna.
3. Analisis fungsional
Analisis tentang proses bagaimana aplikasi berbasis web ini akan menampilkan
informasi kepada pengguna.
Halaman 41 dari 259

Halaman 42 dari 259

PEMROGRAMAN WEB SEMESTER 1
28 | P a g e
4. Analisis konfigurasi
Konfigurasi yang digunakan pada aplikasi berbasis web, internet, intranet, atau
extranet. Selain itu, analisis ini juga meliputi relasi database dengan web jika
diperlukan.
Rekayasa (engineering)
Terdapat dua pekerjaan yang dilakukan secara paralel, yaitu desain isi informasi
dan desain arsitektur web.
Pada saat tahap desain, ada beberapa hal yang perlu dilakukan :
 Pembuatan Diagram Wireframe (Gambar Rangka), tujuan dari diagram
gambar rangka adalah untuk menunjukkan bagaimana lay out halaman
web dan menunjukkan di mana fungsi dan konten seperti navigasi, kotak
pencarian, elemen bentuk dan sebagainya, tanpa desain grafis. Berikut ini
contohnya :
Halaman 42 dari 259

Halaman 43 dari 259

Pemrograman Web Semester 1
29 | P a g e
Gambar. 2.1 Diagram Wireframe sebuah halaman web.
 Diagram Situs, Sebuah diagram situs menunjukkan struktur situs secara
keseluruhan dan bagaimana halaman individual berhubungan satu sama
lain. Gambar 2.2 menunjukkan diagram situs yang sangat sederhana
Halaman 43 dari 259

Halaman 44 dari 259

PEMROGRAMAN WEB SEMESTER 1
30 | P a g e
Gambar 2.2. Diagram Situs
 Storyboard dan diagram alir pengguna, Storyboard ini bertujuan untuk
menunjukkan langkah-langkah yang diperlukan untuk menyelesaikan
tugas-tugas, opsi yang mungkin, dan juga memperkenalkan beberapa
standar jenis halaman. Gambar 1-3 menunjukkan storyboard sederhana
Halaman 44 dari 259

Halaman 45 dari 259

Pemrograman Web Semester 1
31 | P a g e
Gambar. 2.3 Desain Visual (Sumber: www.idwebhost.com, www.idebagus.com)
Implementasi (page generation) & pengujian (testing)
Suatu kegiatan pengembangan untuk mewujudkan desain menjadi suatu web
site. Teknologi yang digunakan tergantung dengan kebutuhan yang telah
dirumuskan pada tahap analisis.
Dalam tahap pengembangan ini, meliputi kegiatan:
 Authoring, adalah istilah yang digunakan untuk proses
mempersiapkan konten untuk nantinya diunggah di Web, atau lebih
khusus, menandai konten dengan tag HTML yang menggambarkan
isi dan fungsinya.
 Styling, dalam development web, penampilan halaman dalam
browser dikendalikan oleh aturan style yang ditulis dalam CSS (
Cascading Style Sheets )
 Scripting dan pemrograman, ada bahasa pemrograman web
terkait diantaranya PHP, Ruby, Python, dan ASP.NET, yang
berjalan pada server dan mengolah data dan informasi sebelum
dikirim ke browser pengguna.
Halaman 45 dari 259

Halaman 46 dari 259

PEMROGRAMAN WEB SEMESTER 1
32 | P a g e
Pengujian dilakukan setelah implementasi selesai dilaksanakan. Pengujian
meliputi beberapa parameter yang akan menentukan standar aplikasi berbasis
web yang telah dibuat. Tahap pengujian adalah suatu proses untuk menguji
aplikasi berbasis web yang telah selesai dibuat. Hal ini bertujuan untuk
menemukan kesalahan dan kemudian memperbaikinya. Pengembang suatu
aplikasi berbasis web mendapat tantangan besar untuk melakukan pengujian
karena karakter aplikasi ini yang beroperasi pada jaringan dengan berbagai
macam pengguna, berbagai macam sistem operasi, perangkat keras, browser,
protokol komunikasi, dll.
Ada beberapa pendekatan yang digunakan untuk melakukan pengujian, yaitu :
1. Pengujian fungsional dan operasional (fungsional and operational testing)
Bertujuan untuk menguji masukan dan keluaran dari aplikasi ini.
Hasil keluaran aplikasi bergantung dari teknologi yang digunakan, baik itu
bahasa pemrograman maupun bahasa skrip yang digunakan.
Untuk menguji code HTML dan CSS yang digunakan dapat menggunakan alat
bantu W3C HTML Validation Service di http://validator.w3.org/ dan W3C CSS
Validation Service di http://jigsaw.w3.org/css-validator/
2. Pengujian navigasi (navigation testing)
Hal ini digunakan untuk melihat kesesuaian antara desain navigasi dengan
navigasi yang ada di aplikasi. Navigasi berhubungan dengan link-link yang
terdapat didalam aplikasi.
Untuk menguji link dapat digunakan alat bantu W3C Link Checker Service di
http://validator.w3.org/checklink
3. Pengujian konfigurasi (configuration testing)
Pengujian ini dilakukan pada sistem operasi, browser, sistem perangkat keras
dan perangkat lunak pendukung. Pengujian ini dilakukan untuk menentukan
batas toleransi kebutuhan aplikasi akan perangkat lunak dan perangkat keras
pendukungnya.
Halaman 46 dari 259

Halaman 47 dari 259

Pemrograman Web Semester 1
33 | P a g e
4. Pengujian keamanan dan performansi (security and performance testing)
Pengujian ini dilakukan untuk melihat tingkat keamanan aplikasi dengan cara
menguji aspek-aspek yang dapat menimbulkan gangguan keamanan aplikasi
maupun server. Keamanan aplikasi sangat bergantung pada teknologi
pengembangan website, konfigurasi server yang digunakan dan kelakuan sistem.
Pengujian performansi dapat dilakukan bersamaan dengan pengujian keamanan
aplikasi, karena keamanan aplikasi berbasis web juga tergantung dari
performansi server dan aplikasi tersebut.
Evaluasi oleh konsumen (customer evaluation)
Suatu kegiatan akhir dari siklus proses rekayasa web, akan menentukan apakah
web yang telah selesai dibuat tersebut sesuai dengan yang mereka inginkan.
Apabila aplikasi berbasis web ini belum sesuai dengan kehendak mereka, maka
proses rekayasa web akan terus dilakukan dan dimulai lagi dari tahap formulasi
untuk versi berikutnya.
Perangkat pengembangan aplikasi web
Untuk perangkat pengembangan aplikasi web dapat dikelompokan menjadi
perangkat keras dan perangkat lunak.
Perangkat Keras
Untuk lingkungan pengembangan web yang nyaman, berikut ini peralatan yang
sebaiknya disediakan:
 Komputer Utama, dengan operating system Macintosh, Windows,
ataupun Linux. Perusahaan pengembangan web profesional cenderung
berbasis Macintosh.
 Memori tambahan. sebaiknya computer memiliki memori yang besar,
karena dalam pengembangan web cenderung kita akan membuka
beberapa aplikasi sekaligus.
 Sebuah monitor besar. Meskipun bukan keharusan, monitor besar
memudahkan untuk desainer visual. Semakin besar monitor, semakin
banyak jendela dan panel kontrol dapat terbuka pada waktu yang sama.
Halaman 47 dari 259

Halaman 48 dari 259

PEMROGRAMAN WEB SEMESTER 1
34 | P a g e
 Sebuah scanner dan / atau kamera digital. Jika mengantisipasi
membuat gambar dan tekstur sendiri, akan memerlukan beberapa alat
untuk membuat gambar.
 Sebuah komputer kedua. Banyak web designer merasa berguna
memiliki komputer penguji yang menjalankan platform yang berbeda dari
komputer utama yang mereka gunakan untuk pengembangan. Karena
browser kerja yang berbeda pada Mac dan pada mesin Windows, itu
penting untuk menguji halaman web dalam sebanyak mungkin system
operasi berbeda.
 Perangkat mobile/smartphone. Saat ini banyak orang mengakses web
melalui smartphone/tablet, sehingga kita perlu menguji penampilan dan
kinerja situs web yang kita buat pada mobile browser pada smartphone
atau perangkat tablet. Namun saat ini banyak web emulator yang dapat
digunakan sebagai penguji web kita
Perangkat Lunak
Untuk perangkat lunak pengembangan web dapat dikelompokkan menjadi
beberapa, diantaranya :
Web page authoring
Ini adalah kelompok perangkat lunak seperti desktop publishing tetapi format
yang dihasilkan adalah halaman web. Aplikasi ini biasanya bersifat “WYSIWYG”
(What You See Is What You Get, dibaca “whizzy-wig”) yaitu apa yang kamu lihat,
itulah yang kamu dapatkan. Jadi aplikasi ini biasanya ketika membuat
tampilannya seperti yang akan dihasilkan.
Beberapa contoh aplikasi yang termasuk dalam kelompok ini :
 Adobe Dreamweaver, aplikasi ini berbayar dan dibawah lisensi
perusahaan Adobe, aplikasi ini banyak digunakan oleh pengembang web.
Memiliki banyak fasilitas dan fiture.
 Microsoft Expression Web (lisensi dari Windows). Bagian dari Microsoft’s
suite yang merupakan aplikasi perancangan professional.
 Nvu (Linux, Windows, dan Mac OS X). Tidak ingin membayar untuk Editor
WYSIWYG? Nvu (diucapkan N-view, untuk "pandangan baru") adalah
Halaman 48 dari 259

Halaman 49 dari 259

Pemrograman Web Semester 1
35 | P a g e
sebuah aplikasi open source (sumber terbuka) yang cocok dengan
banyak fitur dalam Adobe Dreamweaver, dan dapat diunduh secara gratis
di nvu.com.
Gambar.2.4Tampilan aplikasi Adobe Dreamweaver CS6 (sumber :
http://imagenes.es.sftcdn.net)
Halaman 49 dari 259

Halaman 50 dari 259

PEMROGRAMAN WEB SEMESTER 1
36 | P a g e
Gambar 2.5. Tampilan aplikasi Microsoft Expression Web (sumber : http://i1-
win.softpedia-static.com)
Gambar. 2.6 Tampilan aplikasi Nvu (sumber : http://net2.com/nvu/screenshots.html)
Halaman 50 dari 259

Halaman 51 dari 259

Pemrograman Web Semester 1
37 | P a g e
Editor
Ini adalah kelompok perangkat lunak yang kebalikan dari Adobe Dreamweaver
Microsoft Expression Web. Aplikasi ini tidak lagi “WYSIWYG” (What You See Is
What You Get”) tetapi lebih ke kode HTML. Beberapa contoh aplikasi yang
termasuk dalam kelompok ini :
 TextPad (Windows saja). TextPad adalah plain-text sederhana dan
murah untuk editor kode di Windows.
 Teks Sublime (Window, Mac, Linux). Editor teks ini terlihat dipreteli
namun memiliki banyak fungsi (seperti kode warna dan ikhtisar kode
penuh) bagi pengembang web.
 Coda oleh Panic (hanya Macintosh). Pengguna Coda seperti alur kerja
yang visual, alat-alat manajemen file, dan built-in akses terminal.
 Textmate oleh MacroMates (hanya Macintosh). Editor teks canggih ini
memiliki alat manajemen proyek dan antarmuka yang terintegrasi dengan
sistem operasi Mac. Hal ini semakin populer karena disesuaikan, kaya
fitur, dan murah.
 BBEdit oleh Bare Bones Software (hanya Macintosh). Untuk
pengembang web banyak fitur shortcut yang besar telah membuat editor
terkemuka berbasis Mac
Aplikasi editing gambar dan menggambar
Untuk menambahkan gambar ke halaman web, akan perlu program editing
gambar. Berikut ini beberapa aplikasi yang cukup populer :
 Adobe Photoshop. Photoshop dapat dikatakan sebagai standar industri
untuk penciptaan gambar baik dalam cetak maupun dunia web.
 Adobe Photoshop Elements. Versi ini lebih ringan dari Photoshop
dirancang untuk mengedit foto dan manajemen, tetapi beberapa
penggemar menemukan bahwa ia memiliki semua alat yang diperlukan
untuk menempatkan gambar pada halaman web.
 Adobe Illustrator. Karena desainer perlu membuat logo, ikon, dan
ilustrasi di berbagai ukuran dan resolusi, untuk itu semua aplikasi ini
sangat membantu. Aplikasi ini juga dapat dipadukan dengan Photoshop
Halaman 51 dari 259

Halaman 52 dari 259

PEMROGRAMAN WEB SEMESTER 1
38 | P a g e
 Adobe Fireworks. Program grafis web ini menggabungkan editor foto
dengan alat untuk membuat ilustrasi berbasis vektor. Ia juga memiliki alat- alat canggih untuk grafis web.
 Corel Paint Shop Photo Pro (Windows saja). Editor gambar yang
penuh fitur ini populer di pengguna Windows, terutama karena harga
yang rendah.
Aplikasi Internet
Karena hasil akhir dari pengembangan halaman web digunakan di Internet, maka
diperlukan beberapa aplikasi untuk membuka halaman web, biasa disebut
“browser”. Berikut ini beberapa aplikasi browser yang cukup populer :
 Windows:
o Internet Explorer
o Chrome
o Firefox
o Safari
o Opera
 Macintosh OS X:
o Safari
o Chrome
o Firefox
o Opera
 Browser perangkat bergerak (mobile)
o Mobile Safari (iOS)
o Android Browser (Android)
o BlackBerry Browser (RIM)
o Nokia Series 40 dan Nokia Browser for Symbian
o Opera Mobile dan Mini (installed on any device)
o Internet Explorer Mobile (Windows Phone)
o Silk (Kindle Fire)
Aplikasi transfer file (FTP/File Transfer Protokol).
Halaman 52 dari 259

Halaman 53 dari 259

Pemrograman Web Semester 1
39 | P a g e
Sebuah aplikasi FTP memungkinkan untuk mengunggah dan mengunduh file
antara komputer kita dan komputer yang akan menjadi tempat halaman web/web
server. Beberapa aplikasi authoring web sebelumnya juga memiliki aplikasi FTP
yang terintegrasi langsung. Ada juga aplikasi FTP khusus, seperti yang
tercantum di bawah ini:
 Windows
 WS_FTP
 CuteFTP
 AceFTP
 Filezilla
 Macintosh
 Transmit
 Cyberduck
 Fetch
c. Rangkuman
Alternatif model dari Pengembangan Aplikasi Web adalah sebagai berikut :
Formulasi, Perencanaan (planning), Analisis (analysis), Rekayasa
(engineering), Implementasi (page generation) & pengujian (testing),
Evaluasi oleh konsumen (customer evaluation).
Untuk perangkat pengembangan aplikasi web dapat dikelompokan menjadi
perangkat keras dan perangkat lunak. Perangkat lunak terdiri dari Web page
authoring, HTML Editor, Aplikasi editing gambar dan menggambar, Aplikasi
Internet, dan Aplikasi transfer file.
d. Tugas
Membuat Ringkasan Tampilan Web pada Aplikasi Browser
Sebelum mengerjakan tugas, buatlah kelompok terdiri atas 2-3 orang.
Peserta Didik mengamati dan memahami berbagai aplikasi web browser.
Masing-masing kelompok membuat ringkasannya. Kemudian secara
bergantian masing-masing kelompok mempresentasikan hasilnya didepan
kelas.
1.1. Carilah beberapa aplikasi browser di Internet dan installah.
Halaman 53 dari 259

Halaman 54 dari 259

PEMROGRAMAN WEB SEMESTER 1
40 | P a g e
1.2. Bukalah beberapa web tentang pariwisata, instansi pemerintah
atau lainnya dengan beberapa aplikasi browser.
1.3. Bandingkan tampilan website dari berbagai aplikasi browser
1.4. Presentasikan hasil ringkasan di depan kelas.
e. Tes Formatif
1.Pada saat tahap desain, ada kegiatan Pembuatan Diagram Wireframe dan
Diagram Situs, jelaskan kegiatan tersebut!
2.Dalam tahap pengembangan, ada kegiatan Authoring, Styling, dan Scripting &
Pemrograman, jelaskan kegiatan tersebut!
3.Sebutkan Perangkat keras yang diperlukan dalam pengembangan web!
4.Sebutkan contoh aplikasi yang termasuk dalam kelompok Web page Authoring!
5.Sebutkan contoh aplikasi yang termasuk dalam kelompok HTML Editor!
6.Sebutkan contoh aplikasi yang termasuk dalam kelompok Editing gambar!
f. Lembar Jawaban Tes Formatif
LJ- 01 : Kegiatan Pembuatan Diagram Wireframe dan Diagram Situs
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
LJ- 02 : Kegiatan Authoring, Styling, dan Scripting & Pemrograman
...................................................................................................................
...................................................................................................................
...................................................................................................................
Halaman 54 dari 259

Halaman 55 dari 259

Pemrograman Web Semester 1
41 | P a g e
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
LJ- 03 : Perangkat keras yang diperlukan dalam pengembangan web
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
LJ- 04 : contoh aplikasi yang termasuk dalam kelompok Web page Authoring
.............................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
LJ- 05 : contoh aplikasi yang termasuk dalam kelompok HTML Editor
.............................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
Halaman 55 dari 259

Halaman 56 dari 259

PEMROGRAMAN WEB SEMESTER 1
42 | P a g e
...................................................................................................................
...................................................................................................................
LJ- 06 : contoh aplikasi yang termasuk dalam kelompok Editing gambar!
.............................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
g. Lembar Kerja Peserta Didik
Halaman 56 dari 259

Halaman 57 dari 259

Pemrograman Web Semester 1
43 | P a g e
3. Kegiatan Belajar 3 : Menyajikan format teks dalam dokumen web
a. Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar 3 ini Peserta Didik diharapkan dapat :
1) Memahami Dasar-dasar HTML
2) Memahami Properti Dokumen Web
3) Menyajikan teks dalam format tertentu pada halaman dokumen web
b. Uraian Materi
1. Anatomi dokumen Web
Dasar-Dasar HTML
HTTP (Hypertext transfer protocol) merupakan protokol yang digunakan untuk
mentransfer data antara web server ke web browser. Protocol ini mentransfer
dokumen-dokumen web yang ditulis atau berformat HTML (Hypertext Markup
Language). Dikatakan markup language karena HTML berfungsi untuk
‘memperindah’ file teks biasa untuk ditampilkan pada program web browser hal
ini dilakukan dengan menambahkan elemen atu sering disebut sebagai tag-tag
pada file teks biasa tersebut.
Saat ini sudah dikenal HTML5 yang menawarkan berbagai fitur menarik yang
tidak didukung oleh HTML sebelumnya. Beberapa fitur yang tersedia pada
HTML5 antara lain sebagai berikut.
o Canvas. Memungkinkan pembuatan gambar dalam kanvas.
Jadi, gambar tidak lagi diambil dari gambar utuh, melainkan
bisa disusun sendiri, bak menggunakan program Paint.
o Header. Berguna untuk menyatakan suatu judul, yang bisa
diisi dengan elemen logo dan nama perusahaan.
Halaman 57 dari 259

Halaman 58 dari 259

PEMROGRAMAN WEB SEMESTER 1
44 | P a g e
o Footer. Merupakan kebalikan dari header. Sebagai catatan
kaki, elemen ini berguna untuk menaruh informasi di bagian
bawah halaman web.
o Time. Elemen ini berguna untuk menyajikan informasi
tentang waktu.
o Audio. Memungkinkan penyajian player untuk memutar
suara.
o Video. Memungkinkan player untuk memainkan film.
Secara prinsip, fitur pada HTML dapat dikelompokkan ke dalam :
o Struktur halaman ;
o Presentasi visual ;
o Peranti penyaji gambar ;
o Pendukung media ; dan
Peningkatan koneksi dengan JavaScript.
Tag HTML biasanya berupa tag-tag yang berpasangan dan ditandai
dengan symbol lebih besar (<) dan (>). Pasangan dari sebuah tag
ditandai dengan symbol garis miring (/). Misalnya pasangan dari tag
<contoh > adalah</contoh>. Dalam hal ini <contoh> kita sebut
sebagai elemen dan biasanya dalam suatu elemen terdapat atribut- atribut untuk mengatur elemen itu. Jadi misalnya elemen <contoh>
bila ditulis dengan atributnya adalah sebagai berikut:
<contoh atribut1=”nilai_atribut1”atribut2=”nilai_atribut2=”...>.
Dalam penulisan tag HTML tidaklah case sensitive artinya
pengguna huruf kecil ataupun capital tidaklah menjadi masalah.
Struktur Dasar Dokumen HTML
Halaman 58 dari 259

Halaman 59 dari 259

Pemrograman Web Semester 1
45 | P a g e
Setiap dokumen HTML memiliki struktur dasar atau susunan file
sebagai berikut :
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
Berisi tentang text, gambar,
atau apapun yang
tampil pada dokumen web.
</body>
</html>
Seperti terlihat, struktur file HTML diawali dengan sebuah tag<html>
dan ditutup dengan tag </html>. Di dalam tag ini terdapat dua buah
bagian besar, yaitu yang diapit oleh tag<head>...</head> dan tag
<body>...</body>.
Bagian yang diapit oleh tag HEAD merupakan header dari
halaman HTML dan tidak ditampilkan pada browser. Bagian ini
berisi tag-tag header seperti <tittle>... </tittle> yang berpungsi
untuk mengeluarkan judul pada tittle bar window web browser.
Bagian kedua, yang diapit ole tag BODY merupakan bagian yang
akan ditampilkan pada halaman web browser nantinya. Pada
bagian ini anada akan menuliskan semua jenis informasi berupa
teks dengan bermacam format maupun gambar yang ingin
sampaikan pada pengguna nantinya.
Halaman 59 dari 259

Halaman 60 dari 259

PEMROGRAMAN WEB SEMESTER 1
46 | P a g e
Pengaturan Properti Dokumen
Properti document diatur melalui atribut-atribut yang terdapat dalam
elemen <body>. Sebagai contoh adalah pengaturan warna latar
belakng halaman, wana teks, warna link dan lain-lain.
Kode Warna
Dalam pengaturan warna menggunakan kode RGB yang mana
ditampilkan dalam nilai heksadesimal. Setiap bagian dua gigit kode
menunjukkan banyaknya intensitas dari kombinasi warna merah,
hijau dan biru. Sebagai contoh 00 pada dua digit pertama berarti
tidak ada warna merah dalam kobinasi warna berikut ini adalah
contoh kode warna :
Color hexadecimal Color Hexadecimal
White #FFFFFF Black #000000
Red #FF0000 Green #00FF00
Blue #0000FF Magenta #FF00FF
Cyan #00FFFF Yellow #FFFF00
Aquamarine #70DB93 Chocolate #5C3317
Violet #9F5F9F Brass #B5A642
Coper #B87333 Pink #FF6EC7
Atribut Elemen <body>
BACKGROUND = Lokasi dan nama file (latar belakng dokumen
image dokumrn)
BGCOLOR = Warna (warna latar belakng dokumen,
default putih)
TEXT = Warna (warna teks dokumen, default hitam)
Halaman 60 dari 259

Halaman 61 dari 259

Pemrograman Web Semester 1
47 | P a g e
LINK = Warna (warna link dokumen, default biru)
VLINK = Warna (warna visited link dokumen, default ungu)
ALINK = Warna (warna aktif link dokumen, default merah)
Elemen Heading <h1>... <h6>
Tag heading berfungsi untuk memformat heading (judul dan sub- judul) dari suatu halam web. Heading ini akan memperbesar ukuran
huruf unruk setiap jenis heading. Ad 7 buah heading yang dikenal di
HTML, yaitu dari <h1> sampai <h6>.
Elemen yang dihilangkan di HTML5
 Berikut ini elemen HTML 4.01 yang dihilangkan di HTML5:
 <acronym>
 <applet>
 <basefont>
 <big>
 <center>
 <dir>
 <font>
 <frame>
 <frameset>
 <noframes>
 <strike>
 <tt>
Dokumen HTML5
Sebuah dokumen HTML5 seperti berikut ini, cukup ditulis dengan Text Editor
ataupun HTML Editor :
<! DOCTYPE HTML>
Halaman 61 dari 259

Halaman 62 dari 259

PEMROGRAMAN WEB SEMESTER 1
48 | P a g e
<html>
<head>
<title>Tes HTML5</title>
</head>
<body>
Selamat belajar HTML5
</body>
</html>
Berikut ini penjelasan dari dokumen HTML5 di atas :
o Sebuah dokumen HTML5 diawali dengan <!DOCTYPE HTML>.
o Tanda seperti <html> disebut tag. Sebuah tag seperti itu menyatakan
sebuah elemen dalam dokumen html.
o Beberapa tag berpasangan. Sebagai contoh, <head> berpasangan
dengan </head>.
o Namun, tidak semua tag berpasangan. Sebagai contoh, <br> tidak punya
pasangan. Khusus untuk tag seperti ini, tidak ada keharusan untuk
menyertakan tanda / sebelum >. Pada XHTML, tanda seperti / memang
diharuskan untuk ditulis.
o Pasangan <html>..</html> menyatakan awal dokumen HTML.
o Di dalam <html>..</html> terdapat pasangan <head>..</head> dan
<body>..</body>.
o Pasangan <head>..</head> menyatakan bagian judul dokumen HTML.
Isinya paling tidak berupa pasangan <tittle>..</tittle>.
o Pasangan <body>..</body> menyatakan bagian tubuh dokumen. Pada
contoh,
Selamat belajar HTML5
muncul pada badan dokumen. Apabila dibuka di web browser tampilannya
sebagai berikut :
Halaman 62 dari 259

Halaman 63 dari 259

Pemrograman Web Semester 1
49 | P a g e
Gambar 3.1 Tampilan Dokumen HTML di Web Browser
Gambar 3.2 berikut ini memperlihatkan penjelasan secara visual
terhadap dokumen HTML di depan.
Halaman 63 dari 259

Halaman 64 dari 259

PEMROGRAMAN WEB SEMESTER 1
50 | P a g e
Gambar 3.2 Penjelasan dokumen HTML
c. Rangkuman
 Dokumen-dokumen web ditulis dalam format HTML (Hypertext Markup
Language). Dikatakan markup language karena HTML berfungsi untuk
‘memperindah’ file teks biasa untuk ditampilkan pada program web
browser hal ini dilakukan dengan menambahkan elemen atu sering
disebut sebagai tag-tag pada file teks biasa tersebut
 Struktur file HTML diawali dengan sebuah tag<html> dan ditutup
dengan tag </html>. Di dalam tag ini terdapat dua buah bagian besar,
yaitu yang diapit oleh tag<head>...</head> dan tag <body>...</body>
d. Tugas
Untuk membuat dokumen HTML dengan Text Editor paling tidak ada 4 tahap :
 Buka Text Editor/HTML Editor
 Ketikkan dokumen HTML
 Simpan dengan format *.html
 Buka hasilnya/dokumen html dengan web browser
Buatlah beberapa dokumen HTML berikut ini. :
i. HTML Heading
<!DOCTYPE html>
<html>
<head>
<title>Heading</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
Halaman 64 dari 259

Halaman 65 dari 259

Pemrograman Web Semester 1
51 | P a g e
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Bagaimana tampilannya? Apa yang dapat kamu simpulkan tentang elemen
Heading?
ii. HTML Paragraph
Bagaimana tampilannya? Apa yang dapat kamu simpulkan tentang elemen
Paragraph?
iii. HTML Link
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<head>
<tittle>Paragraf</tittle>
</head>
<body>
<p> Ini adalah paragraf. Ini adalah paragraf. Ini
adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf. Ini adalah paragraf. </p>
<p> Ini paragraph lainnya. Ini paragraph lainnya.
Ini paragraph lainnya. Ini paragraph lainnya. Ini
paragraph lainnya. </p>
</body>
</html>
Halaman 65 dari 259

Halaman 66 dari 259

PEMROGRAMAN WEB SEMESTER 1
52 | P a g e
<head>
<tittle>Link</tittle>
</head>
<body>
<a href="http://www.w3schools.com">
Ini adalah link</a>
</body>
</html>
Bagaimana tampilannya? Apa yang dapat kamu simpulkan tentang elemen
Paragraph?
iv. HTML Image
<!DOCTYPE html>
<html>
<head>
<tittle>Gambar/Image</tittle>
</head>
<body>
<img src="w3schools.jpg" alt="W3Schools.com"
width="104" height="142">
</body>
</html>
Bagaimana tampilannya? Apa yang dapat kamu simpulkan tentang
elemen Image?
e. Tes Formatif
1. HTML kepanjangan dari
Halaman 66 dari 259

Halaman 67 dari 259

Pemrograman Web Semester 1
53 | P a g e
a) Hyperlinks and Text Markup Language
b) Hyper Text Markup Language
c) Home Tool Markup Language
d) Homepage Text Markup Language
2. Siapakah yang membuat standar Web?
a) Google
b) Microsoft
c) Mozilla
d) The World Wide Web Consortium
3. Pilih tag HTML yang benar untuk ukuran huruf heading terbesar
a) <head>
b) <h6>
c) <heading>
d) <h1>
4. Pilih tag HTML yang benar untuk membuat huruf italic
a) <italic>
b) <i>
5. Apa Tag HTML yang benar untuk membuat hyperlink?
a) <a name="http://www.w3schools.com">W3Schools.com</a>
b) <a>http://www.w3schools.com</a>
c) <a href="http://www.w3schools.com">W3Schools</a>
d) <a url="http://www.w3schools.com">W3Schools.com</a>
6. Sebutkan 4 tag minimal dalam sebuah dokumen HTML!
f. Lembar Jawaban Tes Formatif
1. ...........................................................................................
2. ...........................................................................................
3. ...........................................................................................
4. ...........................................................................................
Halaman 67 dari 259

Halaman 68 dari 259

PEMROGRAMAN WEB SEMESTER 1
54 | P a g e
5. ...........................................................................................
6. ...........................................................................................
g. Lembar Kerja Peserta Didik
Halaman 68 dari 259

Halaman 69 dari 259

Pemrograman Web Semester 1
55 | P a g e
4. Kegiatan Belajar 4 : Menyajikan pemformatan Teks dan Paragraf
Web
a. Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar 4 ini Peserta Didik diharapkan dapat :
1) Memahami Pemformatan Teks
2) Memahami Pemformatan Paragrap Web
3) Menyajikan pemformatan paragraph pada halaman dokumen web
b. Uraian Materi
1. Pemformatan Teks
Berikut ini adalah contoh yang dihasilkan pemformatan teks pada dokumen
web :
HTML menggunakan tag seperti <b> dan <i> untuk memformat output,
seperti teks tebal atau miring.
Tag HTML ini disebut tag format, selengkapnya dalam tabel berikut :
Tag HTML Pemformatan Teks
Tag Deskripsi
<b> Mendefinisikan teks tebal
<em> Mendefinisikan teks menekankan
<i> Mendefinisikan teks miring
<small> Mendefinisikan teks kecil
<strong> Mendefinisikan teks penting
Halaman 69 dari 259

Halaman 70 dari 259

PEMROGRAMAN WEB SEMESTER 1
56 | P a g e
<sub> Mendefinisikan teks di bawah garis
<sup> Mendefinisikan teks di atas garis
<ins> Mendefinisikan teks sisipan
<del> Mendefinisikan teks dicoret
<mark> Mendefinisikan teks ditandai
Tag HTML “keluaran computer”
Tag Deskripsi
<code> Mendefinisikan teks kode komputer
<kbd> Mendefinisikan teks keyboard
<samp> Mendefinisikan teks contoh kode
<var> Mendefinisikan teks variabel
<pre> Mendefinisikan teks terformat
HTML Citations, Quotations, and Definition Tags
Tag Deskripsi
<abbr> Mendefinisikan sebuah singkatan
<address> Mendefinisikan alamat atau kontak informasi
<bdo> Mendefinisikan arah teks
<blockquote> Mendefinisikan sebuah bagian yang dikutip dari sumber
lain
<q> Mendefinisikan sebuah kutipan pendek
<cite> Mendefinisikan judul karya
<dfn> Mendefinisikan sebuah istilah definisi
2. Pemformatan Paragrap
Tag HTML untuk paragrap adalah <p>, dengan tag penutup </p>. Berikut ini
contohnya :
<p>ini adalah paragrap</p>
Halaman 70 dari 259

Halaman 71 dari 259

Pemrograman Web Semester 1
57 | P a g e
<p>Ini paragrap yang lain</p>
c. Rangkuman
Pemformatan teks digunakan untuk memformat teks, seperti huruf tebal,
miring dsb.
Perfomatan teks ini juga digunakan untuk menampilkan “keluaran computer”,
HTML Citations, Quotations, and Definition
d. Tugas
Buatlah dokumen-dokumen HTML berikut ini, diskusikan hasilnya dengan
teman-temanmu.
1.Format Teks
<html>
<head>
<title>Format Teks</title>
</head>
<body>
<p>
<b>Tulisan ini ditebalkan (bold)</b>
</p>
<p>
<strong>Tulisan ini ditebalkan
(strong)</strong>
</p>
<p>
Halaman 71 dari 259

Halaman 72 dari 259

PEMROGRAMAN WEB SEMESTER 1
58 | P a g e
<em>Tulisan ini miring (emphasize)
</em>
</p>
<p>
<big>Tulisan ini besar (big)</big>
</p>
<p>
<i>Tulisan ini miring (italic) </i>
</p>
<p>Tulisan ini
<sub>subscript</sub>
</p>
<p>Tulisan ini
<sup>superscript</sup>
</p>
</body>
</html>
2.Pre Format
<HTML>
<HEAD>
<TITLE>Preformat </TITLE>
Halaman 72 dari 259

Halaman 73 dari 259

Pemrograman Web Semester 1
59 | P a g e
</HEAD>
<BODY>
<H2>Daftar Harga Keladi:</H2>
<PRE>
Red Flash.........35.000
Red Fire..........60.000
Fannie Munson.....60.000
</PRE>
Harga sewaktu-waktu bisa berubah.
</BODY>
</HTML>
3.Pre Format
<html>
<head>
<title>Tag Preformatted</title>
</head>
<body>
<pre>
This section provides a brief overview of the menus in
Dreamweaver.
The File menu and Edit menu contain the standard menu
Halaman 73 dari 259

Halaman 74 dari 259

PEMROGRAMAN WEB SEMESTER 1
60 | P a g e
items for File and Edit.
menus, such as New, Open, Save, Save All, Cut, Copy,
Paste,
Undo,and Redo
</pre>
<pre>
Ini adalah
preformatted text.
Menampilkan spasi
Dan line break apa adanya.
</pre>
<p>Tag PRE cocok digunakan untuk menampilkan kode bahasa
pemrograman komputer :</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
Halaman 74 dari 259

Halaman 75 dari 259

Pemrograman Web Semester 1
61 | P a g e
5.Quotation
<html>
<head>
<title>quotation</title>
</head>
<body>
tulisan ini BUKAN quotation
<blockquote>
tulisan ini adalah quotation <br>
tulisan ini adalah quotation <br>
tulisan ini adalah quotation <br>
</blockquote>
</body>
</html>
e. Tes Formatif
1. Isikan tag-tag untuk deskripsi berikut ini !
Tag Deskripsi
Mendefinisikan teks tebal
Mendefinisikan teks menekankan
Mendefinisikan teks miring
Mendefinisikan teks kecil
Mendefinisikan teks penting
Mendefinisikan teks di bawah garis
Mendefinisikan teks di atas garis
Halaman 75 dari 259

Halaman 76 dari 259

PEMROGRAMAN WEB SEMESTER 1
62 | P a g e
Mendefinisikan teks sisipan
Mendefinisikan teks dicoret
Mendefinisikan teks ditandai
2. Apa fungsi tag-tag berikut ini !
a. <p> </p>
b. <code>
c. <pre>
f. Lembar Jawaban Tes Formatif
LJ- 01 : Tag untuk deskripsi
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
LJ- 02: Fungsi masing-masing tag
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
Halaman 76 dari 259

Halaman 77 dari 259

Pemrograman Web Semester 1
63 | P a g e
g. Lembar Kerja Peserta Didik
Halaman 77 dari 259

Halaman 78 dari 259

PEMROGRAMAN WEB SEMESTER 1
64 | P a g e
5. Kegiatan Belajar 5 : Menyajikan hasil Pembuatan List Minimal
a. Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar 5 ini Peserta Didik diharapkan dapat :
1) Memahami Pembuatan list minimal
2) Menyajikan hasil pembuatan list minimal
b. Uraian Materi
1) Pengertian List
List adalah bagian teks di dalam dokumen yang berisi daftar item dari suatu
kelompok atau grup tertentu. Sebagai contoh, dalam situs web yang bertema
kuliner, list dapat berupa daftar dari makanan dan minuman, beserta
harganya. List dapat juga berupa prosedur (urutan langkah-langkah) dari
suatu pekerjaan tertentu, yang sifatnya harus dilakukan secara berurutan
dari langkah pertama sampai langkah terakhir.
Contoh List :
Daftar Makanan :
 Bakso
 Soto
 Sate
 Gule
Daftar Minuman :
 Juice Jambu
 Juice Alpukat
 Juice Tomat
2) Tipe Daftar dalam Dokumen HTML
Dalam dokumen HTML, tipe daftar dibedakan menjadi tiga, yaitu :
Halaman 78 dari 259

Halaman 79 dari 259

Pemrograman Web Semester 1
65 | P a g e
 Daftar berurutan (ordered list)
 Daftar tidak berututan (unordered list)
 Daftar definisi (definition list)
3) Daftar Berurutan (Ordered List)
Daftar yang berurutan biasanya ditandai dengan penggunaan penomoran
tertentu. Penomoran ini bias menggunakan angka (1, 2, 3,...) maupun karakter
alphabet terntentu (a, b, c,... atau i, ii, iii,...). Daftar yang berurutan umumnya
dipakai untuk item-item yang saling berhubungan satu sama lain, atau untuk
menuliskan langkah-langkah atau prosedur dari kegiatan terntentu yang tidak
dapat dilakukan secara acak.
Contoh daftar yang berurutan adalah pada cara membuat dokumen HTML,
misalnya :
Langkah-langkah membuat dokumen HTML :
1. Jalankan aplikasi Text Editor
2. Isikan kode HTML ke dalam Text Editor
3. Simpan file dengan ekstension .htm atau .html
4. Jalankan file HTML menggunakan aplikasi Web browser
untuk menampilkan hasilnya
Untuk membuat suatu daftar yang berurutan dalam dokumen HTML, digunakan
tag <ol> (ordered list), yang berpasangan dengan tag </ol>. Tag <ol> digunakan
untuk memulai suatu daftar berurutan tertentu, sedangkan </ol> berfungsi untuk
menandakan bahwa daftar tersebut sudah berakhir.
Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item,
yang kemudian perlu ditutup dengan tag </li>.
Contoh penulisan adalah sebagai berikut :
<ol>
<li>Urutan Pertama</li>
Halaman 79 dari 259

Halaman 80 dari 259

PEMROGRAMAN WEB SEMESTER 1
66 | P a g e
<li>Urutan Kedua</li>
</ol>
Adapun atribut untuk tag <ol> adalah “type” yang menunjukan jenis
penomorannnya. Secara standart, tipenya adalah menggunakan penomoran 1, 2,
3, 4 dst.
Selain tipe default, tipe lain yang dapat digunakan untuk keperluan penomoran
dalam suatu list adalah :
Tipe Keterangan
A Membuat list dengan penomoran berupa karakter A, B, C, dst
a Membuat list dengan penomoran berupa karakter a, b, c, dst
I Membuat list dengan penomoran berupa karakter I, II, III, dst
i Membuat list dengan penomoran berupa karakter i, ii, iii, dst
4) Daftar Tidak Berurutan (Unordered List)
Daftar yang tidak berurutan adalah daftar yang item-itemnya dapat diubah
posisinya secara acak. Daftar seperti ni tidak menggunakan penomoran seperti
di atas, melainkan hanya dengan menggunakan tanda atau symbol tertentu,
misalnya gambar kotak atau bulat (bullet).
Contoh :
Daftar buah :
 Mangga
 Jambu
 Semangka
 Rambutan
 Jeruk
Pada contoh di atas, kita dapat mengubah/mengacak secara bebas
urutan dari masing-masing item yang ada. Hal ini disebabkan karena setiap item
yang ada tidak memiliki keterkaitan satu sama lain dengan item lainnya, berbeda
dengan suatu urutan langkah tertentu yang harus ditulis secara berurutan.
Halaman 80 dari 259

Halaman 81 dari 259

Pemrograman Web Semester 1
67 | P a g e
Untuk membuat suatu daftar yang tidak berurutan dalam dokumen HTML,
digunakan tag <ul> (unordered list), yang berpasangan dengan tag </ul>. Tag
<ul> digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan </ul>
berfungsi untuk menandakan bahwa daftar tersebut sudah berakhir.
Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item,
yang kemudian perlu ditutup dengan tag </li>.
Contoh penulisan adalah sebagai berikut :
<ul>
<li>Item satu</li>
<li>Item dua</li>
</ul>
Adapun atribut untuk tag <ul> adalah “type” yang menunjukan jenis tanda untuk
setiap item berupa tanda bulatan untuk defaultnya..
Selain tipe default, tipe lain yang dapat digunakan untuk keperluan unordered list
adalah :
Tipe Keterangan Contoh Penulisan
Disk Tanda bulatan hitam <ul type=”disk”>
Circle Tanda bulatan putih <ul type=”circle”>
Square Tanda kotak <ul type=”square”>
5) Daftar Definisi (Definition List)
Daftar Definisi adalah suatu daftar yang berisi kumpulan definisi dari suatu istilah
tertentu, misalnya daftar definisi istilah HTML.
Contoh :
HTML
Hyper Text Mark-up Language
WWW
World Wide Web
Halaman 81 dari 259

Halaman 82 dari 259

PEMROGRAMAN WEB SEMESTER 1
68 | P a g e
Browser
Aplikasi untuk membuka dokumen html/situs
web.
c. Rangkuman
Tag Fungsi
<div> ... </div> Sebuah wilayah teks yang akan diformat
<dl> ... </dl> Sebuah daftar definisi
<dt> ... </dt> Sebuah istilah definisi, sebagai bagian dari
daftar definisi.
<dd> ... </dd> Sesuai untuk istilah definisi, sebagai
bagian dari daftar definisi
<ol> ... </ol> Ordered List atau daftar berurutan
<ul> ... </ul> Un-Ordered List atau daftar tidak berurutan
<li> ... </li> Sebuah daftar item untuk digunakan dengan
<ol> atau <ul>.
d. Tugas
Buatlah dokumen HTML berikut ini :
<!DOCTYPE >
<html>
<head>
<title>Vertebrata</title>
</head>
<body>
<h1>Vertebrata</h1>
<ul>
<li>Ikan</span>
<ul>
Halaman 82 dari 259

Halaman 83 dari 259

Pemrograman Web Semester 1
69 | P a g e
<li>Patin</li>
<li>Gurami</li>
<li>Mujair</li>
</ul>
</li>
<li>Amfibi</span>
<ul>
<li>Ordo Anura
<ul>
<li>Katak Hijau </li>
<li>Katak Darat</li>
<li>Katak Ungu</li>
</ul>
</li>
<li>Ordo Urodela
<ul>
<li>Salamander</li>
<li>Mudpuppy</li>
</ul>
</li>
</ul>
</li>
<li>Reptil</span>
<ul>
<li>Buaya</li>
<li>Ular Kobra</li>
<li>Penyu</li>
</ul>
</li>
</ul>
</body>
</html>
- Apa yang dapat kamu simpulkan dari daftar di atas?
- Coba buatlah tipe bentuk bullet yang berbeda dari daftar di atas!
Halaman 83 dari 259

Halaman 84 dari 259

PEMROGRAMAN WEB SEMESTER 1
70 | P a g e
e. Tes Formatif
1. Apa Perbedaan tag <ol> dengan <ul> ?
2. Apa perbedaan <dl> dan <dt> ?
3. Apa fungsi <li> ?
4. Sebutkan contoh type bullet dalam daftar tidak berurutan!
f. Lembar Jawaban Tes Formatif
LJ- 01 : Perbedaan tag <ol> dengan <ul> :
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
LJ- 02 : Perbedaan tag <dl> dengan <dt> :
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
LJ- 03 : Fungsi <li> :
...................................................................................................................
Halaman 84 dari 259

Halaman 85 dari 259

Pemrograman Web Semester 1
71 | P a g e
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
LJ- 04 : Contoh type bullet dalam daftar tidak berurutan:
.............................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
g. Lembar Kerja Peserta Didik
Halaman 85 dari 259

Halaman 86 dari 259

PEMROGRAMAN WEB SEMESTER 1
72 | P a g e
Halaman 86 dari 259

Halaman 87 dari 259

Pemrograman Web Semester 1
73 | P a g e
6. Kegiatan Belajar 6 : Menyajikan Pembuatan List Kombinasi
a. Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar 6 ini Peserta Didik diharapkan dapat :
1) Memahami Pembuatan list kombinasi
2) Menyajikan Pembuatan list kombinasi
b. Uraian Materi
1) Pembuatan list Kombinasi
Perhatikan daftar berikut ini :
Daftar Menu
1. Makanan
 Bakso
 Mie Ayam
 Soto
2. Minuman
 Teh Panas
 Jeruk Panas
 Kopi
Dapat dilihat bahwa daftar di atas adalah gabungan daftar berurutan dan
daftar tidak berurutan.
Untuk membuat daftar diatas pada dokumen HTML maka cukup
menggabungkan <ol> dangan <ul>.
Perhatikan penggabungan <ol> dengan <ul> berikut ini :
<ol>
<li></li>
<li>
<ul>
<li></li>
<li></li>
Halaman 87 dari 259

Halaman 88 dari 259

PEMROGRAMAN WEB SEMESTER 1
74 | P a g e
<li></li>
</ul>
</li>
</ol>
Ketika kita menggabungkan tag tidak berurutan <ul> tipe bullet dengan tag
tidak berurutan <ul> pada daftar berikutnya, maka daftar yang kedua oleh
browser akan ditampilkan secara otomatis menjadi daftar bullet.
Tidak demikian dengan daftar berurutan <ol>, maka agar tipenya sama
dengan daftar berurutan sebelumnya, kita harus memberikan atribut tipe
yang sama dengan daftar berurutan sebelumnya. Contoh :
<ul>
<li> </li>
<ol type=i>
<li > </li>
<li> </li>
</ol>
<li>
<ol type=i>
<li > </li>
<li> </li>
</ol>
</li>
<li>
</li>
</ul>
Memulai dengan nomor tertentu
Untuk membuat daftar bernomor dengan urutan yang tidak dimulai dengan 1
(nomor/huruf awal), maka kita harus mendefinisikan dengan atribut “start”
pada elemen tag <ol>.
Misalnya contoh berikut :
Halaman 88 dari 259

Halaman 89 dari 259

Pemrograman Web Semester 1
75 | P a g e
<ol start="17">
<li>Blok huruf dengan text tool</li>
<li>Klik tab karakter</li>
<li>Pilih jenis huruf pada menu pop-up .</li>
</ol>
Maka urutan daftar yang ditampilkan akan dimulai dengan 17, selanjutnya 18
dan 19.
Demikian juga apabila :
<ol type=”A” start="17">
<li>Blok huruf dengan text tool</li>
<li>Klik tab karakter</li>
<li>Pilih jenis huruf pada menu pop-up .</li>
</ol>
Maka urutan daftar yang ditampilkan akan dimulai dengan Q, selanjutnya R,
dan S.
Penggunaan daftar bernomor yang tidak dimulai dengan nomor awal,
biasanya diperlukan apabila daftar yang kita buat sudah diselingi beberapa
paragraph, sehingga ketika dibuat daftar bernomor, secara default akan
dimulai dari awal, padahal harusnya melanjutkan nomor sebelumnya. Maka
digunakanlah atribut “start=” tersebut.
c. Rangkuman
List kombinasi adalah kombinasi daftar berurutan dengan tidak berurutan
sekaligus. Untuk membuat daftar/list kombinasi yaitu menggabungkan atau
mengkombinasikan tag <ol> dengan <ul>. Daftar berurutan tidak selalu diawali
dengan nomor satu, tetapi dapat diawali dengan nomor tertentu, yaitu dengan
memberi atribut start=” ”
d. Tugas
1. Buatlah daftar seperti berikut ini dalam dokumen web :
Halaman 89 dari 259

Halaman 90 dari 259

PEMROGRAMAN WEB SEMESTER 1
76 | P a g e
2. Buatlah daftar seperti berikut ini dalam dokumen web :
e. Tes Formatif
1.Bagaimana cara membuat list kombinasi?
2. Atribut apa yang digunakan untuk memulai list berurutan yang tidak dimulai
dengan 1 (pertama)? Berikan contohnya!
3. Ketika membuat daftar berurutan diselingi daftar tidak berurutan, maka agar
tipenya sama dengan daftar berurutan sebelumnya, apa yang harus dilakukan?
4. Apa yang ditampilkan dari tag berikut ini :
<ol type="A" start="10">
<li>Blok huruf dengan text tool</li>
<li>Tekan CTRL+C</li>
Halaman 90 dari 259

Halaman 91 dari 259

Pemrograman Web Semester 1
77 | P a g e
<li>Berikutnya tekan CTRL+V untuk</li>
</ol>
5. Apa yang ditampilkan dari tag berikut ini :
<ol type="I" start="10">
<li>Blok huruf dengan text tool</li>
<li>Tekan CTRL+C</li>
<li>Berikutnya tekan CTRL+V untuk paste</li>
</ol>
f. Lembar Jawaban Tes Formatif
LJ- 01 : Cara membuat List Kombinasi :
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
LJ- 02 : Atribut yang digunakan dan contohnya :
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
LJ- 03 : Yang harus dilakukan :
...................................................................................................................
...................................................................................................................
Halaman 91 dari 259

Halaman 92 dari 259

PEMROGRAMAN WEB SEMESTER 1
78 | P a g e
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
LJ- 04 : Tampilan yang dihasilkan :
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
LJ- 05 : Tampilan yang dihasilkan :
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
...................................................................................................................
g. Lembar Kerja Peserta Didik
Halaman 92 dari 259

Halaman 93 dari 259

Pemrograman Web Semester 1
79 | P a g e
.
Halaman 93 dari 259

Halaman 94 dari 259

PEMROGRAMAN WEB SEMESTER 1
80 | P a g e
7. Kegiatan Belajar 7 : Menyajikan Pembuatan Tabel
a. Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar 7 ini Peserta Didik diharapkan dapat :
1) Memahami Pembuatan Tabel
2) Menyajikan Pembuatan Tabel
b. Uraian Materi
1) Pembuatan Tabel
Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang
terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk table
pada HTML, digunakan Tag<Table>.
Elemen table berisi property <tr> untuk menentukan baris(table row) yang
didalamnya terdapat properti <td> untuk menampkan data pada setiap sel
table(table data).
Struktur elemen table adalah sebagai berikut:
<table>
<tr>
<td>data baris 1 kolom 1</td>
<td>data baris 1 kolom 2</td>
<table>
<tr>
<td>data baris 1 kolom 1</td>
<td>data baris 1 kolom 2</td>
</tr>
</table>
Halaman 94 dari 259

Halaman 95 dari 259

Pemrograman Web Semester 1
81 | P a g e
</tr>
</table>
Untuk mendifinisikan table heading atau judul tiap kolom menggunakan
tag <th> ..... </th>
Atribut Elemen Tabel
Width =panjang(lebar table, pixel atau persen)
Height =panjang(tinggi table, pixel atau persen)
Border =pixel(tebal garis tepi)
Cellspacing =pixel(spasi antar sel)
Cellpadding =pixel(spasi di dalam sel)
Align =[left|center|right](perataan table)
Bgcolor =warna(warna latar belakang table)
Atribut Table Row
Align =[left|center|right](perataan sebaris sel secara horizontal)
Valign =[top|middle|bottom](perataaan sebaris sel secara vertical)
Bgcolor =warna(warna latar belakang baris)
Atribut Tabel Data
Align =[left|center|right](perataan horizontal)
Width =[top|middle|bottom](perataan vertical)
Height =pixel(tinggi sel, pixel atau persen)
Bgcolor =warna(warna latar belakang sel)
Halaman 95 dari 259

Halaman 96 dari 259

PEMROGRAMAN WEB SEMESTER 1
82 | P a g e
c. Rangkuman
Untuk mengatur teks ataupun gambar dalam baris dan kolom, digunakanlah
pemformatan Tabel
Tag Utama untuk tabel adalah :
Tag Fungsi
<table> ..... </table> Mendifinisikan Tabel
<tr> ... </tr> Mendifinisikan table row atau baris
<td> ... </td> Data pada tabel/sel
<th> ... </th> Mendifinisikan table heading atau judul tiap kolom
d. Tugas
01:tabel1.html
Salin script HTML berikut untuk mencoba tag table berikut property kolom
dan barisnya, jangan lupa disimpan dengan ekstensi .html.kemudian coba di
web browser.
<html>
<head>
<title>tabel</title>
</head>
<body>
berikut contoh tabel dengan rowspan dan colspan
<table width=80% border=2 cellspacing=0 cellpadding=0>
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
Halaman 96 dari 259

Halaman 97 dari 259

Pemrograman Web Semester 1
83 | P a g e
<tr>
<td colspan=2>baris 2 kolom 1</td>
</tr>
<tr>
<td rowspan=2baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
</table>
</body>
</html>
02: tabel2.html
<html>
<head>
<tittle>penggunaan ALIGN</tittle>
</head>
<body>
<table border="1">
<caption>Daftar wiraniaga</caption>
<tr>
<th colspan ="2" rowspan = "2">WIRANIAGA</th>
<th colspan ="3">KOTA</th>
</tr>
Halaman 97 dari 259

Halaman 98 dari 259

PEMROGRAMAN WEB SEMESTER 1
84 | P a g e
<tr>
<th>SEMARANG</th>
<th>Kudus</th><th>Solo</th>
<tr>
<tr>
<th rowspan ="2">Jenis Kelamin</th>
<th>Pria</th>
<th align= "right">30</td>
<td align= "right">20</td>
<td align= "right">30</td>
</tr>
<tr>
<th>wanita</th>
<td align= "right">20</td>
<td align= "right">8</td>
<td align= "right">18</td>
</tr>
</table>
</body>
</html>
Halaman 98 dari 259

Halaman 99 dari 259

Pemrograman Web Semester 1
85 | P a g e
03: tabel3.html
Buatlah dokumen HTML sehingga menghasilkan tampilan tabel seperti berikut
ini (aturlah sedemikian rupa pada atribut-atribut tabel untuk mendapatkan dua
buah tampilan yang berbeda, sebagaimana dibawah ini ).
Tabel 1.
Nama Usia
Ali 25
Fahmianto 27
Tampilan tabel 2
Nama Usia
Ali 25
Fahmianto 27
e. Tes Formatif
1. Buatlah tabel sederhana, dengan dua baris dan dua kolom, berilah border
keseruhannya
2. Bagaimana jika pada tabel di atas akan diberi spasi Antara border/batas
tabel dengan sel sebesar 30?
3. Dari tabel di atas, buatlah warna berbeda tiap sel-nya, dengan ketentuan :
sel kiri atas hijau, sel kanan atas merah, sel kiri bawah kuning, dan sel kanan
bawah biru?
f. Lembar Jawaban Tes Formatif
LJ- 01 : Tag HTML Tabel dua baris dua kolom
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
Halaman 99 dari 259

Halaman 100 dari 259

PEMROGRAMAN WEB SEMESTER 1
86 | P a g e
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
LJ- 02 : Tag untuk memberi spasi 30 Antara batas tabel dengan sel
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
LJ- 03 : Tag untuk warna berbeda tiap sel
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
g. Lembar Kerja Peserta Didik
Halaman 100 dari 259

Halaman 101 dari 259

Pemrograman Web Semester 1
87 | P a g e
Halaman 101 dari 259

Halaman 102 dari 259

PEMROGRAMAN WEB SEMESTER 1
88 | P a g e
8. Kegiatan Belajar 8 : Menyajikan Tabel dengan Spaning
a. Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar 8 ini Peserta Didik diharapkan dapat :
1) Memahami Tabel dengan Spaning
2) Menyajikan Tabel dengan Spaning
b. Uraian Materi
1) Pembuatan Tabel
Ada kalanya kita membuat table dengan menggabungkan baris, ataupun
kolom. Berikut ini contoh tabel yang menggabungkan baris :
Benua Negara
ASIA Arab Saudi
India
Indonesia
Singapura
Berikut ini contoh tabel yang menggabungkan kolom :
Benua EROPA
Negara Belanda Italia Inggris Jerman
Untuk membuat table seperti di atas, maka Tabel Atribut Data yang digunakan
adalah sebagai berikut
Rowspan =angka(baris yang di span oleh sel)
Colspan =angka(kolom yang di span oleh sel)
Jadi untuk menggabungkan 4 baris seperti table di atas adalah :
<td rowspan=4> .......</td>
Halaman 102 dari 259

Halaman 103 dari 259

Pemrograman Web Semester 1
89 | P a g e
Sedangkan untuk menggabungkan 4 kolom seperti table di atas adalah :
<th colspan=4> .......</th>
c. Rangkuman
Untuk menggabungkan baris ataupun kolom pada tabel, digunakan atribut :
 Rowspan : untuk baris
 Colspan : untuk kolom
d. Tugas
1. Buatlah dokumen HTML berikut ini :
<html
<head>
<title>Tabel Dengan Rowspan</title>
</head>
<body>
<table width="500" border="1">
<tr>
<th scope="col">Nama Perumahan </th>
<th scope="col">Tipe / Luas tanah
(m<sup>2</sup>) </th>
</tr>
<tr>
<td rowspan="4">Griya Indah Permai </td>
<td>21 / 60 </td>
</tr>
<tr>
<td>36 / 90 </td>
Halaman 103 dari 259
97 dari 259

Menampilkan modul-C2-Pemrograman Web-X-1.pdf.
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)