HTML Etiketler 3

WEB Tasarımı ve Programlama 11 Aralık 2018 - 11:55 297 KEZ OKUNDU 0 YORUM YAPILDI

HTML Etiketler 3
Sayfayı Paylaş...
  •  
  • 4
  • 1
  •  
  •  

Listeleme Etiketleri

Web sayfalarında iki çeşit liste kullanılır. Bunlar sıralı (ordered) ve sırasız (unordered) listelerdir.

1 2 3 …, a b c … yada I II III IV … şeklinde başında sıra numarası bulunan listeler sıralı listelerdir. <ol> …. </ol> etiketleri ile oluşturulurlar.

Başında ●, ○ ve ▪ gibi işaretlerin bulunduğu listeler ise sırasız listelerdir. <ul> …. </ul> etiketleri ile oluşturulurlar.

Listeye bir madde eklemek için <li> …. </li> etiketi kullanılır.

Etiket

Parametreler

Açıklama

<ol>

type

Listeleme tipini belirler. Örn: type=”a”
1 : Onluk tabanda numaralama (1,2,3,4,…)
i : Küçük rakamlarla roma rakamları (i,ii,iii,iv,…)
I : Büyük rakamlarla roma rakamları (I,II,III,IV,…)
a : Küçük harflerle alfabetik (a,b,c,…)
A : Büyük harflerle alfabetik (A,B,C,…)

start

Listenin başlangıç değerini belirtir. Her zaman sayı olmalıdır.

Örn: start=”3”

<ul>

type

disc: İçi dolu bir daire görüntüler.
circle: İçi boş bir daire görüntüler.
square: İçi dolu kare görüntüler.

Örnek 1: Aşağıdaki sıralı listeyi oluşturalım.

Kodlar çalıştırıldığında web sayfamız aşağıdaki gibi görüntülenecektir.

Örnek 2: Aşağıdaki sırasız listeyi oluşturalım.

Kodlar çalıştırıldığında web sayfamız aşağıdaki gibi görüntülenecektir.

Örnek 3: Aşağıdaki sıralı listeyi oluşturalım.

Sayfa Görünümü

HTML Kodları

İç Donanım Birimleri

a. Anakart

b. İşlemci

c. RAM

<h3>İç Donanım Birimleri</h3>

<ol type=“a”>

            <li>Anakart</li>

            <li>İşlemci</li>

            <li>RAM</li>

</ol>

Örnek 4: Aşağıdaki sıralı listeyi oluşturalım.

Sayfa Görünümü

HTML Kodları

5. Anakart

6. İşlemci

7. RAM

<ol start=“5”>

            <li>Anakart</li>

            <li>İşlemci</li>

            <li>RAM</li>

</ol>

Örnek 5: Aşağıdaki sıralı listeyi oluşturalım.

Sayfa Görünümü

HTML Kodları

E. Anakart

F. İşlemci

G. RAM

<ol type=“A” start=“5”>

            <li>Anakart</li>

            <li>İşlemci</li>

            <li>RAM</li>

</ol>

Örnek 6: Aşağıdaki sırasız listeyi oluşturalım.

Sayfa Görünümü

HTML Kodları

               

  • Anakart
  • İşlemci
  • RAM

<ul type=“circle”>

            <li>Anakart</li>

            <li>İşlemci</li>

            <li>RAM</li>

</ul>

Örnek 7: Aşağıdaki sırasız listeyi oluşturalım.

Sayfa Görünümü

HTML Kodları

               

  • Anakart
  • İşlemci
  • RAM

<ul type=“square”>

            <li>Anakart</li>

            <li>İşlemci</li>

            <li>RAM</li>

</ul>

Örnek 8: Aşağıdaki iç içe listeleri oluşturalım.

Sayfa Görünümü

HTML Kodları

         

  1. Donanım Birimleri
                     

    • Anakart
    • İşlemci
    • RAM
    •           

         

  2. Programlar
                     

    • Word
    • Excel
    • Power Point
    •           

         

<ol>

     <li>Donanım Birimleri

          <ul type=“disc”>

               <li>Anakart</li>

               <li>İşlemci</li>

               <li>RAM</li>

          </ul>

     </li>

     <li>Programlar

          <ul type=“square”>

               <li>Word</li>

               <li>Excel</li>

               <li>Power Point</li>

          </ul>

     </li>

</ol>

HTML Etiketler 4 Konu Anlatımı için Tıklayınız…

(Metin Düzenleme Etiketleri)

web tasarımında temel ilkeler




BU KONULAR DA İLGİNİZİ ÇEKEBİLİR

HTML Etiketler 5

Bağlantı (Köprü - Link) Oluşturma

HTML Etiketler 4

Metin Düzenleme Etiketleri

HTML Etiketler 2

Web Sayfasının Genel Yapısı

HTML Etiketler 1

HTML(Hyper Text Markup Language)

BU MAKALEYE YORUM YAP