Yazı Renklendirme HTML veya CSS iki ayrı tarzda

Tarih: 08 Ocak 2009

Siteniz veya blogunuz varsa yayımladığınız yazılarınızda sayfa rengi, yazı rengi, sütunlar, vesaire gibi pekçok biçimlendirmelerin nasıl yapıldığını merak edersiniz. Öğrenmek kolaydır. Yeter ki dikkatlice okuyun.

Okuyup öğrenmekten çekinmeyin hiçbir şeyi gözünüzde büyütmeyin. Hiç bilgisiz bir insan bile benim gibi kodları kurcalaya kurcalaya öğreniyorsa, bilenlerin tariflerini okuyarak öğrenmeyi daha kolay becerebilirsiniz. Size sunulan bilgileri okuyun. Okuyup öğrenmekten korkmayın..

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 kodları için şu yazıma bakabilirsiniz: » Renk Kodları

renkli yazı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

Bu bilgi düz yazıların renklendirilmesi hakkındaydı. Linkler bu şekilde renklendirilemez. Nasıl yapılır? Okumaya devam edin.

Sadece 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:
http://devletli.com/ sitemin URL’sidir. Bu URL’nin link olması ve siteme gelenlerin URL’yi değil sadece uygun bulduğum kelimeleri meselâ “Benim Site” yazısını görmeleri aşağıdaki gibi kod içinde bulunmasıyla oluyor:
<a href="http://devletli.com/">Benim Site</a>

Gördüğünüz gibi link adlandırmasını “benim site” diye yapmışım. 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. Resim koymak nasıl yapılır başka bir yazımda anlatırım.

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="http://devletli.com/">Benim Site</a>

Ve normal sayfadaki renklendirilmiş görünümü:
Benim Site

Kıyaslayın
Sade kod:
<a href="http://devletli.com/">Benim Site</a>
Sadece HTML sayfası ayarıyla renklendirilmiş kod:
<a style="color:#FF0000;" href="http://devletli.com/">Benim Site</a>

CSS usulüyle yazı renklendirme

Düz yazı ve link renklendirmeleri bu usülde karışık gibi görünüyor. CSS style sayfasında bütün ayar kodlamaları bulunur. HTML sayfasında ise renklendirilecek yer için çok kısa kodlar kullanılır. Birçok şekli vardır ama en çok kullanılanı div class ile yapılanıdır.

Div konularına değindiğim yazılarımda bunları açıklamıştım. Yazı renklendirmesinde düz yazı için ayrı, linkli yazı için ayrı yazı renklendirmeleri nasıl yapılır bunları o yazılarımdan bilhassa » div class ile ilgili yazımdan okuyabilirsiniz

Dikkat: Sadece HTML sayfasında kullanabileceğiniz biçimlendirme kodlarıyla her şeyi yapabilirsiniz. Yalnız şunu bilin ki en sağlıklı biçimlendirme yolu CSS tarzı ile olanıdır. Her açıdan yararlıdır ve SEO için de önemlidir.

Bu yüzden CSS öğrenmenizde yarar var. Hiç zor değildir. Div yazılarıma baksanız onları öğrenseniz var ya neredeyse bütün CSS meselelerinin yüzde doksanını öğrenmiş gibi olursunuz. “gibi” dedim. aynen öyledir demedim. Yani hiç gözünüzde büyütmeyin, elbette yüzde doksanı değil ama onları öğrenseniz gerisi çorap söküğü gibi gelir.

Etiketler:

galatasaray yazısı

Açıklamalar:
1- Okuduğunuz yazı hakkında sorunuzu veya yorumunuzu aşağıya yazabilirsiniz.
2- Yazılarımı RSS ile takip edebilirsiniz.

Yukardaki yazı ile ilgili ek bilgiler ve yorumlar:

  1. ceylin yıldız diyor ki:

    slm ben 11.sınıf teknik lise okuyorum hocamız bizden çift renkli yazı istedi ama bulamadım kimsede bulamadığı için kesin sınawda soracaktır. (hep öle yapıyo ) yani ÖRN:galatasaray yazısının kırmızı sarı olması gibi turuncu deil yani :) bilgi werirseniz çoooooooooooook sewinirim şimdiden tşkrler.
    *********************
    Bunu word belgesinde, “Wordart” ile yapabilirsiniz. Sizin için en basitinden örnekler yaptım ve resmini alarak buraya aşağıya koydum. Peki nasıl yapabilirsiniz, tarifi çok uzun. Yapmak istiyorsanız ve beceremezseniz söyleyin bunun için ayrı bir sayfa hazırlayıp bilgi veririm oradan öğrenirsiniz. Resim aşağıda.
    galatasaray yazısı

  2. Hasan Etyemez diyor ki:

    Teşekkürler Hocam, kelime, link renklendirme hususunda gayet istifade ettim… Emeğinize sağlık.

  3. kemal KOÇYİĞİT diyor ki:

    Teşekkür ederim elinize sağlık (Benim Site) işime yaradı elinize sağlık..

  4. y8 diyor ki:

    Çok guzel olmuş özellikle galatasarayın örnek olarak kullanılması dahada güzel olmuş :)