Modul HTML Lanjut

Oleh;
Mulyadi_Ibnu_Syaamil, S.Kom
@ 2010
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom
“ Untuk kalangan Sendiri “
1

T A B E L
Tag ini digunakan untuk membuat tabel pada dokumen HTML. Tabel sangat berguna
untuk membuat susunan halaman HTML kita menjadi lebih rapi. Dengan tabel kita
dapat dengan leluasa menempatkan tulisan atau gambar dengan tatanan yang sangat
teratur.
Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table :
1. <TABLE>, untuk menyatakan bahwa di bawahnya adalah perintah-perintah tag
untuk membuat table
2. <TR>, untuk membuat baris baru
3. <TD>. untuk membuat kolom baru dalam suatu baris.
Yang perlu diingat adalah bahwa tab <TR> dan <TD> harus terletak di antara tag
<TABLE> dan </TABLE>
1. <TABLE> Terdiri dari atribut :
 align ; perataan : rata kiri (left), tengah (center) atau kanan (right).
 bgcolor ; warna latar belakang (background) dari tabel.
 border ; ukuran lebar border tabel (dalam pixel).
 cellpadding ; jarak antara isi cell dengan batas cell (dalam pixel).
 cellspacing ; jarak antar cell (dalam pixel).
 width ; ukuran tabel dalam pixel atau percent.
Contoh :
<TABLE align="center" bgcolor="#0000FF" border="2"
cellpadding="5" cellspacing="2" width="90%">
2. <TR>Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:
 align ; perataan : rata kiri (left), tengah (center) atau kanan (right).
 bgcolor ; warna latar belakang dari baris.
 valign ; perataan vertikal : top, middle atau bottom.
Contoh :
<TR align="right" bgcolor="#0000FF" valign=top>
3. <TD> Tag ini digunakan untuk membuat kolom baru pada tabel.
 align ; perataan
 background ; image yang digunakan sebagai latar belakang dari kolom.
 bgcolor ; warna latar belakang
 colspan ; untuk memanjangkan beberapa sel secara horizontal
 height ; ukuran tinggi cell dalam pixels.
 nowrap ; membuat supaya isi dari kolom tetap berada pada satu baris.
 rowspan ; untuk memanjangkan beberapa sel secara vertikal
 valign ; perataan vertikal :top, middle atau bottom.
 width ; ukuran kolom dalam pixel atau persen.
Contoh :
2

<TD align="right" background="back.gif" bgcolor="#0000FF" colspan="3"
height="200" nowrap rowspan="2" valign="bottom" width="300">
Latihan 1
<html>
<Head>
<Title> T A B L E </Title>
</Head>
<Body>
<center><h1><font color="Red">LATIHAN PEMBUATAN TABEL</FONT></h1>
<br>
MEMBUAT TABEL 1.1
<table border=1>
<tr>
<td> BARIS KE - 1
<td> DATA I
<td> DATA II
<td> DATA III
<td> DATA IV
<td> KETERANGAN
<tr>
<td> BARIS KE - 2
<td> &nbsp
<td> &nbsp
<td> &nbsp
<td> &nbsp
<td> &nbsp
<tr>
<td> BARIS KE - 3
<td> &nbsp
<td> &nbsp
<td> &nbsp
<td> &nbsp
<td> &nbsp
</table>
</Body>
</html>
Maka hasilnya seperti gambar dibawah ;
3

Latihan 2
<html>
<Head>
<Title> T A B L E KE - D U A </Title>
</Head>
<Body>
<center><h1><font color="Red">LATIHAN PEMBUATAN TABEL 2</FONT></h1>
<br>
DATA MAHASISWA
<BR> TAHUN 2010
<table border=1>
<tr>
<td WIDTH=25px height=50px align="center" bgcolor=#6CE663> <font
color="blue"><b> NO</b></font>
<td WIDTH=100px align="center" bgcolor=#6CE663><font color="blue"><b> N
I M</b></font>
<td align="center" bgcolor=#6CE663><font color="blue"><b> NAMA
MAHASISWA</b></font>
<td WIDTH=100px align="center" bgcolor=#6CE663><font color="blue"><b>
SEMESTER</b></font>
FAKULTAS</b></font>
JURUSAN</b></font>
KELAS</b></font>
<tr>
<td align="center"> 1
<td align="left"> ANDI
<td align="center"> II
<td align="center"> FTI
<td align="center"> TI
<td align="center"> R1
<tr>
<td align="center"bgcolor=#6B8BF3> 2
<td align="center" bgcolor=#6B8BF3> &nbsp
<td align="left" bgcolor=#6B8BF3> &nbsp
<tr>
<td align="center"> &nbsp
<td align="left"> &nbsp
<tr>
<td align="center" bgcolor=#6B8BF3> 4
<td align="center"bgcolor=#6B8BF3> &nbsp
<td align="left" bgcolor=#6B8BF3> &nbsp
<td align="center"bgcolor=#6B8BF3> &nbsp
4

<tr>
<td align="left"> &nbsp
</table>
</Body>
</html>
Latihan 3
<html>
<Head>
<Title> T A B L E KE - TIGA </Title>
</Head>
<Body>
<center><h1><font color="Red">LATIHAN PEMBUATAN TABEL 3</FONT></h1>
<br>
DAFTAR NILAI MAHASISWA UNSERA
<BR> TAHUN 2010
<table border=1>
<tr>
<td WIDTH=100px align="center" bgcolor=#6CE663 rowspan=2><font
color="blue" ><b> N I M</b></font>
<td align="center" bgcolor=#6CE663 rowspan=2><font color="blue"><b>
NAMA MAHASISWA</b></font>
<td WIDTH=200px align="center" bgcolor=#6CE663 colspan=3><font
color="blue"><b> TINGKAT</b></font>
color="blue"><b> J K</b></font>
5

color="blue"><b> MATA KULIAH</b></font>
<td WIDTH=100px align="center" bgcolor=#6CE663 rowspan=2><font
color="blue"><b> JUMLAH</b></font>
<tr>
<td align="center" bgcolor=#6CE663><font color="red"> Semester</font>
<td align="center" bgcolor=#6CE663><font color="red"> Fakultas</font>
<td align="center" bgcolor=#6CE663><font color="red"> Jurusan</font>
<td align="center" bgcolor=#6CE663><font color="red"> L</font>
<td align="center" bgcolor=#6CE663><font color="red"> P</font>
<td align="center" bgcolor=#6CE663><font color="red">Matkul 1</font>
<tr>
<td align="center">1001
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<tr>
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<tr>
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<tr>
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
<td>&nbsp
6

<td>&nbsp
</table>
</Body>
</html>
Latihan 4
<html>
<Head>
<Title> T A B L E KE - EMPAT </Title>
</Head>
<Body background="BG1.jpg">
<center>
MEMBUAT LAYOUT WEB
<table border=0 WIDTH=800>
<tr>
<td colspan=3 bgcolor="orange" height=150px align="center">
Width : 150pixel
<tr>
<td bgcolor="red" width=150px rowspan=2 align="center">
Width : 150pixel
<td width=500px height=300px bgcolor="white" align="center">
300pixel x 500pixel
<td bgcolor="yellow" align="center" > Width : 150pixel
<tr>
<td colspan=2 bgcolor="green" height=100px align="center">
Height : 100pixel
</Body>
</html>
7

8

F O R M
Form merupakan sebuah tag HTML yang digunakan untuk menandakan sebuah
formulir (borang) inputan pada dokumen HTML. Pembuatan sebuah form dapat
menggunakan pilihan yang akan dimasukan pada sebuah form dengan menggunakan
tag <INPUT>, tag<SELECT>, tag <OPTION>. tag ini terletak antara tag <FORM> dan
</FORM>
Tag ini berguna untuk memberikan inputan berupa data pada dokumen HTML kita yang
kemudian akan diproses oleh kode program pemroses. Tag ini digunakan bersamaan
dengan tag FORM sehingga dapat diarahkan ke kode program yang akan pemroses
data yang dikirimkan melalui tag INPUT.
Dalam penggunaan tag INPUT harus menambahkan atribut TYPE, Atribut ini
merupakan atribut terpenting dari tag INPUT dikarenakan atribut ini berguna untuk
menentukan jenis dari inputan data yang akan digunakan pada dokumen HTML kita.
TYPE = TEXT
Jenis ini akan menghasilkan tampilan input data berupa kotak yang dapat menampung
hanya sebaris tulisan. Jenis ini biasanya digunakan untuk memasukkan nama atau kata
kunci.
Contoh :
<input type="text" name="text1"> HASILNYA
TYPE = PASSWORD
Jenis ini hampir sama dengan jenis TYPE = TEXT berupa kolom kecil yang hanya
dapat menampung sebaris tulisan, bedanya pada jenis ini semua tulisan yang
diketikkan pada kolom tersebut tidak akan ditampilkan tetapi diganti menjadi tanda ●
atau * sehingga kerahasiaannya akan terjamin. Jenis ini memang ditujukan untuk
penulisan data berupa password sehingga kerahasiaannya harus sangat dijaga.
9
TAG <INPUT>

Contoh :
<INPUT TYPE=PASSWORD NAME="katasandi"> HASILNYA
TYPE = CHECKBOX
Jenis ini akan menghasilkan tampilan berupa pilihan yang dapat dipilih lebih dari satu,
tampilannya berupa kotak yang dapat diberi tanda centang/contreng. Jenis ini biasa
digunakan untuk memasukkan data pilihan yang pilihannya bisa lebih dari satu, seperti
hobby, makanan, dan lain-lain.
Contoh :
<INPUT TYPE=CHECKBOX NAME="sepak bola"> sepak bola
<INPUT TYPE=CHECKBOX NAME="tenis"> tenis
<INPUT TYPE=CHECKBOX NAME="renang"> renang
<INPUT TYPE=CHECKBOX NAME="basket"> basket
HASILNYA
TYPE = RADIO
Jenis ini hampir mirip seperti TYPE = CHECKBOX yang digunakan untuk data berupa
pilihan berganda, bedanya tipe ini hanya dapat dipilih jawaban salah satu saja. Jenis ini
biasa digunakan untuk memasukkan data seperti jenis kelamin, status pernikahan, dan
lain-lain.
Contoh :
<INPUT TYPE=RADIO NAME="jeniskelamin" VALUE="pria">pria
<INPUT TYPE=RADIO NAME="jeniskelamin" VALUE="wanita">wanita
HASILNYA
10

TYPE = SUBMIT
Jenis ini menampilkan berupa tombol yang berfungsi untuk mengirim data dari
masukkan yang sudah ditulis oleh pengguna. Tanpa penggunaan jenis ini maka semua
data yang sudah diisi oleh pengguna tidak akan berarti apa-apa karena tidak dapat
diproses oleh kode pemroses, sehingga penggunaan tipe ini akan sangat berarti sekali.
Biasanya penggunaan tombol submit ini ditampilkan pada akhir formulir ketika
pengguna telah selesai memasukkan data.
Contoh :
<FORM >
Masukkan nama anda : <INPUT TYPE=TEXT NAME="nama">
<INPUT TYPE=SUBMIT>
</FORM>
HASILNYA
TYPE = RESET
Berbeda dengan TYPE = SUBMIT yang berguna untuk mengirimkan data yang telah
ditulis oleh pengguna, jenis ini justru digunakan untuk mengosongkan kembali data
yang telah dituliskan pengguna.
Contoh :
<FORM >
Masukkan nama anda : <INPUT TYPE=TEXT NAME="nama">
<INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>
</FORM>
HASILNYA
11

SELECT
adalah tag HTML yang digunakan untuk menampilkan daftar pilihan dalam bentuk drop
down (jatuh kebawah). Penggunaannya harus bersamaan dengan penggunaan tag
OPTION dimana OPTION adalah tag yang digunakan untuk menampilkan pilihan-
pilihan yang terdapat dalam daftar pilihan yang ditampilkan oleh tag SELECT.
NAME
adalah atribut dari tag SELECT yang berguna untuk menjadikan pengenal dari tag
SELECT ketika inputan data yang diberikan oleh pengguna diproses pada kode
program pemroses.
OPTION
adalah sebuah tag HTML yang berfungsi untuk menampilkan beberapa pilihan yang
berbentuk dalam sebuah daftar. Pada penggunaannya, OPTION digunakan bersamaan
dengan tag SELECT.
VALUE
adalah atribut yang sangat penting dari tag ini dikarenakan nilai yang akan dikirimkan
pada kode pemroses inputan adalah nilai yang diisikan pada atribut ini. Misalnya pada
contoh dibawah kamu memilih pilihan kedua “Sistem Informasi” maka yang dikirimkan
pada kode program pemroses adalah 'si' dimana 'si' merupakan nilai yang dimasukkan
pada atribut VALUE ini.
Contoh ;
<SELECT NAME="jurusan">
<OPTION VALUE="ti">Teknik Informatika</OPTION>
<OPTION VALUE="si">Sistem Informasi</OPTION>
<OPTION VALUE="ak">Akuntansi Komputer</OPTION>
<OPTION VALUE="sk">Sistem Komputer</OPTION>
</SELECT>
HASILNYA …
12
TAG <SELECT> dan TAG <OPTION>

SELECTED
merupakan atribut tambahan dari tag OPTION yang dapat digunakan untuk menjadikan
suatu pilihan adalah pilihan yang otomatis terpilih apabila pengguna tidak mengganti
pilihan yang ada.
Contoh :
<SELECT NAME="jurusan">
<OPTION VALUE="si" SELECTED>Sistem Informasi</OPTION>
</SELECT>
Tag diatas akan menghasilkan tampilan sebagai berikut :
Pada contoh diatas dikarenakan atribut ini diletakkan pada pilihan kedua “Sistem
Informasi” maka yang ditampilkan pada tampilan diatas secara otomatis adalah “Sistem
Informasi”.
MULTIPLE
adalah atribut yang digunakan untuk menampilkan lebih dari satu pilihan pada tampilan
daftar pilihan. Biasanya penggunaan atribut MULTIPLE selalu diikuti dengan
penggunaan atribut size, yang berguna untuk menentukan berapa banyak pilihan yang
dapat ditampilkan secara sekaligus.
Contoh:
<SELECT NAME="jurusan" MULTIPLE SIZE=4>
</SELECT>
Maka Hasilnya
13

S I Z E
adalah atribut dari tag SELECT yang digunakan untuk menampilkan jumlah pilihan
pada daftar pilihan lebih dari satu. Tanpa penggunaan atribut ini, maka secara otomatis
pilihan yang ditampilkan pada daftar pilihan hanya satu.
Sebagai contoh :
<SELECT NAME="jurusan" SIZE=2>
</SELECT>
Maka Hasilnya
Tag ini digunakan untuk menampilkan suatu formulir dimana berisi tulisan dalam jumlah
yang cukup banyak. Biasanya tag TEXTAREA digunakan untuk tempat dimana
pengguna bisa mengisi komentar pada suatu situs atau tempat untuk menampilkan
script program.
Contoh :
<TEXTAREA COLS=40 ROWS=6> Kamu dapat menuliskan suatu teks disini </TEXTAREA>
Tag diatas akan menghasilkan suatu TEXTAREA yang memiliki kolom 40 dan baris 6.
14
TAG <TEXTAREA>

N A M E
Atribut ini digunakan untuk meemberikan nama dari TEXTAREA. Atribut ini akan sangat
berguna jika tag TEXTAREA digabungkan dengan tag FORM.
Contoh penulisan :
<TEXTAREA NAME=”papantulis” COLS=40 ROWS=6></TEXTAREA>
C O L S
Atribut COLS digunakan untuk menentukan lebar dari TEXTAREA.
R O W S
Atribut ROWS digunakan untuk menentukan tinggi dari TEXTAREA
Contoh :
<TEXTAREA NAME="kecil" COLS=10 ROWS=10></TEXTAREA>
<TEXTAREA NAME="sedang" COLS=30 ROWS=10></TEXTAREA>
<TEXTAREA NAME="lebar" COLS=50 ROWS=10></TEXTAREA>
Maka Hasilnya…
15

READONLY
Atribut ini digunakan agar tulisan yang terdapat didalam TEXTAREA hanya dapat
dibaca dan disalin tapi tidak dapat diubah.
Contoh ;
<TEXTAREA NAME=”untukdibaca” COLS=40 ROWS=6 READONLY> Tulisan ini tidak dapat
diubah tapi bisa disalin. </TEXTAREA>
Maka hasilnya.:
DISABLED
Atribut ini digunakan agar tulisan yang terdapat didalam TEXTAREA tidak dapat disalin
dan diubah.
Contoh ;
<TEXTAREA NAME="cuma_baca" COLS=40 ROWS=6 DISABLED> Tulisan ini
tidak dapat diubah maupun disalin. </TEXTAREA>
Maka hasilnya.:
TABINDEX
Tombol TAB pada keyboard kamu dapat digunakan untuk memindahkan kursor
komputer ke suatu formulir pada dokumen HTML, dengan atribut ini perpindahan kursor
dapat diatur.
16

Contoh :
Gunakan tombol TAB untuk pindah dari satu formulir ke formulir lain.
<html>
<body>
<TABLE BORDER CELLPADDING=3 CELLSPACING=5 BGCOLOR="#FFFFCC">
<TR>
<TD>Nama: <INPUT NAME="Nama" TABINDEX=1></TD>
<TD ROWSPAN=3>Biografi<BR />
<TEXTAREA COLS=25 ROWS=5 TABINDEX=4></TEXTAREA></TD></TR>
<TR>
<TD>email: <INPUT NAME="email" TABINDEX=2></TD></TR>
<TR>
<TD>Hobi: <SELECT NAME="hobi" TABINDEX=3>
<OPTION VALUE="">...
<OPTION VALUE="renang">Berenang
<OPTION VALUE="bola">Sepakbola
<OPTION VALUE="musik">Musik
<OPTION VALUE="tari">Tari</SELECT></TD></TR>
</TABLE>
</body>
</html>
Maka Hasilnya :
Setiap masukkan yang disisi oleh pengguna kedalam form, selanjutnya dapat diproses
oleh anda. Proses yang sering dilakukan adalah mengirimkan atau menampilkan
masukan tersebut kedalam halaman web yang lain.
Untuk melakukan pemrosesan data yang telah disi kedalam form tersebut, maka
diperlukan atribut yang dapat memproses data tersebut yaitu dengan menggunakan
atribut : ACTION dan METHOD
ACTION
merupakan atribut dari tag FORM yang digunakan untuk memproses inputan yang
dimasukan pada tag FORM. Tindakan pemrosesan inputan dari formulir isian yang kita
buat akan berupa logika dalam bahasa pemrograman web seperti PHP atau CGI.
17
MEMPROSES MASUKAN

METHOD
Atribut METHOD ini digunakan untuk menentukan metode pengiriman data dari formulir
isian ke file pemroses. Metode yang digunakan ada dua macam, yaitu : GET dan
POST.
Perbedaan dari method GET dan POST adalah apabila kalian menggunakan method
GET maka di address bar akan tampil data yang dikirimkan dari proses tersebut.
Contoh ;
<form id="form" name="form" method="post" action="show.php">
nama <input type="text" name="nama" size=25/><br />
email <input type="text" name="email"/><br />
<input name="submit" type="submit" value="proses" />
</form>
Latihan 1
(simpan dengan nama: form submit.html )
<html>
<head>
<title> Hasil Pemrosesan Data </title>
</head>
<body>
<center>
<img src="logo.png" width=150 height=150><br><BR><BR>
TERIMA KASIH ANDA TELAH MENDAFTAR <BR>
<BLINK>SELAMAT BERGABUNG DAN SEMOGA SUKSES</BLINK>
</body>
</html>
18

Latihan 2
(simpan dengan nama: form.html )
<html>
<head>
<title> LATIHAN PEMBUATAN FORM </title>
</head>
<body>
<br>
<br>
<br>
<form name="data" method="post" action="form submit.html">
<center>
<table border=1 bgcolor=#A0D188>
<tr>
<td COLSPAN=3 BGCOLOR="#5867F0" ALIGN="CENTER"><font size=5>
<b>FORM REGISTRASI</b></font>
<tr>
<td>Nama Lengkap
<td>:
<td><input type="text" size=40 name="nama" value="">
<tr>
<td>Nama Panggilan
<td>:
<td><input type="text" size=20 name="nm_panggilan">
<tr>
<td>Tempat dan Tanggal Lahir
<td>:
<td><input type="text">,
<input type="number" size=2>
<SELECT NAME="bln">
<OPTION VALUE="">pilih bulan</OPTION>
<OPTION VALUE="">Januari</OPTION>
<OPTION VALUE="">Februari</OPTION>
<OPTION VALUE="">Maret</OPTION>
<OPTION VALUE="">April</OPTION>
<OPTION VALUE="">Mei</OPTION>
<OPTION VALUE="">Juni</OPTION>
<OPTION VALUE="">Juli</OPTION>
<OPTION VALUE="">Agustus</OPTION>
<OPTION VALUE="">September</OPTION>
<OPTION VALUE="">Oktober</OPTION>
<OPTION VALUE="">November</OPTION>
<OPTION VALUE="">Desember</OPTION>
</SELECT>
<input type="text" size=4>
<tr>
<td valign="top">Jenis Kelamin
<td valign="top">:
<td valign="top"><INPUT TYPE=RADIO NAME="jk" VALUE="pria">pria<br>
<INPUT TYPE=RADIO NAME="jk" VALUE="wanita">wanita
<tr>
<td valign="top">Alamat
<td valign="top">:
19

<td valign="top"><TEXTAREA COLS=40 ROWS=1></TEXTAREA>
<tr>
<td valign="top">Agama
<td valign="top">:
<td><SELECT NAME="agama">
<OPTION VALUE="">pilih Agama</OPTION>
<OPTION VALUE="">Islam</OPTION>
<OPTION VALUE="">Kristen</OPTION>
<OPTION VALUE="">Hindu</OPTION>
<OPTION VALUE="">Budha</OPTION>
</SELECT>
<tr>
<td>Email
<td>:
<td><input type="text" size=30>
<tr>
<td valign="top">Hobby
<td valign="top">:
<td><INPUT TYPE=CHECKBOX NAME="sepak bola"> sepak bola <br>
<INPUT TYPE=CHECKBOX NAME="tenis"> tenis <br>
<INPUT TYPE=CHECKBOX NAME="renang"> renang <br>
<INPUT TYPE=CHECKBOX NAME="basket"> basket <br>
<tr>
<td valign="top"> Biografi
<td valign="top">:
<td><TEXTAREA COLS=40 ROWS=5></TEXTAREA>
<tr>
<td colspan=3 align="center">
<input type="submit" value="Register">
<input type="reset" value="Preset">
</table>
</form>
</body>
</html>
20

FRAMSET & F R A M E
FRAMESET adalah tag HTML yang digunakan untuk menampilkan bingkai-bingkai
tersendiri pada dokumen HTML. FRAMESET digunakan bersamaan dengan
penggunaan tag FRAME yang berguna untuk menampilkan file sumber dari bingkai
untuk dijadikan bagian dari tag FRAMESET. Cara kerja FRAMESET sama seperti cara
kerja tag TABLE dimana tag TABLE digunakan untuk membuat halaman dokumen
HTML menjadi beberapa bagian kolom dan baris. Hal ini juga dilakukan oleh tag
FRAMESET yang dapat membagi halaman dokumen HTML menjadi kolom dan baris,
bedanya, pada tag FRAMESET, isi dari setiap kolom dan barisnya berbentuk bingkai
yang bersumber dari dokumen HTML lain.
C O L S
Atribut COLS digunakan untuk menentukkan berapa banyak kolom yang akan
ditampilkan beserta lebar dari masing-masing kolom. Penggunaan COLS dapat
dituliskan sebagai berikut :
<FRAMESET COLS=”20%, 50%, 30%”>
Tag diatas akan menghasilkan 3 kolom yang masing-masing memiliki lebar 20%, 50%,
dan 30%. Hasil yang sama dapat dituliskan sebagai berikut :
<FRAMESET COLS=”20%, 50%, *”>
Tanda bintang pada tag tersebut mengartikan 'sisanya', jadi apabila kolom pertama
memiliki lebar 20%, dan kolom kedua memiliki lebar 50%, maka kolom ketiga memiliki
lebar sebesar 'sisanya' yaitu sebesar 30%.
R O W S
Atribut ROWS digunakan untuk menentukkan berapa banyak baris yang akan
ditampilkan beserta lebar dari masing-masing baris. Penggunaan ROWS dapat
dituliskan sebagai berikut :
<FRAMESET ROWS=”35%, 20%, 20%, 25%”>
21
FRAMESET

Tag diatas akan menghasilkan 4 baris yang masing-masing memiliki lebar 35%, 20%,
20% dan 25%. Hasil yang sama dapat dituliskan sebagai berikut
<FRAMESET ROWS=”35%, 20%, 20%, *”>
Tanda bintang pada tag tersebut mengartikan 'sisanya', jadi apabila baris pertama
memiliki lebar 35%, baris kedua memiliki lebar 20%, dan baris ketiga memiliki lebar
20% juga, maka baris keempat memiliki lebar sebesar 'sisanya' yaitu sebesar 25%.
Contoh;
<HTML>
<HEAD>
<TITLE>cth frame_1</TITLE>
</HEAD>
<FRAMESET cols="20%,60%,20%" rows="25%,50%,25%">
<FRAME SRC="" >
<FRAME SRC="" >
<FRAME SRC="" >
<FRAME SRC="" >
<FRAME SRC="" >
<FRAME SRC="" >
</FRAMESET>
</HTML>
Maka Hasilnya :
22

FRAME adalah tag HTML yang digunakan untuk membuat sebuah bingkai yang
terdapat didalam tag FRAMESET. Cara kerja FRAME hampir sama dengan cara kerja
tag TD yang digunakan untuk membuat sebuah sel tunggal dari sebuah tabel, begitu
juga dengan tag FRAME yang berguna untuk membuat sebuah bingkai tunggal dari
sebuah FRAMESET. Penggunaan tag FRAME selalu berada didalam tag FRAMESET
yang akan menentukan berapa banyak FRAME yang terdapat dalam suatu
FRAMESET.
S R C
Atribut ini merupakan kepanjangan dari SOURCE yang berarti "sumber", sesuai dengan
namanya, atribut ini berfungsi untuk menentukan sumber dari setiap FRAME yang akan
ditampilkan.
Contoh ;
<FRAME SRC="http://html/contohfrmae.html">
tag tersebut menyatakan bahwa file sumber dari FRAME yang akan ditampilkan
terdapat pada alamat http://html/contohfrmae.html.
SCROLLING
Atribut SCROLLING berguna untuk menentukan apakah FRAME yang akan ditampilkan
memiliki SCROLL atau tidak. Terdapat tiga pilihan dari atribut ini, yaitu :
YES
Pilihan Yes akan membuat suatu FRAME akan memiliki SCROLL,
diperlukan maupun tidak diperlukan
NO
Pilihan NO, akan membuat suatu FRAME tidak memiliki SCROLL
meskipun dibutuhkan
AUTO
Pilihan SCROLLING=AUTO merupakan pilihan terbaik, dikarenakan
suatu FRAME akan memiliki SCROLL hanya bila dibutuhkan, dan
tidak akan menampilkan SCROLL bila FRAME tersebut tidak
memerlukannya.
Contoh ;
23
F R A M E

<HTML>
<HEAD>
<TITLE>Atribut Frameborder</TITLE>
</HEAD>
<FRAMESET ROWS="20%,25%,*">
<FRAME SRC="a.html" SCROLLING=YES>
<FRAME SRC="b.html" SCROLLING=NO>
<FRAME SRC="c.html" SCROLLING=AUTO>
</FRAMESET>
</HTML>
NORESIZE
Atribut ini berguna untuk melarang border suatu FRAME untuk digeser-geser.
Contoh;
<FRAME SRC="a.html" NORESIZE>
MARGINWIDTH
Atribut ini digunakan untuk menentukkan rataan tepi horizontal dari suatu FRAME.
Contoh;
<FRAME SRC="b.html" MARGINWIDTH=1>
N A M E
24

Atribut ini digunakan untuk menghubungkan tautan antar FRAME.
Contoh;
<frame src="fold/menu kbc.html" name="Judul">
LATIHAN 1
( Simpan dengan nama : f_judul.html)
<html>
<head>
<title> judul </title>
</head>
<body bgcolor="green">
<center><h1><blink><font color="orange">"Beriman,</font> <font
color="white" size=10>Berilmu,</font> <font
color="yellow">Beramal"</font></blink></h1><br>
<a href="web_unsera.html" target="_parent">Halaman Utama</a> |
Akademik</a> | Kemahasiswaan | Fasilitas | Beasiswa | P M B
</body>
</html>
LATIHAN 2
( Simpan dengan nama : f_daftarisi.html)
<html>
<head>
<title>Daftar Isi</title>
</head>
<body>
<h3>FAKULTAS</h3><br>
<a href="f_isi.html#fti" target="isi">Teknologi Informasi</a><br>
<a href="f_isi.html#tek" target="isi">Teknik</a><br>
<a href="f_isi.html#eko" target="isi">Ekonomi</a><br>
<a href="f_isi.html#kom" target="isi">Komunikasi</a><br>
<a href="f_isi.html#sospol" target="isi">Ilmu Sosial dan
Politik</a><br>
<a href="f_isi.html#d3" target="isi">Program Diploma</a><br>
</body>
</html>
LATIHAN 3
25

( Simpan dengan nama : f_isi.html)
<html>
<head>
<title>Isi</title>
</head>
<body>
<h2>FAKULTAS</h2></a><br>
<p>Fakultas dan Program Studi yang kami tawarkan sangat beragam yaitu
terdiri dari 5 fakultas dan 5 Program Diploma 3, masing fakultas
mempunya keunggulan dan konsentrasi di bidang prodi masing-masing
begitu juga dengan Program Diploma 3. </p><br>
<p><br><br>
<a name="fti">
<h2>Teknologi Informasi</h2></a><br>
<p>Fakultas Teknologi Informasi terbagi kedalam 3 Program Studi,
yaitu:
<ol>
<li> Teknik Informatika (S1), Konsentrasi Matakuliah; Jaringan
Komputer, Multimedia, Pemrograman Internet, Design WEB
<li> Sistem Informasi (S1), Konsentrasi Matakuliah ; Sistem
Informasi Rekam Medis, Sistem Informasi Perbankan, Sistem Informasi
Akuntansi, Pemrograman Datbase, Sistem Informasi Manajemen.
<li> Sistem Komputer (S1), Konsentrasi Matakuliah; Animasi
II/Maya/3D S MAX, Video Editing, Sinematografi, Teknik wawancara dan
Reportase, Perancangan Sistem Digital, Perancangan sistem VLSI dan
MICRO
</ol> </p><br>
<a name="tek"><br>
<h2>Teknik</h2><br></a><br>
<p>Fakultas Teknik terbagi kedalam 3 Program Studi, yaitu:
<ol>
<li> Teknik Kimia (S1), Konsentrasi matakuliah : Perancangan
reaktor Kimia, Perancangan Pabrik, Perncangan Alat Proses dan Kinetika
Kimia.
<li> Teknik Industri (S1), Konsentrasi Matakuliah; Industri Kimia,
Praktikum Statistika Industri, Otomasi Industri dan Sistem Produksi 1
dan 2
<li> Teknik Sipil (S1), Konsentrasi Matakuliah; Struktur Baja,
Perencanaan Pelabuhan Laut, Perencanaan Konstruksi Gedung bertingkat,
dan drainase perkotaan
</ol>
</p><br><br>
<p>
<a name="eko">
<h2>Ekonomi</h2></a><br><br>
<p>Fakultas Ekonomi terbagai kedalam 2 Program Studi, yaitu:
<ol>
<li> Akuntansi (S1), Konsentrasi Matakuliah; Sistem Infromasi
Akuntansi, Akuntansi sektor Public, Akuntansi perpajakan..
<li> Manajemen (S1), Konsentrasi Matakuliah; Manajemen keuangan,
Evaluasi Proyek, Manajemen Startegik, Ekonomi Manajerial, Manajemen
(SDM) dan Evaluasi Kerja
</ol></p><br><br>
26

<a name="kom">
<h2>Komunikasi</h2></a><br><br>
<p>fakultaas komunikasi baru memiliki 1 program studi yaitu; komunkasi
(S1) dan memiliki konsentrasi pada; manajemen public relation,
strategi media dan public speaking, </p><br><br>
<a name="sospol">
<h2>Ilmu Sosial dan Politik</h2></a><br><br>
<p>fakultas Ilmu Sosial Politik baru memiliki 1 program studi yaitu
Administrasi Negara (S1), .</p><br><br>
<a name="d3">
<h2>Program Diploma 3</h2></a><br><br>
<p>Program Diploma 3 terdiri dari :
<ol>
<li> Keuangan dan Perbankan (D3)
<li> Manajemen Perusahaan (D3)
<li> Manajemen Pemasaran (D3)
<li> Akuntansi Komputer (D3)
<li> Akuntansi (D3)
</ol>
</p><br><br>
</body>
</html>
LATIHAN 4
( Simpan dengan nama : menu_akademik.html)
<html>
<head>
<title>MENU_UTAMA</title>
</head>
<frameset rows="25%,*" >
<frame src="f_judul.html" name="Judul" scrolling="NO" noresize >
<frameset cols="20%,*">
<frame src="f_daftarisi.html" name="daftar isi">
<frame src="f_isi.html" name="isi">
</frameset>
</frameset>
</html>
27

CSS
( Cascading Style Sheets )
CSS adalah singkatan dari Cascading Style Sheets. Arti CSS adalah: kumpulan kode-
kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu
halaman HTML.
SYNTAX CSS
Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector,
1 property, 1 value. Format penulisan kalimat CSS:
Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.
Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.
Value adalah nilai dari pengaturannya.
Contoh Syntax:
Contoh di atas menunjukkan
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari
h1 ke warna merah (red).
28
selector { property: value }
h1 { color: red }
Selector: h1
Property: color
Value: red

Pengelompokan Selectors
Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara
menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua
menggunakan warna merah, maka kode CSS nya menjadi:
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.
Penggunaan Banyak Properties
Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
Pada contoh di atas, tag h1, h2 dan h3 diatur agar menggunakan warna merah, dengan
type font arial, dan ukuran font 150%.
Cara Penulisan Yang Baik
Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana
pengaturan property dan values nya di indent. agar rapih dan lebih mudah di baca
CSS Comment
Kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk
memberi catatan pengingat. Anda bisa menggunakan syntax pembuka /* dan penutup
*/ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak
akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.
Contoh;
29
h1,h2,h3 { color: red }
h1,h2,h3 {color:red; font-family:arial;
font-size:150%;}
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}
/* Tulis komentar anda di sini */
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}

Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:
1. Inline CSS
2. Embed atau memasang kode css ke dalam bagian <head>
3. link ke external CSS
4. Import CSS file
1. Inline CSS
Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara
ini tidak memerlukan penulisan selector dalam kode CSS. Cara ini sebaiknya hanya
digunakan jika anda mau memformat suatu elemen satu kali saja.
Contoh:
Pada contoh di atas, elemen paragraf <P> di format agar tulisannya menggunakan
warna biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format
ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.
Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax
property: value.
2. Embedded CSS
Anda bisa juga menempelkan kode CSS di antara tag <head> dan </head>. Penulisan
CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>.
Contoh:
30
<P style=”color:blue”
Isi Paragraf.
</p>
<head>
<style type="text/css" media=screen>
p {color:blue;}
</style>
</head>

Dalam contoh di atas semua elemen <P> dalam halaman web tersebut akan diformat
menggunakan font berwarna biru.
3. External CSS
Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css.
Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda
buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan
untuk semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian
CSS dengan cara ini.
Contoh:
1. Anda membuat satu file dengan notepad atau teks editor lain, dan berinama,
misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.
2. Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya
dengan memasukkan kode di bawah ini, di antara tag <head> dan </head>
4. Import CSS
Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag
import.
Contoh:
31
p {font-family: arial; font-size: small;}
h1 {color: red; }
<head>
<link rel=”stylesheet” href=”style.css”
type=”text/css”>
</head>
@import "style.css";
atau
@import url("style.css");

Penggunaan Lebih dari Satu Kode CSS
Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan
adalah kode yang lebih spesifik.
Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk
memformat elemen H1 sbb:
Sementara di halaman web yang sama, di antara tag <head> ada kode CSS sbb:
Perhatikan bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, text-
align=left sementara dari internal style sheet, text-align=right.
Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam
hal ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sbb:
Class dan ID Selector
Misalkan anda membuat kode CSS untuk tag <h1>. Sekarang bagaimana jika anda
ingin memformat tag <h1> dengan warna / property berbeda? Misalkan, anda ingin tag
<h1> di kolom kiri berwarna biru sementara tag <h1> di kolom tengah berwarna hitam.
Untuk kasus seperti ini, anda bisa menggunakan Class selector dan ID selector.
1. Class Selector
Class selector adalah penggabungan beberapa properties yang digunakan lebih dari
satu kali.
Cara penulisan Class Selector:
32
h1 {
color: red;
text-align: left;
font-size: 8pt
}
h1 {
text-align: right;
font-size: 20pt
}
color: red;
text-align: right;
font-size: 20pt
.nama-class {property:value;}

Untuk menempelkan class ke dalam tag HTML:
Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class
selector di luar kode HTML anda menggunakan tag <div class=nama-class> dan di
akhiri dengan tag </div>.
Contoh:
Penulisan kode CSS:
Pemakaian kode CSS
Hasil:
33
taghtml.nama-class {Property:value;}
.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
<div class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>

2. ID Selector
ID Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah ID
selector untuk memformat bagian yang hanya muncul satu kali dalam satu halaman
web, misalnya untuk memformat bagian menu / sidebar.
Cara penulisan ID Selector:
Untuk menempelkan ID selector ke dalam tag HTML:
Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector
di luar kode HTML anda menggunakan tag <div id=nama-ID> dan di akhiri dengan tag
</div>.
LATIHAN 1 ( EXTERNAL CSS )
A. Simpan dengan nama (style.css)
body{
background:#000000
}
#wrapper {
width:800px;
margin:auto;
}
#atas{
background:#000099;
height:200px;
}
#kiri{
background:#33363D;
float:left;
width:250px;
height:600px;
}
#kanan{
background:#FFFFFF;
float:right;
width:550px;
height:600px;
}
#bawah{
background:#666666;
height:150px;
clear:both;
}
34
#nama-ID {property:value;}
taghtml#nama-ID {Property:value;}

B. Simpan dengan nama (indext.html)
<html>
<head>
<title>Layout</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="atas">
</div>
<div id="content">
<div id="kiri">
<p style="text-align:CENTER;">
<BR>
TEXT INI TERLETAK PADA SEBELAH KIRI
</div>
<div id="kanan">
</div>
</div>
<div id="bawah">
</div>
</div>
</body>
</html>
35

LATIHAN 2 (EMBED CSS )
<HTML>
<HEAD>
<style type="text/css" media=screen>
#menuku ul {
list-style: none;
}
#menuku ul ul{
list-style: none;
}
#menuku li {
float: left;
}
#menuku ul ul{
visibility:hidden;
width:149px;
}
#menuku ul li:hover ul,
#menuku ul a:hover ul{
visibility:visible;
}
#menuku li a {
background-color:#000000;
height: 2em;
width: 149px;
display: block;
border: 0.1em solid #dcdce9;
color: #ffffff;
text-decoration: none;
text-align: center;
}
</style>
</HEAD>
<BODY>
<div id="menuku">
<ul>
<li><a href="URL 1">MENU 1</a>
<ul>
<li><a href="URL sub 1">Sub menu 1</a></li>
</ul>
</li>
<li><a href="URL 2">MENU 2</a></li>
<li><a href="URL 3">MENU 3</a></li>
</ul>
</div>
</BODY>
</HTML>
36

37

38

Modul HTML Lanjut

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Modul HTML Lanjut

Similar to Modul HTML Lanjut (20)

Recently uploaded

Recently uploaded (20)

Modul HTML Lanjut