LAPORAN RESMI

MODUL II
HTML LANJUT
(TABLE, FORM, FRAME, HYPERLINK)
PEMROGRAMAN BERBASIS WEB

NAMA : MUHAMMAD PUTRA SENJA KAIMANA

N.R.P : 210441100138
DOSEN : SRI HERAWATI, S,Kom., M.Kom.
ASISTEN : FAUZIAH REZA OKTAVIYANI
TGL PRAKTIKUM : 9 APRIL 2022

Disetujui :
Asisten

FAUZIAH REZA OKTAVIYANI

190441100075

LABORATORIUM BISNIS INTELIJEN SISTEM

JURUSAN SISTEM INFORMASI
FAKULTAS TEKNIK
UNIVERSITAS TRUNOJOYO MADURA
 BAB I
PENDAHULUAN
1.1 Latar Belakang

HTML atau Hypertext Markup Language merupakan salah satu format yang
digunakan dalam pembuatan dokumen (web page) dan aplikasi yang berjalan di
halaman web. Dokumen HTML merupakan dokumen yang disajikan pada web
browser.

Eksetensi dari file HTML umumnya *.htm atau *.html. HTML juga bersifat
Multi Platform (dapat berjalan pada sistem operasi apapun). HTML disebut
sebagai Markup Language karena dalam text HTML mengandung tag tertentu
yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan
dari teks tersebut dalam suatu dokumen.

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 untuk menggabungkan 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
digabungkan dengan atribut sebelumnya yaitu ROWSPAN

c. Atribut Latar Belak ang Tabel

Untuk memberikan warna latar belakang didalam table maka dapat digunakan
atribut bgcolor disertai dengan latar yang diinginkan, misalkan latar belakang
table akan diisi dengan warna biru, maka dapat dilakukan
BGCOLOR=”BLUE”, atau latar belakang diisi dengan gambar maka dapat
dilakukan dengan BACKGROUND=”namafile.jpg”, file yangdapat
digunakan 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 t iga yaitu LEFT, CENTER, dan RIGHT. Pelurusan
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

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
terdapat table yang lain, kemungkin ini bias saja terjadi dengan meletakkan tag
<table> didalam tag <table> lainnya, sehingga didapatkan table yang bersarang
didalam 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:
< form method=“post/get” action=“. . .”> . . . </form>

a. Elemen Form
Tag <FORM> digunakan untuk membuat form dalam document HTML
Atribut Fungsi

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

Action
Aksi yang akan dilakukan jika user menekan tombol Submit

Name Memerikan nama tiap masukan

Value Memberikan nilai suatu masukan

Type Tipe form yang akan digunakan

Tabel 3.5. Attribut untuk membuat form dalam document HTML

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-macam component input:

1. Textbox

Untuk membuat sigle line text control. Attribute size digunakan untuk
menentukan jumlah character yang bisa ditampilkan, sementara maxlength
attribute digunakan untuk menentukan maximum character yang bisa di
masukkan.

Contoh Penulisan syntax textbox :

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

2. Submit dan Reset

Tombol Submit: digunakan ketika user mengisi form dan ingin mengirimkan
ke server, sedangkan Tombol Reset: digunakan ketika user ingin
menghapus/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
control harus memiliki nama yang sama, sehingga user hanya bisa memilih satu
option 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).

2.5 Hyperlink

Fasilitas hyperlink dipergunakan untuk menghubungkan atau membuat suatu

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 dalam dokumen

 Link ke bagian tertentu pada dokumen lain

2.6 Kegiatan Praktikum

1. Ketiklah koding dibawah ini simpan dengan nama tabel1.html

2. Ketiklah koding di bawah ini dan simpan dengan nama nestedtabel.html

3. Gabungkan antara no 1 dengan nomor 2 dalam satu halaman
menggunakan frame

4. Ketiklah koding di bawah ini

5. Buat tampilan html seperti di bawah ini

 BAB IV
IMPLEMENTASI
4.1 Source Code

a. index.html
b. output.php
c. frame.html
4.2 Hasil

a. index.html

b. output.html
 c. frame.html

4.3 Penjelasan

a. index.html

Pertama saya membuat table agar form yang akan dibuat menjadi rapi,
dengan atribut border, cellspacing, dan cellpadding. Lalu saya membuat form
methodnya post, dan actionnya ke file yang akan di tuju yaitu output.php table
pertama saya menampilkan logo dan mengcollspan 2 table ke samping. Lalu saya
membuat table kedua dengan isi inputan email typenya text, begitupun dengan
inputan nama, dan nim. Lalu saya membuat form inputan tempat dan tanggal lahir
dengan menggunalan type date untuk form tanggal lahir, Lalu saya membuat form
inputan jenis kelamin dengan type radio, lalu saya membuat form inputan alamat
dengan menggunakan tag textarea, lalu saya membuat form inputan prodi dengan
menggunakan tag select dan option. lalu saya membuat inputan angkatan yang
menggunakan type radio, lalu saya membuat inputan divisi dengan menggunakan
type chechbox. lalu saya membuat form inputan alasan dengan tag textarea, lalu
yang terakhir saya membuat button submit dan reset. Untuk input submit saya
menggunakan type submit dengan atribut formtarget dengan nilai kanan, untuk
mengarahkan frame sebelah mana yang akan ditampilkan. Untuk input reset
berfungsi untuk mengreset semua data yang dimasukkan oleh user ketika
menginputkan.

b. output.php

Pertama saya membuat table dan form seperti yang ada pada dihalaman
index.html bedanya hanya pada halaman output ini menggunakan php untuk
mengambil variabel yang ada pada halaman index.html yang tadi kita buat.
Sebagai contoh <?php echo $_POST[‘nama_variabel’]; ?> syntax tersebut
berfungsi mengambil nilai variabel dan mengeprint/menampilkan output yang
diinputkan oleh user.

c. frame.html

Dihalaman frame.html saya membuat frameset dengan atribut cols untuk

membelah frame. Lalu saya membuat tag frame dengan tujuan untuk
menampilkan halaman yang mau di tampilkan. Saya menampilkan halaman
index.html di sebelah kiri, sedangkan output.php berada disebelah kanan.
 BAB V
KESIMPULAN
5.1 Analisa

Dari hasil praktikum, praktikan dapat mengimplementasikan dan memahami

apa itu table, apa saja macam macam tabel, apa itu frame, apa itu form, macam-
macam tipe form, dan hyperlink.

5.2 Kesimpulan

1. Table di dalam HTML dibentuk dengan sebuah baris (row), tepatnya

menggunakan element <tr> yang merupakan kepanjangan dari table
row. Adapun element pendukung lain yang membentuk sebuah table
adalah <th> (table header) dan <td> (table data). <td> menunjukkan
sebuah cell, sedangkan <th> menunjukkan cell induk dan ditandai
dengan tulisan cetak tebal.

2. Frame HTML adalah sebuah elemen dalam HTML yang digunakan

untuk membangun web page yang memungkinkan penampilan
beberapa web page yang ditampilkan dalam satu browser, misalnya
dalam 1 web browser Chrome terdapat beberapa web page HTML.
Windows dalam browser dibagi menjadi beberapa windows  yang
disebut frame. Model ini sering digunakan untuk lebih memperjelas
penyajian informasi, dengan menu sajian selalu ditampilkan. 
3. HTML <form> element digunakan untuk menampung macam-macam
element yang berkaitan dengan sebuah form. Dalam sebuah form
biasanya terdapat kotak input (control) dan element lainnya yang
dapat diedit kemudian ditulis untuk dikirim pada sebuah server untuk
diproses guna mendapatkan informasi tertentu dari atau untuk user.

4. Hyperlink atau link sering digunakan untuk menghubungkan suatu

halaman website ke halaman yang lain. Elemen yang menjadi link
nantinya dapat diklik, yang mana selanjutnya akan mengarahkan kita
ke halaman yang sudah ditentukan.