Pemrograman Web Dengan Html, Css, Dan Javascript
... 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 Pemrograman Web dengan HTML, CSS, ...
-
Rating
-
Date
April 2016 -
Size
9.4MB -
Views
4,195 -
Categories
Transcript
Kata Pengantar Buku Student Guide Series Pemrograman Web dengan HTML, CSS, dan JavaScript ditujukan untuk para siswa-siswi SMP/SMA dan pemula pengguna komputer agar dapat lebih memahami, menguasai, dan terampil menggunakan HTML, CSS, dan JavaScript dalam membuat web. Setelah berlatih dengan buku ini, diharapkan setiap pembaca mampu membuat web sederhana sendiri, baik berupa web pribadi, sekolah, atau kantor. 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 secara mudah, praktis, dan menyenangkan 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 Pemrograman Web dengan HTML, CSS, dan JavaScript ini mencakup: Mengenal dan Memahami Dasar-Dasar HTML Menampilkan dan Menggunakan Gambar dalam Web Membuat dan Menggunakan Hyperlink dan List dalam Web v Membuat dan Menggunakan Frame dan IFrame dalam Web Membuat dan Menggunakan Form dalam Web Membuat dan Menggunakan Tabel dalam Web Membuat dan Menggunakan CSS untuk Mempercantik Web 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 Ilmu Komputer, FMIPA, IPB. Terima kasih juga kepada Muslikhah Fajriyati dan Favorisen Rsyking Lumbanraja serta terutama kepada seluruh pembaca yang telah membeli buku ini. Selamat membaca dan belajar. Bogor, Desember 2006 Arief Ramadhan, S.Kom vi Daftar Isi Kata Pengantar ............................................................................ v Daftar Isi ....................................................................................vii MODUL 1 Dasar-Dasar HTML............................................ 1 MODUL 2 Hyperlink dan List .......................................... 29 MODUL 3 Menampilkan dan Mengatur Gambar ............ 49 MODUL 4 Menggunakan Frame dan IFrame .................. 63 MODUL 5 Menggunakan Tabel ...................................... 83 MODUL 6 Menggunakan Form ....................................... 99 MODUL 7 Menggunakan Cascading Style Sheet (CSS) ............................................................. 113 MODUL 8 Menggunakan JavaScript ............................. 123 vii Student Exercise Series: Pemrograman Web dengan HTML, CSS, JavaScript Latihan 1: Mengenal HTML Buatlah sebuah folder baru bernama SESPEMROGWEB pada drive C:\ di komputer Anda. Pada latihan pertama ini , kita akan berlatih menggunakan Tag , ,Tag
digunakan untuk memisahkan teks yang berada pada paragraf berbeda. Tag
juga memiliki atribut ALIGN untuk mengatur perataan paragraf. 1 Jalankan Notepad. 11 Student Exercise Series: Pemrograman Web dengan HTML, CSS, JavaScript 2 Ketik baris-baris teks di bawah ini ( ketiklah persis seperti yang terlihat di buku).
Ini adalah paragraf pertama, yang terdiri atas beberapa baris. Yaitu baris Satu. Baris Dua. Baris Tiga.
Ini adalah paragraf kedua yang terdiri atas dua buah baris. Yaitu Baris satu. Dan Baris kedua.
Ini adalah paragraf ketiga yang terdiri atas dua buah baris. Yaitu Baris satu. Dan Baris kedua.
12 3 Simpan dengan nama C:\SESPEMROGWEB. “lat ihan6.html” pada 4 Jalankan file latihan6.html, C:\SESPEMROGWEB. 5 Masing-masing paragraf akan dibuat terpisah sesuai dengan perataannya masing-masing. dari folder folder Modul 1: Dasar-Dasar HTML Latihan 7: Memisahkan Baris dengan TagBaris-baris teks tidak akan terpisahkan otomatis meskipun Anda menuliskannya sec ara terpisah. Untuk memisahkan baris -baris teks dalam HTML gunakanlah Tag
. 1 Jalankan Notepad. 2 Ketik baris-baris teks di bawah ini ( ketiklah persis seperti yang terlihat di buku). 13 Student Exercise Series: Pemrograman Web dengan HTML, CSS, JavaScript
Ini adalah paragraf pertama, yang terdiri atas beberapa baris.
Yaitu baris Satu.
Baris Dua.
Baris Tiga.
Ini adalah paragraf kedua yang terdiri atas dua buah baris.
Yaitu Baris satu.
Dan Baris kedua.
Ini adalah paragraf ketiga yang terdiri atas dua buah baris.
Yaitu Baris satu.
Dan Baris kedua.
Tag
digunakan untuk membuat garis lu rus horizontal di dalam web. Tag
juga memiliki atribut SIZE dan WIDTH untuk mengatur tinggi/ketebalan dan lebar garis . 1 Jalankan Notepad. 2 Ketik baris-baris teks di bawah ini ( ketiklah persis seperti yang terlihat di buku). 15 Student Exercise Series: Pemrograman Web dengan HTML, CSS, JavaScript
Ini adalah garis lurus horizontal dengan size=5 :
Ini adalah garis lurus horizontal dengan lebar 50 % layar :
Ini adalah garis lurus horizontal dengan size=10 dan lebar 125 pixel :
16 3 Simpan dengan nama C:\SESPEMROGWEB. “lat ihan8.html” pada 4 Jalankan file latihan8.html, C:\SESPEMROGWEB. 5 Akan dibuat beberapa garis lurus horizon tal dengan berbagai karakteristik tinggi dan lebar garis . dari folder folder 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 yang terlihat di buku).
Latihan kesembilan 17
Student Exercise Series: Pemrograman Web dengan HTML, CSS, JavaScript
Ini Ini Ini Ini Ini Ini
Teks Teks Teks Teks Teks Teks
dengan dengan dengan dengan dengan dengan
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
Modul 1: Dasar-Dasar HTML
Latihan 10: Memformat Teks Kali ini, Anda akan berlatih menggunakan beberapa tag tertentu untuk memformat teks. 1
Jalankan Notepad.
2
Ketik baris-baris teks di bawah ini ( ketiklah persis seperti yang terlihat di buku).
Ini Ini Ini Ini Ini Ini
Teks Teks Teks Teks Teks Teks
dengan dengan dengan dengan dengan dengan
HEADING HEADING HEADING HEADING HEADING HEADING
6 5 4 3 2 1
Ini Ini Ini Ini Ini Ini
Teks Teks Teks Teks Teks Teks
dengan dengan dengan dengan dengan dengan
HEADING HEADING HEADING HEADING HEADING HEADING
6 5 4 3 2 1
Ini Ini Ini Ini Ini Ini
Teks Teks Teks Teks Teks Teks
dengan dengan dengan dengan dengan dengan
HEADING HEADING HEADING HEADING HEADING HEADING
6 5 4 3 2 1
Teks dengan Tag SMALL
Teks dengan Tag BIG
Teks tercetak miring
Teks tercetak tebal
Teks tercetak bergaris bawah
Contoh dengan superscript : X3
19 Student Exercise Series: Pemrograman Web dengan HTML, CSS, JavaScript
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 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).
Teks yang diatur menggunakan tag FONT dengan SIZE=5
Teks yang diatur menggunakan tag FONT dengan SIZE=10
Teks yang diatur menggunakan tag FONT dengan COLOR="RED"
21 Student Exercise Series: Pemrograman Web dengan HTML, CSS, JavaScript Teks yang diatur menggunakan tag FONT dengan COLOR="RED" dan SIZE=3
Teks yang diatur menggunakan tag FONT dengan FACE="VERDANA"
Teks yang diatur menggunakan tag FONT dengan FACE="SANS-SERIF"
Teks yang diatur menggunakan tag FONT dengan FACE="SANS-SERIF" dan 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 Modul 1: Dasar-Dasar HTML Latihan 12: Menampilkan Karakter Khusus Beberapa karakter, misalnya “&”, tidak dapat ditampilkan begitu saja ke dalam web. Karakter tersebut harus ditulis dalam kode tertentu agar dapat ditampilkan dengan baik di dalam web. 1 Jalankan Notepad. 2 Ketik baris-baris teks di bawah ini ( ketiklah persis seperti yang terlihat di buku).
23 Student Exercise Series: Pemrograman Web dengan HTML, CSS, JavaScript > © ®
± Æ æ É é 24 3 Simpan dengan nama C:\SESPEMROGWEB. “lat ihan12.html” 4 Jalankan file latihan12.html, C:\SESPEMROGWEB. pada dari 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 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 hasilnya mirip dengan gambar di bawah ini . 25 Student Exercise Series: Pemrograman Web dengan HTML, CSS, 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”. Lalu cobalah untuk menjalankan file s oal2.html tersebut, pastikan hasil nya mirip dengan gambar di bawah ini . Kata volume tercetak miring dan warna huruf pada bagian rumus adalah merah. 27