LAPORAN PRAKTIKUM

PEMROGRAMAN WEB CLIENT

Disusun oleh :
NAMA : Diva Valdyan
NIM : 205610045
JURUSAN : Sistem Informasi 2

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN

KOMPUTER AKAKOM YOGYAKARTA
2021
A. TUJUAN
 Mahasiswa diharapkan mampu memahami kegiatan praktikum pertemaun ke-3 yaitu
list dan hyperlink

B. PRAKTIKUM
 Jalankan Editor Notepad++
 Buatlah File baru dan simpanlah dengan nama file : modul_p31.html
 Ketikkan script berikut ini : (terdapat dalam modul)
 Jalankan file modul_p31.html di browser.
 Amati hasilnya, mengapa terdapat 2 hasil berbeda pada script di atas?
 Jika baris 5 dirubah menjadi <ol type=”a” start=7>, apa yang terjadi?

hasilnya berbeda karena yang atas tidak menggunakkan <ul> sedangkan yang dibawah
menggunakkan <ul> sehingga hasil kedua lebih terlihat mengurutkan dibanding yang
pertama
Setelah diubah dengan memasuki <ol type=”a” start=7> hasilnya yang pertama berubah
dengan dimulai dengan alphabet dimana tidak dimulai dari alphabet yang pertama (a)
melainkan (g). Itu karena start=7 yang akan memulai alphabet mulai dari alphabet ke tujuh
yaitu huruf (g)

 Download-lah gambar prajurit.jpg dari modul

 Buatlah File baru dan simpanlah dengan nama file : modul_p32.html
 Ketikkan script berikut ini : (ada didalam modul)
 Jalankan script tersebut di browser:
 Klik Contoh List, jelaskan apa yang terjadi!
 Klik Kampus Akakom, apa yang terjadi? Rubahlah script tersebut agar saat
diklik Kampus Akakom maka akan membuka situs web akakom!
 Pindahkan gambar prajurit.jpg yang tadi telah anda download sedemikian,
sehingga saat Prajurit Keraton di Klik tidak terjadi Error! (script baris 6 tidak
boleh dirubah)
 Apa yang harus dirubah, agar pada saat Contoh List di-klik maka file
modul_p31.html akan terbuka di Tab Baru?
  Saat mengklik list yang terjadi langsung mengarahkan pada modul_p31.html
 Saat mengklik kampus akakom tidak bisa dibuka atau error. Dan saat di ubah dengan
menambahkan HTTP:// barulah bisa mengakses ke sistus akakom

- Saat membuka gambar yang terjadi adalah error tetapi dengan menambahkan
gambar tersebut pada fle foto sehingga gambar dapat dimuat (file foto dibuat
dengan cara click ctrl + click “foto/prajurit.jpg” maka file akan terbentuk dengan file
kosong, kemudian isikan file tersebut dengan gambar yang sudah di download)

Dengan cara ini tidak perlu lagi mengubah script.

Jika ingin membuka link pada tab baru atau jendela baru tambahkan “target=’_blank’.
Seperti gambar dibawah

C. LATIHAN
1. Buatlah file baru bernama : modul_l31.html, kemudian ketikkan script yang menghasilkan
tampilan sbb : (terdapat dalam modul)
Gambar diatas merupaka script untuk mendapatkan hasil seperti gambar dibawah ini

Hasilnya sama dengan yang diperintahkan dalam latihan yang membedakan hanya jenis font
yang digunakkan.

D. TUGAS
1. Jelaskan fungsi atribut title pada tag <a>, contoh :
<a href=”tes.html” title=”Ini hanya sekedar Tes”>Tes</a>

2. Jelaskan arti dari link berikut ini :

<a href=”http://www.coba.html#kedua”>tugas 1</a>
<a href=”../data/foto/buku.jpg”>Tugas 2</a>
Jawaban
1. Fungsinya untuk memaparkan link dan bisa di buka saat perintah dijalankan di
browse. lalu saat di click akan mengarahkan ke tab baru. Saat di click terdapat
tulisan tes yang dapat di click, saat diclick akan diarahkan ke tab baru.
2. Saat dibuka maka akan muncul tulisan “tugas 1” yang bisa di click dan saat dibuka
akan menuju link www.coba.html #kedua (link ini tidak bisa dibuka saat uji coba)

Saat dibuka akan muncul tulisan “Tugas 2” dimana saat diclick juga sama, langsung
diarahkan ke linknya, tetapi yang membedakan adalah tampilan yang keluar adalah
foto atau gambar(saat diuji coba gambar tidak keluar mungkin harus memasukka
gambar ke dalam file yang berda dalam folder tempat penyimpanan file script HTML
agar gambar dapat dimuat)
E. KESIMPULAN
 Dengan ini mahasiswa menjadi paham cara membuat list dalam html, bagaimana cara
membuat link yang dicantumkan terbuka di tab yang baru, cara menampilakan gambar pada
website, mengetahui fungsi suatu tag seperti <a> , <ol>, <li>, dan <ul>, apa itu link absolut
dan apa itu link relatif.