Pengenalan HTML - 2

Matakuliah Pengenalan InternetSTMIK Palangkaraya

Oleh : SuparnoEmail : [email protected]

Blog : www.digdoyo.com

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

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>


• UL (Unorder List)– Untuk membuat daftar urut dgn symbol

(bullet).– Memiliki attribute : Type.– Attribute type memiliki value : circle, square

dan discSyntax :

<ul type="circle"|"square"|"disc">..........................</ul>


• 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>

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

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

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 %

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

Tabel HTML

• Syntax Element TR :<table><tr align="left"|"center"|"right“ valign="top"|"middle"|"bottom” bgcolor="color">..........................</tr></table>

Tabel HTML

• Element TH untuk memberikan judul kolom tabel.

• Harus berada di dalam element TR.• Element ini mempunyai attribute :


bottom)– bgcolor : utk warna latar belakang tabel– colspan : utk lebar kolom merger– rowspan : utk tinggi baris merger

Tabel HTML

• Element TD untuk menentukan isi sel tabel.

• Harus berada di dalam element TR.• Element ini mempunyai attribute :


bottom)– bgcolor : utk warna latar belakang tabel– colspan : utk lebar kolom merger– rowspan : utk tinggi baris merger

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>

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

Bagaimana….?

• Ternyata HTML juga mudah ya…?• Silahkan Anda Coba Praktikan di

Rumah dengan Masalah yang lainnya…!

• Terima kasih…

Pengenalan HTML - 2

Documents

Transcript of Pengenalan HTML - 2