HTML Lanjut
Latihan Membuat Web Untuk Pemula
Latihan Membuat Web Untuk Pemula
Elemen HTML Lanjut
► List
Untuk mengelompokkan data baik secara berurutan (ordered list) maupun yang tidak berurutan (unordered list). Ada tiga macam list yang dapat digunakan dalam HTML, yaitu:- Ordered List
Ordered list digunakan untuk mengelompokkan data dimana tiap datanya memiliki nomor secara berurut. Ordered List dinilai dengan menggunakan tag <ol> dan diakhiri </ol>. Untuk menyatakan bagiannya (list item) digunakan tag <li> dan diakhiri </li> namun juga tag ini bisa tidak menggunakan penutup.
Ketika menggunakan perintah ordered list maka default penomorannya adalah 1, 2, 3, ... Untuk mengubah penomoran tersebut menggunakan atribut TYPE pada tag <ol>.
Tabel atribut ordered list
| Tag | Atribut | Nilai | Deskripsi |
| <ol> | type | I | I, II, III, IV, ... |
| i | i, ii, iii, iv, ... | ||
| A | A, B, C, D, E, ... | ||
| a | a, b, c, d, e, ... | ||
| <ol> | start | n | Nilai awal |
Untuk latihan ketikkan script berikut dan simpan dengan nama "ordered_list.html"
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<p>Ordered List Angka : <br />
<ol>
<li>Urutan Pertamaxxx</li>
<li>Urutan Keduaxxx</li>
<li>Urutan Ketigaxxx</li>
</ol>
</p>
<p>Ordered List Huruf :<br />
<ol type="A">
<li>Urutan Pertamaxxx</li>
<li>Urutan Keduaxxx</li>
<li>Urutan Ketigaxxx</li>
</ol>
</p>
<p>Ordered List Angka Romawi :<br />
<ol type="I">
<li>Urutan Pertamaxxx</li>
<li>Urutan Keduaxxx</li>
<li>Urutan Ketigaxxx</li>
</ol>
</p>
</body>
</html>
<head>
<title>Ordered List</title>
</head>
<body>
<p>Ordered List Angka : <br />
<ol>
<li>Urutan Pertamaxxx</li>
<li>Urutan Keduaxxx</li>
<li>Urutan Ketigaxxx</li>
</ol>
</p>
<p>Ordered List Huruf :<br />
<ol type="A">
<li>Urutan Pertamaxxx</li>
<li>Urutan Keduaxxx</li>
<li>Urutan Ketigaxxx</li>
</ol>
</p>
<p>Ordered List Angka Romawi :<br />
<ol type="I">
<li>Urutan Pertamaxxx</li>
<li>Urutan Keduaxxx</li>
<li>Urutan Ketigaxxx</li>
</ol>
</p>
</body>
</html>
Hasil dari script di atas :
- Unordered List
Berbeda dengan ordered list, dalam unordered list tidak dijumpai urutan dalam daftar. Setiap bagian dari unordered list ditandai dengan tanda bullet. Untuk memulianya menggunakan tag <ul> dan diakhiri dengan </ul>, untuk menyatakan tiap bagiannya (list item) menggunakan tag <li> sama seperti ordered list.
Tabel atribut unordered list
| Tag | Atribut | Nilai | Deskripsi |
| <ul> | type | disc | Bullet Titik (•) |
| square | Bullet Kotak (■) | ||
| circle | Bullet Lingkaran (○) |
Untuk latihan ketikkan script berikut dan simpan dengan nama "unordered_list.html"
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<p>Unordered List Disc : <br />
<ul>
<li>Urutan Pertamaxxx</li>
<li>Urutan Keduaxxx</li>
<li>Urutan Ketigaxxx</li>
</ul>
</p>
<p>Unordered List Square :<br />
<ul type="square">
<li>Urutan Pertamaxxx</li>
<li>Urutan Keduaxxx</li>
<li>Urutan Ketigaxxx</li>
</ul>
</p>
</body>
</html>
<head>
<title>Unordered List</title>
</head>
<body>
<p>Unordered List Disc : <br />
<ul>
<li>Urutan Pertamaxxx</li>
<li>Urutan Keduaxxx</li>
<li>Urutan Ketigaxxx</li>
</ul>
</p>
<p>Unordered List Square :<br />
<ul type="square">
<li>Urutan Pertamaxxx</li>
<li>Urutan Keduaxxx</li>
<li>Urutan Ketigaxxx</li>
</ul>
</p>
</body>
</html>
Hasil dari script di atas :
- Definition List
Definition list digunakan untuk mendefinisikan atau menjelaskan istilah istilah, sering juga disebut juga sebagai daftar istilah. Definition list dinyatakan dengan tag awal <dl> dan diakhiri </dl>. Dalam tag tersebut terdapat dua bagian, yaitu :
- Istilah yang didefinisikan, dinyatakan dengan tag <dt> atau Definition Term.
- Definisi dari istilah tersebut, dinyatakan dengan tag <dd> atau Definition Data
- Istilah yang didefinisikan, dinyatakan dengan tag <dt> atau Definition Term.
<html>
<head>
<title>Definition List</title>
</head>
<body>
<p>
<dl>
<dt>Wahyudi Blog!</dt>
<dd>Blog gado gado yang berisi tutorial, tips trik komputer, software, internet juga berisi ragam info, permainan online dan hal hal yang keren, antik, unik, lucu, gila dan sebagainya</dd>
</dl>
</p>
</body>
</html>
<head>
<title>Definition List</title>
</head>
<body>
<p>
<dl>
<dt>Wahyudi Blog!</dt>
<dd>Blog gado gado yang berisi tutorial, tips trik komputer, software, internet juga berisi ragam info, permainan online dan hal hal yang keren, antik, unik, lucu, gila dan sebagainya</dd>
</dl>
</p>
</body>
</html>
Hasil dari script di atas :
► Tabel
Untuk menyajikan data dalam bentuk kolom dan baris. Tabel digunakan agar informasi yang kita berikan dapat lebih mudah dimengerti oleh orang lain. Umumnya kolom menunjukkan data yang sejenis dan setiap baris terdiri atas kolom kolom yang menunjukkan kelompok data dalam satu kesatuan.| Elemen | Penjelasan |
| <table>...</table> | Mendefinisikan sebuah tabel dalam dokumen HTML. Atribut : border, background, cellpadding, cellspacing, dll. |
| <caption>...</caption> | Mendefinisikan judul tabel |
| <tr>...</tr> | Mendefinisikan baris dalam tabel. Atribut : align (left, center, right), valign (top, middle, bottom), dll |
| <th>...</th> | Membuat judul kolom |
| <td>...</td> | Mendefinisikan kolom dalam tabel. Atribut : bgcolor, align (left, center, right), dll. |
| Colspan=n | Atribut dari tag <td> untuk mamperlebar sel kolom n kolom (menggabungkan beberapa sel dalam satu baris) |
| Rowspan=n | Atribut dari tag <td> untuk memperlebar ser baris n baris (menggabungkan beberapa baris sel) |
Untuk latihan ketikkan script berikut dan simpan dengan nama "tabel 1.html"
<html>
<head>
<title>Tabel 1</title>
</head>
<body>
<p>Contoh tabel 1
<table border="1">
<tr>
<td>Baris 1, kolom 1</td>
<td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td>
<td>Baris 2, kolom 2</td>
</tr>
</table>
</p>
</body>
</html>
<head>
<title>Tabel 1</title>
</head>
<body>
<p>Contoh tabel 1
<table border="1">
<tr>
<td>Baris 1, kolom 1</td>
<td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td>
<td>Baris 2, kolom 2</td>
</tr>
</table>
</p>
</body>
</html>
Hasil dari script di atas :
Untuk latihan ketikkan script berikut dan simpan dengan nama "tabel 2.html"
<html>
<head>
<title>Tabel 2</title>
</head>
<body>
<p>Contoh tabel 2
<table border="1" align="center">
<tr align="center">
<td rowspan="3" bgcolor="cyan">rowspan 3</td>
<td colspan="2" bgcolor="gray">colspan 2</td>
</tr>
<tr align="center">
<td rowspan="2" bgcolor="yellow">rowspan 2</td>
<td bgcolor="red">baris 2, kolom 4</td>
</tr>
<tr align="center">
<td bgcolor="orange">baris 3, kolom 4</td>
</tr>
<tr align="center">
<td colspan="2" bgcolor="magenta">colspan 2</td>
<td bgcolor="maroon">baris 4, kolom 4</td>
</tr>
</table>
</p>
</body>
</html>
<head>
<title>Tabel 2</title>
</head>
<body>
<p>Contoh tabel 2
<table border="1" align="center">
<tr align="center">
<td rowspan="3" bgcolor="cyan">rowspan 3</td>
<td colspan="2" bgcolor="gray">colspan 2</td>
</tr>
<tr align="center">
<td rowspan="2" bgcolor="yellow">rowspan 2</td>
<td bgcolor="red">baris 2, kolom 4</td>
</tr>
<tr align="center">
<td bgcolor="orange">baris 3, kolom 4</td>
</tr>
<tr align="center">
<td colspan="2" bgcolor="magenta">colspan 2</td>
<td bgcolor="maroon">baris 4, kolom 4</td>
</tr>
</table>
</p>
</body>
</html>
Hasil dari script di atas :
Visit Wahyudi Blog !
Tidak ada komentar:
Posting Komentar
Plisss...
Jangan nyepam (spam), jangan promosi (apapun itu), jangan SARA, jangan OOT...
Mohon kerja samanya, berikan komentar yang berbobot dan bermanfaat bagi semua... ^^