CHAPTER-4HTML-4(ditulis sebagai pemantik belajar mahasiswa Desain Website UNS)
A. Tujuan:
Mahasiswa mengetahui dasar HTML
B. Pokok Bahasan:
TABEL
C. Materi:
Anda menguasai table dan modifikasinya, pada dasarnya anda telah mengausai dasar
layout sebuah website.
1. TABEL
<TABLE>…</TABLE>
Untuk mendefinisikan pembuatan tabel
Propertis:
BORDER="value"mendefinisikan ketebalan border tabel
CELLPADDING="value"mendefinisikan jarak antar sel, defaultnya 1
CELLSPACING="value"mendefinisikan jarak antara table dengan isi/ content table, defaultnya 2
COLS="number of columns"mendefinisikan banyaknya kolom dalam tabel
WIDTH="value or percent"mendefinisikan lebar tabel
HEIGHT="value or percent"jika dibutuhkan, mendefinisikan tinggi tabel
ALIGN="left|right"mendefinisikan perataan table secara horizontal
VALIGN="top|bottom|center"mendefinisikan perataan table secara vertikal
BGCOLOR="#rrggbb|colour name"memberi warna background tabel
BORDERCOLOR="#rrggbb|colour name"mendefinisikan warna border tabel
BORDERCOLORLIGHT="#rrggbb|colour name"mendefinisikan warna terang dari border table, memberi kesan 3 dimensi
BORDERCOLORDARK="#rrggbb|colour name"mendefinisikan warna gelap dari border, memeberi kesan 3 dimensi
BACKGROUND="URL of image"memberi background gambar
CAPTION, Mendefinisikan judul tabel
2. <TR>…</TR>
membuat baris baru dalam tabel
3. <TH>…</TH>
membuat kepala table di tiap-tiap kolom
4. <TD>…</TD>
membuat sel baru dalam sebuah baris
5. Rowspan
Menggabungkan sejumlah sel menjadi satu secara hoizizontal
<..rowspan=”value”>
6. Colspan
Menggabungkan sejumlah sel menjadi satu secara vertikal
Note: Beberapa properis yang digunakan dalam table, dapat digunakan juga di
<TR>.<TH>, dan <TD> yaitu bordercolor, bordercolordark, bordercolorlight dan
bgcolor.
D. Praktikum:
1. Latihan16. Ketik script HTML berikut
<HTML><HEAD><TITLE> LaT 16 </TITLE></HEAD><BODY><TABLE border=5><!-- definisi tabel --><CAPTION> UNTUK JUDUL TABEL </CAPTION><!-- deskripsi judul tabel --><TR><TH> nama sel pertama </TH><TH> nama sel kedua </TH></TR><!-- akhir judul --><TR><TD> sel 1 kolom 1</TD><TD> sel 1 kolom 2</TD></TR><!-- akhir deskripsi sel pertama--><TR><TD> sel 2 kolom 1 </TD><TD> sel 2 kolom 2 </TD></TR><!-- akhir deskripsi sel kedua--></TABLE><!-- akhir deskripsi tabel -->
</BODY></HTML>
2. Simpan dalam folder anda dengan nama Latihan16.htm
3. Buka di browser, perhatikan hasil tampilannya
4. Di atas adalah semua default
5. Modifikasi script Latihan16, akan ditambahkan baris baru, namun selnya tidak
sebanyak baris sebelumnya
<HTML><HEAD><TITLE> LaT 17 </TITLE></HEAD><BODY><TABLE><CAPTION> UNTUK JUDUL TABEL </CAPTION><TR><TH> Minuman </TH><TH> Makanan </TH></TR><TR><TD> Air Bening</TD><TD> Gado-Gado, Solo </TD></TR><TR>
<TD> Air Tidak Bening </TD><TD> Lotek, Yogya </TD></TR><TR><TD>Air Putih</TD></TR></TABLE></BODY></HTML>
6. Simpan dalam Latihan17.html.
7. Browse, perhatikan hasilnya
8. Modifikasi lagi dengan menggunakan celpadding dan cellspacing
<HTML><HEAD><TITLE> LaT 18 </TITLE></HEAD><BODY><TABLE border=1 cellpadding=5 celspacing=5><CAPTION> UNTUK JUDUL TABEL </CAPTION><TR><TH> Minuman </TH><TH> Makanan </TH></TR></TR><TR>
<TD> Air Bening</TD><TD> Gado-Gado, Solo </TD></TR><TR><TD> Air Tidak Bening </TD><TD> Lotek, Yogya </TD></TR><TR><TD>Air Putih</TD></TR></TABLE></BODY></HTML>
9. Simpan dengan Latihan18.html. Browse, berikut tampilannya
10. Perhatikan jarak tulisan dengan sisi table lebih menjauh dan jarak antar sel
melebar.
11. Modifikasi dengan membuat warna untuk tabel
<HTML><HEAD><TITLE> Lat 19 </TITLE></HEAD><BODY><TABLE border=2 cellpadding=5 celspacing=5 bordercolor=”blue”>
12. Simpan, dan browse
13. Jika borderdark dan borderlightnya digunakan (walau jarang
digunakan),beberapa browser tidak mendukungnya seperti Netscape tidak
dapat menampilkannya, modifikasi…
<HTML><HEAD><TITLE> Lat 20 </TITLE></HEAD><BODY><TABLE border=2 cellpadding=5 celspacing=5 bordercolor=”red” bordercolorlight=”white” bgcolor=”pink”>
14. Simpan, dan browse
15. Coba sekarang atribut yang dimiliki oleh table digunakan untuk sel atau row
16. Modifikasi …
<HTML><HEAD><TITLE> Lat 21 </TITLE>
</HEAD><BODY><TABLE border=1><CAPTION> UNTUK JUDUL TABEL </CAPTION><TR bgcolor=”red”><TH> Minuman </TH><TH> Makanan </TH></TR><TR><TD bordercolor=”yellow”> Air Bening</TD><TD bgcolor=”yellow”> Gado-Gado, Solo </TD></TR><TR><TD bgcolor=”yellow”> Air Tidak Bening </TD><TD bordercolor=”yellow”> Lotek, Yogya </TD></TR><TR><TD bordercolor=”yellow”>Air Putih</TD></TR></TABLE></BODY></HTML>
17. Simpan dan browse
18. Modifikasi untuk mengatur ukuran table atau sel
<HTML><HEAD><TITLE> Lat 22 </TITLE>
</HEAD><BODY><TABLE width=”80%”><CAPTION> UNTUK JUDUL TABEL </CAPTION><TR bgcolor=”red”><TH width=”50%”> Minuman </TH><TH> Makanan </TH></TR><TR><TD bordercolor=”yellow”> Air Bening</TD><TD bgcolor=”yellow”> Gado-Gado, Solo </TD></TR><TR><TD bgcolor=”yellow”> Air Tidak Bening </TD><TD bordercolor=”yellow”> Lotek, Yogya </TD></TR><TR><TD bordercolor=”yellow”>Air Putih</TD></TR></TABLE></BODY></HTML>
19. Simpan dan browse
20. Perhatikan otomatis, baris dan sel yang lain mengikuti dan secara default table
akan ditempatkan di kiri browser.
21. Selanjutnya coba gunakan properties perataan table dan contentnya.
Modifikasi…
<HTML>
<HEAD><TITLE> Lat 23 </TITLE></HEAD><BODY><TABLE border=10 cellspacing=5 cellpadding=1 width=80% align=center height=50%><CAPTION> <b> <h2>UNTUK JUDUL</h2></b><CAPTION><TR><TD ALIGN="left" VALIGN="top">kiri atas</TD><TD ALIGN="center" VALIGN="middle">tengah tengah</TD><TD ALIGN="right" VALIGN="bottom">kanan bawah</TD></TR><TR><TD ALIGN="left" VALIGN="bottom">kiri bawah</TD><TD ALIGN="center" VALIGN="top">tengah atas</TD><TD ALIGN="right" VALIGN="middle">kanan tengah</TD></TR><TR ALIGN="left" VALIGN="top"><TD>Sama, kiri atas</TD><TD> Sama, kiri atas </TD><TD> Sama, kiri atas </TD></TR></TABLE></BODY></HTML>
22. Simpan, browse
23. Next, modifikasi sel. Penggabungan sel. Modifikasi latihan 23
<TR ALIGN="left" VALIGN="top"><TD>Baris 3 Kolom 1</TD><TD colspan="2">Gabung Kolom 2,3</TD></TR><TR ALIGN="right" VALIGN="bottom"><TD colspan="2">Gabung Kolom 1,2</TD><TD>Baris 4 Kolom 2</TD></TR></TABLE></BODY></HTML>
24. Simpan dan browse
25. Perhatikan, dengan colspan sel akan digabung dengan direction horizontal,
modifikasi lagi dengan rowspan. Modifikasi lagi…
<TR ALIGN="left" VALIGN="top"><TD>Baris 3 Kolom 1</TD><TD>Baris 3 Kolom 2</TD><TD rowspan="2">Gabung baris 1,2</TD></TR><TR ALIGN="right" VALIGN="bottom"><TD>Baris 4 Kolom 1</TD><TD>Baris 4 Kolom 2</TD></TR>
26. Simpan dan browse
27. Satu lagi, modifikasi sel dalam table, modifikasi Latihan 25
<HTML><HEAD><TITLE> Lat 26 </TITLE></HEAD><BODY><TABLE border="5" bgcolor="pink" cellspacing=5 cellpadding=1 width=100% height=50%><CAPTION> <b> <h2>UNTUK JUDUL</h2></b><CAPTION><TR><TD ALIGN="left" VALIGN="top" bgcolor="yellow">Baris 1 Kolom 1</TD><TD ALIGN="center" VALIGN="middle">Baris 1 Kolom 2</TD><TD ALIGN="right" VALIGN="bottom">Baris 1 Kolom 3</TD>
</TR><TR><TD ALIGN="left" VALIGN="bottom">Baris 2 Kolom 1</TD><TD ALIGN="center" VALIGN="top">Baris 2 Kolom 2</TD><TD ALIGN="right" VALIGN="middle">Baris 2 Kolom 3</TD></TR><TR ALIGN="left" VALIGN="top"><TD>Baris 3 Kolom 1</TD><TD>Baris 3 Kolom 2</TD><TD rowspan="2" bgcolor="lavender">Gabung baris 1,2</TD></TR><TR ALIGN="right" VALIGN="bottom"><TD>Baris 4 Kolom 1</TD><TD>Baris 4 Kolom 2</TD></TR></TABLE></BODY></HTML>
28. Simpan, dan browse
29. Modifikasi tabelnya lagi
<TABLE border="2" bordercolor="red" bgcolor="pink" cellspacing=5 cellpadding=1 width=100% height=50%>
30. Simpan, browse
E. Tugas Mandiri:
Buat script html untuk hasil sbb:
Note: Mungkin sedikit menjemukan dibandingkan menggunakan editor instant atau drag and
drop tool, tapi kelebihannya anda semakin paham HTML kan? Sederhana.