XHTML Listeler - Lists

XHTML Ul Etiketi - Ul Tag

<ul> etiketinin açılımı "Unordered List" 'tir. "Unordered List" ise "Sırasız Liste" anlamına gelmektedir. Metinlerimizi veya cümlelerimizi maddeler halinde yazmak için "<ul> " ve "<li> " etiketlerini kullanacağız. Bu etiketleri kullanmaız halinde maddelerimizin solunda siyah yuvarlak bir ikon çıkacaktır. Tabi bu ikonları CSS ile değiştirebiliriz.

Örnek olarak görelim...

Bu kodu tarayıcıda görmek için tıklayınız.

XHTML Ol Etiketi - Ol Tag

<ol> etiketinin açılımı "Ordered List" 'tir. "Ordered List" ise "Sıralı Liste" anlamına gelmektedir. Maddelerimizi, madde başlarında rakam ile göstermek için "<ol> " ve "<li> " etiketlerini kullanacağız. Bu etiketleri kullanmaız halinde maddelerimizin solunda rakamlar çıkacaktır.

Örnek olarak görelim...

Bu kodu tarayıcıda görmek için tıklayınız.

XHTML Tanım Listeleri - Definition Lists

Bir tanımı ve açıklamasını karşılıklı olarak yazmak istiyorsak bu listeleme stilini kullanacağız.

Listeyi açmak için <dl> etiketi kullanılır.
Tanım için <dt> etiketi kullanılır.
Açıklama için ise <dd> etiketi kullanılır.

Örnek olarak görelim...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

Sayfamızın Başlığı Burada Olacak

</title>

</head>

<body>
		
			<dl>
			
				<dt> Baklava: </dt>
				
					<dd> Çok güzeldir, o olmadan olmaz. </dd>
				
				<dt> Acı sos:</dt>
				
					<dd> Kimi sever, kimi sevmez. </dd>
			
			</dl>
		
		<p>Ya da şu şekilde de kullanılabilir.</p>
		
			<dt> Ülke: </dt>
			
				<dd> 
				
					<select name="ulke"> 
					
						<option value="turkiye">Türkiye</option> 
						<option value="azerbeycan">Azerbeycan</option>  
					
					</select> 
					
				</dd>
			
			<dt> Şehir:</dt>
			
				<dd>
				
					<select name="sehir"> 
					
						<option value="istanbul">İstanbul</option>  
						<option value="ankara">Ankara</option>  
					
					</select> 
				
				</dd>
		
	</body>

</html>

Bu kodu tarayıcıda görmek için tıklayınız.

<dt> ve <dd> etiketleri içerisinde diğer etiketler kullanılabilir. Bu etiketlere stil vererek tanım ve açıklamayı aynı hizaya getirebilirsiniz.

Not: Şimdilik, ikinci örnekte ki <select> ve <option> etiketlerini dikkate almayanız. Onları bir sonra ki konuda ele alacağız.