HTML Ders (4)
Merhabalar,
Bugün birlikte listeleme etiketlerine bakalım;
Sıralı liste oluşturmak için listeleme etiketlerini kullanırız. Word gibi programlarlarda ki listeleme olayının aynısıdır. Listeleme işlemi harf, rakam veya roma rakamı şeklinde yapılabilir.
İlk olarak ol etiketini görelim.
Ol etiketi li ile birlikte kullanılır. Her kodumuzu yazdığımız gibi bu etiketi de body içerisine yazıyoruz. Yapısı şu şekildedir.
Bu kod bize düz sıralama sağlayacaktır. Fakat ol'un yanına type="A" gibi bir terim eklediğimizde sıralamamız A'dan liste kaç haneliyse gidecektir Abcd gibi.. ol'un yanına type="I" yazarsak romen rakamı ile yazacaktır. I - II - III-IV gibi. Örneğin ol'un yanına yazdığımız type="A" nın yanınada start="3" yazarsak 3. harf olan C den başlayacaktır. Normal sayılardada 1 yerne üçten başlayacaktır. Hepsini bir arada yaptığımız örneğimizin kodu şu şekildedir.
Çıkan görüntü ise şu şekilde olacaktır ;
Kodumuzun ekran çıktısı ise şu şekilde olacaktır ;
Bugün birlikte listeleme etiketlerine bakalım;
Sıralı liste oluşturmak için listeleme etiketlerini kullanırız. Word gibi programlarlarda ki listeleme olayının aynısıdır. Listeleme işlemi harf, rakam veya roma rakamı şeklinde yapılabilir.
İlk olarak ol etiketini görelim.
Ol etiketi li ile birlikte kullanılır. Her kodumuzu yazdığımız gibi bu etiketi de body içerisine yazıyoruz. Yapısı şu şekildedir.
<ol>
<li>K</li>
<li>E</li>
<li>R</li>
<li>İ</li>
<li>M</li>
</ol>
Bu kod bize düz sıralama sağlayacaktır. Fakat ol'un yanına type="A" gibi bir terim eklediğimizde sıralamamız A'dan liste kaç haneliyse gidecektir Abcd gibi.. ol'un yanına type="I" yazarsak romen rakamı ile yazacaktır. I - II - III-IV gibi. Örneğin ol'un yanına yazdığımız type="A" nın yanınada start="3" yazarsak 3. harf olan C den başlayacaktır. Normal sayılardada 1 yerne üçten başlayacaktır. Hepsini bir arada yaptığımız örneğimizin kodu şu şekildedir.
<html>
<head>
<title>Başlık</title>
</head>
<body>
<ol>
<li>K</li>
<li>E</li>
<li>R</li>
<li>İ</li>
<li>M</li>
</ol>
<ol type="A">
<li>K</li>
<li>E</li>
<li>R</li>
<li>İ</li>
<li>M</li>
</ol>
<ol type="I">
<li>K</li>
<li>E</li>
<li>R</li>
<li>İ</li>
<li>M</li>
</ol>
<ol type="A" start="3">
<li>K</li>
<li>E</li>
<li>R</li>
<li>İ</li>
<li>M</li>
</ol>
</body>
</html>
Çıkan görüntü ise şu şekilde olacaktır ;
İkinci olarak ul etiketine geçelim..
Kullanımı aynı ol gibidir fakat bunda ki olay listelemeyi daire, kare ve içi dolu daire şeklinde yapabiliyor olmamız. ul'un yanına yazacağımız type="circle" komutu listemizin içi boş daire şeklinde gösterileceği anlamına gelir. ul'un yanına yazacağımız type="disc" komutu listemizin içi dolu daire şeklinde, ul'un yanına yazacağımız type="square" komutu ise listemizin kare şeklinde gösterileceği anlamına gelir.
Şimdi kodumuza bakalım ;
<html>
<head>
<title>Başlık</title>
</head>
<body>
<ul type="circle">
<li>K</li>
<li>E</li>
<li>R</li>
<li>İ</li>
<li>M</li>
</ul>
<ul type="disc">
<li>K</li>
<li>E</li>
<li>R</li>
<li>İ</li>
<li>M</li>
</ul>
<ul type="square">
<li>K</li>
<li>E</li>
<li>R</li>
<li>İ</li>
<li>M</li>
</ul>
</body>
</html>
Kodumuzun ekran çıktısı ise şu şekilde olacaktır ;
İstediğiniz şekilde üzerlerinde oynayabilir, takıldığınız yapamadığınız noktalarda bana mail gönderebilirsiniz.
İyi çalışmalar.
Yorum