LAPORAN RESMIPRAKTIKUM WEB I

MODUL IIHTML Lanjut

(Table, Form, Frame, Hyperlink)

DisusunOleh:

KELAS BNAMA NUR ALVI NAULI

NRP 120451100028JURUSAN MANAJEMEN INFORMATIKA

DOSEN SRI HERAWATI S.Kom.

LABORATORIUM BISNIS INTELIJEN SISTEMJURUSAN MANAJEMEN INFORMATIKA

FAKULTAS TEKNIKUNIVERSITAS TRUNOJOYO MADURA

TELAH DISETUJUI TANGGAL :

.....-......-.....

ASISTEN PRAKTIKUM

NORMAN HIDAYATULLAH

(11.04.5.1.1.00001)

BAB I

PENDAHULUAN

1.1 Latar Belakang

Pada pembuatan suatau halaman web, terkadang kita ingin membuat suatu

table yang memberikan informasi tentang suatu data, misalnya table data

penjualan hp, table Kartu Rencana Studi, dll. Pada HTML kita bisa membuat table

tersebut serta bisa mengatur tampilan table tersebut. Kita bisa mengatur lebar,

tinggi, warna, perataan pada table tersebut, selain itu kita bisa menggabungkan

beberapa kolom maupun baris.

Selain membuat table pada HTML, kita bisa menambahkan textbox, radio

button, submit dan reset, daftar dorp down, dan text area. Kita bisa membuat

halaman web kita lebih menarik dengan menambahkan tag-tag tersebut.

Kita bisa membuat frame pada halaman web yang kita buat, kita bisa

membagi beberapa halaman web yang pernah kita buat menjadi beberapa frame.

Pada modul 2 ini akan dibahas tentang HTML lanjutan yaitu tentang table, form,

dan hyperlink.

1.2 Tujuan

Mampu menjelaskan table, frame, form, image, hyperlink pada HTML

Lanjut dan membuat aplikasinya

BAB II

DASAR TEORI

2.1 Tabel

a. Atribut ROWSPAN

Atribut ini digunakan untukmenggabungkan beberapa baris dalam satu

kolom menjadi satu baris (merge cell)

b. Atribut COLSPAN

Atribut ini digunakan untuk menggabungkan beberapa kolom dalam satu

baris menjadi satu kolom (merge cell), dimana atribut ini juga dapat diga-

bungkan dengan atribut sebelumnya yaitu ROWSPAN

c. Atribut Latar Belakang Tabel

Untuk memberikan warna latar belakang didalam table maka dapat digu-

nakan atribut bgcolor disertai dengan latar yang diinginkan, misalkan latar

belakang table akan diisi dengan warna biru, maka dapat dilakukan BG-

COLOR=”BLUE”, atau latar belakang diisi dengan gambar maka dapat

dilakukan dengan BACKGROUND=”namafile.jpg”, file yang dapat di-

gunakan untuk latar belakang adalah *.JPG, *.GIF, *.BMP dan

*.PNG.

d. Atribut Align

Atribut ini digunakan untuk pengaturan pelurusan dari suatu cell, adapun

macam pelurusan ini ada tiga yaitu LEFT, CENTER, dan RIGHT. Peluru-

san cell ini diperlukan terutama untuk informasi data mengenai mata uang,

atau yang berhubungan dengan nilai uang misalkan daftar harga. Bila ada

daftar harga maka sebaiknya digunakan align RIGHT, sehingga akan

memudahkan pembacaan.

2.2 Tabel Bersarang (Nested Table)

Kata bersarang (nested) sering digunakan pada istilah-istilah pemrograman

dan sering dijumpai dalam setiap pemrograman. Demikian pula dalam pembuatan

script HTML yaitu table bersarang, yang artinya adalah didalam suatu table terda-

pat table yang lain, kemungkin ini bias saja terjadi dengan meletakkan tag <table>

didalam tag <table> lainnya, sehingga didapatkan table yang bersarang di dalam

table lainnya.

2.3 Tag FrameSet

Sesuai dengan namanya frame yang berarti bingkai, adalah berhubungan

dengan pengaturan bingkai sebagai pembentuk jendela tampilan pada browser.

Sehingga dapatlah jendela browser dibagi menjadi beberapa frame. Ada tiga

pengaturan frame, yaitu secara vertical, horizontal dan kombinasi dari vertical dan

horizontal. Script HTML yang digunakan untuk pengaturan frame maka tidak

dapat digunakan untuk membuat halaman tampilan web, untuk itu diperlukan file

yang berisi script HTML lain dan disisipkan kedalam script frame tesebut. Jadi

bila ada dua frame maka diperlukan dua file HTML. Untuk dapat menyisipkan

ketiga file HTML tesebut kedalam frame, diperlukan nama yang jelas dan benar

serta dimana letak folder/ direktorinya, karena informasi tersebut digunakna

didalam tag <frameset>.

2.4 Form

Di gunakan untuk menerima informasi atau meminta umpan balik dari user dan

memproses informasi tersebut di server

Standar penulisan:

a. Elemen Form

Tag <FORM> digunakan untukmembuat form dalam document HTML

Atribut Fungsi

Method Metode pengiriman data ke file tujuan (POST atau GET)

ActionAksi yang akan dilakukan jika user menekan tombol

Submit

Name Memerikan nama tiap masukan

<form method=“post/get” action=“. . .”> . . . </form>

Value Memberikan nilai suatu masukan

TypeTipe form yang akan digunakan

Tabel 3.5. Attribut untuk membuat form dalam document

b. HTML Input Elemen

Pada saat membuat form anda bisa meletakkan control-control pada form

untuk memperbolehkan inputan dari user . semua control biasanya di letakkan di

antara tag <FORM></FORM> tapi anda juga bias meletakkan control diluar tag

tersebut. Untuk menambahkan control gunakan tag <input>.

Berikut macam-macamcomponent input:

1. Textbox

Untuk membuat sigle line text control. Attribute size digunakan untuk

menentukan jumlah character yang bisa ditampilkan, sementara maxlength at-

tribute digunakan untuk menentukan maximum character yang bisa di masukkan.

Contoh Penulisan syntaxtextbox :

2. Submit dan Reset

Tombol Submit: digunakan ketika user mengisi form dan ingin mengir-

imkan ke server, sedangkan Tombol Reset: digunakan ketika user ingin mengha-

pus/mengosongkan semua masukan yang ditulis dalam form

3. Checkbox

digunakan Untuk memberi beberapa pilihan kepada user

4. Radio button

Fungsi:

Untuk memberi (hanya) satu pilihan kepada user, Setiap radio button con-

trol harus memiliki nama yang sama, sehingga user hanya bisa memilih satu op-

<INPUT TYPE=”TEXT” NAME=”textbox” VALUE=”” SIZE=”20”>

tion saja. Radio button juga harus secara explisit memberikan nilai ke atribut

value.

5. Text Area

Fungsi:

Sebagai field masukan untuk pengunjung (dapat menerima lebih dari satu

baris teks). Biasa disebut sebagai kotak komentar.

Untuk membuat textarea gunakan tag <TEXTAREA></TEXTAREA>

6. Daftar Drop Down

Fungsi:

Memberikan menu pilihan kepada user (cara kerjanya seperti radio button

yang hanya mengijinkan user untuk memilih 1 pilihan saja)

7. Hyperlink

Fasilitas hyperlink dipergunakan untuk menghubungkan atau membuat su-

atu link didalam sebuah dokumen maupun alamat URL. Ada beberapa hal

yang perlu diketahui tentang model model dari hyperlink diantaranya yaitu

:

Link Address

Anchor

Link Ke dokumen lain

Link ke bagian tertantu dalamdokumen

Link ke bagian tertentu pada dokumen lain

BAB IV

IMPLEMENTASI

Tabel KRS

Hasil

Ketika mengklik Simpan maka link akan terhubung ke Daftar Dosen.html, jika

mengklik reset maka Nama dosen yang kita ketik di text box dosen akan terhapus.

Ketika mengklik gambar lihat selengkapnya maka akan terhubung ke link dimana

terdapat frame antara KRS.html dan Daftra Dosen.html

Daftar Dosen

Hasil

Ketika mengklik gambar home maka akan kembali ke KRS.html

Frame antara KRS.html dan Daftar dosen.html

Hasil

BAB V

PENUTUP

KESIMPULAN DAN SARAN

Kesimpulan :

Tag <table>…</table> digunakan untuk mebuat table.

Tag <tr>..</tr> digunakan untuk menambah baris pada table.

Tag <th>..</th> dan <td>…</td> digunakan untuk menambah kolom

pada table. Pebedaannya adalah jika menggunakan <th>..</th> maka

tulisan yang ada pada kolom tersebur secara otomatis akan tebal

sedangkan <th>..</th> tidak.

Colspan digunakan untuk menggabungkan beberapa kolom, sedangkan

Rowspan digunakan untuk menggabungkan beberapa baris.

Tag <frameset>…</frameset> digunakan untuk mebuat frame pada

halaman HTML.

Tag <frameset rows> digunakan untuk membagi frame pada halaman

HTML menjadi beberapa baris.

Tag <frameset cols> digunakan untuk membagi frame pada halaman

HTML menjadi beberapa kolom.

Selain membuat table kita bisa menambahkan textbox, radio button, check

box, daftar drop down dan text area pada halaman HTML kita.

Saran :

Diharapkan asisten praktikum dapat membimbing para peserta praktikum

dengan baik sehingga para peserta praktikum dapat memahami apa yang sedang di

praktikkan dan bisa mempraktikkannya sendiri selain itu asisten praktikum bisa

membantu para peserta praktikum yang kesulitan memahami materi praktikum.