Metin Düzeni
Bir önceki sayfada HTML ile sadece metinden oluşan web sayfaları tasarlamıştık. Şimdi bu bilgilerimizi biraz daha zenginleştirelim.
Paragraf Oluşturma
Hatırlıyorsanız paragraf yapmak için <br> veya <pre> kodlarını kullanıyorduk. Oysa HTML'de sırf paragraf yapmakla görevlendirilmiş bir kod var: <p>...</p> arasına yazacağımız ifadeler paragraf halinde gösterilir. Hemen bir uygulama geliştirelim:
Biraz uzun bir örnek oldu galiba. Dikkat ederseniz yazdığınız paragraflar (yazıyorsunuz değil mi?) sola yaslanmış haldedir.
Paragraf Hizalama
Peki paragrafları nasıl sağa yaslarız veya ortalarız? Bunun için <p> kodunun bazı parametreleri vardır. Mesela paragrafı sağa yaslamak için kodu şöyle kullanırız:<p align="right">...</p> Ortalamak için: <p align="center">...</p>. Sola yaslamak için: <p align="left"> ...</p>. Hiçbir parametre kullanmazsak, paragraf sola yaslanmış halde çıkacaktır. Aşağıdaki uygulamaya bakalım:
<html>
<head>
<title>Kum Tanesi</title>
</head>
<body>
<p align="left">Sokaklarda bulurum kendimi, yalnızlığımdan her kaçışımda. Cebimde ne sigara, ne de para..."Kum tanesi" olduğumu bilirim ama, gösteremem kendimi bir türlü dev haritalarda... Atlarım bir arabaya; "sür!" derim "Kızılay'a"...Eski bir sevgili gelir nedense aklıma; "Dön" derim "Ulus’a"... Barda çalışır, adı"Ayça". Tahmin ettiğim gibi, işte burada... Heyy gülüm hey, şu anda kokteyl yapmakta; Biz duygularımızdan yapardık kokteyli, sonra da sarhoş olurduk, sevişirdik aldırmadan, güneş ışıklarının vücudumuzu olduğu gibi gösteren aydınlığına... "Geri döneceğimi biliyormuş gibi "baktı suratıma,dudaklarında kendince haklı bir tebessüm, haklı çıktı ya davasında... Dedim"ilan ı aşk yapmaya gelmedim; Param yok,sigaram yok, dışarıda taksi bekliyor, üstelik evin anahtarını kaybettim, üstelik kalacak yerim yok..." Ayça sever ya bizi, halletti bütün işleri... Üstelik eski günlerdeki gibi sevişti...</p>
<p align="right">Neyse kafiyeyi bozmayalım...Sonraki gece, aynı dert, aynı tasa... Rakı, radyoda çalan bir nihavend şarkı ve geçmişte yaşanmış ya da yaşanamamış bir kaç ağlatan anı, birleşirler odamda... Eski bir sevgili gelir nedense aklıma... Atlarım arabaya; "Sür!" derim "Mithatpaşa’ya"... Lojmanlarda oturur, edebiyat hocası, adı "Selda"... Tahmin ettiğim gibi işte burada. Vayy gülüm vay, geceliğiyle çıktı kapıya; En sevdiğim elbisesiydi bu, aklımı alırdı her defasında... Bu kızlar hep böylemi hoca;Bu da "geleceğimi biliyormuş gibi" baktı suratıma. Üstelik aynı tebessüm... Benim derdimse aynı; "Geçiyordum,uğradım". Güzel "afyan" u varmış, "fayfe" yaptık, içtik, içtik, içtik... Sonra da bulduk kendimizi yorgun bir sevişme sonrasında... Sanki yıllardır birlikteymişiz gibi rahattık...</p>
<p align="center">Kafiye gene bozuldu galiba, neyse; Sonra atarım kendimi evime,odama. Yalnızlığım, "tahmin ettiğim gibi" burada... Ah gülüm ahh,en çok o bakar zaten suratıma,"geri döneciğimi biliyormuşcasına". Tebessüm etmez, soğuktur, zaten bir tek o koyar bana. Yalnızlığın "çöl" olduğunu anlarım, ben zaten "kum tanesi"... Sonra atlarım bir arabaya,"Sür!" derim "Gaziosmanpaşa’ya"; Fahişelik yapar, adı "Asuman"... Kafiye son isimde bozuldu ama; Boşveer bütün isimler "aynıdır" aslında...</p>
</body>
</html>
Şimdi uzun örneğimizin ilk paragrafı sola yaslanmış, ikinci paragrafı sağa yaslanmış, üçüncü paragraf ise ortalanmış haldedir. Paragrafı yazı editörlerinde yapıldığı gibi iki yana yaslamak da mümkün, ancak bunu ileri ki bölümlerde göreceğiz...
Tanıtıcı Mesaj Parametresi
Size <p> kodunun bir başka parametresini de vereyim: "title". <p title="tanıtıcı mesaj" >...</p> arasına yazılan bir paragrafın üzerine fareyi getirdiğimizde, yazdığımız mesajla karşılaşırız. Örnekle görelim:
<html>
<head>
<title>Paragraf Örneği</title>
</head>
<body>
<p align="left" title="Bu ananonim bir dize.">Kırlangıç yapar yuvayı; çamur sıvayı sıvayı</p>
<p align="left" title="Bu da ananonim bir dizedir.">Duvarın dibinde resmim aldılar; ak kağıt üstünde tanıyın beni</p>
</body>
</html>
Karakter Kodları
HTML kodu yazarken, bıraktığımız birden fazla boşlukların dikkate alınmadığı ve tek boşluk gibi gösterildiğini önceki sayfada söylemiştik. Birden fazla boşluğun görülebilmesi için, metin editörünün formatını doğrudan web sayfalarına taşıyan <pre> kodunu kullanıyorduk. Oysa bu yolu izlemek zorunda değiliz; kodu bir boşluk karakterine karşılık gelir. Mesela paragraf başı yapmak istiyoruz. Bunun için paragrafın başına 5 boşluk karakteri koymak istiyoruz diyelim. N'apacağız?
Bu uygulamayla gördük ki HTML'in görmediği bazı karakterleri yazdırabilmek için kodlara (işlevsel olarak ASCII kodlarına benzer) ihtiyacımız vardır. Örneğin ben bu web sayfasında size HTML kodlarını anlatırken, bu kodlardan yararlanıyorum. Yoksa HTML'de "<HTML>" kelimesini normal yazarak gösteremeyiz. Çünkü web sayfası oluşturulurken, HTML derleyicisi "<HTML>" kelimesini metinsel bir ifade olarak değil, bir HTML kodu olarak algılar. Böyle olmaması için "<" karakteri yerine <, ">" karakteri yerine de > kodlarını kullanırız. Bunu bir uygulamayla gösterelim:
Biraz akıl karıştırıcı değil mi? Sayfada nelerin çıkması gerektiğini, kodu yazarken gözünüzde canlandırabiliyorsanız, bu işi kapmışsınız demektir. Bu tip karakter kodlarını kullanırken, yaptığınız işi denetlemeyi unutmayın. HTML'in sizi uyaracağını falan düşünmeyin bile. HTML hataları görmezden gelir ve bünyesinde taşır. (XHTML derslerinde bu konuya ayrıntılı şekilde değineceğim.) Tabi bu karakter kodlarını ezberleyim falan demeyin; yine de kodunun aklınızda kalması yararlıdır. Bu karakter kodlarının tam listesini görmek istiyorsanız eğer, Karakter Kodları hiperlinkine tıklayabilirsiniz. (bunu Türkçeleştiremedim; "hyperlink" dediğimiz şey, şu mavi renkli, altı çizili, basınca sizi başka bir sayfaya veya sayfanın başka ucuna götüren şey)
Yazı Komutları
Karakter kodları, parametreler falan, filan. Bu konuların biraz can sıkıcı olduğunu biliyorum. Bilgisayar dillerine pek alışkın olmayan kişiler, bir dilin tüm komutlarını, parametrelerini öğrenmeden kendilerini güven içinde hissetmezler. Oysa bu bilgisayar fobisi aşılamadan yazılımcı olunamaz. Önemli olan algoritma yapısını ve dilin kendine has ritmini yakalayabilmek. (Bu sözleri edebiyat parçalamak için değil, olayın felsefesini anlatabilmek için yazıyorum.) HTML'in çok az kodunu öğrenmeniz bile yeterli olabilir; kaldı ki kod bakımından HTML çok da zengin sayılmaz. Hiç kimse tüm komutları, tüm fonksiyonları, tüm parametreleri aklında tutmaz. Zaten dil, tıpkı yaşayan bir organizma gibi bir değişim, bir evrim sürecindedir. Bazı kodlar eskimiş, körelmiş, kullanılırlığı kalmamıştır. HTML'de böyle bir çok kod var. Bunları bilseniz de olur, bilmeseniz de. Önemli olan yapacağınız uygulamayı zihninizde modelleyebilmek, yoksa ne kadar komut bildiğinizin; o komutları verimli bir şekilde kullanamadıkça, pek önemi yok. Şimdi pek kullanılmayan ama literatürde rastlayabileceğiniz bu tür bazı komutları yazıyorum. Bunları aklınızda tutmaya çalışmayın, sadece göz aşinâlığınız bulunsun. Kullanmanız gerektiğinde "böyle şeyler vardı, açıp bakayım" dersiniz.
| <address></address> | Arasına yazılan metinsel ifadeyi, adres formatına çevirir. (nasıl birşey olduğunu merak edenler denesin; çok kullanılan bir şey değil) |
| <bdo dir="rtl"></bdo> | Arasına yazılan metinsel ifadeyi tersine çevirir. "Banu"'yu "unaB" yapar. Bu kod olmasaydı, insanoğlu n'apardı bilemiyorum. |
| <sample></sample> | Arasına yazılan metni "sample" (örneklem) moduna çevirir. (Matah birşey zannetmeyin, merak eden denesin.) |
| <code></code> | Arasına yazılan metni "code" (kod) moduna çevirir. Bilgisayar kodlarını web sayfasına yazacaksanız, tavsiye ederim. |
| <kbd></kbd> | Arasına yazılan metni "keyboard" (klavye/daktilo) moduna çevirir. |
| <tt></tt> | Arasına yazılan metni "teletip metin" moduna çevirir. |
| <var></var> | Arasına yazılan metni "variable" (var) moduna çevirir. (not: değişken tanımlama gibi birşey zannetmeyin, yukarıdakiler gibi gereksiz birşey.) |
| <acronym></acronym> | Arasına yazılan metni kısaltma moduna çevirir. |
| <abbr></abbr> | Arasına yazılan metni yine kısaltma moduna çevirir. |
| <q></q> | Arasına yazılan metni "quotation" (alıntı) moduna çevirir. (Pek faydalı birşey değil.) |
Bunların hepsini kapsayan bir örnek yapalım.
<html>
<head>
<title>Çok Faydalı HTML Kodları</title>
</head>
<body>
<b><address>:</b> <address>Göztepe'ye 3. ligde başarılar dileriz.</address><br/>
<b><bdo dir="rtl">:</b> <bdo dir="rtl">Göztepe'ye 3. ligde başarılar dileriz.</bdo><br/>
<b><sample>:</b> <sample>Göztepe'ye 3. ligde başarılar dileriz.</sample><br/>
<b><code>:</b> <code>Göztepe'ye 3. ligde başarılar dileriz.</code><br/>
<b><kbd>:</b> <kbd>Göztepe'ye 3. ligde başarılar dileriz.</kbd><br/>
<b><tt>:</b> <tt>Göztepe'ye 3. ligde başarılar dileriz.</tt><br/>
<b><var>:</b> <var>Göztepe'ye 3. ligde başarılar dileriz.</var><br/>
<b><acronym>:</b> <acronym>Göztepe'ye 3. ligde başarılar dileriz.</acronym><br/>
<b><abbr>:</b> <abbr>Göztepe'ye 3. ligde başarılar dileriz.</abbr><br/>
<b><q>:</b> <q>Göztepe'ye 3. ligde başarılar dileriz.</q><br/>
</body>
</html>