bgcolor etiketine sahip kayıtlar gösteriliyor.
bgcolor etiketine sahip kayıtlar gösteriliyor.

HTML Renkler ve Arkaplan Kullanımı

HTML Dersleri
HTML Renkler ve Arkaplan Kullanımı

Web Renkleri
Web renkleri, web sayfası tasarımında kullanılan ve izlenen sayfanın görünümünü düzenlemeye yarayan renklerdir.Web sayfası yazarlarının düzenledikleri web dosyalarını renklendirmek için kullanabilecekleri çeşitli yöntemler mevcuttur. Renkler RGB renk sisteminde kullanılan üçlü hexadecimal kod ile belirlenebileceği gibi, standart ingilizce adları kullanılarak da belirlenebilir.


Üçlü Hexadecimal Renkler
İngilizce, 16'lık veya RGB değerlerinde belirtilmelidir. Renk değerlerini oluşturmak için online ya da offline çalışan bir renk seçim aracı veya grafik yazılımı tercih edilebilir. (Online Color Picker, Gimp, Photoshop)

Hex üçlüsü ifadesi altı haneli, üç-baytlık hexadecimal bir numaradır. HTML, CSS, SVG ve diğer kodlarda renkleri bildirmek için kullanılır. Baytlar, kullanılacak olan rengin kırmızı, yeşil ve mavi bileşenlerini örnekler. Her bayt heksadesimal gösterim kullanılıyorsa 00 ile FF arasında, desimal gösterim kullanılıyorsa 0 ile 255 arasında bir sayı ile belirtilir. Heksadesimal üçlü web renklerinde aşağıdaki sırayla birleştirilerek kullanılır:

    Bayt 1: kırmızı değer
    Bayt 2: yeşil değer
    Bayt 3: mavi değer

Örneğin, renk değerleri kırmızı=36, yeşil=104, ve mavi=160 olan bir renk ele alalım. Bu renkteki 36, 104 ve 160 desimal sayıları sırasıyla 24, 68 ve A0 heksadesimal sayılarına denk gelmektedir. Elde ettiğimiz heksadesimal renk değerlerini yan yana yazacak olursak, 2468A0 hex üçlüsünü elde etmiş oluruz.

Bu sistem kullanarak oluşturulabilen renk sayısı:  256 x 256 x 256 = 16,777,216


HTML Arka Plan Renk ve Resim Kullanımı
<body> etiketi arka plan belirlemek için iki tane parametre bulundurur. Bunlar "bgcolor" ve "background" parametreleridir. bgcolor ile arka plan rengi, background ile de bir arka plan resimi belirtebilirsiniz.

Sayfa Arka Plan Rengi belirleme için html örneği: 
<html>
<head>
<title>Sayfa Arkaplanı Renklendirme Örneği</title>
</head>

<body bgcolor="teal">
<h3>Sayfa Arkaplanı Renklendirme Örneği</h3>
</body>
</html>

Örnek Gösterimi

Örneğimizde <body> etiketine arkaplan rengi belirlemek için  "bgcolor" parametresini kullandık ve parametre değeri olarak web renklerinden "teal" seçtik. ( Teal, genelde Teal mavisi olarak bilinir. Teal rengi hafif koyu yeşilimsi mavi bir renktir. Windows 98 kullananlar hatırlayacaklardır bu arkaplan rengini ) Örneğimizde web rengi olarak teal yazmak yerine teal renginin hex karşılığı olan #008080 koduda yazsaydık yine aynı rengi arka plan olarak elde edecektik. (<body bgcolor="#808080">) Yine aynı şekilde hex veya web rengini belirtmeden istediğimiz rengin RGB kodlarınıda yazsak istediğimiz rengi elde edebileğiz. (<body bgcolor="rgb(0,128,128)">

Sayfa Arkaplan Resmi belirleme için html örneği:  
<html>
<head>
<title>Resim olarak Arkaplan ekleme Örneği</title>
</head>
<body background="../resimler/bg.gif">
<h3>Resim olarak Arkaplan ekleme Örneği</h3>
<h3>bg.gif dosyası Sayfa Arkaplan Resmi olarak eklendi.</h3>
</body>
</html>

Örnek Gösterimi

Arkaplana resim ekleme işleminde dikkat edilmesi gereken nokta eklenecek image dosyasına ait yolu doğru bir şekilde belirtmektir. Web tasarımına yeni başlayanlar, genelde kullandığı html dökümanı ile kullandığı resimleri aynı klasör içinde barındırırlar. Html dökümanı ile bu html dökümanına eklenecek resim aynı klasörde ise, url olarak direkt resmin adını ve uzantısını yazmak yeterlidir. 

Web sayfalarınızı hazırlarken image dosyalarının farklı bir klasörde bulunması ileride oluşacak karmaşayıda önlemek için yararlı bir yöntemdir. Resmin yolunu belirlerken, adres yolunun tamamı yazılabilir. (Örneğin; C:\HTML\Dersler\resimler\bg.gif) Bu yol tanımlaması, html dökümanlarının bulunduğu bilgisayarda sorunsuz bir şekilde çalışır, fakat; başka bir bilgisayarda yapılan tasarım bir server'a gönderildiğinde, belirtilen bu yol bulunamayacağı için resimlerin yerinde boşluk ve kırmızı çarpı işaretleri görülür. Dolayısıyla resimleriniz görüntülenemez. Bu sorunları yaşamamak için web tasarımında göreceli adresleme tekniği kullanlır. 

Göreceli Adresleme Tekniği ile Image yolunu belirtmek
Göreceli adres yolu belirtmede, adresler dökümanların konumuna göre belirtilir. Bu nedenle, değişik ortamlarda doğru şekilde yorumlanır. 

Aynı dizin içinde resimler klasöründeki bg.gif isimli resmi html dökümanına eklemek için; resimler/bg.gif yazılır.

Dersler isimli klasörümüz içindeki, html dökümanımıza Dersler klasörü ile aynı dizindeki bayraktar.jpg isimli resmi eklemek istersek ../bayraktar.jpg yazılır. Burada "../" ile bir üst dizine çıkılır yani içinde bulunduğum klasörden dışarı çık anlamındadır.

Bu şekilde dökümanların birbirlerine göre durumlarının kullanılması ile yapılan adres belirtmeye göreceli adres belirtme denir. Arkaplan ayarlamalarında bgcolor ve background parametreleri aynı anda kullanılabilir. Sayfanın açılması sırasında resmin yüklenmesi uzun zaman alabilir. Bu sürede arkaplana verilen renk görüntülenir. Resim yüklendiği zaman, arkaplanda resim görüntüleneceği için rengin bir önemi kalmaz. Kullanım şekli aşağıdaki gibidir.

<body bgcolor="teal" background="../Dersler/bg.gif">..........</body>   

HTML Renkler Faydalı Linkler