HTML Etiketler 3

11.12.2018

3.392

Web sayfaalarında kullanılan HTML dili etiketleri konu anlatımı. Listelem Etiketleri

Listeleme Etiketleri

Web sayfalarında iki çeşit liste kullanılır. Bunlar sıralı (ordered) ve sırasız (unordered) listelerdir.

1 2 3 …, a b c … yada I II III IV … şeklinde başında sıra numarası bulunan listeler sıralı listelerdir. <ol> …. </ol> etiketleri ile oluşturulurlar.

Başında ●, ○ ve ▪ gibi işaretlerin bulunduğu listeler ise sırasız listelerdir. <ul> …. </ul> etiketleri ile oluşturulurlar.

Listeye bir madde eklemek için <li> …. </li> etiketi kullanılır.

Etiket	Parametreler	Açıklama
<ol>	type	Listeleme tipini belirler. Örn: type=”a” 1 : Onluk tabanda numaralama (1,2,3,4,…) i : Küçük rakamlarla roma rakamları (i,ii,iii,iv,…) I : Büyük rakamlarla roma rakamları (I,II,III,IV,…) a : Küçük harflerle alfabetik (a,b,c,…) A : Büyük harflerle alfabetik (A,B,C,…)
<ol>	start	Listenin başlangıç değerini belirtir. Her zaman sayı olmalıdır. Örn: start=”3”
<ul>	type	disc: İçi dolu bir daire görüntüler. circle: İçi boş bir daire görüntüler. square: İçi dolu kare görüntüler.

Örnek 1: Aşağıdaki sıralı listeyi oluşturalım.

<html>
	<head>
		<title>HTML Listeleme Örnekleri 1</title>
		<meta http-equiv="content-language" content="tr" />
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	</head>
	<body bgcolor="#ff0000">
		<h3>Bilişim Teknolojileri Alanı Dalları</h3>
		<ol>
			<li>Bilgisayar Teknik Servisi</li>
			<li>Veri Tabanı Programcılığı</li>
			<li>Web Programcılığı</li>
			<li>Ağ İşletmenliği</li>
		</ol>
	</body>
</html>

Kodlar çalıştırıldığında web sayfamız aşağıdaki gibi görüntülenecektir.

Örnek 2: Aşağıdaki sırasız listeyi oluşturalım.

<html>
	<head>
		<title>HTML Listeleme Örnekleri 2</title>
		<meta http-equiv="content-language" content="tr" />
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	</head>
	<body bgcolor="#ff0000">
		<h3>Bilişim Teknolojileri Alanı Dalları</h3>
		<ul>
			<li>Bilgisayar Teknik Servisi</li>
			<li>Veri Tabanı Programcılığı</li>
			<li>Web Programcılığı</li>
			<li>Ağ İşletmenliği</li>
		</ul>
	</body>
</html>

Kodlar çalıştırıldığında web sayfamız aşağıdaki gibi görüntülenecektir.

Örnek 3: Aşağıdaki sıralı listeyi oluşturalım.

Sayfa Görünümü

HTML Kodları

İç Donanım Birimleri

a. Anakart

b. İşlemci

c. RAM

<h3>İç Donanım Birimleri</h3>

<li>Anakart</li>

<li>İşlemci</li>

</ol>

Örnek 4: Aşağıdaki sıralı listeyi oluşturalım.

Sayfa Görünümü

HTML Kodları

5. Anakart

6. İşlemci

7. RAM

<li>Anakart</li>

<li>İşlemci</li>

</ol>

Örnek 5: Aşağıdaki sıralı listeyi oluşturalım.

Sayfa Görünümü

HTML Kodları

E. Anakart

F. İşlemci

G. RAM

<li>Anakart</li>

<li>İşlemci</li>

</ol>

Örnek 6: Aşağıdaki sırasız listeyi oluşturalım.

Sayfa Görünümü

HTML Kodları

Anakart
İşlemci
RAM

<li>Anakart</li>

<li>İşlemci</li>

</ul>

Örnek 7: Aşağıdaki sırasız listeyi oluşturalım.

Sayfa Görünümü

HTML Kodları

Anakart
İşlemci
RAM

<li>Anakart</li>

<li>İşlemci</li>

</ul>

Örnek 8: Aşağıdaki iç içe listeleri oluşturalım.

Sayfa Görünümü

HTML Kodları

Donanım Birimleri
- Anakart
- İşlemci
- RAM
Programlar
- Word
- Excel
- Power Point

<ol>

<li>Donanım Birimleri

<li>Anakart</li>

<li>İşlemci</li>

</ul>

</li>

<li>Programlar

<li>Excel</li>

<li>Power Point</li>

</ul>

</li>

</ol>

HTML Etiketler 4 Konu Anlatımı için Tıklayınız…

(Metin Düzenleme Etiketleri)

ETİKETLER: basic html codes, html code, html code example, html codes for websites, html etiketleri, html tags, html yazım kuralları, iç içe etiketler, listeleme etiketleri, notepad++, parametre kullanımı

BİR YORUM YAZIN

[ Yoruma cevap yazmaktan vazgeç ]

This site uses Akismet to reduce spam. Learn how your comment data is processed.

ZİYARETÇİ YORUMLARI - 0 YORUM

Henüz yorum yapılmamış.