53materi praktikum html css dan javascript
Post on 30-Oct-2015
140 Views
Preview:
DESCRIPTION
TRANSCRIPT
-
STMIK Banjarbaru Praktikum Internet 1
Pendahuluan
Pendahuluan
Tentang Buku Ini
Buku ini berisi 14 bahan praktikum mengenai HTML (HyperText Markup Language), CSS (Cascading Style Sheets) dan JS (JavaScript) tingkat dasar. Materi yang disajikan dalam buku ini dibuat bertingkat secara berkesinambungan.
Tujuan
Diharapkan dengan melakukan praktikum secara berurutan, para praktikan akan memahami dasar-dasar membuat halaman web.
Cara Menggunakan Buku Ini
Pada setiap praktikum akan terdiri dari 3 bagian besar, yaitu :
Dasar Teori Semua teori yang akan digunakan untuk mendukung praktikum akan dituliskan pada bagian ini. Dasar Teori secara rinci diberikan pada saat perkuliahan.
Latihan Pada bagian ini akan diberikan kode HTML untuk diketikkan pada program Notepad dan dilihat hasilnya pada browser. Jika terjadi kesalahan dalam tampilan, maka praktikan diminta untuk memperbaiki kode HTML tersebut.
Kuis Berisi pertanyaan-pertanyaan yang jawabannya bisa didapat pada waktu melakukan praktikum. Jawaban dari setiap pertanyaan ini sangat berguna sebagai catatan tambahan.
Tugas Pada bagian ini akan ditampilkan tampilan browser, lengkap dengan data apa saja yang diinginkan. Praktikan diminta untuk menuliskan kode HTML-nya.
Saran
Agar tujuan diadakannya praktikum ini bisa tercapai secara maksimal, sangat disarankan agar praktikan selalu memadukan teori yang di dapat pada waktu perkuliahan dengan materi praktikum yang ada. Praktikan juga disarankan untuk membuat catatan tambahan dari apa yang dilakukan pada saat praktikum.
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 1
Praktikum 1
Dasar Teori
Pengenalan program Web Browser : o Bagian-bagian jendela browser : Title Bar, Status Bar, Address Bar, Pulldown Menu,
Icon Menu. o Fungsi-fungsi yang ada di Pulldown Menu, Icon Menu dan Keyboard Shortcut.
Pemahaman tentang Tag (Markup Language) : Aturan penulisan. Structure Tag : HTML, Head, Body Style Tag : Heading, Paragraph, Break, Bold, Italic, Underline, Font, List
Latihan
Ketiklah kode HTML berikut ini dengan menggunakan program Notepad dan simpanlah dengan nama Prak-01.html. Tampilkan hasilnya pada browser (Internet Explorer). Kemudian perbaiki kode HTML tersebut jika ada kesalahan atau tampilan yang tidak sesuai dengan yang diinginkan.
Latihan 01 PENGANTAR HTML TAG DASAR HTML Heading Ada 7 tingkatan Heading, yaitu 1 sampai 7, dimana H1 akan memiliki ukuran huruf terbesar dan H7 yang terkecil. Paragraph Paragraf/Alenia pada halaman web dibentuk dengan menggunakan paired tag <P>...</P>. Perhatikan bahwa antara paragraf yang pertama ini dengan paragraf kedua ini akan diberi jarak/spasi, meskipun tidak diberi pada kode HTML-nya. Hal yang sama berlaku juga pada tag Heading. Break Tag Break digunakan untuk memaksa ganti baris. Berbeda dengan tag Paragraf, maka ganti baris yang disebabkan oleh tag Break tidak menimbulkan spasi antar baris.
Halaman 2/37 Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 1
Style Ini adalah kata yang dicetak TEBAL Yang ini dicetak MIRING Sedangkan yang ini dicetak dengan diberi GARIS BAWAH Font Manipulasi huruf pada kode HTML dilakukan dengan menggunakan paired tag .... Parameter yang bisa digunakan pada tag ini adalah : FACE untuk menentukan jenis huruf SIZE untuk menentukan ukuran COLOR untuk memberi efek warna Sehingga kita bisa membuat kalimat dengan jenis huruf yang lain atau ukuran huruf yang lebih kecil bahkan dengan warna-warni
Style Ini adalah kata yang dicetak TEBAL Yang ini dicetak MIRING Sedangkan yang ini dicetak dengan diberi GARIS BAWAH Font Manipulasi huruf pada kode HTML dilakukan dengan menggunakan paired tag .... Parameter yang bisa digunakan pada tag ini adalah : FACE untuk menentukan jenis huruf SIZE untuk menentukan ukuran COLOR untuk memberi efek warna Sehingga kita bisa membuat kalimat dengan jenis huruf yang lain atau ukuran huruf yang lebih kecil bahkan dengan warna-warni
Kuis
1. Karakter apa yang ditampilkan browser jika pada kode HTML diketikkan <P> ? 2. Pada bagian sub bab Font, mengapa teks ... tidak bisa
ditampilkan? Bagaimana kode HTML yang seharusnya? 3. Apakah pemberian kode warna hanya bisa menggunakan bilangan heksadesimal? Cara
apa lagi yang bisa? 4. Apakah yang terjadi jika pada kode HTML diberi Enter sebanyak 5 kali, atau Spasi
sebanyak 10 kali? Bagaimana seharusnya? 5. Jenis huruf apa saja yang bisa digunakan? 6. Bagaimana cara menentukan nilai heksadesimal dari warna yang diinginkan?
Tugas
Buatlah kode HTML untuk dokumen Tugas-01.html yang tampilannya pada browser tampak seperti di bawah ini.
Halaman 3/37 Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 1
warna merah
Comis Sans MS Ukuran 5 Merah 50% + Hijau 50%
Halaman 4/37 Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 2
Halaman 5/37
Praktikum 2
Dasar Teori
Tag Table Parameter tag Table : tinggi, lebar, jarak, perataan isi sel dan warna Nested List
Latihan
Ketikkan kode HTML berikut ini, dan simpan dengan nama Prak-02.html. Kemudian tampilkan hasilnya pada browser.
Latihan 02 Tabel Dasar Sel 1-1 Sel 1-2 Sel 1-3 Sel 2-1 Sel 2-2 Sel 2-3 Sel 3-1 Sel 3-2 Sel 3-3
Kuis
1. Apa perbedaan menentukan lebar dan tinggi suatu tabel dengan menggunakan satuan persen dan pixels?
2. Apa akibatnya jika parameter ALIGN dan VALIGN digunakan pada tag , dan ?
Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 2
Halaman 6/37
Tugas
Buatlah kode HTML dokumen Tugas-02.html untuk tampilan browser seperti di bawah ini. Mengenai perataan isi sel (secara vertikal dan horisontal) bisa dilihat langsung pada gambar.
600
15% 15% 20% 50% 30
%
10%
40
0
semua sel pada baris kedua : background warna #880000, jenis huruf Comic Sans MS, ukuran 4, warna #FFFFFF
background warna #FF00FF
background warna #0000FF
background warna #00FF00background
warna #FF0000
Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 3
Halaman 7/37
Praktikum 3
Dasar Teori
Tag Table Parameter tag Table : penggabungan sel secara baris dan kolom Nested Table
Latihan
Ketikkan kode HTML berikut ini, dan simpan dengan nama Prak-03.html. Kemudian tampilkan hasilnya pada browser.
Latihan 03 A B C Satu Dua Tiga Empat D E
Kuis
1. Mengapa semua sel pada tag -nya menggunakan parameter ROWSPAN atau COLSPAN sedangkan sel C tidak?
Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 3
Halaman 8/37
2. Mengapa sel C bisa berwarna kuning, padahal parameter BGCOLOR tidak diberikan pada kode HTML-nya?
3. Pada tag Table milik tabel kecil yang ada di sel C, menggunakan parameter WIDTH=75%. Apa maksudnya?
Tugas
Buatlah kode HTML dokumen Tugas-03.html untuk tampilan browser seperti di bawah ini. Nilai heksadesimal untuk warna masing-masing sel dicantumkan sebagai isi sel tersebut.
Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 4
Halaman 9/37
Praktikum 4
Dasar Teori
Tag Table dan parameternya Tag Image : Source (sumber), Alternative Text, ukuran Tag Hyperlink : asal (teks dan gambar), tujuan (bookmark, HTML, URL, Email, gambar) Browser : Internet Option, Back button, Forward button
Latihan
Ketikkan kode HTML berikut ini, dan simpan dengan nama Prak-04.html. Kemudian tampilkan pada browser.
Catatan : Jika gambar yang digunakan pada latihan ini tidak ada di dalam direktori c:\windows\system\oobe\images, maka bisa menggunakan gambar lain yang ada di direktori tersebut atau di direktori mana saja. Khusus untuk sistem operasi WindowsXP/2003 biasanya sub direktori oobe\images terletak di direktori c:\windows\system32
Latihan 04 Praktikum 01 Praktikum 02
Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 4
Halaman 10/37
Kuis
Apakah fungsi dari parameter ALT pada tag Image? Apakah fungsi dari parameter WIDTH dan HEIGHT pada tag Image? Kapan parameter tersebut digunakan? Apakah perlu digunakan keduanya? Bagaimana cara membuat hyperlink dari suatu gambar yang rujukannya merupakan URL
(misalnya http://www.google.co.id atau ftp://sun.uio.org)? Tugas
Perhatikan tampilan browser berikut ini. Kemudian buatlah kode HTML untuk dokumen Tugas-04.html tersebut. Catatan : Gambar yang digunakan bebas,
Warna bebas untuk elemen yang tidak ditentukan pada soal, Perataan isi sel bisa dilihat langsung pada gambar.
Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 4
Halaman 11/37
gambar biasa
gambar biasa
gambar rujukan ke Prak-03.html
teks rujukan ke Prak-03.html
20%
jenis hurufnya=Arial, italic, ukuran=5, warna=#008F00
jenis hurufnya=Arial, ukuran=6, warna=#7F0000
20%
background = #FFFF00
600
10%
70%
background = #000000
80%
400
Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 5
Halaman 12/37
Praktikum 5
Dasar Teori
Tag Table dan parameternya Penggunaan formulir : Tag Form, Input dan parameternya
Latihan
Ketikkan kode HTML berikut ini, dan simpan dengan nama Prak-05.html. Kemudian tampilkan hasilnya pada browser. Perbaiki kesalahan yang ada, sehingga hasilnya menjadi sama dengan tampilan yang diinginkan.
Latihan 05 Data Mahasiswa N.R.P: NAMA: J.Kelamin: Laki-Laki Perempuan Kegemaran: Komputer Membaca Jalan-Jalan Berenang Game Tgl.Lahir: 01 02 03 04 05 06 07 08 09 10
Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 5
Halaman 13/37
Tampilan yang diinginkan :
Januari Pebruari Maret April 1985 1986 1987 1989      
Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 5
Halaman 14/37
Kuis
1. Bagaimana caranya agar nilai default sTanggal = 05, sBulan = Oktober, dan sTahun = 1986? (isi combo box harus tetap berurutan secara ascending).
2. Bagaimana cara memberi nilai default bagi input bertipe Text (seperti tNrp misalnya)?
Tugas
Buatlah kode HTML untuk dokumen Tugas-05.html sehingga tampilan formulir Data Mahasiswa di atas menjadi lebih baik seperti yang tampak pada gambar. Gunakan tabel!
Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 6
Halaman 15/37
Praktikum 6
Dasar Teori
Pemahaman CSS (Cascading Style Sheets) Internal Style Sheets : cara deklarasi dan penggunaannya CSS : Text, Font dan Public
Latihan
Ketikkan kode HTML berikut ini, dan simpan dengan nama Prak-06.html.
Latihan 06 H1 { font-family: Arial; font-size: 48; color: #4D9999; letter-spacing: 5; text-align: center } P.Penting { font-family: Comic Sans MS; font-size: 14; color: #CA0000; background-color: #FFFF80; text-align: justify; } P.Biasa { font-family: Comic Sans MS; font-size: 14; color: #0000FF; text-align: justify; } #Stabilo { font-weight: bold; color: #008F00; text-align: justify; text-decoration: underline; }
Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 6
Halaman 16/37
C.S.S Perhatikan bahwa sekarang kita bisa membuat Heading (judul dan sub judul) dengan tampilan yang berbeda dengan aslinya (default). Dengan menggunakan CSS (Cascading Style Sheets) maka kita bisa membuat efek tampilan (style) sesuai dengan keinginan kita sendiri. Contohnya adalah seperti paragraf ini. Tampilan paragraf seperti ini biasanya digunakan untuk memberitahu kepada pembaca bahwa paragraf ini berisi suatu informasi yang penting. Untuk paragraf yang ini dan Heading ini keterangan bisa didapat dengan mempelajari kode HTML-nya.
Kuis
Apa perbedaan antara yang biasa kita gunakan dengan yang ada pada latihan di atas?
Mengapa terdapat perbedaan antara tampilan paragraf pertama dan kedua? Dari latihan di atas, mana saja yang termasuk CSS Teks dan CSS Font? Sebutkan bagian mana yang merupakan General CSS? Apa maksud dari General CSS? Apakah keuntungan yang bisa didapat jika kita menggunakan CSS? Apakah aturan penulisan kode CSS adalah case-sensitive?
Tugas
Perhatikan kode HTML (terutama mengenai CSS) pada dokumen Prak-06.html. Kemudian cobalah untuk merubah-rubah nilai yang ada dan perhatikan perubahan yang terjadi pada browser. Catat dan tuangkan dalam dokumen Tugas-06.html sehingga tampilannya seperti yang tampak pada gambar berikut ini.
Catatan : Tampilan pada gambar tersebut hanya merupakan contoh. Lengkapi kolom-kolom yang belum terisi.
Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 6
Halaman 17/37
Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 7
Halaman 18/37
Praktikum 7
Dasar Teori
Inline Style Sheets, External Style Sheets, Pesudo Elements CSS : Text, Font, Padding, Background, Margin, List, Classification
Latihan
Ketikkan kode HTML berikut ini, dan simpan dengan nama Prak-07.html.
Latihan 07 H1 { font-family: Arial; font-size: 48; color: #4D9999; letter-spacing: 5; text-align: center } LI { font-size: 18; color: #FFFFFF; padding-left: 10 } P { font-family: Comic Sans MS; color: #FF93C9; text-indent: 0; margin-left: 0; text-align: justify } P.Indent { text-indent: 40; } P.DropCaps:first-letter { font-size: 350%; color: #FFFFFF; font-weight: bold; float: left }
Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 7
Halaman 19/37
Latihan 07 H1 {
font-family: Arial; font-size: 48;
color: #4D9999;g: letter-spacin 5;
text-align: center } LI { font-size: 18; color: #FFFFFF; padding-left: 10 } P { font-family: Comic Sans MS; color: #FF93C9; text-indent: 0;
gin-left: 0; mar text-align: justify } P.Indent {
-indent: 40; text } P.DropCaps:first-letter { font-size: 350%;
FFF; color: #FFFont-weight f : bold;
fl} oat: left
#Putih {color: #FFFFFF} C.S.S Contoh List Pertama Kedua Ketiga Keempat Paragraf ini ditampilkan dengan menggunakan tag Paragraph biasa. Tetapi dengan menggunakan CSS, maka tampilannya bisa dirubah sesuai dengan yang diinginkan. Maka mulai sekarang biasakanlah menggunakan CSS untuk mengatur tampilan elemen halaman web. Arahkan cursor (tidak perlu di-klik) ke masing-masing elemen di bawah ini dan amati perubahan bentuk cursor-nya Coba perhatikan paragraf yang ini. Bentuk paragraf seperti ini biasanya disebut dengan istilah "DropCaps", dimana huruf pertama yang mengawali paragraf tersebut dicetak dengan ukuran huruf yang lebih besar.
Kuis
Bagaimana urutan hirarki CSS (internal, external, inline dan browser default)? Apa keuntungan menggunakan External Style Sheets? Kapan ketiga jenis CSS (internal, eksternal dan inline) sebaiknya digunakan?
Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 7
Halaman 20/37 Andreas J. SKom
Tugas
Rubahlah kode HTML dari dokumen Prak-07.html tersebut dan simpanlah dengan nama Tugas-07.html, dimana dokumen Tugas-07.html ini menggunakan External Sytle Sheets (dengan nama Tugas-07.css).
Catatan : Tampilan browser untuk dokumen Prak-07.html dan Tugas-07.html adalah sama (tidak mengalami perubahan).
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 8
Praktikum 8
Dasar Teori
Pemahaman JavaScript : cara pendeklarasian dan aturan penulisan Perintah JavaScript : var Fungsi JavaScript : document.write, prompt, alert
Latihan
Ketikkan kode HTML berikut ini, dan simpan dengan nama Prak-08.html dan tampilkan hasilnya pada browser.
Tambahkah kode berikut sehingga bagian script menjadi seperti di bawah ini dan tampilkan hasilnya pada browser.
Latihan 08 Ini adalah baris yang langsung dihasilkan dari kode HTML, sedangkan baris di bawah ini adalah yang dihasilkan dari kode JavaScript. document.write("Latihan menggunakan JavaScript")
document.write("Latihan menggunakan JavaScript") document.write("") document.write("Ini baris pertama") document.write("Ini baris kedua")
Tambahkah lagi kode berikut sehingga bagian script menjadi seperti di bawah ini dan tampilkan hasilnya pada browser.
Halaman 21/37 Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 8
Tambahkan lagi dan tampilkan lagi pada browser.
Tambahkan lagi dan tampilkan lagi pada browser.
document.write("Latihan menggunakan JavaScript") document.write("") document.write("Ini baris pertama") document.write("Ini baris kedua") var vKalimat="Belajar JavaScript" document.write(vKalimat) document.write("" + vKalimat)
document.write("Latihan menggunakan JavaScript") document.write("") document.write("Ini baris pertama") document.write("Ini baris kedua") var vKalimat="Belajar JavaScript" document.write(vKalimat) document.write("" + vKalimat) var vNama=prompt("Masukkan nama anda","") document.write("" + vNama)
document.write("Latihan menggunakan JavaScript") document.write("") document.write("Ini baris pertama") document.write("Ini baris kedua") var vKalimat="Belajar JavaScript" document.write(vKalimat) document.write("" + vKalimat) var vNama=prompt("Masukkan nama anda","") document.write("" + vNama) alert("PERHATIAN!!!")
Halaman 22/37 Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 8
Kuis
Apakah fungsi dari string kedua (dalam latihan Prak-08.html adalah ) pada perintah prompt?
Apakah yang dihasilkan jika pada saat diminta input nama kita tekan tombol Enter atau klik tombol OK (dalam keadaan kosong)?
Dan apa yang dihasilkan jika dalam keadaan kosong kita tekan tombol Escape atau klik tombol Cancel?
Tugas
Tambahkan kode JavaScript dari dokumen Tugas-08.html (hasil copy dari Prak-08.html) sehingga ada inputan nama lagi, tetapi sudah ada nilai default-nya, yaitu Nama Lengkap seperti yang tampak pada gambar berikut ini.
Dan setelah diinputkan nama, maka akan tampil jendela pesan seperti pada gambar.
sesuai nama yang diinputkan
Halaman 23/37 Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 9
Praktikum 9
Dasar Teori
Bentuk variabel Array : deklarasi dan penggunaannya Perintah JavaScript : pengulangan dengan for Fungsi JavaScript : Array()
Latihan
Ketikkan kode HTML berikut ini, dan simpan dengan nama Prak-09.html dan tampilkan hasilnya pada browser.
Halaman 24/37 Andreas J. SKom
Latihan 09 var vKata = new Array() vKata[1] = "Latihan" vKata[2] = "Menggunakan" vKata[3] = "JavaScript" for(Counter=1; Counter
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 9
Halaman 25/37 Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 10
Praktikum 10
Dasar Teori
Fungsi JavaScript : Date(), getDate(), getDay(), getMonth(), getYear()
Latihan
Ketikkan kode HTML berikut ini, dan simpan dengan nama Prak-10.html. Kemudian lihat hasilnya pada browser.
Halaman 26/37 Andreas J. SKom
Latihan 10 var vSekarang = new Date() var vHari = vSekarang.getDay() var vTanggal = vSekarang.getDate() var vBulan = vSekarang.getMonth()+1 var vTahun = vSekarang.getYear() document.write("Sekarang adalah hari ke-" + vHari + ", tanggal " + vTanggal + "-" + vBulan + "-" + vTahun) document.write("") var vNamaHari = new Array("Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu", "Minggu") var vNamaBulan = new Array("Januari", "Pebruari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "Nopember", "Desember") var vSekarang = new Date() var vHari = vNamaHari[vSekarang.getDay()-1] var vTanggal = vSekarang.getDate() var vBulan = vNamaBulan[vSekarang.getMonth()] var vTahun = vSekarang.getYear() document.write("Sekarang adalah hari " + vHari + ", tanggal " + vTanggal + " " + vBulan + " " + vTahun)
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 10
Kuis
Apa kegunaan dari fungsi Date()? Mengapa pemberian nilai variabel vHari yang kedua diambil dari nilai fungsi
vSekarang.getDay() dikurangi 1? (tidak sama dengan pemberian nilai variabel vHari yang pertama)
Mengapa pemberian nilai variabel vBulan yang kedua diambil dari nilai fungsi vSekarang.getMonth() saja (tanpa ditambah 1) tidak seperti halnya variabel vBulan yang pertama?
Tugas
Modifikasi dokumen Prak-10.html tersebut menjadi Tugas-10.html sehingga tampilannya pada browser menjadi seperti berikut ini. (Gunakan CSS untuk mengatur tampilan)
Halaman 27/37 Andreas J. SKom
jenis huruf = Arial warna = #FF0000 ukuran = 24 points cetak tebal
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 11
Praktikum 11
Dasar Teori
Perintah JavaScript : percabangan dengan ifelse Fungsi JavaScript : Date(), getHours, getMinutes, getSeconds
Latihan
Ketikkan kode HTML berikut ini, dan simpan dengan nama Prak-11.html. Kemudian tampilkan hasilnya pada browser.
Halaman 28/37 Andreas J. SKom
Latihan 11 var vSekarang = new Date() var vJam = vSekarang.getHours() var vMenit = vSekarang.getMinutes() var vDetik = vSekarang.getSeconds() document.write("Sekarang jam menunjukkan pukul : " + vJam + ":" + vMenit + ":" + vDetik) if(vJam>=3 && vJam=10 && vJam=14 && vJam
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 11
Tugas
Buatlah dokumen Tugas-11.html, dimana : Jika jamnya hanya terdiri dari 1 digit (0..9), maka tampilkan dalam 2 digit, yaitu dengan
menambah digit 0 (nol) di depannya. Contoh: jam 5 ditampilkan sebagai 05. Hal yang sama untuk menitnya. Demikian juga untuk detiknya. Rubahlah jam sistem komputer menjadi jam-jam berikut ini, dan cobalah tampilkan pada browser. a) 5:25:30 b) 5:5:30 c) 5:5:5 Sehingga tampilan untuk soal poin a) adalah sebagai berikut :
Halaman 29/37 Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 12
Praktikum 12
Dasar Teori
User Defined Function : deklarasi dan penggunaannya Perintah JavaScript : function, pengulangan dengan dowhile, break Fungsi JavaScript : window.location.href(), history.go() Kejadian pada HTML : onLoad
Latihan
Ketikkan kode HTML berikut ini, dan simpan dengan nama Prak-12.html.
Penting : Sebelum menampilkan hasilnya pada browser, tampilkan hasil dokumen Prak-11.html terlebih dahulu.
Latihan 12 function Sandi() { vKali = 1 do { vPass = prompt("Masukkan kata sandi","") if(vPass=="123") { alert("Selamat datang di website saya") window.location.href("Prak-10.html") break } else { alert("Kata sandi salah!") if(vKali==3) { alert("Maaf, Anda sudah 3 kali salah") history.go(-1) } vKali=vKali+1 } } while(vKali
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 12
Kuis
Dokumen apa yang akan ditampilkan jika kata sandi yang diinputkan benar? Dan dokumen apa jika salah?
Apakah hasilnya akan sama jika parameter kejadian onLoad diketikkan dengan huruf kapital menjadi ONLOAD? Mengapa demikian?
Apa yang terjadi jika perintah break dihapus? Apa fungsi perintah break itu? Tugas
Ketiklah kode HTML untuk dokumen Tugas-12.html untuk membuat program yang berfungsi untuk menhitung panjang suatu inputan teks. Tampilan awalnya adalah sebagai berikut :
Halaman 31/37 Andreas J. SKom
Kemudian cobalah program tersebut dengan memasukkan sembarang kalimat, contoh: Belajar JavaScript sangat menyenangkan atau ABCDEFGHIJKLMNOPQRSTUVWXYZ sehingga tampilan hasilnya pada browser tampak seperti gambar berikut ini.
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 12
Halaman 32/37 Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 13
Praktikum 13
Dasar Teori
Fungsi JavaScript : window.open(), Kejadian pada HTML : onClick Tipe inputan : button
Latihan
Ketikkan kode HTML berikut ini, dan simpan dengan nama Prak-13.html.
Penting : Sebelum menampilkan hasilnya pada browser, tampilkan terlebih dahulu hasil dokumen Prak-11.html.
Halaman 33/37
Latihan 13 function Sandi() { vKali = 1 do { vPass = prompt("Masukkan kata sandi","") if(vPass=="123") { alert("Selamat datang di website saya") break } else { alert("Kata sandi salah!") if(vKali==3) { alert("Maaf, Anda sudah 3 kali salah") history.go(-1) } vKali=vKali+1 } } while(vKali
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 13
Halaman 34/37 Andreas J. SKom
Kuis
Perhatikan parameter kejadian ONCLICK. Mengapa ada tanda petik ganda () dan tanda petik tunggal ()?
Apa yang dimaksud dengan kejadian ONLOAD dan ONCLICK? Apa perbedaan fungsi window.location.href dan window.open? Tugas
Ketiklah kode HTML untuk dokumen Tugas-13.html untuk membuat program kalkulator sederhana dengan tampilan awal sebagai berikut :
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 13
Kemudian cobalah program tersebut dengan beberapa variasi angka. Sebagai contoh, jika textbox pertama diisi dengan angka 2 dan textbox kedua diisi angka 4, kemudian diklik tombol /, maka tampilan pada browser akan menjadi seperti gambar berikut ini.
Halaman 35/37 Andreas J. SKom
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 14
Praktikum 14
Dasar Teori
Fungsi JavaScript : window.status(), Kejadian pada HTML : onMouseOver, onMouseOut
Latihan
Ketikkan kode HTML berikut ini, dan simpan dengan nama Prak-14.html, kemudian tampilkan hasilnya pada browser.
Halaman 36/37 Andreas J. SKom
Latihan 14
Kuis
Apa perbedaan antara kejadian onMouseOver dan onMouseOut? Apakah kejadian onClick bisa digantikan dengan onMouseClick?
-
STMIK Banjarbaru Praktikum Internet 1
Praktikum 14
Tugas
Buatlah kode HTML dokumen Tugas-14.html dengan tampilan awal seperti yang tampak pada gambar berikut ini.
Rincian Tugas :
Jika cursor (mouse pointer) diarahkan (berada di atas) hyperlink, maka akan terjadi perubahan warna pada Heading (kata JUDUL), perubahan warna latar belakang browser, dan tampil tulisan pada baris status dari jendela browser.
Perincian perubahannya adalah sebagai berikut :
Halaman 37/37 Andreas J. SKom
Hyperlink Warna Heading Warna Background Teks Pada Status Merah #880000 #FFFFFF Warna merah Hijau #008800 #00FFFF Warna hijau Biru #000088 #FFFF00 Warna biru
Catatan : Cursor (mouse pointer) cukup diarahkan saja, tidak perlu diklik.
top related