Opera 29 [Mobil-Masaüstü] kararlı sürüm yayınlandı..

HTML Etiket Sistemi – HTML5 Eğitimi

Yazan: Çağlar Yeşilyurt | 2 Ekim 2011 | eğitim html HTML5 web teknolojileri

Bu yazımızda HTML’de kullanılan etiketlere giriş yapacağız. Hangi etiketlerin ne anlama geldiği sorusuna değil de, etiketin genel olarak ne olduğu ve ne işe yaradığı sorularına cevap vereceğiz.

Etiketler

HTML, web sayfalarını oluşturmak için etiketler kullanır. Web sayfasındaki tüm içerik etiketler sayesinden anlamlandırılır. Örneğin “bu bir paragraf”, “bu bir resim” gibi. Böylece tarayıcınız HTML kodlarına bakarak ekrana bir paragraf yazdırır veya ekranda bir resmi görüntüler. Bu örnek çoğaltılabilir. İlerideki konularda hangi etiketin ne işe yaradığından bahsedeceğiz.

Etiket söz dizimi 

HTML, etiketleri belli kurallara göre kullanır. Bu kuralların bütününe söz dizimi deniliyor. Bir etiket <, > ve / özel karakterlerinden oluşur. Bu karakterler yazılımlar tarafından yorumlanarak anlamlı bir HTML elementi oluşturulur. Bir HTML elementi, genelde iki etiketin birleşmesiyle meydana gelir.

HTML Elementlerinin Yapısı

HTML etiketleri genelde çiftler halinde kullanılır.

Basit bir element oluşturmak için başlatıcı bir etiket kullanılır.

  1. Bu etiket < (küçüktür işareti) karakteriyle başlar.
  2. Boşluk bırakmadan birkaç karakterle, buna “etiket adı” diyeceğiz, devam eder.
  3. > (büyüktür işareti) karakteri ile biter.

Açılan bu elementi sonlandırmak için bitirici bir etiket kullanılır.

  1. Bu etiket </ ile başlar.
  2. Boşluk bırakmadan aynı karakterlerle, yani aynı etiket adıyla, devam eder
  3. ve > karakteri ile biter.

Eğer etiket adı “cite” ise(alıntı anlamında, citation) o zaman elde edeceğiniz element:
<cite></cite>
Bazı elementler bitirme etiketine sahip değildir, çünkü bunların bittiği takip eden diğer elementler tarafından anlaşılır. Örneğin aşağıdaki şekilde bir element görmüş olabilirsiniz:
<br>
Bir element sunduğu anlamlandırmayı arttırmak için öznitelik adlı özelliklere sahip olabilir.
Bu öznitelikler başlatıcı etikette belirtilir. Öznitelikler bir isme ve bir değere sahiptir. Bunları ayırmak için = (eşittir) karakteri kullanılır.
Örneğin;
<etiketadı öznitelik=”değer”></etiketadı>
HTML’de öznitelik değerleri boşluk, “,  ‘, `, =, <, ya da > gibi özel karakterler içermiyorsa tırnak işaretsiz kullanılabilir. Diğer durumlarda bu değerler tek ya da çift tıknak içinde olmak zorundadır. Değer, eğer boşsa, = karakteriyle beraber tamamen kaldırılabilir. Webte görebileceğiniz örnek söz dizimleri:

[codesyntax lang=”html4strict”]

<!-- boş öznitelikler -->
<input disabled>
<input disabled="">
<input disabled=""/>

[/codesyntax]

[codesyntax lang=”html4strict”]

<!-- bir değere sahip öznitelikler -->
<input name=adres>
<input name='adres'>
<input name="adres">

[/codesyntax]
Bu elementlerin ne anlama geldiği ilerideki konularda anlatılacaktır. 

Öznitelikler elemente ilişkin belirli ayarlamaların yapılmasını sağlar, bir elementi bir başkasından ayırt etmeye de yardımcı olur. Öz niteliklerin bir çok işlevi vardır ve her elementte kullanılabilecek öznitelikler farklıdır. Bunları elementleri tek tek incelerken göreceksiniz.

Sözdizimi Hatası

HTML5, hatalı yazımların tarayıcı tarafından nasıl yorumlanacağına dair bir prosedür de sunar. Böylece bir sitenin tarayıcılar arasında farklı çalışması düşürülmüş olur. Bu ileriki konularda anlatılacaktır. 

« 2. bölüm: HTML ve HTML5 Nedir?
4. bölüm: HTML Etiket Sistemi »

Vivaldi Türkiye sitesi

  • Anonim

    Web Tasarım okuyan biri olarak Bu Konuyu zevkle takip edeceğimi bilmenizi isterim.
    Teşekkürler Emeği Geçenlere..

  • http://my.opera.com/greench greench

    İki makale daha hazır gibi ama daha ilerisini hazırlamak için vaktim olmadı. Aralık ayının ilk haftasına kadar yayınlamış olurum bu ikisini.

    • Anonim

      Bekliyoruz:)