Matakuliah Pengenalan Internet STMIK Palangkaraya Oleh : Suparno Blog : Pengenalan HTML - 2 Bullet Numbering.

Presentasi berjudul: "Matakuliah Pengenalan Internet STMIK Palangkaraya Oleh : Suparno Blog : Pengenalan HTML - 2 Bullet Numbering."— Transcript presentasi:

1 Matakuliah Pengenalan Internet STMIK Palangkaraya Oleh : Suparno Email : endustong@yahoo.com Blog : www.digdoyo.com Pengenalan HTML - 2 Bullet Numbering dan Table

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

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

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

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

6 Contoh Penggunaan Membuat Daftar Urutan Daftar Urut Dengan Nomor Matakuliah Semester 1 Jurusan TI: Pendidikan Agama Pendidikan Pancasila Pengenalan Internet Konsep Teknologi Informasi Organisasi Komputer Sistem Operasi Hasil Script

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

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 %

9 Tabel HTML Syntax Element Table : <table align="left"|"center"|"right” bgcolor="color" border="pixel” cellpadding="pixel” cellspacing="pixel” width="pixel"|"%” height="pixel"|"%”>........................

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

11 Tabel HTML • Syntax Element TR :..........................

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

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

14 Tabel HTML • Syntax Element TH dan TD :....................................................

15 Contoh Penggunaan Membuat Tabel <table align="center" border="1" bgcolor="cyan“ cellpadding="5" cellspacing="0" > Daftar Peserta No. Nama 1. Yasmin Nursanti

16 Contoh Penggunaan 2. Arofathur Ahmad 3. Rahmat Nurkholis Contoh Hasilnya

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