HTML Bağlantıları – HTML Eğitimi – Web Uygulaması Geliştirme

HTML linkleri internetin bel kemiğidir dersem bu yanlış olmaz. HTML'deki bağlantılar, sizi bir sayfadan diğerine ve bir web sitesinden başka bir web sitesine taşımaktan sorumludur. Örneğin https://www.google.com'u ele alalım. Bir anahtar kelime aradığınızda, google size anahtar kelimenizle ilgili verileri olan diğer web sitelerine bağlantılar sağlar.

Yani şimdi HTML bağlantılarının yardımıyla oraya buraya hareket ettiğinizi görüyor musunuz? Benzer şekilde Facebook zaman tünelinizden bir örnek alalım. Sizi o gönderiye, sayfaya veya gruba götüren bir sayfaya veya gönderi bağlantısına tıkladığınızda. İşte bu şekilde bağlantılar tüm internette hayati bir rol oynuyor. Ve HTML bağlantılarının yapısı düşündüğünüzden daha basittir.

HTML Bağlantısı nasıl yapılır?

HTML bağlantısı <a> etiketi ile başlar ve </a> etiketi ile biter. Bu etiketler arasındaki her şey bir bağlantı etiketidir. Örneğin link etiketi arasında diyorsunuz buraya tıklayın. Yani buraya tıklayın kelimesi bağlantı etiketidir.

href="" niteliği, gidilecek bağlantıyı sağladığınız yerdir. href , Köprü Metni Referansı anlamına gelir. Sizi google.com'a götüren aşağıdaki basit bağlantıya bir göz atalım.

 <a href="https://www.google.com/">Let's go to Google!</a>

Bu örnek web sayfanıza yazdırılacaktır. Haydi google web sitesine bağlanacak olan google'a gidelim. Yani href="" içinde bağlantının gideceği referansı sağlayabilirsiniz. Aşağıda yerel bağlantılarımız da var.

HTML bağlantısındaki hedef özellik

target="" özelliği, tarayıcıya bu bağlantının yeni pencerede veya yeni sekmede açılması gerektiğini söylemek istediğinizde kullanılır.

target="" niteliğini tanımlamazsanız, varsayılan davranış self'dir. Bu, bağlantının şu anda bulunduğunuz pencerede veya sekmede açılacağı anlamına gelir.

target özniteliği aşağıdaki değerlerden birine sahip olabilir:

• _blank – Bağlantılı belgeyi yeni bir pencerede veya sekmede açar
• _self – Bağlantılı belgeyi tıklandığı pencerede/sekmede açar (bu varsayılandır)
• _parent – ​​Bağlantılı belgeyi üst çerçevede açar
• _top – Bağlantılı belgeyi pencerenin tam gövdesinde açar
• framename – Bağlantılı belgeyi adlandırılmış bir çerçevede açar

Bağlantıyı aynı sekmede açmak yerine yeni sekmede açan bir örneğe bakalım. Bu teknik, sayfanızda başka sitelere link verirken kullanılır. Ve kullanıcının da web sitenizde kalmasını istiyorsunuz, böylece bağlantıyı yeni sekmede açmak sitenizin diğer sekmede hala açık olduğundan emin olacaktır.

 <a href="https://www.facebook.com/" target="_blank">Facebook</a>

HTML bağlantısındaki başlık özelliği

HTML bağlantısındaki title="" özelliği, bağlantının kendisinin yalnızca bir başlığıdır. Örneğin, bir ziyaretçi HTML bağlantınızın üzerine geldiğinde ona bir şey söylemek istersiniz. title="" niteliğini kullanabilirsiniz. Bu nedenle, bir kullanıcı bağlantının üzerine geldiğinde bu başlık bağlantının altında küçük bir etiket olarak görünecektir.

HTML'de title="" niteliğinin kullanımı için örneğe bakın.

 <a href="https://www.linkedin.com/" title="You will leave our site">LinkedIn</a>

HTML'deki Bağlantı Türleri

Html'de bazı bağlantı türleri vardır ve her tür HTML bağlantısı için kendinizi rahat ettirmek için pratik yapmalısınız.

• HTML'de e-posta bağlantısı
• HTML'de telefon bağlantısı
• HTML'de harici yol bağlantısı
• HTML'deki Yerel Bağlantılar

HTML'de e-posta bağlantısı

Html'de bir e-posta bağlantısı sağlamak için mailto: ve e-posta adresinizi href="" özelliğinde kullanmanız yeterlidir. Her tarayıcının mailto: bağlantıları için farklı davranışı vardır, bu nedenle e-posta bağlantısı tarayıcınızda çalışmıyorsa. Lütfen tarayıcı ayarlarınızı kontrol edin. Aşağıdaki html örneğinde e-posta bağlantısına bir göz atalım.

 <a href="mailto:[email protected]" title="Send us Email">Email Us</a>

HTML'de telefon bağlantısı

Aynı e-posta bağlantısı gibi, telefon bağlantısını da href="" özniteliğinde tanımlarsınız. html href="" özelliğindeki telefon bağlantısı tel: ve numaranızdır. Her tarayıcının telefon bağlantısına farklı davranma şekli vardır. Çoğunlukla bilgisayarlarda telefon bağlantısı skype veya telefonu kullanan diğer uygulamalarda açılır. Öte yandan cep telefonları, içinde yazılan numara ile tuş takımını açacaktır. Html'deki telefon bağlantısı örneğini görelim.

 <a href="tel:1231231234" title="Click to call">Call Us</a>

Harici Yol bağlantıları veya Mutlak Bağlantılar

Harici yol bağlantıları veya mutlak bağlantılar, yola tam referansı veya URL'si olan bağlantılardır. https:// veya http:// protokolü ile başlayan tam url, harici veya mutlak yol olarak kabul edilir. HTML'deki mutlak bağlantılar hakkında daha fazla bilgi edinmek için makalemize bakın.

Farklı web sitesine Harici Yol örneği. Aşağıdaki örnek, gidilecek yolun tam URL'sini verir.

 <a href="https://google.com" title="Google">Google</a>

Benzer web sitesi sayfası için mutlak yol veya mutlak bağlantı veya harici yol bağlantısı da kullanabilirsiniz. Üzerinde çalıştığınız web sitesinde olduğu gibi https://www.webfulcreations.com/ url'sine sahiptir ve iç sayfası service/'dir, böylece url şöyle oluşturulabilir.

 <a href="https://www.webfulcreations.com/service/" title="Google">Our Services</a>

Mutlak yollarda kopuk bağlantıların olasılığı çok nadirdir. Çünkü kullanıcıyı götürdüğünüz sayfanın tam yolunu veriyorsunuz.

Yerel bağlantılar veya Göreli Bağlantılar veya Dahili Bağlantılar

Yerel bağlantılar veya ilgili bağlantılar, iç sayfalar veya resimler ve diğer kaynaklarla ilgili bağlantılardır. Göreceli bağlantılarda href=”” niteliğine tam yol vermezsiniz, sadece konumu verirsiniz. Göreli bağlantılar hakkında daha fazla bilgi edinmek için.

Aynı klasör dosyasıyla bağlantı

Aynı klasör dosyasıyla bağlantı kurduğunuzda, bağlantı gerçekten basittir. Siz sadece href="" özniteliğine dosya adını girin ve bağlantı kurulur. Aşağıdaki örneğe bakın. Örnek, dosyada bağlantı yaptığınız aynı klasörde bulunan aboutus.html dosyasıyla bir bağlantı oluşturuyor.

 <a href="aboutus.html" title="About Webful Creations">About Us</a>

Klasördeki Dosya ile bağlantı

Dosyanızın bir klasör içinde bağlanması ve klasörün mevcut dosyanızın bulunduğu dizinde olması durumunda. Ardından, her ikisini de / ile ayırarak dosya adının ardından klasör adını koyacaksınız. Mesela birden fazla servisiniz varsa servisler için bir klasör oluşturabilirsiniz. Her hizmet için farklı dosyalar oluşturabileceğiniz. Ve link aşağıdaki gibi olacak.

 <a href="services/ourserviceone.html" title="Fisr Service">First Service</a>

Artık kaç tane klasör olursa olsun, klasöre nasıl gireceğinizi biliyorsunuz. Her klasör adını girmeniz ve / işaretiyle ayırmanız yeterlidir.

Klasör HTML bağlantısına geri dönülüyor

Göreceli bağlantınızla bir klasöre girdiyseniz ve şimdi html yerel bağlantısıyla önceki klasöre geri dönmek istiyorsanız? Bu durumda, önceki klasöre geri dönmek için ../ double dotes tell kullanıyor olacaksınız. 2 klasör geri gitmeniz gerekiyorsa, iki kez ../../ kullanırsınız. HTML bağlantısı ile dizine geri dönmek için örnek görelim.

İç dizinden ana dizine geri dönmek istediğinizi söyleyebilirsiniz, ardından html bağlantısına geri dönmek için ../ kullanırsınız. Dizin yapısı karmaşıksa her zaman mutlak yolu kullanabilirsiniz.

 <a href="../aboutus.html" title="Go about us">About Us</a>

Yukarıdaki örnek, bir klasöre geri gidin ve orada aboutus.html dosyasını bulun ve o dosyayı yükleyin diyor. Alıştırma, sizi HTML dosya yollarıyla mükemmel hale getirecektir. Bu dizin ve dosya yapısının sonsuza kadar sizinle kalacağını unutmayın. Modern web sitelerinde de çok karmaşık yollar vardır.

HTML'de aynı sayfadaki bölümlere bağlantılar oluşturun

Bazen aynı sayfadaki farklı bölümlere bağlantılar sağlamanız gerekir. Örneğin, birkaç bölümü olan bir eğitim yazıyorsanız ve aynı sayfa hakkında bir içindekiler tablosu sağlamak istiyorsanız. Bu içindekiler tablosu aynı sayfada farklı bölümlere bağlanacaktır. Yani aynı sayfada farklı bir bölüme bağlantı vermek çok basittir.

Bu yöntem aynı sayfada yukarı veya aşağı gitmek için de kullanılır.

Önce bir ver tanınabilmesi için bölümünüze atıfta bulunun. Kimliklerin tekrarlanamayacağını, bir web sayfasında benzersiz olduklarını unutmayın. Bu nedenle, web sayfanızda herhangi bir çakışmayı önlemek için her zaman benzersiz kimlikler kullanın. Aşağıdaki örnek bölümü görelim.

 <h2>Our Story</h2> <p>This is our story text</p> <a href="#top">Go to Top</a> <!-- Top ID should be defined at top somewhere -->

Daha sonra o bölümü bağlamak için sadece # ve ID adını kullanın, bu bağlantı kullanıcıyı bölüme götürecektir. Yukarıdaki bölümde h2 etiketine hikaye kimliğimizi verdim. Aynı sayfada bu bölümle nasıl bağlantı kurulur.

 <a href="#ourstory">Our Story</a>

Benzer şekilde, üst ve alt bağlantılar oluşturabilirsiniz. Yukarıdaki örnekte olduğu gibi hikaye bölümümüz de üste çıkma bağlantısını veriyor. Ve üst kısım, web sayfasının üst kısmında id=”top” womewhere ile tanımlanacaktır.

Farklı bir sayfadaki bir bölüme bağlantı

Farklı bir sayfadaki bir bölüme bağlantı vermek için, o sayfada ilk önce bölüme benzersiz kimlik ekleyin. Örneğin aboutus.html'de hikayemizin bir bölümü var. Kimliğimizi hikayemize verebiliriz. Kimlikte boşluk olamaz.

 <h2>Our Story</h2> <p>This is our story text</p>

Şimdi hikayemiz bölümü için hakkımızda sayfasında bağlantı kurarken aşağıdaki bağlantı örneğini kullanın.

 <a href="aboutus.html#ourstory">Go to our Story in About US Page</a>

HTML bağlantıları bu kadar, HTML bağlantıları hakkında bilmeniz gereken her şeyi ele aldım.

Lütfen aşağıdaki eğitim videosunu izleyin, abone olmayı ve yorum yapmayı unutmayın.

Bölüm 2'nin Kaynaklarını İndirin:

HTML Bağlantıları Kodunu ve Kaynaklarını İndirin

Bölüm 2 Kodunu Görüntüle :

HTML Bağlantılarının Kodu ve Görünümü

Önceki Dersi Bul:

HTML'ye Giriş

Sonraki Dersi Bul:

HTML'de Görüntüler – HTML Eğitimi – Web Uygulaması Geliştirme