Kata Pengantar
Buku Student Guide Series Pemrograman Web dengan HTML, CSS, dan JavaScript ditujukan untuk untuk para siswa-siswi SMP/SMA dan pemula pengguna pengguna kompute komputerr agar dapat lebih lebih memahami, memahami, menguasai menguasai,, dan terampil menggunakan menggunakan HTML, CSS, dan JavaScript JavaScript dalam membuat web. Setelah berlatih dengan buku ini, diharapkan setiap pembaca mampu membuat web sederhana sendiri, baik berupa web pribadi, sekolah, sekolah, atau kanto kantor. r. Buku Student Exercise Series Pemrograman Web dengan HTML, CSS, dan JavaScript merupakan pasangan dan pelengkap dari seri buku Student Guide Series yang cocok untuk dijadikan pegangan belajar dan latihan latihan secara mudah, mudah, praktis, praktis, dan menyenan menyenangkan gkan bagi bagi para siswa-siswi SMP/SMA dan pemula. Dalam penulisan buku ini, penulis memberikan sejumlah materi latihan yang mudah dimengerti dan dipelajari, tip-trik yang bermanfaat terkait langsung dengan materi latihan, dan soal-soal yang bisa diaplikasikan oleh para pembaca guna menambah keterampilan dan memperkaya materi yang sudah dikuasai. Materi latihan yang akan Anda dapatkan dalam Buku Student Exercise Series Series Pemrog Pemrogram raman an Web Web dengan dengan HTML, HTML, CSS, CSS, dan JavaSc JavaScrip ript t ini mencakup: S
Mengenal dan Memahami Dasar-Dasar HTML
S
Membuat dan Menggunakan Hyperlink Hyperlink dan List dalam Web
S
Menampilkan dan Menggunakan Gambar dalam Web
v
S
Membuat dan Menggunakan Frame dan IFrame dalam Web
S
Membuat dan Menggunakan Tabel dalam Web
S
Membuat dan Menggunakan Form dalam Web
S
Membuat dan Menggunakan CSS untuk Mempercantik Web
S
Menggunakan JavaScript untuk Menambah Fungsionalitas Web
Tak lupa pada kesempatan ini penulis mengucapkan banyak terima kasih atas segala bantuan yang telah diberikan oleh seluruh staf editor Eazycom, khususnya Bapak Vincent Sugeng Hardojo, Ibu Elizabeth Aribawa, dan rekan-rekan PT Elex Media Komputindo lainnya. Penulis juga mengucapkan terima kasih kepada teman-teman Ilkomerz 37 dan 38, serta kepada seluruh staf dosen Departemen Departemen Ilmu Komputer, Komputer, FMIPA, IPB. Terima kasih juga kepada Muslikhah Fajriyati dan Favorisen Rsyking Lumbanraja serta terutama kepada seluruh pembaca yang yang telah membeli membeli buku ini. ini. Selamat membaca dan belajar.
Bogor, Desember 2006
Arief Ramadhan, Ramadhan, S.Kom
vi
Daftar Isi
Kata Pengantar............................ Pengantar............................................. .................................. ............................... .............. v Daftar Daftar Isi............................................. Isi.............................................................. .................................. ......................vii .....vii MODUL 1 Dasar-Dasar HTML....................... HTML................................... ..................... ......... 1 MODUL 2 Hyperlink dan List ...................... ................................. .................... ......... 29 MODUL 3 Menampilkan dan Mengatur Gambar........... Gambar ............. 49 MODUL 4 Menggunakan Menggunakan Frame Frame dan IFrame IFrame .................. .................. 63 MODUL 5 Menggunakan Menggunakan Tabel Tabel .............. ......................... ....................... .............. 83 MODUL 6 Menggunakan Menggunakan Form........... Form ...................... ....................... ................. ..... 99 MODUL 7 Menggunakan Menggunakan Cascading Style Sheet (CSS)........... (CSS) ...................... ...................... ....................... ....................... ................ ..... 113 MODUL 8 Menggunakan Menggunakan JavaScript................ JavaScript............................ .............. 123
vii
Student Exercise Series: Series: Pemrograman Web dengan HTML, CSS, JavaScript JavaScript
Latihan 1: Mengenal HTML Buatlah sebuah folder baru bernama SESPEMROGWEB pada drive C:\ di kompu komputer ter Anda. Anda. Pada Pada latihan latihan pertam pertama a ini , kita kita akan berl berlati atih h menggunakan Tag , , , ,
, dan . .
1
2
Jalankan Notepad atau teks teks editor lain kesayanga kesayanga n Anda. Dalam Dalam pemb pembaha ahasan san buku buku ini, ini, penuli penuliss meng menggun gunaka akan n Notepad, seperti seperti terlihat pada gambar di bawah ini .
Ketik baris-baris teks di bawah ini (ketiklah persis seperti yang terlihat di buku ini).
Latihan Latihan pertama pertama
2
Modul 1: Dasar-Dasar HTML Apa kabar kawan-kawan semuanya? Selamat memulai latihan pertama
3
4
Kemudian klik menu File > Save As pada menu bar Notepad.
Lalu ketika muncul jendela Save As seperti di bawah ini, pada kotak isian File name ketiklah ketiklah “latihan1.ht “latihan1.html” ml” (ketik (ketik persis berikut tanda kutipnya). Pemberian tanda kutip pada nama file tersebut ditujukan ditujukan agar file benar -benar tersimpan dalam ekstensi .html bukan dalam ekstensi .txt. Kemudian pilihlah folder SESPEMROGWEB pada bagian Save In.
3
Student Exercise Series: Series: Pemrograman Web dengan HTML, CSS, JavaScript JavaScript
5
6
7
4
Kemudian Kemudian klik tombol tombol Save.
Pada Windows Explorer, browse folder SESPEMROGWEB yang sudah Anda Anda buat sebelumnya. sebelumnya. Kemudian Kemudian klik ganda file latihan1.html untuk menjalankannya. Amati apa yang terjadi.
Tampilan web Anda kurang lebih akan menjadi seperti berikut.
Modul 1: Dasar-Dasar HTML
A
B
A
Tampilan dari bagian dalam < TITLE>.
B
Tampilan dari bagian dalam .
Latihan 2: Mengatur Warna Latar Belakang Warna latar latar belakang belakang web web dapat dapat di atur dengan dengan cara cara mengubah mengubah nilai BGCOLOR atribut dalam Tag .
1
Jalankan Notepad.
2
Ketik baris-baris teks di bawah ini ( ketiklah persis seperti seperti yang terlihat di buku).
5
Student Exercise Series: Series: Pemrograman Web dengan HTML, CSS, JavaScript JavaScript
Latihan Latihan kedua kedua --> Sekarang warna latar belakang web nya adalah biru
6
3
Simpan dengan nama C:\SESPEMROGWEB.
“lat ihan2.html”
pada
4
Jalankan file latihan2.html, C:\SESPEMROGWEB.
5
Perhatikanlah bahwa sekarang warna latar belakang webnya berwarna biru.
dari
folder folder
folder
Modul 1: Dasar-Dasar HTML
Selain BLUE (biru), terdapat 15 jenis warna lainnya yang bisa Anda pilih secara langsung, langsung, yaitu SILVER, GRAY, WHITE, MAROON, RED, PURPLE, FUCHSIA, GREEN, LIME, OLIVE, YELLOW, NAVY, TEAL, dan AQUA. Selain itu, untuk menentukan sebuah warna dalam dokumen HTML, Anda juga dapat menggunakan kombinasi 6 angka 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e, dan f yang diawali karakter #. Contoh penggunaannya adalah
Latihan Latihan 3: Mengatur Mengatur Warna Teks Web Web Warna Warna teks web dapat dapat diatur diatur dengan dengan cara cara mengub mengubah ah nilai nilai atribu atributt TEXT dalam Tag .
1
Jalankan Notepad.
2
Ketik baris-baris teks di bawah ini ( ketiklah persis seperti seperti yang terlihat di buku).
Latihan Latihan ketiga ketiga < ! — w a r na t e k s # f f 0 0 2 2 - - >
warna teks web nya berubah
7
Student Exercise Series: Series: Pemrograman Web dengan HTML, CSS, JavaScript JavaScript
3
Simpan dengan nama C:\SESPEMROGWEB.
“lat ihan3.html”
pada
4
Jalankan file latihan3.html, C:\SESPEMROGWEB.
5
Perhatikan Perhatikanlah lah bahwa bahwa sekarang sekarang warna teks webnya webnya menjad menjadii agak merah.
dari
folder folder
folder
Latihan Latihan 4: Mengatur Mengatur Warna Latar Latar Belakang Belakang dan Teks Web Secara Bersamaan Anda dapat mengatur nilai atribut BGCOLOR dan TEXT secara bersamaan untuk mengubah warna latar belakang dan teks web Anda.
1
8
Jalankan Notepad.
Modul 1: Dasar-Dasar HTML
2
Ketik baris-baris teks di bawah ini ( ketiklah persis seperti seperti yang terlihat di buku).
Latihan Latihan keempat keempat warna latar belakang dan teks web nya berubah
3
Simpan dengan nama C:\SESPEMROGWEB.
“latihan4.html”
pada
4
Jalankan file latihan4.html, C:\SESPEMROGWEB.
5
Perhatikanlah bahwa sekarang sekarang warna latar belakang webnya menjadi kuning dan warna teks webnya agak merah.
dari
folder
folder
9
Student Exercise Series: Series: Pemrograman Web dengan HTML, CSS, JavaScript JavaScript
Latihan 5: Mengatur Gambar Latar Belakang Web Web yang Anda Anda buat dapat diberi gambar latar belakang tertentu dengan cara mengubah nilai atribut BACKGROUND pada Tag . . Sebelum Sebelum melakukan melakukan latihan kali kali ini, siapkanlah siapkanlah sebuah sebuah gambar berformat JPG dalam dalam komputer Anda. Anda. Ubah nama nama file g ambar tersebut menjadi bernama gambarku.jpg, dan simpan dalam folder C:\SESPEMROGWEB.
1
Jalankan Notepad.
2
Ketik baris-baris teks di bawah ini ( ketiklah persis seperti seperti yang terlihat di buku).
Latihan Latihan kelima kelima Web dengan gambar latar belakang
10
3
Simpan dengan nama C:\SESPEMROGWEB.
“lat ihan5.html”
4
Jalankan file latihan5.html, C:\SESPEMROGWEB.
pada
dari
folder folder
folder
Modul 1: Dasar-Dasar HTML
5
Perhatikan Perhatikanlah lah bahwa bahwa sekara sekarang ng web tersebut tersebut telah di beri gambar latar belakang .
Latihan 6: Mengatur Paragraf dengan Tag Tag
digunakan untuk memisahkan teks yang berada pada paragraf berbeda. Tag
juga memiliki atribut ALIGN untuk mengatur mengatur perataan paragraf. paragraf.
1
Jalankan Notepad.
11
Student Exercise Series: Series: Pemrograman Web dengan HTML, CSS, JavaScript JavaScript
2
Ketik baris-baris teks di bawah ini ( ketiklah persis seperti seperti yang terlihat di buku).
Latihan keenam Ini adalah paragraf pertama, yang terdiri atas beberapa beberapa baris. baris. Yaitu Yaitu baris baris Satu. Baris Baris Dua. Baris Baris Tiga.
Ini adalah paragraf kedua yang terdiri terdiri atas atas dua buah baris baris. . Yaitu Baris Baris satu. satu. Dan Baris kedua.
> Ini adalah paragra paragraf f ketiga yang terdiri terdiri atas atas dua buah baris baris. . Yaitu Baris Baris satu. satu. Dan Baris kedua.
12
3
Simpan dengan nama C:\SESPEMROGWEB.
“lat ihan6.html”
pada
4
Jalankan file latihan6.html, C:\SESPEMROGWEB.
5
Masing-masin Masing-masing g paragraf akan dibuat dibuat terpisah terpisah ses sesuai uai dengan dengan perataannya masing-masing.
dari
folder folder
folder
Modul 1: Dasar-Dasar HTML
Latihan Latihan 7: Memisahkan Memisahkan Baris Baris dengan dengan Tag
Baris-baris teks tidak akan terpisahkan otomatis meskipun Anda menuliskannya menuliskannya secara sec ara terpisah. Untuk memisahkan memisahkan baris -baris teks dalam HTML gunakanlah gunakanlah Tag
.
1
Jalankan Notepad.
2
Ketik baris-baris teks di bawah ini ( ketiklah persis seperti seperti yang terlihat di buku).
13
Student Exercise Series: Series: Pemrograman Web dengan HTML, CSS, JavaScript JavaScript
Latihan ketujuh Ini adalah paragraf pertama, yang terdiri atas beberapa baris.
Y
Yait aitu u baris baris Satu Satu. .
Baris Dua.
Baris Tiga.
Ini adalah paragraf kedua yang terdiri terdiri atas atas dua buah baris. baris.
Yai
Yaitu tu Baris satu. satu.
Dan Baris kedua.
> Ini adalah paragra paragraf f ketiga yang terdiri terdiri atas atas dua buah baris. baris.
Yai
Yaitu tu Baris satu. satu.
Dan Baris kedua.
14
3
Simpan dengan nama C:\SESPEMROGWEB.
“lat ihan7.html”
pada
4
Jalankan file latihan7.html, C:\SESPEMROGWEB.
5
Masing-masin Masing-masing g baris dalam setiap setiap paragraf paragraf akan dituliskan dituliskan terpisah.
dari
folder folder
folder
Modul 1: Dasar-Dasar HTML
Latihan 8: Menggambar Garis dengan Tag
Tag
digunakan untuk membuat garis lurus horizontal di dalam web. web. Tag
juga juga memil memiliki iki atrib atribut ut SIZE dan WIDTH untuk mengatur mengatur tinggi/ket tinggi/ketebalan ebalan dan dan lebar garis garis .
1
Jalankan Notepad.
2
Ketik baris-baris teks di bawah ini ( ketiklah persis seperti seperti yang terlihat di buku).
15
Student Exercise Series: Series: Pemrograman Web dengan HTML, CSS, JavaScript JavaScript Latihan kedelapan Ini adalah garis lurus horizontal biasa :
Ini adalah garis lurus horizontal dengan size=5 :
5> Ini adalah garis lurus horizontal dengan lebar 50 % layar :
WIDTH="50%"> Ini adalah garis lurus horizontal dengan size=10 dan lebar lebar 125 pixel pixel :
3
Simpan dengan nama C:\SESPEMROGWEB.
4
Jalankan file latihan8.html, C:\SESPEMROGWEB.
5
16
“lat ihan8.html”
pada
dari
folder folder
folder
Akan dibuat beberapa garis lurus horizon horizon tal dengan berbagai karakteristik tinggi tinggi dan lebar garis .
Modul 1: Dasar-Dasar HTML
Latihan 9: Mengatur HEADING Tag digunakan untuk menentukan Heading 1 yang berukuran paling besar. Tag digunakan untuk menentukan Heading 6 yang berukuran paling kecil.
1
Jalankan Notepad.
2
Ketik baris-baris teks di bawah ini ( ketiklah persis seperti seperti yang terlihat di buku).
Latihan kesembilan
17
Student Exercise Series: Series: Pemrograman Web dengan HTML, CSS, JavaScript JavaScript
Ini Ini Ini Ini Ini Ini
Teks Teks Teks Teks Teks Teks Teks
dengan dengan dengan dengan dengan dengan dengan
HEADING HEADING HEADING HEADING HEADING HEADING HEADING
6 5 4 3 2 1
18
3
Simpan dengan nama C:\SESPEMROGWEB.
“lat ihan9.html”
4
Jalankan file latihan9.html, C:\SESPEMROGWEB.
pada
dari
folder folder
folder
Modul 1: Dasar-Dasar HTML
Latihan 10: Memformat Teks Kali ini, Anda akan berlatih menggunakan menggunakan beberapa beberapa tag tertentu untuk untuk memformat teks.
1
Jalankan Notepad.
2
Ketik baris-baris teks di bawah ini ( ketiklah persis seperti seperti yang terlihat di buku).
Latihan sepuluh Ini Teks Normal
Teks dengan Tag SMALL
Teks dengan Tag BIG
Teks tercetak miring
Teks tercetak tercetak tebal tebal
Teks tercetak bergaris bawah
Contoh dengan superscript : X3
19
Student Exercise Series: Series: Pemrograman Web dengan HTML, CSS, JavaScript JavaScript
Teks yang tercoret
Contoh dengan subscript : CH3COOH
20
3
Simpan dengan nama C:\SESPEMROGWEB.
“lat ihan10.html”
4
Jalankan file latihan10.html, C:\SESPEMROGWEB.
5
Perhatikan perbedaan teks yang ditampilkan.
pada
dari
folder folder
folder
Modul 1: Dasar-Dasar HTML
Latihan 11: Memformat Teks dengan Tag Tag memiliki atribut SIZE, COLOR , dan FACE untuk memformat teks.
1
Jalankan Notepad.
2
Ketik baris-baris teks di bawah ini (ketiklah persis seperti yang terlihat di buku).
Latihan sebelas Ini Teks Normal
Teks yang diatur menggunakan tag FONT dengan SIZE=5
Teks yang diatur diatur menggu menggunaka nakan n tag FONT FONT dengan dengan SIZE=10
Teks yang yang diatur diatur mengguna menggunakan kan tag FONT FONT dengan dengan COLOR="RED"
21
Student Exercise Series: Series: Pemrograman Web dengan HTML, CSS, JavaScript JavaScript
> Teks yang diatur menggunakan tag FONT dengan COLOR COLOR="R ="RED" ED" dan SIZE SIZE=3 =3
Teks yang diatur menggunakan tag FONT dengan FACE="VERDANA"
Teks yang diatur menggunakan tag FONT dengan FACE="SANS-SERIF"
SIZE=6> Teks yang diatur menggunakan tag FONT dengan FACE="SA FACE="SANS-S NS-SERIF ERIF" " dan SIZE=6 SIZE=6
22
3
Simpan dengan nama C:\SESPEMROGWEB.
“lat ihan11html”
4
Jalankan file latihan11.html, C:\SESPEMROGWEB.
5
Perhatikan perbedaan teks yang ditampilkan.
pada
dari
folder folder
folder
Modul 1: Dasar-Dasar HTML
Latihan 12: Menampilkan Karakter Khusus Beberapa karakter, misalnya “&”, tidak dapat ditampilkan begitu saja ke dalam web. Karakter Karakter tersebut tersebut harus harus ditulis ditulis dalam kode tertentu tertentu agar dapat ditampilkan dengan baik di dalam web.
1
Jalankan Notepad.
2
Ketik baris-baris teks di bawah ini ( ketiklah persis seperti seperti yang terlihat di buku).
Latihan dua belas " & <
23
Student Exercise Series: Series: Pemrograman Web dengan HTML, CSS, JavaScript JavaScript > © ®
± Æ æ É é
24
3
Simpan dengan nama C:\SESPEMROGWEB.
“lat ihan12.html”
4
Jalankan file latihan12.html, C:\SESPEMROGWEB.
pada
dari
folder folder
folder
Modul 1: Dasar-Dasar HTML
A
Buatlah sebuah folder bernama SOALSESWEB pada Drive C: Komputer Anda.
B
Buatlah sebuah file teks dengan format format HT ML dalam Notepad untuk menghasilkan web seperti di bawah ini. Simpan file tersebut dalam folder C:\SOALSESWEB dengan nama “soal1.html”. Lalu cobalah untuk menjalankan file s oal1.html tersebut, pastikan pastikan hasilnya mirip mirip dengan gambar gambar di bawah ini ini .
25
Student Exercise Series: Series: Pemrograman Web dengan HTML, CSS, JavaScript JavaScript
26
Modul 1: Dasar-Dasar HTML
Untuk soal no.1, perhatikan tulisan yang tertera pada bagian TITLE dan bagian BODY, sesuaikanlah isinya. Perhatikan pula ukuran huruf yang ditampilkan dalam bagian BODY. Gunakanlah Tag-Tag Heading yang sesuai.
C
Buatlah sebuah file teks dengan format HTML dalam Notepad untuk menghasilkan web seperti di bawah ini. Simpan file tersebut dalam folder C:\SOALSESWEB dengan nama “soal2.html”. “soal2.html”. Lalu cobalah untuk menjalankan file s oal2.html tersebut, pastikan pastikan hasil nya mirip dengan dengan gambar di bawah bawah ini .
Kata volume volume tercetak miring dan dan warna huruf pada pada bagian rumus adalah merah.
27