Web viewLAPORAN PRAKTIKUM. PEMROGRAMAN WEB 1. MODUL . 2 (DUA) Disusun Oleh : Nama: Rizki Wirawanto....
Transcript of Web viewLAPORAN PRAKTIKUM. PEMROGRAMAN WEB 1. MODUL . 2 (DUA) Disusun Oleh : Nama: Rizki Wirawanto....
LAPORAN PRAKTIKUM
PEMROGRAMAN WEB 1
MODUL 2 (DUA)
Disusun Oleh :
Nama : Rizki WirawantoNim : 2011081109Prodi : Teknik Informatika B 2011
LABORATORIUM KOMPUTER
FAKULTAS ILMU KOMPUTER
UNIVERSITAS KUNINGAN
2012
A. PRAKTIKUM
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.jpg" width="255" height="255"><br><br><br>| FKIP | FE | <a href="modul 2-b.html"> 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="FKOM.jpg" width="255" height="255"><br><br><br>| TEKNIK INFORMATIKA - S1 dan D3 | SISTEM INFORMASI - S1 dan D3 |<br><br></body></html>
Contoh 3 :
<html><head><title>Creating Hotspot</title></head>
<body><img src ="mitsubishi.gif" width="400" height="200" border="0" usemap="#map"><map name="map"> <area shape="rect" coords="0,0,200,100" href="Modul-3a.html" alt="kotak link"> <area shape="circle" coords="354,41,36" href="Modul-3b.html" alt="lingkaran link"> <area shape="poly" coords="58,102,97,101,110,134,119,119,177,195,69,196,47,162,62,143" href="#"></map></body></html>
1. Ketikan program contoh 1 dan simpan dengan nama Modul-2a.htmlMaka outputnya adalah sebagai berikut :
Analisa :
2. Ketikan program contoh 2 dan simpan dengan nama Modul-2b.htmlMaka outputnya adalah sebagai berikut :
Analisa :
3. Ketikan program contoh 3 dan simpan dengan nama Modul-2c.htmlMaka outputnya adalah sebagai berikut :
Analisa :
4. Jalankan program contoh 1
5. Klik pada tulisan FKOM, amati hasilnya !Setelah di klik maka akan tampil seperti berikut :
6. Buka program Modul 2-b.html dan buat baris baru setelah baris terakhir7. Ketikan tulisan “ Kembali Ke Menu Utama “8. Link tulisan tersebut ke file Modul-2a.html !
Script nya kita ubah menjadi seperti berikut :
<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="FKOM.jpg" width="255" height="255"><br><br><br>| TEKNIK INFORMATIKA - S1 dan D3 | SISTEM INFORMASI - S1 dan D3 |<br><br><center> <a href="modul 2-a.html"> Kembali Ke Menu utama </center></body></html>
9. Jalankan script Modul-2b, lalu klik pada tulisan yang baru dibuat10. Amati hasilnya !
Jika di klik maka akan tampil seperti berikut :
11. Jelaskan fungsi dari perintah dibawah ini yang ada pada modul-2c.html<area shape="rect" coords="0,0,200,100" href="Modul-3a.html" alt="kotak link">
B. Pertanyaan dan Tugas
1. Bisakah link antar dokumen dilakukan dengan memilih area tertentu dari sebuah gambar ? bagaimana caranya.
2. Buat contoh script untuk link gambar tersebutJawab :script utama nya sebagai berikut kita simpan dengan nama 2a.html:
Lalu kita buat script lagi untuk menghubungkan script 2a.html
Kita simpan dengan nama 2b.html
<html><head><title>Link gambar</title></head>
<body><img src ="SID.jpg" width="400" height="400" border="0" usemap="#Superman"><map name="Superman"> <area shape="rect" coords="0,0,200,100" href="2b.html" alt="kotak link">
</map></body></html>
<html><head><title>Link gambar</title></head><body><center><font size="10">welcome to Superman Is Dead Blog's</font></center><center><img src ="SID.jpg" width="400"></center>
</body></html>
Maka output pada script yg pertama adalah seperti dibawah ini :
Jika kita mengklik bagian pojok kiri atas pada gambar, maka akan terhubung pada script yang kedua yaitu akan muncul tampilan seperti ini :