Praktek 2 Table Dan List

Information Technology Pemrograman Web Dinamis

Page 1

LAPORAN PEMROGAMAN WEB

JOB 2

” TABLE & LIST ”

Disusun oleh :

Nama anda

IK 2?

NIM anda

PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN TEKNIK ELEKTRO

POLITEKNIK NEGERI SEMARANG

2012


Page 2

TABLE & LIST

I. Tujuan Instruksional Khusus

1. Memahami dan menuliskan tag table pada dokumen HTML.

2. Memahami dan menuliskan tag list pada dokumen HTML.

II. Teori Pendahuluan

2.1 Table

Element TABLE befungsi untuk membuat suatu data multidimensi yang terdiri atas

kolom dan baris. Element ini mempunyai attribute seperti align, bgcolor, border,

cellpadding(jarak antara tepi sel dengan isi sel), cellspacing(jarak antara sel), width(lebar

tabel), height(tinggi tabel). Element TABLE berisikan element CAPTION, TH, TR dan TD.

<TABLE> ….. </TABLE>

Atribut :

align – Mendefinisikan perataan (align) tabel yaitu yaitu perataan kiri (left), tengah (center) atau kanan (right).

bgcolor – Mendefinisikan warna latar belakang border – Mendefinisikan ukuran garis tepi (border) dalam satuan pixels. cellpadding – Mendefinisikan spasi cellspacing – Mendefinisikan spasi antara dua cells dalam satuan pixels. width – Mendefinisikan ukuran tabel dalam pixels atau persentase.

contoh :

<TABLE align=”center” bgcolor=”blue” border=”2″ cellpadding=”5″ cellspacing=”2″ width=”90%”>

ELEMEN CAPTION

Element CAPTION berfungsi untuk membuat judul dari tabel. Element ini harus berada di

dalam element TABLE dan mempunyai attribute align dengan nilai top(judul terletak di atas

tabel), dan bottom(judul terletak di bawah tabel).

Sintaks:

<caption align="top"|"bottom">

..........................


Page 3

</caption>

ELEMEN TR (Table Row)

Element TR mendefinisikan baris pada tabel dan element ini harus berada di dalam element

TABLE. Pada element TR terdapat element TH dan TD. Attribute yang terdapat pada

element ini adalah align, valign(posisi vertikal), dan bgcolor.

Sintaks:

<tr

align="left"|"center"|"right"

valign="top"|"middle"|"bottom"

bgcolor="color">

..........................

</tr>

<TR> ….. </TR>, untuk menentukan baris (table row)

Atribut :

align – Mendefinisikan perataan (align) tabel yaitu yaitu perataan kiri(left), tengah (center) atau kanan (right)

bgcolor – Mendefinisikan warna latar belakang pada baris (rows) valign – Mendefinisikan perataan vertikal pada isi dari rows, yaitu

perataan top, middle atau bottom.

Contoh :

<TR align=”right” bgcolor=”red” valign=top>

ELEMEN TH (Table Header) dan TD (Table Data)

Element TH dan TD merupakan informasi pada tabel. TH mendefinisikan isi sel sebagai

header sel pada kolom tabel dan datanya tercetak tebal dan dengan posisi ditengah sel.

Element TH dan TD ini harus terletak di dalam element TR. Attribute kedua element ini

adalah align, valign, bgcolor, colspan, rowspan

Sintaks:

<th



Page 4


bgcolor="color"

colspan="number"

rowspan="number">

..........................

</th>

<td



bgcolor="color"

colspan="number"

rowspan="number">

..........................

</td>

<TD> …… </TD>, untuk menampilkan data pada setiap sel tabel (tabledata)

Atribut :

align – Mendefinisikan perataan (align) tabel yaitu yaitu perataan kiri (left), tengah (center) atau kanan (right).

background – Meletakkan image pada latar belakang tabel. bgcolor – Mendefinisikan warna latar belakang colspan - height – Mendefinisikan tinggi cells dalam pixels nowrap - rowspan - valign – Perataan vertikal yaitu perataan pada top, middle atau bottom. width – Mendefinisikan ukuran tabel dalam pixels atau persentase.

Contoh :

<TD align=”right” background=”back.gif” bgcolor=”green” colspan=”3″height=”200″ nowrap rowspan=”2″ valign=”bottom” width=”300″>

Struktur tag ini adalah sebagai berikut :

<TABLE><TR><TD> data baris 1 kolom 1 </TD><TD> data baris 1 kolom 2 </TD></TR><TR><TD> data baris 2 kolom 1 </TD><TD> data baris 2 kolom 2 </TD></TR></TABLE>


Page 5

data baris 1 kolom 1 data baris 1 kolom 2

data baris 2 kolom 1 data baris 2 kolom 2

2.2 List

Memo Hari IniYang harus dilakukan :

Bayar tagihan listrik Nganterin Ayah ke bandara Beli lampu neon buat di taman Ambil cucian di laundry Nelpon Mirza

Diatas adalah contoh dari daftar atau list yang dapat dibuat di HTML. List tersebut dapat dibuat dengan mudah menggunakan tag yang sesuai yaitu tag <ul>, <ol>, dan <li>.

Dalam membuat suatu list maka sebaiknya dipikirkan terlebih dahulu, apakah list yang akan dibuat itu harus berurutan atau tidak. Jika jawabannya adalah berurutan maka sebaiknya memakai tag <ol>, namun apabila list yang akan dibuat tidak harus berurutan seperti contoh diatas maka sebaiknya memakai tag <ul>. Tag <li> digunakan untuk membuat detail dari list tersebut.

Tag <ol> adalah kependekan dari Ordered List, yang artinya list secara berurutan. List yang ditampilkan nanti oleh tag ini akan menampilkan nomor disebelah kiri dari detail. Lihat contoh dibawah ini:

Memo Hari IniYang harus dilakukan :

1. Nelpon Mirza2. Bayar tagihan listrik3. Ambil cucian di laundry4. Nganterin Ayah ke bandara5. Beli lampu neon buat di taman

Contoh diatas adalah versi berurutan dari memo yang ditulis pada contoh sebelumnya.Perhatikan bahwa sekarang list yang ada menggunakan nomor urut untuk menentukan prioritas yang harus dikerjakan. Nomor urut ini tampil karena ia menggunakan tag <ol>. Inilah perintah HTML untuk menampilkan list tersebut.

<ol> <li>Nelpon Mirza</li>

<li>Bayar tagihan listrik</li> <li>Ambil cucian di laundry</li>

<li>Nganterin Ayah ke bandara</li> <li>Beli lampu neon buat di taman</li>

</ol>


Page 6

Dapat dilihat disini penggunaan <ol> dan <li> , dimana <ol> digunakan untuk memberi petunjuk kepada browser bahwa list yang ditampilkan harus menggunakan nomor urut, dan <li> digunakan untuk membuat detail dari list. Contoh penggunaan Unordered List, atau list secara tidak berurut, persis seperti pada contoh pertama. Perintahnya sama dengan Ordered List namun tag <ol> diganti dengan <ul>. Lihat contoh berikut:

<ul> <li>Bayar tagihan listrik</li>

<li>Nganterin Ayah ke bandara</li> <li>Beli lampu neon buat di taman</li>

<li>Ambil cucian di laundry</li> <li>Nelpon Mirza</li>

</ul>

Ada satu lagi jenis list dalam HTML namun pemakaiannya sangat jarang sekali di luar sana. List itu adalah Definition List. List ini digunakan untuk menampilkan suatu daftar istilah-istilah berikut penjelasannya. Contohnya adalah seperti ini:

ObengPerkakas yang digunakan untuk memutar suatu skrup

Stop KontakSuatu panel yang digunakan sebagai sumber listrik

MurPasangannya baut, digunakan untuk menjepit sesuatu, bagian laki-lakinya

BautPasangannya Mur, digunakan untuk menjepit sesuatu, bagian perempuannya

Perhatikan bahwa tiap istilah berada di sebelah kiri dan penjelasannya berada di bawahnya dengan agak menjorok ke kanan. Inilah yang disebut dengan Definition List. Untuk membuatnya akan dibutuhkan,

<dl> untuk membuat suatu Definition List <dt> untuk menampilkan suatu istilah, kependekan dari Definition Term <dd> untuk menampilkan penjelasan dari istilah sebelumnya, kependekan dari

Definition Description

Penggunaan dari tag-tag diatas adalah seperti ini:

<dl> <dt>Obeng</dt> <dd>Perkakas yang digunakan untuk memutar suatu skrup</dd> <dt>Stop Kontak</dt> <dd>Suatu panel yang digunakan sebagai sumber listrik</dd> <dt>Mur</dt> <dd>Pasangannya baut, digunakan untuk menjepit sesuatu, bagian laki-lakinya</dd> <dt>Baut</dt> <dd>Pasangannya Mur, digunakan untuk menjepit sesuatu, bagian perempuannya</dd>

</dl>


Page 7

III. Peralatan dan Bahan

1. PC Processor minimal Pentium IV, RAM minimal 512 MB

2. Editor Web Notepad atau Edit Plus

3. Browser Mozilla, IE, dll

IV. Langkah Kerja/Percobaan

1. Hidupkan computer

2. Buat folder Web1Praktek2 pada direktori : D:\

3. Buka Edit Plus atau NotePad untuk menuliskan kode program HTML.

4. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 1):

Gambar 1 Tag Table

5. Simpan dengan nama file: Praktek2-1-Table.html

6. Test hasilnya menggunakan browser .

7. Ambil gambar dari hasil kode program Praktek2-1-Table.html dan masukkan

dalam lembar kerja.

8. Ulangilangkahkerja no 1-4 untuk melakukan praktek selanjutnya, namun pada

point 4, kode programnya sebagai berikut :

<html> <head> <title>

Praktek2-1-Table ASTRI </title> </head><table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table></html>


Page 8

Gambar 2 Table & Border Attribute

9. Simpan dengan nama file: Praktek2-2-Table&BorderAttribute.html.


11. Ambil gambar dari hasil kode program Praktek2-2-

Table&BorderAttribute.html. dan masukkan dalam lembar kerja.


Gambar 3 Headers

13. Simpan dengan nama file: Praktek2-3-Headers.html.


15. Ambil gambar dari hasil kode program Praktek2-3-Headers.html dan masukkan

dalam lembar kerja.



Praktek2-3-Table Headers ASTRI </title> </head><table border="1"><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table></html>


Praktek2-2-Table & Border Attribute ASTRI </title> </head><table border="5"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table></html>


Page 9

Gambar 4 Table Without Borders

17. Simpan dengan nama file: Praktek2-4-TableWithoutBorders.html.


19. Ambil gambar dari hasil kode program Praktek2-4-TableWithoutBorders.html

dan masukkan dalam lembarkerja.



Praktek2-4-Table Without borders ASTRI </title> </head><body><h4>This table has no borders:</h4><table><tr> <td>100</td> <td>200</td> <td>300</td></tr>

<tr> <td>400</td> <td>500</td> <td>600</td></tr></table>

<h4>And this table has no borders:</h4><table border="0"><tr> <td>100</td> <td>200</td> <td>300</td></tr>

<tr> <td>400</td> <td>500</td> <td>600</td></tr></table>

</body></html>


Page 10

Gambar 5 Table Headers

21. Simpan dengan nama file: Praktek2-5-TableWithoutHeaders.html.


23. Ambil gambar dari hasil kode program Praktek2-5-TableWithoutHeaders.html

dan masukkan dalam lembar kerja.



Praktek2-5-Table Headers ASTRI </title> </head><body><h4>Table headers:</h4><table border="1"><tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th></tr>

<tr> <td>Nurul Fajrina Astri</td> <td>085640098073</td> <td>082133526266</td></tr></table>

<h4>Vertical Headers:</h4><table border="1"><tr> <th>First Name:</th> <th>Nurul Fajrina</th></tr>

<tr> <th>Telephone:</th> <td>085640098073</td></tr></table>

</body></html>


Page 11

Gambar 6 Table With a Caption

25. Simpan dengan nama file: Praktek2-6-TableWithaCaption.html.


27. Ambil gambardari hasil kode program Praktek2-6-TableWithaCaption.html

dan masukkan dalam lemba rkerja.



Praktek2-6-Table With a Caption ASTRI </title> </head><body><table border="1"> <caption>Monthly savings</caption> <tr>

<th>Month</th><th>Savings</th>

</tr> <tr>

<td>January</td><td>$100</td>

</tr> <tr>

<td>February</td><td>$50</td>

</tr></table>

</body></html>


Page 12

Gambar7 TableMoreThanOneRow-Coloumn

29. Simpan dengan nama file: Praktek2-7-TableMoreThanOneRow-

Coloumn.html.


31. Ambil gambar dari hasil kode program Praktek2-7-TableMoreThanOneRow-

Coloumn.html dan masukkan dalam lembar kerja.



Praktek2-7-TableCellMoreThanOneRow-Coloumn ASTRI </title> </head><body>

<h4>Cell that spans two columns:</h4><table border="1"><tr> <th>Name</th> <th colspan="2">Telephone</th></tr>

<tr> <td>Nurul Fajrina Astri</td> <td>085640098073</td> <td>082133526266</td></tr></table>

<h4>Cell that spans two rows:</h4><table border="1"><tr> <th>First Name:</th> <td>Nurul Fajrina</td></tr>

<tr> <th rowspan="2">Telephone:</th> <td>085640098073</td></tr><tr> <td>082133526266</td></tr></table>

</body></html>


Page 13

Gambar 8 Inside a Table

33. Simpan dengan nama file: Praktek2-8-Inside a Table.html.


35. Ambil gambar dari hasil kode program Praktek2-8-Inside a Table.html dan

masukkan dalam lembar kerja.



Praktek2-8-Inside a Table ASTRI </title> </head><body>

<table border="1"><tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>Table cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td></tr>

<tr> <td>This cell contains a list <ul> <li>apples</li> <li>bananas</li>

<li>pineapples</li> </ul> </td> <td>HELLO</td></tr></table>

</body></html>


Page 14

Gambar 9 CellPadding

37. Simpan dengan nama file: Praktek2-9-CellPadding.html.


39. Ambil gambar dari hasil kode program Praktek2-9-CellPadding.html dan




Praktek2-9-Cell Padding ASTRI </title> </head><body>

<h4>Without cell padding:</h4><table border="1"><tr> <td>First</td> <td>Row</td></tr></table>

<h4>With cell padding:</h4><table border="1" cellpadding="10"><tr> <td>First</td> <td>Row</td></tr><tr> <td>Second</td>

<td>Row</td></tr></table>

</body></html>


Page 15

Gambar 10 CellSpacing

41. Simpan dengan nama file: Praktek2-10-CellSpacing.html.


43. Ambil gambar dari hasil kode program Praktek2-10-CellSpacing.html dan

masukkan dalamlembar kerja.



Praktek2-10-Cell Spacing ASTRI </title> </head><body>

<h4>Without cell spacing:</h4><table border="1"><tr> <td>First</td> <td>Row</td></tr><tr> <td>Second</td> <td>Row</td></tr></table>

<h4>With cell spacing:</h4><table border="1" cellspacing="10"><tr> <td>First</td> <td>Row</td></tr><tr> <td>Second</td> <td>Row</td></tr></table>

</body></html>


Page 16


Praktek2-11-The Frame Attribute ASTRI </title> </head><body><p><b>Note:</b>If you see no frames/borders around the tables below, your browser does not support the "frame" attribute.</p><h4>With frame="border":</h4><table frame="border"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table><h4>With frame="box":</h4><table frame="box"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table><h4>With frame="void":</h4><table frame="void"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td>

<td>Row</td></tr></table><h4>With frame="above":</h4><table frame="above"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table>


Page 17

Gambar 11 TheFrameAttribute

<h4>With frame="below":</h4><table frame="below"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table><h4>With frame="horizontal sides":</h4><table frame="hsides"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table><h4>With frame="vertical sides":</h4><table frame="vsides"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table><h4>With frame="left side":</h4><table frame="lhs"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table><h4>With frame="right side":</h4><table frame="rhs"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table></body></html>


Page 18

45. Simpan dengan nama file: Praktek2-11-TheFrameAttribute.html.


47. Ambil gambar dari hasil kode program Praktek2-11-TheFrameAttribute.html



Gambar 12 Unordered List

49. Simpan dengan nama file: Praktek2-12-UnorderedList.html.


51. Ambil gambar dari hasil kode program Praktek2-12-UnorderedList.html dan



Gambar 13 Ordered List

53. Simpan dengan nama file: Praktek2-13-OrderedList.html



Praktek2-13-Ordered List ASTRI </title> </head><body>

<ol><li>Coffe</li><li>Milk</li></ol>

</body></html>


Praktek2-12-Unordered List ASTRI </title> </head><body>

<ul><li>Coffe</li><li>Milk</li></ul>

</body></html>


Page 19

55. Ambil gambar dari hasil kode program Praktek2-13-OrderedList.html dan



Gambar 14 Definition List

57. Simpan dengan nama file: Praktek2-14-DefinitionList.html.


59. Ambil gambar dari hasil kode program Praktek2-14-DefinitionList.html dan




Praktek2-14-Definition List ASTRI </title> </head><body>

<dl><dt>Coffe</dt><dd>-black hot drink-</dd><dt>Milk</dt><dd>-white cold drink</dd></dl>

</body></html>


Page 20

Gambar 15 Different Oredered List

61. Simpan dengan nama file: Praktek2-15-DifferentOrderedList.html.



Praktek2-15-Different Ordered List ASTRI </title> </head><body>

<h4>Numbered List:</h4><ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ol>

<h4>Letters List:</h4><ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ol>

<h4>Lowercase Letters List:</h4><ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ol>

<h4>Roman Numbers List:</h4><ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ol>

<h4>Lowercase Roman Numbers List:</h4><ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ol>

</body></html>


Page 21

63. Ambil gambar dari hasil kode program Praktek2-15-DifferentOrderedList.html



Gambar 16 Different Unordered List

65. Simpan dengan nama file: Praktek2-16- DifferentUnorderedList.html


67. Ambil gambar dari hasil kode program Praktek2-16-

DifferentUnorderedList.html dan masukkan dalam lembar kerja.



Praktek2-16-Different Unordered List ASTRI </title> </head><body>

<h4>Disc bullets list:</h4><ul type="disc"> <li>Apples</li> <li>Bananas</li> <li>Lmeons</li> <li>Oranges</li></ul>

<h4>Circle bullets list:</h4><ul type="circle"> <li>Apples</li> <li>Bananas</li> <li>Lmeons</li> <li>Oranges</li></ul>

<h4>Square bullets list:</h4><ul type="square"> <li>Apples</li> <li>Bananas</li> <li>Lmeons</li> <li>Oranges</li></ul>

</body></html>


Page 22

Gambar 17 Nested List

69. Simpan dengan nama file: Praktek2-17-NestedList.html.


71. Ambil gambar dari hasil kode program Praktek2-17-NestedList.html dan




Praktek2-17-Nested List ASTRI </title> </head><body>

<h4>A nested List:</h4><ul> <li>Coffe</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li></ul>

</body></html>


Page 23

Gambar 18 Nested List2

73. Simpan dengan nama file: Praktek2-18-NestedList2.html


75. Ambil gambar dari hasil kode program Praktek2-18-NestedList2.html

76. dan masukkan dalam lembar kerja.



Praktek2-18-Nested List2 ASTRI </title> </head><body>

<h4>A nested List:</h4><ul> <li>Coffe</li> <li>Tea <ul> <li>Black Tea</li> <li>Green Tea</li> <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li></ul>

</body></html>


Page 24

Gambar 19 Definition List2

78. Simpan dengan nama file: Praktek2-19-DefinitionList2.html.


80. Ambil gambar dari hasil kode program Praktek2-19-DefinitionList2.html dan



Praktek2-19-Definition List2 ASTRI </title> </head><body>

<h4>A Definition List:</h4><dl> <dt>Coffe</dt> <dd>Black Hot Drink</dd> <dt>Milk</dt> <dd>White Cold Drink</dd></dl>

</body></html>


Page 25

V. Lembar Kerja

No Praktik Hasil Program Komentar

1 Praktek2-1-

Table.html

2 Praktek2-2-

Table &

Border

Attribute.html

3 Praktek2-3-

Table

Headers.html

4 Praktek2-4-

Table Without

Border.html

5 Praktek2-5-

Table

Headers.html

6 Praktek2-6-

Table With a

Caption.html

7 Praktek2-7-

Table More

Than One

Row-

Coloumn.html

8 Praktek2-8-

Inside a

Table.html

9 Praktek2-9-

Cell

Padding.html


Page 26

10 Praktek2-10-

Cell

Spacing.html

VI. Tugas/Pertanyaan

Buatlah daftar keluarga anda dilengkapi dengan keterangan nama, tempat

tanggal lahir, pekerjaan, status. Berilah warna dan pengaturan lay out data yang

sesuai. Contoh tabelnya adalah sebagai berikut:

Tabel 1. Data Keluarga nama anda

NoData Pribadi

Nama Tempat Tanggal Lahir Pekerjaan Status

VII. Kesimpulan

Praktek 2 Table Dan List

Documents

element tr terdapat

td table dataelement

elemen th table header

th mendefinisikan isi

latar belakang tabel

valign perataan vertikal

untuk menampilkan data

perataan kiri left