</> Pemrograman Web Dasar

Pesantren Teknologi Informasi dan Komunikasi

Tahun Akademik 2022/2023
‫عل ًْما َس َّه َل الل َّ ُه ل َُه ِب ِه ط َ ِريقًا ِإل َى ال َْجن َِّة‬
ِ ‫َو َم ْن َسل ََك ط َ ِريقًا يَل ْ َت ِم ُس ِفي ِه‬
“ Barangsiapa yang menempuh jalan untuk mencari ilmu, maka Allah akan mudahkan baginya
jalan menuju surga.“
Membuat Tabel
Membuat Tabel di HTML
Saat menampilkan suatu data yang terstruktur dari database, umumnya akan
menampilkannya dalam bentuk tabel. HTML sebagai bahasa markup telah
menyediakan elemen table yang bisa digunakan saat membuat tabel

Pesantren Teknologi Informasi

dan Komunikasi
Struktur Tabel

Pesantren Teknologi Informasi

dan Komunikasi
Elemen Tabel HTML
Untuk membuat tabel setidaknya ada 3 elemen HTML berikut :
<table>
Elemen ini digunakan untuk mendefinisikan pembuatan tabel
<tr>
Elemen ini digunakan untuk mendefinisikan pembuatan baris pada tabel
<td>
Elemen ini digunakan untuk membuat kolom atau sel di setiap baris pada
tabel

Pesantren Teknologi Informasi

dan Komunikasi
Elemen Tabel HTML
Seiring dengan perkembangan dan kebutuhan akan tabel, HTML juga
menyediakan elemen-elemen opsional lain dalam pembuatan tabel seperti
berikut :
<th>
Elemen ini digunakan untuk mendefinisikan header di dalam tabel
<thead>
Elemen ini digunakan untuk membungkus konten bagian judul atau kepala tabel
<tbody>
Elemen ini digunakan untuk membungkus konten bagian isi atau tubuh dari tabel
<tfoot>
Elemen ini digunakan untuk membungkus konten bagian kaki atau bawah dari tabel
Atribut Elemen Tabel HTML
HTML menyediakan beberapa atribut yang bisa gunakan untuk mengelola
sebuah tabel seperti berikut :
border
untuk memberi batas/garis (seperti) pada suatu bidang/box/tag html

cellpadding
untuk mengatur jarak dari border sisi dalam tabel dengan isi text tabel
Atribut Elemen Tabel HTML
cellspacing
untuk mengatur jarak antara garis tepi (border) bagian dalam dan luar

bgcolor
untuk mengatur warna sel
Atribut Elemen Tabel HTML
colspan
untuk menggabungkan kolom pada tabel

rowspan
untuk menggabungkan baris pada tabel
Mengelola Form
Mengelola Formulir (Form)
Fungsi dari sebuah website tidak hanya digunakan untuk
menampilkan informasi saja, namun juga digunakan untuk
mengambil informasi atau data dari pengunjung. Salah
satu cara untuk mengambil informasi dari pengunjung
ialah menggunakan form
Penerapan Form
Tampilan login facebook Bagian Form
Membuat Form
Form di HTML dapat kita buat dengan tag <form> Elemen ini memiliki beberapa
atribut yang harus diberikan, seperti:

action
untuk menentukan tujuan saat data dikirim
method
untuk menentukan jenis metode pengiriman data

Contoh :
<form action=”path/to/tujuan.php” method=”POST”>
<!-- form field di sini -->
</form>
Field Form
Field adalah ruas yang dapat di isi oleh data. Field memiliki beberapa atribut yang
harus diberikan seperti type merupakan type dari field. name merupakan nama
dari field yang akan menjadi kunci dan variabel di dalam program.

Contoh :
<input type="text" name="username" >
Macam-macam Field Form
- text - email
- password - number
- checkbox - date, month
- radio - week, time
- file - range
- submit - color
- select, option - textarea
Menampilkan Form dengan Tabel
Let’s Code