 Tabloların Sayfa Düzenlemede Kullanılması
Tabloları genel olarak sadece veri sunumunda kullanmıyoruz. Sayfatasarımcıları tabloları asli görevleri dışında sayfayı istedikleri şekilde düzenlemeye yardımcı olacak şekilde kullanırlar. Bu işlemin nasıl olduğunu bir örnek üzerinde görelim. Örneğimizde sayfanın üst tarafına bir logo yerleştireceğiz ve kalan alt kısmını ise iki bölüme ayıracağız. Bu bölümlerden sol kenarda olan kısmına sitemenüsünü ve sağ kısmına ise sayfa içeriğini yerleştireceğiz.
<HTML>
<HEAD>
<TITLE> Tabloların sayfa düzenlemede kullanılması</TITLE>
<META HTTP-EQUIV="Content-Type"
CONTENT="Text/Html; Charset=iso-8859-9">
</HEAD>
<BODY BGCOLOR="Black">
<P>
<CENTER>
<TABLE WIDTH="95%" HEIGHT="100%"
BGCOLOR="Silver" BORDER="0"
CELLSPAN="3" CELLPADDING="9">
<TR BGCOLOR="White">
<TD COLSPAN="2">
<CENTER>
<FONT SIZE="5" COLOR="Gray" FACE="Times New Roman">
<B> K A R B E Y A Z I . C O M </B>
</FONT>
</CENTER>
</TD>
</TR>
<TR VALIGN="Top">
<TD BGCOLOR="Yellow" WIDTH="20%">
<BR>
<B> MENU</B>
<HR>
<P>Resimlerim
<P>MP3 ler
<P>Linkler
<P>Ben kimim
<P>Ziyaretçi defterim
<P>E-Mail
<P>
<HR>
</TD>
<TD>
<H1> Bu bölüm içerik bölümüdür.</H1>
Bu bölüm içerisinde sayfa içeriği bulunacaktır. Gerekli tüm açıklamalar,
resimler ve diğer elemanları düzgün bir şekilde yerleştiriniz.
<P>Yan tarafta ise sitenin linkleri bulunuyor. Gerçi linkleri
vermedik fakat siz link olarak kabul edebilirsiniz.
</TD>
</TR>
</TABLE>
</CENTER>
<P>
</BODY>
</HTML> Bu örnekte ne yaptığımızı kısaca açıklamak gerekirse; ilk olarak sayfanın zemin rengini siyah yaptık. Bunun için
<BODY BGCOLOR="Black">
şeklinde bir ifade verdik. Sonra sayfanın başlangıcında boşluk bırakmak için <P> tagını kullandık. Ardında sayfa düzenlemesi için bir tablo oluşturduk, tablomuzu <CENTER> tagı içerisine yerleştirmemizin ve genişliğini ise yüzde 95 yapmamızın sebebi sayfanın sol ve sağ kenarlarında zemin renginin görüntülenerek siyah bir alan oluşmasını sağlamaktı. Tablonun ilk satırına bir hücre yerleştirdik ve zemin rengini beyaz yaparak farklı bir görünüm elde ettik ayrıca font ayarlaması ile bir logo yazdırdık. Bunu izleyen ifadelerde ikinci bir satır oluşturduk ve iki hücre yerleştirdik. İlk hücrenin zemin renigini sarı ve genişliğini yüzde 20 olarak ayarladık ve içerisine menümüzü yerleştirdik. İkinci hücreye ise sayfamızın içeriğini yerleştirdir. Tabloyu bitirdik ve yine boşluk kalması için <P> tagını kullandık. Kısaca anlattığımız bu işlemin sonucunu görmek için tıklayınız <a href="ornekler.php?sayfa=120" target="_blank">tıklayınız</a>. Bu ve benzeri kullanımlar ile sayfanın daha düzenli olamasını ve daha hoş görüntülenesini sağlayabilirsiniz. Bunun için kaliteli sitelerin sayfa kodlarını incelemenizde fayda bulunmaktadır.
 |
Bu içeriğe ait yorumları masaüstüne alabilirsiniz
