Temel HTML Bilgileri 2
Mayıs 23rd, 2006
Önceki yazıda HTML diline az biraz giriş yapmıştık. Bu yazıda da HTML etiketlerini yakından tanıyacağız. Hadi başlayalım.
Bu yazıyı yazdığım program tüm HTML etiketlerini desteklemediği ve kullanacağım etiketleri etkisiz bir biçimde dahi olsa yazmama izin vermediği için HTML etiketlerini tanımlamakta kullanılan büyüktür ve küçüktür işaretleri yerine köşeli parantezler kullanacağım. Yani " ve ">" yerine sırasıyla "[" ve "]" kullanacağım. Kodu bir editöre yapıştırdıktan sonra bu karakterleri Bul ve Değiştir komutu ile normal HTML’e çevireiblirsiniz.
Öncelikle görsel etiketleri inceleyelim. Zira başlık kısmını tanımlarken kullanılan etiketler görsellikten ziyade yapısal tanımlamalar için etkilidir. Yöntem olarak benim sevdiğim tümden gelimdir. Önce bir örnek HTML sayfası kodlayalım sonra aşama aşama açıklayalım.
[html]
[head]
[title]HTML Sayfası[/title]
[/head]
[body]
[h1]Başlık Bu Yaw[/h1]
[p]Paragraflar bilgilerin sunumunda önemli bir yapıdır. Paragraflarda yazılar belli grup halini alır. Otomatik olarak alttan ve üstten boşluklanarak diğer parafraflardan veya HTML öğelerinden ayrılırlar. Paragrafların içinde ya da dışında biçimli yazılar yazmak için [font face='verdana' size='2' color='blue']FONT etiketi kullanabilirsiniz[/font].
[/p]
[table width='80%' align='center']
[tr]
[td]Satır1 Sütun 1[/td]
[td]Satır2 Sütun 2[/td]
[/tr]
[tr]
[td colspan='2' align='center']Satır 2 Sütun Hepsi[/td]
[/tr]
[/table]
[/body]
[/html]
Şimdi sıra kodların anlamına geldi. Önceki yazıda da belirtmiştim HTML sayfası iki kısımdan oluşur diye. Bu örnekte [title] etiketini kullanmak için bir başlık([head]) tanımladık. Bu etiket gezginin tepesinde istediğimiz başlığı göstermemize yarar, görsel olarak. Yapısal olarak sayfanın başlığıdır. Arama motorları sayfanın ismi olarak bu etiketin bilgilerini kullanırlar. Genelde tüm karakterleri kullanabilirsiniz. Ama title etiketi içinde başka bir HTML etiketi kullanamazsınız.
body etiketi ile görsel öğeler tanımlanmaya başlar. Sayfanın fiziksel yapısı diyebiliriz. Bu arada bir not daha eklemek istiyorum. head ve body yani başlık ve gövde tanımlanmaları içinde kullanacağınız etiketler çoğunlukla farklıdır ve ters yerlerde kullanıldıklarında iş görmeyebilirler. Mesela title etiketini body etiketi içinde kullanırsanız gezginler yine başlık çubuğunda yazdığınız şeyi gösterecektir fakat arama motorları için bu bir şey ifade etmeyecektir. Ayrıca gezginler genellikle kullanıcıya en kaliteli sayfayı göstermek için hataları göz ardı ederler. Bu yüzden HTML’den hata ayıklarken dikkat etmek gerekir.
İlk etiketimiz [h1]. Bu etiket ve benzerleri ([h2],[h3],…,[h7]). Çeşitli boyutlarda başlık koymak için kullanılır. Sayılar büyüdükçe yazı küçülecektir. Bu etiket kullanıldıktan sonra geriye kalan objeler bir alt satıra geçer ve başlıktan büyüklüğüne göre belli bir miktar ayrılır.
Ardından gelen etiket paragraf etiketi yani [p]’dir. Bu etiket adı üstünde yazıları bloklara ayırır. p içinde font etiketi kullandık. font etiketi ile bir yazıya şekil verebiliriz. şekil verme işlemini etiketlerin özelliklerini tanımlayarak verebiliriz. Bu örnekte font etiketi face denilen yazı tipi, size denilen büyüklük ve color denilen renk özelliklerine sahip. Eğer özellik yazmazsanız gezgin kendi varsayılan değerlerini kullanacaktır.
Tablo oluşturmak için table etiketini kullanırız. HTML dilinin tablolama mantığını bir sonraki yazıda açıklayacağım. Bu örneğe koyma sebebim değişik etiketlerin değişik özelliklere sahip olduğunu göstermek. Evet her etikket kendi özelliklerine sahiptir. Gerçi bazı özellikler, mesela color özelliği, bir çok HTML etiketinde bulunur fakat genellikle etikelerin kendine has özellikleri vardır. Bu örnekte iki satırdan oluşan bir tablo çizdiriyoruz. Bu tablonun ikinci satırında iki sütun birleştirilmiş ve bir sütun haline gelmiş. Daha fazla detay gerksiz olur. Dediğim gibi gelecek yazıda tablo konusuna daha ayrıntılı değineceğim.
Tablodan sonra gövde etiketimizi sonlandırıyoruz. Ardından da HTML dökümanımızı bitiriyoruz. Aslında bu tip şeylerle site yapmak iğne ile kuyu kazmak gibi birşey. Bu yüzden HTML sayfaları için WYSIWYG (What You See Is What You Get) editörleri daha kullanışlıdır. Fakat dediğim gibi bir internet sitesi kuracaksanız az çok arkada neler dönüyor bilmenizde fayda var.
Bu akşamlık da bu kadar. Bir sonraki yazıda görüşmek üzere.
Ertuğrul Karademir
23.05.2006,Ankara
Köşedeki tüm yazılar :
