Yazı Renklendirme HTML veya CSS iki ayrı tarzda

Site veya blog herhangi web sayfalarında sayfa rengi, yazı rengi, link rengi ve sütunlar vesaire gibi pekçok biçimlendirmelerde renklendirmeler iki şekilde sağlanır. Bunlardan biri HTML sayfalarında, biri CSS sayfasında yapılan kodlamalardır. Birini yaparsanız diğerine gerek kalmaz.

Sadece HTML sayfası içindeki uygulamayla yazı renklendirme nasıl yapılır

Renklendireceğiniz şey tek bir harf, bir kelime, ya da bir paragraf olabilir. Önce renk kodlarına ihtiyacımız var. Meselâ beyaz renk kodu: #FFFFFF kırmızı renk kodu: #FF0000 Renk kodları harflerden, rakamlardan veya harflerin ve rakamların karışık sıralanmasından olur. “o” harfi kullanılmaz ki 0 (sıfır) rakamı ile karıştırılmasın.

Renk kodu ile yazı renklendirme kodu yapılır. Renklendirilecek harfin, kelimenin veya paragrafın en başına bu kod, sonuna ise ilgili kapatma kodu konur. böylece renklendirilecek yer sınırlanır, renklendirme sadece orası için geçerli olur.

İnternet ve bilgisayar kelimelerini kırmızı yapalım. Aşağıda HTML sayfasındaki görüntüsünün örneği var. Baştaki ve sondaki kodlara dikkat edin:
<font color="#FF0000">İnternet ve bilgisayar</font>
Bu da normal sayfadaki görüntüsü: İnternet ve bilgisayar

Peki başka web sayfalarının linklerini yazılarımızda vereceksek onları nasıl istediğimiz renge sokarız? Çünkü yukarıdaki kodlama linklerde işe yaramıyor. Cevap aşağıda.

HTML sayfası ayarıyla link renklendirme

Link renklendirme biraz karmaşık. Bu sitemin linkini örnek alarak göstereyim. Önce link nedir üstünde duralım:
https://azbitki.com/ sitemin URL’sidir. Link olabilmesi için üzerine tıklayan kişileri siteye götürmesi gerekir. İşte linkin ne işe yaradığını öğrendiniz. Link oluşturmada URL adresi kullanılır ama normal sayfalarda görünmesi şart değil. İstediğiniz kelimlelerin içinde gizlenebilir. https//: azbitki.com URL adresini “Ana Sayfa” kelimelerine gizleyelim ve o kelimeleri link haline getirelim. Bu şöyle yapılır:

<a href="https://azbitki.com/">Ana Sayfa</a>

Yukarıdaki görüntü html sayfasındaki kod görünümüdür. Normal sayfada şöyle görünür: Ana Sayfa

Adlandırmadayı istediğiniz gibi yapmakta özgürsünüz. Değişik kelimeler linki bozmaz. Hatta o kısma isim değil paragraf ya da resim bile koyabilirsiniz.

Gelelim linki renklendirmeye. Linki nasıl isimlendirmişseniz o isim renkli olacaktır. HTML sayfasındaki link kodunun içine style ayarları koymak gerekiyor.
style="color:#FF0000;" bunu link kodunun içine aşağıdaki gibi koyarsınız:
<a style="color:#FF0000;" href="https://azbitki.com/">Ana Sayfa</a>

Ve normal sayfadaki renklendirilmiş görünümü:
Ana Sayfa

Kıyaslayın
Sade kod:
<a href="https://azbitki.com/">Ana Sayfa</a>
HTML sayfası ayarıyla renklendirilmiş kod:
<a style="color:#FF0000;" href="https://azbitki.com/">Ana Sayfa</a>

CSS usulüyle yazı renklendirme

HTML sayfalarında birçok kodlar kullanmak iyi değil. Yukarıda nasıl yapılacağını okudunuz. Kullansanız olur. İşe yarar. Ama daha iyisi kullanmamaktır. Tüm kod ayarlamalarının CSS sayfasından tayin edilmesi daha sağlıklıdır.

Yine yukarıdaki örnekleri ele alalım. Orada HTML sayfasında renk kodu içeren kod ayarı ile yazı renklendirmenin nasıl yapıldığını internet ve bilgisayar kelimelerinde göstermiştim. Aynı kelimelerin CSS sayfasında belirlenen kodlar yoluyla adeta uzaktan kumanda gibi renklendirmesi şöyle yapılır: Renklendirilecek kısmın başlangıcına div class konur. Bunu CSS sayfasının anlayabilmesi için isimlendiririz. O isim kmz olsun. div class=kmz şeklinde olacak. Bir de bunun sivri parantezler içinde belirtilmesi lazım. Ayrıca renklendirilecek kısmın en sonuna div’in kapatma kodu yine sivri parantez içinde eklenir. Aşağıdaki örneği inceleyin.

<div class="kmz">internet ve bilgisayar</div>

Yukarıda html sayfasında yaptığımız ayarı görüyorsunuz. Peki o nasıl olacak da kırmızı olacak? Hem CSS sayfasına yazılacak renk kodu onu nasıl anlayacak da orayı kırmızı yapacak? Şöyle:

HTML’deki div ayarına ne isim vermişsek CSS sayfasında o isim ile ve div class’ı temsil eden nokta işaretini en başa koymakla hallederiz. Böylece o kısım kırmızı olacaktır. CSS kodlaması aynen aşağıdaki gibi olur:

.kmz{color:FF0000;}

Peki linkleri CSS sayfasının yönlendirmesiyle nasıl renklendiririz?

Evet, yukarıdaki kodlama linklere etki etmeyecektir. Linklerde etkili olması için CSS kodları şöyle yazılır:

.kmz a{color:FF0000;}

Bakın br “a” harfi o kmz adlı div class alanı içerisindeki linki veya linkleri kırmızı eder.

Not: div class CSS sayfasında nokta işareti (.) ile, div id ise CSS sayfasında kare işareti (#) ile belirtilir. Verilen isimlerin başına konurlar.

Yazar: Erdal Yüksel

Kategori: Yaşam

Etiketler:



Sorunuzu / Yorumunuzu Aşağıya Yazabilirsiniz.
Lütfen yazı dili kurallarına saygılı olalım.


(Yazamıyorsanız Mozilladan deği Google Chrome ile giriş yapın.)