HTML İÇ İÇE LİSTELER

HTML' de sıralı ve sırasız  listeler beraber kullanıalrak iç içe listeler oluşturulabilir.  CSS ile biçimlendirilen site menülerinde çok sık kullanılır. İç içe listeler oluşturulurken ana liste ve alt listelerin belirlenmesi gerekir. Alt listeler , hangi ana liste elemanının altındaysa , o maddenin <li> etiketi kapatılmadan oluşturulmalıdır. Örnekle bakalım.. 

Ana listemiz aşağıdaki gibi olsun..

<h4> Ders ve Konular </h4>
<ul> <!-- sırasız liste-->
	<li> Web Tabanlı Uygulama Geliştirme</li> 
	<li> Grafik ve Canlandırma </li> 
	<li> Mobil Uygulamalar </li>
</ul>

Ekran Görüntüsü

Ana liste içerisindeki  Web Tabanlı Uygulama Geliştirme  maddesi için ayrı bir liste açarak    HTML,  CSS,  JAVASCRIPT ve PHP maddelerini  ekleyelim. Bunun için Web Tabanlı Uygulama Geliştirme  maddesine ait <li> etiketi kapanmadan önce yeni liste etiketlerini yazmalıyız.. Yani yeni liste bu <li> elamanın içinde olacaktır.  

<h4> Ders ve Konular </h4>
<ul> <!-- sırasız liste-->
	<li> Web Tabanlı Uygulama Geliştirme
 
          <ol> <!-- sıralı liste-->
	         <li>HTML</li> 
	         <li>CSS </li> 
	         <li>JAVASCRIPT</li>
               <li>PHP</li>
          </ol>
   
       </li>
	<li> Grafik ve Canlandırma </li> 
	<li> Mobil Uygulamalar </li>
</ul>

Ekran Görüntüsü

Benzer işlemi Grafik ve Canlandırma maddesi içinde yapalım ve PHOTOSHOP ile AFTER EFFECTS maddelerini sıralı liste olarak Grafik ve Canlandırma maddesi altında gösterelim.

<h4> Ders ve Konular </h4>
<ul> <!-- sırasız liste-->
	<li> Web Tabanlı Uygulama Geliştirme
 
          <ol> <!-- sıralı liste-->
	         <li>HTML</li> 
	         <li>CSS </li> 
	         <li>JAVASCRIPT</li>
               <li>PHP</li>
          </ol>
   
       </li>
	<li> Grafik ve Canlandırma 

          <ol> <!-- sıralı liste-->
	         <li>PHOTOSHOP</li> 
	         <li>AFTER EFFECTS</li> 	     
          </ol> 

      </li> 
	<li> Mobil Uygulamalar </li>
</ul>

Ekran Görüntüsü

Son olarak açtığımız alt listelerin , altındada bir liste açalım. Örneğin JAVASCRIPT maddesinin altında KLASİK Js ve JQUERY maddelerini içeren sırasız bir liste oluşturalım. Mantığımız yine aynı olacak; hangi maddenin altında yeni bir liste oluşturulacaksa, o maddenin <li> etiketi kapanmadan önce yeni listenin etiketlerini ekleyeceğiz...

<h4> Ders ve Konular </h4>
<ul> <!-- sırasız liste-->
	<li> Web Tabanlı Uygulama Geliştirme
 
          <ol> <!-- sıralı liste-->
	         <li>HTML</li> 
	         <li>CSS </li> 
	         <li>JAVASCRIPT

                     <ul> <!-- sırasız liste-->
                         <li>KLASİK JS</li> 
	                   <li>JQUERY</li> 
                     </ul>

               </li>
               <li>PHP</li>
          </ol>
   
       </li>
	<li> Grafik ve Canlandırma 

          <ol> <!-- sıralı liste-->
	         <li>PHOTOSHOP</li> 
	         <li>AFTER EFFECTS</li> 	     
          </ol> 

      </li> 
	<li> Mobil Uygulamalar </li>
</ul>

Ekran Görüntüsü

Görüşmek üzere....