HTML for Kids · Ders

Listeler: Sıralı ve Sırasız

Numaralı ve madde işaretli listeler oluşturun

Listeler: Sıralı ve Sırasız, CoddyKit'te ücretsiz bir HTML for Kids dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML for Kids öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML for Kids kursu toplamda 4 dersten oluşur.

Listeler: sıralı ve sırasız

Bir sonraki derse hoş geldiniz! Bugün HTML'de listeler oluşturmayı öğreneceğiz. Listeler bilgileri düzenlemeye ve okunmasını kolaylaştırmaya yardımcı olur.

Listeler nedir?

Listeler, ilişkili öğeleri bir arada gruplandırmanın harika bir yoludur. HTML'de iki ana liste türü vardır:

Sıralı listeler: Öğeler numaralandırılır (1, 2, 3...).
Sırasız listeler: Öğeler madde işaretleriyle gösterilir.

Her iki türü de nasıl oluşturacağımızı öğrenelim!

Sıralı liste oluşturma

Sıralı liste, <ol> etiketi kullanılarak oluşturulur. Listedeki her öğe <li> (liste öğesi) etiketi kullanılarak eklenir.

Örnek:

<ol>
  <li>Wake up</li>
  <li>Eat breakfast</li>
  <li>Go to school</li>
</ol>

Sırasız liste oluşturma

Sırasız liste, <ul> etiketi kullanılarak oluşturulur. Her öğe, sıralı listelerde olduğu gibi <li> etiketi kullanılarak eklenir.

Örnek:

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

İç İçe Listeler

Bir listenin içinde başka bir liste oluşturabilirsiniz. Buna iç içe liste denir. Sıralı ve sırasız listeleri birbirinin içinde kullanabilirsiniz.

Örnek:

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Spinach</li>
    </ul>
  </li>
</ul>

Açıklamalı Listeler

HTML, <dl>, <dt> ve <dd> etiketlerini kullanarak açıklama listeleri oluşturmanıza da olanak tanır:

<dl>: Listeyi tanımlar.
<dt>: Terimi (başlığı) tanımlar.
<dd>: Açıklamayı tanımlar.

Örnek:

<dl>
  <dt>HTML</dt>
  <dd>The language used to create web pages.</dd>
  <dt>CSS</dt>
  <dd>The language used to style web pages.</dd>
</dl>

Listelere Stil Ekleme

Listelerinizin görünümünü değiştirmek için CSS kullanabilirsiniz. Örneğin, madde işaretlerinin veya sayıların türünü değiştirebilirsiniz.

Örnek:

<style>
  ul {
    list-style-type: square; /* Changes bullets to squares */
  }
  ol {
    list-style-type: upper-roman; /* Changes numbers to Roman numerals */
  }
</style>

<ul>
  <li>Apples</li>
  <li>Bananas</li>
</ul>

<ol>
  <li>First Step</li>
  <li>Second Step</li>
</ol>

Kendiniz Deneyin

Sıralı ve sırasız listeler içeren basit bir web sayfası oluşturalım. İşte bir örnek:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Lists</title>
  </head>
  <body>
    <h1>My To-Do List</h1>
    <h2>Morning Routine</h2>
    <ol>
      <li>Wake up</li>
      <li>Brush my teeth</li>
      <li>Have breakfast</li>
    </ol>
    <h2>Shopping List</h2>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Eggs</li>
    </ul>
  </body>
</html>

Harika İş!

Tebrikler! Sıralı ve sırasız listeler, iç içe listeler ve açıklama listeleri oluşturmayı öğrendiniz. Bunlar, web sayfalarınızdaki bilgileri düzenlemek için harika araçlardır. Sonraki derste, farklı sayfaları ve web sitelerini birbirine bağlamak için nasıl bağlantı ekleyeceğinizi öğreneceğiz. Daha fazla eğlenceye hazır olun!

Sıkça Sorulan Sorular

“Listeler: Sıralı ve Sırasız” dersi ücretsiz mi?

Evet — “Listeler: Sıralı ve Sırasız” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML for Kids kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML for Kids kursu toplamda 4 dersten oluşur.

“Listeler: Sıralı ve Sırasız” dersinde ne öğreneceğim?

Numaralı ve madde işaretli listeler oluşturun HTML for Kids ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML for Kids öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML for Kids, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Listeler: Sıralı ve Sırasız” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML for Kids dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML for Kids dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML for Kids Sayfasına Dön