Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
HTML (Lanjut)
2
TABEL Fungsi: Menampilkan informasi secara terstruktur, ringkas dan mudah dibaca Mengatur tampilan homepage agar lebih menarik
3
Tag yang diperlukan: <Table>
Atributnya :
4
Membuat tabel sederhana:
Tag yang diperlukan: Membuat baris: <tr> (table row) Membuat kolom: <td> (table data) Contoh: <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> Tampilan:
5
Menambahkan judul tabel:
Judul tabel: <caption> Judul baris/kolom: <th> (table header) Contoh: <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> </td><td>Amin A. Angkasa</td></tr> <tr><td>2</td><td> </td><td>Beni B. Bernardi</td></tr> </table> Tampilan:
6
Mengatur lebar dan tinggi suatu tabel:
Atribut: weight dan height Nilai: ukuran % (max 100%) ukuran pixel Contoh: <table border="1" width=“50%”> <caption align="top"> <b> DAFTAR MAHASISWA </b> </caption> <tr><th>No</th> <th>NPM</th> <th>Nama</th></tr> <tr><td width=“20”>1.</td> <td width=“80” height=“50”> </td> <td width=“180” height=“50”>Amin A. Angkasa</td></tr> <tr><td width=“20”>2.</td> <td width=“80” height=70> </td> <td width=“180” height=70>Beni B. Bernardi</td></tr> </table>
7
Perataan dalam tabel: horisontal: atribut align utk <caption>, <tr>, <td> dan <th> vertikal: atribut valign utk <tr>, <td> dan <th> Contoh: <table border="1" align="center"> <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"> </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"> </td> <td align="left" valign="bottom" width="180" height="70">Beni B. Bernardi</td></tr> </table>
8
Membuat warna pada tabel:
Atribut: bgcolor 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"> </td> 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"> </td> <td bgcolor="green" align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td></tr> </table> </body>
9
Penggabungan baris/kolom:
Menggabungkan bbrp kolom menjadi 1: atribut colspan Menggabungkan bbrp baris menjadi 1: atribut rowspan Contoh Tampilan:
10
Script HTML: <table border="1" bgcolor="white" align="center">
<caption align="top"> <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> <tr><td align="center" width="20">1.</td> <td align="left" valign="middle" width="80" height="40"> </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 width="20">2.</td> <td align="left" valign="middle" width="80" height="40"> </td> <td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td> </table>
11
Cellpading dan cellspacing:
atribut cellpading: mengatur spasi antara border dengan tulisan atribut cellspasing: mengatur spasi antar 2 buah sel Contoh Tampilan:
12
Script HTML: <table border="1" bgcolor="white" align="center“ cellpadding="10" cellspacing="12"> <caption align="top"> <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> <tr><td align="center" width="20">1.</td> <td align="left" valign="middle" width="80" height="40"> </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 width="20">2.</td> <td align="left" valign="middle" width="80" height="40"> </td> <td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td> </table>
13
FRAME Fungsi: Menampilkan beberapa dokumen HTML secara sekaligus dalam satu jendela web browser.
14
Standar penulisan: <frameset [cols=“%,%” [rows=“%,%”]> </frameset> Atribut-atribut:
![Standar penulisan: <frameset [cols= %,% [rows= %,% ]> </frameset> Atribut-atribut:](http://slideplayer.info/slide/3673264/12/images/14/Standar+penulisan%3A+%3Cframeset+%5Bcols%3D+%25%2C%25+%5Brows%3D+%25%2C%25+%5D%3E+%3C%2Fframeset%3E+Atribut-atribut%3A.jpg "Standar penulisan: <frameset [cols= %,% [rows= %,% ]> </frameset> Atribut-atribut:")
15
Frame Vertikal Contoh: <html> <head> <title>
Membuat Frame Vertikal </title> </head> <frameset cols="25%,*"> <frame name="kiri" src="kiri.html" scrolling="no"> <frame name="kanan“ src="kanan.html"> </frameset> </html>
16
Frame Horisontal Contoh: <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>
17
Gabungan Frame Vertikal-Horisontal
Contoh: <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> </html>
19
Web Site Sederhana LATIHAN & TUGAS
Dengan menggunakan tabel buatlah tampilan seperti dibawah ini Web Site Sederhana Home Artikel Download About Disisni kita bisa meletakkan menu Silahkan menuliskan artikel disini © Hak Cipta 2010
Presentasi serupa
