HTML - Listeler
HTML, web yazarlarına bilgi listelerini belirtmek için üç yol sunar. Tüm listeler bir veya daha fazla liste öğesi içermelidir. Listeler şunları içerebilir -
<ul>- Sırasız liste. Bu, öğeleri düz madde işaretleri kullanarak listeleyecektir.
<ol>- Sıralı bir liste. Bu, öğelerinizi listelemek için farklı sayı şemaları kullanacaktır.
<dl>- Bir tanım listesi. Bu, öğelerinizi bir sözlükte düzenlendikleri gibi düzenler.
HTML Sırasız Listeler
Sırasız liste, özel bir sırası veya sırası olmayan ilgili öğeler koleksiyonudur. Bu liste HTML kullanılarak oluşturulmuştur<ul>etiket. Listedeki her öğe bir madde işaretiyle işaretlenir.
Misal
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
Type Özniteliği
Kullanabilirsiniz type<ul> etiketi için özellik, beğendiğiniz madde işaretinin türünü belirtmek için. Varsayılan olarak bir disktir. Olası seçenekler aşağıdadır -
<ul type = "square">
<ul type = "disc">
<ul type = "circle">Misal
Aşağıda, <ul type = "square"> kullandığımız bir örnek verilmiştir
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
Misal
Aşağıda, <ul type = "disc"> kullandığımız bir örnek verilmiştir -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
Misal
Aşağıda, <ul type = "circle"> kullandığımız bir örnek verilmiştir -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
HTML Sıralı Listeler
Öğelerinizi madde işaretli yerine numaralı bir listeye koymanız gerekirse, HTML sıralı liste kullanılacaktır. Bu liste kullanılarak oluşturulur<ol>etiket. Numaralandırma birden başlar ve <li> ile etiketlenmiş her ardışık sıralı liste öğesi için bir artar.
Misal
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
Type Özniteliği
Kullanabilirsiniz type<ol> etiketi için özellik, beğendiğiniz numaralandırma türünü belirtmek için. Varsayılan olarak bir sayıdır. Olası seçenekler aşağıdadır -
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.Misal
Aşağıda, <ol type = "1"> kullandığımız bir örnek verilmiştir
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
Misal
Aşağıda, <ol type = "I"> kullandığımız bir örnek verilmiştir
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
Misal
Aşağıda, <ol type = "i"> kullandığımız bir örnek verilmiştir
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
Misal
Aşağıda, <ol type = "A"> kullandığımız bir örnek verilmiştir
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
Misal
Aşağıda, <ol type = "a"> kullandığımız bir örnek verilmiştir
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
Başlangıç Özniteliği
Kullanabilirsiniz start<ol> etiketi için öznitelik, ihtiyacınız olan numaralandırmanın başlangıç noktasını belirtmek için. Olası seçenekler aşağıdadır -
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.Misal
Aşağıda, <ol type = "i" start = "4"> kullandığımız bir örnek verilmiştir
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
HTML Tanım Listeleri
HTML ve XHTML, adı verilen bir liste stilini destekler definition listsgirişler bir sözlük veya ansiklopedide olduğu gibi listelenir. Tanım listesi, bir sözlük, terimler listesi veya diğer ad / değer listesini sunmanın ideal yoludur.
Tanım Listesi aşağıdaki üç etiketi kullanır.
- <dl> - Listenin başlangıcını tanımlar
- <dt> - Bir terim
- <dd> - Terim tanımı
- </dl> - Listenin sonunu tanımlar
Misal
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>Bu, aşağıdaki sonucu verecektir -