170 likes | 299 Views
Pengenalan HTML - 2. Bullet Numbering dan Table. 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.
E N D
Pengenalan HTML - 2 Bullet Numbering dan Table
Bullet Numbering–DaftarUrutan Biasadigunakanuntukmenampilkanteksdalambentukberurutandengannomoratau symbol. Element-element yang digunakan : • OL (Order List) • UL (Unorder List) • LI (List Item
Element dalam Bullet Numbering • OL (Order List) • Untukmembuatdaftarurutdgnnomor. • Memiliki attribute : Start, danType. • Attribute start utk memberi nilai awal nomor urut. • Attribute type memiliki value : A = abjadhurufbesar, a = abjadhurufkecil, I = abjadromawibesar, i = abjadromawikecil, 1 untukangkadesimal. Syntax : <ol start="number" type="A"|"a"|"I"|"i"|"1"> ........................ </ol>
Element dalam Bullet Numbering • UL (Unorder List) • Untukmembuatdaftarurutdgn symbol (bullet). • Memiliki attribute : Type. • Attribute type memiliki value : circle, squaredandisc Syntax : <ul type="circle"|"square"|"disc"> .......................... </ul>
Element dalam Bullet Numbering • LI (List Item) • Untukmembuatisidaridaftar yang ditetapkandengan OL maupun UL. • Harusberadadidalam element OL atau UL. • Memiliki attribute : Type dengan value : A, a, I, i, circle, squaredandisc. Syntax : <li type="A"|"a"|"I"|"i"|"1"|"circle"|"square"|"disc"> .......................... </li>
ContohPenggunaan <html> <head> <title>MembuatDaftarUrutan</title> </head> <body> <H2>DaftarUrutDenganNomor</H2> Matakuliah Semester 1 Jurusan TI: <ol start="1" type="a"> <li>Pendidikan Agama</li> <li>PendidikanPancasila</li> <li>Pengenalan Internet</li> <li>KonsepTeknologiInformasi</li> <li>OrganisasiKomputer</li> <li>SistemOperasi</li> </ol> </body> </html> Hasil Script
Tabel HTML • Tabeldigunakanuntukmenyajikan data multidimensi yang terdiriataskolomdanbaris. • Element yang digunakandalammembuattabel : • Element TABLE : utkmendefinisikantabel • Element TH (Table Header) : utkjudultabel • Element TR (Table Row) : utkbaristabel • Element TD (Table Data) : utkisitabel
Tabel HTML • Element TABLE mempunyaiattribute : • align : utkperataan, value left, center, right • bgcolor : utkwarnalatarbelakangtabel • border : utkgarisbingkaitabel, satuan pixel • cellpadding : utkjarakantaratepiseldenganisisel, satuan pixel • cellspacing : jarakantarsel, satuan pixel • width : lebartabel, satuan pixel atau % • height : tinggitabel, satuan pixel atau %
Tabel HTML Syntax Element Table : <table align="left"|"center"|"right” bgcolor="color" border="pixel” cellpadding="pixel” cellspacing="pixel” width="pixel"|"%” height="pixel"|"%”> ........................ </table>
Tabel HTML • Element TR untukmendefinisikanbaristabel. • Harusberadadidalam element TABLE • Element inimempunyaiattribute : • align : utkperataan (left, center, right) • valign : utkperataan (top, middle, bottom) • bgcolor : utkwarnalatarbelakangtabel
Tabel HTML • Syntax Element TR : <table> <tr align="left"|"center"|"right“ valign="top"|"middle"|"bottom” bgcolor="color"> .......................... </tr> </table>
Tabel HTML • Element TH untukmemberikanjudulkolomtabel. • Harusberadadidalam element TR. • Element inimempunyaiattribute : • align : utkperataan (left, center, right) • valign : utkperataan (top, middle, bottom) • bgcolor : utkwarnalatarbelakangtabel • colspan : utklebarkolom merger • rowspan : utktinggibaris merger
Tabel HTML • Element TD untukmenentukanisiseltabel. • Harusberadadidalam element TR. • Element inimempunyaiattribute : • align : utkperataan (left, center, right) • valign : utkperataan (top, middle, bottom) • bgcolor : utkwarnalatarbelakangtabel • colspan : utklebarkolom merger • rowspan : utktinggibaris merger
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>
ContohPenggunaan <html> <head> <title>MembuatTabel</title> </head> <body> <table align="center" border="1" bgcolor="cyan“ cellpadding="5" cellspacing="0" > <caption align="top"><b>DaftarPeserta</b></caption> <tr> <th>No.</th> <th>Nama</th> </tr> <tr> <td>1.</td> <td>YasminNursanti</td> </tr>
ContohPenggunaan <tr> <td>2.</td> <td>Arofathur Ahmad</td> </tr> <tr> <td>3.</td> <td>RahmatNurkholis</td> </tr> </table> </body> </html> ContohHasilnya
Bagaimana….? • Ternyata HTML jugamudahya…? • SilahkanAndaCobaPraktikandiRumahdenganMasalah yang lainnya…! • Terimakasih…