Konu : Sayfa Çözünürlüğü (Html)
Seviye : Basit
Kaynak Dosyalar : Yok
Çok güzel sayfalar yapabilirsiniz, Elinizde çok güzel içerikler bulunabilir ancak bunları sağa sola kayan ya da sayfa ve tablo düzeni olmayan bir halde sunmak etkiyi azaltır. Göze hoş gelmez.
Burada yapmak istediğimiz kısaca şu;
- Üst ve sol tarafta default olarak verilen boşlukları css margin:0px ve padding:0px kodları ile sıfırlayacağız. Böylelikle sayfa alanımız genişlemiş olacak
- %100 uzunlukta bir tablo açacağız. Böylece her çözünürlüğe göre bu tablo şekil alacak.
- %100 değerli tablonun içerisine 779 pixel uzunluğunda/genişliğinde sabit bir tablo oluşturacağız.
- Sabit tabloyu (779px) dinamik tablo(%100) içerisinde ortada ya da isteğe göre sol ya da sağa doğru yaslayıp içerisine sitemizi oluşturacağız.
Şimdi merhale merhale html kodlarımızı oluşturalım. Notpad dışında editör kullanmamanızı şiddetle öneririm.
En basit hali ile html kodlarımız. Bu iskeleti oluşturuyor.
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title></title></head><body></body></html>
kullandığımız html kodlarının versiyonunu belirtiyoruz.
HTML 4.01
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Bir Html sayfası bu iki kod arasında yazılan diğer html tagları ile oluşturulur.
Kod:
<html></html>
<head></head> arasına sayfa ile ilgili ayar kodlamaları yazılır. Örneğin
<title>Deneme Sayfası
</title> sayfanın başlığını gösterir. Bu yazı "Deneme Sayfası" açılan sayfamızın durum çubuğunda (Status bar) görünmesini sağlar. Sayfayı farklı kaydettiğimizde sayfanın adının oluşturulmasında kullanılır....
Kod:
<head><title></title></head>
<body></body> bu iki tag arasına yazılanlar sayfa içeriğini oluşturur.
Kod:
<body></body>
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title></title><meta **********="Content-Type" *********"text/html; charset=iso-8859-9"></head><body></body></html>
Sayfamızda Türkçe Karakterlerin doğru bir şekilde görünmesini sağlar. Mutlaka her sayfada <head></head> tagları arasında yazılmalıdır.
Kod:
<meta **********="Content-Type" *********"text/html; charset=iso-8859-9">
şimdi <body></body> tagları arasında sayfamızı ve sayfamızın-sitenin iskeletini oluşturmaya başlayalım.
Sayfa uzunluğu/genişliği
%100 değeri ile verilmiş dinamik bir tablo
Kod:
<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td></td> </tr> </table>
kısaca açıklayayım
border="1" tabloya 1px lik çerçeve verir. Normalde bunu border="0" olarak yapacağız. Ancak sayfada yaptıklarımızı görebilmemiz açısından 1 değerini veriyoruz.
cellpadding="0" cellspacing="0" ile çerçevelerin kenarlarında boşluk vermeyeceğimizi belirtiyoruz siz bu değerleri oynayarak ne ğibi değişiklikler yaptığını deneyebilirsiniz..
width="100%" uzunluk sayfayı açan kişinin ekran çözünürlüğüne eşit demektir.
Kod:
<table border="1" cellpadding="0" cellspacing="0" width="100%"></table>
Satır oluşturur
Kod:
<tr></tr>
Sutun/hücre oluşturur.
Kod:
<td></td>
şimdi de 779px genişliğinde sabit bir tablo oluşturalım.
Kod:
<table border="1" cellpadding="0" cellspacing="0" width="779"> <tr> <td></td> </tr> </table>
Tablolama mantığı konusunda da biraz bilgi verirsek ilk yaptığınız tablo hücresi içine diğer tabloyu yazacaksınız. Editörlerin doldurduğu bir sürü anlamsız kodlardanda kurtulmuş ve sadece gerekli olan kodların olduğu tertemiz bir kodlamaya sahip olmuş olacaksınız.
Mantığı şu
her zaman <table> tagından sonra <tr> gelir. <tr> tagından sonra her zaman <td> gelir. <td> tagından sonra bir tablo daha eklemek istiyorsanız <table> tagı sonrada <tr> ve <td> gelir. Elbette açılma sırasına göre bunları kapatmamızda gerekiyor.
Kod:
<table> <tr> <td> <table> <tr> <td></td> </tr> </table> </td> </tr></table>
Dinamik tablomuz ile sabit tablomuzu iç içe yazabiliriz.
Kod:
<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <table border="1" cellpadding="0" cellspacing="0" width="779"> <tr> <td> </td> </tr> </table> </td> </tr> </table>
bundan sonra sitemizi inşa edeceğimiz alanın sol, orta ya da sağa dayalı mı yapacağımıza karar vereceğiz. Sola dayalı yapacaksanız hiç bir şey yapmanıza gerek yok ancak ortada ya da sağda olmasını istiyorsanız sabit 779px lik tabloyu içine alan hücre <td> de bunu belirtmemiz gerekecek. <td align="center"> gibi..
left : sola hizalı yapar
center : ortaya hizalar.
right : sağa hizalar.
son hali şu şekilde ancak her şey bitmiş değil.
iskeleti oluşturmaya devam edelim.
bir sayfada genel olarak üst orta ve alt bölümler olmak üzere 3 satırdan oluşur.
- Üst bölüm banner alanı olarak kullanılabilir.
- Orta bölümde kendi içinde iki bölüm/sütundan oluşur. Sol tarafta linkler ve sağ tarafta da sayfa içeriği bulunur.
- Alt Bölümde ise linkler ve copyrigth kısmı bulunur.
3 ana satırı ekleyelim.
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title></title><style type="text/css"><!-- body { margin:0px; padding:0px;} --></style><meta **********="Content-Type" *********"text/html; charset=iso-8859-9"></head><body><table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center"> <table border="1" cellpadding="0" cellspacing="0" width="779"> <tr> <td>üst</td> </tr> <tr> <td>orta</td> </tr> <tr> <td>alt</td> </tr> </table> </td> </tr> </table></body></html>
görünüm
2. Satır yani orta bölüm iki sutundan oluşuyordu. Bu sütunların sağda olanı genelde menü/link alanı sağ tarafta ise içerik bölümü yer alır. Kodumuza bunu ekliyorum.
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title></title><style type="text/css"><!-- body { margin:0px; padding:0px;} --></style><meta **********="Content-Type" *********"text/html; charset=iso-8859-9"></head><body><table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center"> <table border="1" cellpadding="0" cellspacing="0" width="779"> <tr> <td height="170">Üst Bölüm</td> </tr> <tr> <td> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="179" valign="top">Sol Menü Bölümü</td> <td width="600" valign="top" height="400">Orta İçerik Bölümü</td> </tr> </table> </td> </tr> <tr> <td height="25">Alt Bölüm</td> </tr> </table> </td> </tr> </table></body></html>
Görünümü,
