Bölüm 10 (HTML Dersleri), Bağlantılar/Linkler
HTML ile kendi web sayfalarınızı oluşturabilirsiniz. W3Schools.com ‘dan yapacağım bu çeviriler ile HTML’yi kolaylıkla öğrenebileceksiniz. HTML’nin öğrenmesi kolaydır ve zevkli bulacaksınız bu dili.
Başlangıç olarak bilgi; çevirileri(başlıklar hariç) çift tırnak içinde göstereceğim. Kendi yazdıklarım normal yazı olarak kalacak. Anlatacaklarımı uygulayabilmeniz için ilk önce denetim masasından klasör seçeneklerini bulmanız ve klasör uzantılarını göster halini seçmelisiniz. Ardından istediğiniz bir alanda(mesela masaüstünde) bir klasör açın web ismini verin. Klasörün içine girin(fare ile çift tık). Fare ile sağ tuş tıklayın ve metin belgesi(yeni metin.txt diye yazar) dosyasını oluşturun. Biz bu yeni metin.txt dosyası ile HTML dosyalarımızı oluşturacağız. Yeni metin.txt dosyasını açın ve farklı kaydete tıklayın. Açılan pencerede isim kısmına index.html yazın ve kaydedin web klasörümüzün içine. index.html klasörüne çift tıklayın ve browser(chrome, firefox, opera, internet explorer gibi)’da görebilelim. Artık web klasörümüzün içinde yeni metin.txt ve index.html adlı iki dosya olacağını biliyorsunuz ve artık hazırsınız. Bunu hazırlayamadıysanız bile, örnekleri uygulayabilmeniz için W3Schools‘taki metin editörünü paylaşmış olacağım. Sol taraftaki verileri silip, etiketleri(anlatacağım) yazarsınız ve edit and click me yazan yere basarsınız sağ tarafta da web sayfasının durumunu görebilirsiniz böylece. Bu benim ilk çalışmam. Umarım hepimize yararlı olur. Anlaşılmayan yerleri yorum olarak yazabilirsiniz/sorabilirsiniz. Kolay gelsin.
HTML Bağlantıları
8-9 adet ders sonra Temel HTML derslerimiz bitecek ve ileri seviye HTML derslerine başlayacağız. Böylece tam anlamıyla HTML’ye hakim olabileceğiz hatta HTML5’e. Sonrasında göreceğimiz CSS, javascript ve jQuery ile de tamamen bir web arayüz tasarımcısı olabileceğiz. Dersimize dönelim.
Linkleri yani bağlantıları her Web sayfasında bulabilirsiniz. Sayfadan sayfaya kullanıcının yol almasını sağlar linkler.
HTML Hyperlinks(yani linkler ya da bağlantılar da denebilir)
Yeni bir sayfaya veya bulunduğumuz sayfadaki bir yeni bölüme gitmemizi sağlayan; tıklanabilir, kelime, kelime grubu, resim bir hiperlink’e örnektir.
Bir web sayfasında fare imlecini üzerine götürdüğümüzde, imleç el halini alır ve bu sayede bağlantı olduğunu fark edebilirsiniz, istisnalar hariç.
Linkler HTML’de anchor(çapa) ile yani <a> etiketi ile oluşturulur ve sayfalar ya da bölümler birbirine bağlanır.
<a> etiketinin 2 şekilde kullanımı mevcut;
- Başka bir belgeye href özelliği kullanılarak bir link verme
- Bir belgenin içinde name özelliği kullanılarak yer imi belirleme
şeklinde.
HTML Link Söz dizimi
Bir link/bağlantı için en basit şekilde
<a href=”url”>Link adı gibi bir yazı yazarsınız buraya</a>
böyledir.
Örneğin;
<a href=”http://www.nefarkederki.com”>Ne Fark Eder ki!</a> gibi. Ne Fark Eder ki! olarak gözükecektir. Kullanıcı isterse ctrl’ye basarken linke tıklar, isterse shift’e basarken linke tıklar, ya da bilmiyorsa direkt olarak linke tıklar. Siz de deneyebilirsiniz.
İpucu; link yazısı “Ne fark eder ki!” yerine resim de koyabilirdim. Bu sayede resime tıklayabilirdiniz. Ve stil kullanarak şekillendirebilirdik de bağlantıyı. Yani bunları siz yapabilirsiniz. 🙂
“Target”(hedef) Özelliği
Bağlanmış olan dökümanın nerede açılacağını belirten bir özelliktir kendileri.
<a href=”http://www.nefarkederki.com/” target=”_blank”>Ne fark eder ki’ye gel!</a>
Burada target’in belirttiğine göre tarayıcı sayfamı yeni pencerede açacaktır.
“Name” Özelliği
Bağlantılanma yerinin ismini belirler ki o isme gidilmesini sağlar. HTML belgesi içinde yer imi sağlar yani.
Ve en çok kullanılan zevkli bir etikettir.
Not: HTML5’te “name” özelliği yerine “id” özelliğinin kullanılması önerilmektedir. Üstelik HTML4 de id özelliğini desteklemektedir. Yerimleri kullanıcı tarafından görülmez ayrıca.
Temel notlar; Yararlı ipucu;
Not; Ulaşılmasını istediğiniz alt klasörler için de ters bölü işareti yani / koyun sonuna. mesela; href=”http://www.nefarkederki.com/html”, linklendiğinde server’dan(sunucudan yani) çift istekte bulunacak nefarkederki.com’a gidecek ve fark edecek alt klasör olduğunu ve kendisi ekleyecek en sona /’nı. Ama bizz eklersek tek hamlede ulaşır adrese. şunun gibi; href=”http://nefarkederki.com/html/” .
İpucu; çapalanmış isimler yani a ile linklenmiş name’e sahip olan elementler sıklıkla çok geniş bir belgenin başında tablo içeriği oluşturmak için kullanılır. Dökümandaki name verilmiş her bir bölüm ve bunlara bağlanmış linkler belgenin en başına konur.
Diğer bir ipucu; Bağlantısı yapılmış ve name verilmiş elementi bulamıyorsa tarayıcı, belgenin en başına gider ve hiçbir hata gözükmez.
Örnekler ve uygulamalar
<a> bu anchor’dur yani çapadır. Çapayı attığınızda gemi bağlanır değil mi… İşte bunun gibi bağlantı sağlamak için kullanılır özellikleri ile.
Link olarak bir resim
Resimi link olarak nasıl kullanacağınızın uygulaması
Aynı sayfa içindeki bir yeri linkleme
Yer imi linkleme.
Çerçeve dışına çıkış
Eğer siteniz çerçeve içinde kilitliyse frame yani, nasıl dışına çıkılır.
Posta gönderme linki oluşturma
Eposta adresinizi yazarak posta gönderme linki oluşturma. Yalnız kullanıcı eposta aracını yüklemiş olmalı, outlook gibi.
Posta gönderme linki 2
Bir diğer şekli.
Uygulama yapmanız dileğiyle…