LAPORAN PEMROGAMAN WEB JOB 2 TABLE & LIST

Information Technology Pemrograman Web Dinamis

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 1


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. …..
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 :

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:
align="top"|"bottom">

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

Page 2


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: ..........................

….. , 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 :

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:

, untuk menampilkan data pada setiap sel tabel (table data) 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 : baris 1 kolom 2

baris 2 kolom 1 baris 2 kolom 2

Page 4


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 Ini Yang 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
,
, dan
. 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
, namun apabila list yang akan dibuat tidak harus berurutan seperti contoh diatas maka sebaiknya memakai tag
. Tag
digunakan untuk membuat detail dari list tersebut. Tag
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 Ini Yang harus dilakukan : 1. 2. 3. 4. 5.

Nelpon Mirza Bayar tagihan listrik Ambil cucian di laundry Nganterin Ayah ke bandara 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
. Inilah perintah HTML untuk menampilkan list tersebut.

Nelpon Mirza

Bayar tagihan listrik

Ambil cucian di laundry

Nganterin Ayah ke bandara

Beli lampu neon buat di taman

Page 5


Dapat dilihat disini penggunaan
dan
, dimana
digunakan untuk memberi petunjuk kepada browser bahwa list yang ditampilkan harus menggunakan nomor urut, dan
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
diganti dengan
. Lihat contoh berikut:

Bayar tagihan listrik

Nganterin Ayah ke bandara

Beli lampu neon buat di taman

Ambil cucian di laundry

Nelpon Mirza

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 istilahistilah berikut penjelasannya. Contohnya adalah seperti ini: Obeng

Perkakas yang digunakan untuk memutar suatu skrup Stop Kontak Suatu panel yang digunakan sebagai sumber listrik Mur Pasangannya baut, digunakan untuk menjepit sesuatu, bagian laki-lakinya Baut Pasangannya 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,   

untuk membuat suatu Definition List
untuk menampilkan suatu istilah, kependekan dari Definition Term
untuk menampilkan penjelasan dari istilah sebelumnya, kependekan dari Definition Description

Penggunaan dari tag-tag diatas adalah seperti ini:

Obeng

Perkakas yang digunakan untuk memutar suatu skrup

Stop Kontak

Suatu panel yang digunakan sebagai sumber listrik

Mur

Pasangannya baut, digunakan untuk menjepit sesuatu, bagian lakilakinya

Baut

Pasangannya Mur, digunakan untuk menjepit sesuatu, bagian perempuannya

Page 6


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): Praktek2-1-Table ASTRI

Page 3


valign="top"|"middle"|"bottom" bgcolor="color" colspan="number" rowspan="number"> .......................... .......................... ……

Struktur tag ini adalah sebagai berikut :

data data

data data

baris 1 kolom 1

row 1, cell 1 row 1, cell 2


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 :

Page 7


Praktek2-2-Table & Border Attribute ASTRI

Row 1, cell 1 Row 1, cell 2

Gambar 2 Table & Border Attribute 9.

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

10.


11.

Ambil gambar dari hasil kode program Praktek2-2Table&BorderAttribute.html. dan masukkan dalam lembar kerja.

12.

Buka lembar kerja baru dan tuliskan kode program berikut (gambar 3): Praktek2-3-Table Headers ASTRI

Header 1 Header 2



Gambar 3 Headers 13.

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

14.


15.

Ambil gambar dari hasil kode program Praktek2-3-Headers.html dan masukkan dalam lembar kerja.

16.

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

Page 8


Praktek2-4-Table Without borders ASTRI
This table has no borders:

100 200 300

400 500 600

And this table has no borders:

100 200 300

400 500 600

Gambar 4 Table Without Borders 17.

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

18.


19.

Ambil gambar dari hasil kode program Praktek2-4-TableWithoutBorders.html dan masukkan dalam lembarkerja.

20.


Page 9


Praktek2-5-Table Headers ASTRI
Table headers:

Name Telephone Telephone

Nurul Fajrina Astri 085640098073 082133526266

Vertical Headers:

First Name: Nurul Fajrina

Telephone: 085640098073

Gambar 5 Table Headers

21.

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

22.


23.

Ambil gambar dari hasil kode program Praktek2-5-TableWithoutHeaders.html dan masukkan dalam lembar kerja.

24.


Page 10


Praktek2-6-Table With a Caption ASTRI
Monthly savings
Month Savings

January $100

February $50

Gambar 6 Table With a Caption 25.

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

26.


27.

Ambil gambardari hasil kode program Praktek2-6-TableWithaCaption.html dan masukkan dalam lemba rkerja.

28.


Page 11


Praktek2-7-TableCellMoreThanOneRow-Coloumn ASTRI
Cell that spans two columns:

Name Telephone

Nurul Fajrina Astri 085640098073 082133526266

Cell that spans two rows:

First Name: Nurul Fajrina

Telephone: 085640098073

082133526266

Gambar7 TableMoreThanOneRow-Coloumn 29.

Simpan dengan nama file: Praktek2-7-TableMoreThanOneRowColoumn.html.

30.


31.

Ambil gambar dari hasil kode program Praktek2-7-TableMoreThanOneRowColoumn.html dan masukkan dalam lembar kerja.

32.


Page 12


Praktek2-8-Inside a Table ASTRI

This is a paragraph

This is another paragraph
Table cell contains a table:

A B

C D

This cell contains a list

apples

bananas

pineapples

HELLO

Gambar 8 Inside a Table 33.

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

34.


35.

Ambil gambar dari hasil kode program Praktek2-8-Inside a Table.html dan masukkan dalam lembar kerja.

36.


Page 13


Praktek2-9-Cell Padding ASTRI
Without cell padding:

First Row

With cell padding:

First Row

Second Row

Gambar 9 CellPadding 37.

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

38.


39.

Ambil gambar dari hasil kode program Praktek2-9-CellPadding.html dan masukkan dalam lembar kerja.

40.


Page 14


Praktek2-10-Cell Spacing ASTRI
Without cell spacing:

First Row

Second Row

With cell spacing:

First Row

Second Row

Gambar 10 CellSpacing 41.

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

42.


43.

Ambil gambar dari hasil kode program Praktek2-10-CellSpacing.html dan masukkan dalamlembar kerja.

44.


Page 15


Praktek2-11-The Frame Attribute ASTRI
Note: If you see no frames/borders around the tables below, your browser does not support the "frame" attribute.

With frame="border":

First Row

Second Row

With frame="box":

First Row

Second Row

With frame="void":

First Row

Second Row

With frame="above":

First Row

Second Row

Page 16


With frame="below":

First Row

Second Row

With frame="horizontal sides":

First Row

Second Row

With frame="vertical sides":

First Row

Second Row

With frame="left side":

First Row

Second Row

With frame="right side":

First Row

Second Row

Gambar 11 TheFrameAttribute

Page 17


45.

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

46.


47.

Ambil gambar dari hasil kode program Praktek2-11-TheFrameAttribute.html dan masukkan dalam lembar kerja.

48.

Buka lembar kerja baru dan tuliskan kode program berikut (gambar 12): Praktek2-12-Unordered List ASTRI

Coffe

Milk

Gambar 12 Unordered List 49.

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

50.


51.

Ambil gambar dari hasil kode program Praktek2-12-UnorderedList.html dan masukkan dalam lembar kerja.

52.


Praktek2-13-Ordered List ASTRI

Coffe

Milk

Gambar 13 Ordered List 53.

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

54.

Test hasilnya menggunakan browser . Page 18


55.

Ambil gambar dari hasil kode program Praktek2-13-OrderedList.html dan masukkan dalam lembar kerja.

56.

Buka lembar kerja baru dan tuliskan kode program berikut (gambar 14): Praktek2-14-Definition List ASTRI

Coffe

-black hot drink-

Milk

-white cold drink

Gambar 14 Definition List 57.

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

58.


59.

Ambil gambar dari hasil kode program Praktek2-14-DefinitionList.html dan masukkan dalam lembar kerja.

60.


Page 19


Praktek2-15-Different Ordered List ASTRI
Numbered List:

Apples

Bananas

Lemons

Oranges

Letters List:

Apples

Bananas

Lemons

Oranges

Lowercase Letters List:

Apples

Bananas

Lemons

Oranges

Roman Numbers List:

Apples

Bananas

Lemons

Oranges

Lowercase Roman Numbers List:

Apples

Bananas

Lemons

Oranges

Gambar 15 Different Oredered List

61.

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

62.


Page 20


63.

Ambil gambar dari hasil kode program Praktek2-15-DifferentOrderedList.html dan masukkan dalam lembar kerja.

64.

Buka lembar kerja baru dan tuliskan kode program berikut (gambar 16): Praktek2-16-Different Unordered List ASTRI
Disc bullets list:

Apples

Bananas

Lmeons

Oranges

Circle bullets list:

Apples

Bananas

Lmeons

Oranges

Square bullets list:

Apples

Bananas

Lmeons

Oranges

Gambar 16 Different Unordered List 65.

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

66.


67.

Ambil gambar dari hasil kode program Praktek2-16DifferentUnorderedList.html dan masukkan dalam lembar kerja.

68.


Page 21


Praktek2-17-Nested List ASTRI
A nested List:

Coffe

Tea

Black tea

Green tea

Milk

Gambar 17 Nested List 69.

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

70.


71.

Ambil gambar dari hasil kode program Praktek2-17-NestedList.html dan masukkan dalam lembar kerja.

72.


Page 22


Praktek2-18-Nested List2 ASTRI
A nested List:

Coffe

Tea

Black Tea

Green Tea

China

Africa

Milk

Gambar 18 Nested List2 73.

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

74.


75.

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

76.

dan masukkan dalam lembar kerja.

77.


Page 23


Praktek2-19-Definition List2 ASTRI
A Definition List:

Coffe

Black Hot Drink

Milk

White Cold Drink

Gambar 19 Definition List2 78.

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

79.


80.

Ambil gambar dari hasil kode program Praktek2-19-DefinitionList2.html dan masukkan dalam lembar kerja.

Page 24


V. Lembar Kerja

No 1

Praktik

Hasil Program

Praktek2-1Table.html

2

Praktek2-2Table & Border Attribute.html

3

Praktek2-3Table Headers.html

4

Praktek2-4Table Without Border.html

5

Praktek2-5Table Headers.html

6

Praktek2-6Table With a Caption.html

7

Praktek2-7Table More Than One RowColoumn.html

8

Praktek2-8Inside a Table.html

9

Praktek2-9Cell Padding.html

Page 25

Komentar


10

Praktek2-10Cell 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 No

Data Pribadi Nama

Tempat Tanggal Lahir

VII. Kesimpulan

Page 26

Pekerjaan

Status

First Name:	Nurul Fajrina
Telephone:	085640098073
Telephone:	082133526266

LAPORAN PEMROGAMAN WEB JOB 2 TABLE & LIST

Recommend Documents

This table has no borders:

And this table has no borders:

Table headers:

Vertical Headers:

Cell that spans two columns:

Cell that spans two rows:

Without cell padding:

With cell padding:

Without cell spacing:

With cell spacing:

With frame="border":

With frame="box":

With frame="void":

With frame="above":

With frame="below":

With frame="horizontal sides":

With frame="vertical sides":

With frame="left side":

With frame="right side":

Numbered List:

Letters List:

Lowercase Letters List:

Roman Numbers List:

Lowercase Roman Numbers List:

Disc bullets list:

Circle bullets list:

Square bullets list:

A nested List:

A nested List:

A Definition List: