Html'de madde işaretli liste nasıl oluşturulur? Madde işaretli listeler numaralı listeler html - HTML Dersleri

İÇİNDE HTML dili Bilgileri listeler halinde sunmak için özel bir etiket seti sağlanmıştır. Listeler veri sunumunun en yaygın kullanılan biçimlerinden biridir. elektronik belgeler ve basılı olarak. Hemen hemen her gün listelerle karşılaşırız; bu listeler bir mağazada gerekli satın almaların, sınıftaki öğrencilerin veya sadece yapılması gereken şeylerin bir listesi olabilir. Liste yapılarını organize etme yeteneği birçok üründe mevcuttur. metin editörleriözellikle güçlü bir kelime işlemci Microsoft Wordçeşitli türlerdeki listeleri biçimlendirmek için kullanışlı araçlara sahiptir (istendiğinde HTML listeleri oluşturma yeteneği) Microsoft yardımı Word Bölüm 8'de ele alınmıştır). Liste kullanımının oldukça uygun olduğu bazı durumlar şunlardır:

Okunabilir bir görünüm oluşturmak için bilgi parçalarını tek bir yapıda birleştirmek.
Karmaşık adım adım süreçlerin açıklaması.
Belgenin ilgili bölümlerine işaret eden paragraflarla, içindekiler tablosu tarzında bilgilerin düzenlenmesi.

Yukarıdaki noktaların tam olarak bir liste yapısı biçiminde düzenlendiğini unutmayın.

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

, , . Bir belgeye yerleştirilmiş çeşitli liste türleri kullanılarak, açıklaması bu bölümün konusu olan çeşitli olasılıklar gerçekleştirilebilir. Çeşitli türlerde listeler oluşturmanın yanı sıra iç içe geçmiş listelerin kullanımı da dikkate alınmaktadır.

Maddeli liste

HTML'de uygulanan liste türlerinden biri madde işaretli listedir. Aksi halde bu türdeki listelere numarasız veya numarasız listeler denir.

düzensiz. Soyadı genellikle karşılık gelen etiketin adının resmi çevirisi olarak kullanılır.

Madde işaretli bir listede, öğelerini vurgulamak için liste işaretçileri adı verilen özel karakterler kullanılır (bunlara genellikle madde işaretleri denir; bu, İngilizce madde işareti teriminin resmi telaffuzudur). Liste işaretleyicilerinin görünümü tarayıcı tarafından belirlenir ve iç içe geçmiş listeler oluştururken tarayıcılar, işaretleyicilerin görünümünü farklı iç içe yerleştirme düzeylerinde 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ı kullanmanız gerekir. Açılış ve kapanış liste etiketleri listeden önce ve sonra satır sonu sağlayarak listeyi belgenin ana içeriğinden ayırır, böylece burada paragraf etiketi kullanmaya gerek kalmaz.

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

(LI - Liste Öğesi, liste öğesi). Etiket
varlığı prensipte yasak olmasa da karşılık gelen bir kapanış etiketi gerektirmez. Tarayıcılar genellikle bir belgeyi görüntülerken her yeni liste öğesini yeni bir satırda başlatır.

Sağlanan bilgiler basit bir madde imli liste oluşturmak için yeterlidir. Tarayıcı tarafından görüntüsü Şekil 2'de gösterilen, madde işaretli bir liste kullanan bir HTML belgesi örneği verelim. 2.1.

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

etiketiyle işaretlenen liste öğelerine ek olarak

, başka HTML öğeleri mevcut olabilir. Yukarıdaki örnekte bu öğelerden biri, liste öğesi olmayan ancak başlığı görevi gören düz metindir.

Not

HTML dilindeki bazı ders kitapları, listenin başlığını ayarlamak için bir kapsayıcı etiketinin kullanılması gerektiğini belirtir. (LH - Liste Başlığı, liste başlığı). Bu etiket şu anda herhangi bir yaygın tarayıcı tarafından tanınmıyor ve HTML spesifikasyonunun bir parçası değil. Böylece herhangi bir hataya yol açmasa da kullanımı anlamsız hale gelir.

Etikette

COMPACT parametresi 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 yazı tipi veya liste satırları arasındaki mesafe vb. azaltılabilir.

Not

Şu anda etikette COMPACT parametresinin varlığı

önde gelen tarayıcılarda listelerin görüntülenmesini hiçbir şekilde etkilemez. Bu nedenle, özellikle HTML 4.0 spesifikasyonu tarafından tavsiye edilmediğinden bu parametrenin kullanılması anlamsızdır.

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

TİP = disk - işaretleyiciler içi dolu daireler olarak görüntülenir; TİP = daire - işaretleyiciler açık daireler olarak görüntülenir; TİP = kare - işaretleyiciler içi dolu kareler olarak görüntülenir. Örnek giriş:

Varsayılan değer TYPE = disktir. İç içe madde işaretli listeler için varsayılan değer birinci düzeyde disk, ikinci düzeyde daire, üçüncü düzeyde ve sonrasında karedir. Bu tam olarak yapılan şey en son sürümler Netscape tarayıcıları ve İnternet Explorer. Lütfen diğer tarayıcıların işaretçileri farklı görüntüleyebileceğini unutmayın. Örneğin, HTML 4.0 spesifikasyonunda, TYPE = kare olduğunda görüntülenen işaretçinin türü, kare anahat olarak belirtilir.

Aynı değerlere sahip TYPE parametresi, tek tek liste öğeleri için işaretleyicilerin 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.

.

Örnek giriş:

Not

Tarayıcılar belirteç türünü farklı şekilde yorumluyor bireysel eleman liste. Netscape tarayıcısı, işaretçinin görünümünün bir sonraki yeniden tanımıyla karşılaşılıncaya kadar bunun ve sonraki tüm işaretçilerin görünümünü değiştirir. Internet Explorer işaretçinin görünümünü yalnızca şunlar için değiştirir: bu elementin.

Grafik listesi işaretçileri

Grafik görüntülerini, çekici, iyi tasarlanmış HTML belgeleri oluşturmak için yaygın olarak kullanılan liste madde işaretleri olarak kullanabilirsiniz. Aslında bu olasılık doğrudan HTML dili tarafından sağlanmamakta, biraz yapay olarak uygulanmaktadır. Bu, bunu yapmanın tavsiye edilmediği veya kınanmayacağı anlamına gelmez; yalnızca burada hiçbir özel HTML dili yapısının kullanılmayacağı anlamına gelir.

Bu fikri anlamak için listelerin HTML sayfalarına uygulanmasına yönelik mekanizmayı anlamanız gerekir. Liste etiketinin olduğu ortaya çıktı

Tek tek liste öğelerine işaret eden standart liste öğesi işaretçileri sağlar.

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

. Listenin her elemanının önüne istenilen grafik görselin eklenmesi yeterli olacaktır. Çözülmesi gereken tek sorun liste elemanlarının birbirinden ayrılmasıdır. Bunun için paragraf etiketlerini kullanabilirsiniz

Veya satır beslemesini zorlayın
. Gösterimi Şekil 2'de gösterilen grafik işaretleyicili bir listenin uygulanmasına bir örnek. 2.2 aşağıda gösterilmiştir:

Maddeli liste

Burç simgeleri:

Koç burcu

Boğa burcu

İkizler burcu

Kanser

Aslan

Başak

Terazi

Akrep

yay Burcu

Oğlak

Kova

Balık

Pirinç. 2.2. Grafik madde işaretleriyle madde işaretli liste

Yukarıdaki örnekte liste öğesi işaretçisi grafik dosyası Green_ball.gif. 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 aynı dosya tüm işaretleyiciler için kullanılır,

yalnızca bir kez iletilecektir. Küçük bir görüntünün dosya boyutları da son derece küçüktür.

Not

Grafik madde işaretleriyle listeler oluşturma teknikleri Bölüm 8'de sırasıyla tartışılmaktadır.

Numaralı liste

HTML'de uygulanan diğer bir liste türü de numaralı listedir. Aksi takdirde bu türdeki listelere sıralı listeler adı verilir. Soyadı genellikle karşılık gelen etiketin adının resmi çevirisi olarak kullanılır.

Listeler bu türden genellikle bireysel öğelerin sıralı bir dizisini temsil eder. Madde işaretli listelerden farkı, numaralandırılmış listede her öğenin önüne otomatik olarak bir seri numarasının 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

Numaralandırılmış bir liste oluşturmak için listenin tüm öğelerinin yer aldığı bir kapsayıcı etiketi kullanmalısınız. Açılış ve kapanış liste etiketleri listeden önce ve sonra satır sonu vererek listeyi belgenin ana içeriğinden ayırır.

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

Numaralandırılmış bir liste kullanan bir HTML belgesi örneğini burada bulabilirsiniz: hangisinin gösterimi tarayıcı Şekil 2'de gösterilmektedir. 2.3.

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

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

Sirius
K anopus
Arkturus
alpha Centauri
Vega
K appella
Rigel
Procyon
Achernar
Beta Centauri
Wetelgeuse
Aldebaran

. . .
Mizar

. . .
Kutupsal

Pirinç. 2.Z. Numaralı liste

Etikette

COMPACT parametresi madde işaretli listelerle aynı anlama sahiptir. TYPE parametresi liste numaralandırmanın türünü belirtmek için kullanılır. Aşağıdaki değerleri alabilir:

TİP = 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 - işaretleri büyük Romen rakamları biçiminde 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 değer her zaman TYPE = 1'dir, yani numaralandırma Arap rakamları kullanılarak yapılır. Bu aynı zamanda iç içe numaralandırılmış listeler için de geçerlidir. Burada, madde işaretli listelerden farklı olarak, tarayıcılar varsayılan olarak listelerin farklı iç içe geçme düzeylerinde numaralandırmayı farklı yapmaz. Liste öğesinin numarasından sonra her zaman ek bir "nokta" işaretinin bulunduğunu unutmayın.

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

.

Örnek giriş:

BAŞLAT etiketi parametresi

Bu giriş, büyük Latin harfi "E" ile başlayan listenin numaralandırmasını belirler. Diğer numaralandırma türleri için, BAŞLAT=5 girişi, numaralandırmayı sırasıyla "5" rakamından, Romen rakamı "V" vb.'den ayarlayacaktır.

Listenin herhangi bir elemanı için liste numaralandırma tipi ve sayı değerlerinin değiştirilmesi yapılabilir. Etiket

numaralı listeler için TYPE ve VALUE parametrelerinin kullanımına izin verir. TYPE parametresi etiketle aynı değerleri alabilir

Pörnek giriş:

.

Not

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

ZVALUE etiket parametresinin değeri
- belirli bir liste öğesinin sayısını değiştirmenize olanak sağlar. Bu, sonraki tüm öğelerin numaralandırmasını değiştirir. Tipik bir uygulama, bazı öğelerin eksik olduğu listelerdir. Böyle bir listenin bir örneği yukarıda verilmiştir (Şekil 2.3). En parlak yıldızların sıralı bir listesini sağlar; 58. ve 75. sıralar enlemlerimizde açıkça görülebilen yıldızları içerir (Mizar, Büyükayı takımyıldızındaki en parlak yıldızdır ve Polaris, Küçükayı takımyıldızındaki en parlak yıldızdır) .

Farklı numaralandırma türlerini kullanmanın başka bir orijinal örneğini verelim. Aşağıdaki HTML kodu farklı numaralandırmaya sahip üç liste içerir. Görüntüleme kolaylığı için listelerin her biri ayrı bir tablo 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ı, ikincisinde Romen rakamları ve üçüncüsünde ise Latin harfleriyle numaralandırma vardır. Lütfen liste öğelerinin boş olduğunu unutmayın; yani herhangi bir etiketten sonra

Veri yok. Bu türden bir örnek, Arap rakamlarıyla Romen rakamları arasındaki yazışma tablosu olarak kullanılabilir. Listeleri destekleyen herhangi bir tarayıcının böyle bir tablonun oluşturucusu olarak kullanılabileceği ortaya çıktı (Şekil 2.4), sadece verilen HTML kodunu yazmanız yeterli. Romen rakamlarıyla numaralandırma 3999 değerine kadar doğru çalışmaktadır. Sağdaki sütunu inceleyerek Roma harfleriyle numaralandırmanın nasıl yapıldığını anlayabilirsiniz. Tek harfli numaralandırma (A'dan Z'ye) bittiğinde, ilk iki harfli sayı bir sonraki sayı olarak alınır - AA vb.

Kullanım <a href="https://obanracer.ru/tr/operatory-vetvleniya-v-komande-select-preobrazovaniya-nvl-dlya-razlichnyh-tipov.html">çeşitli türler</a> listelerde numaralandırma

. . .

. . .

. . .

Pirinç. 2.4. Farklı HTML listesi numaralandırma türleri

Tanımların listesi

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 tanım listesinin her öğesi her zaman iki bölümden oluşur. Liste öğesinin ilk kısmı tanımlanmakta olan terimi içerir, ikinci kısmı ise terimin anlamını ortaya koyan sözlük girişi biçimindeki metni içerir.

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

(Tanım Terimi) tanımlanan terim işaretlenir ve etiketi

(Tanım Açıklama) - tanımıyla birlikte bir paragraf. Etiketler için

Ve

İlgili kapanış etiketlerini atlayabilirsiniz.

Genel olarak tanımların listesi şu şekilde yazılır:

Terim

Terimin tanımı

Etiketten sonraki metinde

Paragraf etiketleri gibi blok düzeyindeki öğeler kullanılamaz
Veya başlıklar
-
. Kural olarak tanımlanan terimin metni tek satırda yer almalıdır. Terimin tanımını içeren metin ile başlayarak görüntülenir. Sonraki satır(veya bazı tarayıcılarda bir satır) terimin tanımından sonra, sağa girintili olarak. Etiketten sonra yerleştirilen bilgilerde
, blok düzeyindeki öğeler konumlandırılabilir. Buradan özellikle tanım listelerinin iç içe yerleştirilebileceği sonucu çıkar.

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

Tanımların listesini kullanan bir HTML belgesi örneği:

Tanım listesi örneği

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

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

Balgamlı kişi

Pasif, çok çalışkan, uyum sağlamada yavaş;
istikrarlı ruh hali, dış etkenlere karşı çok az duyarlı;
duygusal tepkilerin uyuşukluğu ve istemli aktivitede yavaşlama

iyimser

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

Kolerik

Aktif, çok enerjik, ısrarcı;
duygusal tepkilerin aceleciliği ve gücü, iradenin şiddetli tezahürleri

Melankolik

Pasif, çabuk yorulan, 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 1'de gösterilmektedir. 2.5.

Pirinç. 2.5. Tanımların listesi (sözlükteki bir grup girişe benzer)

Liste türü
Ve

Liste türü
Ve önde gelen tarayıcılar tarafından hala desteklenmelerine rağmen şu anda pratik olarak kullanılmamaktadır. HTML 4.0 spesifikasyonunda bu liste türlerinin her ikisi de kullanımdan kaldırılmış olarak işaretlenmiştir. Bunun yerine etiketiyle belirtilen madde işaretli listelerin kullanılması önerilmektedir.
.

Bu tür listeler başlangıçta normal madde işaretli listelerden daha kompakt olacak şekilde tasarlandı. Bu listelerin öğelerinin yazılmasına ilişkin kurallara göre, bunlarda blok öğelerin kullanılmasına izin verilmiyordu, bu da bu tür listelerin iç içe yerleştirilmesinin uygulanmasının imkansız olduğu anlamına geliyordu. Her liste öğesi bir metin satırından oluşuyordu.

Gibi listeler için
“liste öğesinin metninin uzunluğuna (24 karakter) bir sınır getirilmesi planlandı. Böyle bir sınırlama türetmemize izin verecektir.

gibi listeler
dizinleri listelemeye benzer bir biçimde işletim sistemleri UNIX ve MS-DOS, /W anahtarını kullanırken (birden çok sütun). Ayrıca bu türdeki liste öğeleri için işaretçiler görüntülenmedi.

Şu anda, bu tür listelerin daha fazla kullanılması önerilmediğinden, tüm bu planlar uygulanmamıştır. Tarayıcıların modern sürümleri, bu türlerin listelerini, aşağıdaki gibi listelerle tamamen aynı şekilde görüntüler.
.

İç İçe Listeler

Bir türdeki liste öğesine aynı türdeki veya başka bir listenin tamamını eklemeniz gereken zamanlar vardır. Bu, çok düzeyli veya iç içe geçmiş listeler oluşturacaktır. HTML, çeşitli liste türlerinin keyfi olarak iç içe yerleştirilmesine 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 geçmiş listelere sahip bir belgenin HTML kodu bulunmaktadır. 2.6. Bu örnekte madde işaretli listedeki her öğe kendi numaralı listesini içerir.

İç içe liste örneği

Bazı gezegenlerin uyduları

Zempya

Ay

Mapc

Phobos

Deimos

Uranüs

Ariel

Şemsiye

Titanya

Oberon

Miranda

Neptün

Triton

Nereid

HTML'de uygulanan diğer bir liste türü de numaralı listedir. Aksi halde bu türdeki HTML listelerine sıralı listeler adı verilir. Soyadı genellikle karşılık gelen etiketin adının resmi çevirisi olarak kullanılır.
, bu türden hangi listelerin HTML belgelerinde düzenlendiğinin yardımıyla (OL - Sıralı Liste, sıralı liste).

Bu türdeki listeler genellikle tek tek öğelerin sıralı bir dizisinden oluşur. Madde işaretli listelerden farkı, numaralandırılmış listede her öğenin önüne otomatik olarak bir seri numarasının 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

Numaralandırılmış bir liste oluşturmak için listenin tüm öğelerinin yer aldığı bir kapsayıcı etiketi kullanmalısınız. Açılış ve kapanış liste etiketleri listeden önce ve sonra satır sonu vererek listeyi belgenin ana içeriğinden ayırır.
Madde işaretli listede olduğu gibi, numaralandırılmış listedeki her öğe etiketiyle başlamalıdır.
.
Numaralandırılmış bir liste kullanan bir HTML belgesi örneğini burada bulabilirsiniz: hangisinin gösterimi tarayıcı Şekil 2'de gösterilmektedir. 2.3.
Numaralandırılmış liste örneği
Dünya'dan görülebilen en parlak yıldızlar:
Sirius
K anopus
Arkturus
alpha Centauri
Vega
K appella
Rigel
Procyon
Achernar
Beta Centauri
Wetelgeuse
Aldebaran
Mizar
Kutupsal

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 liste numaralandırmanın türünü belirtmek için kullanılır. Aşağıdaki değerleri alabilir:
TİP = 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 - işaretleri büyük Romen rakamları biçiminde 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 değer her zaman TYPE = 1'dir, yani numaralandırma Arap rakamları kullanılarak yapılır. Bu aynı zamanda iç içe numaralandırılmış listeler için de geçerlidir. Burada, madde işaretli listelerden farklı olarak, tarayıcılar varsayılan olarak listelerin farklı iç içe geçme düzeylerinde numaralandırmayı farklı yapmaz. Liste öğesinin numarasından sonra her zaman ek bir "nokta" işaretinin bulunduğunu unutmayın.
Aynı değerlere sahip TYPE parametresi, tek tek liste öğelerinin numaralandırma stilini belirtmek için kullanılabilir. Bunu yapmak için, liste öğesi etiketinde karşılık gelen değere sahip TYPE parametresinin belirtilmesine izin verilir.
.
Örnek giriş:
.
BAŞLAT etiketi parametresi
listeyi birden başka bir şeyden numaralandırmaya başlamanıza olanak tanır. START 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:
.
Bu giriş, büyük Latin harfi "E" ile başlayan listenin numaralandırmasını belirler. Diğer numaralandırma türleri için, BAŞLAT=5 girişi, numaralandırmayı sırasıyla "5" rakamından, Romen rakamı "V" vb.'den ayarlayacaktır.
Listenin herhangi bir elemanı için liste numaralandırma tipi ve sayı değerlerinin değiştirilmesi yapılabilir. Etiket
numaralı listeler için TYPE ve VALUE parametrelerinin kullanımına izin verir. TYPE parametresi etiketle aynı değerleri alabilir
.
Örnek giriş:
.
Not
Tarayıcılar, tek bir liste öğesinin numaralandırma türünü farklı şekilde yorumlar. Netscape tarayıcısı, bir sonraki geçersiz kılmayla karşılaşılıncaya kadar bu öğenin ve sonraki tüm öğelerin numaralandırma türünü değiştirir. Internet Explorer sayının görünümünü yalnızca bu öğe için değiştirir.
VALUE etiket parametresinin değeri
- belirli bir liste öğesinin sayısını değiştirmenize olanak sağlar. Bu, sonraki tüm öğelerin numaralandırmasını değiştirir. Tipik bir uygulama, bazı öğelerin eksik olduğu listelerdir. Böyle bir listenin bir örneği yukarıda verilmiştir (Şekil 2.3). En parlak yıldızların sıralı bir listesini verir; 58. ve 75. sıralar enlemlerimizde açıkça görülebilen yıldızları içerir (Mizar, Büyükayı takımyıldızındaki en parlak yıldızdır ve Polaris, Küçükayı takımyıldızındaki en parlak yıldızdır) .

Farklı numaralandırma türlerini kullanmanın başka bir orijinal örneğini verelim. Aşağıdaki HTML kodu farklı numaralandırmaya sahip üç liste içerir. Görüntüleme kolaylığı için listelerin her biri ayrı bir tablo 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ı, ikincisinde Romen rakamları ve üçüncüsünde ise Latin harfleriyle numaralandırma vardır. Lütfen liste öğelerinin boş olduğunu unutmayın; yani herhangi bir etiketten sonra
Veri yok. Bu türden bir örnek, Arap rakamlarıyla Romen rakamları arasındaki yazışma tablosu olarak kullanılabilir. Listeleri destekleyen herhangi bir tarayıcının böyle bir tablonun oluşturucusu olarak kullanılabileceği ortaya çıktı (Şekil 2.4), sadece verilen HTML kodunu yazmanız yeterli. Romen rakamlarıyla numaralandırma 3999 değerine kadar doğru çalışmaktadır. Sağdaki sütunu inceleyerek Roma harfleriyle numaralandırmanın nasıl yapıldığını anlayabilirsiniz. Tek harfli numaralandırma (A'dan Z'ye) bittiğinde, ilk iki harfli sayı bir sonraki sayı olarak alınır - AA vb.
Listelerde farklı numaralandırma türlerini kullanma

. . .

Pirinç. 2.4. Farklı HTML listesi numaralandırma türleri

HTML üç listeyi destekler farklı şekiller, her birinin kendi parametreleri vardır:

– her bir öğesi bir seri numarasına (harf) sahip olan numaralandırılmış (sayılar veya harfler kullanılarak) bir liste;
– her öğenin yanına bir işaretleyicinin yerleştirildiği madde işaretli (numaralandırılmamış) bir liste (seri numarasını belirten sayısal veya alfabetik karakterler yerine);
– bir tanım listesi terimler ve tanımlar da dahil olmak üzere ad/değer çiftlerinden oluşur.

Numaralandırılmış listeler

Numaralandırılmış bir listede, tarayıcı belirli bir değerden (genellikle 1) başlayarak öğe numaralarını otomatik olarak sırayla ekler. Bu, kalan sayılar otomatik olarak yeniden hesaplanacağından, numaralandırmayı bozmadan liste öğelerini eklemenizi ve silmenizi sağlar.
Numaralandırılmış listeler bir blok öğesi kullanılarak oluşturulur
(İngilizce Sıralı Listeden - numaralı listeden). Konteynerin yanında
her liste öğesi için bir öğe yerleştirilir
(İngilizce Liste Öğesinden - liste öğesi). Varsayılan, Arapça rakamların yer aldığı numaralandırılmış bir listedir.
Etiket
aşağıdaki sözdizimine sahiptir:

öğe 1

öğe 2

öğe 3

Numaralandırılmış liste öğeleri, aşağıdaki örnekte gösterildiği gibi birden çok liste öğesi içermelidir:

Örnek: Numaralı Liste

Kendin dene "

Adım adım talimat

Anahtarı al

Anahtarı kilide sok

Anahtarı iki tur çevirin

Anahtarı kilitten çıkar

Kapıyı aç

Adım adım talimat

Anahtarı al

Anahtarı kilide sok

Anahtarı iki tur çevirin

Anahtarı kilitten çıkar

Kapıyı aç

Bazen mevcut HTML kodlarına baktığınızda şu argümanla karşılaşırsınız: tip elemanda
Numaralandırma türünü (harfler, Roma ve Arap rakamları vb.) belirtmek için kullanılır. Sözdizimi:

Burada: yazın – sembolleri listeleyin:

A - büyük Latin harfleri (A, B, C...);

a - küçük Latin harfleri (a, b, c...);

I - büyük Romen rakamları (I, II, III...);

i - küçük Romen rakamları (i, ii, iii...);

1 - Arap rakamları (1, 2, 3...) (varsayılan olarak kullanılır).

Listenin 1 dışında bir sayıyla başlamasını istiyorsanız bunu niteliğini kullanarak belirtmelisiniz. başlangıç etiket
.
Aşağıdaki örnekte büyük Romen rakamları ve başlangıç değeri XLIX:

Numaralandırma aynı zamanda bu özellik kullanılarak da başlatılabilir. değer, öğeye eklenen
Aşağıdaki şekilde:

Bu durumda listenin sıralı numaralandırması kesintiye uğrayacak ve bu noktadan sonra numaralandırma bu durumda yediden itibaren yeniden başlayacaktır.

Özellik kullanım örneği değer etiket
belirli bir liste öğesinin sayısını değiştirmenize olanak tanır:

Bu örnekte, "Birinci Liste Öğesi" 1 numara, "İkinci Liste Öğesi" 7 numara ve "Üçüncü Liste Öğesi" 8 numara olacaktır.

Numaralı Listeleri CSS ile Biçimlendirmek

Liste numaralarını değiştirmek için bu özelliği kullanmalısınız. liste stili türü CSS stil sayfaları:

Numaralandırılmış liste stilleri

Örnek Anlam Tanım
a, b, c alt alfa Küçük harf
A, B, C üst alfa Büyük harfler
ben, ii, iii alt-roma Küçük harflerle Romen rakamları
ben, II, III üst roman Büyük harflerle yazılmış Romen rakamları

Örnek: CSS Özelliği Uygulamak liste stili türü

Madde işaretli listeler

Madde işaretli listeler esas olarak numaralı listelere benzer, ancak sıralı öğe numaralandırması içermezler. Madde işaretli listeler bir blok öğesi kullanılarak oluşturulur
(İngilizce Sırasız Listeden - numarasız listeden). Numaralandırılmış listelerde olduğu gibi her liste öğesi bir etiketle başlar
. Tarayıcı her liste öğesine girinti koyar ve otomatik olarak madde işaretlerini görüntüler.
Etiket
aşağıdaki sözdizimine sahiptir:

İlk nokta

İkinci nokta

Üçüncü nokta

Aşağıdaki örnekte, varsayılan olarak her liste öğesinin önüne içi dolu daire biçiminde küçük bir işaretleyicinin eklendiğini görebilirsiniz:

Bir etiketin içinde
Yalnızca metnin yerleştirilmesi gerekli değildir; akış içeriğinin herhangi bir öğesinin (bağlantılar, paragraflar, resimler vb.)

İç İçe Listeler
Herhangi bir liste diğerinin içine yerleştirilebilir. Bir öğenin içinde
İç içe liste veya ikinci düzey liste oluşturulmasına izin verilir. Bir listeyi iç içe yerleştirmek için yeni listeyi öğenin içinde tanımlayın
zaten mevcut liste. Bir madde işaretli listeyi diğerinin içine yerleştirdiğinizde, tarayıcı ikinci düzey listenin madde işareti stilini otomatik olarak değiştirir. Herhangi bir liste diğerinin içine yerleştirilebilir. Aşağıdaki örnek, numaralandırılmış bir listenin ikinci öğesi içinde yer alan madde işaretli listenin yapısını göstermektedir.
Örnek: İç İçe Listeler

Kendin dene "

Pazartesi
Posta göndermek

Editöre ziyaret
Bir tema seçme

Dekoratif tasarım

Son rapor

Mesajların akşam görüntülenmesi

Salı
Programı gözden geçir

Resimleri gönder

Çarşamba...

Pazartesi

Posta göndermek

Editöre ziyaret

Bir tema seçme

Dekoratif tasarım

Son rapor

Mesajların akşam görüntülenmesi

Salı

Programı gözden geçir

Resimleri gönder

Çarşamba...

Madde İşaretli Listeleri Biçimlendirme

Degisim icin dış görünüş liste işaretçisi özelliği kullanılmalıdır liste stili türü CSS stil sayfaları:

Aşağıdaki örnek, madde işaretli listelerin farklı stillerini gösterir:

Örnek: Madde İşaretli Liste Stilleri

Kendin dene "

Kahve

Kahve

Kahve

Kahve

Disk:

Kahve

Süt

Daire:

Kahve

Süt

Kare:

Kahve

Süt

Hiçbiri:

Kahve

Süt

Grafik işaretçileri.

HTML'de grafik işaretleyicileri olan bir liste oluşturmak mümkündür. Liste işaretleyicilerinin standart daireler veya kareler olması başka bir şeydir ve geliştiricinin işaretleyiciyi sayfa tasarımına göre seçmesi başka bir şeydir. Liste öğelerini güzelleştirmek için sıklıkla küçük resimler kullanılır.
Normal bir işaretleyiciyi grafik işaretleyiciyle değiştirmek için özelliği değiştirin liste stili türü mülk başına liste stili resmi ve görselin URL'sini belirtin:

Örnek: Grafik İşaretleyiciler

Kendin dene "

Burç simgeleri

Boğa burcu

İkizler burcu

Burç simgeleri

Koç burcu

Boğa burcu

İkizler burcu

Tanım listeleri (açıklamalar)

Tanım listeleri, örneğin kişisel terimler sözlüğünüzü oluşturmak için çok faydalıdır. Her tanım listesi öğesinin iki bölümü vardır: terim ve tanımı.
Listenin tamamını bir öğeye yerleştirirsiniz
(İngilizce Tanım Listesinden - tanımlar listesinden). Etiketleri içerir
(İngilizce Tanım Teriminden - tanımlanmış bir kelime, terim) ve
(İngilizce Tanım Açıklama'dan - tanımlanmakta olan terimin açıklaması).
Tanım listeleri genellikle bilimsel, teknik ve eğitimsel yayınlarda kullanılır; bunları sözlükler, sözlükler, referans kitapları vb. derlemek için kullanırız.

Açıklama listesinin genel yapısı aşağıdaki gibidir:

İlk dönem

İlk dönemin açıklaması

İkinci dönem

İkinci dönemin açıklaması

Aşağıdaki örnek aşağıdakilerden birini göstermektedir: olası kullanımlar tanımların listesi:

Örnek: Tanım Listesi

Kendin dene "

World Wide Web - İngilizce'den. World Wide Web (WWW), üzerinde bulunan ilgili belgelere erişim sağlayan dağıtılmış bir sistemdir. çeşitli bilgisayarlar internete bağlanıldı. İnternet, bilgi aktarımı için tek bir değişim protokolü kullanan bir ağlar kümesidir. Bir web sitesi, bağlantılar ve tek tip bir tasarımla birbirine bağlanan bir dizi bireysel web sayfasıdır.

Dünya çapında Ağ

- İngilizceden World Wide Web (WWW), İnternet'e bağlı farklı bilgisayarlarda bulunan ilgili belgelere erişim sağlayan dağıtılmış bir sistemdir.

internet

— bilgi aktarımı için tek bir değişim protokolü kullanan bir dizi ağ.

İnternet sitesi

- bağlantılar ve tek tip bir tasarımla birbirine bağlanan bir dizi ayrı web sayfası.

Varsayılan olarak terimin metni tarayıcı penceresinin sol kenarına basılır ve terimin açıklaması aşağıda bulunur ve sağa kaydırılır.

Numaralandırılmış listeler, seri numaralarına sahip öğelerin bir koleksiyonudur. Numaralandırmanın türü ve türü etiket niteliklerine bağlıdır
Listeyi oluşturmak için kullanılır. Numaralandırılmış listedeki her öğe bir etiketle gösterilir
Aşağıda gösterildiği gibi.

İlk nokta

İkinci nokta

Üçüncü nokta

Herhangi bir ek özellik belirtmezseniz ve yalnızca etiketi yazarsanız
, bu durumda varsayılan, Örnek 11.3'te gösterildiği gibi Arap rakamlarını (1, 2, 3,...) içeren bir listedir.

Örnek 11.3. Numaralandırılmış bir liste oluşturun
Numaralı liste
Zamanla çalışmak

dakiklik yaratmak (asla hiçbir şeye geç kalmayacaksınız);

dakikliğin çaresi (asla acele etmeyeceksin);

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 kullanılabilir:

Arap rakamları (1, 2, 3, ...);

büyük Latin harfleri (A, B, C, ...);

küçük Latin harfleri (a, b, c, ...);

büyük Roma rakamları (I, II, III, ...);

küçük Roma rakamları (i, ii, iii, ...).

Numaralandırılmış listenin türünü belirtmek için etiketin type özelliğini kullanın.
. Olası değerleri tabloda verilmiştir. 11.2.
Masa 11.2. Numaralandırılmış liste türleri
Liste türü HTML Kodu Örnek
Arapça sayılar

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. Çeburaşka
B. Timsah Gena
C. Şapoklyak
Büyük harflerle Romen rakamları

I. Cheburashka
II. Timsah Gena
III. Şapoklyak
Küçük harflerle Romen rakamları

Ben. Çeburaşka
ii. Timsah Gena
iii. Şapoklyak
Belirli bir değerle bir liste başlatmak için etiketin start özelliğini kullanın.
. Type kullanılarak listenin hangi türe ayarlandığı önemli değildir, start niteliği hem Romen hem de Arap rakamlarıyla 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östermektedir.

Örnek 11.4. Liste numaralandırma
Roma sayıları

Kral Magnum XLIV

Kral Siegfried XVI

Kral Sigismund XXI

Kral Husbrandt I

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

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

HTML'de, organizasyonu veri yapılandırması için belirli kurallara uyması gereken listelerin düzenlenmesinden bir dizi etiket sorumludur.

Standart beşinci HTML sürümleri 3 tür liste desteklenir: numaralı listeler, madde işaretli listeler ve tanım listeleri. Ayrıca, iç içe geçmiş çok düzeyli listeler oluşturarak listeleri iç içe yerleştirme olanağı da sağlar.

Numaralı liste

Numaralı liste- bu, belirli bir sıraya sahip bir dizi öğedir (liste öğeleri). Numaralandırılmış bir listedeki her öğenin, listedeki diğer öğelere göre öğenin görünme sırasını belirten benzersiz bir işaretçisi vardır. Varsayılan olarak, numaralandırılmış liste öğesi işaretçileri sayılardır. İlk öğe 1, ikincisi 2 olarak numaralandırılır ve bu şekilde devam eder.

Numaralandırılmış listelerin en yaygın örnekleri, çeşitli yemeklerin hazırlanmasına yönelik tariflerdir. Herhangi bir tarif, açık bir eylem dizisine sahip, numaralandırılmış bir liste olduğundan.

HTML'de numaralandırılmış listeler oluşturmak için etiketini kullanın
, içinde veri içeren liste öğelerinin bulunduğu. Her liste öğesi bir etiket kullanılarak belirtilir
:

Numaralandırılmış liste:

Kahve

Çay

Süt

Denemek "
Not: etiket
gibi alt öğeler yalnızca etiket içerebilir
yani numaralı listenin tüm içeriği elemanların içine yerleştirilmelidir.
. Etiket
Buna karşılık içerikle ilgili herhangi bir kısıtlama yoktur, bu nedenle içine paragraflar, resimler, bağlantılar, tablolar, diğer listeler vb. yerleştirebilirsiniz.

Maddeli liste

Maddeli liste- bunlar numarasızdır, yani sırası önemli olmayan sırasız öğe listeleridir. Tüm madde işaretli liste öğeleri aynı madde işaretlerine sahiptir ve varsayılan olarak küçük siyah daireler halinde görünürler.

HTML'de madde işaretli listeler oluşturmak için etiketini kullanın
, listenin kendi öğelerinin bulunduğu yer (numaralandırılmış listelerde olduğu gibi, etiket
, listenin görüntülenen tüm içeriğini içerir):

Maddeli liste:

Kahve

Çay

Süt

Denemek "
İşaretleyici türleri

Numaralandırılmış liste madde işaretlerinin türleri type özelliği kullanılarak değiştirilebilir. Bu özellik beş tür işaretçiyi destekler:

Madde işaretli listelerin type özelliği yoktur, dolayısıyla madde işaretli listenin madde işareti türünü HTML kullanarak değiştiremezsiniz. İşaretçinin türünü değiştirmek için bu durumda şunu kullanabilirsiniz: CSS özelliği m list-style-type , bununla varsayılan değere ek olarak iki işaretçi türü daha seçebilirsiniz: daire veya kare.

Liste işaretçilerini değiştirme:
Sayfa başlığı
type = "a" özelliğine sahip numaralandırılmış liste:

Elmalar
Muz
Limonlar

type = "I" özelliğine sahip numaralandırılmış liste:

Elmalar
Muz
Limonlar

Madde işaretli liste işaretçilerinin türleri:

Elmalar
Muz
Limonlar

Elmalar
Muz
Limonlar

Denemek "
CSS özelliği list-style-type, madde işaretli listeler için işaretleyici türlerine ek olarak, numaralı listeler için birçok farklı işaretleyici türü içerir. Ancak bir standart işaretçi türünü diğerine değiştirmek, güzel bir liste oluşturmak için her zaman yeterli değildir. Listeleri tasarlamak için, yalnızca işaretçinin görünümünü değiştirmenize değil, aynı zamanda işaretçileri resimlerle değiştirmenize, konumlarını kontrol etmenize ve girintiyi kontrol etmenize de olanak tanıyan CSS'yi kullanmak daha iyidir. Tüm bunların nasıl yapılacağını görebilirsiniz.

Yatay liste

Yatay menü oluşturmak için HTML liste kutusu kullanıyorsanız, liste öğelerini aynı satırda arka arkaya düzenlemeniz gerekecektir. Bu HTML kullanılarak yapılamaz, dolayısıyla CSS kullanmanız gerekecektir.

Yatay bir liste oluşturmak için, kullanacağınız diğer özelliklere bağlı olarak liste öğeleri için inline veya inline-block değerine sahip bir CSS görüntüleme özelliği ayarlamanız gerekir.
Sayfa başlığı
Numaralı liste

Elmalar
Muz
Limonlar

Maddeli liste:

Elmalar
Muz
Limonlar

Denemek "
Bundan sonra tüm liste öğeleri tek bir satırda sıralanacaktır. Madde işaretlerinin liste öğelerinden kaybolacağını ve aralarında boşluk bile olmayacağını, ancak listenin sol girintisinin kalacağını lütfen unutmayın.

Yatay bir listeyi yatay menüye nasıl dönüştüreceğinizi görebilirsiniz.

Örnek	Anlam	Tanım
a, b, c	alt alfa	Küçük harf
A, B, C	üst alfa	Büyük harfler
ben, ii, iii	alt-roma	Küçük harflerle Romen rakamları
ben, II, III	üst roman	Büyük harflerle yazılmış Romen rakamları

Liste türü	HTML Kodu	Örnek
Arapça sayılar		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. Çeburaşka B. Timsah Gena C. Şapoklyak
Büyük harflerle Romen rakamları		I. Cheburashka II. Timsah Gena III. Şapoklyak
Küçük harflerle Romen rakamları		Ben. Çeburaşka ii. Timsah Gena iii. Şapoklyak

-

Tipik insan mizaçlarının sınıflandırılması, temelli Hipokrat'ın görüşleri üzerine

Etiketler Ve

Numaralandırılmış listeler

Örnek: Numaralı Liste

Numaralı Listeleri CSS ile Biçimlendirmek

Örnek: CSS Özelliği Uygulamak liste stili türü

Madde işaretli listeler

İç İçe Listeler

Örnek: İç İçe Listeler

Madde İşaretli Listeleri Biçimlendirme

Örnek: Madde İşaretli Liste Stilleri

Grafik işaretçileri.

Örnek: Grafik İşaretleyiciler

Tanım listeleri (açıklamalar)

Örnek: Tanım Listesi

Numaralı liste

Numaralandırılmış liste:

Maddeli liste

Maddeli liste:

İşaretleyici türleri

type = "a" özelliğine sahip numaralandırılmış liste:

type = "I" özelliğine sahip numaralandırılmış liste:

Madde işaretli liste işaretçilerinin türleri:

Yatay liste

Numaralı liste

Maddeli liste:

Öneririz

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

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

Etiketler
Ve