HTML Dersleri 9 Bağlantı(Link) Oluşturma

Merhabalar arkadaşlar. 9. HTML dersi ile beraberiz. Bu yazımda sizlere bir Web sayfasının olmazsa olmazı bağlantı oluşturma, link verme olayını anlatmaya çalışacağım.

Ama öncelikle buna geçmeden önce küçük bir bilgilendirme. Bundan sonra HTML kodlarımı daha düzenli görünmesi açısından Notepad++ programı ile yazacağım. Sizlerinde bu editörde yazmanızı tavsiye ederim.

Bu linkten Notepad++ İndir  indirip bilgisayarınıza kurup kodlamaya başlayabilirsiniz.

Programı açtıktan sonra yapmanız gereken işlemler ise şunlardır.



HTML dili ile kodlama yapacağımızı editöre bildirmeliyiz.


İkincisi de Türkçe karakterleri tanıması için şunu yapacağız.



Notepad++ bizim için kodları renklendirir, bir biri ile bağlantılı olan etiketlerin bağlantılarını gösterir bu da bizim daha verimli kod yazmamızı hatalarımızı hemen görüp en aza indirmemize yardımcı olur.

Bunuda söylediğimize göre artık asıl konumuza geçebiliriz.

O zaman Bismillah diyelim ve bağlantılar konusuna geçelim.

Hepimiz bir Web sayfasına girdiğimizde bizi diğer sayfalara götüren onlar ile bağlantı kurmamıza yardımcı olan yada sayfa içinde bizi farklı bölümlere götüren yapılar ile karşılaşmışızdır.

Link olayı neredeyse bir Web sayfasının olmazsa olmazı gibidir.

Web sayfamızdan bu sayfamızı oluştururken yazdığımız ve kendi bilgisayarımızda disk üzerinde kayıtlı dosyalara bağlantı oluşturabileceğimiz gibi farklı Web sayfalarına bağlantı oluşturabilir yada bulunduğumuz sayfa içinde belirli noktalara yönlendirmek için link verebiliriz. 

Şimdi bu işlemleri nasıl yaptığımızı detaylı olarak inceleyeceğiz.

En genel anlamda link verme etiketimiz <a> (anchor) etiketidir. Bu etiket arasına yazdığımız ifade tıklanabilecek bir bağlantı şeklinde görünecektir.

Bağlantı olayının en temel etiketleri ve kodu şöyledir.

<a href="Gidilecek Adres">Tanımlayıcı isim</a>

Kodumuza biraz daha yakından bakalım isterseniz.

A ifadesi link verme etiketidir.

Href parametresi ise link verilen adresi girdiğimiz alandır.

Tanımlayıcı isim ise bağlantı oluşturulacak olan sayfanın kendi sayfamızda hangi isimle görüleceğini belirlediğimiz yerdir.

Öncelikle çalıştığımız disk üzerinde bir dosyaya nasıl link verilir buna bakalım.

Biz bir dosyaya adres vereceksek onun uzantısı .htm yada .html olmalıdır.

<a href=".\Ders8.html">HTML Dersleri 8</a>

şeklinde vermem gerekirdi.

Ama burada dikkat etmem gereken bir nokta var o da şudur;

Ben  .\Ders8.html diye belirttiğim dosyayı bu şekilde sadece şu anda kodlarını yazdığım HTML dosyası ile aynı konumda ise yazabilirim. Böyle olunca tarayıcı sadece mevcut HTML in bulunduğu dizinde Ders8.html dosyasını arayacaktır. Ama eğer link vereceğim dosya farklı bir konumda ise mutlaka tam adresini belirtmem gerekir.

Mesela Ders8.html dosyası masaüstünde Html klasörü içinde bulunsun. O zaman yapmam gereken şu olacaktı;

<a href="Html\Ders8.html">HTML Dersleri 8</a> 

Aşağıdaki tablodan ne anlamlara geldiklerini inceleyebilirsiniz.


Peki farklı bir sayfaya nasıl link vereceğiz?

Küçük bir örnek ile görelim. Kendi Web sayfamızdan Google a bir bağlantı oluşturalım yani link verelim.

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





İşte böylelikle sayfamızdan Google a bir link vermiş olduk.

Çok basit olarak bu şekilde verdiğimiz bir linke tıkladığında kullanıcı, bizim sayfamız kapanır, onun yerine verilen adres açılır. Ama biz istiyoruz ki benim sayfam kapanmasın arkadaş. O zaman verdiğimiz linkin yeni bir sayfada açılmasını sağlamalıyız. 

Peki bunu nasıl yapacağız?

Bunu a etiketinin target parametresi ile yapacağız. 

Kullanımı:

<a href="Adres" target="_blank">Tanımlayıcı İsim</a>

şeklindedir. 

Bu ifade linke tıklandığında bağlantıyı yeni bir sayfada açacaktır.

Gelelim daha farklı bir olaya.

Mesela mail adresimizi link olarak vermek istiyoruz o zaman ne yapacağız?

Bu işlem  için ise şu yöntemi kullanacağız.

Kullanımı:

<a href="mailto:muratbilginer09@gmail.com"  >Bize mail göndermek için tıklayın</a>

şeklinde hangi mail adresini işaret ettiğimizi mailto ifadesi ile bildiririz.

Son olarak sayfa içinde belli bir noktaya link verme olayına gelelim. 

Öncelikle bu işleme neden gereksinim duyuyoruz bundan bahsedeyim.

Düşünün ki sayfanızda bir konu anlatımı yapıyorsunuz ve 15 tane farklı konu başlığı var ve anlatımda oldukça uzun.

İşte böyle sayfalarda aradığımız noktalara hemen gidebilmek için gidilmek istenen noktaları belirler ve oralara link verir kullanıcıyı biraz olsun rahatlatabiliriz. 

Peki bu işlemi nasıl yapacağım?

Bu işlemin iki adımı var. Burada a etiketinin name parametresi imdadımıza yetişecek.

İlk işlemimiz link vermek istediğimiz noktaları belirleme.

Küçük bir örnekle daha anlaşılır hale getirelim.

Mesela HTML anlatımları yaptığımızı var sayalım ve HTML Nedir?, HTML de  de Etiket Kullanımı, ve HTML de Parametreler konu başlıkları olan bir anlatım. Biz bu başlıklara link vermek istiyoruz.

Öncelikle bir konum belirlemesi yapmalıyım.

Kullanımı:

<a name="Belirlenen Konum İsmi">Tanımlayıcı İsim</a>



İşaretlediğim yerlere dikkat edelim. Konu başlıklarının olduğu yerlere bir konum belirlemesi yaptım. Bu haliyle bir tarayıcıda görelim.


Şimdi ise sayfanın en başında bu konumlara link verelim. 


En genel anlamda sayfa içinde link verme olayı şöyle olur.

<a href="#GidilecekKonum">Tanımlayıcı İsim</a> 

şeklindedir.

Nasıl göründüğüne bakalım.


Birde aslında ne demek istedim ona bakalm.


Tamda bu olayı anlatmaya çalışmıştım.

Biraz uzun oldu anlatım ama umarım yararlı bir anlatım olmuştur. Bağlantılar konusunu da böylelikle bitirmiş olduk. 10. dersimizde beraber olma ümidiyle çalışan arkadaşlarıma kolaylıklar. Vesselam.

KONUNUN YAZARI NCFKR
DİĞER KONU ANLATIMLARI İÇİN TIKLA VE ÖĞREN

Yorumlar