Temel HTML Bilgileri 3
Mayıs 24th, 2006
Ard arda yazılar yazmak huyum değildir ama ilham gibi bir şeyler hissettim. Zaten temel şeylerle uğraşmayı hiç semem. Siz de okumayı sevmezsiniz herhalde. Üstelik internette HTML ile alakalı bir ton kaynak var. Yazının sonunda da linkler vermeye çalışacağım. Bu yüzden bu yazı serinin son yazısı. Bundan sonra web siteleri ile alakalı en fazla, belki, Mambo nasıl kurulur tipinde bir yazı yazabilirim. Gerçi onu da güzel açıklayan siteler bulunmakta. Neyse hadi son yazımıza başlayalım. Kolay gele.
Bu yazıyı yazdığım program HTML etiketlerine izin vermiyor bu yüzden HTML etiketlerini yazmakta kullanılan küçüktür işareti yerine [, büyüktür işareti yerine ] kullanacağım. Kodları yazarken metin editöründen bul ve değiştir tipinde bir komutla bu işin üstesinden gelebilirsiniz.
Önceki yazının sonunda tablolar hakkında bilgi vereceğimi söylemiştim. Sözümü tutuyorum işte bilgiler.
Tablolar ne işe yarar?
Tablolar bir kelime işlemcisinde verilerin listelenmesinde kullanılabilir. Verilerin sütun sütun ayrılması ile veriler belli bir şekli alırlar, okunmaları kolay olur. HTML tabloların ilk amacı da budur. Fakat tasarım açısından tablolar sayfayı belli bir düzende tutmak için kullanılır. Mesela sitenizin 600 piksel genişliğinde olmasını istiyorsanız tüm site içeriğini genişliği 600 piksel olan bir tablo içine koyarsınız. Böylece sitenin genişliği değişmeden kalır. Ya da diyelim ki bir fotoğrafın yanına yazı bloğu yerleştirmek istiyorsunuz. Normalde HTML buna satır bağlamında izin vermez fakat tablolama ile yazı bloğunu ve fotoğrafı ayırarak yan yana koyabilirsiniz.
Mesela aşağıdaki kodda bir başlık altında yazı iki sütun halinde sunuluyor.
[html]
[head]
[title]Tablo Bir[/title]
[/head]
[body]
[table width='600']
[tr]
[td colspan='2' align='center']Tablo Başlığı[/td]
[/tr]
[tr]
[td width='50%' valign='top']Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun Birinci Sütun [/td]
[td width='50%' valign='top']İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun İkinci Sütun [/td]
[/tr]
[/table]
[/body]
[/html]
Buradaki örnekte tablomuzun genişliğini 600 piksel olarak ayarladık. Uzun yazımız iki sütun halinde sunuluyor. Her bir sütun tablonun %50’si genişliğinde ayarlandı. Ayrıca herbir sütun içindeki yazılar dikey olarak ortada durmaması için dikey hizalamasını üst olarak ayarladık. Son olarak da tablo başlığı olacak sütunlar birleştirilip içindeki metin ortalandı.
Kodu parçalayalım. Bir tablo tanımlamasını table etiketi ile yaparız. Bu etiket içinde tabloya atayacağımız genel özellikler tablonu her tarafında geçerli olacaktır. Mesela yukarıdaki örnekte genişliği 600 piksel olarak ayarlamak için width özelliğini kullandık (attribute). Bu özellik satırlar ya da sütunlar için aksi belirtilmediği takdirde tablo genelinde aynı kalacaktır. Fakat şöyle yapılırsa: ilk sütun 400 piksel ikinci sütun 400 piksel ayarlanırsa bu sefer tablo genişliği 800 piksele çıkacaktır, her nekadar tablo tanımlamasında toplam genişliği 600 olarak ayrlamış olsak da.
HTML tablosu satır satır çizilir. Bir satırı başlatmak için tr etiketi kullanırız. Bu etiket sadece satır tanımlamak içindir. Mesela satırları birleştirip bir sütun yapmak için kullanılmaz. Satır içinde sütun öğresini yani bir bakıma satır ile sütunu kesiştiği yeri tanımlamak için td etiketini kullanırız. Bu etiket içeriğin bulunduğu etikettir. Ayrıca sütun ve satır birleşmeeri de bu etiketin özelliklerinde tanımlanarak yapılır.
Şu kod iki satır iki sütunluk bir tablonun kodudur:
[table]
[tr]
[td] [/td]
[td] [/td]
[/tr]
[tr]
[td] [/td]
[td] [/td]
[/tr]
[/table]
tablo tanıomlamasını başlatmak için table etiketi kullandık. ardından bir satır başlattık tr etiketi ile. Sonra iki sütun koyacağımızdan iki kere td etiketi tanımladık. Aynı şeyi ikinci kere yapınca aynı türden bir satır elde ettik. Böylece iki satı iki sütunlu bir tablomuz oldu. Şimdi ilk satırın sütunlarını birleştirelim ve bir sütun yapalım:
[table]
[tr]
[td colspan=’2′] [/td]
[/tr]
[tr]
[td] [/td]
[td] [/td]
[/tr]
[/table]
farkedeceğiniz gibi bir tane td etiketini sildik geriye bir tane kaldı. Bu etiketin colspan (Column Spanning) yani sütun kaplama özelliğini 2 yaparak iki sütun kaplamasını sağladık. Altta ik sütun tanımlamamış olsaydık hatalı bir kod olurdu. Ama bu hata genellikle gezginler tarafından örtbas edilir. Yani aşağıdaki satırda bir tane sütun tanımlanırsa gezgin üstteki span işlemini önemsemez ve iki satırlık bir tablo gibi davranır. Aynı şey 3 tane sütun tanımlamasında da geçerli. Gezgin bu sefer yukarıyı bir sütun görecektir fakat gene de aşağıya 3 sütun koyacaktır. Ama yukarıdaki span işlemini sadece iki sütuna uygulayacak üstteki son sütun boş kalacaktır.
Bir de iki satırı birleştirelim:
[table]
[tr]
[td rowspan=’2′] [/td]
[td] [/td]
[/tr]
[tr]
[td] [/td]
[/tr]
[/table]
Şimdi de ilk satırın birinci sütununda rowspan (Row Spanning) yani satır kaplama özelliği tanımladık. Dikkat ettiyseniz bu sefer aşağıdaki satırdan bir sütun sildik. Aşağıdaki satırın ilk sütunu üstteki satırın ilk sütunu ile aynı olacaktır. Bu sefer ikinci satırdaki sütun tanımlaması ikinci sütun yerine geçecektir.
Yukarıda anlatılanlar size çok karmaşık gelebilir. Çok normaldir. Zira HTML de diğer diller gibi kullanılarak öğrenilir. Ayrıca yukarıda yazdıklarım sadece bilgi vermek amacını gütmektedir. Zira WYSIWYG bir editör kullanırsanız tablonun kaç satır kaç sütun olacağın görerek çizebilirsiniz. Hatta kodlara bulaşmadan iki satırı ya da iki sütunu anında birleştirebilirsiniz.
Tablolar konusunda değineceğim şeyler bu kadardı. Geriye anlatmak istediğim resim ekleme ve bağlantı kurma kaldı. Hadi bakalım.
Resim eklemek için kullanılan etiket [img] etiketidir. Bu etiketin bir kapanma etiketi yoktur. Örnek
[img src='http://www.sitesimi.com/resimdosyasi.jpg' border='0 '/]
hangi resmi koyacağımızı src özelliği ile belirtiyoruz. Eğer bu resim gezginin tanıdığı bir tür ise gezgin resmi sayfaya ekleyecektir. Eğer değilse gezginden gezgine değişebilecek uyrarılar alabilirsiniz. border özelliği resim etrafına çizilecek sınır çizgilerinin kalınlığıdır. Genelde 0 yapılır. Zira gezginler varsayılan değer olarak genelde 1 alırlar ve bu hiç hoş gözükmez. Eklemek istediğim son nokta resimin HTML içine gömülmediğidir. Yani dışarıdan bir kaynak olarak tanımlarsınız. Yani HTML dosyasının fiziksel yeri ya da adresi (klasörü, sürücüsü, vs) değiştiğinde resmin kaynağını o değişkliği resmin kendine ya da resim tanımlamasında kullanılan adrese yansıtmazsanız sayfanızda resim gözükmeyecektir. Aynı şey resmin yerini değiştirirseniz de geçerlidir.
Bir sayfaya bağlantı kurmak için kullanılan etiket [a] yani Anchor (çapa) etiketidir. Örnek:
[a href='http://www.warnerblade.com']Link Yazısı[/a]
a etiketini tanımlarken kullanılan href özelliği “Link Yazısı” na tıklandığında gezginin nereye yönlendilireceğini belirler. [/a] eitketini koyduğunuz yere kadar herşey hedef sayfaya yönlendiğilmiş olur. Bu etiketin içine resim de koyabilirsiniz. Bu sefer resime tıklandığında istenilen adrese gidecektir. a etiketi ile sitenizin çeşitli sayfalarını da birbirine bağlayabilirsiniz. Diyelim ki iki sayfanız var birisi sayfa1.htm ikincisi sayfa2.htm ve bu sayfalar aynı klasör içinde duruyorlar. sayfa1.html’den diğerine bağlantı sağlamak için http://…. gibi bir adres yazmanıza gerek yok. Direkt olarak sayfanın ismini yazdığınız takdirde diğer sayfaya bağlantı sağlanacaktır. Bu tip bir adreslemeye relative yani bağıl adresleme denir. Aynı adresleme türünü resimler için de kullanabilrisiniz.
Eğer HTML hakkında kapsamlı bir öğretim sitesi arıyorsanız W3CSchools’un HTML okulu bir çok işinizi görebilir. Ayrıca Google’dan aratarak bir çok yararlı HTML öğretim sitelerine ulaşabilirsiniz. Hakkı Öcal’ın HTML kitabı kısa ama öz bir kaynaktır. Piyasada bulunan WYSIWYG editörlerden N|VU hem açık kaynaklı hem de ücretsiz üstüne bir de cross platform (çapraz platformlu, yani değişik işletim sistemlerinde çalışabilen) bir programdır. Bunun yanında Macromedia Dreamweaver da ücretli WYSIWYG programları arasında en üstünlerinden biridir (hatta en üstünüdür).
Yazının sonuna geldik. Bu üç yazılık seriden sonra umarım HTML sayfasının yapısı hakkında en azından bir fikir sahibi olmuşsunuzdur. Mutlu kodlamalar.
Ertuğrul Karademir
24.05.2006,Ankara
Köşedeki tüm yazılar :
