Materi Praktikum HTML.pdf

STMIK Banjarbaru

Praktikum Internet 1 Pendahuluan

Pendahuluan

Tentang Buku Ini Buku ini berisi 14 bahan praktikum mengenai HTML ( HyperText HyperText Markup Language), Language ), CSS (Cascading Style Sheets) Sheets ) dan JS ( JavaScript JavaScri pt ) tingkat dasar. Materi yang disajikan dalam buku ini dibuat bertingkat secara berkesinambungan. 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 bagian ini. Dasar Dasar Teor Teorii secara secara rinci rinci dibe diberika rikan n pada pada saat perkul perkuliah iahan. an. •

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 praktiku praktikum. m. Jawaba Jawaban n dari dari setiap setiap pertanya pertanyaan an ini ini sangat sangat berguna berguna sebagai sebagai catatan catatan tambahan. 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 ya itu 1 sampai 7, dimana H1 akan memiliki uku ran huruf terbesar dan H7 yang terkecil.
Paragraph

Paragraf/Alenia pada halaman web dibentuk dengan menggunakan paired tag <P>...</P>. Perhatikan Perhatika n 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.

Muslihuddin, Muslihuddin, S. Kom

Halaman 2/37

STMIK Banjarbaru



• • •

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 ya itu 1 sampai 7, dimana H1 akan memiliki uku ran huruf terbesar dan H7 yang terkecil.
Paragraph

Paragraf/Alenia pada halaman web dibentuk dengan menggunakan paired tag <P>...</P>. Perhatikan Perhatika n 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

STMIK Banjarbaru


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 tampak seperti di bawah ini.


Tugas-01.html ” yang tampilannya pada browser

“

Halaman 3/37

STMIK Banjarbaru


warna merah

Comis Sans MS Ukuran 5 Merah 50% + Hijau 50%

Muslihuddin, S. Kom

Halaman 4/37

STMIK Banjarbaru



• •

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 tampilkan hasilnya pada browser.

Prak-02.html ”. Kemudian

“

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
?

Muslihuddin, S. Kom

Halaman 5/37

STMIK Banjarbaru


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.

background warna #0000FF

background warna #FF00FF

background warna #00FF00

background warna #FF0000

semua sel pada baris kedua : background warna #880000, jenis huruf Comic Sans MS, ukuran 4, warna #FFFFFF

15%

50%

20%

15%

600

Muslihuddin, S. Kom

Halaman 6/37

STMIK Banjarbaru


Praktikum 3 Dasar Teori Tag Table • Parameter tag Table : penggabungan sel secara baris dan kolom • Nested Table •



“

Latihan 03

A B

C

Satu

Dua

Tiga

Empat

D

E

Kuis -nya menggunakan parameter ROWSPAN atau 1. Mengapa semua sel pada tag COLSPAN sedangkan sel “C” tidak?

Muslihuddin, S. Kom

Halaman 7/37

STMIK Banjarbaru

Praktikum Internet 1 Praktikum 3 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.

Muslihuddin, S. Kom

Halaman 8/37

STMIK Banjarbaru


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 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

Muslihuddin, S. Kom

Halaman 9/37

STMIK Banjarbaru


Praktikum 01 Praktikum 02

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.

Muslihuddin, S. Kom

Halaman 10/37

STMIK Banjarbaru


background = #FFFF00

jenis hurufnya=Arial, ukuran=6, warna=#7F0000

gambar biasa 600 20%

10%

jenis hurufnya=Arial, italic, ukuran=5, warna=#008F00

80%

gambar rujukan ke Prak-03.html

gambar biasa

background = #000000

Muslihuddin, S. Kom

teks rujukan ke Prak-03.html

Halaman 11/37

STMIK Banjarbaru


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:
NAME="Gemar1" CHECKED>Komputer NAME="Gemar2">Membaca NAME="Gemar3">Jalan-Jalan NAME="Gemar4">Berenang NAME="Gemar5">Game

Tgl.Lahir:

Muslihuddin, S. Kom

Halaman 12/37

STMIK Banjarbaru


Tampilan yang diinginkan :

Muslihuddin, S. Kom

Halaman 13/37

STMIK Banjarbaru


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!

Muslihuddin, S. Kom

Halaman 14/37

STMIK Banjarbaru


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

Muslihuddin, S. Kom

Halaman 15/37

STMIK Banjarbaru


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.

Muslihuddin, S. Kom

Halaman 16/37

STMIK Banjarbaru


Muslihuddin, S. Kom

Halaman 17/37

STMIK Banjarbaru



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 C.S.S

Lace

16.bmp)">

Contoh List

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?

Muslihuddin, S. Kom

Halaman 19/37

STMIK Banjarbaru


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 sama (tidak mengalami perubahan).

Muslihuddin, S. Kom

“Prak-07.html”

dan

“Tugas-07.html”

adalah

Halaman 20/37

STMIK Banjarbaru



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 hasilnya pada browser.

“Prak-08.html” dan

tampilkan

Latihan 08
Ini adalah baris yang langsung dihasilkan dari kode HTML, sedangkan baris di bawah ini adalah yang dihasilkan dari kode JavaScript.
<SCRIPT LANGUAGE="JavaScript"> document.write("Latihan menggunakan

JavaScript")

Tambahkah kode berikut sehingga bagian script menjadi seperti di bawah ini dan tampilkan hasilnya pada browser. <SCRIPT LANGUAGE="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.

Muslihuddin, S. Kom

Halaman 21/37

STMIK Banjarbaru


<SCRIPT LANGUAGE="JavaScript"> document.write("Latihan menggunakan JavaScript") document.write("
") var vKalimat="Belajar JavaScript" document.write(vKalimat) document.write("

ALIGN='center'>"

+

vKalimat)

Tambahkan lagi dan tampilkan lagi pada browser. <SCRIPT LANGUAGE="JavaScript"> document.write("Latihan menggunakan JavaScript") document.write("
" + vKalimat) var vNama=prompt("Masukkan nama anda","") document.write("
" + vNama)

Tambahkan lagi dan tampilkan lagi pada browser. <SCRIPT LANGUAGE="JavaScript"> document.write("Latihan menggunakan JavaScript") document.write("
" + vKalimat) var vNama=prompt("Masukkan nama anda","") document.write("
" + vNama) alert("PERHATIAN!!!")

Muslihuddin, S. Kom

Halaman 22/37

STMIK Banjarbaru


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

Muslihuddin, S. Kom

Halaman 23/37

STMIK Banjarbaru



Bentuk variabel Array : deklarasi dan penggunaannya Perintah JavaScript : pengulangan dengan for Fungsi JavaScript : Array()


“Prak-09.html” dan

tampilkan

Latihan 09 <SCRIPT LANGUAGE="JavaScript"> var vKata = new Array() vKata[1] = "Latihan" vKata[2] = "Menggunakan" vKata[3] = "JavaScript" for(Counter=1; Counter<=3; ++Counter) {document.write("" + vKata[Counter]

+

"
")}

Kuis • • •

Apakah cara penulisan perintah/kode JavaScript adalah case-sensitive? Bagaimana jika penulisan kata Array diganti dengan array? Pada struktur pengulangan for terdapat 3 bagian penting. Pada latihan di atas adalah

for(Counter=1; Counter<=3; ++Counter) pertama

kedua

ketiga

Jelaskan arti dari masing-masing bagian tersebut.

Tugas Simpanlah dokumen “Prak-09.html” menjadi “Tugas-09.html”. Kemudian rubahlah kode JavaScript-nya sehingga tampilan pada browser menjadi seperti pada gambar berikut ini.

Muslihuddin, S. Kom

Halaman 24/37

STMIK Banjarbaru


Muslihuddin, S. Kom

Halaman 25/37

STMIK Banjarbaru



Fungsi JavaScript : Date(), getDate(), getDay(), getMonth(), getYear()


“Prak-10.html ”.

Kemudian lihat

Latihan 10 <SCRIPT LANGUAGE="JavaScript"> 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)

Muslihuddin, S. Kom

Halaman 26/37

STMIK Banjarbaru


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)

jenis huruf = Arial warna = #FF0000 ukuran = 24 points cetak tebal

Muslihuddin, S. Kom

Halaman 27/37

STMIK Banjarbaru



Perintah JavaScript : percabangan dengan if …else Fungsi JavaScript : Date(), getHours, getMinutes, getSeconds



“

Latihan 11 <SCRIPT LANGUAGE="JavaScript"> 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) alert("Selamat pagi!") else if(vJam>=10 && vJam<14) alert("Selamat siang!") else if(vJam>=14 && vJam<18) alert("Selamat sore!") else alert("Selamat malam!")

Kuis •

Apakah kegunaan fungsi Date() dari JavaScript?

Muslihuddin, S. Kom

Halaman 28/37

STMIK Banjarbaru


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 :

Muslihuddin, S. Kom

Halaman 29/37

STMIK Banjarbaru


Praktikum 12 Dasar Teori • • • •

User Defined Function : deklarasi dan penggunaannya Perintah JavaScript : function, pengulangan dengan do …while, 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 “Prak11.html” terlebih dahulu. Latihan 12 <SCRIPT LANGUAGE="JavaScript"> 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<=3) }

Muslihuddin, S. Kom

Halaman 30/37

STMIK Banjarbaru


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 :

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.

Muslihuddin, S. Kom

Halaman 31/37

STMIK Banjarbaru


Muslihuddin, S. Kom

Halaman 32/37

STMIK Banjarbaru



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. Latihan 13 <SCRIPT LANGUAGE="JavaScript"> 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<=3) }

Muslihuddin, S. Kom

Halaman 33/37

STMIK Banjarbaru


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 :

Muslihuddin, S. Kom

Halaman 34/37

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.

Muslihuddin, S. Kom

Halaman 35/37

STMIK Banjarbaru



Fungsi JavaScript : window.status(), Kejadian pada HTML : onMouseOver, onMouseOut


“

Prak-14.html ”, kemudian

Latihan 14

Kuis • •

Apa perbedaan antara kejadian onMouseOver dan onMouseOut? Apakah kejadian onClick bisa digantikan dengan onMouseClick?

Muslihuddin, S. Kom

Halaman 36/37

Report "Materi Praktikum HTML.pdf"

Your name

Email

Reason

Description

Copyright © 2024 IDOC.TIPS. All rights reserved.
About Us | Privacy Policy | Terms of Service | Copyright | Contact Us | Cookie Policy

Sign In

Email

Password

Remember me Forgot password?

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close

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

Materi Praktikum HTML.pdf

Recommend Documents

PENGANTAR HTML

TAG DASAR HTML

Heading

Paragraph

Break

PENGANTAR HTML

TAG DASAR HTML

Heading

Paragraph

Break

Style

Font

Tabel Dasar

Data Mahasiswa

C.S.S

Heading ini

yang biasa kita gunakan dengan

Contoh List

" + vKalimat) var vNama=prompt("Masukkan nama anda","") document.write("

" + vKalimat) var vNama=prompt("Masukkan nama anda","") document.write("