HTML DERSLERİ

Ders10: 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:

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

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:

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.

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:

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">&nbsp;</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>&nbsp;</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">

Bu sayfada <body> koduna parametreler atayarak sayfanın altyapısını oluşturmayı öğrendik. Aslında usta bir web tasarımcısı sayfa altyapısını CSS ile belirler; bu sayfada öğrendiklerimiz CSS derslerini altyapısını oluşturmaktadır. Laf aramızda, bu sayfaya kadar gelebilen okuyucular web sayfası oluşturmak için her türlü bilgiyi edinmiş oldular