PEMPROGRAMAN BERBASIS WEB

Elemen HTML
List, Image, Link, Table dan Form
M. ADNAN NUR, S.KOM., MT.
TAG LIST
Tag list merupakan elemen HTML untuk membuat daftar/list. Tag List terdiri atas 2
yaitu unordered list (ul) dan ordered list (ol).
 <ul>...</ul>, merupakan daftar tidak terurut yang menggunakan bullet sebagai
simbol urutannya. Untuk membuat daftar, dalam Tag <ul> ditambahkan tag
<li>…</li>. Attributnya antara lain :
o TYPE : square/disc/circle, digunakan untuk menentukan simbol listnya

Contoh : Hasil :
 <ol>...</ol>, merupakan daftar terurut yang menggunakan angka/huruf sebagai
urutannya. Untuk membuat daftar, dalam Tag <ol> ditambahkan tag <li>…</li>.
Attributnya antara lain :
o Reversed, digunakan untuk membalik urutan
o Start, digunakan untuk menentukan posisi awal urutan
o Type = 1/A/a/I/i, digunakan untuk menentukan angka/huruf yang digunakan untuk
simbol listnya
Contoh : Hasil :
TAG IMAGE
Tag Image digunakan untuk memuat gambar pada halaman web.
 <img>, tag ini memiliki beberapa attribut antara lain :
o src : URL/nama file, untuk menentukan lokasi folder dan nama file dari gambar yang ingin
ditampillkan. Jika gambar mempunyai lokasi yang sama dengan halaman web maka nama file
dapat langsung dituliskan
o Height, untuk menentukan tinggi gambar dengan satuan % atau pixel
o Width, untuk menentukan lebar gambar dengan satuan % atau pixel
o Align : TOP/MIDDLE/BOTTOM/LEFT/RIGHT, untuk menentukan posisi teks disekitar gambar
o Alt, menampilkan teks pengganti gambar jika gambar tidak dapat ditampilkan

Contoh : Hasil :
Tempatkan file gambar stmikhandayani.png di folder yang sama dengan halaman web
TAG LINK
Tag Link digunakan untuk membuat link/tautan
 <a>...</a>, tag ini memiliki beberapa attribut antara lain :
o Href : URL/nama file, digunakan untuk menentukan lokasi file tujuan
o Target, digunakan ketika file tujuan akan dibuka pada tab/window lain atau pada sebuah
frame
Contoh : Hasil :
Buat 2 file yaitu link1.html dan link2.html
File link1.html

File link2.html
TAG DIV
Tag ini digunakan untuk mengelompokkan beberapa elemen dalam satu bagian
 <div>...</div>, tag ini memiliki beberapa attribut antara lain :
o align, digunakan untuk posisi elemen (kiri/kanan) dalam div

Contoh :

Hasil :
TAG TABLE
Untuk membuat tabel pada halaman web dibutuhkan setidaknya 3 tag yaitu Tag
<table>, <tr> dan <td>/<th>
 <table>..</table>, tag ini digunakan untuk memulai membuat tabel. Attributnya :
o BgColor, untuk menentukan warna latar belakang tabel
o Border, untuk menentukan tebal bingkai tabel
o BorderColor, untuk menentukan warna bingkai tabel
o CellSpacing, untuk menentukan jarak spasi antar kolom
o CellPadding, untuk menentukan jarak isi kolom dengan bingkai
o height, untuk menentukan tinggi dari tabel
o width, untuk menentukan lebar dari tabel
 <tr>..</tr>, tag ini ditempatkan dalam tag <table> dan didefinisikan sebagai baris
dari tabel
 <td>..</td> atau <th>..</th>, tag ini ditempatkan dalam tag <tr> dan didefinisikan
sebagai kolom untuk <td> dan kolom header untuk <th> dari tabel. Attributnya :
o Align, untuk menentukan posisi horizontal teks dalam kolom
o VAlign, untuk menentukan posisi vertikal teks dalam kolom
o BgColor, untuk menentukan warna latar belakang kolom
o ColSpan, untuk melakukan merger kolom secara horizontal dengan memasukkan jumlah
kolom yang akan dimerger/gabung
o RowSpan, untuk melakukan merger kolom secara vertikal dengan memasukkan jumlah
kolom yang akan dimerger/gabung
o NoWrap, Untuk menetapkan teks agar tetap satu baris
o Height, untuk menentukan tinggi dari kolom
o Width, untuk menentukan lebar dari kolom
Contoh Tag Table: Hasil :
Contoh Tag Table Dengan Merger Kolom: Hasil :
TAG FORM
Form merupakan elemen HTML yang berfungsi sebagai masukan dari pengguna yang
kemudian akan diproses atau diolah untuk digunakan sesuai kebutuhan. Tag form
terdiri atas <form>, <input>, <textarea>, <select> dan <button>
 <form>..</form>, tag ini digunakan untuk memulai membuat form. Attributnya :
o Method = (GET/POST), untuk menentukan metode pengiriman form
o Action, untuk menentukan url dari file yang digunakan untuk mengolah form
tersebut
o Target, untuk membuka tab/halaman baru bagi file action
o enctype, untuk menentukan bagaimana bentuk data harus dikodekan ketika
mengirimkannya ke server (hanya untuk metode = "posting")
 <input>, Tag ini ditempatkan dalam tag <form> dan digunakan untuk membuat
elemen masukan dengan type text, checkbox, radio, upload file, submit dan reset.
Attributnya :
o Name, untuk mendefinisikan nama dari objek input. Atribut ini harus dituliskan kecuali
untuk tipe submit dan clear
o Size, untuk menentukan ukuran kotak teks untuk input type text
o Maxlength, untuk menentukan jumlah maksimum karakter yang dapat dimasukkan pada
input type text
o Value, pada input type teks digunakan untuk menentukan teks yang tertulis; pada input
type checkbox atau radio digunakan untuk menentukan nilai item yang dipilih; pada
,input type Submit dan Reset digunakan untuk menentukan teks yang tertulis pada
tomboi
o checked, hanya digunakan untuk input type checkbox atau radio. Digunakan untuk
menentukan pilihan yang terpilih secara default
o Autofocus, Membuat input fokus ketika halaman dibuka
o Type, Menentukan tipe input yang dibuat.
o Required, Untuk menetapkan bahwa input harus diisi
o Readonly, Untuk menetapkan bahwa input tidak dapat diisi
o Disabled, Untuk menonaktifkan input
Berikut daftar type yang terdapat pada tag <input> :
a. Text, digunakan untuk membuat kotak teks
b. Password, digunakan untuk membuat kotak teks, tetapi semua karakter akan
ditampilkan dengan tanda
c. Check Box, digunakan untuk membuat suatu daftar pilihan yang dapat dipilih lebih dari
satu
d. Radio, digunakan untuk membuat suatu daftar pilihan yang hanya dapat dipilih satu
saja.
e. Reset, digunakan untuk membuat tombol yang fungsinya untuk menghapus semua isian
form yang telah diberikan.
f. Submit, digunakan untuk membuat tombol yang fungsinya untuk mengirimkan data
form agar diolah
g. Email, digunakan untuk input khusus email
h. Number, digunakan untuk input khusus angka
i. Date, digunakan untuk input khusus tanggal
j. Time, digunakan untuk input khusus jam
k. File, Untuk mengupload file.
 <textarea>...</textarea>, Tag ini ditempatkan dalam tag <form> dan digunakan
Untuk membuat sebuah kotak teks multi baris. Attributnya :
o Name, untuk mendefinisikan nama dari objek textarea
o Rows, untuk menentukan jumlah baris textarea
o Cols, untuk menentukan lebar textarea
o Autofocus, Membuat textarea fokus ketika halaman dibuka
o Maxlength, untuk menentukan jumlah maksimum karakter yang dapat
dimasukkan
o Required, Untuk menetapkan bahwa textarea harus diisi
o Readonly, Untuk menetapkan bahwa textarea tidak dapat diisi
o Disabled, Untuk menonaktifkan textarea
 <select>...</select>, Tag ini ditempatkan dalam tag <form> dan digunakan Untuk
membuat daftar pilihan (listbox dan combobox). Setaip daftar pilihan dalam tag
<select> dibuat menggunakan tag <option>…</option>. Attributnya :
o Name, untuk mendefinisikan nama dari objek select
o Size, untuk menentukan berapa pilhan yang akan ditampilkan. Jika atribut ini tidak
disertakan atau diberi nilai 1, pilihan akan ditampilkan sebagai combobox. Jika
diberi nilai 2 atau lebih, pilihan akan ditampilkan sebagai listbox. Jika nilai SIZE lebih
besar dari jumlah pilihan yang ada pada <SELECT>, pilihan kosong akan
ditambahkan. Jika user memilih pilihan ini maka nilainya adalah kosong
o Multiple, untuk menentukan select bisa dipilih lebih dari satu
o Autofocus, Membuat textarea fokus ketika halaman dibuka
o Disabled, Untuk menonaktifkan textarea
o Required, Untuk menetapkan bahwa select harus dipilih
o Value, atribut ini ditempatkan pada tag <option> untuk memberikan nilai pada
pilihan
o Selected, attribut ini ditempatkan pada tag <option> untuk membuat pilihan
default
Contoh Form:
Hasil Form:
LANJUT KE MATERI BERIKUTNYA