HTML Ders 8:Bağlantı’ya (LINK) Giriş

HTML’de Bağlantı’ya (LINK) Giriş
Buraya kadar gördüklerimiz metini biçimlendiren ve
gösterimi ile ilgili etiketlerdi. Oysa web ile biraz ilgili birisi
bile linkler olmadan web ortamından hiçbir Ģey
yapılamayacağını bilir. Çünkü linkler yardımı ile
kullanıcılar bir web adresinden diğerine özgürce
gezebilirler. Ancak tabiî ki verilen bağlantının hedefindeki
resim, ses, vide yada web adresi doğru olmalıdır. Aksi
taktirde ―kırık link‖ (dead link, broken link) dediğimiz
adeta çıkmaz sokak sayılacak bir kopukluk oluĢur.
Örneğin link verirken ―c:\belgelerim\cv.doc‖ linkini
verdiniz ve amacınız kullanıcıların cv dosyanıza
eriĢebilmesi. Peki sizin sabit diskinizde kendi halinde
duran bir dosyaya, sabit diskiniz Internet‘e açık değilse,
kullanıcı nasıl eriĢecek.. Tabii bu traj komik örnekte asıl
sorun Ģu, hardiskinizi internete açtınız diyelim, bu sefer
özel bilgilerinizi nasıl koruyacaksınız?
<A>..</A> etiketi HTML‘e hareket kazandıran ve link
vermeyi sağlayan etikettir. HTML etiketleri arasında
Anchor (A) etiketinin yanı sıra, <BASE> ve <LINK>
etiketleri de, bir noktadan bir diğerine gitmemizi sağlar.
<PRE></PRE>: Önceden düzenlenmiĢ (preformatted)
metin blokları için kullanılır. Normalde, HTML birden çok
whitespace'i tek bir boĢluk karakteriyle değiĢtirdiği için,
görüntülenmesi baĢka türlü mümkün olmayan metin
blokları bu tag yardımıyla görüntülenebili
<A>..</A> etiketine özellik kazandıran parametreler
Ģunlardır:
ACCESSKEY=‖metin‖: Bu parametre ile, bağlantının fare
ile tıklamak yerine, klavyede bir veya birden fazla tuĢa
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
94
basarak yapılmasını sağlayabilirsiniz. ―Metin‖ kelimesinin
yerine yazacağınız karakterler, klavye kestirmesi olur.
CHARSET=‖metin‖: Bağlantı sağlanan Web kaynağının,
tarayıcıda hangi dil kodlamasıyla gösterileceğini belirler.
Verilmediği takdirde, kullanıcının tarayıcı programı ISO-
8859-1 olan ASCII kodunu seçer.
COORDS=‖X1, Y1, X2, Y2... Xn, Yn‖: Bu parametre,
bağlantının metinde değil, bir grafik üzerinde
oluĢturulması halinde, resmin hangi koordinatları arası
tıklanırsa, bağlantının sağlanacağını gösterir. Bu etiket,
SHAPE ile birlikte kullanılır. (Bu sayede bir resmin çeĢitli
kısımlarına basıldığından farklı adreslere gidilmesi
mümkün olur. Buna image map denilir)
HREF=‖url‖: URL, (Uniform Recourse Locator)
Internet‘te bulunan bir adres demektir.Bu adres, HTTP,
FTP veya elektronik posta yoluyla ulaĢılabilecek bir Web
alanı ve o alanın içindeki bir dosya olabilir. UlaĢılacak
dosya, HTML dosyası olabileceği gibi bir Word , Excel
dosyasıda olabilir, grafik, ses, video ya da sıkıĢtırılmıĢ
ZIP dosyası da olabilir. Tarayıcılar genellikle, bir bağlantı
ile kendisine gelen dosyayı ne yapacağını bilemezse
(örneğin bir zip dosyası), kullanıcıya bu dosyayı yerel
sabit diske kaydetmeyi önerirler.
NAME=‖metin‖: Anchor‘a isim vererek, daha sonra bu
noktaya atıfta bulunma imkanı kazandırır. Bunu, bir
sayfanın kendi içinde, link vermek için kullanabilirsiniz.
Çok uzun bir sayfanın baĢtarafına <a name="top">
Ģeklinde bir ―isimlendirilmiĢ Anchor‖ noktası koyarsanız
ve aĢağıda baĢtarafa dönüĢü kolaylaĢtırmak için Ģöyle bir
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
95
bağlantı yapabilirsiniz: <A HREF="ust‖>Sayfa baĢına git
</A>
REL=‖metin‖: Kurulacak iliĢkinin niteliğini belirtir.
Tarayıcılar, çoğu zaman bu ifadeye bakarak, bağlantı
kurulunca ne yapabileceklerini bilirler. Örneğin ―metin‖
yerine ―stylesheet‖ yazarak, tarayıcıya alacağı dosyanın,
daha sonra metinleri biçimlendirmekte kullanılacağını
söyleyebiliriz.
SHAPE=(RECT/CIRCLE/POLY/DEFAULT): Bu etiketin
karĢısına yazacağınız ifade ile, tarayıcıya bir resim
dosyasının üzerine konmuĢ bağlantı noktasının biçimini
tanımlarsınız.
 Rect Ģeklin dörtgen,
 circle daire,
 poly çok kenarlı
 default ise arayıcının varsayılan bağlantı Ģekli
olduğunu ifade eder.
Bu parametreyi COORDS parametresi ile birlikte
kullanmak gerekir. Bu durumda COORDS etiketinin
önüne yazacağınız ―X1, Y1, X2, Y2, Xn, Yn‖ Ģeklindeki
koordinatların da anlamı farklı olur. SHAPE etiketini
―rect‖ olarak bildirirseniz, X1 ve Y1 Ģekin sol üst
köĢesinin, tarayıcı penceresinin sol üst köĢesinden
itibaren kaç pixel sağa ve aĢağı konulacağını; X2 ve Y2
ise Ģeklin sağ alt köĢesinin koordinatlarını gösterir
(Örnek: SHAPE=rect, COORDS=‖0,0,9,9‖). SHAPE‘i
―circle‖ olarak tanımlarsanız, koordinatlar dairenin
merkezini ve çapını gösterir (Örnek: SHAPE=circle
COORDS=‖10,10,5). Çok kenarlı bir Ģekil tanımlamanız
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
96
halinde, her bir koordinat diğerine, son koordinat da
birinciye bağlanır (Örnek SHAPE=poly
COORDS=‖10,50,25,20,20,50‖).
TARGET=‖pencere‖: Bu etiketle linkin sayfa içindeki
hangi frame (yada boĢ bir yeni sayfaya) yükleneceği
belirtilir. FRAMESET etiketi bulunan bir sayfada
kullanılması halinde, alınacak sayfanın hangi frame içine
konulacağını gösterir. Burada ―pencere‖ kelimesinin
yerine Ģu değerler yazılabilir:
―çerçeve adı‖: OluĢturulan çerçevelere önceden isim
verilmiĢ ise, o isimler buraya yazılarak, sayfa frame içine
yüklenir. Çerçeve isimleri mutlaka rakam veya harfle
baĢlamalıdır.
 _blank: Linkin hedefi yeni bir tarayıcı
penceresinde açılır. Frameler içinde baĢka bir
siteye link vermek için bu önemlidir.
 _parent: Alınacak unsur, o anda açık sayfayı
oluĢturmuĢ bir ana sayfa varsa, onun yerine
konulur.
 _self: Alınacak sayfa mevcut sayfanın bulunduğu
tarayıcı perceresine konulur.
 _top: Alınacak sayfa mevcut pencereye en üstten
itibaren konulur.
Frame kullanan bir sayfada baĢka bir siteye link
verildiğinde _blank kullanılmadığında sayfada bulunan
mevcut sabit frameler duracağından diğer site sizin
sayfanızın içine gömülecektir. Hele birde link verilen
sitede frame ise iĢte o zaman az yağlı az piĢmiĢ
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
97
bulgur çorbası tarzı birbirine geçmiĢ bir ekran
görüntümüz olacaktır.
HTML’de Bağlantı Türleri
HTTP bağlantıları:
Link, tarayıcının HTTP protokolünü kullanarak
ulaĢabileceği bir alanda ise, bunun gönderme ifadesi, <A
HREF="http://site adresi/sayfa adi.htm">Link metni
</A> Ģeklinde yazılır. BaĢka bir Web alanında belirli
dosyaya değil de, alanın birinci sayfasına (home page,
index page, vs.) bağlantı veriyorsak, bağlantıyı <A
HREF="http://www.hedefsite.com.tr/"> olarak yazmak
gerekir. Web server anasayfa hangi dosya ise onu
gönderecektir.
FTP bağlantıları:
Kimi zaman, HTTP protolünü değil de FTP (File Transfer
Protocol) yöntemini kullanarak, bir dosyayı kendi
bilgisayarına indirmesini sağlamamız gerekebilir. Bunun
için link ifademiz, örneğin Ģöyle olur: <A
HREF="ftp://download.com/pub/">Bedava
programlar</A>
Haber Grupları:
Internet‘in bilgi paylaĢımı amacına yönelik bu
kullanımında, tartıĢma gruplarına yer verilen Usenet
servisi için prtokol belirtilmez. Usenet‘ için örnek olarak:
<A HREF="news:comp.ibm.www.developers.html">
GeliĢtiriciler grubu </A>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
98
Elektronik Posta Bağlantısı:
Bazen kullanıcın bir linke tıkladığından hemen o linkteki
bir adrese e-mail atmak üzere kullanıcının varsayılan email
programının açılması istenebilir. Örnek olarak
<A HREF="mailto:webmaster@bizimweb.com.tr‖>e-mail
gönder </A>
Dosya Bağlantıları:
Sabit bir dosyaya link vermek için kullanılır. En çok
intranet ortamlarında kullanılır. Örnek olarak,
<A
HREF="file://server/yazılımlar/kulanım.html">Kullanım
rehberi </A> gibi
Diğer bağlantılar:
Internet‘in ilk günlerinde daha sık kullanılmıĢ olsalarda
Gopher, ve çok geniĢ bir alana yayılmıĢ ağlarda veri
tabanı araĢtırması yapmaya imkan veren WAIS, çok
yaygın olmamakla birlikte, HREF ifadesi olarak
kullanılabilir.
Linkler hakkında detaylı bilgi için
http://www.w3.org/addressing/schemes.html adresine
bakabilirsiniz.
Neden “\” değilde “/” kullanılıyor?
HREF ile kullanılan düz bölü ―/‖ iĢareti dikkatinizi çekmiĢ
olmalı. ĠĢin aslı Ģu Unix türevi sistemlerde klasör
hiyerarĢisi ―/‖ ile ifade edilirken Windows içinde bu iĢem
―\‖ ile ifade edilemektedir. Aslında ―\‖ iĢareti ile ―‖/‖
arasında hiçbir fark yok ve iĢlevleri de aynı. Yani
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
99
Windows altında link verirken ―\‖ ilede link verirseniz link
çalıĢır ancak unutmayın ki sayfa bir de hosting
bilgisayarına yüklenecektir. Peki web server iĢletim
sistemi Windows değilse ne olacak. Tabiî ki link
kırılılacak. Windows altında ―\‖ yazılsada web server
programı bunu normal karĢılığna çevirerek iĢlem yapar.
Ancak Linux server içinse bu sorundur.
―\dosyalar\sayfa.html‖ yazdığınızda Linux sizin dosyalr
klasörü içinde bulunan sayfam dosyasını kastettiğinizi
bilemez.
Resimleri Link BaĢlığı Vermek Ġçin Kullanmak
Link verirken yazdığımız bir kodu ele alalım.
<A HREF="http://site adresi/sayfa adi.htm">Link metni
</A>
Burada ―Link metni‖ yazısı link olduğunu belirtmek üzere
altı çizili yazılacaktır ve buraya tıklandığı andada hedef
linke gidilecektir. Burada link metni yerine bir resim
dosyası kullanılırsa, resim linkin simgesi olacak ve resme
tıklandığında link açılacaktır. Örneğin
<A HREF="http://site adresi/sayfa adi.htm"><img
src=‖dugme.jpg> </A>
gibi. Tabii istenirse </A> metninden önce metin
yazmakta mümkündür.
<A HREF="http://site adresi/sayfa adi.htm"><img
src=‖dugme.jpg> <br>Link metni</A> gibi
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
100
Resim Haritası (Image Map) ile Link Kullanımı
Resimlerin farklı kısımlarından farklı yerlere link vermek
isterseniz resim haritalarından faydalabilirsiniz. Örneğin
ilk anda aklınıza gelebileceği gibi Türkiye haritası
üzerinde tıklanacak ile göre ilgili ilin sayfasına geçiĢ
yaptırılabilir.
Resim haritası bir resim üzerindeki tanımlanmıĢ etkin
noktaları (hotspots) link olarak belirler. Etkin noktalar
dikdörtgen veya yuvarlak olabileceği gibi düzensiz
Ģekiller de olabilir. Bunlar için uygun koordinatlar
belirtilmelidir.
Dikdörtgen etkin noktanın konumu iki noktayla
tanımlanır: sol üst ve sağ alt köĢeler. Her nokta resmin
sol-üst köĢesinden yatay ve dikey uzaklığını piksel
cinsinden belirten bir sayı çiftiyle tanımlanır. AĢağıdaki
örnekte 0,0 etkin noktanın sol üst köĢesinin 50,50 de
sağ alt köĢesinin resmin sol üst köĢesine olan uzaklığıdır.
<map name="haritaadi" id="haritaadi">
<area shape="rect" coords="0,0,150,150"
href="adana.htm" />
</map>
Yuvarlak etkin noktanın konumunu tanımlamak için üç
adet koordinat kullanılır: ikisi (yatay ve dikey değerler)
dairenin merkezini tanımlamak için, üçüncüsü dairenin
yarı çapı içindir.
<map name="haritaadi" id="haritaadi">
<area shape="circle" coords="100,150,60"
href="adana.htm" />
</map>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
101
Çok köĢeli etkin noktanın konumunu tanımlamak için
Ģeklin tüm köĢelerinin koordinatları kullanılır. Çok köĢeli
etkin noktalar tanımlanan noktaları birleĢtiren düz
çizgilerden oluĢur. AĢağıda beĢ köĢeli bir etkin nokta için
gereken kod verilmiĢtir:
<map name="haritaadi" id="haritaadi">
<area shape="poly"
coords="310,14,559,195,274,356,5,118,126,411"
href="ankara.htm" />
</map>
AĢağıdaki resimde 4 adet geometrik Ģekle de link
verilmiĢtir. <img> etiketine usemap="#haritaismi"
eklendiğinde haritaismi adlı resim haritasına göre resim
içerisinde linkler belirir.
Link Verirken Relative (göreceli) ve Absolute
(mutlak) Adreslemelerin Farkları
www.abc.com sitesinin tasarlandığını,
www.abc.com/yazilar adresinde ise makaleler
yayınlanacağını varsayalım.
“yazi1.html” dosyasına link verirken
“yazilar/yazi1.html” adresi kullanılabilir. Ancak
istenirse “http://www.abc.com/yazilar/yazi1.html”
adreside kullanılabilir. Bunların birincisi göreceli ikincisi
ise mutlak adreslemedir.
Her ikisinin de hem avantajı hem de dezavantajları
vardır:
 Relative adreslenerek oluĢturulan sayfaların bir
makineden diğerine taĢınması kolaydır
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
102
 Relative linkler bir üst seviyedeki sayfa taĢındığı
zaman kırılırlar. (Örneğimizde ―yazilar‖ kladörü
kalkarsa tüm linkler bu ısımdaki tüm linkler
kırılacaktır)
 Relative linkleri local serverlarda çalıĢtırıp denemek
daha kolaydır.
 Absolute adreslemede yazılan linkler daha uzundur
ve bakımı daha zordur
 Bazı dosyaların mutlaka sunucudan yüklenmesini
istiyorsanız (bir kullanıcının sayfanın bir kopyasını
kendi makinesine indirmesi durumunda) kesin
sonuç verir.
Bu iki adresleme arasındaki farkları bilerek hazırlanan bir
sitede normalde göreceli ve mutlak adresleme beraber
kullanılır, ve göreceli adreslerin sayısı genelde daha çok
olur. Ġyi bir sitede yapılabilecek bir düzenleme,
bütünlüğünün bozulmaması gereken sayfalarda, göreceli
adresleme kullanmak, ve her yüklendiğinde değiĢen
sayfalara da mutlak link vermektir, örneğin saatbaĢı
değiĢen istatistikler gibi.