Html'de madde işaretli listeler. Madde İşaretli Listeler

  • 02.08.2019

HTML dili, bilgileri listeler halinde sunmak için özel bir etiket seti sağlar. Listeler, hem elektronik hem de basılı belgelerde en yaygın kullanılan veri sunum biçimlerinden biridir. İster mağazadaki alışveriş ihtiyaçları listesi, ister sınıftaki öğrenciler veya basitçe yapılması gereken işler olsun, neredeyse her gün listelerle karşılaşıyoruz. Liste yapılarını düzenleme yeteneği birçok metin düzenleyicide mevcuttur, özellikle güçlü kelime işlemci Microsoft Word, çeşitli türlerdeki listeleri biçimlendirmek için uygun araçlara sahiptir (Microsoft Word kullanarak HTML listeleri oluşturma olanakları Bölüm 8'de tartışılmaktadır). Listeleri kullanmanın oldukça uygun olduğu birkaç durum:

  • Okunabilir bir görünüm vermek için bilgi parçalarını tek bir yapıda birleştirmek.
  • Karmaşık adım adım süreçlerin açıklaması.
  • Bilgilerin, paragrafları belgenin ilgili bölümlerine işaret eden bir içindekiler tarzında düzenlenmesi.

Yukarıdaki öğelerin yalnızca bir liste yapısı biçiminde düzenlendiğine dikkat edin.

HTML şu ana liste türlerini sağlar: madde işaretli, numaralandırılmış ve tanımlı liste. Aşağıdaki etiketler, çeşitli türlerdeki listeleri uygulamak için kullanılır:

    ,
      ,
      , , . Bir belgeye gömülü çeşitli liste türlerinin yardımıyla, açıklaması bu bölümün konusu olan çeşitli özellikler uygulanabilir. Çeşitli türlerdeki yapı listelerinin özellikleri ve iç içe listelerin kullanımı göz önünde bulundurulur.

      maddeli liste

      HTML'de uygulanan liste türlerinden biri madde işaretli listedir. Aksi takdirde, bu tür listeler sırasız veya sırasız olarak adlandırılır.

      düzensiz. Soyadı genellikle ilgili etiket adının resmi bir çevirisi olarak kullanılır.

        , HTML belgelerinde bu tür listelerin hangilerinin yardımıyla düzenlenir (UL - Sırasız Liste, sırasız liste).

        Madde işaretli bir listede, öğelerini vurgulamak için, liste işaretleri (genellikle madde işareti olarak adlandırılır ve İngilizce terim madde işaretinin resmi sesi olan madde işaretleri olarak adlandırılır) adı verilen özel karakterler kullanılır. Liste işaretçilerinin görünümü tarayıcı tarafından belirlenir ve iç içe listeler oluştururken, tarayıcılar farklı iç içe yerleştirme seviyelerindeki işaretçilerin görünümünü otomatik olarak çeşitlendirir.

        Etiketler

          Ve<LI >

          Madde işaretli bir liste oluşturmak için, içinde listenin tüm öğelerinin bulunduğu bir etiket kabı kullanmalısınız. Açılış ve kapanış listesi etiketleri, listeden önce ve sonra bir satır sonu sağlar, böylece listeyi belgenin ana içeriğinden ayırır, bu nedenle burada paragraf etiketlerini kullanmaya gerek yoktur.


          .

          Her liste öğesi bir etiketle başlamalıdır

        • (LI - Liste Öğesi, liste öğesi). Etiket
        • varlığı prensipte yasak olmasa da uygun bir kapanış etiketine ihtiyaç duymaz. Tarayıcılar, bir belgeyi görüntülerken genellikle her yeni liste öğesini yeni bir satırda başlatır.

          Yukarıdaki bilgiler, temel madde işaretli bir liste oluşturmak için yeterlidir. Burada, tarayıcı oluşturması Şekil 1'de gösterilen madde işaretli liste kullanan bir HTML belgesi örneği verilmiştir. 2.1.

          Madde İşaretli Liste Örneği

            Burç simgeleri:

            • Koç

            • Boğa Burcu

            • ikizler

            • Yengeç Burcu

            • bir aslan

            • Başak

            • terazi

            • Akrep

            • yay Burcu

            • Oğlak

            • Kova

            • Balıklar

          Pirinç. 2.1. Madde işaretli listenin tarayıcı görüntüsü

          etiketiyle işaretlenmiş liste öğelerine ek olarak

        • , diğer HTML öğeleri mevcut olabilir. Yukarıdaki örnekte, bu öğelerden biri, bir liste öğesi olmayan, ancak başlığın rolünü oynayan düz metindir.

          Not

          HTML dilindeki bazı ders kitaplarında, listenin başlığını ayarlamak için kapsayıcı etiketinin kullanılması gerektiğine dair bir gösterge vardır. (LH - Liste Başlığı, liste başlığı). Bu etiket şu anda yaygın tarayıcıların hiçbiri tarafından tanınmamaktadır ve HTML spesifikasyonunun bir parçası değildir. Böylece herhangi bir hataya yol açmasa da kullanımı anlamsız hale gelir.

          etikette

            iki parametre belirtilebilir: KOMPAKT ve TİP.

            COMPACT parametresi bir değer olmadan yazılır ve tarayıcıya verilen listenin kompakt biçimde görüntülenmesi gerektiğini belirtmek için kullanılır. Örneğin, bir listenin satırları arasındaki yazı tipi veya boşluk azaltılabilir, vb.

            Not

            Şu anda, etikette COMPACT parametresinin varlığı

              önde gelen tarayıcılar tarafından listelerin görüntülenmesini etkilemez. Bu nedenle, özellikle HTML 4.0 spesifikasyonu tarafından kullanımı önerilmediğinden, bu parametrenin kullanımı anlamsızdır.

              TYPE parametresi şu değerleri alabilir: disk, daire ve kare. Bu parametre, liste işaretçilerinin görünümünü zorlamak için kullanılır. İşaretçinin tam görünümü, kullandığınız tarayıcıya bağlı olacaktır. Tipik görüntüleme seçenekleri aşağıdaki gibidir:

              TYPE = disk - işaretler içi dolu daireler olarak görüntülenir; TYPE = daire - işaretler doldurulmamış daireler olarak görüntülenir; TYPE = kare - işaretçiler doldurulmuş kareler olarak görüntülenir. Kayıt örneği:

                .

                Varsayılan değer TYPE = disk'tir. İç içe madde işaretli listeler için varsayılan değer, birinci düzeyde disk, ikinci düzeyde daire ve üçüncü düzeyde kare şeklindedir. Netscape ve Internet Explorer tarayıcılarının en son sürümlerinde yapılan tam olarak budur. Diğer tarayıcıların işaretçileri farklı görüntüleyebileceğini unutmayın. Örneğin, HTML 4.0 belirtiminde, TYPE = square belirtildiğinde görüntülenen işaretleyici türü, bir kare anahat olarak belirtilir.

                Aynı değerlere sahip TYPE parametresi, tek tek liste öğeleri için işaretçilerin türünü belirtmek için kullanılabilir. Bunu yapmak için, liste öğesi etiketinde karşılık gelen değere sahip TYPE parametresinin belirtilmesine izin verilir.

              • .

                Kayıt örneği:

              • .

                Not

                Tarayıcılar, tek bir liste öğesi için işaretleyici tipinin göstergesini farklı yorumlar. Netscape tarayıcısı, bunun ve sonraki tüm olanlar için işaretçinin görünümünü, işaretçinin görünümünün bir sonraki yeniden tanımlanmasıyla karşılaşılıncaya kadar değiştirir. Internet Explorer yalnızca bu öğe için işaretçinin görünümünü değiştirir.

                Grafik işaretleyicileri listele

                Çekici, güzel tasarlanmış HTML belgeleri oluşturmak için yaygın olarak kullanılan liste işaretleri olarak grafik görüntüleri kullanabilirsiniz. Aslında bu olanak doğrudan HTML dili tarafından sağlanmaz, biraz yapay olarak uygulanır. Bu, tavsiye edilmediği veya ayıplanmadığı anlamına gelmez, sadece burada özel HTML dil yapıları kullanılmayacaktır.

                Bu fikri anlamak için listelerin HTML sayfalarında nasıl uygulandığını anlamanız gerekir. Görünüşe göre liste etiketi

                  (aşağıda tartışılan diğer türlerin liste etiketlerinin yanı sıra) tek görevi gerçekleştirir - tarayıcıya, bu etiketten sonra bulunan tüm bilgilerin bir miktar sağa (girinti) bir kayma ile görüntülenmesi gerektiğini belirtir. etiketler
                • Tek tek liste öğelerine işaret etmek, standart liste öğesi işaretçileri sağlar.

                  Grafik işaretleyicilerle bir liste oluşturmamız gerekiyorsa, etiketler olmadan da yapabiliriz.

                • . Listenin her bir elemanından önce istenen grafik görüntüsünü eklemek yeterli olacaktır. Bu durumda çözülmesi gereken tek iş, listenin öğelerini birbirinden ayırmaktır. Bunun için paragraf etiketlerini kullanabilirsiniz.

                  Veya zorla satır besleme
                  . Ekranı Şekil l'de gösterilen grafik işaretli bir listenin uygulanmasına bir örnek. 2.2 aşağıda gösterilmiştir:

                  maddeli liste

                    Burç simgeleri:

                      Koç

                      Boğa Burcu

                      ikizler burcu

                      Ambalaj

                      Aslan

                      Başak

                      terazi

                      Akrep

                      yay Burcu

                      Oğlak

                      Kova

                      Balıklar

                  Pirinç. 2.2. Grafik madde işaretleri içeren madde işaretli liste

                  Yukarıdaki örnekte, Green_ball.gif grafik dosyası bir liste öğesi işaretçisi olarak kullanılmıştır. HTML sayfalarında grafik kullanımının iletilen bilgi miktarını önemli ölçüde artırabileceğini unutmayın. Ancak bu durumda bu artış son derece küçüktür. Burada tüm işaretçiler için aynı dosya kullanılır,

                  bu sadece bir kez iletilecektir. Küçük bir resim içeren bir dosyanın boyutu da son derece küçüktür.

                  Not

                  Grafik işaretleyicilerle liste oluşturma teknikleri, sırasıyla Bölüm 8'de tartışılmaktadır.

                  numaralı liste

                  HTML'de uygulanan başka bir liste türü de numaralandırılmış listedir. Aksi takdirde, bu tür listelere sıralı denir. Soyadı genellikle ilgili etiket adının resmi bir çevirisi olarak kullanılır.

                    , bu tür listelerin HTML belgelerinde düzenlendiği yardımıyla (OL - Sıralı Liste, sıralı liste).

                    Bu tür listeler genellikle tek tek öğelerin sıralı bir dizisidir. Madde işaretli listelerden farkı, numaralı bir listede her öğenin önüne otomatik olarak bir seri numarası gelmesidir. Numaralandırma türü tarayıcıya bağlıdır ve liste etiketlerinin parametreleriyle ayarlanabilir. Aksi takdirde, numaralı listelerin uygulanması, madde işaretli listelerin uygulanmasına çok benzer.

                    Etiketler

                      Ve
                    1. Numaralandırılmış bir liste oluşturmak için, listenin tüm öğelerinin içinde bulunduğu bir kapsayıcı etiketi kullanmalısınız. Liste başlangıç ​​ve bitiş etiketleri, listeden önce ve sonra bir satır sonu sağlar, böylece listeyi belgenin ana içeriğinden ayırır.

                      Madde işaretli listede olduğu gibi, madde işaretli listedeki her öğe etiketle başlamalıdır.

                    2. .

                      Numaralandırılmış bir liste kullanan bir HTML belgesi örneği, kimin ekranı tarayıcı resimde gösterilmiştir. 2.3.

                      Numaralandırılmış liste örneği

                        Dünya'dan görülebilen en parlak yıldızlar:

                        • Sirius

                        • anapus

                        • Arkturus

                        • alpha Centauri

                        • vega

                        • K apella

                        • Rigel

                        • procyon

                        • Achernar

                        • Beta Erboğa

                        • Vetelgeuse

                        • Aldebaran


                          . . .

                        • Mizar


                          . . .

                        • kutup

                      Pirinç. 2.Z. numaralı liste

                      etikette

                        aşağıdaki parametreler belirtilebilir: KOMPAKT, TİP ve BAŞLAT.

                        COMPACT parametresi, madde işaretli listelerle aynı anlama sahiptir. TYPE parametresi, listenin nasıl numaralandırılacağını belirtmek için kullanılır. Aşağıdaki değerleri alabilir:

                        TYPE = A - işaretleri büyük Latin harfleri biçiminde ayarlar;

                        TYPE = a - işaretleri küçük Latin harfleri biçiminde ayarlar;

                        TİP = I - büyük Romen rakamları biçiminde işaretleri ayarlar;

                        TİP = i - işaretleri küçük Romen rakamları biçiminde ayarlar;

                        TİP = 1 - işaretleri Arap rakamları biçiminde ayarlar.

                        Varsayılan olarak, TYPE = 1 değeri her zaman kullanılır, yani Arap rakamları kullanılarak numaralandırma. Bu aynı zamanda iç içe sıralı listeler için de geçerlidir. Burada, madde işaretli listelerin aksine, tarayıcılar varsayılan olarak listelerin farklı iç içe yerleştirme seviyelerinde farklı numaralandırma yapmazlar. Liste elemanının numarasından sonra "nokta" işaretinin her zaman ek olarak görüntülendiğini unutmayın.

                        Aynı değerlere sahip TYPE parametresi, listenin tek tek öğelerinin nasıl numaralandırılması gerektiğini belirtmek için kullanılabilir. Bunu yapmak için, liste öğesi etiketinde karşılık gelen değere sahip TYPE parametresinin belirtilmesine izin verilir.

                      1. .

                        Kayıt örneği:

                      2. .

                        Etiket START parametresi

                          listeyi birden değil numaralandırmaya başlamanızı sağlar. BAŞLAT parametresinin değeri, liste numaralandırma türünden bağımsız olarak her zaman doğal bir sayı olmalıdır. İşte bir örnek:

                            .

                            Böyle bir gösterim, listenin büyük Latince "E" harfinden numaralandırılmasını belirler. Diğer numaralandırma türleri için, BAŞLAT=5 girişi numaralandırmayı sırasıyla "5" sayısından, Roma rakamından "V" vb.

                            Listenin numaralandırma türü ve sayıların değerleri de listenin herhangi bir elemanı için değiştirilebilmektedir. Etiket

                          1. numaralandırılmış listeler için TYPE ve VALUE parametrelerinin kullanımına izin verir. TYPE parametresi, etiketle aynı değerleri alabilir.
                              .

                              P kayıt örneği:

                            1. .

                              Not

                              Tarayıcılar, tek bir liste öğesi için numaralandırma türünün göstergesini farklı şekillerde yorumlar. Netscape tarayıcısı, bir sonraki geçersiz kılma ile karşılaşılıncaya kadar bu öğenin ve sonraki tüm öğelerin numaralandırmasını değiştirir. Internet Explorer yalnızca bu öğenin sayı görünümünü değiştirir.

                              Wetiketin VALUE parametresinin değeri

                            2. - listenin verilen öğesinin numarasını değiştirmenize olanak sağlar. Bu, sonraki tüm öğelerin numaralandırmasını değiştirir. Tipik bir kullanım, bazı öğelerin atlandığı listeler içindir. Böyle bir listenin bir örneği yukarıda verilmiştir (Şekil 2.3). Enlemlerimizde açıkça görülebilen 58 ve 75 yerde yıldızların bulunduğu en parlak yıldızların sıralı bir listesini verir (Mizar, Büyükayı takımyıldızındaki en parlak yıldız ve Kuzey Yıldızı Küçükayı'dır).

                              İşte çeşitli türlerde numaralandırma kullanımının başka bir orijinal örneği. Aşağıdaki HTML kodu, farklı numaralandırmaya sahip üç liste tanımlar. Görüntüleme kolaylığı için, listelerin her biri tablonun ayrı bir hücresine yerleştirilir. Her üç liste de aynıdır ve yalnızca numaralandırma türünde farklılık gösterir: tablonun ilk sütununda - Arap rakamları, ikinci - Roma ve üçüncüsü Latin harfleriyle numaralandırma. Listenin öğelerinin boş olduğunu, yani herhangi bir etiketten sonra olduğunu unutmayın.

                            3. Veri yok. Bu türden bir örnek, Arap ve Romen rakamları arasında bir yazışma tablosu olarak kullanılabilir. Sağlanan HTML kodunu yazdığınız sürece, listeleri destekleyen herhangi bir tarayıcının böyle bir tablo oluşturmak için kullanılabileceği ortaya çıktı (Şekil 2-4). Romen rakamlarıyla numaralandırma 3999 değerine kadar doğru çalışmaktadır. Sağdaki sütunu inceleyerek Latin harfleriyle numaralandırmanın nasıl yapıldığını anlayabilirsiniz. Tek harfli numaralandırmanın (A'dan Z'ye) tükenmesinden sonra, ilk iki harfli sayı - AA vb. sonraki sayı olarak alınır.

                              Listelerde farklı numaralandırma türleri kullanma


                                1. . . .


                              1. . . .


                              1. . . .

                              Pirinç. 2.4. Farklı HTML Liste Numaralandırma Türleri

                              Tanımların listesi

                              Terim tanım sözlükleri olarak da adlandırılan tanım listeleri, özel bir liste türüdür. Diğer liste türlerinden farklı olarak, bir tanım listesinin her bir öğesi her zaman iki bölümden oluşur. Liste elemanının ilk kısmı tanımlanan terimi içerir ve ikinci kısım, terimin anlamını ortaya çıkaran bir sözlük girişi şeklinde metni içerir.

                              Tanım listeleri, kapsayıcı etiketi kullanılarak belirtilir

                              (Tanım Listesi). Kapsayıcı etiketinin içinde
                              (Tanım Terimi) tanımlanan terim işaretlenir ve etiket
                              (Tanım Açıklama) - tanımı ile bir paragraf. Etiketler için
                              Ve
                              uygun bitiş etiketlerini atlayabilirsiniz.

                              Genel olarak, tanımların listesi aşağıdaki gibi yazılmıştır:

                              Terim

                              Terimin tanımı

                              Etiketten sonraki metinde

                              paragraf etiketleri gibi blok düzeyinde öğeler kullanılamaz

                              veya manşetler

                              -

                              . Genel bir kural olarak, tanımlanan terimin metni tek satırda olmalıdır. Terim tanımını içeren metin, terim tanımından sonraki satırdan başlayarak (veya bazı tarayıcılarda satır satır) sağa girintili olarak görüntülenir. Etiketten sonra verilen bilgilerde
                              , blok düzeyinde öğeler yerleştirilebilir. Özellikle, tanım listelerinin iç içe olabileceği sonucu çıkar.

                              etikette

                              amacı yukarıda açıklanan diğer listelere benzer olan COMPACT parametresi belirtilebilir.

                              Burada bir tanım listesi kullanan bir HTML belgesi örneği verilmiştir:

                              Tanım listesi örneği

                              Tipik insan mizaçlarının sınıflandırılması,
                              kurulan

                              Hipokrat'ın görüşleri üzerine

                                balgamlı kişi

                                Pasif, çok güçlü, uyum sağlamada yavaş;
                                ruh hali sabittir, dış etkilere çok az duyarlıdır;
                                duygusal tepkilerin uyuşukluğu ve istemli aktivitede yavaşlık

                                iyimser

                                Aktif, enerjik, uyumlu, -
                                duygusal tepkilerin canlılığı ve hareketliliği, istemli tezahürlerin hızı ve gücü

                                choleric

                                Aktif, çok enerjik, kalıcı;
                                dürtüsellik ve duygusal tepkilerin gücü, şiddetli istemli tezahürler

                                melankolik

                                Pasif, yorması kolay, uyum sağlaması zor -
                                istemli tezahürlerin zayıflığı ve depresif ruh halinin baskınlığı, kendinden şüphe duyma

                              Verilen HTML belgesinin tarayıcıdaki görüntüsü Şekil 2'de gösterilmektedir. 2.5.

                              Pirinç. 2.5. Tanım listesi (bir sözlükteki bir grup girdiye benzer)

                              Tip Listeleri

                              Ve

                              Tip Listeleri

                              Ve önde gelen tarayıcılar tarafından destekleri hala sağlanıyor olsa da, artık pratik olarak kullanılmamaktadır. HTML 4.0 belirtiminde, bu liste türlerinin her ikisi de kullanımdan kaldırılmış olarak işaretlenmiştir. Bunun yerine, etiket tarafından belirtilen madde işaretli listelerin kullanılması önerilir.
                                .

                                Başlangıçta, bu tür listeler, geleneksel madde işaretli listelerden daha derli toplu olarak düşünülmüştür. Bu listelerin öğelerini yazma kurallarına göre, blok öğelerini kullanmalarına izin verilmedi, bu da bu tür listelerin iç içe yerleştirilmesinin imkansız olduğu anlamına gelir. Listenin her öğesi bir metin satırıydı.

                                gibi listeler için

                                liste öğesinin metninin uzunluğuna (24 karakter) bir sınır getirilmesi planlandı. Böyle bir kısıtlama izin verir

                                tür listeleri

                                /W anahtarı kullanılırken (birkaç sütunda) UNIX ve MS-DOS işletim sistemlerindeki dizinlerin listelenmesine benzer bir biçimde. Ayrıca, bu türdeki liste öğeleri için madde işaretleri görüntülenmiyordu.

                                Şu anda, bu tür listelerin daha fazla kullanılması önerilmediğinden, tüm bu fikirler uygulanmamıştır. Tarayıcıların modern sürümleri, bu türlerin listelerini, bu türlerin listeleriyle tamamen aynı şekilde oluşturur.

                                  .

                                  İç İçe Listeler

                                  Bir türden bir liste öğesinin, aynı türden veya başka türden bir listenin tamamını içermesi gereken zamanlar vardır. Bu, çok seviyeli veya iç içe listeler düzenleyecektir. HTML, farklı türdeki listelerin keyfi olarak iç içe geçmesine izin verir, ancak bunları düzenlerken dikkatli olunmalıdır.

                                  Aşağıda, görüntüsü Şekil 2'de gösterilen iç içe listeler içeren belgenin HTML kodu bulunmaktadır. 2.6. Bu örnekte, madde işaretli listenin her bir öğesinin kendi numaralandırılmış listesi vardır.

                                  İç içe liste örneği

                                    Bazı gezegenlerin uyduları

                                  • zempa

                                      1. ay

                                  • harita

                                      1. fobiler

                                      2. Deimos

                                  • Uranüs

                                      1. Ariel

                                      2. şemsiye

                                      3. titanya

                                      4. Oberon

                                      5. Miranda

                                  • Neptün

                                      1. Triton

                                      2. Nereid

                                    HTML'de uygulanan liste türlerinden biri madde işaretli listedir. Aksi takdirde, bu tür listeler sırasız veya sırasız olarak adlandırılır. Soyadı genellikle ilgili etiket adının resmi bir çevirisi olarak kullanılır.

                                      , HTML belgelerinde bu tür listelerin hangilerinin yardımıyla düzenlenir (UL - Sırasız Liste, sırasız liste).

                                      Madde işaretli bir listede, öğelerini vurgulamak için, liste işaretleri (genellikle madde işareti olarak adlandırılır ve İngilizce terim madde işaretinin resmi sesi olan madde işaretleri olarak adlandırılır) adı verilen özel karakterler kullanılır. Liste işaretçilerinin görünümü tarayıcı tarafından belirlenir ve iç içe listeler oluştururken, tarayıcılar farklı iç içe yerleştirme seviyelerindeki işaretçilerin görünümünü otomatik olarak çeşitlendirir.

                                      etiketler
                                        Ve

                                      Madde işaretli bir liste oluşturmak için, içinde listenin tüm öğelerinin bulunduğu bir kapsayıcı etiketi kullanmanız gerekir. Açılış ve kapanış listesi etiketleri, listeden önce ve sonra bir satır sonu sağlar, böylece listeyi belgenin ana içeriğinden ayırır, bu nedenle burada paragraf etiketlerini kullanmaya gerek yoktur.


                                      .

                                      Her liste öğesi bir etiketle başlamalıdır

                                    • (LI - Liste Öğesi, liste öğesi). Etiket
                                    • varlığı prensipte yasak olmamasına rağmen, karşılık gelen bir kapanış etiketine ihtiyaç duymaz. Tarayıcılar, bir belgeyi görüntülerken genellikle her yeni liste öğesini yeni bir satırda başlatır.

                                      Yukarıdaki bilgiler, temel madde işaretli bir liste oluşturmak için yeterlidir. Burada, tarayıcı oluşturması Şekil 1'de gösterilen madde işaretli liste kullanan bir HTML belgesi örneği verilmiştir. 2.1.

                                      Madde İşaretli Liste Örneği

                                      Burç simgeleri:

                                      • Koç

                                      • Boğa Burcu

                                      • ikizler

                                      • Başak

                                      • terazi

                                      • Akrep

                                      • yay Burcu

                                      • Oğlak

                                      • Kova

                                      • Balıklar

                                      Pirinç. 2.1. Madde işaretli listenin tarayıcı görüntüsü

                                      etiketiyle işaretlenmiş liste öğelerine ek olarak

                                    • , diğer HTML öğeleri mevcut olabilir. Yukarıdaki örnekte, bu öğelerden biri, bir liste öğesi olmayan, ancak başlığın rolünü oynayan düz metindir.

                                      Not

                                      HTML dilindeki bazı ders kitaplarında, listenin başlığını belirlemek için kapsayıcı etiketinin kullanılması gerektiğine dair bir gösterge vardır. (LH - Liste Başlığı, liste başlığı). Bu etiket şu anda yaygın tarayıcıların hiçbiri tarafından tanınmamaktadır ve HTML spesifikasyonunun bir parçası değildir. Böylece herhangi bir hataya yol açmasa da kullanımı anlamsız hale gelir.

                                      etikette

                                        iki parametre belirtilebilir: KOMPAKT ve TİP.

                                        COMPACT parametresi bir değer olmadan yazılır ve tarayıcıya verilen listenin kompakt biçimde görüntülenmesi gerektiğini belirtmek için kullanılır. Örneğin, bir listenin satırları arasındaki yazı tipi veya boşluk azaltılabilir, vb.

                                        Not

                                        Şu anda, etikette COMPACT parametresinin varlığı

                                          önde gelen tarayıcılar tarafından listelerin görüntülenmesini etkilemez. Bu nedenle, özellikle HTML 4.0 spesifikasyonu tarafından kullanımı önerilmediğinden, bu parametrenin kullanımı anlamsızdır.

                                          TYPE parametresi şu değerleri alabilir: disk, daire ve kare. Bu parametre, liste işaretçilerinin görünümünü zorlamak için kullanılır. İşaretçinin tam görünümü, kullandığınız tarayıcıya bağlı olacaktır. Tipik görüntüleme seçenekleri aşağıdaki gibidir:

                                          TYPE = disk - işaretler içi dolu daireler olarak görüntülenir; TYPE = daire - işaretler doldurulmamış daireler olarak görüntülenir; TYPE = kare - işaretçiler doldurulmuş kareler olarak görüntülenir. Kayıt örneği:

                                            .

                                            Varsayılan değer TYPE = disk'tir. İç içe madde işaretli listeler için varsayılan değer, birinci düzeyde disk, ikinci düzeyde daire ve üçüncü düzeyde kare şeklindedir. Netscape ve Internet Explorer tarayıcılarının en son sürümlerinde yapılan tam olarak budur. Diğer tarayıcıların işaretçileri farklı görüntüleyebileceğini unutmayın. Örneğin, HTML 4.0 belirtiminde, TYPE = square belirtildiğinde görüntülenen işaretleyici türü, bir kare anahat olarak belirtilir.

                                            Aynı değerlere sahip TYPE parametresi, tek tek liste öğeleri için işaretçilerin türünü belirtmek için kullanılabilir. Bunu yapmak için, liste öğesi etiketinde karşılık gelen değere sahip TYPE parametresinin belirtilmesine izin verilir.

                                          • .

                                            Kayıt örneği:

                                          • .

                                            Not

                                            Tarayıcılar, tek bir liste öğesi için işaretleyici tipinin göstergesini farklı yorumlar. Netscape tarayıcısı, bunun ve sonraki tüm olanlar için işaretçinin görünümünü, işaretçinin görünümünün bir sonraki yeniden tanımlanmasıyla karşılaşılıncaya kadar değiştirir. Internet Explorer yalnızca bu öğe için işaretçinin görünümünü değiştirir.

                                            Grafik işaretleyicileri listele

                                            Çekici, güzel tasarlanmış HTML belgeleri oluşturmak için yaygın olarak kullanılan liste işaretleri olarak grafik görüntüleri kullanabilirsiniz. Aslında bu olanak doğrudan HTML dili tarafından sağlanmaz, biraz yapay olarak uygulanır. Bu, tavsiye edilmediği veya ayıplanmadığı anlamına gelmez, sadece burada özel HTML dil yapıları kullanılmayacaktır.

                                            Bu fikri anlamak için listelerin HTML sayfalarında nasıl uygulandığını anlamanız gerekir. Görünüşe göre liste etiketi

                                              (aşağıda tartışılan diğer türlerin liste etiketlerinin yanı sıra) tek görevi gerçekleştirir - tarayıcıya, bu etiketten sonra bulunan tüm bilgilerin bir miktar sağa (girinti) bir kayma ile görüntülenmesi gerektiğini belirtir. etiketler
                                            • Tek tek liste öğelerine işaret etmek, standart liste öğesi işaretçileri sağlar.

                                              Grafik işaretleyicilerle bir liste oluşturmamız gerekiyorsa, etiketler olmadan da yapabiliriz.

                                            • . Listenin her bir elemanından önce istenen grafik görüntüsünü eklemek yeterli olacaktır. Bu durumda çözülmesi gereken tek iş, listenin öğelerini birbirinden ayırmaktır. Bunun için paragraf etiketlerini kullanabilirsiniz.

                                              Veya zorla satır besleme
                                              . Ekranı Şekil l'de gösterilen grafik işaretli bir listenin uygulanmasına bir örnek. 2.2 aşağıda gösterilmiştir:

                                              bu sadece bir kez iletilecektir. Küçük bir resim içeren bir dosyanın boyutu da son derece küçüktür.

                                              Not

                                              Grafik işaretleyicilerle liste oluşturma yöntemleri Bölüm 8'de sırasıyla tartışılmaktadır.

                                              - 2 oy ile 5 üzerinden 4.5

                                              Çoğu zaman, sitedeki belirli bilgiler listeler şeklinde sunulmalıdır.

                                              Listeler, çeşitli bilgileri organize etmenize ve sistematize etmenize ve bunları uygun bir biçimde ziyaretçiye sunmanıza olanak tanır.

                                              HTML'deki listeler üç çeşittir: madde işaretli listeler, numaralandırılmış listeler ve tanım listeleri. Bunları sırayla nasıl oluşturacağımızı görelim.

                                              İşaretli liste.

                                              Bu liste türü en yaygın kullanılanıdır. HTML'de madde işaretli liste, etiketler kullanılarak oluşturulur

                                              • . Aynı zamanda, listenin her bir öğesinin karşısına bir işaretleyici eklenir, varsayılan olarak bir daire şeklinde bir işaretleyicidir. Etiketlerin yardımıyla, içinde listenin öğelerinin bulunduğu bir kap oluşturulur: .

                                                Madde işaretli liste kodu şöyle görünür:

                                                • Bunun gibi seçenek
                                                • Bu seçenek
                                                • Bir çeşit seçenek

                                                Bu kodu kullanarak bir HTML sayfası oluşturmayı deneyebilir ve sonuç olarak aşağıdaki listeyi elde edebilirsiniz:

                                                Gördüğünüz gibi, listenin her öğesi yeni bir satırda bulunur ve sol, üst ve altta belirli girintiler oluşturulur. Listedeki her öğe, içi dolu bir daire (varsayılan olarak kullanılır), daire veya kare olabilen bir madde işaretiyle başlar. Etiket

                                                  işaretçinin stilinin ayarlandığı bir type özelliği vardır. Bu öznitelik aşağıdaki değerlere sahiptir:

                                                  • disk - daire;
                                                  • daire - daire;
                                                  • kare kare.

                                                  Disk değeri varsayılan olarak kullanılır.

                                                  Daire işaretli madde işaretli liste oluşturmaya bir örnek:

                                                  • Bunun gibi seçenek
                                                  • Bu seçenek
                                                  • Bir çeşit seçenek

                                                  Sonuç olarak, liste aşağıdaki formu alacaktır:

                                                  Kare işaretleyicilerle madde işaretli bir liste oluşturma:

                                                  • Bunun gibi seçenek
                                                  • Bu seçenek
                                                  • Bir çeşit seçenek

                                                  Liste şöyle görünecek:

                                                  type özelliği, bir etiketten daha fazlasına uygulanabilir

                                                    , aynı zamanda etikete
                                                  • . Bu şekilde, çeşitli işaretleyicilerle bir liste oluşturabilirsiniz.

                                                    • Bunun gibi seçenek
                                                    • Bu seçenek
                                                    • Bir çeşit seçenek

                                                    Sonuç aşağıdaki olacaktır:

                                                    Numaralandırılmış listeler.

                                                    HTML'deki numaralandırılmış listeler, her öğenin bir seri numarasına sahip olduğu listelerdir, etiket kullanılarak numaralandırılmış listeler oluşturulur.

                                                      ve etiketlerinde yuvalanmış
                                                      1. İlk satır
                                                      2. İkinci çizgi
                                                      3. üçüncü satır

                                                      Böyle bir liste şöyle görünür:

                                                      Varsayılan numaralandırma Arap rakamlarıdır. ama etiket

                                                        numaralandırmanın büyük harfle (type="A") veya küçük harfle (type="a") Latin harfleriyle, üstte Roma rakamlarıyla (type= "I") ve alt (type="i") kaydı.

                                                        Aşağıda kodun kısaltılmış versiyonları ve her durumda olabilecek numaralandırma türü bulunmaktadır.

                                                        Liste görünümü:

                                                        Liste görünümü:

                                                        Latin alfabesinin küçük harfleriyle numaralandırma:

                                                        Liste görünümü:

                                                        Liste görünümü:

                                                        Liste görünümü:

                                                        HTML'deki tanımların listesi.

                                                        Tanım listeleri, özel bir liste türüdür. Listedeki her bir öğenin, anlamını ortaya çıkaran bir terim ve metin olmak üzere iki öğeden oluşması bakımından farklılık gösterirler. Bu listeler etiketler kullanılarak oluşturulur

                                                        . Etiket
                                                        liste için bir kap oluşturur, etiket
                                                        terimi ve etiketi ayarlar
                                                        bir terimin tanımı veya tanımı.

                                                        Bu liste şu şekilde yazılmıştır:

                                                        1. dönem
                                                        1. terimin tanımı
                                                        2. dönem
                                                        2. terimin tanımı
                                                        3. dönem
                                                        3. terimin tanımı

                                                        Bu, aşağıdaki listeyle sonuçlanacaktır:

                                                        Gördüğünüz gibi, bu terim ve tanım metni için uygun girintiler oluşturur.

                                                        HTML'de iç içe veya çok düzeyli listeler.

                                                        Bazen, belirli bir liste türünün bir öğesinde başka bir listeyi yerleştirmek gerekir. HTML, listeleri diğer listelerin öğelerinin içine süresiz olarak yerleştirme yeteneğine sahiptir.

                                                        Örneğin, numaralandırılmış listeleri madde işaretli liste öğelerinin içine yerleştiren kod buradadır.

                                                        • Bunun gibi seçenek
                                                          1. İlk satır
                                                          2. İkinci çizgi
                                                          3. üçüncü satır
                                                        • Bu seçenek
                                                          1. İlk satır
                                                          2. İkinci çizgi
                                                          3. üçüncü satır
                                                        • Bir çeşit seçenek
                                                          1. İlk satır
                                                          2. İkinci çizgi
                                                          3. üçüncü satır

                                                        HTML Listeleri ilgili bilgi parçalarını gruplamak için kullanılır. Üç tür liste vardır:

                                                        maddeli liste

                                                          - listenin her bir öğesi
                                                        • bir işaretleyici ile işaretlenmiş
                                                          numaralı liste
                                                            - listenin her bir öğesi
                                                          1. bir sayı ile işaretlenmiş
                                                            tanım listesi— — terim çiftlerinden oluşur
                                                            tanım.

                                                            Her liste, liste öğelerini veya terim tanım çiftlerini içeren bir kapsayıcıdır. Liste öğeleri, alt alta istiflenmiş ve kap bloğunun tüm genişliğini kaplayan blok öğeleri gibi davranır. Her liste öğesinin yanında, yerleşimin parçası olmayan ek bir kutusu vardır.

                                                            HTML Listeleri Oluşturma

                                                            1. Madde işaretli liste

                                                            maddeli liste sırasız bir listedir (İngilizce Sırasız Listesinden). Bir çift etiketi ile oluşturuldu

                                                            . Liste öğesi işaretçisi, doldurulmuş bir daire gibi bir etikettir.

                                                            Tarayıcılar varsayılan olarak liste kutusuna aşağıdaki biçimlendirmeyi ekler:

                                                            Listenin her elemanı bir çift etiketi kullanılarak oluşturulur.

                                                          2. (İngilizce Liste Öğesinden).
                                                            mevcut .
                                                          • Microsoft
                                                          • Google
                                                          • elma
                                                          Pirinç. 1. Madde işaretli liste

                                                          2. Numaralandırılmış liste

                                                          numaralı listeçift ​​etiketi kullanılarak oluşturuldu. Her liste öğesi ayrıca bir öğeyle oluşturulur

                                                        • . Tarayıcı, öğeleri otomatik olarak sırayla numaralandırır ve böyle bir listenin bir veya daha fazla öğesi silinirse, kalan sayılar otomatik olarak yeniden hesaplanır.

                                                          Liste bloğu ayrıca varsayılan tarayıcı stillerine sahiptir:

                                                        • seçilen liste öğesi için varsayılan numarayı değiştirmenize izin veren değer özelliği mevcuttur. Örneğin, listedeki ilk öğe olarak ayarlandıysa
                                                        • , ardından numaralandırmanın geri kalanı yeni değere göre yeniden hesaplanacaktır.

                                                          Etiket için

                                                            aşağıdaki nitelikler mevcuttur:

                                                            Tablo 1. Etiket özellikleri
                                                            Bağlanmak Açıklama, kabul edilen değer
                                                            tersine çevrilmiş Ters öznitelik, listenin ters sırada görüntülenmesini belirtir (örneğin, 9, 8, 7…).
                                                            Başlat start niteliği, numaralandırmanın başlayacağı başlangıç ​​değerini ayarlar, örneğin, yapı
                                                              ilk öğeye "10" seri numarası atanacaktır. Numaralandırma türünü aynı anda ayarlayabilirsiniz, örneğin,
                                                                .
                                                            tip type özelliği, listede kullanılacak işaretçinin türünü belirtir (harf veya sayı şeklinde). Kabul edilen değerler:
                                                            1 varsayılan değerdir, ondalık numaralandırma.
                                                            A - listenin alfabetik sıraya göre numaralandırılması, büyük harfler (A, B, C, D).
                                                            a - listenin alfabetik sıraya göre numaralandırılması, küçük harfler (a, b, c, d).
                                                            I - Roma büyük rakamlarıyla numaralandırma (I, II, III, IV).
                                                            i - Romen rakamlarıyla numaralandırma (i, ii, iii, iv).
                                                            1. Microsoft
                                                            2. Google
                                                            3. elma
                                                            Pirinç. 2. Numaralandırılmış liste

                                                            3. Tanımların listesi

                                                            Tanım Listeleri bir etiketle oluşturuldu

                                                            . Bir terim eklemek için bir etiket kullanılır
                                                            ve bir tanım eklemek için etiketi kullanın
                                                            .

                                                            Tanım listesi bloğu aşağıdaki varsayılan tarayıcı stillerine sahiptir:

                                                            Etiketler için

                                                            ,
                                                            Ve
                                                            mevcut .

                                                            Üretici:
                                                            Petr Tochilin
                                                            Döküm:
                                                            Andrey Gaydulyan
                                                            Alexey Gavrilov
                                                            Vitaly Gogunsky
                                                            Mariya Kozhevnikova
                                                            Pirinç. 3. Tanımların listesi

                                                            4. İç İçe Liste

                                                            Genellikle basit listelerin olanakları yeterli değildir, örneğin, bir içindekiler tablosu oluştururken onsuz yapamazsınız. iç içe öğeler. İç içe bir liste için işaretleme şöyle olacaktır:

                                                            • Paragraf 1.
                                                            • 2. nokta
                                                              • Fıkra 2.1.
                                                              • Alt madde 2.2.
                                                                • Fıkra 2.2.1.
                                                                • Alt madde 2.2.2.
                                                              • Fıkra 2.3.
                                                            • 3. nokta

                                                            Pirinç. 4. İç İçe Liste

                                                            5. Çok düzeyli numaralandırılmış liste

                                                            Farklı girintilere sahip farklı düzeylerdeki liste öğelerini görüntülemek için çok düzeyli bir liste kullanılır. Çok seviyeli numaralandırılmış bir liste için işaretleme şöyle olacaktır:

                                                            1. paragraf
                                                            2. paragraf
                                                              1. paragraf
                                                              2. paragraf
                                                              3. paragraf
                                                                1. paragraf
                                                                2. paragraf
                                                                3. paragraf
                                                              4. paragraf
                                                            3. paragraf
                                                            4. paragraf

                                                            Bu varsayılan işaretleme, iç içe geçmiş her liste için birden başlayarak yeni bir numaralandırma oluşturur. İç içe numaralandırma yapmak için aşağıdaki özellikleri kullanmanız gerekir:
                                                            sayaç sıfırlama, bir veya daha fazla sayacı sıfırlar ve sıfırlanacak bir değer verir;
                                                            karşı artış, sayaç artış değerini ayarlar, yani. sonraki her bir öğenin hangi adımda numaralandırılacağı;
                                                            içerik - oluşturulan içerik, bu durumda her liste öğesinden önce bir sayı görüntülemekten sorumludur.

                                                            Ol ( /* standart numaralandırmayı kaldır */ list-style: none; /* Sayacı tanımlayın ve ona li adını verin. Sayacın değeri belirtilmemiştir - varsayılan olarak 0'dır */ counter-reset: li; ) li:before ( /* Numaralandırılacak öğeyi tanımlarız - li. Before sözde öğesi, content özelliği kullanılarak eklenen içeriğin liste öğelerinden önce yerleştirileceğini belirtir. Sayaç artış değeri de burada ayarlanır (varsayılan is 1) */ sayaç artışı: li; / * Liste öğesinin numarası içerik özelliği kullanılarak çıkarılır.counters(), oluşturulan metnin o ada sahip tüm sayaçların değerleri olduğu anlamına gelir. Alıntılanan nokta ekler her liste öğesinin içeriğinden önce rakamlar arasına bir nokta ve boşluk içeren bir nokta eklenir */ content: counters(li,".") ". "; )
                                                            Pirinç. 5. Çok düzeyli numaralandırılmış liste

                                                        Numaralandırılmış listeler, seri numaralarına sahip bir dizi öğedir. Numaralandırmanın türü ve türü, etiket özelliklerine bağlıdır

                                                          , listeyi oluşturmak için kullanılır. Numaralandırılmış listedeki her öğe bir etiketle tanımlanır
                                                        1. Aşağıda gösterildiği gibi.

                                                          1. İlk nokta
                                                          2. İkinci paragraf
                                                          3. Üçüncü paragraf

                                                          Herhangi bir ek özellik belirtmezseniz ve sadece bir etiket yazarsanız

                                                            , ardından Örnek 11.3'te gösterildiği gibi varsayılan olarak Arapça sayılar (1, 2, 3,...) içeren liste kullanılır.

                                                            Örnek 11.3. Numaralandırılmış bir liste oluşturun

                                                            numaralı liste

                                                            Zamanla çalışmak

                                                            1. dakiklik yaratmak (hiçbir şeye asla geç kalmayacaksınız);
                                                            2. dakiklik tedavisi (asla hiçbir yere acele etmeyeceksiniz);
                                                            3. zaman ve saat algısında değişiklik.


                                                            Bu örneğin sonucu Şekil 2'de gösterilmektedir. 11.3.

                                                            Pirinç. 11.3. Numaralandırılmış liste görünümü

                                                            Numaralandırılmış listenin ayrıca metnin üstüne, altına ve soluna otomatik girinti eklediğini unutmayın.

                                                            Aşağıdaki değerler numaralandırma öğeleri olarak işlev görebilir:

                                                            • Arapça sayılar (1, 2, 3, ...);
                                                            • büyük Latin harfleri (A, B, C, ...);
                                                            • küçük latin harfleri (a, b, c, ...);
                                                            • büyük Romen rakamları (I, II, III, ...);
                                                            • küçük Romen rakamları (i, ii, iii, ...).

                                                            Etiketin type özelliği, numaralandırılmış listenin türünü belirtmek için kullanılır.

                                                              . Olası değerleri Tabloda verilmiştir. 11.2.

                                                              Sekme. 11.2. Numaralandırılmış Liste Türleri
                                                              Liste türü HTML Kodu Örnek vermek
                                                              Arap rakamları

                                                              1. Cheburashka
                                                              2. Timsah Gena
                                                              3. Şapoklyak
                                                              Latin alfabesinin büyük harfleri

                                                              A. Cheburashka
                                                              B. Timsah Gena
                                                              C. Şapoklyak
                                                              Latin alfabesinin küçük harfleri

                                                              a. Cheburashka
                                                              B. timsah cinsi
                                                              C. Shapoklyak
                                                              Büyük harflerle Romen rakamları

                                                              I. Cheburashka
                                                              II. timsah cinsi
                                                              III. Shapoklyak
                                                              Küçük harflerle Romen rakamları

                                                              i. Cheburashka
                                                              ii. timsah cinsi
                                                              iii. Shapoklyak

                                                              Listeyi belirli bir değerle başlatmak için etiketin start niteliğini kullanın.

                                                                . type ile hangi liste türünün ayarlandığı önemli değildir, start özelliği hem Romen hem de Arap rakamları için aynı şekilde çalışır. Örnek 11-4, sekiz ile başlayan büyük Romen rakamları kullanılarak bir listenin nasıl oluşturulacağını gösterir.

                                                                Örnek 11.4. Liste numaralandırma

                                                                Roma rakamları

                                                                1. Kral Magnum XLIV
                                                                2. Kral Siegfried XVI
                                                                3. Kral Sigismund XXI
                                                                4. Kral Husbrandt I


                                                                Bu örneğin sonucu Şekil 2'de gösterilmektedir. 11.4.

                                                                Pirinç. 11.4. Romen rakamlarıyla numaralandırılmış liste