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 baru3. <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 :<TD align="right" background="back.gif" bgcolor="#0000FF" colspan="3"height="200" nowrap rowspan="2" valign="bottom" width="300">


2

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><td WIDTH=100px align="center" bgcolor=#6CE663><font color="blue"><b>

FAKULTAS</b></font><td WIDTH=100px align="center" bgcolor=#6CE663><font color="blue"><b>

JURUSAN</b></font><td WIDTH=100px align="center" bgcolor=#6CE663><font color="blue"><b>

KELAS</b></font><tr><td align="center"> 1<td align="center"> 112091001<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<td align="center" bgcolor=#6B8BF3> &nbsp<td align="center" bgcolor=#6B8BF3> &nbsp<td align="center" bgcolor=#6B8BF3> &nbsp<td align="center" bgcolor=#6B8BF3> &nbsp

<tr><td align="center"> 3<td align="center"> &nbsp<td align="left"> &nbsp<td align="center"> &nbsp<td align="center"> &nbsp<td align="center"> &nbsp<td align="center"> &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<td align="center" bgcolor=#6B8BF3> &nbsp<td align="center" bgcolor=#6B8BF3> &nbsp<td align="center"bgcolor=#6B8BF3> &nbsp


4

<tr><td align="center"> 5<td align="center"> &nbsp<td align="left"> &nbsp<td align="center"> &nbsp<td align="center"> &nbsp<td align="center"> &nbsp<td align="center"> &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><td WIDTH=100px align="center" bgcolor=#6CE663 colspan=2><font

color="blue"><b> J K</b></font><td WIDTH=100px align="center" bgcolor=#6CE663 colspan=3><font

color="blue"><b> MATA KULIAH</b></font>


5

<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><td align="center" bgcolor=#6CE663><font color="red">Matkul 2</font><td align="center" bgcolor=#6CE663><font color="red">Matkul 3</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




</table>Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “

6

</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.

Contoh :


9

TAG <INPUT>

<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="ti">Teknik Informatika</OPTION> <OPTION VALUE="si" SELECTED>Sistem Informasi</OPTION> <OPTION VALUE="ak">Akuntansi Komputer</OPTION> <OPTION VALUE="sk">Sistem Komputer</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> <OPTION VALUE="ti">Teknik Informatika</OPTION> <OPTION VALUE="si" SELECTED>Sistem Informasi</OPTION> <OPTION VALUE="ak">Akuntansi Komputer</OPTION> <OPTION VALUE="sk">Sistem Komputer</OPTION> </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> <OPTION VALUE="ti">Teknik Informatika</OPTION> <OPTION VALUE="si" SELECTED>Sistem Informasi</OPTION> <OPTION VALUE="ak">Akuntansi Komputer</OPTION> <OPTION VALUE="sk">Sistem Komputer</OPTION> </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">:<td valign="top"><TEXTAREA COLS=40 ROWS=1></TEXTAREA>


19

<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>

FRAMSET & F R A M E Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom“ Untuk kalangan Sendiri “

20

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 :

YESPilihan Yes akan membuat suatu FRAME akan memiliki SCROLL,

diperlukan maupun tidak diperlukan

NOPilihan 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.


23

F R A M E

Contoh ;

<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>


24

N A M E

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>


25

LATIHAN 3( 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 SelectorClass 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 SelectorID 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><li><a href="URL sub 2">Sub menu 2</a></li><li><a href="URL sub 3">Sub menu 3</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

Education

Transcript of Modul HTML Lanjut