Hoşgeldiniz
Okuma Moduna Geç
02 Aralık 2016 - 23:05
HTML Hakkında Hiçbir Şey Bilmiyorum! Temel HTML Etiketlerine Bakış

Önceki dersimizde oluşturduğumuz ilk html dosyası ile ekranımıza "Bu bir paragraf yazısıdır." metnini yazdırmayı başarmıştık. Bu dersimizde ise temel html etiketlerinin ve işlevlerinin üzerinden geçip bir stil dosyası ile bağlantılarını oluşturacağız ve CSS ile birlikte ilerlemeye devam edeceğiz.

 

HTML Etiketleri Nedir, Nasıl Oluşturulur ve Ne İşe Yararlar?

HTML Etiketleri < işareti ile başlayıp > işareti ile sonuçlanan ve arasına yazılan ifadenin özelliklerini içerisindeki metne atamaya yarayan HTML'in kod yapısıdır. Bu yapı itibari ile yazılacak olan tüm etiketler küçüktür ve büyüktür işaretleri arasına yazılmaktadır. Önce birkaç temel etiketi görelim ve sonrasında işleyişlerini inceleyelim.

Sayfa Oluştururken Temel Etiketlerimiz (nav, header, footer, main, aside, article, section)

Temelde bir sayfa oluştururken sayfaları bölümlere ayırmamız gerekmektedir. Bu işlev için oluşturulan bu etiketleri tercih edip akabinde css yardımı ile etiketlere özellikler atayabiliriz. Bu terimleri mutlaka bilmeli ve sayfalarınızda size bir yardımcı olarak bu etiketleri seçmelisiniz.

  • nav : Gezinme Çubuğu (Üst Menü)
  • header : Sayfa Başlığı
  • footer : Sayfa Alt Bilgisi
  • main : Ana Bölüm
  • aside : Kenar Çubuğu (Yan Menü)
  • article : Makale Gövdesi (İçerik)
  • section: Bölüm (Sayfa Parçası)

Başlıklar (h1 - h6)

Her sayfa başlıklardan ve içeriklerinden oluşur. Bu sebeple belirlenmiş ve HTML'de kullanmakta olduğumuz en temel yapıların başında başlıklar gelmektedir. Başlıklar 6 farklı etikete sahiptir. h1'den başlayıp h6'ya kadar küçülerek devam ederler. Elbette css yardımı ile bu boyutlandırmalarda kendi dilediğimiz boyutları girerek değişiklik yapabiliriz. Lakin internette ufak bir araştırma yaparsanız h etiketlerinin kullanımının seo açısından da oldukça faydalı olduğunu gözlemleyebilirsiniz.

Paragraflar (p)

Belirttiğimiz üzere hazırlanan bir sayfa üzerinde en önemli ikinci elemanımız olan p etiketleri bir paragraf oluşturmamıza olanak tanır. Bu oluşturulan paragraf sonrasına veya öncesine yazılan metinlerden bağımsız olarak alt satıra devam etmektedir.

Satır Atlamak (br)

Standart bir editör üzerinden yazmakta olduğunuz kodların dizilişleri önemsizdir. HTML olarak hazırladığınız bir sayfada eğer satır atla komutu vermezseniz tüm yazılan metinleri yan yana algılayacaktır. Bu durumda yardımımıza koşan etiketimiz ise br etiketidir. Tek işlevi satır atlamaktır. Standart HTML komutlarında br etiketi diğer etiketlerden farklı olarak açma ve kapatma etiketlerine ihtiyaç duymaz. Yani yalnızca < br > olarak girdiğinizde de < br / > olarak girdiğinizde de bu tarayıcınız tarafından algılanacaktır. Lakin her dilde olduğu gibi HTML dilinde de bir takım kurallar vardır ve bu kuralların başında her html etiketinin kapatılmış olması gerekmektedir. Bu sebep ile eğer / işaretini kullanmadan br etiketini kullanırsanız ne yazık ki bu kuralı çiğnemiş olursunuz. (Tabi kural tanımaz bir yapınız varsa bu sizin tercihinizdir) Bu sebeple önerim < br / > şeklinde kullanılması yönündedir.

Çizgi İle Ayırmak (hr)

Başlangıçta fazlaca tercih edilen etiketlerden bir diğer ise çizgi oluşturmamıza olanak tanıyan hr etiketidir. Bu etiket yardımı ile sayfanıza boydan boya bir çizgi atabilir ve iki metni rahatlıkla birbirinden ayırabilirsiniz.

Yorumlar (< ! - - Yorum - - >)

Defterinize not alırken dahi zaman zaman oklar ile bir takım notlar almaktayız. Bu notlarımız HTML dilinde yorum olarak geçmektedir. Yorum satırları hazırladığımız bir kod yapısını aylar belki yıllar sonra yeniden gözden geçirmek için açtığımızda bize yol gösterecek en temel araçlarımız olacaktır. Bu sebeple HTML kodları içerisinde yazılan hemen her kod için bir açıklama satırı oluşturmak size geri dönüşte fayda sağlayacaktır. Bu oluşturulan yorum satırları kullanıcı tarafında gözükmemektedir.

Kalın, Italik ve Altı Çizili Yazı Oluşturmak (b, i, u)

Bir metin içerisinde vurgu yapmak için kullanılan temel etiketlerimiz olarak sizlere aktaracağım diğer etiketler ise b, i ve u etiketleridir. Bu etiketler yardımı ile yazımıza artık Whatsapp gibi bir platformda dahi kullanabildiğimiz kalın, italik ve altı çizili olayını uygulayabiliriz. Bu etiketler ile aynı görevi gören bir takım farklı etiketleri de listeleyebiliriz;

  • big : Normal yazı boyutundan bir tık daha büyük bir punto ile ekrana yazıyı yazdırır.
  • em : i etiketi ile aynı görevi görür. Fakat arkaplanda bakıldığında Google gibi arama motorları tarafından daha fazla önem verildiği bilinmektedir. Bir yazının vurgulu olduğunu belirtir.
  • small : Normal yazı boyutundan bir tık daha küçük bir punto ile ekrana yazıyı yazdırır.
  • strong : b etiketi ile aynı görevi görür. Fakat arkaplanda bakıldığında, em ve i etiketi arasındaki durumda yaşanan gibi arama motorları tarafından daha fazla önem verildiği bilinmektedir. Bir yazının güçlü olduğunu belirtir.
  • ins : Metninize u etiketi ile aynı görevi görecek şekilde işlemde bulunur ve altını çizer.
  • del : Üstü çizili bir yazı oluşturmanızı sağlar. Görüntünün üstünün çizili olmasının yanında artık "silindiğini" ifade eder.
  • s : Üstü çizili bir yazı oluşturmanızı sağlar. Yalnızca görüntünün üstünün çizili olduğunu ifade eder.
  • strike : Üstü çizili bir yazı oluşturmanızı sağlar. HTML5 ile desteği kaldırılmıştır!
  • mark : Etiket içine yazılan değerin arkaplanını açık sarı yaparak metni ön plana çıkartmaktadır.

Çok İhtiyaç Duyulmayan Alt ve Üst Değerler (sub, sup)

Açıkçası ekrana pek bu türde veri yazdırma gereksinimim olmamıştı. Fakat bir gün bir matematik projesinde ihtiyacınız olabilir düşüncesi ile sub ve sup etiketlerini es geçmek istemedim. Herhangi bir üst yazı oluşturmak için sup, tam tersi olarak alt yazı oluşturmak için sub etiketlerini tercih edebilirsiniz. ( 10x + ln1010 )

Listeler (ol, ul, li)

HTML'e en geniş çerçeveden bakıldığında en çok kullanılanacak alanlardan birisi listeler bölümüdür. Çünkü genellikle menü oluştururken tercih edilir. Css ile şekillendirilebildiği gibi saf html hali ile kullanılması bir tercih meselesidir.

  • ul : Sırasız Liste. Seçilen herhangi bir işaret ile kullanıldığında o işarete bağlı olarak liste oluşturur. Örneğin başında yuvarlak ile işaretlenmiş alt alta listeler hazırlayabilirsiniz. 
  • ol : Sıralı Liste. ul'dan farklı olarak kullanılan bu etiket yardımı ile 1'den başlayarak sıra ile devam eden alt alta listeler oluşturabilirsiniz.
  • li : Liste Öğesi. li etiketi mutlaka ul ve ol ile birlikte kullanılmaktadır.

Yukarıdaki yer alan Kalın, Italik ve Altı Çizili Yazı Oluşturmak ve Çok İhtiyaç Duyulmayan Alt ve Üst Değerler hariç olarak diğer tüm etiketleri aşağıdaki kod editöründe görüp inceleyebilirsiniz.

Sponsorlu Bağlantı
İlk Yorumu Sen Bırak!
Bu konu hakkında henüz kimse görüş bildirmedi. İlk görüşü sen aktarmak ister misin?
Adınız ve Soyadınız
Mail Adresiniz
Mail adresinizi yalnızca yönetici görüntüleyebilir.
Web Siteniz
Yorumunuz
Yorumu Gönder