Html örneğinde liste oluşturma. Madde işaretli liste
Tanım listeleri belirli nesneleri ve bunların tanımlarını bir listede birbirine bağlar. Örneğin bir alışveriş listesindeki öğelere tanım eklemek istiyorsanız bunu şu şekilde yapabilirsiniz:
süt Beyaz sıvı süt ürünü. ekmek Undan yapılan bir gıda ürünü. tereyağı sarı katı bir süt ürünüdür. kahve çekirdekleri Bazı kahve ağaçlarının meyvelerinin tohumları.
Her tanım ve terim bir tanım grubudur (ya da isim-değer grubudur). İstediğiniz kadar tanım grubunuz olabilir ancak her grupta en az bir terim ve en az bir tanım bulunmalıdır. Tanımsız bir terim, terimsiz bir tanım olamaz.
Birden fazla terimi bir tanımla ilişkilendirmek veya tam tersini yapmak mümkündür. Örneğin, "kahve" teriminin birden fazla anlamı olabilir ve bunları arka arkaya gösterebilirsiniz:
kahve kavrulmuş, öğütülmüş kahve çekirdeklerinden yapılan bir içecek bir fincan kahve orta ila koyu kahverengi kahvenin içildiği bir toplantı
Alternatif olarak aynı tanıma sahip birden fazla terimin bulunması da mümkündür. Bu, tümü aynı anlama sahip olan bir terimin varyasyonlarını göstermek için kullanılır:
gazoz soda kola Tatlı, gazlı içecek
Tanım listeleri, liste nesneleri yerine tanımlanmış terimleri ve tanım açıklamalarını kullandıkları için diğer liste türlerinden farklıdır.
Bu nedenle tanım listeleri bir çift öğe kullanır
Tek bir tanım içeren bir terim için basit bir tanım listesi şuna benzer:
- Terim
- Terimin tanımı
- Terim
- Terimin tanımı
- Terim
- Terimin tanımı
Çıktısı şu şekilde:
Vade Terim tanımı Vade Terim tanımı Terim Terim tanımı
Bu örnekte, birden fazla terimi bir tanıma (veya tam tersi) bağlıyoruz:
- Terim
- Terimin tanımı
- Terim
- Terim
- Önceki her iki terim için de geçerli olan bir tanım
- Aşağıdaki tanımların her ikisine birden sahip olabilen bir terim
- Terimin bir tanımı
- Terimin başka bir tanımı
Aşağıdaki gibi sunulacaktır:
Terim Bir terimin tanımı Terim Terim Önceki terimlerin her ikisine de uygulanan bir tanım Aşağıdaki tanımların her ikisine de sahip olabilen bir terim Bir terimin bir tanımı Bir terimin başka bir tanımı
Birden fazla terimi tek bir tanımla ilişkilendirmek yaygın bir uygulama değildir ancak ihtiyaç duyulması halinde bunun mümkün olduğunu bilmekte fayda vardır.
Liste türü seçme
Belirli bir liste türünü kullanmaya karar verirken genellikle iki basit soru sorarak karar verebilirsiniz:
- Terimler tanımlanmış mı (veya diğer ad/değer çiftleri birleştirilmiş mi)?
- Cevabınız evet ise, tanım listesini kullanın.
- Değilse, tanım listesini kullanmayın; bir sonraki soruya geçin.
- Liste öğelerinin sırası önemli mi?
- Cevabınız evet ise sıralı bir liste kullanın.
- Değilse, kullanın düzensiz liste.
HTML listeleri ve metin arasındaki fark
Bir HTML listesi ile madde işaretli veya el yazısıyla yazılmış rakamlar içeren bir metin arasındaki farkın ne olduğu merak edilebilir. HTML listesi kullanmanın çeşitli avantajları vardır:
- Sıralı bir listedeki liste öğelerinin sırasını değiştirmeniz gerekiyorsa, bunları HTML kodunda hareket ettirmeniz yeterlidir. Rakamlar elle yazılmışsa, her şeyi gözden geçirmeniz ve sırayı düzeltmek için her bir öğenin sayısını değiştirmeniz gerekecektir - ki bu en hafif tabirle oldukça sıkıcıdır!
- Bir HTML listesi kullanmak, listeyi doğru şekilde biçimlendirmenize olanak tanır. Yalnızca büyük metin kullanırsanız, tek tek öğeleri az çok kullanışlı bir şekilde biçimlendirmek çok daha zor olacaktır.
- HTML listesi kullanmak, içeriğe yalnızca "liste benzeri" olmaktan ziyade uygun bir anlamsal yapı kazandırır görsel efekt. Bunun önemli faydaları vardır çünkü ekran okuyucuların, görme engelli kullanıcılara, kafa karıştırıcı bir metin ve sayı karışımını okumak yerine bir liste okuduklarını söylemelerine olanak tanır.
Öte yandan: metin ve listeler aynı şey değildir. Liste yerine metin kullanmak daha fazla çalışma gerektirir ve belge okuyucular için sorun yaratabilir. Bu nedenle, eğer bir belge bir liste gerektiriyorsa, uygun bir HTML listesi kullanılmalıdır.
İç İçe Listeler
Bir listenin öğesi başka bir listenin tamamını içerebilir; buna "iç içe" liste adı verilir. Bu, dersin başındaki gibi içindekiler tablosu gibi şeyler için yararlı olabilir:
1. Birinci Bölüm 1. Birinci Bölüm 2. İkinci Bölüm 3. Üçüncü Bölüm 2. İkinci Bölüm 3. Üçüncü Bölüm
Hatırlanması gereken en önemli nokta, iç içe geçmiş listenin belirli bir liste öğesine başvurması gerektiğidir. Bunu koda yansıtmak için bu liste öğesinin içine iç içe bir liste yerleştirilir. Yukarıdaki listenin kodu şuna benzer:
- Birinci bölüm
- Birinci bölüm
- İkinci bölüm
- Üçüncü bölüm
- İkinci bölüm
- Üçüncü bölüm
İç içe geçmiş listenin öğeden sonra başladığını unutmayın.
Teorik olarak istediğiniz sayıda listeyi iç içe yerleştirebilirsiniz, ancak pratikte listelerin çok derin iç içe olması durumunda bu durum kafa karıştırıcı olabilir. Çok büyük listeler için, içeriği başlıklı birden çok listeye, hatta ayrı sayfalara bölmek daha iyi olabilir.
Adım adım örnek
Hadi bir göz atalım adım adım örnek hepsini bir araya getirmek için. Aşağıdaki senaryoyu düşünün:
Aşçılık Okulu için küçük bir Web sitesi oluşturuyoruz. Ana sayfada, tarif sayfalarına bağlı sınıflandırılmış tariflerin bir listesini göstereceğiz. Her tarif sayfası gerekli malzemeleri, bu malzemelerle ilgili notları ve hazırlama yöntemini listeler. Üç kategori şunlardır: "Kekler" ("Sade Sünger", "Çikolatalı Kek" ve "Elmalı Çaylı Kek" tarifleri dahil); "Bisküviler" ("ANZAK Bisküvileri", "Reçel Damlaları" ve "Erime Anları" tarifleri dahil); ve "Quickbreads" ("Damper" ve "Scones" tarifleri dahil). Müşteri, kategorilerin ve tariflerin hangi sırayla görüntülendiğini umursamaz; yalnızca insanların hangi öğelerin kategori, hangilerinin tarif olduğunu anlamasını ister.
Bu web sitesini oluşturma sürecini gözden geçirelim. Bu bölümde işaretlemeyi oluşturacağız ve listelere bazı stiller ekleyeceğiz. Stil oluşturma, serinin ilerleyen kısımlarındaki liste stillendirme dersine kadar ayrıntılı olarak ele alınmayacaktır.
Ana sayfa düzeni
Doktip ve öğeler dahil, iyi biçimlendirilmiş bir HTML sayfası oluşturun HTML, head and body öğesini seçin ve stepbystep-main.html olarak kaydedin. Bir ana başlık (h1) "HTML Aşçılık Okulu" ve bir alt başlık (h2) "Tarifler" ekleyin:
HTML Aşçılık Okulu
Tarifler
Tarifler
- Pastalar
- Bisküvi
- Hızlı ekmekler
Li öğelerinin girintilenmesi kodun okunmasını kolaylaştırır ancak zorunlu değildir.
Artık tarifleri alt öğeler olarak eklemeniz gerekiyor; örneğin, "Sade Sünger", "Çikolatalı Kek" ve "Elmalı Çaylı Kek", "Kekler" kategorisinin bir parçasıdır. Bunu yapmak için her liste konumunda iç içe geçmiş bir liste oluşturmanız gerekir. Sıra önemli olmadığı için tekrar uyuyor düzensiz liste. Eğitim materyalini basitleştirmek için tüm tarifler tek bir tarif sayfasına bağlanabilir:
Tarifler
- Pastalar
- Sade Sünger
- Çikolatalı kek
- Elmalı Çay Kek
- Bisküvi
- ANZAK Bisküvi
- Reçel Damlaları
- Erime Anları
- Ekmekler/hazır ekmekler
- Damper
- Çörekler
İyi günler!
Bu makalede, listelerin tüm olasılıklarını öğrenecek, numaralandırılmış bir listenin nasıl oluşturulacağını anlayacak ve basit bir madde işaretli listeyi rastgele madde işaretleriyle daha ilginç ve dikkat çekici bir listeye dönüştürmenize yardımcı olacak ana etiketleri öğreneceksiniz. Dersi tamamladıktan sonra listelerin nerede kullanıldığını ve hangi durumlarda kullanılabileceğini anlayacaksınız.
Bu makale, bu kısa kurstaki üçüncü makaledir. HTML'nin temelleri. Bu dersi okumadan önce önceki iki dersi incelemenizi öneririm:
Makale daha yeni başladı ve standart madde işaretli listenin kullanıldığını zaten fark edebilirsiniz. Web sitemde oldukça basit görünüyor: Solda çizgi ve kare işaretli küçük bir girinti var. Makalenin ilerleyen kısımlarında ne tür işaretleyicilerin olduğuna, sayıların nasıl yapılacağına ve ayrıca kendi işaretleyicinizi nasıl yapacağınıza detaylı olarak bakacağız.
Makalenin her bölümünde belirli listelerin oluşturulması eşlik edecek detaylı açıklamalar belirli bir liste ekleyerek.
1. HTML'deki madde işaretli listeler
Bu liste türü, metinde benzer anlamlara sahip bir dizi öğeyi listelemek için kullanılır. Bu, aynı konuyla ilgili bağlantıların bir listesi olabilir, detaylı açıklama Metnin ayrı bölümleri için. Ancak madde işaretli listelerin kodda nasıl göründüğüne bakalım:
Ve tarayıcıda şöyle görünüyor:
Pirinç. 1.1. Standart görünüm Tarayıcıda HTML madde işaretli sırasız liste1.1 Madde işaretli listeler için standart madde işaretleri
Yukarıdaki görselde (Şekil 1.1.) her menü öğesinin başındaki daireleri görebilirsiniz. Bu işarettir. Varsayılan olarak tarayıcıda içi dolu bir daire olarak görünür. HTML'de çeşitli işaretleyici türleri vardır: dolu daire, boş daire ve kare. Herhangi bir CSS veya üçüncü taraf görseline ihtiyaç duymazlar:
1.2 Boş daire biçimindeki liste işaretçisi
Özellik değerlerini biliyorsunuz ama şimdi nasıl işaretli bir değer oluşturulacağını görelim HTML listesi kodda. Yukarıdaki tablodan type özelliği için ikinci değer olan "circle"'ı seçtik ve madde işaretli listemize ayarladık:
| <HTML > <kafa > <başlık > Boş daire işaretçisi içeren madde işaretli liste örneği</başlık> </kafa> <vücut > <p> Yıldızlar:</p> <ul türü = "daire" > <li > Sirius</li> <li > Arkturus</li> <li > Polluks</li> <li > Betelgeuse</li> <li > Güneş</li> </ul> </gövde> </html> |
Bu kodun tarayıcıda nasıl görüneceğine hemen bakalım:
Pirinç. 1.2.Liste işaretçisinin tarayıcıda daire olarak görünümü
1.3 Kare şeklindeki liste işaretçisi
Ayrıca HTML listesi için kare işaretçili son örneğe de bakalım:
İşaretçiye dikkat edin, kare haline geldi:Pirinç. 1.3. Liste işaretçisinin tarayıcıda kare olarak görünümü Önemli Not:.
Bu yöntem artık madde işaretli listeler için stiller oluşturmak amacıyla kullanılmamaktadır. CSS (CSS'nin ne olduğunu okuyun) ile HTML arasında açık bir ayrım vardır. HTML işaretleme içindir ve CSS onu çekici kılmak içindir.dış görünüş
Geçerli belge türünü HTML5 olarak belirtirken bu özelliği içeren kod ("
"), doğrulama sırasında hata verecektir. Doğrulamanın ne olduğunu duymadıysanız burası tam size göre.Hata aşağıdaki gibi olacaktır:
Pirinç. 1.4.
Bir listenin "type" özelliğini kullanırken doğrulayıcıda hata oluştu
Madde işaretli listeleri sıraladık. Şimdi numaralandırılmış listelere geçelim ve ardından iç içe geçmiş listeleri ve gerçek sitelerde en sık kullanılan birkaç hazır örneği ele alalım.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <HTML > <kafa > <başlık > 2. HTML'deki numaralandırılmış listeler</başlık> </kafa> <vücut > <p>Önceki liste türlerinden farklı olarak, numaralandırılmış listelerin önemli bir özelliği vardır: otomatik olarak numaralandırılırlar. Bu, büyük bir listeyi numaralandırmanız gerektiğinde kullanışlıdır. Bunu manuel olarak yapmak çok zaman alacaktır ve yine de kafanız karışabilir. Etiketi kullanılarak numaralı bir liste belirtilir. Pratikte neye benziyor:</p> <Numaralandırılmış liste örneği: <li > Standart numaralı liste örneği</li> <li > Birden beşe kadar:</li> <li > ol ></li> <li > Birinci</li> <li > Saniye</li> <Üçüncü </gövde> </html> |
Dördüncü Beşinci/ol>
Numaralandırılmış bir liste şöyle görünür:standart ayarlar
tarayıcıda:
Pirinç. 2.1.
| Standart ayarlarla tarayıcıdaki numaralandırılmış liste | Önceki sürümde olduğu gibi (madde işaretli liste), sayıları görüntülemek için kendi stilleri vardır. Normal numaralandırma, HTML'deki numaralandırılmış bir liste için tek madde işareti türü değildir. | 2.1 Numaralandırılmış listeler için standart madde işaretleri |
|---|---|---|
| Burada üç tip işaretleyiciden değil, beşinden birini seçme şansımız var: | 1 |
|
| Liste Örneği | Arapça sayılar biçimindeki işaretleyiciler |
|
| A | Chomolungma |
|
| A | Zirve Düşüşü |
|
| Ben | Filipin Denizi |
|
BEN
Numaralandırılmış bir listenin olağan çıktısına ek olarak, numaralandırmamıza herhangi bir sayıdan da başlayabiliriz. Bunu yapmak için, "start" ek özelliğini ayarlamanız gerekir. Bu numaralandırma, numaralandırılmış listeler için tüm işaretçi türlerinde çalışır. Pratikte neye benziyor:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <HTML > <kafa > <başlık > Numaralandırılmış bir liste için özel numaralandırma</başlık> </kafa> <vücut > <p> On ikiden numaralandırmaya başlıyoruz:</p> <ol type = "a" start = "12" > <li > On iki</li> <li > On üç</li> <li > On dört</li> <li > On beş</li> <li > On altı</li> <Üçüncü </gövde> </html> |
Gerçek sitede şu şekilde görünecektir:
Pirinç. 2.2.Numaralandırılmış bir listede rastgele bir numaradan numaralandırma
Yukarıdaki görselde küçük Latin harfleri şeklinde işaretlemeler yaparken listeyi on ikiden başlayarak numaralandırdık. Artık bu niteliklerin projelerinizde nasıl kullanılacağı netleşti sanırım.
Şimdi iç içe HTML listelerine geçelim.
3. HTML'de çok düzeyli (iç içe) liste nasıl yapılır
Sitede menü oluşturmak için çok düzeyli listeler kullanılıyor. Bu menü çoğunlukla aşağı doğru açılır (ders açık) veya sol veya sağ açılır menü olarak görünür. Bu tür menüler, diğer menü öğelerini kompakt bir biçimde saklamanıza olanak tanır.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <HTML > <kafa > <başlık > Araba modellerini örnek olarak kullanarak HTML'de çok düzeyli bir liste oluşturacağız:</başlık> </kafa> <vücut > <HTML İç İçe Madde İşareti Listesi <li > ul ><HTML İç İçe Madde İşareti Listesi <li > Citroen</li> <li > Berlingo</li> <li > C1</li> <li > C2</li> <li > C3 Picasso</li> </ul> </li> <li > C4 Büyük Picasso</li> <li > KIA</li> <li > toyota</li> <li > Audi</li> </ul> </gövde> </html> |
Lexus
Çok düzeyli listenin tarayıcıda nasıl göründüğüne dikkat edin:Pirinç. 3.1.
- HTML'de çok düzeyli liste örneği
- aşağıda gösterildiği gibi.
- İlk nokta
- İkinci nokta
- Üçüncü nokta
Listede bir kapanış etiketi bulunmalıdır
- Çeburaşka
- Timsah Gena
- Şapoklyak
- Sıçan Larisa
- Standart numaralı liste örneği
- Birden beşe kadar:
- ol >
- Standart numaralı liste örneği
- Birden beşe kadar:
- ol >
- Standart numaralı liste örneği
- Birden beşe kadar:
- ol >
- dini inançta değişiklik (isteğe bağlı: Budizm, Konfüçyüsçülük, Hinduizm).
- Özel teklif - Yahudilik ve İslam bir arada;
- favori tarafın yanılmazlığına olan inancın değişmesi;
- uzaylıların var olduğu inancı;
- Aşağıdaki özellikler ilişkilidir:
- meydana geldiği yerde
- tarayıcı otomatik olarak bir satır sonu ekler;
- listenin üstünde ve altında girintiler vardır;
- Varsayılan olarak işaretçiler içi dolu bir daire olarak görüntülenir;
- İşaretçiler üç biçimden birini alabilir: içi dolu daire (varsayılan), açık daire ve kare. İşaretçi türünü seçmek için list-style-type özelliğini veya evrensel liste-stili özelliğini kullanın (örnek 1). Aşağıdaki değerler geçerlidir:
- disk - içi dolu bir daire biçimindeki işaretleyiciler;
- daire - açık daire şeklindeki işaretleyiciler;
- Listeler
- Sepulki
- Sepulkarya
- İşe yaramayacak, bu yüzden bunun üzerinde çalışmanız gerekecek. Bunu yapmak için liste işaretçilerini, liste stili özelliğini kullanarak none değerini kullanarak ve metinde içerikten önce gizleyin.
- ::before sözde elemanını kullanarak kendi karakterimizi ekliyoruz. Örnek 2'de böyle bir işaretleyici bir üçgendir.
Örnek 2:::before kullanımı
Örnek 1: Bir işaretçinin görünümünü değiştirme - Listeler
- Sepulki
- Sepulkarya
Bu örneğin sonucu Şekil 2'de gösterilmektedir. 2. list-style özelliğinin none değeriyle kullanılması işaretçileri hiçbir şekilde kaldırmadığından, yalnızca görünümden gizlediğinden, liste sağa kaydırılmış olarak görünür. Bu özellikten kurtulmak için örnek, text-indent özelliğini negatif bir değerle ekler. Görevi metni bir karakter sola taşımaktır.
Pirinç. 2. Listedeki rastgele işaretleyiciler
Karakterin onaltılık formatta olması gerekmez; doğrudan metne eklenebilir. Önemli olan belgeyi UTF-8 kodlamasında kaydetmek ve editörün bunu desteklemesidir. Karakterlerin kendileri ve kodları örneğin şuradan alınabilir: LibreOffice Yazarı(Şekil 3).
Pirinç. 3. LibreOffice'de bir sembol seçme
Elle çizilmiş işaretçileri içeren liste
Stiller, herhangi bir uygun görüntüyü işaretleyici olarak ayarlamanıza olanak tanır. liste stili resim özelliği. Değer, örnek 3'te gösterildiği gibi grafik dosyasına giden göreceli veya mutlak bir yoldur.
Örnek 3: Bir Görüntüyü İşaretleyici Olarak Kullanma
Örnek 1: Bir işaretçinin görünümünü değiştirme - Listeler
- Sepulki
- Sepulkarya
Liste öğelerini altyazıya dönüştürmemek için küçük bir resim seçmek en iyisidir. Şek. Şekil 4, küçük resimlerin işaretleyici olarak kullanıldığı bir örneğin sonucunu göstermektedir.
Pirinç. 4. İşaretleyici olarak çizim
Liste stili görüntüsünü kullanmanın bazı dezavantajları vardır:
- desen yukarı veya aşağı hareket ettirilemez;
- Resmin metne göre konumu farklı tarayıcılarda farklılık gösterebilir.
Bu eksiklikler arka plan özelliği kullanılarak önlenebilir, arka plan resmini ayarlar. Her liste öğesi için
- orijinal işaretleyicileri kaldırıyoruz ve tekrar etmeden arka plan resmini ayarlıyoruz. Ve metnin resmin üstünde görünmemesi için sol dolguyu kullanarak onu sağa kaydırıyoruz (örnek 4).
Örnek 4: Arka planı kullanma
Ul ( sol kenar boşluğu: -1em; ) li ( liste stili: yok; arka plan: url(resimler/bullet.png) tekrarlama yok 0 2 piksel; sol dolgu: 20 piksel; )
Metnin ve madde işaretinin konumu
Metne göre bir işaretçi yerleştirmenin iki yolu vardır: işaretçi, liste öğelerinin kenarlarının dışına taşınır veya metnin etrafına sarılır (Şekil 5).
içeri dıştan Pirinç. 5. İşaretçilerin metne göre yerleştirilmesi
İşaretçilerin konumunu kontrol etmek için list-style-position özelliğini kullanın. İki anlamı vardır: dış - madde işaretleri metin bloğunun dışına yerleştirilir (bu varsayılan değerdir) ve iç - madde işaretleri metin bloğunun parçasıdır ve liste öğesinde görüntülenir (örnek 5).
Örnek 5: İşaretçilerin konumunu değiştirme
Örnek 1: Bir işaretçinin görünümünü değiştirme - Başlamadan önce 3BM kitinde bulunan ekipmanın dahil olup olmadığını kontrol edin.
- Bir veya daha fazlasının yokluğunda çevre birimleri Derhal VT'lerin teknik personeliyle iletişime geçmelisiniz.
- Çalışma alanınızı görsel olarak inceledikten sonra 3BM'nin gücünü dikkatlice açabilirsiniz.
Bu örneğin sonucu Şekil 2'de gösterilmektedir. 6.
HTML üç listeyi destekler farklı türler, her birinin kendi parametreleri vardır:
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 liste öğelerini numaralandırmayı bozmadan eklemenize ve silmenize olanak tanır.
Numaralandırılmış listeler bir blok öğesi kullanılarak oluşturulur
Etiket- öğ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
- Kendiniz deneyin »
- Anahtarı al
- Anahtarı kilide sok
- Anahtarı iki tur çevirin
- Anahtarı kilitten çıkar
- Kapıyı aç
Adım adım talimatlar
- 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
- A - büyük harfler 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).
- aşağıdaki gibi:
-
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
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ı:
- . Tarayıcı her liste öğesine girinti koyar ve otomatik olarak madde işaretlerini görüntüler.
- İlk nokta
- İkinci nokta
- Üçüncü nokta
- Yalnızca metnin yerleştirilmesi gerekli değildir; akış içeriğinin herhangi bir öğesinin (bağlantılar, paragraflar, resimler vb.)
- İç içe liste veya ikinci düzey liste oluşturulmasına izin verilir. Bir listeyi iç içe yerleştirmek için açıklayın yeni liste iç eleman
- 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.
- Kendiniz deneyin »
- Pazartesi
- Posta gönder
- Editöre ziyaret
- Bir tema seçme
- Dekoratif tasarım
- Nihai rapor
- Mesajların akşam görüntülenmesi
- Salı
- Programı gözden geçir
- Resimleri gönder
- Çarşamba...
- Pazartesi
- Posta gönder
- Editöre ziyaret
- Bir tema seçme
- Dekoratif tasarım
- Nihai rapor
- Mesajların akşam görüntülenmesi
- Salı
- Programı gözden geçir
- Resimleri gönder
- Çarşamba...
- Kendiniz deneyin »
- Kahve
- Kahve
- Kahve
- Kahve
- Kahve
- Süt
- Kahve
- Süt
- Kahve
- Süt
- Kahve
- Süt
- Kendiniz deneyin »
- Boğa burcu
- İkizler burcu
- Koç burcu
- Boğa burcu
- İkizler burcu
- (İngilizce Tanım Teriminden - tanımlanmış bir kelime, terim) ve
- (İngilizce Tanım Açıklama'dan - tanımlanmakta olan terimin açıklaması).
- İlk dönem
- İlk dönemin açıklaması
- İkinci dönem
- İkinci dönemin açıklaması
- Kendiniz deneyin »
- İ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ğ
- - İngilizce'den 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ğ.
Numaralandırılmış liste stilleri
Örnek Anlam Tanım a, b, c alt alfa Küçük harfler 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: Bir CSS Özelliğini 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
EtiketAş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
İç İçe Listeler
Herhangi bir liste diğerinin içine yerleştirilebilir. Bir öğenin içindeÖrnek: İç İçe Listeler
Madde İşaretli Listeleri Biçimlendirme
Liste işaretçisinin görünümünü değiştirmek için özelliği kullanmalısınız. liste stili türü CSS stil sayfaları:
Aşağıdaki örnek, madde işaretli listelerin farklı stillerini gösterir:
Örnek: Madde İşaretli Liste Stilleri
Disk:
Daire:
Kare:
Hiçbiri:
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
Zodyak işaretleri
Zodyak işaretleri
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
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:
Aşağıdaki örnek, bir tanım listesinin olası bir kullanımını göstermektedir:
Örnek: Tanımların listesi
World Wide Web - İngilizce'den. Dünya Çapında Web (WWW), üzerinde bulunan ilgili belgelere erişim sağlayan dağıtılmış bir sistemdir. çeşitli bilgisayarlar internete bağlı.
Web sitesi
Burada: yazın – sembolleri listeleyin:
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 XLIX başlangıç değeri içeren numaralandırılmış bir liste gösterilmektedir:Numaralandırma aynı zamanda bu özellik kullanılarak da başlatılabilir. değer, öğeye eklenen
Madde işaretli (etiket) kullanarak çok düzeyli bir liste yaptık
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <HTML > <kafa > <başlık >). Diğer işaretlerle birlikte Citroen modellerini içeren çok seviyeli bir liste ortaya çıktı. Ana listede madde işaretleri bulunur ve 2. düzey listede boş daireler bulunur. Ancak hatırlayacağınız gibi, “type” özelliğini kullanarak işaretçileri yeniden tanımlayabiliriz ( ayarlamak daha iyidir).</başlık> </kafa> <vücut > <HTML İç İçe Madde İşareti Listesi <li > Ancak çok düzeyli listeleri aşağıdaki gibi numaralı ve madde işaretli listelerle birleştirebiliriz:<Numaralandırılmış liste örneği: <li > HTML'de numaralandırılmış, madde işaretli ve çok düzeyli listeler<HTML İç İçe Madde İşareti Listesi <li > Birinci grup laleler</li> </ul> </li> <li > Birinci sınıf<HTML İç İçe Madde İşareti Listesi <li > Basit erken laleler</li> </ul> </li> <Üçüncü </li> </ul> </gövde> </html> |
İkinci sınıf
Terry laleleri
Yukarıdaki örnekte çift yuvalamamız var (2 seviye). Öncelikle iki sınıf lalenin bir listesini veriyoruz; Daha sonra, numaralandırılmış listedeki öğelerin her birinin içine madde işaretli bir liste yerleştirilir.Tarayıcıda nasıl göründüğüne bakalım:
Pirinç. 3.2. Tarayıcıdaki madde işaretli listeye yönelik çok düzeyli numaralandırılmış liste örneği HTML (yapı), CSS (stil) ve Sonuç (sonuç) sekmelerine bölünmüştür.
4.1 Bir HTML listesinin dizeye dönüştürülmesi
Yatay menü oluştururken HTML listesini dizeye dönüştürmek gerekli olabilir. Bunu yapmak çok kolaydır:
4.2 Simge olmadan HTML listesi nasıl yapılır
CSS'deki list-style-type özelliği bundan sorumludur (daha fazla ayrıntı):
4.3 HTML'de bir liste nasıl ortalanır
Liste öğesi bir blok öğesidir, bu nedenle kullanılarak ortalanması gerekir. kenar boşlukları. Ancak önemli bir nokta var; hizalamanın işe yaraması için genişliği açıkça belirtmeliyiz:
4.4 HTML'de resimlerle liste nasıl yapılır
Sadece bir tanesi yeterli CSS özellikleri liste-stili-görüntü . URL'nin içinde simgeden önce adresi belirtin. Sadece küçük bir resmi hemen seçmenin daha iyi olduğunu belirtmek isterim çünkü liste satırının yüksekliği buna bağlıdır:
4.5 Madde işaretli liste Madde işaretinizi HTML'leyin
Bu durumda, yazı tipi simgelerini önceden bağlamanız gerekir (örneğin, FontAwesome ). Daha sonra standart bir işaretleyici yerine herhangi bir simge yapabilirsiniz:
4.6 HTML'de birkaç sütunda liste nasıl yapılır
Birkaç sütun halinde bir liste oluşturmak için CSS sütun sayısı özelliğini kullanacağız (özellik yalnızca şu tarayıcılarda desteklenir: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Ayrıca birden fazla sütuna bölünmeyi görmek için listenin yüksekliğini de ayarlamanız gerekir:
5. Listelerle çalışma alıştırması yapın
Aşağıdaki videoda HTML listeleriyle yapılan tüm çalışmaları pratikte görebilirsiniz:
Alınan bilgileri birleştirmek için tüm adımları manuel olarak yapmanızı öneririm. Listeler için farklı madde işaretleri deneyin, numaralı listeler oluşturun ve ardından çok düzeyli (iç içe geçmiş) listelere geçin ve onlarla denemeler yapın.
Listeleri burada bitirip resimlerle ilgili bir sonraki derse geçiyoruz.
Daha fazla pratik yapın!
Ders 3. HTML'de liste nasıl yapılır 4.91 /5 (98.26%) 23 oy
Madde işaretli liste, her liste öğesinin önüne genellikle içi dolu daire biçiminde küçük bir madde işaretinin eklenmesiyle tanımlanır. Listenin kendisi bir kap kullanılarak oluşturulur
- ve her liste öğesi bir etiketle başlar
Örnek 11.1, bir web sayfasına madde işaretli liste eklemek için HTML kodunu göstermektedir.
Örnek 11.1. Madde işaretli liste oluşturma
Sonuç bu örnekŞekil 2'de gösterilmiştir. 11.1.
Pirinç. 11.1. Madde işaretli liste görünümü
Listenin üst, alt ve solundaki dolguya dikkat edin. Bu tür girintiler otomatik olarak eklenir.
İşaretçiler üç biçimden birini alabilir: daire (varsayılan), daire ve kare. Bir işaretleyici stili seçmek için etiketin type özelliğini kullanın
- . Kabul edilebilir değerler tabloda verilmiştir. 11.1
| Liste türü | HTML Kodu | Örnek |
|---|---|---|
| Daire işaretçileri içeren liste | ||
| Daire madde işaretleri içeren liste | ||
| Kare madde işaretli liste |
İşaretleyicinin görünümü bağlı olarak biraz değişebilir farklı tarayıcılar ve ayrıca yazı tipini ve metin boyutunu değiştirirken.
Kare madde işaretli bir listenin oluşturulması Örnek 11.2'de gösterilmiştir.
Örnek 11.2. İşaretleyicilerin türü
İnançları Değiştirmek
türünün en iyisi olan bir siyasi sistemi tercih etmek (aralarından seçim yapmak: feodalizm, sosyalizm, komünizm, kapitalizm).
Bu örneğin sonucu Şekil 2'de gösterilmektedir. 11.2.
Madde işaretli listeler, büyük metni her biri bir madde işaretiyle (genellikle küçük bir nokta) başlayan ayrı bloklara bölmenize olanak tanır. Bu, okuyucunun dikkatini metne çeker ve okunabilirliğini artırır.
- elemanlı
Her liste öğesi ana metne göre sağa kaydırılır.
Şekil 1, madde işaretli listenin yukarıdaki özelliklerini gösteren örneğin sonucunu göstermektedir.
Pirinç. 1. Madde işaretli liste görünümü
İşaretleyici türü
kare - kare işaretleyiciler.
Örnekte, madde işareti simgesi olarak küçük, düz renkli bir kare kullanılarak madde işaretli listenin nasıl oluşturulacağı gösterilmektedir. Değerlerin sayısı üç ile sınırlı olsa da bu, elimizde yalnızca üç tip işaretleyicinin olduğu anlamına gelmez. Başarılı bir şekilde işaretleyici simgesi olarak işlev görebilecek birçok özel karakter vardır. Bunları doğrudan vidalayın
