HTML Metin Hizalama

Web sayfanıza yerleştirmek istediğiniz metin içeriğnin daha güzel görünmesi ve özellikle sayfa tasarımıyla uyumlu olması için metnin uygun bir biçimde hizalanması gerekir. Hizalama işlemi CSS kodları ile yapılır. Hizalama işlemi için metni işaretlemekte kullandığımız herhabgi bir HTML tagının (< div >, < b >, < p > gibi) içinde, "text-align" kodunun parametrelerine "left, right, center ve justify" değerlerinden birini yazmamız yeterli olacaktır. Ben aşağıdaki metinleri < div > tagının içinde hizaladım. İşte size bir hizalama örneği,

< div style="text-align: left; border:solid #333;" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque. Curabitur id lectus nulla, ac mattis quam. Aliquam malesuada feugiat turpis a aliquet. Phasellus faucibus magna lobortis lectus semper vel scelerisque risus hendrerit. Integer tristique eros in augue suscipit tristique. Duis dui felis, vulputate scelerisque rutrum in, cursus in urna. Nam placerat condimentum odio at adipiscing. Curabitur posuere lacus in magna cursus a sagittis est dignissim.< /div >

"text-align" ile hizalanan metinler şu şekillerde görüntülenir;

text-align:left (sola yasla)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque. Curabitur id lectus nulla, ac mattis quam. Aliquam malesuada feugiat turpis a aliquet. Phasellus faucibus magna lobortis lectus semper vel scelerisque risus hendrerit. Integer tristique eros in augue suscipit tristique. Duis dui felis, vulputate scelerisque rutrum in, cursus in urna. Nam placerat condimentum odio at adipiscing. Curabitur posuere lacus in magna cursus a sagittis est dignissim.

text-align:center (ortala)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque. Curabitur id lectus nulla, ac mattis quam. Aliquam malesuada feugiat turpis a aliquet. Phasellus faucibus magna lobortis lectus semper vel scelerisque risus hendrerit. Integer tristique eros in augue suscipit tristique. Duis dui felis, vulputate scelerisque rutrum in, cursus in urna. Nam placerat condimentum odio at adipiscing. Curabitur posuere lacus in magna cursus a sagittis est dignissim.

text-align:right (sağa yasla)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque. Curabitur id lectus nulla, ac mattis quam. Aliquam malesuada feugiat turpis a aliquet. Phasellus faucibus magna lobortis lectus semper vel scelerisque risus hendrerit. Integer tristique eros in augue suscipit tristique. Duis dui felis, vulputate scelerisque rutrum in, cursus in urna. Nam placerat condimentum odio at adipiscing. Curabitur posuere lacus in magna cursus a sagittis est dignissim.

text-align: justify (iki yana yasla)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque. Curabitur id lectus nulla, ac mattis quam. Aliquam malesuada feugiat turpis a aliquet. Phasellus faucibus magna lobortis lectus semper vel scelerisque risus hendrerit. Integer tristique eros in augue suscipit tristique. Duis dui felis, vulputate scelerisque rutrum in, cursus in urna. Nam placerat condimentum odio at adipiscing. Curabitur posuere lacus in magna cursus a sagittis est dignissim.

Not :
Metinlerdeki garip yazı dikkatinizi çekmiştir. Örnek metni Lorem Ipsum' dan aldım. Bu da nedir yahu? diyorsanız işte size sitesinden kısa bir açıklama,

"Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur."

Eğer bu kadar bilgi sizi tatmin etmediyse, ayrıntılı bilgi ve örnek yazı almak için Lorem Ipsum dan yararlanabilirsiniz.

Web Sayfasına Button Eklemek

Butonlar web sitelerinin kullanıcı kayıt formlarında ya da üye giriş panellerinde sıklıkla karşılaştığımız HTML form elemanlarıdır. Kendilerine verilen işleve bağlı olarak, tıklandıklarında formdaki ya da paneldeki bilgileri sunucuya iletmekten tutun da kullanıcıyı başka bir HTML sayfasına yönlendirmeye kadar pek çok işi yaparlar. Web sayfalarına buton <input type="button(veya submit") / > tagı ile eklenir. Şimdi bunu bir örnek üzerinde açıklayalım,

<input type="button" value="Gönder" name="buton1" title="Düğmeye bas" onclick="parent.location='http://www.google.com'"/>

< input type="reset" value="sil" name="silgi" title="Temizle"/>

Bu kodlamanın sonucu sayfada şu şekilde görüntülenir.

Son olarak bu tag içindeki parametreleri açıklayalım.

name : Button'u isimlendirmek için kullanılır. Burdan alınan bilgilerin sunucudaki programda işlenmesi için gereklidir.

title : Kullanıcı fare ile buton üzerine geldiğinde görüntülenmesi istenen bilgi mesajı için kullanılır.

value : Buton üstüne yazı yazmak için kullanılır.

Yukarıda turuncu ile işaretlenmiş iki tane parametre var. Birincisinde bulunan onclick="parent.location='http://www.google.com'" ifadesinde onclick ziyaretçinin butona tıklaması olayıdır. "parent.location" ise butona tıklandığında ziyaretçinin belirtilen web sayfasına yönlendirilmesi için kullanılılan javascript kodudur. İkincisi ise type="reset" ile butona form sayfasındaki bilgileri silme özellği kazandırmak için kullanılır.