Bağlantıları şekillendirmek

Bağlantıları etkili bir şekilde şekillendirmek için sözde sınıfların nasıl kullanılacağını anlamak önemlidir. Navigasyon menülerinin ve sekmelerdeki bu tarz bağlantıların ortak görünümlerinin ayarlanması bu yazımızda tüm hatlarıyla ele alacağız.

Ön koşullar: Giriş seviyesi bilgisayar kullanma, HTML temelleri(HTML'ye Giriş bölümünü inceleyin), CSS temelleri (CSS'e Giriş), CSS temel metin ve yazı tipi biçimi.
Amaç: Bağlantı durumlarının nasıl biçimlendirileceğini ve bağlantıların gezinme menüleri gibi yaygın kullanıcı arabirimi özelliklerinde nasıl etkili bir şekilde kullanılacağını öğrenmek.

Bağlantılara bir göz atalım

HTML'mizde bağlantı oluşturma konusundaki en iyi uygulamaları ve yaklaşımları inceledik. Bu derste, bu bilgileri temel alarak bağlantıların stilini belirlemek için en iyi uygulamaları ve yaklaşımları göstereceğiz.

Bağlantı durumları

Anlaşılması gereken ilk konu, bağlantı durumları kavramıdır — bağlantıların farklı durumlarının, farklı sözde sınıflar ile kontrol edilebilmesidir:

  • Bağlantı: :link sözde sınıfı ile hedeflenilebilen ve bir hedefi olan bir bağlantıdır (sadece adlandırılmış boş bir bağlantı olmayan).
  • Ziyaret edilmiş: :visited sözde sınıfı kullanılarak hedeflenilebilen, tarayıcıda daha önceden ziyaret edilmiş bağlantılardır.
  • Üzerinde: :hover sözde sınıfıyla hedeflenebilen, farenin imlecinin üzerinde durduğu bağlantıdır.
  • Odak: :focus  sözde sınıfıyla hedeflenebilen, odaklanılmış bağlantılardır (örn, klavye kullanıcısı tarafından Tab tuşu veya benzeri tuşlarla odaklanılmış bağlantıdır.
  • Aktif:active sözde sınıfıyla hedeflenebilen, etkinleştirilmiş (örn üzerine tıklanılmış) bir bağlantıdır.

Varsayılan stiller

Aşağıdaki örnek, bir bağlantının varsayılan olarak nasıl davranacağını göstermektedir(CSS, daha fazla öne çıkması için metni büyükmekte ve ortalamaktadır.)

<p><a href="#">Basit bir bağlantı</a></p>
p {
  font-size: 2rem;
  text-align: center;
}

Not: Bu sayfadaki örneklerdeki tüm bağlantılar sahte bağlantılardır.  Gerçek URL'nin yerine # işareti kullanılmıştır. Bunun nedeni, gerçek bağlantılar dahil edilmiş olsaydı, bunlara tıklamanız örnekleri bozacaktı.

Varsayılan stilleri keşfederken birkaç şeyi fark edeceksiniz:

  • Bağlantıların altı çizilmiştir.
  • Ziyaret edilmeyen bağlantılar mavidir.
  • Ziyaret edilen bağlantılar mordur.
  • Bir bağlantının üzerine gelindiğinde fare imlecinin simgesi küçük bir el simgesine dönüşür.
  • Odaklanmış bağlantıların etrafında bir ana hat vardır.
  • Aktif bağlantılar kırmızıdır(Tıklama esnasında farenin düşmesini basılı tutmayı deneyin).

İlginçtir ki, bu varsayılan stiller, 1990'ların ortalarında tarayıcıların ilk günlerindeki ile neredeyse aynıdır. Bunun nedeni, kullanıcıların bu davranışı bilmesi ve beklemesidir — bağlantılar farklı şekilde tasarlanırsa birçok insanın kafası karışabilir. Tabiki bu, bağlantılara hiçbir şekilde stil vermemeniz gerektiği anlamına gelmez, sadece beklenen davranıştan çok uzaklaşmamalısınız. En azından şunları yapmalısınız:

  • Bağlantılar için alt çizgi kullanın, ancak başka şeyler için kullanmayın. Bağlantıların altını çizmek istemiyorsanız, en azından onları başka bir şekilde vurgulayın. Ne oldukları belli olsun kimse onların ne işe yaradığını bulmak için zaman harcamasın.
  • Üzerine gelindiklerinde/odaklanıldıklarında bir şekilde etkinleştirildiklerinde biraz farklı bir şekile girmelerini sağlayın. Sayfanıza hem hareket katmış olursunuz.

Varsayılan stiller, aşağıdaki CSS özellikleri kullanılarak kapatılabilir/değiştirilebilir:

  • color metin rengi için.
  • cursor fare işaretçisi stili — çok iyi bir nedeniniz yoksa bunu kapatmamalısınız.
  • outline Ana hat, kullanışlı bir erişilebilirlik yardımcısıdır, bu yüzden kapatmadan önce dikkatlice düşünün.

Not: Bağlantılarınızı biçmlendirmek için sadece yukarıdaki özelliklerle sınırlı değilsiniz — istediğiniz herhangi bir özelliği kullanmakta özgürsünüz. Sadece çok abartmamaya çalışın!

Bağlantıların stilini belirleme

Şimdi varsayılan durumlara biraz ayrıntılı olarak baktık, tipik bir bağlantı stilleri kümesine bakalım.

Başlangıç olarak boş kural kümelerimizi yazacağız:

a {

}


a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}

Bu sıra önemlidir, çünkü bağlantı stilleri birbiri üzerine inşa edilir, örneğin ilk kuraldaki stiller sonraki tüm stillere uygulanır ve bir bağlantı etkinleştirildiğinde, genellikle üzerine de gelir. bunları yanlış sıraya koyarsanız ve her kural setinde aynı özellikleri değiştirirseniz, işler beklendiğiniz gibi çalışmayacaktır. "LaV Fena HAlde sıcak" kelimesini anımsatıcı olarak kullanabilirsiniz.

Şimdi bunu doğru bir şekilde şekillendirmek için biraz daha bilgi ekleyelim:

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437A16;
}

a:focus {
  border-bottom: 1px solid;
  background: #BAE498;
}

a:hover {
  border-bottom: 1px solid;
  background: #CDFEAA;
}

a:active {
  background: #265301;
  color: #CDFEAA;
}

Ayrıca, yazdığımız CSS'i uygulamak için örnek HTML kodunu aşağıda sağlayacağım:

<p><a href="#">Mozilla Firefox</a>, <a href="#">Google Chrome</a>, ve
<a href="#">Microsoft Edge</a> gibi çeşitli tarayıcılar mevcuttur.</p>

İkisini bir araya getirmek bize şu sonucu verir:

Peki burada ne yaptık? Bu kesinlikle varsayılan stilden farklı görünüyor, ancak yine de kullanıcıların neler olup bittiğini bilmesi için yeterince tanıdık bir deneyim sağlıyor:

  • İlk iki kural burada tartışmak için önemli değil.
  • Üçüncü kural a, metnin altındaki varsayılan çizgiden ve odak çerçevesinden kurtulmak için seçiciyi kullanır(Her halükarda tarayıcılara göre değişir) ve her bağlantıya küçük bir miktar dolgu ekler — bunların tümü daha sonra netleşecektir.
  • Daha sonra, ziyaret edilmeyen ve ziyaret edilen bağlantılarda birkaç renk varyasyonu ayarlamak için a:link ve a:visited sözde sınıf seçicilerini kullanarak her ikisi durum için de farklı ayarlamalar yapabiliriz.
  • Sonraki iki kural ile a:focus ve a:hover sözde sınıfları ile odaklanma ve üzerinde bulunma durumları için farklı alt çizgi ve arka plan renkleri ayarlıyoruz. Burada dikkat edilmesi gereken iki nokta vardır:
    • Alt çizgi border-bottom kullanılarak oluşturuldu, text-decoration ile değil — bazı insanlar bunu tercih ediyor çünkü birincisi ikincisinden daha iyi stil seçeneklerine sahip ve biraz daha aşağıdan çiziliyor ve bu yüzden altı çizilen kelimenin altlarını kesmiyor.
    • border-bottom  niteliğine 1px solid değeri renk değeri girilmeden tanımlanmıştır. Bu sayede kenarlığın öğenin metniyle aynı rengi almasını sağladık. Bu metnin farklı renkleri alacağı durumlarda oldukça faydalıdır.
  • Son olarak a:active sözde sınıfı ile etkinleştirilen bağlantılara ters renk şeması vererek bir şeylerin gerçekleşmek üzere olduğunu netleştirmek için kullanışlıdır!

Aktif öğrenme: Kendi bağlantılarınızın stilini belirleyin

Bu aktif öğrenme oturumunda bağlantıların gerçekten harika görünmesini sağlamak için boş kuralar setimizi almanızı ve kendi beyanlarınızı eklemenizi istiyoruz. Hayal gücünüzü kullanın, ufkunuzu aşın. Yukarıdaki örneğimiz kadar havalı ve en az işlevsel olan bir şey bulabilceğinizden eminiz.

Bir hata yaparsanız, her zaman Sıfırla düşmesini kullanarak sıfırlayabilirsiniz. Zorlandığınızda yukarıda gösterdiğimiz örneği eklemek için Çözümü göster düşmesini kullanın.

Bağlantılara simgeler eklemek

Yaygın bir uygulama, bağlantının ne tür içeriğe işaret ettiğine dair daha fazla gösterge sağlamak için bağlantılara simgeler eklemektir. Buna örnek; bizim kullandığımız, bir kutunun içerisinden çıkan bir ok gibi görünen bağlantı simgesidir — Örnek olabilecek simgeler için icons8.com.

Bize istediğimiz etkiyi verecek bazı HTML ve CSS'ese bakalım. İlk olarak, stil vermek için bazı basit HTML'ler:

<p>Hava Durumu hakkında daha fazla bilgi için <a href="#">hava durumu sayfamızı</a> ziyaret edin,
ayrıca <a href="http://#">Wikipedia'da hava durumu</a>, veya <a href="http://#">Extreme Science</a>'daki hava durumuna bakın.</p>

Ardından CSS:

body {
  width: 300px;
  margin: 0 auto;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:focus, a:hover {
  border-bottom: 1px solid;
}

a:active {
  color: red;
}

a[href*="http"] {
  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}

Peki burada neler oluyor? Daha önce baktığınız bilgilerin aynısı olduğu için CSS'nin çoğunu atlayacağız. Bununla birlikte, son kural ilginçtir — burada, son makaledeki liste öğelerinde özel madde işaretlerini işlediğimize benzer bir şekilde harici bbağlantılara özel bir arka plan görüntüsü ekliyoruz. ancak bu sefer uzun tanımların yerine background kısa tanımını kullanıyoruz. Eklemek istediğimiz görüntünün yolunu belirliyoruz, no-repeat ile sadece bir kopyasının olmasını istediğimizi belirtip, konumunu %100 ile metinin sağ tarafında ve üstten 0 piksel olmasını sağlıyoruz.

background-size niteliğini bağlantının yanında gösterilmesini istediğimiz simgenin boyutunu belirtmek için kullanırız. Daha büyük bir simgeyi kullanarak duyarlı web tasarımları oluşturabilmek için faydalı olacaktır. Ancak bu yalnızca IE9 ve sonraki sürümlerde çalışır, bu nedenle bu eski tarayıcıları desteklemeniz gerekiyorsa, yalnızca görüntüyü yeniden boyutlandırmanız ve olduğu gibi eklemeniz gerekir. Modern tarayıcıların işlevselliğini düşürmek iyi midir?

Son olarak, padding-right niteliği ile arka plan resmnin görünmesi için bağlantıların sağına boşluk bıraktık böylece simgemiz sonrasında gelen metinlerle örtüşmedi.

Son bir söz, sadece harici(başka sitelere olan) bağlantıları nasıl seçtik? HTML  bağlantıları yazarken sadece dış bağlantılar için mutlak URL'eleri kullanmalısınız — kendi siteniz içerisinde göreceli bağlantıları tercih etmeniz faydalı olacaktır. Bu sayede "http" metni yalnızca harici/dış bağlantılarda(ikinci ve üçüncüde olduğu gibi) tanımlanmalıdır ve bu şekilde nitelik şeciciyle(a[href*="http"]) href  öğemizdeki "http" ile başlayan bağlantıları seçebiliriz.

İşte bu kadar — yukarıdaki aktif öğrenme bölümünü tekrar gözden geçirmeyi ve bu yeni tekniği denemeyi deneyin!

Not: href değerleri garip görünebilir — bu örneklerde hiçbir yere gitmeyen sahte bağlantılar kullandık. Bunun nedeni, gerçek bağlantılar kullanırsak <iframe> içeriğindeki canlı örnekte farklı bir siteye gideceğiniz ve örneği kaybetmiş olacağınızdandır.

Not: Henüz arka planlar ve duyarlı web tasarımına aşina değilseniz endişelenmeyin; bu konular farklı yerlerde açıklanmıştır.

Bağlantıları buton olarak biçimlendirmek

Bu derste şu ana kadar keşfettiğiniz araçlar başka şekillerde de kullanılabilir. Örneğin, fareyle üzerine gelme gibi durumlar yalnızca bağlantıları değil, birçok farklı öğeyi biçimlendirmek için de kullanılabilir — parafrafların, liste öğelerinin veya diğer şeylerin fareyle üzerine gelme durumunu vurgulamak isteyebilirsiniz.

Ek olarak, bağlantılar genellikle belirli durumlarda düğmeler gibi görünecek ve davranacak şekilde biçimlendirilmiştir — bir web sitesi gezinme menüsü genellikle bağlantıları içeren bir liste olarak işaretlenir ve bu bir dizi kontrol düşmesi veya sekme gibi görünecek şekilde kolayca biçimlendirilebilir. Nasıl olduğunu keşfedelim.

İlk olarak, biraz HTML:

<ul>
  <li><a href="#">Ana Sayfa</a></li><li><a href="#">Pizza</a></li><li><a href="#">Müzik</a></li><li><a href="#">Wombatlar</a></li><li><a href="#">Türkiye</a></li>
</ul>

ve birazda CSS:

body,html {
  margin: 0;
  font-family: sans-serif;
}

ul {
  padding: 0;
  width: 100%;
}

li {
  display: inline;
}

a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 19.5%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: black;
}

li:last-child a {
  margin-right: 0;
}

a:link, a:visited, a:focus {
  background: yellow;
}

a:hover {
  background: orange;
}

a:active {
  background: red;
  color: white;
}

Bu bize şu sonucu verir:

En ilginç kısımlara odaklanarak burada neler olduğunu açıklayalım:

  • İkinci kural; <ul>  öğemizin varsayılan padding değerini sıfırlar ve genişliğini ebeveyni olan <body> tamamını kullanmasını söyler.
  • <li> öğeleri normal davranışlarında blok öğeler olarak davranırlar(göz atmak için CSS kutu tipleri'ne bakın), yani kendi satırlarına sahip olacak şekilde davranırlar. Fakat biz burada display niteliği ile <li> öğelerimizin satır içi öğeler olacak şekilde tanımlıyoruz ve bu şekilde <li> öğelerimiz aynı satır içerisinde yan yana durabiliyorlar.
  • Dördüncü kuralımız, {htmlelement("a")}} öğemizi biçimlendiren en karmaşık kuralımızdır. Hadi adım adım inceleyelim
    • Önceki örneğimizdeki gibi varsayılan text-decoration ve outline niteliklerimizi kapatıyoruz ki görünüşü bozmasınlar
    • Daha sonra display niteliğimize inline-block değerini atayarak <a> öğemizin satır içi öğe gibi davranıp diğer kardeşleriyle aynı satırda bulunmalarını ve aynı zamanda bir blok öğe gibi davranıp boyutlandırılabilmesini sağlıyoruz.
    • Şimdi boyutlandıralım! <ul> öğemizin tüm içeriğini doldurmak istiyoruz. Bu yüzden her düğme arasında küçük bir kanar boşluğu bırakıyoruz(ancak sağ kenarda bir boşluk bırakmayacağız) ve hepsinin aynı boyutta olmasını istediğimiz 5 adet butonumuz olduğu için her birinin genişliğini %19,5 ve sağdan kenar boşluğu olarakda %0,625 olarak tanımlıyoruz. Tüm bu genişliklerin toplamının %100,625 olduğunu farkadeceksiniz ve buda son düğmenin taşmasına neden olacaktır fakat bir sonraki kuralda son <a> öğemizin sağdaki boşluğunu sıfırladığımız için butonlarımız <ul> öğemizin içerisine tam olarak oturacaktır.
    • Son üç beyan oldukça basittir ve sadece görsel amaçlıdır. Metinleri bağlantı butonları içerisinde yatay olarak ortaladık ve line-height niteliğine 3 değerini tanımlayarak metinlerimizi buton içerisinde dikey olarakta hizaladık ve metin rengini siyah olarak tanımladık.

Not: HTML'deki liste öğelerinin hepsinin birbiriyle aynı satıra yerleştirildiğini fark etmiş olabilirsiniz — bu yapılır çünkü satır içi blok öğeleri arasındaki boşluklar / satır kesmeleri, sözcükler arasındaki boşluklar gibi sayfada boşluklar oluşturur ve bu tür boşluklar yatay gezinme menüsü düzenimizi bozacaktır. Bu yüzden boşlukları kaldırdık. Bu sorun(ve çözümleri) hakkında daha fazla bilgiyi satır içi blok öğeleri arasındaki boşluklarla savaşma bölümünde bulabilirsiniz.

Becerilerinizi tes edin!

Bu dersimizin sonuna geldik ve aktif öğrenme bölümlerimizde zaten bazı beceri testleri yaptınız, ancak ileriye dönük en önemli bilgileri hatırlıyor musunuz? Dersin sonunda bu bilgileri sakladığınızı doğrulamak için bir değerlendirme bulabilirsiniz - bkz. Bir topluluk okulunun ana sayfası tasarımı.

Bu değerlendirme, bu dersin tartışılan tüm bilgilerini test eder, bu nedenle bir sonraki makaleye geçmeden önce okumak isteyebilirsiniz.

Özet

Umarız bu derste, bağlantılar hakkında bilmeniz gereken her şeyi size sağlamıştır — şimdilik! til metni dersimizdeki son makale, web sitelerinizde özel yazı tiplerini veya daha iyi bilindiği şekilde web yazı tiplerini nasıl kullanacağınızı ayrınılarıyla anlatıyor.

Bu ünitede