Web sayfasının arka planı
Web sayfamıza yazı eklenmesini, yazıların tipini, boyutlandırmasını, renklendirmesini, yeni paragrafa geçme, yeni satıra geçme, başlıklar ile ilgili bölümü bitirince sıra geldi sayfamızın arka planını düzenlemeye.
Web sitelerinin arka planları :
Web sayfamıza ekleyeceğimiz yazıların görünümünü etkileyen en önemli kısım arka plandır. Arka plan rengi olarak kullanacağımız en iyi renk seçimi beyazdır. Hem sade, hem de tarayıcıya yüklenmesi en kolay renktir. Ancak bazı web sitelerinde kullanılan değişik arka plan resimleri görmüşsünüzdür. Yapmayı tasarladığınız web sayfasının arka planına bu tür bir arka plan resmi dahi ekleseniz, arka planınnıza öncelikle bir renk tanıtmanızda fayda var. Çünkü herhangi bir tarayıcı sizin sayfanızı çağırdığında internet bağlantı hızı ile ilintili olarak arka plan resminiz yüklenene dek yazılarınız daha önce, hatta ilk yüklenen kısımdır.
Bu nedenle öncelikle bir arka plan rengi tanıtmanız gerekmektedir.
Web sayfamızın arka planına bir renk eklemek için <body> takısına arka plan
rengini atayacak parametre yazmamız gerekir.
Şimdi tekrar Not Defteri uygulamamızı açalım ve alttaki satırları aynen yazalım.
<html>
<head></head>
<title>Benim Sayfam</title>
<body bgcolor=FFFF00><font face=Arial size 5 color=black><p>Bu sayfanın
arka plan rengi sarı oldu. </p>
</font>
</body>
</html>
Yazdıklarımızı kaydedip, tarayıcımıza dönelim ve F5 tuşuna basalım.
Gördüğünüz gibi, <body bgcolor=ffff00> diyerek, yani <body> takısına "bgcolor" parametresini atayarak ve bunun içinde bir hex renk değeri vererek sayfamızın arka planını sapsarı yapıverdik.
Bunun gibi, renk sayfasındaki diyagramdan seçerek sayfanızın arka planına
istediğiniz rengi uygulayabilirsiniz.
Bu noktada dikkat etmeniz gereken önemli bir husus var.
Arka plan renginizi seçerken, web sayfanız üzerine yazacağınız yazıların tezat
bir renkte olmasına özen göstermelisiniz.
Öyle ya! Beyaz bir arka planda gri bir yazı zor görünür.
Bu arada komple bir web sayfası tasarlarken, bu sitenin sol yanında gördüğünüz
"Bağlantı Ekleme" adımında anlatılan ve bir bağlantıyı tanımlayan
renkleri kullanırken, arka plan renklerinizi de dikkatli seçmek zorundasınız.
Ne demek istediğime burada kısaca değineyim.
Web sayfanızan herhangi diğer bir sayfanıza veya başka bir web sitesine bir bağlantı
eklediğiniz zaman internetteki çoğu web sitesinde gördüğünüz renk mavidir. Bu
bağlantının adı, altı yine bağlantı rengiyle aynı renkte bir çizgiyle
çizilmiştir. Farenizin ok şeklindeki ucu bu bağlantı yazısının üzerine
geldiğinde tek parmağı havada bir el şeklini alır.
Elbette bağlantı renklerini değiştirmek elimizde. Ama bağlantı ana rengi mavi
olduğuna göre, eğer arka planınızı mavi yapmayı düşünüyorsanız altı çizgili
olan ve bağlantıyı gösteren yazınız okunamayacaktır.
Bu nedenle arka planda renk veya arka plan resmi uygulaması kullanırken dikkatli
olmamız gerekir.
Arka planımıza bir resmi nasıl ekleriz?
Web sayfamızın arka planına bir resim eklemek için önce
elimizde bir resim olmalı. Hazır arka plan sağlayan web sitelerinden bu resimleri elde
edebiliriz. Ancak bu resimleri kullanırken bazı özelliklerine dikkat etmek zorundayız.
Elimizde bulunan geniş boyutlu bir resim de işimizi görebilir. Ama bu tür arka
planları sağlayan siteleri ziyaret ettiğinizde size arka plan olarak sunulan resimlerin
ebatlarına dikkat edin. Tamamı çok küçük boyutludur.
Buraya bu tür sitelerden temin edebileceğiniz resimlerden iki adet ekledim. Bu iki resmi de farenizin sağ düğmesiyle tıklayarak (Resmi Farklı Kaydet) adımı ile bilgisayarınızda, ilk sayfalarda söylediğim ve web sayfası çalışmalarınızın bulunduğu klasöre kopyalayın. Bu işlkemi yaparken resim dosyalarının adlarını hiç değiştirmeden kaydedin. (Arka Plan 1 isimli resim dosyasının adı bg.jpg, Arka Plan 2 isimli resim dosyasının adı bg2.jpg olarak)
Arka Plan 1
Arka Plan 2
Şimdi Not Defterinizi açın ve aşağıdaki kodları yazın.
<html>
<head>
</head>
<title>Benim Sayfam</title>
<body background="bg1.jpg">
</body>
</html>
Bu satırları yazdıktan sonra kaydedip tarayıcınıza bakın.
İşte (bg1.jpg) adlı resim dosyasını arka plan olarak sayfamıza uygulayınca bu görünümü elde ettik.
Şimdi de aşağıdaki satırları Not Defterinize yazın ve kaydedin.
<html>
<head>
</head>
<title>Benim Sayfam</title>
<body background="bg2.jpg">
</body>
</html>
Tarayıcınız penceresinde alttaki resmi göreceksiniz.
Şimdi de (bg2.jpg) adlı resim dosyasını arka planımız olarak kullanınca böyle bir sonuç elde ettik.
