12 – Html Renk Kullanımı
Html renk kullanımı ön tanımlı olarak bulunan renk isimleri ile yada RGB, RGBA, HEX, HSL, veya HSLA renk kodlamaları ile yapılır.
Html de ön tanımlı renkler 140 civarındadır. Bu renkleri arama motorlarında “color palette” veya “color picker” yazarak ulaşabilirsiniz.
Renkler Güzeldir, istediğimiz ambiyansı vermemizi sağlar.
Sayfamızın görseli sitemize gelen ziyaretçilerin hoşuna gitmeli, ilgi çekici olmalı. Ayrıca renk uyumuna da dikkat etmeliyiz.
Bir web sayfası tasarlamadan önce ön çalışma hazırlanmalı ve nasıl bir proje düşündüğümüz, ne istediğimiz, nasıl bir tema, hangi renkleri kullanacağımız gibi sorular önceden cevaplandırılmalıdır.
Sırası ile kullanım örneklerini inceleyelim.
Renkler Nasıl Kullanılıyor?
Html öğelerinin style attribute ‘e direkt olarak rengimizin adını color özelliği ile çağırarak kullanılmasıdır.
Örnek Renk İsimleri
Arka Plan Renk Değiştirme – background-color
Html öğelerimizin arka plan renklerini değiştirmemizi sağlar. Örnek kullanımı style=”background-color:yellow” şeklindedir.
Öntanımlı renkleri verebileceğimiz gibi hex, rgb, rgba, hsl ve hsla gibi renk değerlerini de verebiliriz.
Html içeriklerimizde zemin rengi kullanarak daha hoş görüntü elde etmemizi sağlar.
Aşağıdaki örnek kodlarda hazır tanımlı renkleri kullandım.
Örnek
Metin Renk Değiştirme – color
Style attribute içersinde tanımlanan color anahtarına verilen renk değeri ile yazılan metnin rengi değiştirilir. Örnek kullanımı style=”color:purple” şeklindedir.
Örnek
Kenarlık Renk Değiştirme – border
Html öğelerine kenarlık ve renkleri eklememizi sağlar. Bu özelliği kullanabilmek için kenarlığımıza bir kalınlık vermeliyiz ki bordür rengi gözüksün.
Örnek
Ayrıca burada border içerisinde kenarlığımızı, kenarlık tipini ve rengini belirledik. Bunları tek tek belirleyebiliriz. Ancak bu konu css derslerinde detaylı işleniyor.