HTML DERSLERİ ( Ders2: Metin Düzeni )

yorum yok
334 okuma
14 Ocak, 2018

HTML DERSLERİ

Ders2: 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 amacıyla <br> ve ya <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 durumunda gösterilir. Hemen bir program geliştirelim:

<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 adedi” olduğumu bilirim ama, gösteremem kendimi bir türlü dev haritalarda… Atlarım bir otomobile; “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 benzeri, işte burada… Heyy gülüm hey, henüz kokteyl yapmakta; Biz duygularımızdan yapardık kokteyli, sonra da sarhoş olurduk, sevişirdik aldırmadan, güneş ışıklarının bedenimizi olduğu gibi gösteren aydınlığına… “Geri döneceğimi biliyormuş benzeri “baktı suratıma,dudaklarında kendince haklı bir tebessüm, haklı çıktı ya davasında… Dedim”ilan ı aşk meydana getirmeye gelmedim; Param yok,sigaram yok, dışarıda taksi bekliyor, üstelik evin anahtarını kaybettim, üstelik duracak yerim yok…” Ayça sever ya bizi, halletti bütün işleri… Üstelik eskiden 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>

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 bulunmaktadır. Örneğin 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 değişken 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…<p> kodunu web sayfalarını tasarlarken çok sık kullanacağımızı göreceksiniz.

Tanıtıcı Mesaj Parametresi

Size <p> kodunun bir başka parametresini de vereyim: “title”. <p title=”tanıtıcı ileti” >…</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>

Bu örnek de paragraflara hem align hem de title parametrelerini uyguladık. Bu tür parametrelerin aşırı derece kod için geçerli bulunduğunu gelecekte görebileceğiz. Yaptığımız son uygulamada, ilk paragrafın üzerine farenin imlecini bir-iki saniyeliğine (size on saniye gibi istikbal) bıraktığımızda, “Bu ananonim bir mısra.” mesajını göreceğiz. Bu da HTML sayfalarının bir diğer özelliği.

Karakter Kodları

HTML kodu yazarken, bıraktığımız birden fazla boşlukların öneme alınmadığı ve tek boşluk gibi gösterildiğini önceki sayfada söylemiştik. Birden çok boşluğun görülebilmesi amacıyla, metin editörünün formatını doğrudan internet sayfalarına taşıyan <pre> kodunu kullanıyorduk. Oysa bu yolu kovuşturmak mecburiyetinde değiliz;

<html>
<head>
<title>Kentsel Mimari</title>
</head>
<body>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>

Bu programla gördük ki HTML’in görmediği birtakım karakterleri yazdırabilmek için kodlara (fonksiyonel 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ı amacıyla “<” karakteri yerine

<html>
<head>
<title>HTML Kodları</title>
</head>
<body>
<b>&#60;html&#62;</b> kodu HTML uygulamalarının başlangıç kodudur.<br/>
<b>&#60;title&#62;</b> kodu web sayfasının başlığını yazmak için kullanılır.<br/>
<b>&#60;p&#62;</b> kodu ile web sayfalarında paragraflar oluşturabiliriz.<br/>
<b>&#60;pre&#62;</b> kodu ile metin editörlerinin formatını web sayfalarına taşırız.<br/>
<b>&#60;br&#62;</b> kodu ile metnin bir satır aşağıya atlamasını sağlarız.<br/>
<b>&#60;b&#62;</b> kodu ile metinsel ifadelerin koyu (bold) olmasını sağlarız.<br/>
</body>
</html>

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 &nbsp; 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> 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>&#60;address&#62;:</b> <address>Göztepe’ye 3. ligde başarılar dileriz.</address><br/>
<b>&#60;bdo dir=”rtl”&#62;:</b> <bdo dir=”rtl”>Göztepe’ye 3. ligde başarılar dileriz.</bdo><br/>
<b>&#60;sample&#62;:</b> <sample>Göztepe’ye 3. ligde başarılar dileriz.</sample><br/>
<b>&#60;code&#62;:</b> <code>Göztepe’ye 3. ligde başarılar dileriz.</code><br/>
<b>&#60;kbd&#62;:</b> <kbd>Göztepe’ye 3. ligde başarılar dileriz.</kbd><br/>
<b>&#60;tt&#62;:</b> <tt>Göztepe’ye 3. ligde başarılar dileriz.</tt><br/>
<b>&#60;var&#62;:</b> <var>Göztepe’ye 3. ligde başarılar dileriz.</var><br/>
<b>&#60;acronym&#62;:</b> <acronym>Göztepe’ye 3. ligde başarılar dileriz.</acronym><br/>
<b>&#60;abbr&#62;:</b> <abbr>Göztepe’ye 3. ligde başarılar dileriz.</abbr><br/>
<b>&#60;q&#62;:</b> <q>Göztepe’ye 3. ligde başarılar dileriz.</q><br/>
</body>
</html>

Sanırım bu sayfalık bu kadar yeter. Sonuçta parametreler, karakter kodları gibi yeni kavramlar, bu kavramlarla ilk defa tanışan kişiler için yorucu ve akıl karıştırıcı olabilir.  Bir sonraki ders :  ( Yazı biçimi, Fontlar, Yazı tarzları, Font Formatı, Font Büyüklüğü, Font Rengi Oluşturma ) Ders3 Girmek için Sayfayı ziyaret ediniz..

WwW.AsKKeNTi.NeT


Bir önceki yazımda « makalem var.
ReGoR

Site web editörü olan admin makale yazarlığı yapar. Site web editörü olan admin .

Benzer Yazılar

Van Sohbet   Genel olarak Van sohbet sitelerine bağlanan kişilerin ...

aşkın gücü

Hayatın Anlamı Hayatımda yalnızca Tanrı ve dünya hakkında düşündüğüm ...

Aşkım Bir Rüya Gökyüzüne baktığımızda suratını görüyorum, senin ...

Yorumlar



Bir Yorum Yazmak İstermisiniz ?