Anasayfa / Yazılım / HTML / CSS / HTML Kod Yapısı

HTML Kod Yapısı

Bu yazımda HTML kod yapısına biraz değinmek istiyorum. HTML yapısında içerikler tag’ler içine yazılırlar. Bunlar element olarak da adlandırılmaktadır. Örneğin bir başlık atamak için h1 elementi kullanılır ve kullanımı aşağıdaki gibidir.

İsmail GÜRSOY

Burada görüldüğü gibi ilk kısımda yer alan h1 tagi start tag olarak adlandırılır yani elementimin başlangıcını ifade eder. Daha sonra İçerik yer alıyor ve sonra da end tag yani bitiş tagim yer alıyor. Böylelikle h1 elementimi sonlandırıyorum. Bu kod yapısını kullanarak aslında tarayıcıya şunu demek istiyoruz. h1 etiketi içinde yer alan içeriği başlık olarak algıla. Burada h1, HTML’de birinci seviye başlık elementidir.

HTML elementlerine davranış yani attribute eklemek de mümkündür. Özellikle HTML’de bilinmesi gereken iki tip element vardır bunlar : id ve class’dır. Peki attribute nasıl kullanılabilir örnekleyeyim :

Bir HTML dökümanında benzersiz bir eleman tanımlamak için id attribute kullanılır. Örneğin aşağıda id kullanımını h1, h2 ve h3 elementleri için verdim.





Örnek




 

Web sayfamıza hoşgeldiniz

İsmail GÜRSOY

İstanbul

Bununla birlikte class attribute de kullanılabilir. Aşağıdaki kod bloğunda da class attribute kullanımına örnekleme yaptım.





Örnek




 

Web sayfamıza hoşgeldiniz

İsmail GÜRSOY

İstanbul

Şimdi son kod bloğumda h1 elementi için hem id hem de class attribute tanımladım. Burada anaBaslik id için deneme adında bir class attribute mevcut oluyor. Dolayısı ile şunu yapabilirim, anaBaslik id için farklı class’da h1 elementi olan tagler açabilirim. Göstermek istediğim bu idi. h2 ve h3 için ise id kullanmadan direkt olarak class kullandım, bu da mümkün olan bir durum. Aslında bu class ve id yapısı CSS için çok önemli. Dolayısı ile bunları iyi kavramak gerekiyor.

Peki bir element içinde yalnızca yazımı olacak? Üstteki kod bloklarında görüldüğü gibi elementler içinde içerik olarak hep bir yazı var. Tabii ki bu durum hep böyle değil. Elementler içinde içerik olarak sadece text yani yazı değil, diğer türde nesnelerde bulunabilir. Mesela aşağıdaki kod bloğunda div elementi içinde 3 adet nesne var.

 

HTML ile yeni tanışanlar için kodun anlamını şimdilik anlamaya gerek yok, göstermek istediğim nokta farklı nesnelerin olabileceği. Burada görüldüğü gibi div elementi içinde bir adet resim, bir adet tanımlama etiketi ve bir adette textbox yer alıyor. Yani div elementi kendi içinde 3 adet element içeriyor. Bunlar img, label ve input elementleri. Görüldüğü gibi buradan da anlaşılabileceği üzere bir element içinde iç içe bir çok element tanımlayabiliyoruz, tabii tag açıp kapama kurallarına dikkat ederek.

Bazı elementler sonlandırma tagine ihtiyaç duymazlar. Dolayısı ile bunların içerikleri de yoktur. Bu elementlere örnek verecek olursak en sık kullanılanı img olanıdır.

gibi bir kullanım. Görüldüğü gibi kapanışı / > şeklinde. Genelde bu tip elementler dışarıdan referens aldıkları dosya, internet adresi gibi alanlar için kullanılırlar.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir