1. Pengertian Web Browser dan Text Editor
Cara Membuat List di HTML
Setelah belajar tentang efek style pada font di HTML, materi selanjutnya yang dibahas adalah cara membuat list di HTML.
List di HTML ada tiga yaitu list yang menggunakan nomor/huruf berurutan (ordered list), list yang menggunakan bullet atau simbol (unordered list), dan list yang menggunakan teks (description list).
Langsung saja kita pelajari satu persatu yak!
Secara default, ordered list ditampilkan dengan urutan angka. Untuk mengubahnya menjadi huruf atau romawi perlu ditambahkan atribut type.
dari contoh tersebut maka list yang digunakan adalah romawi kecil. Untuk atribut type sudah dianggap deprecated, jadi untuk membuat list lebih disarankan menggunakan CSS.List di HTML ada tiga yaitu list yang menggunakan nomor/huruf berurutan (ordered list), list yang menggunakan bullet atau simbol (unordered list), dan list yang menggunakan teks (description list).
Langsung saja kita pelajari satu persatu yak!
Ordered List
Ordered list merupakan list yang berurutan. Urutannya bisa berupa huruf ataupun angka. List ini cocok digunakan untuk daftar yang harus tersusun secara urut.
Untuk membuat ordered list tag yang digunakan adalah tag <ol>, sedangkan isi dari list menggunakan tag <li>
Berikut adalah contoh kode lengkapnya :
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="logo.png" type="image/png">
<title>Belajar HTML untuk pemula</title>
</head>
<body>
<p>Pancasila memiliki nilai dasar 5 yaitu :</p>
<ol>
<li>Ketuhanan yang Maha Esa</li>
<li>Kemanusiaan yang adil dan beradap</li>
<li>Persatuan Indonesia</li>
<li>Kerakyatan yang dipimpin oleh hikmat kebijaksanaan perwakilan</li>
<li>Keadilan sosial bagi seluruh rakyat Indonesia</li>
</ol>
</body>
</html>
Atribut Type
Atribut type digunakan di tag <ol> untuk menentukan jenis karakter yang digunakan sebagai penanda list. Terdapat 5 karakter yang tersedia di dalam HTML :-
type="a" menggunakan huruf kecil sebagai penanda list.
-
type="A" menggunakan huruf besar sebagai penanda list.
-
type="i" menggunakan huruf romawai kecil sebagai penanda list.
-
type="I" menggunakan huruf romawi besar sebagai penanda list.
-
type="1" menggunakan nomor sebagai penanda list.
<body>
<p>Pancasila memiliki nilai dasar 5 yaitu :</p>
<ol type="i">
<li>Ketuhanan yang Maha Esa</li>
<li>Kemanusiaan yang adil dan beradap</li>
<li>Persatuan Indonesia</li>
<li>Kerakyatan yang dipimpin oleh hikmat kebijaksanaan perwakilan</li>
<li>Keadilan sosial bagi seluruh rakyat Indonesia</li>
</ol>
</body>(akan dibahas di materi CSS).
Atribut Start
Atribut start digunakan jika ingin membuat list dimulai bukan dari angka pertama yaitu angka 1. Nilai dari atribut ini adalah nomor urutan yang diinginkan. Berikut contoh penggunaannya :<body>
<p>Pancasila memiliki nilai dasar 5 yaitu :</p>
<ol type="1" start="3">
<li>Ketuhanan yang Maha Esa</li>
<li>Kemanusiaan yang adil dan beradap</li>
<li>Persatuan Indonesia</li>
<li>Kerakyatan yang dipimpin oleh hikmat kebijaksanaan perwakilan</li>
<li>Keadilan sosial bagi seluruh rakyat Indonesia</li>
</ol>
</body>Nested List
Untuk membuat list yang memiliki list di dalamnya maka caranya dengan menginput tag <ol> sebagai bagian dari tag <li> dari list pertama. Hal ini sering disebut sebagai Nested List. Berikut contoh penggunaannya :<body>
<p>Belajar Nested List</p>
<ol>
<li>Pilihan Pertama</li>
<li>Pilihan Kedua --> tag penutup li berada dibawah
<ol type="a">
<li>sub pertama pilihan kedua</li>
<li>sub kedua pilihan kedua</li>
<li>sub ketiga pilihan ketiga</li>
</ol>
</li> --> letak tag penutup li
<li>Pilihan Ketiga</li>
</ol>
</body>Unordered List
Unordered list adalah list yang tidak memerlukan urutan. Di dalam HTML, untuk membuat unordered list menggunakan tag <ul>, Cara penggunaannya sangat mirip dengan ordered list.Berikut adalah contoh penggunaan unordered list :
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="logo.png" type="image/png">
<title>Belajar HTML untuk pemula</title>
</head>
<body>
<p>Berikut adalah bahasa pemrogaman yang digunakan untuk membuat website:</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>PHP</li>
<li>MySQL</li>
</ul>
</body>
</html>
Atribut Type
Sama seperti tag <ol>, tag <ul> juga memiliki atribut type untuk mengatur tampilan list. Secara default unordered list akan ditampilka lingkaran hitam sebagai penanda list.Dengan menggunakan atribut type karakter ini bisa diubah dengan karakter yang lainnya. Adapun penjelasannya sebagai berikut :
- type="disc", menggunakan bulatan hitam sebagai penanda list.
- type="circle", menggunakan bulatan hitam dengan isi warna putih sebagai penanda list.
- type="square", menggunakan kotak hitam sebagai penanda list.
Contoh penggunaannya :
<body>
<p>Berikut macam-macam antivirus :</p>
<ul type="circle">
<li>Avira</li>
<li>Smadav</li>
<li>MSC</li>
<li>Avast</li>
<li>AVG Security</li>
</ul>
</body>
Berbeda dengan atribut type di ordered list, atribut type di unordered list dinyatakan deprecated. Untuk mendapatkan efek yang sama bisa menggunakan CSS.
Untuk membuatnya, seluruh list harus berada diantara tag <dl> dan </dl> (Description list) untuk bagian judul menggunakan tag <dt> (data term), sedangkan untuk bagian penjelasannya menggunakan tag <dd> (data description).
Berikut adalah contoh lengkapnya :
Description List
Jenis list ini digunakan untuk struktur list seperti kamus, yakni list yang memiliki judul beserta keterangannya. Jenis list ini tidak sering digunakan.Untuk membuatnya, seluruh list harus berada diantara tag <dl> dan </dl> (Description list) untuk bagian judul menggunakan tag <dt> (data term), sedangkan untuk bagian penjelasannya menggunakan tag <dd> (data description).
Berikut adalah contoh lengkapnya :
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="logo.png" type="image/png">
<title>Belajar HTML untuk pemula</title>
</head>
<body>
<p>Istilah dalam networking :</p>
<dl>
<dt>CDMA</dt>
<dd>Code Divison Multiple Access, sebuah teknologi selular digital yang menggunakan teknik spread-specturm. <a/dd>
<dt>EDGE</dt>
<dd>Enhanced Data rates for GSM Evolution adalah teknologi evolusi dari GSM dan IS-136.</dt>
</dl>
</body>
</html> 
0 komentar:
Posting Komentar
Dilarang keras menyebar spam, di alamat blog ini.Terimakasih atas kerjasamanya.