HTML Bağlantılar

Sayfa içeriği

Bağlantı kavramı

Bağlantı (Link) genellikle başka bir sayfanın adresine işaret eden bir metindir, üzerine tıkladığında tarayıcı seni ona görünecektir.
Ayrıca, bağlantı bir dosyaya veya programa işaret edebilir ve üzerine tıkladığında tarayıcı seni indirmek isteyip istemediğini sorar.

Bağlantı türleri

Bağlantıyı metin olarak ekleyebilirsin, tıkladığında verilen bağlantıya veya bir dosya indirmeye yönlendirileceksin.
Bağlantıyı buton olarak ekleyebilirsin, tıkladığında verilen bağlantıya veya bir dosya indirmeye yönlendirileceksin.
Bağlantıyı resim olarak ekleyebilirsin, tıkladığında verilen bağlantıya veya bir dosya indirmeye yönlendirileceksin.

Sayfaya bir bağlantı eklemek

Genelde, sayfada bir bağlantı görüntülemek için <a> etiketini <a href="https://www.k-html.com">HTML öğren </a> olarak kullanılıyor.

HTML öğren kelimenin yerine görünmek istediğin metini ekleyebilirsin.
Sayfada görünmek istediğin bağlantı'yı https://www.k-html.com Bağlantı yerine ekleyebilirsin.

Aşağıdaki örnekte, paragrafa bir bağlantı ekledim, üzerine tıklandığında, kullanıcı k-html.com'daki ana sayfaya yönlendiriliyor.

<p><a href="https://www.k-html.com"> k-html.com'a git </a></p>
<!-- "k-html.com'a git" metine tıklarsan https://www.k-html.com bağlantıyı açacaktır. -->

kod dene

Bağlantının üzerine geldiğinde ipucu göstermek

Bağlantının üzerine geldiğinde bir ipucu göstermek istiyorsan, title özelliğini <a> etiketine ekleyebilir ve değeri olarak görüntülemek istediğin ipucunu iletebilirsin.
Aşağıdaki örnekte, üzerine geldiğinizde görünen bir bağlantı ipucu ekledim.

<p><a href="https://www.k-html.com" title="k-html.com'a git">k-html</a>HTML için ihtiyacınız olan her şeyi size öğretir. </p>

kod dene

Belirli bir e-postaya bağlantı eklemek

Sayfaya link eklemek ve üzerine tıkladıktan sonra kullanıcıyı mail için varsayılan uygulamaya yönlendilirmesi ve gelen maili otomatik olarak seçmesi istiyor musun?

Kendine "Bunu nasıl yapacağım" diye mi soruyorsun? Peki, ilkte mailto: kelimesini ve ardından kullanıcının href niteliğinin değeri olarak almasını istediğin e-postayı ekle.

mesela mailto:[email protected] eklerken kullanıcı üzerine tıkladığında direkt olarak [email protected] e-postasında mesaj göndermeye gidecektir. Denemek için burayı tıkla

Aşağıdaki örnekte, tıklandığında kullanıcının cihazındaki e-posta uygulamasını açan ve postanın gönderileceği tarafı seçen bir bağlantı ekledim.

<p><a href="mailto:[email protected]">E-posta gönder</a></p>
    <!-- "E-posta Gönder" metnine tıkladığında, kullanıcının cihazında uygulama açılacak ve "[email protected]"
 e-postası, postanın gönderileceği hedef olarak ayarlanacaktır. -->

kod dene

Belirli sayfa öğelerine bağlantılar

Kullanıcıyı aynı sayfadaki belirli bir öğeye veya başka bir sayfadaki belirli bir öğeye yönlendiren bir bağlantı eklemek istiyorsan, öğeye id verebilir ve ardından kullanıcıyı o öğeye yönlendirmek istediğin bağlantıyı verebilirsin.

Sana biraz daha açıklayacağım. Sayfanın en üstüne kaydırırsan bu derste sayfanın içeriğini ve bölümleri içeren bir bölüm bulacaksın, Herhangi bir bölüme tıklarsan hemen onu yönlendirileceksin, Bu basit bir açıklama ve üzerinde çalışmanı gerek yok çünkü sonunda her şeyi anlayacaksın.

Biraz odaklan ve anlamadığın her şeye odaklan ve anlamaya çalış. Anlamasan bile bu çok normal çünkü henüz tam olarak anlatamadım..
Sabırlı ol her şeyi anlamaya çalışmanı gerekiyor, daha sonra anlamadıysan https://chat.k-html.com'ı kullanabilirsin. genel olarak aklını takılan herhangi bir soruyu insanlara sormak için bir sitedir.
Ben bunu herkes için yüzlerce kez dedim "bu başlangıç", bir şey anlamadıysan panik yapma, sadece anlamaya çalışmanı yeterli ve sonra anlamadıysan, telefonunu veya defterini bir not al ve anlamadığın her şeyi yaz ve tüm kursu bitirdikten sonra anlamadığın dersi yeniden anlamaya çalış ve Eğer anlamadıysan, bu durumda insanlara soru sormak için https://chat.k-html.com adresinde site kullanabilirsin ve genellikle 48 saat içinde cevaplanırlar.
galiba farklı cevaplar alacaksın benden ve başka kişilerden, ve defterde anlamadığın her şeyi bir kereden fazla anlamaya çalış, kendini anlayacaksın ve pratikle daha çok anlayacaksın ^_^.

Ben de bir konuda yardımcı olmak istersen buradayım ama umarım sorunu sormadan önce dersi anlamaya çalışırsın.
Anlamadıysan başka bir kursa gitmeni tavsiye etmiyorum çünkü her dersin anlatım yöntemi var ve anlamadıysan https://chat.k-html.com adresinden soruyu sorabilirsin.

Not: bu link bu sayfa linkidir "https://www.k-html.com/2021/05/html-baglantlar.html"

Aşağıdaki örnekte, tıklandığında kullanıcıyı bir sayfadaki belirli bir öğeye götüren bir bağlantı koydum.

<a href="https://www.k-html.com/2021/05/html-baglantlar.html#ornek>örnek kısmı git</a>

Sana başka bir örnek vereceğim..
Bu kodda

<a href="https://www.k-html.com/2021/05/html-baglantlar.html#ornek>örnek kısmı git</a>

Daha iyi anlayabilmeni için etiketlerin ne olduğunu ayrı bir derste açıklayacağım ve bu kod üzerindeki açıklamayı tamamlayacağım.

Seçtiğin makale bağlantısından sonra bir # olduğunu ve ardından ornek kelimesini ve herhangi bir şeyle değiştirebileceğini unutma.

Peki, bu kodu bir makaleye koyduktan sonra, kullanıcı belirtmek istediğin yere nasıl gidecek?

Bu işlemle kullanıcının bağlantıya tıkladıktan sonra nereye gideceğini belirtmelisin.
Önceki kodu girdikten sonra, bu işlem aracılığıyla daha önce yüzü koda eklemiş olmanız gerekir.

Bu kod üzerinden kullanıcının hedefini seçiyorsun (<h2 id="ornek">) ve dilersen başka bir başlık kullanabilirsin ve bu kodu girdiğin yerde kullanıcı daha önce belirttiğin yere gidecektir.

H2 Daha önce anlamlarını açıklamıştım ama yine kısaca açıklayacağım..
H etiketi iki sayfa başlığı yerleştirmek içindir ve başlığın boyutu etiketin yanındaki sayı ile belirlenebilir, örneğin, h1 en büyük ve en küçük h6 ve h3, başlığın ortalama boyutudur.

id ne olduğunu CSS ve Javascript öğrendikten sonra anlarsın.

Parantez içindeki ornek kelimesi daha önce oluşturduğun semboldür.

İlk kodu eklemesen bile kod çalışacaktır çünkü o sadece bir direktiftir.

Sahte bağlantı eklemek

Sayfayı tasarlarken, tasarımcının sayfaya yerleştirilen her bağlantı için href özelliğinin değerini belirtmesine gerek yoktur.

Normalde bağlantı metninin tıklanabilir normal bir bağlantı gibi görünmesi için href özelliğin değeri olarak # sembolünü koyabilirsin ve ardından bu tarayıcıya kullanıcıyı hiçbir şeye yönlendirmemesini söylemek gibidir.

Aşağıdaki örnekte iki bağlantı ekledim, ilki normal link olarak çıkıyor fakat üzerine tıkladığında hiçbir şey olmuyor ve ikincisi link olarak görünmüyor.

<a href="#">her şey kolaydır</a>
<a>Paranın peşinden gidersen, hiçbir yolunu bulamazsın</a>

kod dene

Kullanıcıyı sayfanın en üstüne yönlendiren bir bağlantı eklemek

Açılan sayfanın en üstüne kullanıcıyı yönlendiren bir link eklemek istersen _top değerini ekleyebilirsin.

Örneğin, kullanıcının belirli bir kelimeye tıklamasını ve sayfanın en üstüne yönlendirilmesini istiyorsan, href özelliği #top değerini ekleyebilirsin.

<a href="#top">örnek yukarı</a>

örnek yukarı

Bağlantının nerede açılacağını belirlemek

Varsayılan olarak, sayfadaki bir bağlantıya tıkladığında, önceki örnekte fark ettiğimiz gibi, yeni sayfanın mevcut sayfanın yerine açıldığını görürüz.

Bağlantının nerede açılacağını belirtmek istiyorsan, target özelliğini <a> etiketine eklemeli ve ona aşağıdaki değerlerden birini vermelisin:

_self: bağlantı içeriğinin şu anda açık olan aynı sayfada açılmasını istemeni durumunda kullanabilirsin.(bu varsayılandır)
_blank: Tarayıcıda yeni bir sekme açılmasını ve bağlantı içeriğinin bu sekmede görünmesini istemeni durumunda.
_top: Bağlantı içeriğinin aynı sayfada açılmasını istiyorsan, mevcut sayfaya yerleştirilmiş örtüşen sayfaları kaldırarak.
_parent: Bağlantı içeriğinin mevcut sayfanın bulunduğu sayfanın yerine açılmasını istiyorsan.

_top ve _parent öğelerinin hedef özellik olarak ayarlandıklarında ne yaptıkları hakkında söylediğimiz hiçbir şeyi anlamamanı çok normal çünkü henüz başka bir sayfayı görüntülemek için bir sayfa tanımlamadın.
Hayatınız boyunca _top ve _parent değerlerini kullanmanı gerekmeyebilir, ancak bunlara ihtiyacın olursa, neden gerekli olduklarını ve bir sayfa içinde bir sayfa görüntülemenin ne anlama geldiğini bileceksin. Bu yüzden şimdi aralarındaki farkı anlamaya çalışma.

Aşağıdaki örnekte paragrafa bağlantı ekledim üzerine tıklandığında kullanıcı HTML öğren sitesinin ana sayfasına yönlendirilecektir.

<p><a href="https://www.k-html.com" target="_self">Geçerli pencerede (iframe) k-html.com'u açın</a> </p>
<p><a href="https://k-html.com" target="_blank">k-html.com'u yeni bir sekmede açın</a></p>
<p><a href="https://www.k-html.com" target="_top">k-html.com'u tam pencerede açın</a></p>
<p><a href="https://www.k-html.com" target="_parent">k-html.com'u üst pencerede açın (üst iframe)</a></p>

kod dene

URL'yı düğme olarak eklemek

Linki text olarak koymak yerine buton olarak koymak istersen <button> etiketini kullanarak koyabilirsin, kod dene butonlarında buton etiketi ile tasarlanmış mavi butonlara bakabilirsin.

<button onlclick="document.location='link'">metin</button>

Metin kelimesinin yerine butonda görünmesini istediğin yazıyı ekle.
link kelimesinin yerine butona tıklandığında kullanıcıyı yönlendirmek istediğin linki ekle.

Aşağıdaki örnekte buton olarak link ekledim, tıklandığında kullanıcı HTML öğren web sitesinin ana sayfasına yönlendirilecektir.

<button onclick="document.location='https://www.k-html.com'">k-html.com'a git</button>

kod dene

Bu kod JavaScript dilini kullanıyor, dolayısıyla ayrıntılı olarak açıklamaya gerek yoktur çünkü onu HTML dilinde değil, esas olarak JavaScript'te öğreneceksin.

Bağlantıyı resim olarak eklemek

Linki metin yerine resim olarak koymak istersen <a> etiketini kullanarak normal link olarak koyabilirsin ve içine tıkladığında linkini açmak istediğin resmi yerleştirebilirsin.

Özel bir derste resimlerle nasıl çalışacağını öğreneceksin, ancak şimdi bir resim koymak için <img> etiketini <img src="foto_linki"/> olarak kullandığımızı bilmeni gerekiyor.
foto_linki kelimesinin yerine görüntülenecek resmin bağlantısını ekliceksin.

Şimdi nasıl resim ekliceğini boş vermelisin ve nasıl fotoğrafa tıklarsan bir link açacağını odaklanmanı istiyorum.

Aşağıdaki örnekte, tıklandığında kullanıcıyı HTML kursundaki ilk sayfaya yönlendiren bir resim ekledim.

<a href="https://www.k-html.com/html"><img src="https://www.k-html.com/html.jpg"></a>

kod dene

Tarayıcı, bağlantıların içeriğini nasıl işler?

Tarayıcı ile herhangi bir bağlantıya erişmeye çalıştığında, bağlantının atıfta bulunduğu belgenin formatına göre uygun şekilde davranacaktır.
Burada bahsettiklerim çok dikkat et çünkü ileride ihtiyaç duyacaksın ve tarayıcının dosyalarla nasıl ilgilendiğini anlamak için örneklerdeki bağlantılara erişmeyi denemeni tavsiye ederim.

1- Web sayfası bağlantıları

Tarayıcı, bağlantının bir .html ile biten dosyasına bağlantı olduğunu veya <!doctype html> etiketi içerdiği tespit ederse , içerdiği kodun sonucunu kullanıcıya gösterecek, yani kullanıcıya normal bir web sayfası olarak görüntülenecektir.

Örnek: Bu bağlantıya tıkladığında, mevcut sayfanın yanında Araştırma sayfası açılacaktır.

2- Resim bağlantıları

Tarayıcı, bağlantının bir görüntüye bağlantı olduğunu tespit ederse, bunu sayfada olduğu gibi kullanıcıya gösterir.

Örnek: Bu bağlantıya tıkladığında, geçerli sayfanın yanında HTML resmi görüntülenecektir.

3- Metin dosyası bağlantıları

Tarayıcı, bağlantının bir .txt, .css, .js veya başka bir tür metin dosyasına bağlantı olduğunu tespit ederse, kullanıcıya içindeki metni olduğu gibi gösterir.

Örnek: Bu bağlantıya tıkladığında, Javascript dosyasının içeriği mevcut sayfanın yanında görüntülenecektir.

4- Bilinmeyen dosya bağlantıları

Tarayıcı, bağlantının tanıyamadığı bir program veya dosyaya ait olduğunu tespit ederse, onu sayfada görüntüleyemez ve bu nedenle indirmek isteyip istemediğini soracaktır.

Örnek: Bu bağlantıya tıkladığında, tarayıcı mevcut sayfanın yanında boş bir sayfa açacak ve seni html5.zip adlı bir zip dosyasını indirmek isteyip istemediğini soracaktır.

önceki ders sonraki ders