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.
Hiç yorum yok:
Yorum Gönder