Jumat, 12 Maret 2010

1. Tabel pada dokumen XHTML:
a. < table > = tabel
b. < caption > = judul tabel
c. < tr > = baris
d. < th > = cell heading
e. < td > = cell data

2. Membuat tabel sederhana
< body >
< table >
< caption > tabel keahlian < /caption >
< tr > < th > nama < /th > < th > keahlian < /th > < /tr >
< tr > < td > superman < /td > < td > bisa terbang < /td > < /tr >
< tr > < td > spiderman < /td > < td > bisa panjat dinding < /td > < /tr >
< tr > < td > mbah boedy < /td > < td > bisa ngajar < /td > < /tr >
< /table >
< /body >

3. Mengenal atribut border dan bgcolor
-> atribut border untuk mengatur ketebalan garis tepi.
-> atribut bgcolor untuk mengatur latar pada keseluruhan tabel.
< body >
< table bgcolor="grey" border="2" >
< caption > tabel keahlian < /caption >
< tr > < th > nama < /th > < th > keahlian < /th > < /tr >
< tr > < td > superman < /td > < td > bisa terbang < /td > < /tr >
< tr > < td > spiderman < /td > < td > bisa panjat dinding < /td > < /tr >
< tr > < td > mbah boedy < /td > < td > bisa ngajar < /td > < /tr >
< /table >
< /body >

4. Mengenal atribut cellspacing dan cellspadding
-> untuk mengatur jarak spasi dan padding
< body >
< table border="10" cellpadding="10" cellspacing="20" >
< caption > tabel keahlian < /caption >
< tr > < th > nama < /th > < th > keahlian < /th > < /tr >
< tr > < td > superman < /td > < td > bisa terbang < /td > < /tr >
< tr > < td > spiderman < /td > < td > bisa panjat dinding < /td > < /tr >
< tr > < td > mbah boedy < /td > < td > bisa ngajar < /td > < /tr >
< /table >
< /body >

5. Mengenal atribut width dan height
-> digunakan untuk mengatur lebar dan tinggi tabel
< body >
< table border="1" width="300" height="200" >
< caption > tabel keahlian < /caption >
< tr > < th > nama < /th > < th > keahlian < /th > < /tr >
< tr > < td > superman < /td > < td > bisa terbang < /td > < /tr >
< tr > < td > spiderman < /td > < td > bisa panjat dinding < /td > < /tr >
< tr > < td > mbah boedy < /td > < td > bisa ngajar < /td > < /tr >
< /table >
< /body >

6. Mengenal atribut align
-> untuk melakukan perataan secara horizontal
< body >
< table border="1" width="300" height="200" align="center" >
< caption > tabel keahlian < /caption >
< tr > < th > nama < /th > < th > keahlian < /th > < /tr >
< tr > < td > superman < /td > < td align="right" > bisa terbang < /td > < /tr >
< tr > < td > spiderman < /td > < td align="right" > bisa panjat dinding < /td > < /tr >
< tr > < td > mbah boedy < /td > < td align="right" > bisa ngajar < /td > < /tr >
< /table >
< /body >

7. Mengenal atribut valign
-> untuk melakukan perataan secara vertikal
< body >
< table border="1" width="300" height="200" align="center" >
< caption > tabel keahlian < /caption >
< tr > < th > nama < /th > < th > keahlian < /th > < /tr >
< tr > < td valign="top" > superman < /td > < td > bisa terbang < /td > < /tr >
< tr > < td valign="middle" > spiderman < /td > < td > bisa panjat dinding < /td > < /tr >
< tr > < td valign="bottom" > mbah boedy < /td > < td > bisa ngajar < /td > < /tr >
< /table >
< /body >

8. Mengenal atribut colspan dan rowspan
-> untuk menggabungkan cell baik seacra kolom maupun baris
< body >
< table border="1" >
< caption > data mamalia di kebun binatang < /caption >
< tr >
< th rowspan="2" colspan="2" > mamalia < /th > < th colspan="3" > jenis kelamin < /th >
< /tr >
< tr >
< th > orang utan < /th > < th > gajah < /th > < th > zebra < /th >
< /tr >
< th rowspan="2" > jenis kelamin < /th > < th > jantan < /th > < td > 15 < /td > < td > 5 < /td > < td > 8 < /td >
< /tr >
< tr >
< th > betina < /th > < td > 25 < /td > < td > 7 < /td > < td > 10 < /td >
< /tr >
< /table >
< /body >


FRAME dan IFRAME

1. Mengenal frame
Frame :
a. < frame > - src
b. < frameset > - cols, - rows

2. Membuat frame sederhana 1
nama file: frameku.html
< html >
< head >
< title > latihan frame < /title >
< /head >
< frameset cols="40%,*" >
< frame src="halaman_a.html" >
< frame src="halaman_b.htlml" >
< /frameset >
< /html >
nama file: halaman a.html
< body >
< h1 > ini halaman a < h1 >
< /body >

3. Membuat frame sederhana 2
< html >
< head >
< title > latihan frame < /title >
< /head >
< frameset rows="30%,*" >
< frame src="halaman_a.html" >
< frameset cols="40%,*" >
< frame src="halaman_b.html" >
< frame src="halaman_b.html" >
< /frameset >
< /frameset >
< /html >

4. Mengenal borderless frame
-> memberi nilai 0 pada atribut border
< html >
< head >
< title > latihan frame < /title >
< /head >
< frameset cols="40%,*" border="0" >
< frame src="halaman_a.html" >
< frame src="halaman_b.htlml" >
< /frameset >
< /html >

5. Mengenal link dalam frame
nama file: frameku.html
< html >
< head >
< title > latihan frame < /title >
< /head >
< frameset cols="40%,*" >
< frame name="kiri" src="halaman _a.html" >
< frame name="kanan" src="halaman_b.htlml" >
< /frameset >
< /html >
nama file: halaman a.html
< html >
< head >
< title > halaman a < /title >
< /head >
< body >
< h1 > ini halaman a < /h1 >
< a href="halaman_b.html" target="kanan" > halaman b < /a > < br >
< a href="halaman_c.html" target="kanan" > halaman c < /a >
< /body >
< /html >

6. Mengenal iframe
nama file: ifarmeku.html
< body >
< h1 > mencoba iframe <l; /h1 >
< iframe src="halaman 1.html"
width="200"
height="100"
align="right" / >
< /body >
nama file: halaman 1.html
< body >
< h1 > ini halaman 1 < /h1 >
< /body >

Tidak ada komentar:

Posting Komentar