HTML Sayfa Altyapısı

WebMaster bölümünde yer alan bu konu SüKuN tarafından paylaşıldı.

  1. SüKuN

    SüKuN Harbi Aktif Üye

    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.
    HTML:
    <html> 
     <head> 
    <title>Döşeme</title> 
    </head> 
    <body background="duvar.jpg"> 
    <br> 
    Girit denen bir toprak var şarap rengi denizin ortasında<br> 
    denizle çevrili, güzel, semiz,<br> 
    çok insan yaşar, sayamazsın, doksan da kenti.<br> 
    Karışmıştır bir dil ötekine:<br> 
    Akha'lar, yereği yüce Etheokret'ler, Kydon'lar bir de,<br> 
    üç boy Dor, tanrısal Pelasg'lar sonra.<br> 
    Knossos derler bir de kent, kocaman;<br> 
    kral Minos... Ulu Zeus dokuz yılda bir danışır ona, (...)"<br><br> 
    HOMEROS<br> 
    </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:
    <html> 
     <head> 
    <title>Arkaplan Resmi</title> 
    </head> 
    <body background="yenidunya.jpg"> 
    <font color="white">There is so many different worlds</font><br> 
    <font color="white">So many different suns</font><br> 
    <font color="white">And we have just one world</font><br> 
    <font color="white">But we live in different ones</font> 
    </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:
    <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"> 
    <font color="white">There is so many different worlds</font><br> 
    <font color="white">So many different suns</font><br> 
    <font color="white">And we have just one world</font><br> 
    <font color="white">But we live in different ones</font> 
    </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:
    <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"> 
    <font color="white">There is so many different worlds</font><br> 
    <font color="white">So many different suns</font><br> 
    <font color="white">And we have just one world</font><br> 
    <font color="white">But we live in different ones</font> 
    </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:
    <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"> 
    <br><br> 
    ROMEO AND JULIET<br><br> 
    a lovestruck romeo sing a streetsuss serenade<br> 
    laying everbody low with a lovesong that he made<br> 
    finds a convenient streetlight steps out of the shade<br> 
    says something like you and me babe how about it?<br> <br><br> 
    juliet says hey it's romeo you nearly gimme a heart attack<br> he's underneath the window she's singing hey la my boyfriend's back<br> you shouldn't come around here singing up at people like that<br> anyway what you gonna do about it?<br> <br><br> 
    juliet the dice were loaded from the start<br> 
    and i bet and you exploaded in my heart<br> 
    and i forget i forget the movie song<br> 
    when you gonna realise it was just that the time was wrong juliet?<br> 
    <br><br> 
    come up on different streets they both were streets of shame<br> 
    both dirty both mean yes and the dream was just the same<br> 
    and i dreamed your dream for you and now your dream is real<br> 
    how can you look at me as if i was just another one of your deals?<br> 
    <br><br> 
    when you can fall for chains of silver you can fall for chains of gold<br> 
    you can fall for pretty strangers and the promises they hold<br> 
    you promised me everything you promised me thick and thin<br> 
    now you just say oh romeo yeah you know i used to have a scene with him<br> 
    <br><br> 
    juliet when we made love you used tu cry<br> 
    you said i love you like the stars above i'll love you till i die<br> 
    there's a place for us you know the movie song<br> 
    when you gonna realise it was just that the time was wrong juliet?<br> 
    <br><br> 
    i can't do the talk like they talk on tv<br> 
    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 <br><br> 
    and all i do is miss you and the way we used to be<br> 
    all i do is keep the beat and bad company<br> 
    all i do is kiss you through the bars of a rhyme<br> 
    julie i'd do the stars with you any time<br> 
    <br><br> 
    juliet when we made love you used to cry<br> 
    you said i love you like the stars above i'll love you till i die<br> 
    and there's a place for us you know the movie song<br> 
    when you gonna realise it was just that the time was wrong juliet?<br> 
    <br><br> 
    a lovestruck romeo sings a streetsuss serenade<br> 
    laying everybody low with a lovesong that he made<br> 
    finds a convenient streetlight steps out of the shade<br> 
    says something like you and me babe how about it?<br> 
    <br> 
    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:
    <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"> 
    <br><br> 
    ROMEO AND JULIET<br><br> 
    a lovestruck romeo sing a streetsuss serenade<br> 
    laying everbody low with a lovesong that he made<br> 
    finds a convenient streetlight steps out of the shade<br> 
    says something like you and me babe how about it?<br> <br><br> 
    juliet says hey it's romeo you nearly gimme a heart attack<br> he's underneath the window she's singing hey la my boyfriend's back<br> you shouldn't come around here singing up at people like that<br> anyway what you gonna do about it?<br> <br><br> 
    juliet the dice were loaded from the start<br> 
    and i bet and you exploaded in my heart<br> 
    and i forget i forget the movie song<br> 
    when you gonna realise it was just that the time was wrong juliet?<br> 
    <br><br> 
    come up on different streets they both were streets of shame<br> 
    both dirty both mean yes and the dream was just the same<br> 
    and i dreamed your dream for you and now your dream is real<br> 
    how can you look at me as if i was just another one of your deals?<br> 
    <br><br> 
    when you can fall for chains of silver you can fall for chains of gold<br> 
    you can fall for pretty strangers and the promises they hold<br> 
    you promised me everything you promised me thick and thin<br> 
    now you just say oh romeo yeah you know i used to have a scene with him<br> 
    <br><br> 
    juliet when we made love you used tu cry<br> 
    you said i love you like the stars above i'll love you till i die<br> 
    there's a place for us you know the movie song<br> 
    when you gonna realise it was just that the time was wrong juliet?<br> 
    <br><br> 
    i can't do the talk like they talk on tv<br> 
    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 <br><br> 
    and all i do is miss you and the way we used to be<br> 
    all i do is keep the beat and bad company<br> 
    all i do is kiss you through the bars of a rhyme<br> 
    julie i'd do the stars with you any time<br> 
    <br><br> 
    juliet when we made love you used to cry<br> 
    you said i love you like the stars above i'll love you till i die<br> 
    and there's a place for us you know the movie song<br> 
    when you gonna realise it was just that the time was wrong juliet?<br> 
    <br><br> 
    a lovestruck romeo sings a streetsuss serenade<br> 
    laying everybody low with a lovesong that he made<br> 
    finds a convenient streetlight steps out of the shade<br> 
    says something like you and me babe how about it?<br> 
    <br> 
    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 <font color="..."> 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.
    HTML:
    <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.
    HTML:
    <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">

     
    Son düzenleme moderatör tarafından: 15 Eylül 2011
  2. şeker

    şeker Üye

    paylaşım için teşekkürler