Önemli uyarı
Bu site yapım aşamasındadır ve henüz bitmemiştir.
Daha fazla yardım siteler eklenecek ve mevcut olanlar tamamlanacak, tüm dili kapsayan daha fazla ders eklenecek ve değiştirilecektir.
Sitede veya bir derste fikirlerini belirtmek gibi farklı şekillerde bana yardımcı olabilirsin ve bu beni çok mutlu edecektir.
Sitede reklam göstermediğimi bilerek, daha iyi bir site oluşturmak yardımcı olması için reklam engelleyiciyi kapatabilirsin.
reklam engelleyiciyi kapatmak, sitenin istatistiklerini yükseltmeme yardımcı oluyor.
anlayışınız için teşekkür ederim.
adblock photo
Ara
  • Temel Bilgileri
  • HTML Dile Genel Bakış
  • HTML Editörler
  • HTML Temelleri
  • Paragraf Koordinasyon
  • HTML Paragrafları
  • HTML Başlıklar
  • HTML Metin Biçimlendirme
  • HTML Metin Düzenleme
  • HTML Alıntılar
  • HTML Kod biçimlendirme
  • HTML Bağlantılar
  • Listeler ve Tablolar
  • HTML Tablolar
  • HTML Sıralamalı listeler
  • HTML Sırasız Listeler
  • HTML Açıklama listeleri
  • Medya ve Dahili Sayfalar
  • HTML Dosya Yolları
  • HTML Resimler
  • HTML Videolar
  • HTML Sesleri
  • HTML Iframe
  • Form oluşturma
  • HTML Formlar
  • HTML Form Öğeleri Adresleme
  • HTML Form Giriş Alanları
  • HTML Formda Normal Düğmeler
  • Diğer dersler
  • Database - Veritabanları
  • ens

K-kudo

HTML öğren

Menü

  • Ana Sayfa
  • Kod Editor
  • Kod Dönüştürücü
  • Color Picker
  • Yardım
  • Araştırma

HTML Sıralamalı Listeler

önceki ders sonraki ders
Sayfa içeriği
  • › Sıralı listeler kavramı
  • › Sayfaya sıralı bir liste eklemek
  • ›Numaralandırma türleri
  • › Numaralandırmanın nerede başlıcağın belirtlemek
  • › Mevcut numaralandırmayı kesmek
  • › Liste rengini seçmek
  • › Liste içinde bir liste eklemek

Sıralı listeler kavramı

Sıralı bir liste, içine girilen her bir öğenin numarasıyla birlikte bir öğe grubunu görüntülemeyi amaçlar.
Sıralı listelerin en önemli özelliklerinden biri numaralandırmayı istediğin gibi görüntüleyebilmeni, mesela normal sayıları, alfabetik karakterleri, Roman rakamlarını vb. görüntüleyebilmenidir.


Sayfaya sıralı bir liste eklemek

Genel olarak, tarayıcıya sayfada sıralı bir liste görüntülemek istediğimizi bildirmek için <ol> </ol> etiketini kullanılıyor.

İçine eklemek istediğimiz herhangi bir öğe <li> </li> etiketinin içine yerleştirilmelidir.

bilgi : ol, sıralı liste anlamına gelen "Ordered" kelimesinin kısaltmasıdır ve li, listedeki bir öğe anlamına gelen "item" kelimesinin kısaltmasıdır.

Aşağıdaki örnekte, içinde üç öğe bulunan sıralı bir liste ekledik.

  • <ol>
  •     <li>Apple</li>
  •     <li>Orange</li>
  •     <li>Mango</li>
  • </ol>
kod dene

Numaralandırma türleri

Önceki örnekte, sıralı listeye eklediğim her seçeneğin arkasında sayılar olduğunu fark ettin mi?

ben de bunu fark ettim,bunun adı numaralandırma denir.

Listenin numaralandırma türünü istediğin göre başka bir seçeneğe seçebilirsin.

Her elemanın başında görünecek numaralandırma türünü belirtmek için type özelliği <ol> etiketine ekleyebilir ve değer olarak aşağıdaki karakterlerden birini iletebilirsin:

  • type="A": Her öğeden önce büyük harflerle alfabetik bir numaralandırma gösterir.
  • type="a": Her öğeden önce küçük harflerle alfabetik bir numaralandırma gösterir.
  • type="I": Her öğeden önce büyük harflerle roman numaralandırmasını gösterir.
  • type="i": Her öğeden önce küçük harflerle roman numaralandırmasını gösterir.
  • type="1": Her öğeden önce normal numaralandırmayı gösterir ve bu, değeri kendini belirtmemiş olmanı durumunda ayarlanan varsayılan değerdir.

Aşağıdaki örnekte, numaralandırma türünü büyük harflerle alfasayısal olarak değiştirdim.

  • <ol type="A">
  •     <li>mai sakurajima</li>
  •     <li>miku nakano</li>
  •     <li>kaneki ken</li>
  • </ol>
kod dene

Aşağıdaki örnekte, numaralandırma türünü küçük harflerle alfasayısal olarak değiştirdim.

  • <ol type="a">
  •     <li>mai sakurajima</li>
  •     <li>miku chan</li>
  •     <li>kaneki ken</li>
  • </ol>
kod dene

Aşağıdaki örnekte, numaralandırma türünü büyük harflerle Roman rakamlarıyla değiştirdim.

  • <ol type="I">
  •     <li>mai</li>
  •     <li>sakurajima</li>
  •     <li>Mai Sakurajima</li>
  • </ol>
kod dene

Aşağıdaki örnekte, numaralandırma türünü küçük harflerle Roman rakamlarıyla değiştirdim.

  • <ol type="i">
  •     <li>java</li>
  •     <li>is other language than</li>
  •     <li>javascript</li>
  • </ol>
kod dene

Aşağıdaki örnekte, numaralandırma türünün normal bir numaralandırma olduğunu belirttim ve elbette varsayılan numaralandırma türü temelde sayısal olduğu için herhangi bir fark görmeyeceğiz.

  • <ol type="1">
  •     <li>Java</li>
  •     <li>javascript"ten</li>
  •     <li>tamamen farklı bir dildir</li>
  • </ol>
kod dene

Numaralandırmanın nerede başlıcağın belirtlemek

okuduğun gibi, numaralandırmanın nerede başlıcağın belirtmek ..

Listenin numaralandırmaya hangi numaradan başlayacağını belirtmek istiyorsan, <ol> etiketinin start özelliğini ekleyebilir ve başlamak istediğin numarayı iletebilirsin.

Aşağıdaki örnekte numaralandırmanın 5 ile başlayacağını belirttim.

  • <ol start="5">
  •     <li>mai sakurajıma</li>
  •     <li>miku nakano</li>
  •     <li>kaneki ken</li>
  • </ol>
kod dene

Aşağıdaki örnekte numaralandırmanın 3 rakamı ile başlayacağını ve numaralandırma türünün küçük harf olacağını belirttim.

  • <ol start="3" type="a">
  •     <li>Mai sakurajima</li>
  •     <li>miku nakano</li>
  •     <li>kaneki ken</li>
  • </ol>
kod dene

Mevcut numaralandırmayı kesmek

Numaralandırmanın ulaştığı sayının değerini değiştirmek istiyorsan, listedeki belirli bir elemandan başlayarak, elemana value özelliğini (yani <li> etiketine) ekleyebilir ve istediğin sayıyı iletebilirsin.

Aşağıdaki örnekte, dördüncü elemandaki numaralandırmayı 7 olarak değiştirdim.

  • <ol>
  •  <li>html</li>
  •  <li>css</li>
  •  <li>java script</li>
  •  <li value="7">ens</li>
  •  <li>k-kudo</li>
  •  <li>k-html</li> 
  • </ol>
kod dene

Liste rengini seçmek

Aşağıdaki örnekte listenin rengini kırmızı olarak ayarladım.

  • <ol style="color: #ff0000;" >
  • <li>mai sakurajima</li>
  • <li>miku nakano</li>
  • <li>kaneki ken</li>
  • </ol>
kod dene

"color" özelliğini ekledikten sonra bir renk kodu ekledim ve buradan istediğin renk için kod alabilirsin ..


Liste içinde bir liste eklemek

Liste öğesinin altında görünmesi için listeleri iç içe gösterebilirsin.
Özel bir liste ayarlamak istediğin herhangi bir öğe, öğenin içindeki listeyi bilmelidir.

Aşağıdaki örnekte iki öğe tanımladım ve her öğenin başka bir listesi var.

  • <ol>
  •     <!−− İçine koyduğumuz ilk öğe üç öğeden oluşan bir liste −−>
  •     <li>Front−End
  •         <ol>
  •             <li>HTML</li>
  •             <li>CSS</li>
  •             <li>Javascript</li>
  •         </ol>
  •     </li>
  •     <!−− İçine koyduğumuz ikinci öğe, iki öğeden oluşan bir liste −−>
  •     <li>Back−End
  •         <ol>
  •             <li>MySQL</li>
  •             <li>Aspnetcore</li>
  •         </ol>
  •     </li>
  • </ol>
kod dene
önceki ders sonraki ders

Kullanım Koşulları ve Gizlilik Politikası © 2021-2022 HTML öğren.