Beşinci Ders Bağlantılar (Links)

Bağlantılar (Links)

1. Giriş
2. Bağlantı Renklerini Belirlemek
3. Bağlantı Olarak Resim Kullanmak
4. Döküman içi Bağlantılar
5. Altı çizgisiz aktif bağlantılar
6. Özet

5.1 Bağlantılara Giriş

Web'in belki de en çekici tarafı bağlantılar (link) sayesinde bir sayfadan ötekine geçişin çok kolay bir şekilde gerçekleştirilmesidir. Bağlantılar -başka bir deyişle hipermetin- özelliği olmasaydı kuşkusuz hem web (örümcek ağı) kelimesinin pek bir anlamı kalmazdı hem de Internet çok sıkıcı bir yer olurdu.
Sayfamızdan başka bir sayfaya bağlantı vermek istediğimizde <A HREF=""> işaretini kullanıyoruz. Hemen bir örnekle bunu görelim.

ornek12.html
<HTML>
<HEAD>
<TITLE>Bağlanıyoruz!</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

Internet'in en popüler sitesi kuşkusuz <A HREF="http://www.yahoo.com">Yahoo</A>. Milyonlarca siteye bağlantı içeren bu devasa sitenin yanında bu örnek sayfa sadece iki bağlantı içeriyor; ama önemli olan bağlantı sayısının fazlalığı değil kalitesi 8)

İşte ikinci bağlantımız geçen bölümdeki son örneğimize gidiyor:

<A HREF="ornek11.html">Tıklayın!</A>

</BODY>
</HTML>

Fark ettiğiniz gibi üstüne tıklayabileceğimiz yazılar <A HREF=""> ile </A> arasında kalan bölüm. Örneğin Yahoo'nun üzerine tıkladığımızda Yahoo'nun web sitesine gidebileceğiz -tabi <A HREF=""> içindeki adresi doğru yazdıysanız-. Bu örnekte iki bağlantı bulunuyor; ama birinin başında http:// öneki var, diğerinde yok.
http:// önekini bizim web sitemizin adresinden farklı bir adrese (örneğin http://www.yahoo.com/) bağlantı verirken kullanıyoruz. Diyelim ki web sayfalarımız http://www.abc.com/ adresinde bulunsun. Eğer http:// önekini kullanmasaydık Yahoo'nun üstüne tıkladığınızda web tarayıcınız http://www.abc.com/www.yahoo.com adresine gitmeye çalışacaktı ki tabi bu da bir hatayla sonuçlanacaktı. Diğer bir deyişle http:// önekini kullanmadığımızda web tarayıcısı bizim sitemizin içindeki bir HTML dosyasına erişmek istediğimizi düşünür. İkinci bağlantımız da bu duruma örnek. "Tıklayın!" yazısının üstüne tıkladığınızda http://www.abc.com/ornek11.html'e gidilecektir. Bu arada eğer geçen bölümde web sayfalarımızda kullanmak istediğimiz resimlere, bulundukları klasörlere göre, nasıl ulaşabileceğimizi anlatan yazıyı hatırlarsanız; aynı şeylerin bağlantılar için de geçerli olduğunu farkedeceksinizdir. Eninde sonunda html dosyaları da resim dosyaları gibi birer dosya ve bulundukları klasörlere göre doğru olarak çağrılmaları gerekiyor.
Not: Kendi web sitemizdeki dosyalara bağlantı vermek için http:// önekini kullanabilirsiniz (örneğin http://www.abc.com/ornek11.html); ama bunun iki büyük dezavantajı var:

* Sabit diskinizdeki HTML dosyalarınızda bulunan bağlantıları denemek istediğinizde Internet'e bağlanmanız gerekir (tabi önce bu dosyaları daha deneyemeden web sunucunuza yüklemeniz de gerekecek).
* Web sitenizin adresi değişince tüm HTML dosyalarınızda bulunan bağlantıları buna göre değiştirmeniz gerekir.

5.2 Bağlantı Renklerini Belirlemek

Üçüncü bölümde arkaplan ve metin renklerini <BODY> işaretinin içinde yeralan BGCOLOR ve TEXT parametrelerine verilen değerlerle değiştirebileceğimizi görmüştük. Bağlantıların renklerini değiştirmek için ise üç parametre kullanabiliyoruz: LINK, VLINK ve ALINK. Eğer bu parametreleri kullanmazsanız web tarayıcınız varsayım renkler kullanır. Tabi bu varsayım renkleri her zaman için web tarayıcınızın ayarlar bölümünden değiştirebilirsiniz.
LINK parametresi ile belli bir süredir ya da hiç ziyaret etmediğiniz bağlantıların renklerini belirleyebilirsiniz. Örneğin Netscape Navigator'ın 4.6 sürümü, son 9 gün içinde ziyaret etmediğiniz sayfalara giden bağlantıları ziyaret edilmemiş olarak gösterir. LINK, pek çok web tarayıcısında varsayım olarak saf mavi renge ayarlıdır.
VLINK parametresi ziyaret edilmiş bağlantıların rengidir ve genellikle LINK'e göre daha koyu bir tona ayarlanır. VLINK pek çok web tarayıcısında varsayım olarak koyu mavi renge ayarlıdır.
Bir bağlantıya tıkladığınızda bağlantının rengi kısa bir süre için değişir. Eğer farenin düğmesini yeterince uzun basılı tutarsanız bu rengin ne olduğunu görebilirsiniz. İşte ALINK ile bu rengin ne olacağını belirleyebiliyoruz. Pek çok web tarayıcısında varsayım olarak kırmızı renge ayarlıdır.
Bu kadar teorik bilgiden sonra bir örnek iyi gider:

ornek13.html
<HTML>
<HEAD>
<TITLE>Bağlantılar ve Renkler</TITLE>
</HEAD>
<BODY BGCOLOR="#0000A0" TEXT="#FFFFFF" LINK="#FFFF00" VLINK="#808000" ALINK="#FF0000">

<CENTER>

Internet'teki en popüler arama motorlarından beş tanesi:

<A HREF="http://www.altavista.com">Alta Vista</A>

<A HREF="http://www.excite.com">Excite</A>

<A HREF="http://www.lycos.com">Lycos</A>

<A HREF="http://www.webcrawler.com">WebCrawler</A>

<A HREF="http://www.hotbot.com">HotBot</A>

</CENTER>

</BODY>
</HTML>

örnek 13'ün sonucunda açık sarı renkte görüntülen bağlantılar (LINK) uzun zamandır ziyaret etmediğiniz -belki de hiç girmediğiniz- arama motorları. Eğer bu bağlantılar arasında koyu sarı renkli olan varsa bu yakınlarda onu kullanmış olmalısınız (VLINK). Bu bağlantılardan herhangi birinin üstüne tıklarsanız rengi kısa bir süre için kırmızı olur (ALINK).

5.3 Bağlantı Olarak Resim Kullanmak

Web'de mutlaka görmüşsünüzdür. Pekçok web sayfasında alt alta veya yanyana bazen şık bazen de çirkin düğmeler sıralanır ve bunların herhangi birine bastığınızda ilgili sayfaya gidersiniz. Bu düğmeler aslında birer resimden başka bir şey değiller. İşte size bir örnek:

ornek14.html
<HTML>
<HEAD>
<TITLE>Resimler & Bağlantılar</TITLE>
</HEAD>
<BODY BGCOLOR="#0000A0" TEXT="#FFFFFF">

<CENTER>

İşte tıklanacak bir düğme:

<A HREF="http://www.fatih.edu.tr/onerin.html"><IMG SRC="onerin.gif" WIDTH=90 HEIGHT=30 ALT="Bu siteyi sevdiklerinize önerin" BORDER=0></A>

</CENTER>

</BODY>
</HTML>

örnek 14'ün örnek 12 ve 13'ten tek farkı <A HREF=""> ve </A> işaretleri arasında metin yerine resim göstermekte kullandığımız <IMG SRC=""> işaretinin bulunması. Böylece bir resmi bağlantı olarak kullanabiliyoruz. Yalnız <IMG SRC=""> işaretindeki BORDER=0 parametresine dikkat. Normalde BORDER parametresinin resimlerin çevresine önplan renginde bir çerçeve çizmekte kullanıldığını biliyoruz ve eğer bu parametreyi kullanmazsak çerçeve de çizilmiyordu; ama eğer bir resmi bağlantı olarak kullanacaksanız ve BORDER parametresini de kullanmazsanız web tarayıcınız resmin çevresine otomatik olarak bağlantı renginde bir çerçeve atar. Bu genelde istenen bir durum olmadığından BORDER=0 ile bu çerçeveyi yok edebilirsiniz.

5.4 Döküman içi Bağlantılar

Şimdiye kadar hep başka sayfalara bağlantılar verdik; ama aslında böyle bir zorunluluk yok. Bir HTML dökümanının değişik yerlerine tek tıklamayla ulaşmak için de bağlantılar yerleştirebilirsiniz. Böylece uzun bir dökümanı ayrı ayrı sayfalara bölmeye gerek kalmadan hemen hemen aynı işlevselliği elde edebiliriz. Örnek olarak ad.net'in Haziran ayı için seçtiği en iyi yerli web siteleri sayfasından (TM10) bir alıntı yaptım. Çok uzun olur diye sadece açılış bölümü ile üç numaralı sitenin yazıları var. Liste 15'te bu yazıların önemli kısmını da kestim; ama tüm HTML işaretlerini bıraktım. Liste 15'e yakından bakarsanız ilk üç sitenin bağlantılarının gösterdiği adresler pek alışık olduğumuz adres yapısına benzemiyor. Hepsinin başında diyez (#) işareti var. Bu bağlantıların biraz altında ise daha önce görmediğimiz bir işaret göreceksiniz:

Bu işaret ile dökümanın belli bir yerine isim vererek (bu durumda muzik_kutusu) <A HREF="#muzik_kutusu"> ile dökümanın o yerine bağlantı verebilirsiniz. Böylece Müzik Kutusu bağlantısına tıklandığında otomatikman o bölüme gidebilirsiniz. Yalnız kullanacağınız isimler boşluk veya türkçe karakter içermemeli. Küçük büyük harf ayrımına da dikkat edin. Gerçi çoğu web tarayıcısı bu ayrıma aldırmıyor; ama tedbiri elden bırakmamakta yarar var.
Bu arada liste 15'in sonucunda gelen sayfanın altında yer alan "yukarı" isimli bir bağlantı dikkatinizi çekecektir. Bu bağlantıya tıklarsanız bu listenin en başında yer alan <A NAME="yukari"></A> işareti sayesinde dökümanın en başına rahatlıkla ulaşabilirsiniz.
İpucu: Başka bir dökümanın içinde yer alan bir bölüme de bağlantı verebilirsiniz. Örneğin <A HREF="ornek15.html#muzik_kutusu">

ornek15.html
<HTML>
<HEAD>
<TITLE>Döküman İçi Bağlantılar</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#0000FF">

<A NAME="yukari"></A>

Türkiye'nin yerli içerik sorunu yıllardır gündemde. Ama son birkaç yıldır hiç azımsanamayacak bir yerli Web patlaması var...

<CENTER>
İlk 3: 
<A HREF="#teymur">Cengiz Teymur</A> 
<A HREF="#eskisehir_net">Eskişehir.net</A> 
<A HREF="#muzik_kutusu">Müzik Kutusu</A>
</CENTER>

 
 
<IMG SRC="muzik_kutusu.gif" BORDER=1 ALIGN="right">
<A NAME="muzik_kutusu">Müzik Kutusu (www.muzikkutusu.com)</A>

Hepimizin görmekten bıktığı, asla güncellenmeyen, sadece MP3'lerle dolu müzik sitelerine, bir müzik sitesinin nasıl olması gerektiğini gösteriyor...

 
 
<CENTER><A HREF="#yukari">Yukarı</A>

</BODY>
</HTML>

5.5 Alt çizgisiz ve aktif kısayollar:

Bu günlerde alt çizgisiz ve klasik mavi renge sahip olmayan Internet kısayolları kullanmak çok moda oldu. Herkes gerekli olsun olmasın bu tip kısayolları kullanıyor. Eğer siz de bu tip link'lerin sayfanızın genel görünümünü güzelleştireceğine inanıyor ve bunları kullanmak istiyorsanız size bu işi nasıl becerebileceğinizi anlatalım.
Alt çizgisiz bir kısayol oluşturmak için <A HREF… takısının içinde bir stil tanımı kullanmanız yeterli. Bu stil takısını kullandığınızda hem kısayol alt çizgisiz olacak hem de ziyaret edildikten sonra rengi değişecek.
Alt çizgisiz kısayol: 
<A HREF="http:// www.fatih.edu.tr " STYLE="text-decoration: none"> Fatih Üniversitesi </a>
Dilerseniz bir adım daha ileri giderek altı çizili olmasına rağmen üzerine gidince rengi değişen bir link oluşturalım. Bunu yapmak için uzun kodlar kullanmaya gerek yok sadece onmouseover özelliğini kullanmak yeterli.
Aktif ve normal kısayol: 
<A HREF="http:// www.fatih.edu.tr" onmouseover="this.style.color='#CC0000'" onmouseout="this.style.color='blue'"> Fatih Üniversitesi </a>
Şimdide hem altçizgisiz hem de üzerine gelince renklenen bir link kullanalım. Tahmin edebileceğiniz gibi hem onmouseover hem de STYLE özelliklerini kullanacağız.
Aktif ve alt çizgisiz kısayol: 
<A HREF="http://www.fatih.edu.tr" STYLE="text-decoration: none" onmouseover="this.style.color='#CC0000'" onmouseout="this.style.color='blue'">
Fatih Üniversitesi </a>

5.6 Özet:

* Bir web sayfasından diğer bir sayfaya bağlantı vermek için <A HREF=""> işaretini kullanmamız gerektiğini öğrendik. <A HREF=""> ile </A> işaretleri arasında yer alan metnin üstüne tıklandığında ilgili sayfaya gidildiğini gördük.
* Eğer kendi web sitemiz dışında yer alan bir web sayfasına bağlantı vereceksek http:// öneki kullanmamız gerektiğini gördük.
* Bağlantı renklerini değiştirmek için <BODY> işaretinin arkasına LINK, VLINK ve ALINK parametrelerini vermemiz gerektiğini;
* LINK'in uzun zamandır ya da hiç ziyaret edilmemiş sayfalara giden bağlantıların rengini,
* VLINK'in yakın zaman içinde ziyaret ettiğimiz sayfaları gösteren bağlantıların rengini,
* ALINK'in bir bağlantıya tıklama sırasında bağlantının alacağı rengi
belirlemek için kullanıldığını gördük.
* Bağlantı olarak resimlerin de kullanılabileceğini, bunun için <A HREF=""> ve </A> işaretleri arasında <IMG SRC=""> işaretinin gelmesi gerektiğini gördük. Eğer <IMG SRC=""> işaretinin arkasına BORDER=0 parametresini eklemezsek resmimizin çevresine otomatikman bağlantı renginde bir çerçeve çizileceğini öğrendik.
* Bir dökümanın istediğimiz yerlerine <A NAME="isim"> işaretiyle isimler vererek <A HREF="#isim"> işaretiyle bu yerlere bağlantı verebileceğimizi gördük.

Ana Sayfaya Dön