Sayfalar

Temel HTML Etiketleri [Ders 3]

Bu derste, yani HTML derslerinin üçüncüsünde; basit bir HTML sayfası oluşturmak için ihtiyacınız olacak temel HTML etiketlerinden bahsedelim. Bunlar en temelde bilmeniz gereken şeylerdir ve bir web programlayıcısının bunları bilmemesi gibi bir durum söz konusu değildir.

Bu derste teorik bilgilerden çok pratiğe geçeceğimiz için öğrendiğiniz yeni bilgileri kendiniz de yazarak pekiştirmelisiniz. HTML derslerinin ilkinde söylediğim gibi basit bir not defteri programı işinizi görecektir. Yazdığınız kodları "index.html" ya da "index.htm" şeklinde kaydedin ve çalıştırın. Varsayılan web tarayıcınızda açılacak bu sayfa, sizin kodladığınız internet sayfasıdır.

Başlık, paragraf ve satır atlama etiketleri HTML'nin en önemli etiketleridir.

Başlıklar

Başlıkları oluşturmak için <h1> ile <h6> arasındaki tüm sayılar kullanılabilir. (h1 ve h6 da dahildir) Birbirlerinden farkı punto büyüklükleridir. <h1> etiketi en büyük puntolu başlığı oluştururken, <h6> etiketi en küçük puntolu başlığı oluşturmaktadır.

Tüm başlık etiketleri: Bir başlık oluşturduğunuzda, HTML dili otomatik olarak başlıktan önce ve sonra bir satır atlar.

Paragraflar

Paragraflar <p> etiketi kullanılarak belirtilir. Fakat paragraf bittikten sonra kapanış etiketi olan </p> yi kullanmayı unutmayın, aksi taktirde bazı tarayıcılar HTML kodlarınızı sizin istediğiniz gibi ekrana yansıtmayabilir.

Satır atlama

Satır atlamak için <br /> etiketi kullanılır, fakat bu etiket yeni bir paragraf açmaz. İsterseniz <p> etiketiyle <br /> etiketinin arasındaki farkı anlamak için ufak bir deneme yapabilirsiniz.
Satır atlama etiketi, <br /> yerine <br> şeklinde de kullanılabilir, fakat daha önceden öğrendiğimiz W3C standartları gereği birinci kullanımı tercih ediyoruz. (Yani <br />)

HTML dökümanlarında açıklama (yorum) yazısı oluşturmak

HTML belgelerindeki yorum yazıları, programcıların kodlar hakkındaki bıraktıkları yorum veya bilgiyi içerir ve web tarayıcıları tarafından bu yorum kısmı görmezden gelinir. Yani yorum satırlarının, programcının kodlar hakkında not düşerek, ileride kodları kendisi veya bir başkası okuduğunda zorlanmamasını sağlamaktadır. Bu yorum yazıları <!-- ile başlar --> ile biter. Örnek bir yorum yazısı:

Temel ipuçları ve uyarılar

  • HTML kodlarınız farklı web tarayıcılarında farklı biçimde yorumlanacağı için farklı sonuçlar ortaya çıkabilir. Bunları en az indirmek için W3C standartlarına olabildiğince uymaya çalışmanız oldukça faydalıdır.
  • HTML kodlarınızla sayfa tasarımı yaparken farklı büyüklükteki ekranlarda farklı gözükeceğini unutmayınız. Yani metinleri biçimlendirmek için fazladan boşluk bırakmak gibi tekniklere başvurmayın.
  • HTML'de arka arkaya eklediğiniz boşluklar kaç tane olursa olsun, bu boşluklar HTML tarafından teke indirilir.
  • Boş bir satır bırakmak için <p> etiketini değil <br /> etiketini kullanınız.
  • Eğer sıralı liste yapmak istiyorsanız, bunun için <br /> etiketini kesinlikle kullanmayınız. İleride öğreneceğimiz liste etiketlerinin görevi tam olarak budur.

Temel HTML Etiketleri

Etiket Açıklama
<html> HTML dökümanının tamamını içerisine alan etiket. HTML dökümanı olduğunu tanımlar
<head> Web sayfası hakkında bilgiler içeren kısımdır. İçeriğin çoğunluğu kullanıcılara gösterilmez.
<body> Web sayfasına bastırılacak kodlar burada yer alır
<h1> ... <h6> Büyükten küçüğe başlık oluşturma etiketleri
<p> Paragraf oluşturma etiketi
<br /> Satır atlama etiketi
<hr /> Yatay bir çizgi oluşturma etiketi
<!-- --> Kodların içine yorum ekleme aparatı
 

Son sözler

Temel HTML etiketleri hakkında kısa bir dersti, umarım yararlı olmuştur. Tüm etiketleri buraya eklemedim. HTML dilinde bunlara benzer birçok etiket bulunmaktadır. Hepsini buraya yazsam da muhtemelen ne sizin ne de benim aklımda kalacaktı. Bunun yerine olayın mantığını anlatmak istedim. Zaten diğer etiketleri öğrenip gerekli yerde kullanmak için tecrübeye ihtiyacımız olacak. Yani deneye deneye hepsini öğreneceğimizi düşünüyorum.

Aşama aşama ilerlediğimiz web programlama derslerinden haberdar olmak istiyorsanız blogu takip edebilirsiniz. Ayrıca aklınıza takılan bir soruyu da yorum kısmını veya iletişim sayfasını kullanarak bana iletebilirsiniz. Kolay gelsin...

Hiç yorum yok:

Yorum Gönder

Kaydol: RSS
Blogger Tips and TricksLatest Tips And TricksBlogger Tricks