dirppan23.files.wordpress.com · web viewlaporan praktikum pemograman web 1 modul 1 – 5 nama:dede...

LAPORAN PRAKTIKUM PEMOGRAMAN WEB 1

MODUL 1 – 5

Nama :Dede Irpan

Nim :2011081037

Prodi :Tekhnik Informatika

LABORATORIUM KOMPUTER

FAKULTAS ILMU KOMPUTER(FKOM)

UNIVERSITAS KUNINGAN

2012

MODUL 1 Pengaturan Huruf Dasar Teori

HTML merupakan singkatan dari Hyper Text Markup Language. Di dalam HTML dikenal adanya tag atau tanda-tanda khusus yang merupakan rangakaian perintah yang akan diproses oleh web browser. Software yang dibutuhkan untuk menulis dan menjalankan tag-tag HTML yaitu :

1. Text Editor : Notepad, Font page, Macromedia Dreamweaver dan lain-lain

2. Web browser : Interner Explorer, Netscape Navigator dll.Berikut ini adalah beberapa perintah yang biasa digunakan untuk pengaturan huruf ataupun warna dalam pembuatan script :<font parameter>Face : untuk menentukan jenis huruf, misalnya times new roman,arial,dllSize : untuk menentukan ukuran huruf, yaitu dengan memberikan angka

dari 1sampai 7 dan dari -7 sampai -1Color : untuk memberikan warna huruf yang digunakan, anda dapat

mengetikan warna yang diinginkan secara langsung ataupun dengan kode angkanya

Simpan dengan nama Contoh1.htmlJalankan dengan Mozilla firefox :

Tag – tag yang digunakan untuk melakukan pengaturan huruf adalah :<h1> sampai <h7> : untuk mengatur ukuran huruf<center> : untkuk 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 mengatur tulisan dari kanan ke kiri<hr size = n> : untuk mengatur garis horizontal, dengan n sebagai

lebar dari garis tersebut.Contoh :

Output :

Contoh 2 :

Contoh 3 :

Output :

Contoh 4 :

Output :

Praktikuma. Ketikan program Modul-1a.html dengan menggunakan Notepadb. Jalankan dan amati hasilnyac. Cetak listing program dan hasilnya

d. Output/hasil :

Analisis:Pada tag diatas contohnya <br> itu adalah tag untuk pindah baris.

e. Ubahlah ukuran huruf pada baris pertama dengan menggunakan <h2> dan baris kedua menggunakan <h1>

f. Jalankan dan amati hasilnya, lalu cetak :

H1 dan H2 ialah untuk ukuran huruf,ukuran yang ditentukan biasanya sampai H7.

g. Buatlah semua huruf berada ditengah – tengah (centering)

Outputnya :

h. Buatlah garis horizontal pada baris ketiga

i. Jalankan dan cetak hasilnya :

j. Buatlah tulisan bergerak dari kanan ke kiri pada baris keempat sebagai berikut : Universitas Pertama di Kuningan

Output :

k. Ketikan program contoh 1

l. Jalankan dan amati hasilnya :

Analisis :<body bgcolor="magenta"> = untuk warna pada background.<font face="arial" size="6" color=<"blue"> = untuk efek huruf, ukuran dan warna pada huruf.

m. Pada baris yang bertuliskan Office ubahlah jenis hurufnya dengan menggunakan Time New Roman dengan ukuran 10

n. Jalankan dan amati hasilnya. Mengapa demikian :

Analisis:

Jenis huruf diganti dengan Times New Roman dan ukuran 10 menghasilkan output seperti diatas.

o. Buatlah warna yang menarik untuk baris huruf tersebut :

output :

p. Ketik program contoh 2 :

q. Jalankan dan amati hasilnya

Analisis:Tampilan diatas menghasilkan dua gambar, yang pertama sebagai background yang kedua sebagai gambar kecil,

r. Buatlah tulisan di tengah – tengah ” PT.ALIM RUGI”, dengan ukuran huruf paling besar dan beru warna yang menarik.

Outputnya :

s. Lima baris berikutnya ketikan alamat ”Jl. Pramuka 77 Cirebon Telp. (0231)482874”

t. Jalankan dan amati hasilnya

Tugas1. Bisakah anda membuat tag – tag HTML dan Microsoft word? Jelaskan.

Tidak bisa karena pada microsoft word hanya digunakan untuk mengetik huruf dan langsung dengan jenis file doc.

2. Bisakah tag – tag dalam HTML seperti untuk mempertebal, membuat garis bawah, membuat centering dan lain-lain ditulis secara bersamaan pada satu baris? Mengapa?Bisa karena pada tag-tag HTML tidak case sensitive seperti program yang lainnya.

3. Buatlah satu script yang menarik untuk sebuah perusahaan dimana didalamnya terdapat informasi:o Nama Perusahaano Alamat Perusahaan o Gambar sebagai pengganti logo perusahaan.

MODUL 2 Hubungan Antar Dokumen 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 ketempat tersebut akan menampilkan penunjuk sebagai lambang link. Proses link ini bertujuan untuk melihat keterangan rincian dari kalimat atau gambar yang sedang ditampilkan dalam script. Perintahuntuk 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>.

Praktikum1. Ketikkan program Contoh1

2. Ketikkan program Contoh2

3. Ketikkan program Contoh3

4. Jalankan program Contoh1

5. Klik pada tulisan FKOM amati hasilnya:

Setelah mengklik tulisn FKOM maka muncullah file Contoh2, itu dikarenakan pada slide pertama terdapat link yang megarah pada contoh 2.

6. Buka program Modul 2b dan buat baris baru setelah baris terakhir7. Ketikan tulisan “Kembali Ke Menu Utama”8. Link tulisan tersebut ke file Contoh1.html

9. Jalankan script Contoh2 lalu klik pada tulisan yang baru dibuat:

Klik pada “Kembali Ke Menu Utama” :

Hasil yang ditampilkan kembali ke awal slide karena link tersebut mengarah ke

awal slide.

1. Jelaskan fungsi dibawah ini :

<area shape="rect" coords="0,0,200,100" href="Contoh1.html" alt="kotak link">Adalah area yang ditunjuk kursor yang persegi empat dan untuk batasan are tersebut.

Pertanyaan dan Tugas1. Bisakah link antar dokumen dilakukan dengan memilih area tertentu dari sebuah

objek atau gambar? Bagaimana caranya?

Jawab:

Bisa, masukan gambar dalam script lalu masukan link ke alamat yang anda

inginkan.

2. Buatlah contoh script untuk link gambar berikut

Hasil/outputnya :

Klik NEXT..!!

MODUL 3 Operasi Frame

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

Contoh 2

Contoh 3

Praktek !

1. Script contoh 1 – 3 sudah ada diatas sekarang menjalankan contoh 1

2. Jika ada kesalahan lakukan perbaikan.

3. Ubahlah warna latar pada script contoh3.html sehingga mejadi lebih menarik

Hasil / outputnya :

Jika pada contoh 1 :

Tugas !

Untuk tugas sudah dikerjakan dan dikirim melalui email beserta lampiran.

MODUL 4 Tabel

Dasar Teori

Dalam HTML dikenal ada dua jenis tabel yaitu tabel konvensional dan tabel

layout. Tabel konvesional merupakan tabel yang bisa kita liat 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

didalam 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 rata tengah

right : untuk rata kanan

valign : untuk mengatur letak tabel, dimana atribut ini memiliki parameter :

top : untuk rata atas

cencer : untuk rata tengah

bottom : untuk rata bawah

cellpadding : untuk memberi jarak antara tulisan dengan border

callspacing : untuk memberi jarak dengan melebarkan border

background : untuk menyisipkan gambar pada tabel

bgcolor : untuk mengatur warna latar

Di dalam tag <tabel> ini terdapat beberapa tag yang berfungsi untuk pengaturan kolom

dan baris :

<caption> : untuk membuat judul

<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

Praktek :

1. Ketik script contoh 1 lalu simpan dengan nama modul4a.html,jalankan dan

amati.

Jalankan :

Pada script diatas terdapat bg color yang menggunakan angka, itu berarti angka

tersebut merupakan angka yang bisa menggantikan huruf untuk member warna.

2. Tambahkan background pada tabel tersebut.

Outputnya :

3. Beri warna pada baris pertama yang berisikan No, Barang, Agen dan Konsumen

Outputnya :

4. Ketikan script contoh 2 lalu simpan dengan nama Modul4b.html, jalankan dan

amati.

5. Tabel dengan tampilan sebagai berikut.

KARTU HASIL STUDI

Nama : Dede Irpan

NIM : 2011081037

Fakultas : Ilmu Komputer

Jurusan : Teknik Informatika

No. Mata Kuliah SKS

Nilai

NilaiAkhirUTS UAS

1 Pancasila 2 75 85 B

2 Agama 2 50 60 C

3 Pemograman Web 1 2 80 90 A

Jumlah 6

Output / hasilnya :

Tugas

Untuk tugas sudah dikerjakan dan dikirim melalui email beserta lampiran.

MODUL 5 Form dan Input Html

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

pemograman 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= "nam_ form>

Dalam form memiiliki beberapa tag yang berfungsi untuk memasukan data, tag-

tag tersebut adalah :

<input type="atribut">

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

S u b m i t : d i g u n a k a n u n t u k m e m a n g g i l a t a u f i l e y a n g

d i t u n j u k o l e h 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 yang ada dalam menu tersebut . Untuk menentukan poin-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.

Praktek1. Ketikan script dibawah ini jalankan dan amati hasilnya :

Terdapat kolom utk mengisi inputan pada kolom Nama dan E-mail.

2. Tambahkan tag berikut pada script setelah baris email 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 hasilnya :

Tag tersebut memberikan pilihan untuk memilih salah satu pada kolom diatas.4. Tambahkan tag berikut setelah tag-tag yang ada pada praktek diatas.

<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">Freeware</td></tr>


Tag diatas hampir sama dengan yang sebelumnya Cuma bedanya pada yang sebelumnya hanya bisa dipilih salah satu,tag yang satu ini bisa dipilih semua.

6. Tambahkan tag berikut ;<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>


Pada tag tersebut terdapat pilihan yang sudah ada jawabannya.8. Tambahkan tag berikut :

<tr bgcolor="yellow"><td bgcolor="#FFCCFF">Komentar</td><td bgcolor="FFCCFF">

<textarea rows="3" cols="20"></textarea></td></tr>

9. Jalankan script tersebut dalam laporan utama.

TugasTugas sudah dikerjakan dan dikirim melalui email beserta lampirannya.

dirppan23.files.wordpress.com · web viewlaporan praktikum pemograman web 1 modul 1 – 5 nama:dede...

Documents