HTML Sayfa Altyapısı

Fast Friend

Sayfa Altyapısı

İlk sayfadan başlayarak hemen hemen her uygulamamızda kullandığımız <body> kodunun inceliklerini öğreneceğiz. Daha önce anlattığım gibi, <body> kodu sayfa üzerinde görüntülenecek tüm araçları barındırır. Bu sayfada ise <body> kodunun parametreleri üzerinde duracağız ve bu parametrelerle sayfa altyapısını hazırlamayı öğreneceğiz.

Arkaplan Rengi

Bir sayfanın arkaplan rengini belirtmek için <body> koduna; tablolarda da kullandığımız, bgcolor="..." parametresini atarız. Zaten Çerçeveler isimli sayfamızdaki uygulamalarımızda bu parametreyi kullanmıştık.

Arkaplan Resmi

Web sayfalarımızın gösterişli olmasını isteriz. Ve bazen arkaplan rengini değiştirmek bize yetmez, arkaplanda bir resim veya desen olsun isteriz. Bunun için <body> koduna atayacağımız parametre: background="...". Parametrenin tırnak içindeki bölümüne arkaplanda yer almasını istediğimiz resmin dosya adresini yazarız. Bu resim arkaplanda yer alacaktır, sizin <body>...</body> arasına yerleştireceğiniz nesneler bu resmin önünde görünecektir. Resmin boyutu pencereden küçükse, pencerenin tamamını kendisini tekrar ederek kaplar, buna tile (döşeme) diyoruz. Örneğin aşağıdaki küçük resime bakın:

Resimin orjinal boyutunu görmek için tıklayın

(Resimin orjinal boyutunu görmek için üzerine tıklayın)

Bu resimcik background="..." parametresiyle tanımlandığında, pencerenin tamamının bu resimcikle döşeli olduğunu göreceksiniz.

<html>
<head>
<title>Döşeme</title>
</head>
<body background="duvar.jpg">
 
Girit denen bir toprak var şarap rengi denizin ortasında 
denizle çevrili, güzel, semiz, 
çok insan yaşar, sayamazsın, doksan da kenti. 
Karışmıştır bir dil ötekine: 
Akha'lar, yereği yüce Etheokret'ler, Kydon'lar bir de, 
üç boy Dor, tanrısal Pelasg'lar sonra. 
Knossos derler bir de kent, kocaman; 
kral Minos... Ulu Zeus dokuz yılda bir danışır ona, (...)" 
HOMEROS 
</body>
</html>

Bu tür döşeme resimcikleri internette birçok site tarafından ücretsiz olarak sunmaktadır; tabi kendiniz de oluşturabilirsiniz.

Arkaplana döşeme resimcik değil de, büyük boy bir resim koymak da isteyebilirsiniz. Ama koyacağınız resim tam pencere boyutunda olmazsa bazı sorunlar yaşayabilirsiniz:

<html>
<head>
<title>Arkaplan Resmi</title>
</head>
<body background="yenidunya.jpg">
There is so many different worlds 
So many different suns 
And we have just one world 
But we live in different ones
</body>
</html>

Bu uygulamamızda, arkaplana koyduğumuz resim 640x480 çözünürlükte tam ekranı kaplayacaktır. Ancak daha yüksek çözünürlüklerde resim pencereden küçük kaldığı için, kendisini tekrar edecek, döşeme resimcikler gibi davranacaktır. Oysa bizim istediğimiz resmin bütün haliyle, döşenmeden görüntülenmesiydi. Bu durumu nasıl aşarız? Bunun için tablolardan yararlanabiliriz. Zira background="..." parametresi <td> kodu için de geçerlidir. Resmin boyutu 640x480. O halde boyutu 640x480 olan bir tablo yapar ve tabloya arkaplan resmini background parametresiyle atarız. Resimle tablo birbiriyle aynı boyutta olduğu için, arkaplan resmi kendisini tekrar etmez.

<html>
<head>
<title>Tablolarda Arkaplan Resmi</title>
</head>
<body bgcolor="#000000">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="640" height="480">
<tr>
<td background="yenidunya.jpg" valign="top">
There is so many different worlds 
So many different suns 
And we have just one world 
But we live in different ones
</td>
</tr>
</table>
</center>
</body>
</html>

Bu uygulamamızla arkaplan resmini döşemeden görüntüleyebildik. Bu resim 640x480 çözünürlükte tam ekran, daha yüksek çözünürlüklerde ise sayfayı yatay ortalayacak şekilde görüntülenecektir. Hadi biraz daha uğraşalım ve arkaplan resmini hem yatay hem de düşey olarak ortalayalım. Bunun için tablo içinde tablo yöntemini kullanırız:

<html>
<head>
<title>Tablolarda Arkaplan Resminin Ortalanması</title>
</head>
<body bgcolor="#000000">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td valign="middle" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="640" height="480">
<tr>
<td background="yenidunya.jpg" valign="top">
There is so many different worlds 
So many different suns 
And we have just one world 
But we live in different ones
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Görev başarıyla sonuçlandı. Önce sayfanın (pencerenin) tamamını kaplayan boyutta görünmez bir tablo oluşturduk. Sonra bu tablonun içine resimle aynı boyutta, görünmez başka bir tablo yaptık ve bu iç tabloyu; dış tabloya parametre atayarak, düşey ve yatay olarak ortaladık. Sonra arkaplan resmini bu iç tabloya yerleştirdik.

Arkaplan Resmini Sabitleme

Arkaplana yerleştirdiğimiz resim, sayfa pencereden büyükse scrollbar'ın konumuna göre sayfayla birlikte kayar. Arkaplan resminin sayfayla beraber kaymamasını, arkaplan resminin her zaman konumunu korumasını istiyorsak bgproperties="fixed" parametre ve değerini kullanırız. Not: Bu parametreyi Netscape gözatıcıları desteklemiyor.

Aşağıdaki uygulamada arkaplan resmi sabitlenmemiş, sayfayla birlikte kayıyor:

<html>
<head>
<title>Romeo and Juliet</title>
</head>
<body bgcolor="#000000" text="#ffffff" background="gul.jpg">

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td width="100"> </td>
<td width="500">

 
ROMEO AND JULIET 
a lovestruck romeo sing a streetsuss serenade 
laying everbody low with a lovesong that he made 
finds a convenient streetlight steps out of the shade 
says something like you and me babe how about it? 
juliet says hey it's romeo you nearly gimme a heart attack he's underneath the window she's singing hey la my boyfriend's back you shouldn't come around here singing up at people like that anyway what you gonna do about it? 
juliet the dice were loaded from the start 
and i bet and you exploaded in my heart 
and i forget i forget the movie song 
when you gonna realise it was just that the time was wrong juliet? 
 
come up on different streets they both were streets of shame 
both dirty both mean yes and the dream was just the same 
and i dreamed your dream for you and now your dream is real 
how can you look at me as if i was just another one of your deals? 
 
when you can fall for chains of silver you can fall for chains of gold 
you can fall for pretty strangers and the promises they hold 
you promised me everything you promised me thick and thin 
now you just say oh romeo yeah you know i used to have a scene with him 
 
juliet when we made love you used tu cry 
you said i love you like the stars above i'll love you till i die 
there's a place for us you know the movie song 
when you gonna realise it was just that the time was wrong juliet? 
 
i can't do the talk like they talk on tv 
and i can't do a love song like the way it's meant to be i can't do everything but i'd do anything for you i can't do anything except be in love with you 
and all i do is miss you and the way we used to be 
all i do is keep the beat and bad company 
all i do is kiss you through the bars of a rhyme 
julie i'd do the stars with you any time 
 
juliet when we made love you used to cry 
you said i love you like the stars above i'll love you till i die 
and there's a place for us you know the movie song 
when you gonna realise it was just that the time was wrong juliet? 
 
a lovestruck romeo sings a streetsuss serenade 
laying everybody low with a lovesong that he made 
finds a convenient streetlight steps out of the shade 
says something like you and me babe how about it? 
 
DIRE STRAITS

</td>
<td> </td>
</tr>
</table>

</body>
</html>

Biraz uzun bir uygulama oldu, ancak kayan sayfa oluşturmak için böyle uzun bir örneğe ihtiyacımız var. Bu sayfada arkaplan resmi sayfayla beraber scrollbarın konumuna göre kayıyor. Oysa aşağıdaki uygulamada bgproperties="fixed" parametresini kullanarak arkaplan resmini sabitleyeceğiz; sayfayla beraber kaymasını önleyeceğiz.

<html>
<head>
<title>Romeo and Juliet</title>
</head>
<body bgcolor="#000000" text="#ffffff" background="gul.jpg" bgproperties="fixed">

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td width="100"> </td>
<td width="500">

 
ROMEO AND JULIET 
a lovestruck romeo sing a streetsuss serenade 
laying everbody low with a lovesong that he made 
finds a convenient streetlight steps out of the shade 
says something like you and me babe how about it? 
juliet says hey it's romeo you nearly gimme a heart attack he's underneath the window she's singing hey la my boyfriend's back you shouldn't come around here singing up at people like that anyway what you gonna do about it? 
juliet the dice were loaded from the start 
and i bet and you exploaded in my heart 
and i forget i forget the movie song 
when you gonna realise it was just that the time was wrong juliet? 
 
come up on different streets they both were streets of shame 
both dirty both mean yes and the dream was just the same 
and i dreamed your dream for you and now your dream is real 
how can you look at me as if i was just another one of your deals? 
 
when you can fall for chains of silver you can fall for chains of gold 
you can fall for pretty strangers and the promises they hold 
you promised me everything you promised me thick and thin 
now you just say oh romeo yeah you know i used to have a scene with him 
 
juliet when we made love you used tu cry 
you said i love you like the stars above i'll love you till i die 
there's a place for us you know the movie song 
when you gonna realise it was just that the time was wrong juliet? 
 
i can't do the talk like they talk on tv 
and i can't do a love song like the way it's meant to be i can't do everything but i'd do anything for you i can't do anything except be in love with you 
and all i do is miss you and the way we used to be 
all i do is keep the beat and bad company 
all i do is kiss you through the bars of a rhyme 
julie i'd do the stars with you any time 
 
juliet when we made love you used to cry 
you said i love you like the stars above i'll love you till i die 
and there's a place for us you know the movie song 
when you gonna realise it was just that the time was wrong juliet? 
 
a lovestruck romeo sings a streetsuss serenade 
laying everybody low with a lovesong that he made 
finds a convenient streetlight steps out of the shade 
says something like you and me babe how about it? 
 
DIRE STRAITS

</td>
<td> </td>
</tr>
</table>

</body>
</html>

Arkaplan sabitlemenin yararlarını son uygulama ile görmüş olduk. Eğer arkaplan resmi döşeme (kendini tekrar etme) tarzında değilse arkaplan resmini sabitlemeyi tercih edebilirsiniz.

Sayfanın Hiperlink Yapısı

Çok dikkatli okuyucular son iki uygulamada <body> koduna yeni bir parametre atanmış olduğunu görürler: text="...". Bu parametre ile sayfadaki metnin rengi ayarlanır, biz de son iki uygulamada bu parametreyi kullanarak metin rengini beyaz yaptık. Eğer sayfada bu parametre kullanılmışsa, metinlerin varsayılan değerleri parametrede belirtilen renk olur ama bu rengi kod ve parametresiyle değiştirebiliriz.

Sayfadaki hiperlinklerin rengini belirlemek için <body> koduna link, vlink ve alink parametreleri atanır:
link Hiperlinkin rengini belirler.
<body link="blue">
vlink Ziyaret edilmiş hiperlinklerin rengini belirler.
<body vlink="purple">
alink Hiperlinklerin tıklandığı andaki rengini belirler.
<body alink="red">

Pencere Boşlukları

Tabloda yazılan değerler hiperlinklerin standart renkleridir aslında. Sizler bu üç parametreyi beraber kullanarak sıra dışı hiperlinkler oluşturabilirsiniz. (CSS derslerinde çok daha detaylı işleyeceğiz.)

Web sayfasını oluşturduğumuz zaman, sayfanın pencereyle arasında boşluklar olduğunu görürüz. Web tasarımcısı o kadarcık kullanılmayan alanı bile değerlendirmek isteyebilir. (Özellikle görüntü nesnelerinin çok kullanıldığı sayfalarda. Sayfa kenarındaki boşlukları ayarlamak için <body> koduna leftmargin, topmargin, rightmargin ve bottommargin gibi parametreler atanır:
leftmargin Sayfanın sol kenar boşluğunu (piksel cinsinden) belirler.
<body leftmargin="0">
topmargin Sayfanın üst kenar boşluğunu belirler.
<body topmargin="40">
rightmargin Sayfanın sağ kenar boşluğunu belirler.
<body rightmargin="20">
bottommargin Sayfanın alt kenar boşluğunu belirler.
<body bottommargin="10">

Volkan Derinbay'a tşkler.