Widodo

#HTML Dasar Part 4 Panduan Membuat Daftar List dengan HTML

Panduan Membuat Daftar List dengan HTML

Panduan Membuat Daftar List dengan HTML : List merupakan sebuah daftar, dalam HTML, list dibuat menggunakan tag bernama list. tag ini terdiri dari 2 jenis, yaitu ordered list ( untuk membuat list berurutan ) dan unordered list disajikan dengan bulatan atau kotak. Ordered list dibuat menggunakan tag <ol> dan unordered list dibuat menggunakan tag <ul> sedangkan isi dari list tersebiut dengan menggunakan tag <li>, Berikut ini kita akan peraktikan bagaimana membuat sebuah daftar list nama menggunakan tag <ol> dalam HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Membuat List</title>
</head>
<body>
	<ol>
		<li>Widodo</li>
		<li>Mardianto</li>
		<li>Aya</li>
		<li>Aan</li>
		<li>Galih</li>
	</ol>
</body>
</html>

Sedangkan untuk membuat unordered list, Kita tinggan mengganti tag <ol> menjadi tag </ul>. Dan berikut ini adalah kode HTML untuk membuat list unordered:

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Membuat List</title>
</head>
<body>
	<ul>
		<li>Widodo</li>
		<li>Mardianto</li>
		<li>Aya</li>
		<li>Aan</li>
		<li>Galih</li>
	</ul>
</body>
</html>

Demo Membuat List ordered dan unordered lihat disini

Style Untuk Membuat list

Bulleted dan Numbered list dapat dipeercantik dengan menggunakan atribut list-style-type. Contoh anda tidak ingin poin-poin yang ditulis menggunakan angka 1,2,3,dan seterusnya, namun ingin memakai angka romawi I,II,III. Atau poin-poin dalam bulleted list memenfaatkan kotak-kotak kecil berwarna hitam,alih-alih lingkaran. Berikut tabel penggunaannya

List Style

Value

Hasil

Bulleted

Disc

Lingkaran berwarna hitam (default)

Circle

Lingkaran berwana putih

Square

Persegi empat berwarna hitam

Numbered

Deccimal

1,2,3,4 (default)

Decimal-leading-zero

01,02,03,04

Lower-roman

i,ii,iii,iv

Upper-roman

I,II,III,IV

Lower-alpha

a,b,c,d

Upper-alpha

A,B,C,D

None

Tidak menggunakan apapun

Untuk menggunakan Style list diatas, Atribut ini diletakkan didalam tag <ul> atau <ol>. Sebagai contoh berikut ini penulisan menggunakan tag Undered :

<ul style="list-style-type:circle">

Atau jika anda ingin menggunakan tag Ordered seperti dibawah ini:

<ol style="list-style-type:lower-alpha">

Untuk penulisan kode HTML menggunakan Atribut diatas lebih lengkapnya seperti dibawah ini:

<html>
<head>
	<title>Belajar Membuat List</title>
</head>
<body>
  <h3>Contoh membuat List dengan atribut</h3>
	<ul style="list-style-type:circle">
		<li>Widodo</li>
		<li>Mardianto</li>
		<li>Aya</li>
		<li>Aan</li>
		<li>Galih</li>
	</ul>

  <h3>Contoh membuat List dengan atribut</h3>
	<ol style="list-style-type:lower-alpha">
		<li>Widodo</li>
		<li>Mardianto</li>
		<li>Aya</li>
		<li>Aan</li>
		<li>Galih</li>
	</ul>
</body>
</html>

Demo

Mengatur Urut-Urutan Numbered List

Apabila anda menggunakan numbered list, angka yang muncul di poin pertama tidak harus selalu angka 1 (satu). Anda bisa memulainya dari angka berapapun yang anda inginkan. Caranya adalah dengan menggunakan atribut Start. Jadi jika Anda ingin memulai numbered list dari angka 5 maka anda bisa menulis  seperti dibawah ini :

<ol start="5">

Walaupun menggunakan urutan bertipe roman maupun alpha anda harus tetap memasukkan atribut angka untuk atribut start diatas.

Menggunakan Definition List

Untuk membuat  Definition  list yang lengkap, hendaknya kita memanfaatkan struktur yang tepat. Dimulai dengan penggunaan two sided tan <dl> yang merupakan singkatan dari definition list. Lantas yan gmerupakan kata-kata yang ingin didefinisikan ditulis dalamtwo sided tag <dt> yang merupakan singkatan dari definition term. Definisi dari kata tersebut ditulis dalam two sided tag <dd> yang merupakan singkatan dari definition description. Berikut salah satu contoh penggunaan Definition List.

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Membuat List</title>
</head>
<body>
	<dl>
  		<dt>S-widodo.com</dt>
  			<dd>
  				S-widodo.com Digital Marketing adalah suatu layanan yang bergerak dibidang jasa pembuatan website di Lampung, solusi pembuatan website, berupa jasa web design, pembuatan corporate website, toko online, dll.
  			</dd>
	</dl>
</body>
</html>

Penggunaan tag list pada HTML tidak hanya untuk membuat daftar saja. Dengan CSS, tag list dapat digunakan untuk membuat menu navigasi di dalam halaman web, seperti menu yang ada pada web kami ini. Tetapi pada dasarkan kita harus mengerti pengguanaan Tag list tersebut. Dalam tutorial belajar HTML dasar selanjutnya, kita akan membahas salah satu tag terpenting dari HTML,  yaitu tentang panduan membuat link di HTML.



0 Komentar


Copyright © 2015 S-widodo.com Digital marketing