PRAKTIKUM PERTEMUAN 1 - aminari.files.wordpress.com fileD. Praktikum: 1. Latihan16. Ketik script HTML ... 10.Perhatikan jarak tulisan dengan sisi table lebih menjauh dan jarak antar

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><CAPTION> UNTUK JUDUL TABEL </CAPTION><TR><TH> nama sel pertama </TH><TH> nama sel kedua </TH></TR><TR><TD> sel 1 kolom 1</TD><TD> sel 1 kolom 2</TD></TR><TR><TD> sel 2 kolom 1 </TD><TD> sel 2 kolom 2 </TD></TR></TABLE>

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


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>


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>


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>


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>


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.

PRAKTIKUM PERTEMUAN 1 - aminari.files.wordpress.com fileD. Praktikum: 1. Latihan16. Ketik script HTML ... 10.Perhatikan jarak tulisan dengan sisi table lebih menjauh dan jarak antar

Documents