0 gün Seviye 1 Avar Teknolojileri

Etiket, Eleman, Nitelik

Ders 4/45 · 7 dakika · 3 soru · 1 egzersiz

Bu dersin sonunda bir HTML satırının parçalarını adlarıyla söyleyebilecek ve etiketleri doğru sırayla iç içe yazabileceksiniz.

Bir elemanın parçaları

HTML’de yazdığınız her şey küçük parçalardan oluşur.

<p>Merhaba dünya</p>
  • <p> açılış etiketidir. “Paragraf burada başlıyor” anlamına gelir.
  • Merhaba dünya içeriktir.
  • </p> kapanış etiketidir. Başındaki / işaretine dikkat edin. Bu işaret her zaman etiket tanımlayıcısından önce gelir.

Bu üçünün tamamına birden eleman denir.

Bazı elemanların tarayıcıda varsayılan değerleri bulunur, burada paragraflar arasındaki boşluk örnek olarak verilebilir. Farkın anlaşılması için düz bir yazı ile paragraf yazıları karşılaştırılıyor.

<p>Birinci paragraf</p>
<p>İkinci paragraf</p>

<hr>

Birinci paragraf<br>İkinci paragraf

Nitelikler

Bir etikete ek bilgi vermek için nitelik (İngilizcesi attribute) kullanılır. Nitelikler açılış etiketinin içine, ad="değer" şeklinde yazılır.

<a href="https://ornek.com">Siteye git</a>
  • a etiketin adıdır. Bağlantı oluşturur.
  • href niteliğin adıdır. (Bu durumda etiketin hedefini belirtir.)
  • "https://ornek.com" niteliğin değeridir. (Hedef değeridir.)
  • Siteye git ekranda görünen içeriktir.

Bir etiketin birden fazla niteliği olabilir. Nitelikler arasında bir boşluk bırakılır. Etiketin kapanışının olmadığına dikkat edin.

<img src="kedi.png" alt="Uyuyan bir kedi">

Boş elemanlar

Bazı elemanların içeriği yoktur, bu yüzden kapanış etiketleri de yoktur. Bunlara boş eleman denir. En sık kullanılanları: br, hr, img, input, link, meta.

<br> şeklinde yazmanız yeterlidir. Bazı kodlarda <br /> görebilirsiniz, o da geçerlidir.

İç içe yazmak

Elemanlar başka elemanların içine yazılabilir. Kural basittir: en son açılan, en önce kapanır. İç içe kutular gibi düşünebilirsiniz.

<p><strong>Hadise</strong>söyler şarkı.</p>
<p>Ah yavrum,<strong><em> kalbimi yaktı.</em></strong></p>

Buradaki strong ve em etiketlerini Metin Biçimlendirme dersinde göreceğiz. Şimdilik yalnızca kapanış sırasına bakın: em en son açıldığı için en önce kapanıyor.

Yorumlar

<!-- ile --> arasına yazdıklarınız ekranda görünmez. (Ekranda ok gibi gözüküyor olabilir.) Bunlara yorum denir ve kendinize not bırakmak için kullanılır.

<p>Bu görünür.</p>
<!-- Bu görünmez. -->
<p>Bu da görünür.</p>
Yorumlar gizli değildir

Yorumlar ekranda görünmez ama sayfanın kaynak kodunu açan herkes okuyabilir. Şifre gibi bilgileri asla yorum olarak yazmayın.

Etiket adlarını büyük harfle de yazabilirsiniz (<P>), tarayıcılar cömerttir. Yine de herkes küçük harf kullanır, siz de öyle yapın.

Sık yapılan hatalar

Kapanış sırası yanlış. <strong><em>metin</strong></em> yanlıştır. Doğrusu <strong><em>metin</em></strong> şeklindedir.

Tırnağı unutmak. <a href="sayfa.html> yazarsanız tırnak kapanmadığı için sayfanın devamı bozulabilir.

Boş elemanı kapatmaya çalışmak. </br> diye bir etiket yoktur.

Soru 1

<a href="sayfa.html">Git</a> satırında nitelik hangisidir?

  • a :: Bu etiketin adıdır.
  • href="sayfa.html" :: Doğru. Nitelik, ad ve değerden oluşur.
  • Git :: Bu, elemanın içeriğidir.
Soru 2

Hangisi doğru yazılmıştır?

  • <p><strong>Merhaba</strong></p> :: Doğru. En son açılan strong en önce kapanmış.
  • <p><strong>Merhaba</p></strong> :: Kapanış sırası yanlış.
  • <p>Merhaba<p> :: İkinci etiket kapanış etiketi olmalıydı.
Soru 3

Aşağıdakilerden hangisinin kapanış etiketi yoktur?

  • p :: Paragrafın kapanış etiketi vardır.
  • a :: Bağlantının kapanış etiketi vardır.
  • br :: Doğru. br boş bir elemandır.
İç içe etiketler

Hedefteki sonucu elde edin. Metinleri aynen kullanın: paragrafın içinde HTML kelimesi strong etiketiyle yazılsın. Paragraftan sonra içinde Bu satır ekranda görünmez yazan bir yorum ekleyin.

<p>Bugün <strong>HTML</strong> öğreniyorum.</p>
<!-- Bu satır ekranda görünmez -->

Bu derste öğrendikleriniz

  • Açılış etiketi, içerik ve kapanış etiketi birlikte bir eleman oluşturur.
  • Nitelikler açılış etiketinde ad="değer" şeklinde yazılır.
  • İç içe yazarken en son açılan etiket en önce kapanır.

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.