MENAMPILKAN
GAMBAR
Suatu
situs web yang bagus, biasanya menampilkan gambar-gambar untuk menarik
pengunjung masuk kedalamnya, bayangkan saja jika situs tersebut hanya
menampilkan tulisan saja, tentu amat membosankan. HTML menyediakan fasilitas
untuk menampilkan gambar di halaman web kita menggunakan tag <IMG>.
Tag
<IMG> memiliki bermacam
atribut seperti SRC yang digunakan untuk menentukan lokasi gambar yang akan
ditampilkan, ALT sebagai teks
pengganti apabila ada browser yang tidak mendukung grafik, BORDER berfungsi
untuk memberikan suatu border di sekeliling gambar, Height dan weight berfungsi
untuk menentukan tinggi atau lebar suatu gambar dalam halaman web kita (dalam
ukuran pixel), HSPACE dan VSPACE berfungsi menentukan jarak spasi dengan objek
disekitar gambar secara horiontal maupun vertikal.
<HTML>
<HEAD>
<TITLE>Latihan Penggunaan IMG</TITLE>
</HEAD>
<BODY>
<IMG
SRC="klikphp.gif" ALIGN=LEFT HSPACE=20 VSPACE=1>
<A
HREF="http://www.klikphp.com">KlikPHP.com</A>
adalah situs yang ditujukan bagi para
penggemar/pemakai PHP di Indonesia.<BR>
Anda dapat menemukan Tutorial, Tips 'n Trick, Contoh
Script, berdiskusi masalah PHP, dll.<BR>
</BODY>
</HTML>
TABEL
Untuk membuat
tampilan website yang bagus, kebanyakan para desainer web menggunakan tabel
untuk mempermudah pengerjaan mereka, coba saja lihat situs www.detik.com, www.kompas.com,
www.astaga.com, dan masih banyak lagi
situs yang menggunakan tabel untuk mempercantik website-nya.
Untuk
membuat tabel, HTML menyediakan tag <TABLE>. Dalam tag <TABLE>
terdapat banyak atribut, yaitu :
|
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
|
Untuk membuat baris, setelah menuliskan tag
<TABLE> maka digunakan tag <TR>. Sedangkan untuk membuat kolom
digunakan tag <TD>. Sebagian besar atribut dalam tag <TABLE> dapat
digunakan dalam tag <TR> maupun dalam tag <TD>.
Penggabungan
baris/kolom
Untuk
menggabungkan baris/kolom (merge)
digunakan atribut COLSPAN dan ROWSPAN. COLSPAN digunakan untuk menggabungkan
beberapa kolom menjadi 1 sedangkan ROWSPAN menggabungkan beberapa baris menjadi
1.
CELLPADING dan
CELLSPACING
CELLPADING digunakan
untuk mengatur spasi antara border dengan tulisan, sedangkan CELLSPACING
digunakan untuk mengatur spasi antar dua buah sel.
<HEAD>
<TITLE>Contoh
Penggunaan Tabel</TITLE>
</HEAD>
<BODY>
<TABLE
BORDER="2" CELLSPACING="3"
CELLPADING="2"
WIDTH="100%">
<TR>
<TD BGCOLOR="blue"
COLSPAN="2"
ALIGN="center">Kelas</TD>
<TD BGCOLOR="red"
ALIGN="center"
ROWSPAN="2">Ket</TD>
</TR>
<TR>
<TD ALIGN="center">1</TD>
<TD ALIGN="center">2</TD>
</TR>
<TR>
<TD>Andi</TD>
<TD>Nina</TD>
<TD>Lunas</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Form
Untuk
melakukan interaksi dengan user, biasanya suatu situs menggunakan form untuk
menerima masukan/input dari user dan memproses hasil inputan tersebut di
server.
Misalkan saja :
Dalam gambar diatas dapat dilihat untuk nama, kita
menggunakan tipe textbox, password menggunakan tipe password, untuk jenis
kelamin menggunakan radio button dan untuk hobi menggunakan checkbox. Untuk
mengatur tipe form, menggunakan atribut TYPE, struktur form dapat dibuat sbb :
<FORM METHOD=”…” ACTION=”…”>
<INPUT
TYPE=”…” NAME=”…” VALUE=”…”>
<INPUT
TYPE=”Submit” VALUE=”…”>
</FORM>
Untuk membuat form seperti pada gambar.7 dalam
HTML dapat ditulis :
<HTML>
<HEAD>
<TITLE>
Penggunaan Form </TITLE>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="thank.html">
Nama :
<INPUT TYPE="Text"
NAME="Nama"><BR>
Password :
<INPUT TYPE="Password"
NAME="pass"><BR>
Jenis Kelamin <BR>
<INPUT TYPE="Radio"
NAME="kelamin"
VALUE="pria">Pria
<INPUT TYPE="Radio"
NAME="kelamin"
VALUE="wanita">Wanita<BR>
Hobi : <BR>
<INPUT TYPE="Checkbox"
NAME="hobi"
VALUE="tidur">Tidur<BR>
<INPUT TYPE="Checkbox"
NAME="hobi"
VALUE="bersepeda">Bersepeda</BR>
<INPUT TYPE="Checkbox"
NAME="hobi"
VALUE="lain">Lainnya</BR>
<INPUT TYPE="Submit"
VALUE="Kirim">
<INPUT TYPE="Reset"
VALUE="Ulangi">
</BODY>
</HTML>
Atribut-atribut diatas dapat dijelaskan sbb :
|
Atribut
|
Fungsi
|
|
METHOD
|
Metode pengiriman data ke file tujuan. Ada 2 yaitu POST dan GET
|
|
ACTION
|
Aksi yang akan dilakukan jika user menekan
tombol Submit
|
|
NAME
|
Memberikan nama tiap input
|
|
VALUE
|
Memberikan nilai suatu input
|
|
TYPE
|
Tipe form yang akan kita gunakan.
|
Setiap form harus memiliki minimal tombol Submit
atau tombol reset. Tombol Submit berfungsi ketika user telah mengisi form yang
telah disediakan dan ingin mengirimkan ke server, maka user dapat menekan
tombol submit. Sedangkan tombol reset berfungsi jika user ingin mengosongkan
kembali form. Untuk membuat tombol submit, pada TYPE kita tuliskan “Submit” dan
untuk membuat tombol reset, kita menuliskan “Reset”.
Frame
Frame HTML
dapat digunakan untuk membuat tampilan halaman
HTML yang terbagi dalam beberapa bagian, dan setiap bagian adalah 1
halaman web. Biasanya frame digunakan jika salah satu bagian dalam halaman web
tetap dan halaman yang lainnya berubah (mis : Menu) sehingga dapat mempercepat
proses, karena hanya satu bagian saja yang diload dari server.
Untuk
membuat frame, digunakan tag <FRAMESET> … </FRAMESET> dalam tag ini
terdapat tag <FRAME> yang menentukan isi dari frame yang ditentukan dalam
tag <FRAMESET>, struktur dari tag ini adalah :
<FRAMESET COLS=a,b,c,… atau ROWS=a,b,c,…>
<FRAME
NAME=… SRC=…>
<FRAME
NAME=… SRC=…>
<FRAME
NAME=… SRC=…>
…
</FRAMESET>
pada tag <FRAMESET> terdapat atribut COLS
atau ROWS, atribut COLS jika kita ingin membuat frame yang terbagi dalam
kolom-kolom, sedangkan atribut ROWS digunakan jika kita ingin membuat frame
yang terbagi dalam beberapa baris.
Gambar 8. Frame
Dalam tag <FRAME> terdapat atribut SRC yang
menunjukkan lokasi/nama file yang digunakan dalam frame tersebut, sedangkan
atribut NAME berfungsi sebagai identifikasi frame tersebut.
Postingan
0 komentar:
Posting Komentar