Öğretmenler Forumu

Lütfen giriş yapın veya üye olun.

Kullanıcı adınızı, şifrenizi ve aktif kalma süresini giriniz
Gelişmiş Arama  

Haberler:

Gönderen Konu: Html ve Css link özellikleri  (Okunma sayısı 24472 defa)

Rindâne

  • Y
  • Tam
  • *****
  • Çevrimdışı Çevrimdışı
  • İleti: 228
    • Öğretmenler Forumu
Html ve Css link özellikleri
« : 16 Kasım 2009, 17:32:34 »

Eveeet, HTML kullanarak sayfa yapmanın mantığını anladık, CSS kullanımını da kavramaya başladık, şimdi herhangi bir sayfaya link verme işlerini görelim, link kodları aşağıdaki gibidir.

Kod: [Seç]
<a href="http://www.ogretmenlerimize.com">Öğretmenler Forumu</a>
 Yukarıda gördüğümüz gibi link kodları <a href="site adresi">Link İsmi</a> şeklindedir, yukarıdaki kalın yazılmış kodları sitemize yazdığımızda şu anda okumakta olduğunuz Öğretmenlerimize.com adresli sitemize link vermiş oluruz. Ama bu verdiğimiz link açık mavi olarak görünecektir (hani pek çok sitede gördüğünüz çivit mavisi gibi olan renk), peki biz bu link renklerini değiştiremez miyiz? Elbette ki değiştirebiliriz. Bunun için doğruca CSS dosyamıza başvurmamız ve linkler için bazı tanımlamalar yapmamız gerekir. Daha önce oluşturduğumuz CSS dosyamıza neler yazmıştık? Arka  plan rengi ve yazı rengi tanımlamıştık, şimdi bir de linkler için bir tanım yapalım, bukalemun.css dosyamızı açalım ve var olan yazıların altına

a:link {text-decoration: none;  font-weight: bold} (Bu daha henüz tıklanmamış link demektir, yani daha henüz milli olamamış:))
a:visited {text-decoration: none;  font-weight: bold} (Bu ise daha önce ziyaret edilmiş, kapısı çalınmış link demektir)
a:active {text-decoration: none;  font-weight: bold} (Şu anda aktif olan link demektir, yani halen bu sayfadaymışız)
a:hover {text-decoration: underline; font-weight: bold} (bu ise imlecin üzerinde olduğu, milli olmaya aday link demektir, altı çizili olduğu çok heyecanlı olmasına yorumlanabilir belki.:))

kodlarını ekleyelim. Şu anda bukalemun.css adlı CSS dosyamızın içeriği aşağıdaki gibi oldu

Kod: [Seç]
body {
background:#e5e5e5;
color: #384e88;
}

a:link {text-decoration: none;  font-weight: bold}
a:visited {text-decoration: none;  font-weight: bold}
a:active {text-decoration: none;  font-weight: bold}
a:hover {text-decoration: underline; font-weight: bold}

Ve index.html sayfamızı açarak daha önce yazdığımız metne kısa bir ekleme yapalım ve diyelim ki 
Kod: [Seç]
<p>Sonunda ben de bir web sayfası yapmayı öğreneceğim, belki önceleri basit sayfalar yapacağım ama dersler ilerledikçe çok daha zor ama çok daha güzel sayfalar yapabileceğim, bu bilgileri <a href="http://www.ogretmenlerimize.com">Öğretmenler Forumu</a> sitesinden öğrendim.</p>
 Eveet, linkimizi vermeyi öğrendik, linkimiz bizim istediğimiz renkte oldu (içerikte yazılara verdiğimiz renk ile aynı ama link yazısı kalın oldu ve imleç üzerine gelince altı çizgili oldu.

font-weight: bold kalın yazı demek
text-decoration: underline; ise altı çizgili demek.

 Eğer link verdiğimiz sayfanın veya sitenin yeni bir pencerede açılmasını istiyorsak kodlarımıza target="_blank" kodunu eklememiz gerekir. Yani aşağıdaki gibi;

<a href="http://www.ogretmenlerimize.com" target="_blank">Öğretmenler Forumu</a>

Linklere Farklı Özellikler
Kayıtlı
Öğretmenler, yeni nesil sizlerin eseri olacaktır.
Mustafa Kemal ATATÜRK