Materi Praktikum HTML

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 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.
<HTML>
<HEAD>
<TITLE>Latihan 01</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>PENGANTAR HTML</H1>
</CENTER>
<H2 ALIGN="center">TAG DASAR HTML</H2>
<H2>Heading</H2>
Ada 7 tingkatan Heading, yaitu 1 sampai 7, dimana H1 akan memiliki

ukuran huruf terbesar dan H7 yang terkecil.
<H2>Paragraph</H2>
<P>Paragraf/Alenia pada halaman web dibentuk dengan menggunakan

paired tag &ltP&gt...&lt/P&gt. Perhatikan bahwa antara paragraf
yang pertama ini</P>
<P>dengan paragraf kedua ini akan diberi jarak/spasi, meskipun
tidak diberi pada kode HTML-nya. Hal yang sama berlaku juga
pada tag Heading.</P>
<H2>Break</H2>
<P>Tag Break digunakan untuk memaksa ganti baris. Berbeda dengan

tag Paragraf, maka ganti baris yang disebabkan oleh tag Break
tidak menimbulkan spasi antar baris.</P>
Andreas J. SKom Halaman 2/37

STMIK Banjarbaru
Praktikum 1
<H2>Style</H2>
Ini adalah kata yang dicetak <B>TEBAL</B><BR>

Yang ini dicetak <I>MIRING</I><BR>
Sedangkan yang ini dicetak dengan diberi <U>GARIS BAWAH</U>
<H2>Font</H2>
<H2>Font</H2>
<P>Manipulasi huruf pada kode HTML dilakukan dengan menggunakan
<P>Manipulasi
paired tag huruf
<FONT>...</FONT>.
pada kode HTML
Parameter
dilakukan
yang
dengan
bisa menggunakan
digunakan
pada tag
paired tag
ini
<FONT>...</FONT>.
adalah :<BR> Parameter yang bisa digunakan
FACE tag
pada untuk
ini
menentukan
adalah :<BR>
jenis huruf
SIZE untuk menentukan jenis
FACE ukuranhuruf
COLORuntuk
SIZE untukmenentukan
memberi efek
ukuran
warna</P>
<P>Sehingga
COLOR untuk
kita
memberi
bisa membuat
efek warna</P>
kalimat dengan<BR>
<P>Sehingga
<FONT FACE="Comic
kita bisaSans
membuat
MS">kalimat
jenis huruf
dengan<BR>
yang lain</FONT><BR>
<FONT FACE="Comic
SIZE="1">atau
Sans
ukuran
MS">huruf
jenisyang
huruf
lebih
yangkecil</FONT><BR>
lain</FONT><BR>
<FONT SIZE="1">atau
COLOR="#7F00AF">bahkan
ukuran huruf
dengan
yang
warna-warni</FONT></P>
lebih kecil</FONT><BR>
</BODY>
<FONT COLOR="#7F00AF">bahkan dengan warna-warni</FONT></P>
</HTML>
</BODY>
</HTML>
Kuis
1. Karakter apa yang ditampilkan browser jika pada kode HTML diketikkan &ltP&gt ?
2. Pada bagian sub bab “Font”, mengapa teks <FONT>...</FONT> 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.

STMIK Banjarbaru
Praktikum 1
warna merah
Comis Sans MS
Ukuran 5
Merah 50% +
Hijau 50%

STMIK Banjarbaru
Praktikum 2
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.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN="center">Tabel Dasar</H1>
<TABLE WIDTH="100%" HEIGHT="300" BORDER="4"

CELLSPACING="3" CELLPADDING="5"
BGCOLOR="#FFFF00" BORDERCOLOR="#FF00FF">
<TR BGCOLOR="#880000" VALIGN="top">
<TD WIDTH="15%" HEIGHT="20%">Sel 1-1</TD>
<TD WIDTH="60%" ALIGN="center">Sel 1-2</TD>
<TD WIDTH="25%" ALIGN="right">Sel 1-3</TD>
</TR>
<TR>
<TD HEIGHT="50%">Sel 2-1</TD>
<TD ALIGN="center">Sel 2-2</TD>
<TD BORDERCOLOR="#008800" ALIGN="right">Sel 2-3</TD>
</TR>
<TR VALIGN="bottom">
<TD HEIGHT="30%">Sel 3-1</TD>
<TD BGCOLOR="#000088" ALIGN="center">Sel 3-2</TD>
<TD ALIGN="right">Sel 3-3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
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 <TABLE>, <TR>
dan <TD>?

STMIK Banjarbaru
Praktikum 2
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
background warna #00FF00
warna #FF0000
30%
semua sel pada baris kedua : background
warna #880000, jenis huruf Comic Sans MS,
ukuran 4, warna #FFFFFF
400
10%
15% 50% 20% 15%
600

STMIK Banjarbaru
Praktikum 3
Praktikum 3
Dasar Teori
• Tag Table
• Parameter tag Table : penggabungan sel secara baris dan kolom
• Nested Table
Latihan
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="3" CELLSPACING="2" CELLPADDING="5"
WIDTH="600" HEIGHT="400" BGCOLOR="#FFFF00">
<TR ALIGN="center">
<TD ROWSPAN="2" BGCOLOR="#FF0000" WIDTH="30%">A</TD>
<TD COLSPAN="2" BGCOLOR="#008F00" WIDTH="80%">B</TD>
</TR>
<TR ALIGN="center">
<TD WIDTH="40%">
C<BR>
WIDTH="75%" BGCOLOR="#8F008F">
<TR><TD>Satu</TD></TR>
<TR><TD BGCOLOR="#FF00FF">Dua</TD></TR>
<TR><TD>Tiga</TD></TR>
<TR><TD BGCOLOR="#FF00FF">Empat</TD></TR>
</TABLE>
</TD>
<TD ROWSPAN="2" BGCOLOR="#8F008F" WIDTH="30%">D</TD>
</TR>
<TR ALIGN="center">
<TD COLSPAN="2" BGCOLOR="#00FF8F" WIDTH="80%">E</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Kuis
1. Mengapa semua sel pada tag <TD>-nya menggunakan parameter ROWSPAN atau
COLSPAN sedangkan sel “C” tidak?

STMIK Banjarbaru
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.

STMIK Banjarbaru
Praktikum 4
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
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
<HTML>
<HEAD><TITLE>Latihan 04</TITLE></HEAD>
<BODY>
WIDTH="600" HEIGHT="300">
<TR ALIGN="center" height="30%">
<TD WIDTH="35%">
<IMG SRC="c:/windows/system/oobe/images/ball_ani.gif"
ALT="Gambar animasi">
</TD>
<TD WIDTH="35%">
<A HREF="Prak-01.html">Praktikum 01</A>
</TD>
<TD WIDTH="35%">
<A HREF="Prak-02.html" TARGET="_blank">Praktikum 02</A>
</TD>
</TR>
<TR height="65%">
<TD ALIGN="center">
<A HREF="Prak-02.html">
<IMG SRC="c:/windows/system/oobe/images/dial_ani.gif"
ALT="Ini hyperlink">
</A>
<TD ALIGN="center">
<A HREF="c:/windows/system/oobe/images/ball_ani.gif">
<IMG SRC="c:/windows/system/oobe/images/bgmc.jpg"
ALT="Ini hyperlink" WIDTH="50%">
</A>
</TD>

STMIK Banjarbaru
Praktikum 4
<TD ALIGN="center">
<A HREF="mailto://andreas@aldonet.org">
<IMG SRC="c:/windows/system/oobe/images/bgvisa.jpg"
ALT="Ini hyperlink" WIDTH="50%">
</A>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
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.

STMIK Banjarbaru
Praktikum 4
jenis hurufnya=Arial, ukuran=6,

background = #FFFF00 warna=#7F0000
gambar biasa
600
20% 10%
20%
jenis hurufnya=Arial, italic,
400
ukuran=5, warna=#008F00
70%
80% gambar rujukan

ke Prak-03.html
gambar biasa
teks rujukan ke
background = #000000 Prak-03.html

STMIK Banjarbaru
Praktikum 5
Praktikum 5
Dasar Teori
• Tag Table dan parameternya
• Penggunaan formulir : Tag Form, Input dan parameternya
Latihan
tampilkan hasilnya pada browser. Perbaiki kesalahan yang ada, sehingga hasilnya menjadi
sama dengan tampilan yang diinginkan.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN="center">Data Mahasiswa</H1>
<FORM>
N.R.P:
<INPUT TYPE="text" name="tNrp" SIZE="14">
NAMA:
<INPUT TYPE="text" name="tNama" SIZE="20">
J.Kelamin:
<INPUT TYPE="radio" NAME="rgJKlmn" VALUE="rPria" CHECKED>Laki-Laki
<INPUT TYPE="radio" NAME="rgJKlmn" VALUE="rWanita">Perempuan
Kegemaran:
<INPUT TYPE="checkbox" NAME="Gemar1" CHECKED>Komputer
<INPUT TYPE="checkbox" NAME="Gemar2">Membaca
<INPUT TYPE="checkbox" NAME="Gemar3">Jalan-Jalan
<INPUT TYPE="checkbox" NAME="Gemar4">Berenang
<INPUT TYPE="checkbox" NAME="Gemar5">Game
Tgl.Lahir:
<SELECT NAME="sTanggal">
<OPTION>01</OPTION>
<OPTION>02</OPTION>
<OPTION>03</OPTION>
<OPTION>04</OPTION>
<OPTION>05</OPTION>
<OPTION>06</OPTION>
<OPTION>07</OPTION>
<OPTION>08</OPTION>
<OPTION>09</OPTION>
<OPTION>10</OPTION>
</SELECT>

STMIK Banjarbaru
Praktikum 5
<SELECT NAME="sBulan">
<OPTION>Januari</OPTION>
<OPTION>Pebruari</OPTION>
<OPTION>Maret</OPTION>
<OPTION>April</OPTION>
</SELECT>
<SELECT NAME="sTahun">
<OPTION>1985</OPTION>
</SELECT>
<INPUT TYPE="submit" VALUE="Simpan">&nbsp&nbsp&nbsp&nbsp&nbsp

<INPUT TYPE="reset" VALUE="Ulangi">
</FORM>
</BODY>
</HTML>
Tampilan yang diinginkan :

STMIK Banjarbaru
Praktikum 5
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!

STMIK Banjarbaru
Praktikum 6
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”.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
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-size: 14;
color: #0000FF;
}
#Stabilo
{
font-weight: bold;
color: #008F00;
text-decoration: underline;
}
</STYLE>
</HEAD>

STMIK Banjarbaru
Praktikum 6
<BODY>
<H1>C.S.S</H1>
<P CLASS="Biasa">
Perhatikan bahwa sekarang kita bisa membuat Heading (judul
dan sub judul) dengan tampilan yang berbeda dengan aslinya
(default).
</P>
<P>Dengan menggunakan CSS (<I>Cascading Style Sheets</I>) maka
kita bisa membuat efek tampilan (style) sesuai dengan keinginan
kita sendiri.</P>
<P CLASS="Penting">
Contohnya adalah seperti paragraf ini. Tampilan paragraf seperti
ini biasanya digunakan untuk memberitahu kepada pembaca bahwa
paragraf ini berisi suatu informasi yang penting.
</P>
<P ID="Stabilo">Untuk paragraf yang ini</P>

dan
<H1 ID="Stabilo">Heading ini</H1>
keterangan bisa didapat dengan mempelajari kode HTML-nya.
</BODY>
</HTML>
Kuis
• Apa perbedaan antara <H1> yang biasa kita gunakan dengan <H1> 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.

STMIK Banjarbaru
Praktikum 6

STMIK Banjarbaru
Praktikum 7
Praktikum 7
Dasar Teori
• Inline Style Sheets, External Style Sheets, Pesudo Elements
• CSS : Text, Font, Padding, Background, Margin, List, Classification
Latihan
<HTML>
<HEAD>
<STYLE TYPE="text/css">
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
{
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
}

STMIK Banjarbaru
Praktikum 7
<HTML>#Putih {color: #FFFFFF}

</STYLE>
<HEAD>
</HEAD>
<BODY STYLE="background-image:
<STYLE TYPE="text/css"> url(c:/windows/Blue Lace 16.bmp)">
<H1
H1STYLE="background-color: #FFFFAA">C.S.S</H1>
{
<H2 STYLE="color: #FFFF00">Contoh List</H2>
font-family: Arial;
font-size: 48;
<UL STYLE="list-style-image
color: #4D9999; = url(Bullet-ku.gif)">
<LI>Pertama</LI>
letter-spacing: 5;
<LI>Kedua</LI>
text-align: center
<LI>Ketiga</LI>
}
<LI>Keempat</LI>
</UL>
LI
{
<P CLASS="Indent">
font-size: 18;
Paragraf
color: ini ditampilkan dengan menggunakan tag Paragraph biasa.
#FFFFFF;
Tetapi dengan menggunakan
padding-left: 10 CSS, maka tampilannya bisa dirubah
sesuai
} dengan yang diinginkan. Maka mulai sekarang biasakanlah
menggunakan CSS untuk mengatur tampilan elemen halaman web.
</P>
P
{
<FORM>
<Pcolor:
ID="Putih">
#FF93C9;
Arahkan cursor
text-indent: 0; (tidak perlu di-klik) ke masing-masing elemen
di bawah ini dan amati perubahan bentuk cursor-nya
margin-left: 0;
</P>
text-align: justify
<INPUT
} TYPE="text" SIZE="20"><BR>
<INPUT TYPE="text" SIZE="20" STYLE="cursor: crosshair"><BR><BR>
<INPUT TYPE="submit" VALUE="Tidak perlu di-klik">
P.Indent
<INPUT
{ TYPE="reset" VALUE="Jangan di-klik"
STYLE="cursor:
text-indent: 40; hand">
</FORM>
}
<PP.DropCaps:first-letter
CLASS="DropCaps">
Coba
{ perhatikan paragraf yang ini. Bentuk paragraf seperti ini
biasanya disebut
font-size: dengan istilah "DropCaps", dimana huruf pertama
350%;
yang mengawali paragraf
color: #FFFFFF; tersebut dicetak dengan ukuran huruf yang
lebih besar.
font-weight: bold;
</P>float: left
</BODY>
}
</HTML>
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?

STMIK Banjarbaru
Praktikum 7
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 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.
<HTML>
<HEAD>
</HEAD>
<BODY>
<P>Ini adalah baris yang langsung dihasilkan dari kode HTML,
sedangkan baris di bawah ini adalah yang dihasilkan dari kode
JavaScript.</P>
<SCRIPT LANGUAGE="JavaScript">
document.write("Latihan menggunakan JavaScript")
</SCRIPT>
</BODY>
</HTML>
Tambahkah kode berikut sehingga bagian script menjadi seperti di bawah ini dan tampilkan
document.write("<BR>")
document.write("Ini baris pertama<BR>")

document.write("Ini baris kedua<BR>")
</SCRIPT>
Tambahkah lagi kode berikut sehingga bagian script menjadi seperti di bawah ini dan

STMIK Banjarbaru
Praktikum 8

var vKalimat="Belajar JavaScript"

document.write(vKalimat)
document.write("<H ALIGN='center'>" + vKalimat)

</SCRIPT>
Tambahkan lagi dan tampilkan lagi pada browser.



document.write("<H1 ALIGN='center'>" + vKalimat)
var vNama=prompt("Masukkan nama anda","")

document.write("<H2 ALIGN='left'>" + vNama)
</SCRIPT>
Tambahkan lagi dan tampilkan lagi pada browser.



document.write("<H1 ALIGN='center'>" + vKalimat)
var vNama=prompt("Masukkan nama anda","")

document.write("<H2 ALIGN='left'>" + vNama)
alert("PERHATIAN!!!")
</SCRIPT>

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

STMIK Banjarbaru
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
<HTML>
<HEAD>
</HEAD>
<BODY>
var vKata = new Array()
vKata[1] = "Latihan"
vKata[2] = "Menggunakan"
vKata[3] = "JavaScript"
for(Counter=1; Counter<=3; ++Counter)

{document.write("<B>" + vKata[Counter] + "</B><BR>")}
</SCRIPT>
</BODY>
</HTML>
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.

STMIK Banjarbaru
Praktikum 9

STMIK Banjarbaru
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
<HTML>
<HEAD>
</HEAD>
<BODY>
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)
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 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)
</SCRIPT>
</BODY>
</HTML>

STMIK Banjarbaru
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)
jenis huruf = Arial

warna = #FF0000
ukuran = 24 points
cetak tebal

STMIK Banjarbaru
Praktikum 11
Praktikum 11
Dasar Teori
• Perintah JavaScript : percabangan dengan if…else
• Fungsi JavaScript : Date(), getHours, getMinutes, getSeconds
Latihan
<HTML>
<HEAD>
</HEAD>
<BODY>
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
alert("Selamat siang!")
else
alert("Selamat sore!")
else
alert("Selamat malam!")
</SCRIPT>
</BODY>
</HTML>
Kuis
• Apakah kegunaan fungsi Date() dari JavaScript?

STMIK Banjarbaru
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 :

STMIK Banjarbaru
Praktikum 12
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
Penting : Sebelum menampilkan hasilnya pada browser, tampilkan hasil dokumen “Prak-
11.html” terlebih dahulu.
<HTML>
<HEAD>
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)
}
</SCRIPT>
</HEAD>
<BODY onLoad="Sandi()">
</BODY>
</HTML>

STMIK Banjarbaru
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 :
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 12

STMIK Banjarbaru
Praktikum 13
Praktikum 13
Dasar Teori
• Fungsi JavaScript : window.open(),
• Kejadian pada HTML : onClick
• Tipe inputan : button
Latihan
Penting : Sebelum menampilkan hasilnya pada browser, tampilkan” terlebih dahulu hasil
dokumen “Prak-11.html.
<HTML>
<HEAD>
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)
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFEB2 ONLOAD="Sandi()">

<TABLE WIDTH="100%" HEIGHT="60" BGCOLOR="#000088">
<TR ALIGN="center">
<TD>
<INPUT TYPE="button" VALUE="Latihan 09"
ONCLICK="window.open('Prak-09.html')">
</TD>

STMIK Banjarbaru
Praktikum 13
<TD>
</TD>
<TD>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
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 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.

STMIK Banjarbaru
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
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR=#FFFEB2>
<TABLE WIDTH="100%" HEIGHT="60" BGCOLOR="#000088">
<TR ALIGN="center">
<TD>
onClick="window.open('Prak-09.html')"
onMouseOver="window.status='Pengulangan dengan for'"
onMouseOut="window.status=''">
</TD>
<TD>
onMouseOver="window.status='Mengambil nilai tanggal ' +
'dan hari dari sistem'"
</TD>
<TD>
onMouseOver="window.status='Percabangan dengan if'"
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Kuis
• Apa perbedaan antara kejadian onMouseOver dan onMouseOut?
• Apakah kejadian onClick bisa digantikan dengan onMouseClick?

STMIK Banjarbaru
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 :
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.

Materi Praktikum HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Materi Praktikum HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

STMIK Banjarbaru

Tentang Buku Ini

Cara Menggunakan Buku Ini

Ada 7 tingkatan Heading, yaitu 1 sampai 7, dimana H1 akan memiliki

<P>Paragraf/Alenia pada halaman web dibentuk dengan menggunakan

<P>Tag Break digunakan untuk memaksa ganti baris. Berbeda dengan

Andreas J. SKom Halaman 2/37

Ini adalah kata yang dicetak <B>TEBAL</B><BR>

Andreas J. SKom Halaman 3/37

Andreas J. SKom Halaman 4/37

<TABLE WIDTH="100%" HEIGHT="300" BORDER="4"

Andreas J. SKom Halaman 5/37

Andreas J. SKom Halaman 6/37

Andreas J. SKom Halaman 7/37

Andreas J. SKom Halaman 8/37

Andreas J. SKom Halaman 9/37

Catatan : Gambar yang digunakan bebas,

Andreas J. SKom Halaman 10/37

jenis hurufnya=Arial, ukuran=6,

80% gambar rujukan

Andreas J. SKom Halaman 11/37

Andreas J. SKom Halaman 12/37

<INPUT TYPE="submit" VALUE="Simpan">&nbsp&nbsp&nbsp&nbsp&nbsp

Tampilan yang diinginkan :

Andreas J. SKom Halaman 13/37

Andreas J. SKom Halaman 14/37

Andreas J. SKom Halaman 15/37

<P ID="Stabilo">Untuk paragraf yang ini</P>

Andreas J. SKom Halaman 16/37

Andreas J. SKom Halaman 17/37

Andreas J. SKom Halaman 18/37

<HTML>#Putih {color: #FFFFFF}

Andreas J. SKom Halaman 19/37

Andreas J. SKom Halaman 20/37

document.write("Ini baris pertama<BR>")

Andreas J. SKom Halaman 21/37

document.write("Ini baris pertama<BR>")

var vKalimat="Belajar JavaScript"

document.write("<H ALIGN='center'>" + vKalimat)

Tambahkan lagi dan tampilkan lagi pada browser.

document.write("Ini baris pertama<BR>")

var vKalimat="Belajar JavaScript"

document.write("<H1 ALIGN='center'>" + vKalimat)

var vNama=prompt("Masukkan nama anda","")

Tambahkan lagi dan tampilkan lagi pada browser.

document.write("Ini baris pertama<BR>")

var vKalimat="Belajar JavaScript"

document.write("<H1 ALIGN='center'>" + vKalimat)

var vNama=prompt("Masukkan nama anda","")

Andreas J. SKom Halaman 22/37

sesuai nama yang

Andreas J. SKom Halaman 23/37

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

Andreas J. SKom Halaman 24/37

Andreas J. SKom Halaman 25/37

document.write("Sekarang adalah hari ke-" + vHari + ", tanggal " +

var vNamaHari = new Array("Senin", "Selasa", "Rabu", "Kamis",

document.write("Sekarang adalah hari " + vHari + ", tanggal " +

Andreas J. SKom Halaman 26/37

jenis huruf = Arial

Andreas J. SKom Halaman 27/37

document.write("Sekarang jam menunjukkan pukul : " + vJam + ":" +

if(vJam>=3 && vJam<10)

Andreas J. SKom Halaman 28/37