Html Dersleri 11. Html ul ve ol etiketleri. Html5 Eğitimleri

Yazar

11 Mayıs 2020

856

html5 ol ve ul listeleme etiketleri - list tags

Bu bölümde sıralı ve sırasız listeleme elamanlarından bahsedeceğiz. <ol> etiketi kullanılarak oluşturulan listeler sıralı listelerdir. Sıralamaler sayısal, alfabetik ya da romen rakamları ile yapılabilir. <ul> etiketi ile oluşturulan listelerde ise sıralama elemanı bir grafik semboldür.

Detayları anlamak için aşağıdaki kodları inceleyebilir veya sayfanın altında bulunan eğitim videosunu izleyebilirsininiz.

Html <ol> sıralı liste etiketi

ol etiketi örnek:

  	<!-- Html Listeler ol -->
  	<ol type="1" start="5">
  		<li><a href="#">Kahve</a></li>
  		<li><a href="#">Çay</a></li>
  		<li><a href="#">Süt</a></li>
  	</ol>

  	<ol type="A" start="5">
  		<li><a href="#">Kahve</a></li>
  		<li><a href="#">Çay</a></li>
  		<li><a href="#">Süt</a></li>
  	</ol>

  	<ol type="a">
  		<li><a href="#">Kahve</a></li>
  		<li><a href="#">Çay</a></li>
  		<li><a href="#">Süt</a></li>
  	</ol>

  	<ol type="I">
  		<li><a href="#">Kahve</a></li>
  		<li><a href="#">Çay</a></li>
  		<li><a href="#">Süt</a></li>
  	</ol>

Yukarıdaki ol sıralı liste örneklerinin görüntüsü aşağıdaki gibi olacaktır.

Html <ul> sırasız liste etiketi

ul etiketi örnek:

  	<!-- Html Listeler ul -->
  	<ul style="list-style-type: none;">
  		<li><a href="#"> Kahve </a></li>
  		<li>Çay</li>
  		<li>Süt</li>
  	</ul>

  	<ul style="list-style-type: disc;">
  		<li><a href="#"> Kahve </a></li>
  		<li>Çay</li>
  		<li>Süt</li>
  	</ul>

  	<ul style="list-style-type: circle;">
  		<li><a href="#"> Kahve </a></li>
  		<li>Çay</li>
  		<li>Süt</li>
  	</ul>

  	<ul style="list-style-type: square;">
  		<li><a href="#"> Kahve </a></li>
  		<li>Çay</li>
  		<li>Süt</li>
  	</ul>

Yukarıdaki ul sırasız liste örneklerinin görüntüsü aşağıdaki gibi olacaktır.