Web Design: HTML (Table, Form, Frame, Hyperlink)

WEB DESIGN
HTML
(Table, Form, Frame, Hyperlink)
TABEL
Fungsi:
 Menampilkan informasi secara terstruktur, ringkas
dan mudah dibaca
 Mengatur tampilan homepage agar lebih menarik
TABEL
Atribut Fungsi
Border Menentukan ukuran border/garis tabel
Width Menentukan lebar tabel
Height Menentukan tinggi tabel
Bgcolor Menentukan background tabel
Background Menentukan gambar yang digunakan untuk
background tabel
Color Untuk mengatur warna suatu sel dalam tabel

Align Mengatur bentuk perataan horisontal
Valign Mengatur bentuk perataan vertikal
Rowspan Menggabungkan beberapa baris
Colspan Menggabungkan beberapa kolom
Cellspacing dan cellpadding Mengatur spasi antar sel dan spasi dalam sel
Membuat tabel sederhana:
 Tag yang diperlukan:

 Membuat baris: <tr> (table row)
 Membuat kolom: <td> (table data)
Tampilan
<html>
<head>
<title> Belajar Membuat Tabel </title>
</head>
<body>
<table border="1">
<tr><td>Baris 1 Sel 1</td><td>Baris 1 Sel 2</td></tr>
<tr><td>Baris 2 Sel 1</td><td>Baris 2 Sel 2</td></tr>
</table>
</body>
</html>
Menambahkan judul tabel:
 Judul tabel: <caption>

 Judul baris/kolom: <th> (table header)
<html>
<head>
</head>
<body>
<table border="1">
<caption align="top"> <b> DAFTAR MAHASISWA
</b> </caption>
<tr><th>No</th><th>NPM</th><th>Nama</th></tr>
<tr><td>1</td><td>06.100.001</td><td>Amin A.
Angkasa</td></tr>
<tr><td>2</td><td>06.100.002</td><td>Beni B.
Bernardi</td></tr>
</table>
</body>
</html>
Membuat warna pada tabel:
 Atribut: bgcolor
Tampilan:
Contoh:
<body bgcolor="purple">
<font size="3" face="arial" color="yellow">
<table border="2" bgcolor="white" align="center">
<caption align="bottom">
<b> Tabel Daftar Mahasiswa </b> </caption>
<tr bgcolor="yellow">
<th>No</th><th>NPM</th><th>Nama</th></tr>
<tr bgcolor="cyan"><td align="center" width="20">1.</td>
<td align="left" valign="middle“
width="80" height="40">06.100.001</td>
<td align="left" valign="middle“
width="180" height="40">Amin A. Angkasa</td></tr>
<tr><td bgcolor="blue" width="20">2.</td>
<td bgcolor="red" align="left" valign="middle"
width="80" height="40">06.100.002</td>
<td bgcolor="green" align="left" valign="middle"
width="180" height="40">Beni B. Bernardi</td></tr>
</table>
</body>
Mengatur lebar dan tinggi suatu tabel:
Atribut: width dan height
 ukuran % (max 100%)
 ukuran pixel
<html> Tampilan:
<head>
</head>
<body>
<table border=1 bgcolor="green" width=300 height=100>
<tr height=30>
<td>Baris 1 Kolom 1</td>
</tr>
<tr height=70>
<td background="./images.jpg">
Baris 2 Kolom 2 <br><br> Background bagus</td>
</tr>
</table>
</body>
</html>
Perataan dalam tabel:
 horisontal: atribut align  utk <caption>, <tr>, <td> dan <th>

 vertikal: atribut valign  utk <tr>, <td> dan <th>
<table border="1" align="center"> Tampilan:

<caption align="top">
<b> DAFTAR MAHASISWA </b> </caption>
<tr><th>No</th><th>NPM</th><th>Nama</th></tr>
<tr><td align="center" width="20">1.</td>
<td align="center" valign="middle"
width="80" height="50">06.100.001</td>
<td align="right" valign="top"
width="180" height="50">Amin A. Angkasa</td></tr>
<tr><td width="20">2.</td>
<td align="left" valign="top"
width="80" height="70">06.100.002</td>
<td align="left" valign="bottom"
width="180" height="70">Beni B. Bernardi</td></tr>
</table>
Penggabungan baris/kolom:
 Menggabungkan bbrp kolom menjadi 1: atribut colspan

 Menggabungkan bbrp baris menjadi 1: atribut rowspan
Contoh Tampilan:
Script HTML:
<table border="1" bgcolor="white" align="center">

<b> Tabel Daftar Nilai Mahasiswa </b> </caption>
<tr bgcolor="gray"><th rowspan="2">No</th>
<th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th
colspan="2">Nilai</th>
</tr>
<tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr>
<td align="left" valign="middle" width="80" height="40">06.100.001</td>
<td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td>
<td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td>
</tr>
<td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td>
</tr>
</table>
Cellpading dan cellspacing:
 atribut cellpading: mengatur spasi antara border dengan

tulisan
 atribut cellspasing: mengatur spasi antar 2 buah sel
Contoh Tampilan:
Script HTML:
<table border="1" bgcolor="white" align="center“ cellpadding="10" cellspacing="12">

<b> Tabel Daftar Nilai Mahasiswa </b> </caption>
<tr bgcolor="gray"><th rowspan="2">No</th>
<th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th colspan="2">Nilai</th>
</tr>
<tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr>
<td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td>
</tr>
<td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td>
</tr>
</table>
FORM
Fungsi:
 Menerima informasi atau meminta umpan balik dari
user dan memproses informasi tersebut di server
Standar penulisan:
<form method=“post/get” action=“. . .”> . . . </form>
Atribut:
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
 metode POST dan GET memiliki kegunaan yang
sama yaitu untuk mengirimkan value variabel ke
halaman lain atau mengirimkan ke database.
 Perbedaan Method GET ketika mengirimkan data
akan menambahkan pada URL, sedangkan kalo
method POST dikirim ke server dengan diincludekan
pada sebuah permintaan (body of request)
 GET
 POST
Textbox
 Tag: <input>
 Atribut-atribut:
Atribut Fungsi
type=["text"|"password"] Menentukan jenis field masukan

Text, submit, password
name Menentukan nama untuk field sehingga dapat
dirujuk nantinya
value Memberi nilai suatu input
size mengatur lebar field secara horisontal, berapa huruf

maksimal yang dapat ditampilkan
maxlength menentukan jumlah maksimum huruf (karakter)
yang dapat dimasukkan
Contoh:
<body>
<b>Login: <b> <br>
<form method="post">
<table>
<tr> <td>User:</td> <td><input type="text" name="user" size="20"></td></tr>
<tr> <td>Password:</td> <td><input type="password" name="password" size="20“
maxlenght=“10”></td></tr>
</table>
</form>
</body>
Tampilan:
Submit dan Reset
 Tombol Submit: digunakan ketika user mengisi

form dan ingin mengirimkan ke server
 Tombol Reset: digunakan ketika user ingin
menghapus/mengosongkan semua masukan yang
ditulis dalam form
Contoh:
<body>
<b>Data Pengunjung: <b> <br>
<form method="post" action="data.html">
<table>
<tr> <td>Nama:</td> <td><input type="text" name="nama" size="20"></td></tr>
<tr> <td>Alamat:</td> <td><input type="text" name="alamat" size="20"></td></tr>
</table>
<input type="submit" value="Simpan" name="t1">
<input type="reset" value="Reset" name="t2">
</form>
</body>
Tampilan:
Checkbox
Fungsi:
 Untuk memberi beberapa pilihan kepada user
Contoh:
Bacaan yang Anda sukai: <br>
<input type="checkbox" name="bacaan" value="novel"> Novel <br>
<input type="checkbox" name="bacaan" value="koran"> Koran <br>
<input type="checkbox" name="bacaan" value="majalah"> Majalah <br>
<input type="checkbox" name="bacaan" value="tabloid"> Tabloid <br>
</form>
Tampilan:
Radio button
Fungsi:
 Untuk memberi (hanya) satu pilihan kepada user
Contoh:
Apakah Anda setuju dengan kenaikan SPP: <br>
<input type="radio" name="opsi" value="ya"> Ya <br>
<input type="radio" name="opsi" value="tidak"> Tidak <br>
<input type="radio" name="opsi" value="ragu"> Ragu-ragu <br>
</form>
Tampilan:
Daftar Drop Down
Fungsi:
 Memberikan menu pilihan kepada user (cara kerjanya seperti radio
button yang hanya mengijinkan user untuk memilih 1 pilihan saja)
Contoh:
Jurusan: <br>
<select name="jurusan">
<option value="TInf"> Teknik Informatika <br>
<option value="MI"> D3 Manajemen Informatika <br>
<option value="TI"> Teknik Industri <br>
</select>
</form>
Tampilan:
Text Area
Fungsi:
 Sebagai field masukan untuk pengunjung (dapat
menerima lebih dari satu baris teks). Biasa disebut
sebagai kotak komentar
• Tag: <textarea>
• Atribut-atribut:
Atribut Fungsi
Rows Menetukan lebar kotak komentar
Columns Menentukan tinggi kotak

komentar
Wrap=["off"|"virtual"|"physical"] Menentukan fitur word wrapping
Contoh:
<html>
<head>
<title> Penggunaan Text Area </title>
</head>
<body>
<b>Komentar: <b> <br>
<form method="post"> <textarea rows="10" cols=“40" wrap="physical" name="komentar">
</textarea><br>
</html>
Tampilan:
FRAME
 Fungsi:
Menampilkan beberapa dokumen HTML secara sekaligus dalam satu
jendela web browser.
• Standar penulisan:
<frameset [cols=“%,%”] [rows=“%,%”]> . . . </frameset>
Atribut Fungsi
frameset cols Membuat frame vertikal dengan lebar kolom tertentu
frameset rows Membuat frame horisontal dengan tinggi baris tertentu
frame src Memasukkan dokumen HTML ke dalam frame

scrolling=["yes"|"no"] Menentukan fitur scrolling
noresize Membuat frame tidak dapat diubah ukurannya
name Memberi nama untuk frame
frameborder=["0"|"1“] Menentukan batas antara frame
Nama dan Target Frame
 Frame dapat diberi nama dan diatur targetnya dengan

menggunakan tag base target.
 Contoh:
Frame menu dapat digunakan sebagai link untuk mengakses
halaman di frame content.
Script HTML: Potongan kode file menu.html:

<html> <html>
<head></head> <head>
<frameset rows=“15%,*"> <base target="content">
<frame name=“judul" src=“judul.html"> </head>
<frameset cols="30%,*"> ...
<frame name="menu" </html>
src="menu.html">
<name="content" src="content.html">
</frameset>
</html>
Frame Vertikal
Contoh: Tampilan:
<html>
<head>
<title>
Membuat Frame Vertikal
</title>
</head>
<frameset cols="25%,*">
<frame name="kiri"
src="kiri.html" scrolling=“yes">
<frame name="kanan“
src="kanan.html">
</frameset>
</html>
Frame Horisontal
Contoh: Tampilan:
<html>
<head>
<title>
Membuat Frame Horisontal </title>
</head>
<frameset rows="40%,*">
<frame name="atas" src="atas.html“
scrolling="no">
<frame name="bawah“
src="bawah.html">
</frameset>
</html>
Gabungan Frame Vertikal-Horisontal
Contoh: Tampilan:
<html>
<head>
<title>
Membuat Frame Vertikal-Horisontal </title>
</head>
<frameset rows="20%,*">
<frame name="atas" src="atas.html“
scrolling="no">
<frameset cols="40%,*">
<frame name="kiri"
src="kiri.html">
<frame name="kanan"
src="kanan.html">
</frameset>
</frameset>
</html>
Entitas Karakter HMTL
 Beberapa entitas (atau simbol) tidak dapat

ditulis langsung di halaman web karena tidak
ada di keyboard. Oleh karena itu diperlukan
kombinasi entitas.
 Terdapat tiga bagian untuk setiap entitas,
yaitu:
i. Dimulai dengan sebuah ampersand [“&”]
ii. Diberi nama entitas, misalnya [“copy”]
iii. Diakhiri dengan semicolon [“;”]
Contoh:
<html>
<head><title>Entitas karakter</head>
<body>
Simbol "copyright" : "©" <br/>
Simbol "alpha" : "α" <br/>
</body>
</html>
Tampilan:
Spasi Tambahan dan Simbol “<“ “>”
 Spasi tambahan (“ “) dapat dibuat dengan kombinasi
entitas
Contoh:
<html>
<head><title>Spasi Tambahan</title></head>
<body>
<p>Setelah ini ada lima spasi tambahan:" ".
Sekarang lanjut kalimat lagi.</p>
</body>
</html>
Tampilan:
 Kombinasi entitas untuk menampilkan
simbol“<“ dan “>” di dalam halaman web:
 “<“  < [less than]
 “>”  > [greater than]
Contoh:
<html>
<head><title>Simbol "<" dan ">"</title></head>
<body><p>Karakter "Kurang dari" : "<" <br/> Karakter "Lebih dari" : ">"</p>
</body>
</html>
Tampilan:
Meta Tag
 Digunakan untuk men-supply informasi kepada

search engines yang tidak akan terlihat oleh
pengunjung web kecuali jika mereka menampilkan
kode dari halaman HTML yang diaksesnya.
 Penggunaan meta tag akan membuat search bot yang
ada mengenali website tersebut sehingga dapat tampil
di daftar search engine dan tentu saja mudah dicari
oleh pengguna Internet
Meta tag keywords
Fungsi:
Meletakkan kata kunci (keyword) dari website
Format:
<head>
<meta name="keywords" content=“macam_macam keyword
yang digunakan" />
</head>
Meta tag description
Fungsi:
menunjukkan deskripsi singkat dari halaman web kepada search
engine.
Format:
<head>
<meta name="description"
content=“deskripsi_yang_diinginkan" />
</head>
Tag description dan keywords sangat mirip.

Jika tidak ada kecocokan/relasi antara nilai dua tag ini
mungkin saja situs anda tidak diproses oleh search engine,
jadi anda harus cerdas menentukan keyword dan
deskripsinya.
Meta tag revised
Fungsi:
Untuk mencatat kapan update terakhir dilakukan terhadap situs
web.
Format:
<head>
<meta name="revised" content=“tanggal_update_terakhir" />
</head>
Refresh page dan redirect
Fungsi:
Digunakan untuk keperluan redirect. Dengan meta tag
refresh, pengunjung akan di-redirect (atau di-refresh) ke
halaman web yang telah ditentukan.
Format:
<head>
<meta http-equiv="refresh" content=“jumlah selang detik untuk me-
refresh halaman; url=…“ />
</head>
Embed Tag
• Fungsi:
menyisipkan media (misalnya musik) ke dalam halaman web
• Standar penulisan:
<embed src=“file_media” />
Atribut Fungsi
width Menentukan lebar dari player
height Menentukan tinggi dari media player
hidden=["yes"|"no"] Jika atribut ini bernilai true, maka media player tidak ditampilkan.
autostart Menentukan apakah file musik dijalankan secara otomatis saat
halaman web dimuat oleh web browser
loop Mengatur apakah file musik dijalankan berulang atau hanya cukup
satu kali
volume Mengatur volume dari file musik, range nilainya 0 sampai 100
Contoh:
<html>
<head>
<title> Penggunaan Embed (Musik) </title>
</head>
<body>
<embed src="flourish.mid" width=”360” height=”160” hidden="false"/>
</body>
</html>
Tampilan:
Summary
 Pemakaian Tabel dalam halaman web dapat

membuat informasi tampil secara terstruktur,
ringkas dan mudah dibaca serta membuat
tampilan web menjadi lebih menarik.
 Form digunakan untuk menerima informasi
atau meminta umpan balik dari user dan
memproses informasi tersebut di server.
Summary
 Untuk menampilkan beberapa dokumen HTML secara

sekaligus dalam satu jendela web browser adalah dengan
menggunakan Frame.
 Meta Tag digunakan untuk men-supply informasi kepada
search engines.
 Untuk menuliskan beberapa entitas karakter HMTL yang
tidak terdapat di keyboard, diperlukan kombinasi entitas
dengan format tertentu.
 Oleh karena web browser hanya akan mengenal dan
memformat satu spasi antar kata meskipun di dalam kode
HTML telah dibuat lebih dari satu spasi, maka kombinasi
entitas “ ” digunakan untuk menampilkan spasi
tambahan
 Simbol “<“ dan “>” adalah simbol pembuka dan penutup tag.
Untuk menampilkannya di dalam web browser dapat dengan
menggunakan kombinasi entitas “<” dan “>”.
 Embed Tag digunakan untuk menyisipkan media (misalnya
musik) ke dalam halaman web.
Summary
 Untuk menampilkan beberapa dokumen HTML secara sekaligus dalam

satu jendela web browser adalah dengan menggunakan Frame.
 Meta Tag digunakan untuk men-supply informasi kepada search
engines.
 Untuk menuliskan beberapa entitas karakter HMTL yang tidak
terdapat di keyboard, diperlukan kombinasi entitas dengan format
tertentu.
 Oleh karena web browser hanya akan mengenal dan memformat satu
spasi antar kata meskipun di dalam kode HTML telah dibuat lebih dari
satu spasi, maka kombinasi entitas “ ” digunakan untuk
menampilkan spasi tambahan
 Simbol “<“ dan “>” adalah simbol pembuka dan penutup tag. Untuk
menampilkannya di dalam web browser dapat dengan menggunakan
kombinasi entitas “<” dan “>”.
 Embed Tag digunakan untuk menyisipkan media (misalnya musik) ke
dalam halaman web.

Web Design: HTML (Table, Form, Frame, Hyperlink)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Design: HTML (Table, Form, Frame, Hyperlink)

Uploaded by

Copyright:

Available Formats

WEB DESIGN

Color Untuk mengatur warna suatu sel dalam tabel

 Tag yang diperlukan:

 Membuat kolom: <td> (table data)

 Judul tabel: <caption>

 horisontal: atribut align  utk <caption>, <tr>, <td> dan <th>

<table border="1" align="center"> Tampilan:

 Menggabungkan bbrp kolom menjadi 1: atribut colspan

<table border="1" bgcolor="white" align="center">

 atribut cellpading: mengatur spasi antara border dengan

<table border="1" bgcolor="white" align="center“ cellpadding="10" cellspacing="12">

type=["text"|"password"] Menentukan jenis field masukan

size mengatur lebar field secara horisontal, berapa huruf

 Tombol Submit: digunakan ketika user mengisi

Rows Menetukan lebar kotak komentar

Columns Menentukan tinggi kotak

frameset rows Membuat frame horisontal dengan tinggi baris tertentu

frame src Memasukkan dokumen HTML ke dalam frame

 Frame dapat diberi nama dan diatur targetnya dengan

Script HTML: Potongan kode file menu.html:

 Beberapa entitas (atau simbol) tidak dapat

 Digunakan untuk men-supply informasi kepada

Tag description dan keywords sangat mirip.

 Pemakaian Tabel dalam halaman web dapat

 Untuk menampilkan beberapa dokumen HTML secara

 Untuk menampilkan beberapa dokumen HTML secara sekaligus dalam

You might also like