Elementler
Dört tip normal ve üç tip de HTML elementimiz (aslında öge, eleman; fakat ben bunlara böyle hitap etmeyi seviyorum) vardır. Kodlama elementlerimizin biri "block", diğeri "inline" ve son olarak da ikisinin birleşimi "mix" elementler vardır.
Biri "Block Level Elements" olan <p>, <h1>, <div>... ki bunlar yeni bir satır başından başlar.
Diğeri "Inline Elements" olan <img>, <a>, <scan> ... bunlar da cümlenin veya diğer elementlerin içinde kullanılabilir.
Tabi bunların kapanış tagları da var. Aslında HTML açısından çok farklı gruplara koymak anlamsız gözükebilir, fakat bunların farkı CSS de ortaya çıkıyor. Ama unutmayın, bütün bu HTML-CSS-Javascript bir zincir bütünü. Her şeyi yapabilecek konuma gelmek için bu aradaki bağlantılara da dikkat etmemiz gerek.
Dört normal elementimiz mi? Hepinizin bildiği ateş, su, toprak ve tahta işte 😕 (Yenisi çıksa da izlesek..)
Block Elementleri
Bunların en başında, ismini "division" yani bölmeden almış, şanlı mı şanlı <div> var. Kodlamalarımızda HTML sayfamızın bir bölümünü temsil etmek istiyorsak, bu bölümü bu etiket ile belirlememiz gerekir. Sadece div'in arasındakiler de olabilir, aşağıdaki gibi "padding" özelliğini kullanarak bir uzunluk da seçebilirsiniz.
<div style="background-color: green ; color: white ; padding: 20px ; ">
<p> Yeşil arkaplan ve beyaz yazı rengi ola </p>
</div>
Şimdi burada neler yaptığımızı açıklayalım. Kısaca yazımızın bir bölümü için bir arkaplan renk büyüsü yaptık.
Division tag'ımıza biraz stil ekleyerek ;
"arka plan-rengimizi: seçip ; ardından yazı rengimizi: seçip ; bölümümüzün uzunluğunu: seçtik ; "
Blok elementleri (div, h1, p tarzı) her türlü satır başından başlayacakları için herhangi bir elementin komutası altına girmek istemeyen gururlu çocuklar olarak düşünebilirsiniz. Fakat bu lider arkadaşlar diğer elementleri komutaları altında barındırabilirler. Yani birden çok span falan olabilir mesela, yaratmak istediğiniz şeye bağlı.
Inline Elementleri
Bu arkadaşlar ise daha zariftir, birden fazlası bile bir "block elementlerinin" komutası altına girebilirler. İsimlerini de zaten bir çizginin içinde, yani satır içinde olmalarından almışlardır.
Bu arkadaşların elebaşları ise span. Karış, mesafe anlamlarına gelen arkadaşımız, kullanıldığı kadar alanı temsil eder.
span kardeşimizi de div gibi düşünebilirsiniz. Tek bir farkla ki, div bütün bir paragrafa etki ediyorken, span sadece metnin belirlediğiniz kısmına etki eder. Ayrıca diğer "Inline" elementleri gibi bir şeylerin içinde kullanılması gerekir:
<p> Bugün <span style="color:red">önemli</span> bir gün </p>
Evet, sadece bir kelimenin rengini kırmızı yaptık. Burada <p> kullanacağımız gibi başlık yani <h1> </h1> etiketini de kullanabilirdik.
Dikkat etmemiz gereken tek nokta ise, belirttiğimiz gibi; bloklar bütün bir paragrafa, diğerleri ise istediğiniz herhangi bir yere etki ederler ve bir şeylerin içinde olmak zorundadırlar.
Mix Elementler
Bu kısıtlamalara tabi olmayan bir de başı buyruklar vardır. İster satır başından itibaren özgürce başlarlar; isterlerse de bir şeylerin içinde. Rahat takılan tiplerdir yani..
-
Applet : Java ve ActiveX uygulamalarını çalıştırır; Flash ve haritaları gözüktürür. İyidir, candır.
-
Iframe : HTML'nin içine bir başka dosya gömer.
-
Ins : Bildiğimiz insterted, altı çizili yazı.
-
Map : Harita şeklinde resim ayarlamanızı sağlar.
-
Object : Herhangi bir belirttiğimiz şeyi (object) gömer.
-
Script : Komut dosyasını HTML ile bağlar.