Bağlantılar webi web yapan şeyler – dolayısıyla oldukça önemliler. Bu yazıda bir metni bağlantı haline dönüştürmek için gerekli olan yazım kuralları ve önemli örnekler üzerinde duracağız.
Bağlantı – Link nedir?
Bağlantılar yani linkler Web’in ortaya attığı en önemli buluşlardan birisi. Bu özellik Web’in başlangıcından beri var ve webi web yapan şeyler. Bağlantılar bir belgeyi başka bir belgeye veya kaynağa bağlar, veya bir belgenin bir bölümüne köprü oluşturur, uygulamaların spesifik bir adresten ulaşılmasını sağlar. Neredeyse tüm içerik türleri bir bağlantıya dönüştürülebilir ve tıklandığında tarayıcının başka bir adrese gitmesini sağlar (URL).
Not: URL, HTML sayfası, metin dosyası, görüntü, video veya ses dosyaları ya da web üzerinde yaşayan herhangi bir kaynağa işaret edebilir. Eğer tarayıcı işaret edilen kaynağı nasıl açacağını veya göstereceğini bilmiyorsa bize bu dosya ile ne yapmak istediğimizi sorar – bu durumda bu işlem dosyayı açacak uygulamaya devredilir. Ya da dosyanın indirilmesini sağlar.
Örneğin BBC sitesinin anasayfasında bir çok link bulunur. Bu linkler farklı haberlere bağlantı kurduğu gibi sitenin başka özelliklerini de aktive eder – örneğin bir giriş formunun gösterilmesini veya arama yapmamıza olanak sağlar.
Bir bağlantının anatomisi
Bir metni <a> elementi ile sararak basit bir bağlantı oluşturabiliriz. <a> öğesinin href özelliği işaret edilen adresi bildirir. Bu adres aynı zamanda link referansı veya hedef olarak da isimlendirilir.
<p>I'm creating a link to
<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>Yukarıdaki örnek aşağıdaki sonucu verir:
I’m creating a link to the Mozilla homepage.
title öznitelliği ile yardımcı bilgi ekleme
Bağlantıya ekleyebileceğimiz diğer bir öznitelik: title. Bu özellik link hakkında ekstra bilgiyi içerir. Örneğin ne tür bir link olduğu, hedef sayfada ne tür bilgilerin olduğu veya nelere dikkat edilmesi gerektiği gibi bilgiler verilebilir.
<p>I'm creating a link to
<a href="https://www.mozilla.org/en-US/"
title="The best place to find more information about Mozilla's
mission and how to contribute">the Mozilla homepage</a>.
</p>Yukarıdaki örnekte title özelliği bağlantımıza bir açıklama ekledi. Aşağıda bu örneğin çıktısını görmelisiniz. Farenizi link üzerine getirin:
I’m creating a link to the Mozilla homepage.
Not: Bir linkin title özelliği ancak fare ile üzerine gelindiğinde ortaya çıkar. Bu şu demek, klavye ile sayfalar arasında gezinen veya dokunmatik ekran kullanan ziyaretçileriniz bu bilgileri görmekte zorlanacaklardır. Eğer title bilgisi gerçekten site için önemli ise, bu bilgiyi başka bir şekilde sunmanız daha doğru olur. Örneğin normal bir metin ile.
Aktif öğrenme: kendi bağlantımızı oluşturalım
Bir HTML dökümanı oluşturarak metin editörünüzde açın. Başlangıç olarak bu dosyayı kullanabilirsiniz.
- HTML body öğesinin içine bir veya daha fazla paragraf ekleyin
- Bazı metinleri linke dönüştürün
- Linklerinize title özelliği ekleyin
Blok seviyesi linkleri
Yukarıda bahsettiğimiz gibi, neredeyse tüm içerik türleri bağlantıya dönüştürülebilir. Buna blok tipi öğeler de dahildir. Eğer sayfanızdaki bir görseli linke dönüştürmek isterseniz, bu görseli <a> öğesi ile sarmanız ve bir hedef vermeniz yeterli olacaktır.
<a href="https://www.mozilla.org/en-US/">
<img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage">
</a>Not: Görseller ile ilgili daha fazla özelliği sonraki yazılarımızda göreceksiniz.
URL ve dosya adreslerine kısa bir giriş
Bağlantı hedeflerini daha iyi anlamak için öncelikle URL ve dosya adreslerini anlamamız gerekir. Yazının bu bölümünde url ve dosya adreslerine bakacağız.
URL, veya Uniform Resource Locator, Web’de bir şeyin nerede bulunduğunu tanımlayan bir metindir. Örneğin bu sitenin URL’si https://koddla.com/.
URL’ler dosyaları bulmak için dosya adreslerini kullanır. Dosya adresleri de tahmin edeceğiniz gibi bir dosyanın nerede olduğunu belirtir. Aşağıdaki klasör yapısına bakalım:
Bu önrekteki kök dizin creating-hyperlinks dizinidir. Kök dizinin içinde index.html ve contacts.html dosyaları bulunuyor. Gerçek bir websitesinde index.html ana veya giriş sayfamız olacaktı.
Kök dizininde ayrıca iki klasörümüz var — pdfs ve projects klasörleri. Bu klasörlerde tek dosya bulunuyor — sırasıyla, bir pdf (project-brief.pdf) ve index.html dosyası. Farkettiyseniz bir projede birden fazla index.html dosyasına sahip olabilirsiniz. Tabi bu dosyaların farklı klasörlerde bulunmaları koşuluyla. Diğer index.html proje bilgileri ile ilgili bir bölümün giriş sayfası olabilir.
- Aynı klasöre link: Eğer
index.html(kök dizindekiindex.html) ile aynı dizindeki bir sayfaya link vermek istersek, örneğincontacts.htmlsayfasına, sadece sayfa adını yazmamız yeterli olur. İki dosyanın da aynı klasörde olması nedeniyle başka bir şey eklememize gerek yok. Örneğin:
<p>Want to contact a specific staff member? Find details on our <a href="contacts.html">contacts page</a>.</p>
- Alt klasörlere link: Eğer
index.html(kök dizindekiindex.html) dosyamızdanprojects/index.htmlsayfasına bir link vermek istersek, dosya adından önce klasör adını (projects) belirtmemiz gerekir. Bunu yapabilmek için klasör adını yazıp sonrasında bir eğik çizgi ekliyoruz ve link vermek istediğimiz sayfayı yazıyoruz:
<p>Visit my <a href="projects/index.html">project homepage</a>.</p>- Üst klasöre link:
projects/index.htmldosyasındanpdfs/project-brief.pdfdosyasına link vermek istersek öncelikle bir seviye yukarı çıkmak gerekir. Ancak sonrapdfklasörüne girebiliriz. Bir üst seviyeye çıkmak için ise iki nokta kullaırız —..— . Dolayısıyla URL aşağıdaki gibi görülür:
<p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>Note: Bu özellikleri birden fazla kullanabilirsiniz. Örneğin: ../../../complex/path/to/my/file.html.
Belge kısımları
HTML dökümanının tamamı yerine bazı kısımlarına da link verebiliriz. Bunu yapabilmek için link vermek istediğimiz elemente id özniteliği tanımlamamız gerekir. Spesifik bir başlığa link vermek mantık olacaktır. Dolayısıyla aşağıdakine benzer bir öğe oluşturmamız gerekir:
<h2 id="Mailing_address">Mailing address</h2>Bu id‘ye link verebilmek için URL’de hashtag (#) sembolünü kullanırız:
<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>Hatta aynı sayfa içindeki bir bölüme link vermek için de bu yöntemi kullanabiliriz:
<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>Mutlak ve göreli URLler
Bu iki terim Web’de karşınıza çok fazla çıkacak: mutlak URL ve göreli URL:
mutlak URL: Bir mutlak adrese işaret eden URL’lerdir. Adres protokol ve etki adının tamamını içerecek şekilde verilir. Örneğin https://www.example.com sitesindeki projects klasöründe bulunan index.html sayfasına link vermek istersek https://www.example.com/projects/index.html adresini kullanırız. (Hatta sadece https://www.example.com/projects/ bile yazabiliriz, çünkü çoğu web sunucusu dosya adı verilmediğinde varsayılan olarak index.html‘i yükler.)
Mutlak URL nerede olursa olsun her zaman aynı adrese işaret eder.
göreli URL: link verilen dosyaya göre bir adrese işaret eder – daha önceki bölümlerde yaptığımız gibi. Örneğin https://www.example.com/projects/index.html adresinden aynı klasördeki bir adrese link vermek istersek — örneğin project-brief.pdf dosyasına— ekstra bir bilgi yazmamız gerekmez, sadece dosya adını yazarız. Eğer PDF dosyası bir alt klasörde olsaydı, o zaman klasör adı ve yatık çizgi ile adresi yazmamız gerekirdi – pdfs/project-brief.pdf (Bu bağlantı tüm adresi yazdığımız bağlantı ile aynı adresi hedefler: https://www.example.com/projects/pdfs/project-brief.pdf.)
Ancak, göreli URL’ler farklı konumlarda farklı hedefleri işaret edebilir — örneğin index.html dosyasını projects klasörünün içerisine taşırsak pdfs/project-brief.pdf göreli adresi artık https://www.example.com/projects/pdfs/project-brief.pdf adresini hedefler.
Tabiki link adresini değiştirmek dosyanın konumunu değiştirmeyecektir. Dolayısıyla yazdığımız bağlantı var olmayan bir adresi işaret etmiş oldu. Bu yüzden dikkatli olmamız gerekir.
Uygulama örnekleri
Net link içerikleri kullanın
Yukarıda gördüğünüz gibi link oluşturmak oldukça kolay. Ancak link oluşturmak yeterli değil. Aynı zamanda linkleri tüm kullanıcılar için ulaşılabilir yapmalıyız – ziyaretçilerin kullandığı uygulamalar farkettirmeksizin. Örneğin:
- Tablet kullanıcıları bir linkten diğerine zıplamayı sever, dolayısıyla linklerin hangi bağlamda kullanıldığına dikkat etmezler.
- Arama motorları link içeriklerini/kelimelerini hedeflenen adresleri indexlemek için kullanır. Dolayısıyla hedeflenen adresi doğru bir şekilde açıklayacak adresler kullanmak iyi bir fikir olacaktır.
- Görsel kullanıcılar her kelimeyi okumaktansa genel bir okuma yapmayı tercih ederler. Eğer gözlerine takılan bir şey olursa – linkler gibi – duraklarlar. Bu sebeple açıklayıcı linkler kullanmak iyi olacaktır.
Örneklere bakalım
İyi bir link metni: Download Firefox
<p><a href="https://firefox.com/">
Download Firefox
</a></p>Kötü bir link metni: Firefoxu indirmek için buraya tıklayın
<p>Firefoxu indirmek için
<a href="https://firefox.com/">
buraya tıklayın
</a></p>
Diğer ipuçları:
- URL’yi metnin içerisinde tekrarlamayın — URLler kötü görünür ve okunması da görünümünden daha kötüdür. Ekran okuyucu kullanan ziyaretçileriniz içinURL’ler harf harf okunur.
- Link metninde “bağlantı” gibi kelimeler kullanmaktan kaçının. Ekran okuyucuları ziyaretçiye bir bağlantı olduğunu zaten söylüyor.
- Bağlantı metinlerinizi olabildiğinice kısa tutun.
- Aynı metin ile farklı adreslere link göndermemeye çalışın. Örneğin “buraya tıklayın”, “tıklayın” gibi metinler ekran okuyucuları için sorunlu olabilir.
Mümkün oldukça göreli linkler kullanın
Yukarıda anlatılanlardan mutlak link kullanmanın iyi bir fikir olduğunu düşünmüş olabilirsiniz. Ne de olsa sayfanın yerini değiştirmek göreli URL’de olduğu gibi mutlak URL’yi kırık hale getirmeyecek. Ancak aynı websitesi içerisinde göreli adresler kullanmak daha doğru olacaktır. Başka bir siteye link göndermek isterseniz o zaman mutlak URL kullanabilirsiniz:
- En başta, yazdığınız kodu taramayı kolaylaştırır — göreli URLler mutlak URL’lere göre kısadır, böylece kodunuz kolay okunur.
- İkinci olarak göreli URL kullanmak daha verimlidir. Mutlak URL kullandığınızda tarayıcı önce DNS sorgusu gönderir ve domainin yerini öğrenmeye çalışır. — daha fazla bilgi için web nasıl çalışır makalesine bakabilirsiniz. Sunucuyu bulduktan sonra hedeflenen dosyayı ister. Göreli URL kullanırsak tarayıcı DNS sorgusunu atlar, çünkü bulunduğu sunucuda bir dosya aradığını bilir. Mutlak URL kullandığınızda tarayıcınız için ekstra iş yaptırmış olursunuz ve bu da verimi azaltır.
HTML olmayan belgeler link – uyarılarda bulunun
HTML olmayan bir dosyaya link vermek istersek (PDF veya Word dosyası gibi ya da video veya ses dosyası gibi beklenilmeyen bir dosya), ziyaretçileri uyarmalısınız.
Örneğin:
- Düşük bağlantı hızına sahip bir ziyaretçi birkaç MB’lık bir indirme işlemi başlatmayı istemeyebilir.
- Eğer bilgisayarınızda Flash yüklü değilse, aniden Flash isteyen bir ekranın açılmasını istemezsiniz.
Peki bunları nasıl göstermeliyiz? Aşağıdaki örneklere bakalım
<p><a href="https://www.example.com/large-report.pdf">
Raporu indirin (PDF, 10MB)
</a></p>
<p><a href="https://www.example.com/video-stream/" target="_blank">
Videoyu izleyin (video yeni pencerede açılır, HD kalitede)
</a></p>
<p><a href="https://www.example.com/car-game">
Oyuna başlayın (Flash gerekir)
</a></p>İndirme linkleri için download özniteliğini kullanın
Eğer bir indirme bağlantısı oluşturuyorsanız download özniteliği ile varsayılan dosya ismi verebilirsiniz. Aşağıdaki örnek Firefox için indirme linkini gösteriyor:
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
download="firefox-latest-64bit-installer.exe">
Download Latest Firefox for Windows (64-bit) (English, US)
</a>Aktif öğrenme: menü linki oluşturun
Örneğimizde bir menü oluşturmak istiyoruz. Bu herhangi bir websitesi için kullanılan bir özelliktir – her sayfada benzer şekilde konumlandırılmış bir sayfa yapısı ile ziyaretçi farklı içeriklere yönlendirilir.
Aşağıdaki dört dosyayı bilgisayarınıza indirin ve hepsini aynı klasöre yerleştirin.
Sonra:
- Bir sıralanmamış liste ekleyerek her maddeye bir link ekleyin. Linklerin açıklamasını sayfa isimleri olarak verin.
- Oluşturduğunuz menüyü her sayfaya kopyalayın
- Kopyaladığınız sayfa için o sayfaya verilen link adresini kaldırın.
Son görünüm aşağıdakine benzer olmalı:
Not: Eğer bu örnekte zorluk çekerseniz navigation-menu-marked-up adresine gidip bitmiş haline bakabilirsiniz.
E-mail linkleri
Tıklanıldığında bir email oluşturan linkler de hazırlayabiliriz. Bunun için <a> öğesinde mailto: URL şemasını kullanmamız gerekir:
<a href="mailto:nowhere@mozilla.org">Bir yere mail gönderin</a>
Bu örnek şöyle görünecek: Bir yere mail gönderin.
Hatta mail adresi yazmak bile opsiyoneldir. Mail adresini unutup href içine sadece “mailto:” yazarsanız boş bir mail kutusu açılır. Bu kullanım ziyaretçilerin sayfanızı arkadaşlarına paylaşmasını istediğiniz durumlarda yararlı olabilir.
Detay ekleme
Email adreslerinin yanında başka bilgiler de ekleyebilirsiniz. Hatta standart mail özelliklerini de mailto‘ya ekleyebilirsiniz. En çok kullanılan özellikler “başlık”, “kk” ve “içerik”tir:
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
Send mail with cc, bcc, subject and body
</a>Aşağıdaki örneklerde farklı mailto kullanımlarını görebilirsiniz:
- mailto:
- mailto:nowhere@mozilla.org
- mailto:nowhere@mozilla.org,nobody@mozilla.org
- mailto:nowhere@mozilla.org?cc=nobody@mozilla.org
- mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject
Bilgilerinizi test edin
Bu yazının sonuna geldiniz. Bu yazıdaki en önemli bilgiyi hatırlayabiliyor musunuz?
Özet
Linkler bu kadar, en azından şimdilik. Bu konuya linklere stil vermek istediğimiz zaman tekerar geri döneceğiz.