List Html
Bentuk
umum untuk mengguraikan suatu daftar
Bentuk-bentuk list
Bentuk-bentuk list
1. List dengan nomor (ordered
list)
2. List (unordered list)
3. List Definisi
4. Ordered List
List
dibuat dengan menggunkan angka dan atau abjad
Type
bila tidak disebutkan, maka list berbentuk angka Tag yang digunakan adalah
<OL> dan berpasangan dengan yag <LI> untuk ListnyaType list ordered (Bukan Angka)
Bentuk:
<OL
[[Type”Tipe_list”]/[START=“angka”]]>
<LI> Teks …..
<LI> Teks
</OL>
Type list unordered
<body>
a . tag <table> ….. </table>
tag awal dan akhir membuat tabel di html . tag tabel memiliki beberapa atribut seperti height, width, border lainnya untuk mengatur tinggi tabel, lebar tabel, dan tebal garis tepi, dan masih banyak lagi atribut table dalam html.
b . tag <th> ….. </th>
Tag <th> pengganti tag <td> digunakan untuk membuat header titel dari baris maupun kolom. Secara default teks pada tag <th> menggunakan teks tebal dan letaknya di tengah pada baris.
c . tag <caption> ….. </caption>
Tag caption digunakan untuk membentuk judul pada table . Judul dapat ditandai dengan apa pun . Posisi default di bagian atas table.
d . tag <tr> ….. </tr>
Mendefinisika baris dalam tabel. Kita dapat mengatur teks dalam satu baris banyak kolom menggunakan : atribut color (warna), letak teks,dll seperti rata kiri, rata kanan, warna teks merah, dll.
e . tag <td> ….. </td >
tag td digunakan untuk membuat kolom tabel yang berisi data. Tag td memiliki beberapa atribut di antaranya color, background. Pada table kita bisa membuat banyak kolom dengan tag td.
f . atribut <colspan>
Atribut colspan pada html tabel digunakan untuk menggabungkan dua atau lebih kolom agar lemih menarik. Nilai bisa variasi tergantung kebutuhan, misalnya <td colspan=”2″>…</td>. Yang artinya menggabungkan 2 kolom.
h. atribut <rowspan>
Dalam html sederhana atribut rowspan digunakan untuk menggabungkan dua atau lebih baris pada tabel html. contoh: <td rowspan=”2″> artinya menggabungkan 2 baris menjadi satu baris. yang lainnya titetap 2 baris.
<LI> Teks …..
<LI> Teks
</OL>
Contoh:
<HTML>
<BODY>
<B>Sahabat Sampul Ilmu</B>
<OL TYPE="I">
<B><LI>Contoh</B>
<OL Type="A" START="D" >
<LI>Sampul :
<OL>
<LI>Tekom
<LI>Pika
</OL>
<LI>Ilmu :
<OL>
<LI>Yahoo
<LI>Facebook
</OL>
</OL>
<B><LI>Salam Sampul Ilmu</B>
</OL>
</BODY>
</HTML>
<BODY>
<B>Sahabat Sampul Ilmu</B>
<OL TYPE="I">
<B><LI>Contoh</B>
<OL Type="A" START="D" >
<LI>Sampul :
<OL>
<LI>Tekom
<LI>Pika
</OL>
<LI>Ilmu :
<OL>
<LI>Yahoo
<LI>Facebook
</OL>
</OL>
<B><LI>Salam Sampul Ilmu</B>
</OL>
</BODY>
</HTML>
Unordered List
List dibuat dengan menggunkana simbol (bullet)Type list unordered
Tag
yang digunakan adalah <UL> berpasangan dengan tag <LI>Bentuk:
<UL
[Type”Tipe_list]>
<LI> Teks
…..
<LI> Teks
</UL>
<LI> Teks
…..
<LI> Teks
</UL>
Contoh
<HTML>
<BODY>
<B> Sahabat Sampul Ilmu </B>
<UL>
<LI><B> Sampul Ilmu : </B>
<UL>
<LI>Sampul :
<UL>
<LI><U>Tekom</U>
<LI><U>Pika</U>
</UL>
<LI>Ilmu :
<UL>
<LI><U>Yahoo</U>
<LI><U>Facebook</U>
</UL>
</UL>
<LI><B>Salam Sampul Ilmu</B>
</ul>
<hr>
<small><Strong>© 'Sampul 2013</Strong></small>
</BODY>
</HTML>
<BODY>
<B> Sahabat Sampul Ilmu </B>
<UL>
<LI><B> Sampul Ilmu : </B>
<UL>
<LI>Sampul :
<UL>
<LI><U>Tekom</U>
<LI><U>Pika</U>
</UL>
<LI>Ilmu :
<UL>
<LI><U>Yahoo</U>
<LI><U>Facebook</U>
</UL>
</UL>
<LI><B>Salam Sampul Ilmu</B>
</ul>
<hr>
<small><Strong>© 'Sampul 2013</Strong></small>
</BODY>
</HTML>
Definition List
Untuk mendefinisikan indentasi biasa dan gantung, Tag yang digunakan
Contoh:
1
<HTML>
<BODY>
<DD><I> Kali ini sampul ilmu berbagai pengetahuan tentang Cara Membuat Link Dan List pada HTML, Mudah-mudahan dapat dijadikan sebagai bahan pembelajaran buat sahabat sampul ilmu. Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan dokumen ke dokumen dalam web. Hyperlink biasa disebut dengan hypertext link </I>
<DD>Salam Sampul Ilmu
</BODY>
</HTML>
<BODY>
<DD><I> Kali ini sampul ilmu berbagai pengetahuan tentang Cara Membuat Link Dan List pada HTML, Mudah-mudahan dapat dijadikan sebagai bahan pembelajaran buat sahabat sampul ilmu. Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan dokumen ke dokumen dalam web. Hyperlink biasa disebut dengan hypertext link </I>
<DD>Salam Sampul Ilmu
</BODY>
</HTML>
Contoh: 2
<HTML>
<BODY>
<DL>
<DT><I>BAB I</I> <DD><B>Sampul Ilmu.</B> Kali ini sampul ilmu berbagai pengetahuan tentang Cara Membuat Link Dan List pada HTML, Mudah-mudahan dapat dijadikan sebagai bahan pembelajaran buat sahabat sampul ilmu. Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan dokumen ke dokumen dalam web. Hyperlink biasa disebut dengan hypertext link
<DT><I>BAB II</I>
<DD><B>Sahabat Sampul Ilmu</B> Kali ini sampul ilmu berbagai pengetahuan tentang Cara Membuat Link Dan List pada HTML, Mudah-mudahan dapat dijadikan sebagai bahan pembelajaran buat sahabat sampul ilmu. Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan dokumen ke dokumen dalam web. Hyperlink biasa disebut dengan hypertext link
</DL></BODY>
</HTML>
<BODY>
<DL>
<DT><I>BAB I</I> <DD><B>Sampul Ilmu.</B> Kali ini sampul ilmu berbagai pengetahuan tentang Cara Membuat Link Dan List pada HTML, Mudah-mudahan dapat dijadikan sebagai bahan pembelajaran buat sahabat sampul ilmu. Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan dokumen ke dokumen dalam web. Hyperlink biasa disebut dengan hypertext link
<DT><I>BAB II</I>
<DD><B>Sahabat Sampul Ilmu</B> Kali ini sampul ilmu berbagai pengetahuan tentang Cara Membuat Link Dan List pada HTML, Mudah-mudahan dapat dijadikan sebagai bahan pembelajaran buat sahabat sampul ilmu. Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan dokumen ke dokumen dalam web. Hyperlink biasa disebut dengan hypertext link
</DL></BODY>
</HTML>
Table
Tabel
dalam website banyak digunakan untuk menyajikan informasi yang terdiri dari
baris dan kolom agar tampak lebih rapi dan mudah dipahami. Dengan kode HTML
sederhana Kita dapat membuat tabel statis , Informasi yang muncul dari data
yang ditulis dalam kode HTML sederhana. Dalam web desain, tabel juga bisa
membuat penampilan lebih cantik dan rapi . Dalam html tabel diawali dengan tag <table>
dan diakhiri tag </table> ,kemudian di ikuti dengan tag <tr> (table rows) adalah
untuk membuat baris baru pada tabel kemudian tag <td> (table data) adalah
sebagai tempat data yang ditampilkan. Tabel bersarang (nested table) juga dapat
dibuat dalam HTML .
Berikut adalah contoh kode membuat table sederhana dalam html :
<body>
<table border = "1">
<tr><th> no
</th><th>nama</th><th>nilai</th></tr>
<tr><td>1</td><td>
Ayu heydia sukaesih</td><td> 75 </td></tr>
<tr><td> 2</td><td>
Ayu nazera maharani </td><td> 65</td></tr>
</table>
</body>
a . tag <table> ….. </table>
tag awal dan akhir membuat tabel di html . tag tabel memiliki beberapa atribut seperti height, width, border lainnya untuk mengatur tinggi tabel, lebar tabel, dan tebal garis tepi, dan masih banyak lagi atribut table dalam html.
b . tag <th> ….. </th>
Tag <th> pengganti tag <td> digunakan untuk membuat header titel dari baris maupun kolom. Secara default teks pada tag <th> menggunakan teks tebal dan letaknya di tengah pada baris.
c . tag <caption> ….. </caption>
Tag caption digunakan untuk membentuk judul pada table . Judul dapat ditandai dengan apa pun . Posisi default di bagian atas table.
d . tag <tr> ….. </tr>
Mendefinisika baris dalam tabel. Kita dapat mengatur teks dalam satu baris banyak kolom menggunakan : atribut color (warna), letak teks,dll seperti rata kiri, rata kanan, warna teks merah, dll.
e . tag <td> ….. </td >
tag td digunakan untuk membuat kolom tabel yang berisi data. Tag td memiliki beberapa atribut di antaranya color, background. Pada table kita bisa membuat banyak kolom dengan tag td.
f . atribut <colspan>
Atribut colspan pada html tabel digunakan untuk menggabungkan dua atau lebih kolom agar lemih menarik. Nilai bisa variasi tergantung kebutuhan, misalnya <td colspan=”2″>…</td>. Yang artinya menggabungkan 2 kolom.
h. atribut <rowspan>
Dalam html sederhana atribut rowspan digunakan untuk menggabungkan dua atau lebih baris pada tabel html. contoh: <td rowspan=”2″> artinya menggabungkan 2 baris menjadi satu baris. yang lainnya titetap 2 baris.
OL
alam
HTML, tag list terdiri dari 2 jenis, ordered list (berurutan) dan
unordered list (tidak berurutan)
Ordered
list
akan ditampilkan dengan angka atau huruf, sedangkan unordered list
dengan bulatan atau kotak.
Ordered
list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>,
sedangkan untuk list sendiri menggunakan tag <li>
Contoh
penggunaan tag ordered list <ol>:
| <!DOCTYPE <html> <head> <title>kelmpk php</title> </head> <body> <h1>kelompok php</h1> <ol> <li>Ayu heydia sukaesih</li> <li>Ayu nazera maharani</li> <li>Patimah azara</li> <li>Lina fauziah</li> <li>Sandra rasiah irianto</li> </ol> </body> </html> |
