Free Computer Learning

Tag List - Frieyadie

Share |

Tag List
Senin, 2011-06-06, 07:59:51

Oleh : Frieyadie

Untuk membuat poin atau list tersebut pada pembahasan ini menggunakan dua model, yaitu Bullet dan Numbering. Bullet dan Numbering tersebut merupakan simbol atau karakter khusus yang diletakkan didepan suatu teks tertentu.

Bullet (Daftar Item)

Pada HTML untuk membuat Bullet atau yang sering dikenal dengan tanda daftar list, kita dapat menggunakan tag <UL>. Dan untuk mengakhiri penggunaan tag <UL> diakhir teks yang diberi tanda bullet diberikan tanda </UL>. cara penulisan pada dokumen HTML dapat dilihat di bawah ini :

<HTML>
	<HEAD>
	<TITLE> Penggunaan Bullets </TITLE>
	</HEAD>
	<BODY>
		<B>Gerakan Hemat Energi</B>
		<UL>
		<LI>Non Aktifkan Komputer Bila Tidak Digunakan
		<LI>Nyalakan AC / Lampu Sesuai Kebutuhan Saja 
	       dan Off kan bila Sudah Tidak Digunakan
		<LI>Hemat Energi = Mengurangi Emisi Diudara
		<LI>Energi Untuk Kehidupan Yang Lebih Baik
		<LI>Hemat Energi = Hemat Biaya
		</UL>
	</BODY>
</HTML>

Jika menginginkan bentuk bullet yang lain, anda bisa mengaturnya dengan menambahkan type pada <LI>. Syntax penuliisannya: <li type="value">

Untuk ordered lists (<ol>):

Value	Description
1	Daftar Berbentuk Angka (bentuknya default) (1, 2, 3, 4)
a	Daftar Berbentuk Alphabetically, lowercase (a, b, c, d)
A	Daftar Berbentuk Alphabetically, uppercase (A, B, C, D)
i	Daftar Berbentuk Angka Romawi, lowercase (i, ii, iii, iv)
I	Daftar Berbentuk Angka Romawi, uppercase (I, II, III, IV)

Untuk unordered lists (<ul>):

Value	Description
circle	Daftar Berbentuk Lingkaran Penuh (Default)
disk	Daftar Berbentuk Lingkaran Kosong
square	Daftar Berbentuk Kotak Penuh

Berikut contoh penggunaannya:

<HTML>
	<HEAD>
	<TITLE> Penggunaan Bullets Dengan Atribut Type 
	</HEAD>
	<BODY>
		<B>Gerakan Hemat Energi</B>
		<UL>
		<LI type="circle">Nyalakan AC / Lampu Sesuai Kebutuhan Saja 
	       dan Off kan bila Sudah Tidak Digunakan
		<LI type="square">Hemat Energi = Mengurangi Emisi Diudara
		<LI type="circle">Persatuan Indonesia
		<LI>Energi Untuk Kehidupan Yang Lebih Baik
		<LI type="square">Hemat Energi = Hemat Biaya
		</UL>
	</BODY>
</HTML>

Numbering (Daftar Angka)

Apabila anda menghendaki daftar suatu item, ditampilkan dengan nomor urut. Untuk keperluan tersebut dengan menggunakan tag <OL>, pemberian nomor dapat diotomatiskan tanpa anda harus menuliskannya. Untuk lebih jelasnya cobalah latihan berikut :

<HTML>
	<HEAD>
		<TITLE> Penggunaan Numbering 
	<BODY>
		<OL>
			<LI>Non Aktifkan Komputer Bila Tidak Digunakan
			<LI>Nyalakan AC / Lampu Sesuai Kebutuhan Saja 
	       dan Off kan bila Sudah Tidak Digunakan
			<LI>Hemat Energi = Mengurangi Emisi Diudara
			<LI>Hemat Energi = Hemat Biaya
			<LI>Energi Untuk Kehidupan Yang Lebih Baik
		</OL>
	</BODY>
</HTML>

Definisi (Daftar Definisi)

Kegunaan daftar definition ini untuk menghadirkan item dalam daftar, yang ditampilkan agak menjorok kedalam.

Tag	Description
<DL>..</DL>	Definition List. Tag ini untuk mendefinisikan definition list
<DT>..</DT>	Definition Term. Tag ini digunakan bersama <DL> untuk mendefinisikan istilah
<DD>..</DD>	Definition Description. Tag ini digunakan bersama <DT> untuk mendefinisikan istilah

Untuk lebih jelasnya cobalah latihan berikut :

<HTML>
	<HEAD>
		<TITLE> Penggunaan Daftar Definition 
	</HEAD>
	<BODY>
		<DL>
			<DT>HTML
			<DD>bahasa script yang digunakan untuk mendeskripsikan halaman web
			<DT>HTTP
			<DD>protokol jaringan lapisan aplikasi yang digunakan untuk sistem informasi terdistribusi, kolaboratif, dan menggunakan hipermedia
		</DL>
	</BODY>
</HTML>

Silahkan Isi Komentar Anda, Jangan lupa login account facebook/yahoo/hotmail anda dulu ya.

Kategori Artikel

Materi Kuliahan

Job & Almamater Site

Wise Words

My QR Code

Follow me on

View

Recent Materi Kuliah