İnternet sitemizi oluşturmak için gerekli olan dillerden biri olan HTML5 öğrenmeye başladığımızda gerekli olan diğer bir konu ise bu dil üzerinde ki renklerdir. İnternet sitenizi kodlamaya başladığınızda gerektiği yerde gerektiği şekilde renkleri kullanmak sizler için çok büyük bir avantaj sağlayacaktır. HTML5 Renk Kodları sayesinde istediğiniz renge istediğiniz birden fazla şekilde ulaşabilirsiniz.
HTML5 renk kodları nasıl yazılır adlı başlığa geldiğimiz zaman ise karşımıza birden fazla renk etiketlerini yazmak için seçenekler gelmiş bulunmaktadır. Bunlar bir bakıma renklerin normal olarak İngilizce isimlerinin yazılması, RGB, RGBA, HEX, HLS, HLSA şeklinde yazılmasını ifade etmektedir.
HTML5 Renkler ve Renk Etiketleri Gösterim Şekilleri
HTML5 renk kodları ekleme işlemine geldiğimiz zaman asıl bilmemiz gereken tek şey aslına bakarsanız ne ile ve nasıl eklememiz gerektiğidir. İnternet sitenize ekleyeceğiniz renk kodunun birden fazla şekilde gösterimi vardır.
HTML5 renk ekleme etiketleri eklemek için ise yazacağınız etiketlerde kendi içinde bazı özelliklere bile ayrılsalar da her bir etikette istediğiniz rengi göstermeniz mümkündür. Bazı HTML renk gösterme etiketlerinde daha detaylı ayrıntıları ayarlayabilir iken bazılarında ise basit ve kolay bir şekilde istediğiniz rengi ekrana yazdırabilirsiniz.
[accordion] [accordion_content title=”İngilizce Renk Adları İle HTML Renk Göstermek” icon=”” active=”active”]En kolay olarak HTML5 dilinde istediğiniz rengin İngilizce ismini yazarak o rengi ekrana yazdırma işlemini gerçekleştirebilirsiniz. HTML5 toplamda 140 tane renk kelimesini desteklemektedir. Hemen hemen aklınıza gelen bir çok renk adlarını yazarak kodun çalışması sağlanabilir.
<h1 style="color:olive;">İlk Başlık</h1>
Yukarıda yer alan olive yerinde blue yada darkblue yazsanız bile kabul görecektir. Yukarıda ki kod ekrana yeşil bir şekilde İlk Başlık kısmını getirecek blue olarak yazdığımızda ise ekrana mavi bir şekilde darkblue şeklinde yazdığımızda ise lacivert bir şekilde yazının karşımıza çıktığını görebiliriz.[/accordion_content][accordion_content title=”RGB İle HTML Renk Göstermek” icon=”” active=”active”]Temel olarak açılımı kırmızı yeşil ve maviden oluşmaktadır. Her bir parametre 0 ile 255 arasında ki değerler rengin yoğunluğunu tanımlar. Örneğin rgb(255 ,0 ,0) değeri kırmızı olarak ekrana gelecektir. Bunun nedeni ise kırmızı en yoğun değeri olan 255’e ayarlandığından dolayı diğer renkler 0’a ayarlanmıştır. Eğer siyah olarak görüntülemek isteseydik tüm parametrelerin 0 olarak ayarlanması beyaz olarak ekrana gelmesini isteseydik tüm parametrelerin 255 değerinde yazılması gerekmektedir.
<h1 style="color:rgb(00 ,60 ,00);">İlk Başlık</h1>
Kullanımı yukarıda yer alan şekildedir. İstediğiniz RGB kodlarını Adobe Photoshop programından yada internet sayesinde öğrenerek yazacağınız bu parametrelere sayılar sayesinde o istediğiniz rengi internet siteniz için gösterebilirsiniz.[/accordion_content][accordion_content title=”RGBA İle HTML Renk Göstermek” icon=”” active=”active”]RGB ile RGBA arasında en temel fark ise A harfinin alfayı temsil etmesi yani diğer bir değişle rengin opaklık derecesini ayarlamanızı sağlar. Bu değer 0 ile 1 arasında değişir. 0 tamamen şeffaf olur iken 1 değeri ise baskın bir sonuç ortaya getirecektir. 0 ve 1 arasında girmiş olduğunuz her sayı ise o rengin transparanlığını belirleyecektir.
<h1 style="color:rgba(255 ,99 ,71, 0);">İlk Başlık</h1>
Yukarıda yer alan kodda 0 yazdığımız için yazı tamamen şeffaf görünecektir. Fakat 0 yerine 0.4 gibi değerler kullanır isek rengin ne tam doygun olması nede tam transparan olması sağlanır.[/accordion_content][accordion_content title=”HEX İle HTML Renk Göstermek” icon=”” active=”active”]RGB değerine benzer olan bu değer ise onaltılık değer kullanır. Temel olarak RrGg,Bb kısacası kırmızı, yeşil ve mavi ile ff arasında ki onaltılık değerlerdir. Örneğin bir rengin en yüksek değerine ff verilir iken en düşük rengine 00 verilir. Bu sayede #0000ff yazacak olur isek ekrana mavi renginde bir yazı gelmiş olur.
<h1 style="color:#ff0000;">İlk Başlık</h1>
Yukarıda yer alan kodu yazdığımızda ise kırmızı rengine en yüksek ve diğer renklere en düşük değeri verdiğimiz için ekrana kırmızı renginde bir yazı yazdırılmış olacaktır.[/accordion_content][accordion_content title=”HSL İle HTML Renk Kodu Göstermek” icon=”” active=”active”]HSL ‘de renkleri gösterebilmek için ise ton, doygunluk ve hafiflik olacaktır. Ton 0 ile 360’a kadar var olan bir derecedir. 0 kırmızı rengi gösterir iken 120 yeşil 240 da mavi olmaktadır. Bunu diğer HTML Renk Etiketlerinden ayıran özellik ise doygunluk ve hafiflik değerlerinde yüzdeli değerler kullanılır.
<h1 style="color:hsl(39, 100%, 50%);">İlk Başlık</h1>
Yukarıda gösterildiği şekilde kullanılır. Eğer doygunluk değerleri 100% olur ise rengin tamamını görebilir, %50 olur ise gri tonları ile karışık bir renk görebilir fakat 0% olur ise rengi göremez ve gri tonlarında bir renk görmeye başlarsınız. Hafiflik ise bir renge ne kadar ışık vermek istediğinizi belirtebilirsiniz. 0% değeri hiç ışık vermediğinizi 50% değeri ne ışık verip nede vermediğinizi %100 derecede ışık verdiğinizi ve rengini açtığınızı belli eder.[/accordion_content][accordion_content title=”HSLA İle HTML Renk Göstermek” icon=”” active=”active”]HSLA etiketi sayesinde ise RGBA ‘da olduğu şekilde sonuna A harfinin eklenmesiyle Alfayı temsil eder. Alfa sayesinde 0 ile 1 arasında değerler vererek şeffaf olup olmadığını ayarlarız. 0 ile 1 arasında verilen değerler ise transparanlık seviyesini belli eder.
<h1 style"color:hsla(9, 100%, 64%, 0);">İlk Başlık</h1>
Yukarıda ki şekilde ifade edilir. 0 değerini yazdığımız için tamamen transparan bir şekilde ekrana gelecektir. 1 verseydik ise rengin tam net bir şekilde ekrana yazdırılmış değeri gelirken 0.5 gibi bir değer veriyor olsaydık şeffaf bir şekilde renk karşımıza geliyor olacaktı.[/accordion_content][/accordion]
Yukarıda yer alan şekilde HTML renk gösterim etiketlerini öğrenmiş bulunuyoruz. HTML renk kodları sayesinde istediğiniz bir yazının arkaplanını, rengini ve çerçeve rengini değiştirebilirsiniz. Çerçeve rengi demişken diğer derslerimizde bir yazıya nasıl çerçeve eklenmesinden bahsetmemiştik. Bir yazıya hem çerçeve eklemek hemde rengini değiştirmek istiyor iseniz :
<h1 style="border:2px solid Tomato;">İlk Başlık</h1>
Yukarıda yer alan şekilde hem çerçeve ekleyebilir hemde rengini değiştirebilirsiniz. Tomato yerine sadece renklerin İngilizce isimleri yerine RGB, RGBA, HEX, HSL, HSLA gibi HTML5 renk etiketleri sayesinde çerçevenin rengini ayarlayabilirsiniz.