HTML'de listeler nasıl yapılır?

Skysea45 · 16 Ekim 2021

Merhaba HTML hakkında sorularım vardı. Çözüm bulmak için araştırdım fakat bulamadım ben de buradaki arkadaşlara danışmak istedim.
Resimde gördüğünüz üzere kırmızı renkte yazılan sıralamaların başında sabit iki tane harf var. Bu sabit iki harfi listeye nasıl yazıyoruz?
Bir de resimde gördüğünüz şekildeki kırmızı barı ve içine yazıyı ne kullanarak yazıyoruz?
Yardımcı olabilirseniz çok memnun olurum.

Primearc · 17 Ekim 2021

HTML üzerinde listeler ikiye ayrılır; birincisi sıralı listeler, ikincisi sırasız listeler... Senin istediğin liste tipi sıralı liste bunun için listeni şu şekilde yazman gerek:
[CODE lang="html" title="Sıralı Liste"]<ol>
<li>Python</li>
<li>C++</li>
<li>PHP</li>
</ol>[/CODE]

Varsayılan olarak sıralı listeler normal sayılarla ifade edilir, yani çıktı şu şekilde olacak:

1. Python
2. C++
3. PHP

Senin istediğin şey ise sıralamanın sayılarla değil, roma sayılarıyla yapılması. Bunun içinse type özelliğini kullanacağız.

[CODE lang="css" title="Roma Rakamlarıyla Sıralı Liste"] <ol type="I">
<li>Python</li>
<li>C++</li>
<li>PHP</li>
</ol> [/CODE]

type özelliğine "I" verildi görüldüğü üzere. Bu, sıralı listenin roma rakamlarıyla sıralanmasını sağlayacak.

type="1" -- Sayı
type="A" -- Büyük Harf
type="a" -- Küçük Harf
type="I" -- Büyük Roma Sayıları
type="i" -- Küçük Roma sayıları

ahevr · 18 Ekim 2021

Eski kullanımdır çok fazla tavsiye edilmez bunun yerine şöyle bir şey kullanabilirsiniz,

[CODE title="Listeleme"]<ul class='treeview'>
<li>
HARFLER
<ul class='treeview'>
<li>
BÜYÜK HARFLER
<ul class='treeview'>
<li>
A
</li>
</ul>
</li>
</ul>
</li>
</ul>[/CODE]

[CODE title="css"] .treeview ul {
margin:0;
padding:0;
list-style-type:none;
color: #369;
}
.treeview ul {
margin-left:1em;
position:relative

}
.treeview ul ul {
margin-left:.5em

}
.treeview ul:before {
content:"";
display:block;
width:0;
position:absolute;
top:0;
left:0;
border-left:1px solid;

bottom:15px;
}
.treeview li {
margin:0;
padding:0 1em;
line-height:2em;
font-weight:700;
position:relative
}
.treeview ul li:before {
content:"";
display:block;
width:10px;
height:0;
border-top:1px solid;
margin-top:-1px;
position:absolute;
top:1em;
left:0
}
.tree-indicator {
margin-right:5px;

cursorointer;
}
.treeview li a {
text-decoration: none;
color:inherit;
cursorointer;
}[/CODE]

çıktısı bu şekilde olacaktır.

Yeniçocuk · 18 Ekim 2021

Resimdeki örneğin yapılmış hali bu şekilde.

HTML:

<html>
<head>
<title> Deneme </title>
<style>
dl.
{
 margin:0;
 color:red;
background-color: lavender;
}
span.
{
 background-color: red;
 color: #fff;
 text-decoration: line-through;
 margin: 5px;
 background-color: #b71717;
border-radius:5px;
}
</style>
</head>
<body>
<ol>
<li>Arabalar</li>
<dl><dt>ARA.Sahin</dt>
<ol>
<ol type="I" start="50">
<li>SLX</li>
<li style=" background-color: red; width: 11%;"><span>Doğan Görünümlü</span></li>
<li>AMG</li>
<li>5X</li>
</ol>
</ol>
<dl><dt>ARB.Kartal</dt>
<dl><dt>ARC.Mercedes</dt>
<dl><dt>ARD.Porche</dt>
</dl>
</dl>
</dl>
</dl>
<li>Evler</li>
<li>Çiçekler</li>
<li>Hayvanlar</li>
<li>Okullar</li>
</ol>

</body>
</html>

Yerel CSS ile özellik vererek yapıldı. <dt>ve<dl> hakkında Türkçe bilgi için burada yazıyor.

HTML dl Etiketi | M5 Bilişim

HTML dl etiketi kullanımı, standart özellikleri, olay özellikleri ve örnekleri.

www.m5bilisim.com

<span> etiketi içinde Türkçe yazan kaynak.

HTML span Etiketi | M5 Bilişim

HTML span etiketi kullanımı, standart özellikleri, olay özellikleri ve örnekleri.

www.m5bilisim.com

HTML'de listeler nasıl yapılır?

Ayrıntılı düzenleme

Skysea45

Kilopat

Primearc

Hectopat

ahevr

Megapat

Yeniçocuk

Megapat

HTML dl Etiketi | M5 Bilişim

HTML span Etiketi | M5 Bilişim

Benzer konular