A. Maksud dan Tujuan
1. Memahami penulisan dengan menggunakan HTML.
2. Memahami tata letak huruf dengan menggunakan HTML.
B. Dasar Teori
HTML merupakan singkatan dati HyperText Markup Language. Di dalam HTML dikenal adanya tag atau tanda-tanda khusus yang merupakan rangkaian perintah yang akan diproses oleh Web Browser. Software yang dibuhkan untuk menulis dan menjalankan tag-tag HTML yaitu :
1. Text Editor : Notpad, Front Page, Macromedia Dreamweaver dan lain-lain.
2. Web Browser : Internet Explorer, Netscape Navigator dan lain-lain.
Setiap ingin membuat tampilan dengan menggunakan web, terlebih dahulu harus mengetik tag-tag HTML di dalam text editor. Dan jika sudah selesai maka akan dieksekusi dengan menggunakan web browser. Berikut ini langkah yang harus dikerjakan untuk menampilkan tulisan dengan menggunakan HTML.
1. Jalankan Notepad dan ketikan tag-tag berikut :
<html>
<head>
<title>Contoh 1</title>
</head>
<body>
UNIVERITAS KUNINGAN<br>
FAKULTAS ILMU KOMPUTER<br>
<br>
<br>
Kampus I : Jl. Cut Nyak Dhien Cijoho Kuningan Telp.(0232)875097<br>
Kampus II : Jl. Pramuka 67 Kuningan 45512 Telp./Fax. (0232)87182
</body>
</html>
2. Simpan dengan nama Modul-1a.html.
3. Jalankan Internet Explorer.
4. Pilih File-Open lalu pilih nama file yang telah dibuat.
Tag-tag yang dugunakan untuk melakukan pengaturan huruf adalah :
<h1> sampai <h7> : untuk mengatur ukuran huruf
<center> : untuk mengatur huruf agar ditengah
<b> : untuk mengatur huruf agar tebal.
<i> : untuk mengatur huruf agar miring
<u> : untuk mengatur huruf agar memakai garis bawah.
<marquee> : untuk membuat tulisan bergerak dari kanan ke kiri.
<hr size=n> : untuk membuat garis horizontal, dengan n sebagai lebar dari
garis tersebut.
C. Praktek
1. Ketikan program Modul-1a.html dengan menggunakan Notepad.
2. Jalankan dan amati hasilnya.
3. Cetak listing program dan hasilnya.
4. Ubahlah ukuran huruf pada baris pertama dengan menggunakan <h2> dan baris kedua dengan menggunakan <h1>.
5. Jalankan dan amati hasilnya, lalu cetak.
6. Buatlah semua huruf berada di tengah-tengah (centering).
7. Buatlah garis horizontal pada baris ketiga.
8. Jalankan dan cetak hasilnya.
9. Buatlah tulisan bergerak dari kanan ke kiri pada baris keempat sebagai berikut : Universitas Pertama di Kuningan.
D. Pertanyaan
Semua pertanyaan berikut harap dijawab dalam laporan resmi :
1. Bisakah Anda membuat tag-tag HTML dan Microsoft Word ? Jelaskan.
2. Bisakah tag-tag dalam HTML seperti untuk mempertebal, membuat garis bawah, membuat centering dan lain-lain ditulis secara bersamaan pada satu baris? Mengapa.
MODUL II
PENGATURAN WARNA DAN UKURAN HURUF
A. Maksud dan Tujuan
1. Mahasiswa dapat memahami dan menentukan ukuran huruf yang sesuai.
2. Memahami dan mengatur warna huruf atau latar dari script.
B. Dasar Teori
Seperti halnya dalam software aplikasi lain, di dalam pembuatan script atau halaman web pun bisa dilakukan pengaturan terhadap ukuran atau warna huruf yang akan ditampilkan sehingga akan terlihat lebih menarik. Karena baik tidaknya suatu halaman web akan sangat dipengaruhi oleh tata letak serta pengaturan warna yang digunakan.
Berikut ini adalah beberapa perintah yang biasa digunakan untuk pengaturan huruf ataupun warna dalam pembuatan script :
<font parameter>
Fungsi dari perintah ini yaitu untuk melakukan pengauran terhadap huruf sesuai dengan parameter yang digunakan. Adapun paramatenya adalah
Face : untuk menentukan jenis huruf, misalnya : Times New Roman, Arial
dan lain-lain.
Size : untuk menentukan ukuran huruf, yaitu dengan memberikan angka
dari 1 sampai 7 dan dari –7 sampai –1.
Color : untuk memberikan warna dari huruf yang digunakan, anda dapat
mengetikan warna yang diinginkan secara langsung ataupun dengan
kode warnanya.
Misalnya : untuk warna merah anda bisa mengetikan red atau dengan
Kode warnanya yaitu #FF0000.
<bgcolor>
Tag ini merupakan parameter yang digunakan untuk memberikan warna latar pada script, tabel atapun sel-sel. Jika ingin digunakan sebagai warna latar, maka parameter ini dipakai pada tag <body>, jika ingin digunakan pada tabel maka dapat dijadikan parameter pada tag <tr> atau <td>.
<background>
Tag ini merupakan parameter yang digunakan untuk menyisipkan gambar sebagai latar atau background pada script dan bisa dipakai pada tag <body> atapun <td>.
<img src>
Tag ini digunakan untuk menyisipkan gambar pada script yang dibuat, dimana gambar tersebut bisa ditentukan ukurannya sesuai dengan kebutuhan. Bahkan bisa juga dipakei pada sel dari sebuah tabel. Parameter untuk menentukan ukuran dari gambar yang dibuat yaitu width untuk menentukan lebar dan height untuk menentukan tinggi.
Contoh 1
<html>
<head>
<title>Contoh 1</title>
</head>
<body bgcolor=”magenta”>
<center><font face=”arial” size=”6” color=<blue”>PT. NUSA KENCANA UNGU</font><br>
<br>
<br>
Office : Jl. Pakualaman 554 Bandung Telp./Fax(022)8876876<br>
|Home|Info|Produk|Pembelian Barang|
</body>
</html>
Contoh 2
<html>
<head>
<title>Contoh 2</title>
</head>
<body background=”pemandangan.jpg”>
<img scr=”uniku-10.jpg wdith=”200” height=”150”>
</body>
</html>
C. Praktek
1. Ketikan program contoh 1
2. Jalankan dan amati hasilnya lalu cetak
3. Pada baris yang bertuliskan Office ubahlah jenis hurufnya dengan menggunakan Times New Roman dengan ukuran 10.
4. Jalankan dan amati hasilnya. Mengapa demikian.
5. Buatlah warna yang menarik untuk baris huruf tersebut.
6. Ketik program contoh 2
7. Jalankan dan amati hasilnya.
8. Buatlah tulisan di tengah-tengah “PT. ALIM RUGI”, dengan ukuran huruf paling besr dan beri warna yang menarik.
9. Lima baris berikutnya ketikan alamat “Jl. Pramuka 77 Cirebon Telp. (0231)482874”
10. Jalanjan dan amati hasilnya.
D. Tugas
Buatlah satu script yang menarik untuk sebuah perusahaan dimana didalamnya terdapat informasi
1. Nama perusahaan
2. Alamat perusahaan
3. Gambar sebagai pengganti logo perusahaan
MODUL III
MEMBUAT DAFTAR
A. Maksud dan Tujuan
1. Memahami cara membuat daftar berurut
2. Memahami cara membuat dftar tidak berurut
B. Dasar Teori
Dalam halaman web atau script terkadang dibutuhkan untuk membuat serangkaian daftar yang memuat data-data secara berurut. Hal ini bisa terjadi jika ingin ditampilkan tetang daftar item produk, daftar buku dan lain-lain.
Tag yang biasa digunakan untuk membuat daftar yaitu <OL> untuk daftar berurut dan <UL> untuk daftar tidak berurut. Untuk menampilkan item dari daftar yang ingin ditampilkan, tinggal mengetikan tag <LI>. Tag <OL> memiliki parameter untuk pengaturan jenis karakter yang akan digunakan untuk mengurutkan data tersebut, apakah berupa angka atau berupa abjad. Adapun paramater tersebut yaitu dengan menggunakan perintah TYPE dengan tipe-tipe sebagai berikut
Tipe Keterangan Contoh
1 Bilangan biasa 1,2,3,...
I Bilangan romawi besar I,II,III,...
i Bilangan romawi kecil i,ii,iii,...
A Huruf besar A,B,C,....
a Huruf kecil a,b,c,....
Pada tag <OL> juga memiliki parameter START sebagai awal pengurutan daftar yang dibuat, sehingga nantinya dimungkinkan untuk membuat daftar berurut dari mulai 5 sampai dengan 10.
Seperti halnya tag <OL>, tag <UL> juga memiliki parameter TYPE dengan jenis sebagai berikut :
Tipe Keterangan Contoh
Disk cakram
Circle lingkaran
Square kotak
Selain tag <OL> dan <UL>, dalam halaman web bisa juga dibuat daftar definisi yang akan ditampilkan seperti di dalam kamus. Tag yang digunakan yaitu <DL> dengan bagiannya yaitu <DT> dan <DD>.
Contoh 1
<html>
<head>
<title>Membuat Daftar</title>
</head>
<body>
<H1 align="center">UNIVERSITAS KUNINGAN</h1>
<H3 align="center">Kampus I : Jl. Cut Nyak Dhien Cijoho Kuningan</H3>
<H3 align="center">Kampus II : Jl. Pramuka 67 Kuningan</H3><BR>
<OL type="A">
<LI>Fakultas Keguruan dan Ilmu Pendidikan</LI>
<LI>Fakultas Ekonomi</LI>
<LI>Fakultas Ilmu Komputer</LI>
<LI>Fakultas Kehutanan</LI>
</OL>
</body>
</html>
Contoh 2
<html>
<head>
<title>Membuat Definisi</title>
</head>
<body>
<H1 align="center">UNIVERSITAS KUNINGAN</h1>
<H3 align="center">Kampus I : Jl. Cut Nyak Dhien Cijoho Kuningan</H3>
<H3 align="center">Kampus II : Jl. Pramuka 67 Kuningan</H3><BR><BR>
<DL>
<DT>Fakultas Keguruan dan Ilmu Pendidikan
<DD>Bahasa dan Sastra
<DD>PE-AP
<DD>Biologi
<DT>Fakultas Ekonomi
<DD>Akuntansi
<DD>Manajemen
<DT>Fakultas Ilmu Komputer
<DD>Teknik Informatika
<DD>Sistem Informasi
<DT>Fakultas Kehutanan
<DD>Budi Daya Hutan
<DD>Konservasi Sumber Daya Hutan
</DL>
</body>
</html>
C. Praktek
1. Ketikan program Contoh 1
2. Jalankan dan amati hasilnya
3. Ubahlah jenis urutan huruf dengan angka sehingga untuk tiap fakultas akan memiliki nomor urut.
4. Ketikan program contoh 2
5. Jalankan dan amati hasilnya
6. Buatlah angka berurut pada tiap fakultas
7. Buatlah huruf untuk tiap fakultas lebih tebal dari jurusannya
8. Berikan aksesoris lain sehingga tampilannya lebih menarik (warna, logo, gambar dan lain-lain).
D. Pertanyaan dan Tugas
1. Bagaimana langkah yang harus dikerjakan untuk membuat daftar tidak berurut dengan menggunakan lambang kotak.
2. Buatkan script untuk sebuah perusahaan yang menjual beberapa jenis produk ke dalam sebuah daftar :
1. Kursi
a. Kursi Tamu
b. Kursi Makan
c. Kursi Kantor
2. Lemari
a. Lemari Pakaian
b. Lemari Barang
3. Meja
a. Meja Tamu
b. Meja Makan
c. Meja Belajar
d. Meja Kantor
Buatlah tampilan sebaik mungkin dengan ditambahkan nama perusahaan, alamat kantor serta alamat web.
MODUL IV
HUBUNGAN ANTAR DOKUMEN
A. Maksud dan Tujuan
1. Memahami hubungan antar dokumen dengan menggunakan karakter.
2. Memahami hubungan antar dokumen dengan menggunakan map pada gambar.
B. Dasar Teori
Proses yang sering digunakan dalam pemrograman berbasis web adalah adanya fasilitias hubungan antar dokumen atau lebih dikenal dengan nama link. Proses ini akan terjadi bila user menekan tombol klik pada tulisan atau gambar yang bergaris bawah, atau pada daerah yang saat kursor digeserkan ke tempat tersebut akan menampilkan penunjuk sebagai lambang link.
Proses link ini bertujuan untuk melihat keterangan rincian dari kalimat atau gambar yang sedang ditampilkan dalam script. Perintah untuk link dokumen tersebut adalah :
<a href=”nama_file”>
Digunakan untuk melakukan link ke file tertentu dengan menunjuk kata atau gambar yang diketikan setelah perintah tersebut, dan nantinya akan diakhiri dengan </a>.
Contoh 1
<html>
<head>
<title>Contoh 1</title>
</head>
<body bgcolor="yellow">
<center><font size="6"><b>UNIVERSITAS KUNINGAN</b></font><br>
<font size="2">Kampus I : Jl. Cut Nyak Dhien Cijoho Kuningan</font><br>
<font size="2">Kampus II : Jl. Pramuka 67 Kuningan Telp.
(0232)871982</font><br></center>
<hr size="5" color="blue">
<p align="center">
<br>
<img src="UNIKU-10.jpg" width="255" height="255">
<br>
<br>
<br>
| FKIP | FE | <a href="Modul-4b.htm"> FKOM</a> | FHUT |
</body>
</html>
Contoh 2
<html>
<head>
<title>Contoh 2</title>
</head>
<body bgcolor="yellow">
<center><font size="3"><b>UNIVERSITAS KUNINGAN</b></font><br>
<font size="5"><b>FAKULTAS ILMU KOMPUTER</b></font><br>
<font size="2">Kampus I : Jl. Cut Nyak Dhien Cijoho Kuningan Telp. (0232)875097</font><br>
<font size="2">Kampus II : Jl. Pramuka 67 Kuningan Telp.
(0232)871982</font><br>
<br>
<hr size="5" color="blue">
<br>
<img src="UNIKU-10.jpg" width="255" height="255">
<br>
<br>
<br>
| Teknik Informatika - S1 dan D3 | Sistem Informasi - S1 dan D3 |<br><br>
</body>
</html>
C. Praktek
1. Ketikan program Contoh 1 dan simpan dengan nama Modul-4a.htm
2. Ketikan program Contoh 2 dan simpan dengan nama Modul-4b.htm.
3. Jalankan program Contoh 1
4. Klik pada tulisan FKOM, amati hasilnya
5. Buka program Modul-4b.htm dan buat baris baru setelah baris terakhir
6. Ketikan tulisan “Kembali ke menu utama”
7. Link tulisan tersebut ke file Modul-4a.htm.
8. Jalankan script Modul-4b.htm, lalu klik pada tulisan yang baru dibuat
9. Amati hasilnya.
D. Pertanyaan dan Tugas
1. Bisakah link antar dokumen dilakukan dengan memilih area tertentu dari sebuah objek atau gambar, bagaimana caranya.
2. Buat contoh script untuk link gambar tersebut.
MODUL V
OPERASI FRAME
A. Maksud dan Tujuan
1. Memahami pembuatan frame
2. Memahami operasi pada frame
B. Dasar Teori
Frame merupakan fasilitas yang diberikan oleh HTML untuk membagi script ke dalam beberapa bagian dalam bentuk baris dan kolom. Tag ini sangat unik karena tidak disimpan diantara tag <body> dan </body>. Dengan adanya fasilitas yang diberikan oleh tag <framset> script daat diatur sedemikian rupa sehingga pada saat diinginkan pergantian tampilan dengan sript yang lain, anda tinggal menunjuk script yang akan ditampilkan dan disimpan pada bagian frame yang lain. Tag utama dari pembuatan frame ini yaitu <frameset> dan diakhiri dengan </frameset> yang diketikan setelah tag </head>. Tag <frameset> memiliki beberapa parameter yaitu :
<cols>
Untuk membagi script menjadi 2 bagian atau lebih, yaitu dari kiri ke kanan.
<rows>
Untuk membagi script menjadi 2 bagian atau lebih, yaitu dari atas ke bawah.
<name>
Untuk memberikan nama dari frameset yang telah dibuat, dengan urutan dari kiri ke kanan atau dari atas ke bawah.
<src>
Untuk menyisipkan script pada frame yang telah dibuat.
<target>
Untuk menentukan target penyimpanan script ke dalam nama frameset tertentu.
Contoh 1
<html>
<head>
<title>Contoh 1</title>
</head>
<frame rows="40%,60%">
<frame name="atas" src="Modul-5b.html">
<frame name="bawah" src="Modul-5c.html">
</frameset>
</html>
Contoh 2
<html>
<head>
<title>Contoh 1</title>
</head>
<body bgcolor="yellow">
<center><font size="6"><b>UNIVERSITAS KUNINGAN</b></font><br>
<font size="2">Kampus I : Jl. Cut Nyak Dhien Cijoho Kuningan</font><br>
<font size="2">Kampus II : Jl. Pramuka 67 Kuningan Telp.
(0232)871982</font><br>
<hr size="5" color="blue">
| FKIP | FE | <a href="Modul-4b.htm" target="bawah"> FKOM</a> | FHUT |<br>
<a href="Modul-5c.html" target="bawah">Kembali</a>
</body>
</html>
Contoh 3
<html>
<head>
<title>Membuat Daftar</title>
</head>
<body>
<DL>
<DT>Fakultas Keguruan dan Ilmu Pendidikan
<DD>Bahasa dan Sastra
<DD>PE-AP
<DT>Fakultas Ekonomi
<DD>Akuntansi
<DD>Manajemen
<DT>Fakultas Ilmu Komputer
<DD>Teknik Informatika
<DD>Sistem Informasi
<DT>Fakultas Kehutanan
<DD>Budi Daya Hutan
<DD>Konservasi Sumber Daya Hutan
</DL>
</body>
</html>
C. Praktek
1. Ketik script Contoh 1 dan simpan dengan nama Modul-5a.html.
2. Ketik script Contoh 2 dan simpan dengan nama Modul-5b.html.
3. Ketik script Contoh 3 dan simpan dengan nama Modul5c.html.
4. Jalankan script Modul-5a.html dengan web browser dan amati hasilnya lalu cetak.
5. Jika ada kesalahan, lakukan perbaikan.
6. Ubahlah warna latar pada script Modul-5c.html sehingga menjadi lebih menarik.
D. Pertanyaan dan Tugas
1. Apakah tujuan dari pembagian script ke dalam kolom atau baris?
2. Bisakah membuat frame kolom dan baris sekaligus pada satu script, jelaskan.
3. Buatlah frame kolom untuk menampilkan informasi Universitas Kuningan.
MODUL VI
TABEL KONVENSIONAL
A. Maksud dan Tujuan
1. Dapat memahami dam membuat tabel konvensional.
B. Dasar Teori
Dalam HTML dikenal ada dua jenis tabel yaitu tabel konvensional dan tabel layout. Tabel konvensional merupakan tabel yang biasa kita lihat dalam kehidupan sehari-hari, misalnya tabel tentang daftar karyawan, daftar mahasiswa dan lain-lain. Tabel layout yaitu tabel yang digunakan untuk melakukan pengaturan tata letak tampilan di dalam monitor sehingga script akan terlihat menarik.
Tag yang digunakan untuk membuat tabel yaitu diawali dengan <table> dan diakhiri dengan </table>. Dalam tag ini memiliki beberapa atribut yaitu :
border : untuk mengatur ketebalan garis tabel.
align : untuk mengatur letak tabel, dimana atribut ini memiliki parameter :
left : untuk rata kiri
center : untuk ratatengah
right : untuk rata kanan
valign : untuk mengatur letak tabel, dimana atribut ini memiliki parameter :
top : untuk rata atas
center : untuk rata tengah
bottom : untuk rata bawah
cellpadding : untuk memberi jarak antara tulisan dengan border
cellspacing : untuk memberi jarak dengan melebarkan border
background : untuk menyisipkan gambar pada tabel
bgcolor : untuk mengatur warna latar
Di dalam tag <table> ini terdapat beberapa tag yang berfungsi untuk pengaturan kolom dan baris :
<caption> : untuk membuat judul tabel
<tr> : untuk mendefinisikan baris dalam tabel, dimana didalamnya dapat digunakan atribut align dan valign.
<td> : untuk mendefinisikan kolom dalam tabel, dimana didalamnya dapat digunakan atribut align dan valign, selain itu ada parameter yang berfungsi untuk penggabungan baris dan kolom.
colspan : untuk menggabungkan kolom
rowspan : untuk menggabungkan baris
Contoh :
<html>
<body bgcolor="337744">
<table border="2" align="center" valign="center">
<caption>PT. GUNA PERSADA<br>
Daftar Harga Barang
</caption>
<tr align="center">
<td>NO</td>
<td>Barang</td><td>Agen</td><td>Konsumen</td>
</tr>
<tr>
<td>1</td>
<td>TV 14"</td><td>1100000</td><td>1200000</td>
</tr>
<tr>
<td>2</td>
<td>Tape Recorder</td><td>650000</td><td>70000</td>
</tr>
<tr>
<td>3</td>
<td>VCD Player</td><td>400000</td><td>50000</td>
</table>
</body>
</html>
C. Praktek
1. Ketiklah script di atas, jalankan dan amati.
2. Tambahkan gambar sebagai background pada tabel tersebut
3. Berilah warna lain pada baris pertama yang berisikan No., Barang, Agen dan Konsumen
4. Buatlah sebuah tabel dengan tampilan sebagai berikut
KARTU HASIL STUDI
Nama : Banu Sutrisno
NIM : 0122341
Fakultas : Ilmu Komputer
Jurusan : Teknik Informatika
No. Mata Kuliah SKS Nilai Nilai Akhir
UTS UAS
1 Pancasila 2 75 85 B
2 Agama 2 50 60 C
3 Pemrograman Web 1 2 80 90 A
Jumlah 6
BAB VII
TABEL LAYOUT
A. Maksud dan Tujuan
1. Dapat memahmi dan membuat tabel layout
B. Dasar Teori
Pada bab sebelumnya sedikit telah dibahas tentang pengertian tabel layout, dimana tabel ini digunakan untuk mengatur tata letak tampilan script sehingga home page yang dibuat akan terlihat lebih menarik.
Untuk melakukan pengaturan pada tabel layout ini tinggal ditambahkan nilai 100% pada parameter width dan height yang berada pada tag <table>. Selain hal tersebut anda juga dapat melakukan perubahan terhadap ukuran sel dari tabel dengan memberikan nilai pada parameter width dan height yang berada pada tag <td>.
Di dalam tabel layout ini anda dapat membuat atau menyisipkan gambar, tuisan ataupun tabel lain yang dibutuhkan sesuai dengan script yang sedang dibuat.
Contoh :
<html>
<head>
<title>script layout dengan tabel</title>
</head>
<body bgcolor="9966ff">
<table border="2" width="100%" height="100%" cellspacing="0">
<tr>
<td width="100%" colspan="2" height="57" bgcolor="#6699FF">
<p align="center"><b><font size="6" color="#000080" face="01-01-00">PT.
SURYA KENCANA</font></b></p>
<p align="center"><font face="Times New Roman" size="4" color="#000080">Jl.
Bugisan 424
Yogyakarta</font></td>
</tr>
<tr>
<td height="321" valign="top">
<img border="0" src="bl00347_.wmf" width="75" height="364">
</td>
<td height="321" valign="top">
<font color="#FFFF00">
<marquee width="100%" height="19">KUALITAS ADALAH YANG UTAMA............!</marquee>
</font>
<p align="center"><b><font size="5" color="#0000FF">DAFTAR PRODUK</font></b></p>
<table border="1" width="71%" align="center">
<tr>
<td rowspan="2" bgcolor="#99CCFF">
<p align="center">No</td>
<td rowspan="2" bgcolor="#99CCFF">
<p align="center">Barang</p>
</td>
<td colspan="2" bgcolor="#99CCFF">
<p align="center">Merk</td>
</tr>
<tr>
<td bgcolor="#FFCCFF">
<p align="center">Sony</p>
</td>
<td bgcolor="#FFCCFF">
<p align="center">Aiwa</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFCC">1</td>
<td bgcolor="#FFFFCC">Televisi 14"</td>
<td bgcolor="#FFFFCC">
<p align="right">2.000.000,-</p>
</td>
<td align="right" bgcolor="#FFFFCC">2.200.000,-</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFCC">2</td>
<td bgcolor="#FFFFCC">Radio </td>
<td bgcolor="#FFFFCC">
<p align="right">350.000,-</p>
</td>
<td align="right" bgcolor="#FFFFCC">400.000,-</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFCC">3</td>
<td bgcolor="#FFFFCC">Tape</td>
<td bgcolor="#FFFFCC">
<p align="right">800.000,-</td>
<td align="right" bgcolor="#FFFFCC">850.000,-</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFCC">4</td>
<td bgcolor="#FFFFCC">VCD</td>
<td bgcolor="#FFFFCC">
<p align="right">400.000,-</td>
<td align="right" bgcolor="#FFFFCC">450.000,-</td>
</tr>
</table>
<p>
</td>
</table>
</body>
</html>
C. Praktek
1. Ketikan script contoh di atas, jalankan dan amati.
2. Jelaskan script tersebut dalam laporan resmi
3. Buatkan script untuk Universitas Kuningan dengan tampilan sebagai berikut :
UNIVERSITAS KUNINGAN
Kampus I : Jl. Cut Nyak Dhien Cijoho Kuningan
Kampus II : Jl. Pramuka 67 Kuningan 45512
Fakultas Keguruan & Ilmu Pendidikan
PENERIMAAN MAHASISWA BARU
Fakultas Ekonomi
Univeritas Kuningan akan menyelenggarakan penerimaan mahasiswa baru untuk periode 2003-2004 mulai bulan Mei sampai Agustus 2003.
Fakltas Ilmu Komputer
Fakultas Kehutanan
FOTO KEGIATAN
NEWS
Badan Eksekutif Mahasiswa (BEM) Universitas Kuningan akan menyelenggarakan lomba karya ilmiah se Jawa Barat. Bagi peserta yang berminat silahkan menghubungi panitia.
www.uniku.ac.id
Jl. Cut Nyak Dhien Cijoho Kuningan
4. Buatlah tampilan pengautan warna pada script diatas sehingga tampak menarik.
5. Buatlah tulisan Foto kegiatan bergerak memantul antara dua sisi.
6. Jelaskan langkah pembuata script di atas pada laporan resmi.
BAB VIII
FORM DAN INPUT HTML
A. Maksud dan Tujuan
1. Dapat memahami bagian-bagian dari form.
2. Dapat memahami dan membuat form di dalam script.
B. Dasar Teori
Form merupakan salah satu fasilitas yang disediakan HTML untuk memberikan input atau masukan data dari user ke server sehingga nantinya terjadi komunikasi antara user dan server dalam bentuk pengiriman data.
Untuk pengiriman data tersebut biasanya menggunakan perintah-perintah aplikasi pemrograman web yang digunakan. Dalam modul ini akan dipelajari tentang operasi-operasi form yang berada dalam batasan HTML.
Bentuk umum dari tag form adalah :
<form action=”url/nama_file” method=”post/get” name=”nama_form”>
Dalam form memiiliki beberapa tag yang berfungsi untuk memasukan data, tag-tag tersebut adalah :
<input type=”atribut”>
diguakan untuk memasukan data berupa text, radio, checkbox, button dan image. Atribut dalam tag ini yaitu
text : digunakan untuk memasukan nilai yang akan dikirim kepada server, baik berupa angka ataupun karakter.
radio : untuk menyediakan beberapa pilihan kepada user, tetapi hanya satu yang bisa dipilih.
checkbox : untuk menyediakan beberapa pilihan kepada user, dan user dapat memilih lebih dari satu pilihan.
submit : digunakan untuk memanggil uatau file yang ditunjuk oleh atribut action, dan data akan dimasukan sesuai dengan perintah didalam file action tersebut.
reset : digunakan untuk menginisialisasi setiap elemen dalam form atau mengembalikan tag-tag form ke dalam kondisi semula.
image : digunakan untuk menampilkan gambar sebagai pengganti button.
<select size=”nilai”>
Merupakan menu pilihan dalam bentuk drop down dimana user hanya dapat memilih satu pilihan yang ada dalam menu tersebut. Untuk menetukan point-point dari pilihan tersebut digunakan tag <option>.
<textarea cols=”jumlah_kolom” rows=”jumlah_baris”>
Digunakan untuk memasukan data berupa kalimat, memo atau pernyataan sesuai dengan keinginan user, dimana nantinya data tersebut akan dikirim ke server.
Contoh :
<html>
<head>
<title>INPUT DATA</title>
</head>
<body>
<table width="100% height="100" cellspacing="0">
<tr align="center" height="20%">
<td colspan="2" bgcolor="#3399FF"><font size="5"
color="blue">PT. SURYA KENCANA</font><br>Jl.
Kusumanegara 234 0272)5463564<br>
<marquee bgcolor=”blue”><font color="yellow">PT. Surya Kencana</font></marquee>
</span>
</td>
</tr>
<tr height="80%">
<td width="20%" align="center" valign="center"><img src="pemandangan.gif" width="150" height="100%" >
</td>
<td bgcolor="223485"><br>
<form >
<table border="1" align="center">
<tr align="center" bgcolor="red">
<td colspan="2" bgcolor="#CC99FF">ANGKET</td>
</tr>
<tr bgcolor="yellow">
<td bgcolor="#FFCCFF">Nama</td>
<td bgcolor="#FFCCFF">
<input type="text" size="20">
</td>
</tr>
<tr bgcolor="yellow">
<td bgcolor="#FFCCFF">E-mail</td>
<td bgcolor="#FFCCFF">
<input type="text" size="20">
</td>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
C. Praktek
1. Ketikan script di atas dan jalankan, amati hasilnya.
2. Tambahkan tag berikut pada script setelah baris E-mail jika dilihat pada browser.
<tr bgcolor="yellow">
<td bgcolor="#FFCCFF">Sistem Operasi<br>yang dipakai</td>
<td bgcolor="#FFCCFF">
<input type="radio" name="pilih" checked>Windows<br>
<input type="radio" name="pilih">Linux<br>
<input type="radio" name="pilih">Unix
</td>
</tr>
3. Jalankan dan amati hasilya
4. Tambahkan tag berikut setelah tag-tag yang ada pada praktek nomor 2
<tr bgcolor="yellow">
<td bgcolor="#FFCCFF">Alasan penggunaan<br>Sistem Operasi</td>
<td bgcolor="#FFCCFF">
<input type="checkbox">Stabil<br>
<input type="checkbox">Bebas Virus<br>
<input type="checkbox">Freware
</td>
</tr>
5. Jalankan dan amati hasilnya
6. Tambahkan tag berikut setelah tag-tag yang ada pada praktek nomor 4
<tr bgcolor="yellow">
<td bgcolor="#FFCCFF">Berapa lama anda<br>memakai OS tersebut</td>
<td bgcolor="#FFCCFF">
<select size="1">
<option>Kurang dari 1 tahun
<option>1-5 tahun
<option>Lebih dari 5 tahun
</select>
</td>
</tr>
7. Jalankan dan amait hasilnya
8. Tambahkan tag berikut setelah tag-tag yang ada pada praktek nomor 6
<tr bgcolor="yellow">
<td bgcolor="#FFCCFF">Komentar</td>
<td bgcolor="#FFCCFF">
<textarea rows="3" cols="20">
</textarea>
</td>
</tr>
9. Jelaskan script tersebut dalam laporan utama.
D. Tugas
Buatlah script Penerimaan Mahasiswa Baru Universitas Kuningan dengan tampilan di browser sebagai berikut :
UNIVERSITAS KUNINGAN
Kampus I : Jl. Cut Nyak Dhien Cijoho Kuningan
Kampus II : Jl. Pramuka 67 Kuningan 45512
FORMULIR PENDAFTARAN
Nama
Alamat
Asal sekolah
Fakultas yang dipilih o Keguruan dan Ilmu Pendidikan (FKIP)
o Ekonomi (FE)
o Ilmu Komputer (FKom)
o Kehutanan (Fhut)
Jurusan yang dipilih
Teknik Informatika
Sistem Informasi
Budi Daya Hutan
Konservasi Sumber Daya Hutan
Jenjang o Strata Satu (S1)
o Diploma Tiga (D3)
Saran untuk UNIKU .
www.uniku.ac.id
Jl. Cut Nyak Dhien Cijoho Kuningan
BAB IX
PENGATURAN TOMBOL BUTTON DENGAN JAVA SCRIPT
A. Maksud dan Tujuan
1. Memahami penggunaan tombol button dalam Java Script
2. Dapat menggunakan tombol Button Java Script dalam HTML
B. Dasar Teori
JavaScript merupakan aplikasi yang berfungsi untuk membantu HTML dalam melakukan operasi-operasi yang berhubungan dengan data yang dimasukan oleh user, karena secara umum HTML hanya dapat melakukan proses desain tampilan dari script yang dibuat.
JavaScript merupakan modifikasi dari bahasa c++ dengan menggunakan pola penulisan yang lebih sederhana. Seperti halnya bahasa pemrograman yang lain, dalam JavaScript juga terdapat operasi yang berhubungan dengan aritmatika, fungsi logika, perulangan dan lain-lain.
Penggunaan JavaScript dalam HTML akan diawali dengan tag <script language=”JavaScript”> dan akan diakhiri dengan tag </script>. Dan penulisannya bisa disimpan diantara tag <head> dan </head> atau diantara tag <body> dan </body>.
Contoh 1 :
<html>
<head>
<title>Menampilkan tulisan</title>
</head>
<body>
<script language=”JavaScript”>
document.write(“<h1>Hallo</h1><br>”)
document.write(“Saya sedang belajar Java Script”)
</script>
</body>
</html>
Contoh 2 :
<html>
<head>
<script language="JavaScript">
function a()
{alert("Terima kasih anda telah mengunjungi web kami");
}
</script>
</head>
<body>
<form>
<table border="1" align="center">
<tr align="center" bgcolor="red">
<td colspan="2" bgcolor="#CC99FF">ANGKET</td>
</tr>
<tr bgcolor="yellow">
<td bgcolor="#FFCCFF">Nama</td>
<td bgcolor="#FFCCFF">
<input type="text" size="20">
</td>
</tr>
<tr bgcolor="yellow">
<td bgcolor="#FFCCFF">E-mail</td>
<td bgcolor="#FFCCFF">
<input type="text" size="20">
</td>
<tr bgcolor="yellow" align="center">
<td colspan="2" bgcolor="#669999">
<input type="reset" value="Hapus">
<input type="button" value="Thank" onclick="a()">
</td>
</tr>
</table>
</form>
</body>
</html>
Contoh 3
<html>
<head>
<script language="JavaScript">
function hitung()
{
var A,B;
A=parseFloat(document.data.nilai1.value);
B=parseFloat(document.data.nilai2.value);
document.data.hasil.value=A+B;
}
</script>
</head>
<body>
<form name="data">
<table border="1" align="center">
<tr align="center" bgcolor="red">
<td colspan="2" bgcolor="#CC99FF">OPERASI PENJUMLAHAN</td>
</tr>
<tr bgcolor="yellow">
<td bgcolor="#FFCCFF">Angka Pertama</td>
<td bgcolor="#FFCCFF">
<input type="text" size="20" name="nilai1">
</td>
</tr>
<tr bgcolor="yellow">
<td bgcolor="#FFCCFF">Angka Kedua</td>
<td bgcolor="#FFCCFF">
<input type="text" size="20" name="nilai2">
</td>
<tr bgcolor="magenta" align="center">
<td>Hasil operasi</td>
<td>
<input type="text" size="20" name="hasil">
</td>
</tr>
<tr bgcolor="yellow" align="center">
<td colspan="2" bgcolor="#669999">
<input type="button" value="Hitung" onclick="hitung()">
</td>
</tr>
</table>
</form>
</body>
</html>
C. Praktek
1. Ketikan script Contoh 1, simpan dengan nama modul9a.htm
2. Jalankan dan amati hasilnya
3. Ketikan script Contoh 2, simpan dengan nama modul9b.htm
4. Jalankan dan amati hasilnya
5. Gantilah tag <input type=”reset” value=”Hapus”> dengan tag baru yaitu <input type=”button” value=”Hapus”>
6. Jalankan, lalu isi data. Apa yang terjadi? Mengapa demikian?
7. Ketikan script Contoh 3, simpan dengan nama modul9c.htm
8. Jalankan dan amati hasilnya.
9. Gantilah operator + pada tag document.data.hasil.value=A+B; dengan operator * sehingga menjadi document.data.hasil.value=A*B;.
10. Jalankan, lalu isi data. Amati hasilnya!
11. Buatkan script untuk program perhitungan dengan tampilan sebagai berikut :
OPERASI PERHITUNGAN
Angka pertama
Angka kedua
Hasil Perkalian
Hasil Pengurangan
Hasil Pembagian
BAB X
FUNGSI IF-ELSE
A. Malsud dan Tujuan
1. Memahami fungsi If-ELSE dalam Java Script
2. Dapat menggunakan fungsi IF-ELSE dalam Java Script
B. Dasar Teori
Seperti halnya dalam bahasa pemrograman yang lain, di dalam Java Script juga tedapat fungsi IF-ELSE guna mengambil keputusan dari beberapa pilihan yang ditawarkan.
Bentuk umum perintah IF-ELSE adalah
If (kriteria_1)
{
pernyataan_1;
}
ELSE IF (kriteria_2)
{
pernyataan_2;
}
ELSE
{
pernyataan_alternatif;
}
Contoh 1
<html>
<head>
<script language="JavaScript">
function hasil()
{
var A,B;
A=parseFloat(document.data.nilai.value);
if (A<="60")
{
document.data.kriteria.value="Tidak Lulus";
}
else
{
document.data.kriteria.value="Lulus";
}
}
</script>
</head>
<body>
<form name="data">
<table border="1" align="center">
<tr align="center" bgcolor="red">
<td colspan="2" bgcolor="#CC99FF">KRITERIA KELULUSAN</td>
</tr>
<tr bgcolor="yellow">
<td bgcolor="#FFCCFF">Masukan Nilai</td>
<td bgcolor="#FFCCFF">
<input type="text" size="20" name="nilai">
</td>
</tr>
<tr bgcolor="yellow">
<td bgcolor="#FFCCFF">Kriteria</td>
<td bgcolor="#FFCCFF">
<input type="text" size="20" name="kriteria">
</td>
<tr bgcolor="yellow" align="center">
<td colspan="2" bgcolor="#669999">
<input type="button" value="Proses" onclick="hasil()">
</td>
</tr>
</table>
</form>
</body>
</html>
Contoh 2
<html>
<head>
<script language="JavaScript">
function hitung()
{
var A,B;
A=document.data.gol.value;
if (A=="I")
{
document.data.gapok.value="250000";
}
else if (A=="II")
{
document.data.gapok.value="300000";
}
else
{
document.data.gapok.value="350000";
}
B=parseFloat(document.data.gapok.value);
if (A=="I")
{
document.data.tunjangan.value=B*0.05;
}
else if (A=="II")
{
documen.data.tunjangan.value=B*0.1;
}
else
{
documen.data.tunjangan.value=B*0.15;
}
}
</script>
</head>
<body>
<form name="data">
<table border="1" align="center">
<tr align="center" bgcolor="red">
<td colspan="2" bgcolor="#CC99FF">PERHITUNGAN GAJI KARYAWAN</td>
</tr>
<tr bgcolor="yellow">
<td bgcolor="#FFCCFF">Nama</td>
<td bgcolor="#FFCCFF">
<input type="text" size="20">
</td>
</tr>
<tr bgcolor="yellow">
<td bgcolor="#FFCCFF">Golongan</td>
<td bgcolor="#FFCCFF">
<select name="gol">
<option value="I">I
<option value="II">II
<option value="III">III
</select>
</td>
<tr bgcolor="yellow" align="center">
<td colspan="2" bgcolor="#669999">
<input type="button" value="Hitung" onclick="hitung()">
</td>
</tr>
<tr>
<td>Gaji Pokok</td>
<td>
<input type="text" size="20" name="gapok">
</td>
</tr>
<tr>
<td>Tunjangan</td>
<td>
<input type="text" size="20" name="tunjangan">
</td>
</tr>
</table>
</form>
</body>
</html>
C. Praktek
1. Ketikan script Contoh 1, dan simpan dengan nama Modul10a.htm
2. Jalankan, masukan angka 78 dan amati hasilnya
3. Masukan angka 101, apa yang terjadi? Mengapa demikian
4. Beri batasan agar pada saat diberikan nilai dibawah 0 atau diatas 100, program akan menampilkan tulisan “masukan hanya 0 sampai 100”
5. Ketikan script Contoh 2, dan simpan dengan nama Modul10b.htm
6. Jalankan, jika terjadi kesalahan, betulkan!
7. Buatkan scrip untuk menghitung pembayaran SPP dengan tampilan sebagai berikut :
PERHITUNGAN SPP
Nama
NIM
Jumlah SKS yang diambil
SPP Tetap
Jumlah SKS (Rp)
Total Pembayaran
Ketentuan :
a. Jumlah SKS (Rp) = Jumlah SKS yang diambil X 25000
b. Total Pembayaran = SPP Tetap + Jumlah SKS (Rp)
Jika ingin lebih rapi anda Bisa Mendownloadnya DISINI ATAU DOWNLOAD
Terima kasih telah membaca artikel tentang Modul Belajar HTML di blog Kuya028 jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.