Pengenalan internet 11

240 views

Published on

Slide materi pengenalan HTML Memformat tampilan content

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
240
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Pengenalan internet 11

  1. 1. Pengenalan HTML - 2 Bullet Numbering dan Table Matakuliah Pengenalan Internet STMIK Palangkaraya Oleh : Suparno Email : endustong@yahoo.com Blog : www.digdoyo.com
  2. 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. 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 : <ol start="number" type="A"|"a"|"I"|"i"|"1"> ........................ </ol>
  4. 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 : <ul type="circle"|"square"|"disc"> .......................... </ul>
  5. 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 : <li type="A"|"a"|"I"|"i"|"1"|"circle"|"square"|"disc"> .......................... </li>
  6. 6. Contoh Penggunaan <html> <head> <title>Membuat Daftar Urutan</title> </head> <body> <H2>Daftar Urut Dengan Nomor</H2> Matakuliah Semester 1 Jurusan TI: <ol start="1" type="a"> <li>Pendidikan Agama</li> <li>Pendidikan Pancasila</li> <li>Pengenalan Internet</li> <li>Konsep Teknologi Informasi</li> <li>Organisasi Komputer</li> <li>Sistem Operasi</li> </ol> </body> </html> Hasil Script
  7. 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. 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. 9. Tabel HTML Syntax Element Table : <table align="left"|"center"|"right” bgcolor="color" border="pixel” cellpadding="pixel” cellspacing="pixel” width="pixel"|"%” height="pixel"|"%”> ........................ </table>
  10. 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. 11. Tabel HTML • Syntax Element TR : <table> <tr align="left"|"center"|"right“ valign="top"|"middle"|"bottom” bgcolor="color"> .......................... </tr> </table>
  12. 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. 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. 14. Tabel HTML • Syntax Element TH dan TD : <table> <tr> <th align="left"|"center"|"right” valign="top"|"middle"|"bottom” bgcolor="color” colspan="number” rowspan="number"> .......................... </th> <td align="left"|"center"|"right” valign="top"|"middle"|"bottom” bgcolor="color” colspan="number” rowspan="number"> .......................... </td> </tr> </table>
  15. 15. Contoh Penggunaan <html> <head> <title>Membuat Tabel</title> </head> <body> <table align="center" border="1" bgcolor="cyan“ cellpadding="5" cellspacing="0" > <caption align="top"><b>Daftar Peserta</b></caption> <tr> <th>No.</th> <th>Nama</th> </tr> <tr> <td>1.</td> <td>Yasmin Nursanti</td> </tr>
  16. 16. Contoh Penggunaan <tr> <td>2.</td> <td>Arofathur Ahmad</td> </tr> <tr> <td>3.</td> <td>Rahmat Nurkholis</td> </tr> </table> </body> </html> Contoh Hasilnya
  17. 17. Bagaimana….? • Ternyata HTML juga mudah ya…? • Silahkan Anda Coba Praktikan di Rumah dengan Masalah yang lainnya…! • Terima kasih…

×