HTML TEMELLERİ
HTML NEDİR ? HTML Başlık(Heading) HTML Paragraf(Paragraphs) HTML Yazı Stili(Font Style) HTML Yazı Formatları(Format Text) HTML Renk Kodları(Color Codes) HTML Link Verme-Ekleme HTML Resim Ekleme(Add a Image) HTML Tablo Ekleme(Add a Table) HTML Liste Ekleme(Add a List) HTML Web Site Penceresi Ekleme(Iframe) HTML Head ve Meta Etiketleri HTML Semboller(Symbols) HTML Form HTML Form Elemanları(Form Elements) HTML Form Giriş Özellikleri (Form Input Properties)
HTML5
İLERİ SEVİYE
HTML 5 NEDİR? HTML Sayfa Bölümleri HTML Form Giriş(Input) Özellikleri HTML Form Elementleri HTML Form Özellikleri(Form Properties) HTML Canvas Kullanımı HTML SVG Kullanımı HTML Video Ekleme-Oynatma(Video Player) HTML Ses Ekleme-Oynatma(Audio Player)
CSS TEMELİ
CSS NEDİR ? CSS CSS-HTML İlişkisi CSS Backgrounds(Arkaplan) CSS Border(Kenarlık) CSS Margins(Dış Boşluk) CSS Padding(İç Boşluk) CSS Height and Width(Yükseklik ve Genişlik) CSS Box Model(Kutu Modeli) CSS Outline(Dış Çizgi) CSS Text(Metin) CSS Fonts(Yazı) CSS Icons(Ikon) CSS Links CSS List(Liste) CSS Tables(Tablolar) CSS Display(Görüntü-Ekran) CSS Layout - Width and Max-width(Yerleşim - Genişlik ve Max Genişlik) CSS Positon(Durum) CSS Overflow(Taşma) CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği) CSS Image Opacity / Transparency(Opaklık/Saydamlık) CSS Navigation Bar(Gezinme Menüsü)
html add a list item
html add listener
html add list items
html sırasız liste türleri
html sıralı liste
html sıralı liste örnekleri
html sıralı liste oluşturma
html sıralı liste kodu
html sıralı listeleme
html sıralı liste etiketi
html sıralı sırasız listeler
html de sıralı liste oluşturma
html dilinde sıralı liste oluşturmak
html sıralı liste kodu
html sıralı liste örnekleri
html sıralı liste oluşturma
html sıralı listeleme
html sıralı liste etiketi
html de sıralı liste oluşturma
html list ul style
html list types
html list types style
html list type style
html list and types
html ul disc
html list style disc
html ul circle
html ul circle size
html ul square
html square list item

HTML Liste Ekleme(Add a List)

HTML Liste Ekleme(Add a List)
Html
<ul>


    <li>Kahve</li>


    <li>Çay</li>


    <li>Meyve Suyu</li>


</ul>


<ul type="square">


    <li>Kahve</li>


    <li>Çay</li>


    <li>Meyve Suyu</li>


</ul>


<ol>


    <li>Kahve</li>


    <li>Çay</li>


    <li>Meyve Suyu</li>


</ol>


<ol type="a">


    <li>Kahve</li>


    <li>Çay</li>


    <li>Meyve Suyu</li>


</ol>

Web Sayfamıza liste eklemek isteyebilirsiniz. Mesela 'İçecekler' konulu bir yazınız vardır.İçecekleri; kahve, çay, meyve suyu diye liste oluşturabilirsiniz ve bu listedeki elemanlara link vererek ilgili sayfaya yönlendirebilirsiniz.(Link verme dersimize bakabilirsiniz.).Fazla uzatmadan nasıl yaparız ona bir bakalım..

Listeler sıralı ve sırasız liste olarak ikiye ayrılıyor;

1-Sırasız Liste

Sırasız listeler, listelerin başında sayaç bulunmayan yani listemizin sırasını bilemediğimiz simgelerden oluşan listelerdir.

Kullanımı:

<ul>


    <li>Kahve</li>


    <li>Çay</li>


    <li>Meyve Suyu</li>


</ul>

Gördüğünüz bu örnekte listemizde kaç tane eleman olduğunu bilmiyoruz.

Nasıl Yani 3 Tane Ya İşte ?

Tabi üç tane bunda bir yanlışlık yok fakat bu listede gözümüzle bile kaç tane olduğunu görebiliyoruz. Yani bu listede 30-40 tane eleman olsaydı o zaman teker teker saymamız gerekecek bu da hem yorucu hem zaman kaybı.

Peki ya nasıl kolay yoldan kaç tane olduğunu öğreneceğiz?

Bunun için sıralı liste kullanmalısın onu birazdan göstereceğim.

Ama önce sırasız listemizde varsayılan olan tanımlanan "circle" yani yuvarlak simgemizi nasıl değiştirebiliriz ona bir bakalım.Bunun için sırasız liste etiketimiz olan <ul> ye parametre vermemiz gerekecek.

Parametreler

type: Sadece <ul> etiketinde kullanılan bu parametre sırasız listenin elemanlarının simgesini değiştiriyor.Değerleri ise disc(içi dolu yuvarlak), circle (içi boş yuvarlak), square(içi dolu kare) değerlerini alır.

Kullanımı

<ul type="square">


    <li>Kahve</li>


    <li>Çay</li>


    <li>Meyve Suyu</li>


</ul>

2-Sıralı Liste

Sıralı listeler, başlangıçtan bitişe kadar numaralı olan listelerdir ve sizin saymanıza gerek olmadan o kendisi numara verir.

Kullanımı

<ol>


    <li>Kahve</li>


    <li>Çay</li>


    <li>Meyve Suyu</li>


</ol>

Tabi bu numaraların çeşitleri vardır. Bunun için yine aynı parametre yani "type" parametresini kullanacağız.Çeşitler çok olduğu için alt alta yazıyorum.

type değerleri

1: Birden başlayarak değer alır.

A: Büyük harflerle sırasıyla değer alır.

a: Küçük harflerle sırasıyle değer alır.

I: Büyük romen rakamları ile değer alır.

i: Küçük romen rakamları ile değer alır.

Bir örnek yapalım kalanlarını kod editörümde deneyebilirsiniz.

Kullanımı

<ol type="a">


    <li>Kahve</li>


    <li>Çay</li>


    <li>Meyve Suyu</li>


</ol>

Not: Sıralı listelere type parametresi yazmasanız varsayılan olarak birden başlayacaktır.



Paylaş:

Enes KILIÇ
Webmaster