Slide 1

Pengenalan HTML - 2
Bullet Numbering dan Table
Matakuliah Pengenalan Internet
STMIK Palangkaraya
Oleh : Suparno
Email : [email protected]
Blog : www.digdoyo.com


Slide 2

Bullet Numbering–Daftar Urutan
Biasa digunakan untuk menampilkan teks
dalam bentuk berurutan dengan nomor atau
symbol.
Element-element yang digunakan :
• OL (Order List)
• UL (Unorder List)
• LI (List Item


Slide 3

Element dalam Bullet Numbering
• OL (Order List)
–
–
–
–

Untuk membuat daftar urut dgn nomor.
Memiliki attribute : Start, dan Type.
Attribute start utk memberi nilai awal nomor urut.
Attribute type memiliki value : A = abjad huruf besar,
a = abjad huruf kecil, I = abjad romawi besar, i = abjad
romawi kecil, 1 untuk angka desimal.
Syntax :

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


Slide 4

Element dalam Bullet Numbering
• UL (Unorder List)
– Untuk membuat daftar urut dgn symbol (bullet).
– Memiliki attribute : Type.
– Attribute type memiliki value : circle, square dan

disc
Syntax :

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


Slide 5

Element dalam Bullet Numbering
• LI (List Item)
– Untuk membuat isi dari daftar yang ditetapkan
dengan OL maupun UL.
– Harus berada di dalam element OL atau UL.
– Memiliki attribute : Type dengan value : A, a, I, i,
circle, square dan disc.
Syntax :

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


Slide 6

Contoh Penggunaan

Daftar Urut Dengan Nomor

Matakuliah Semester 1 Jurusan TI:

1. Pendidikan Agama


2. Pendidikan Pancasila


3. Pengenalan Internet


4. Konsep Teknologi Informasi


5. Organisasi Komputer


6. Sistem Operasi

Hasil Script


Slide 7

Tabel HTML
• Tabel digunakan untuk menyajikan data
multidimensi yang terdiri atas kolom dan
baris.
• Element yang digunakan dalam membuat
tabel :
– Element TABLE : utk mendefinisikan tabel
– Element TH (Table Header) : utk judul tabel
– Element TR (Table Row) : utk baris tabel
– Element TD (Table Data) : utk isi tabel


Slide 8

Tabel HTML
• Element TABLE mempunyai attribute :
– align : utk perataan, value left, center, right
– bgcolor : utk warna latar belakang tabel
– border : utk garis bingkai tabel, satuan pixel
– cellpadding : utk jarak antara tepi sel dengan isi
sel, satuan pixel
– cellspacing : jarak antar sel, satuan pixel
– width : lebar tabel, satuan pixel atau %
– height : tinggi tabel, satuan pixel atau %


Slide 9

Tabel HTML
Syntax Element Table :
border="pixel” cellpadding="pixel”
cellspacing="pixel” width="pixel"|"%”
height="pixel"|"%”>
........................



Slide 10

Tabel HTML
• Element TR untuk mendefinisikan baris tabel.
• Harus berada di dalam element TABLE
• Element ini mempunyai attribute :
– align : utk perataan (left, center, right)
– valign : utk perataan (top, middle, bottom)
– bgcolor : utk warna latar belakang tabel


Slide 11

Tabel HTML
• Syntax Element TR :

valign="top"|"middle"|"bottom” bgcolor="color">
..........................




Slide 12

Tabel HTML
• Element TH untuk memberikan judul kolom
tabel.
• Harus berada di dalam element TR.
• Element ini mempunyai attribute :
– align : utk perataan (left, center, right)
– valign : utk perataan (top, middle, bottom)
– bgcolor : utk warna latar belakang tabel
– colspan : utk lebar kolom merger
– rowspan : utk tinggi baris merger


Slide 13

Tabel HTML
• Element TD untuk menentukan isi sel tabel.
• Harus berada di dalam element TR.
• Element ini mempunyai attribute :
– align : utk perataan (left, center, right)
– valign : utk perataan (top, middle, bottom)
– bgcolor : utk warna latar belakang tabel
– colspan : utk lebar kolom merger
– rowspan : utk tinggi baris merger


Slide 14

Tabel HTML
• Syntax Element TH dan TD :

bgcolor="color” colspan="number” rowspan="number"> ..........................	bgcolor="color” colspan="number” rowspan="number"> ..........................


Slide 15

Contoh Penggunaan





cellspacing="0" >











Slide 16

Contoh Penggunaan

Daftar Peserta

No.

Nama

1.

Yasmin Nursanti

2.

Arofathur Ahmad

3.

Rahmat Nurkholis

Contoh Hasilnya


Slide 17

Bagaimana….?
• Ternyata HTML juga mudah ya…?
• Silahkan Anda Coba Praktikan di Rumah
dengan Masalah yang lainnya…!
• Terima kasih…