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
Kod: Tümünü seç
<html>
<head>
<title>Kum Tanesi</title>
</head>
<body>
<p>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>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>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>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:
Kod: Tümünü seç
<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>
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:
Kod: Tümünü seç
<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?
Kod: Tümünü seç
<html>
<head>
<title>Kentsel Mimari</title>
</head>
<body>
Balıkların hafızası üç saniyedir. Üç saniye sonra, üç saniye önceki yaşamlarından koparlar. Böylece üç saniyede ancak katettikleri akvaryumu, bir okyanusmuşcasına gezerler yaşamları boyunca. Yaşam onlara her üç saniyede yeni bir şey getirir, monotonluk onlar için 3 saniyeyi aşamayacak bir kavram.
</body>
</html>Kod: Tümünü seç
<html>
<head>
<title>HTML Kodları</title>
</head>
<body>
<b><html></b> kodu HTML uygulamalarının başlangıç kodudur.<br/>
<b><title></b> kodu web sayfasının başlığını yazmak için kullanılır.<br/>
<b><p></b> kodu ile web sayfalarında paragraflar oluşturabiliriz.<br/>
<b><pre></b> kodu ile metin editörlerinin formatını web sayfalarına taşırız.<br/>
<b><br></b> kodu ile metnin bir satır aşağıya atlamasını sağlarız.<br/>
<b><b></b> kodu ile metinsel ifadelerin koyu (bold) olmasını sağlarız.<br/>
</body>
</html>
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.
Kod: Tümünü seç
<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>Volkan Derinbay'a tşkler.