9. Bağlantılar Kullanmak

9. Bağlantılar Kullanmak

 

URL Nedir?

 

Web’in gerçek gücü istenen yerlere hipertext bağlantıları oluşturabilmektir. Bu istenen yerler başka web sayfaları olabileceği gibi, grafikler, sesler, dijital filmler, animasyonlar, programlar, bir ftp arşivi vb. olabilir.

 

WWW (World Wide Web), URL (Uniform Resource Locators) olarak bilinen bir adresleme sistemi kullanır. Bu hipertext bağlantıları (altı çizgili ve genellikle mavi olarak görünüler) çapa olarak da tanınır.

 

9a. Yerel Dosyalara Linkler

 

En basit bağlantı şekli, aynı dizinde bulunan başka bir HTML dosyasını açmaktır. Bunun için yazılması gereken HTML komutu şöyledir:

 

<a href=”dosyaismi.html”>bağlantıyı sağlayacak yazı</a>

 

“a” için anchor (çapa) ve “href” için hypertext reference diyebiliriz.

 

Dosya ismi başka bir HTML dosyası olmalıdır. “bağlantıyı sağlayacak yazı”, hipertext ve altı çizgili olacak yazıdır.

 

Şimdi, çalışmamızda yerel bir dosyaya bağlantı oluşturmak için aşağıdakileri yapacağız:

 

  1. 1.   Volkanlar.html dosyanızı text editöründe açın.
  2. 2.   St Helen Dağı başlığı altında şunları yazalım:

 

Mayıs 18, 1980’de, uzun bir dinlenmeden sonra Washington’daki bu sessiz dağ büyük patlamalar hakkında bize <a href=”msh.html”>önemli incelemeler</a> olanağı sunmuştur.

 

  1. 3.   Çalışmanızı kaydedin ve browserda tekrar yükleyin.
  2. 4.   Şimdi text editörünüzde yeni (New) bir sayfa açın.
  3. 5.   Aşağıdaki yazıyı girin:

 

<html>

<head>

<title>St Helens Dağları</title>

</head>

<body>

<h1>Mount St Helens</h1>

Tepesi ağaçlarla kaplı ve bir zamanlar sessiz olan bu dağ faaliyete geçtiğinde etrafını oyuncaklar gibi dağıttı.

 

</body>

</html>

 

  1. 6.   Bu dosyayı msh.html adında diğer dosya ile aynı yere kaydedin.
  2. 7.   Browserınızda Volkanlar.html dosyasını tekrar yükleyin.
  3. 8.   “önemli incelemeler” bağlantısını test edin. Buraya kliklediğinizde browserın msh.html dosyasını yüklemesi gerekir.

 

Bir Grafiğe Bağlantı

 

Bir grafiğe bağlantı yaparken kullanacağınız biçim dosyaya bağlantı yapma mantığıyla aynıdır. Bu sefer bağlantıyı yapan yazıya kliklediğiniz zaman karşınıza başka bir döküman yerine bağlantının sonundaki grafik gelir.

 

Başka Dizinlere Bağlantı

 

Başka dizinlerdeki dosyalara bağlantı kurmak için dosya adını yazdığınız yere dosyanın tam yerini (path) ve dosya ismini yazmanız gerekir. Mesela, bundan sonra dökümanımızda kullanacağımız resimleri /resimler adlı bir dizine koyalım. Böylece resimlerimizin sayısı arttıkça oluşacak karışıklığı azaltmış oluruz.

 

Şimdi çalışmamıza yeni bir resim ekleyelim:

 

  1. 1.   Bilgisayarınızda Volkanlar.html dosyasının bulunduğu yere “resimler” adında bir dizin açalım.
  2. 2.   Bu dizinin altına St. Helens Dağını gösteren bir resim koyalım. Bizdeki bu resimin adı “msh.gif”.
  3. 3.   “msh.html” dosyasını text editörümüzde açalım.
  4. 4.   Resime ulaşmak için gerekli yere bir bağlantı kuralım:

 

Tepesi ağaçlarla kaplı ve bir zamanlar sessiz olan bu dağ faaliyete geçtiğinde <a href=”resimler/msh.gif”>etrafını oyuncaklar gibi dağıttı</a>.

 

  1. 5.   Dökümanınızı kaydedin ve browserınızda tekrar yükleyin.

 

Son olarak “etrafını oyuncaklar gibi dağıttı” yazısına kliklerseniz aşağıdaki resimin ekranda görünmesi gerekir:

 

 

Gördüğünüz gibi başka dizinlere bağlantı kurarken tüm yolu yazmak yerine o an bulunduğumuz dizine göre olan konumu yazmamız yeterli olur. Aslında bu bağlantıları yaparken dosyaların yolunu root dizininden itibaren yazabilirdik. Fakat kullandığımız şeklin bir avantajı, dosyalarımızı bilgisayarımızdan başka bir yere taşıdığımızda (mesela kendi adresine) üzerinde değişiklik yapmamıza gerek kalmaz. Aksi taktirde dosyaların bulunduğu yerleri baştan yazmak gerekirdi.

 

Üst Dizindeki Dosyalara Bağlantı

 

Eğer bir dosya dökümanınızın bulunduğu dizinden daha önceki dizinlerde yer alıyorsa ne yapacağız? Gene root tan itibaren dizinleri yazmaktansa başka yollar deneyebiliriz.

 

Mesela şu anki dizin ve dosya sıralamamız şöyle olsun (bundan sonra dosyalarımızı bu düzene göre yazacağız):

 

Bu durumda, msh.html dosyasından msh.gif dosyasını görüntülemek için:

 

<img src=”../resimler/msh.gif”>

 

yazmamız gerekir. Burada kullandığımız “..” iki nokta bir önceki dizini belirtir.

 

Şimdi dizin ve dosyalarımızın yerinde bir değişiklik daha yapalım. “lava.gif” dosyasını “resimler” dizinin altına yerleştirelim. Bunu yaptıktan sonra dökümanımızı browserda görüntülersek lava.gif dosyasının görüntülenmediğini görürüz. Bunun sebebi artık dosyanın, bulunduğunu belirttiğimiz yerde olmamasıdır. Şimdi Volkanlar.html dosyamızı text editörümüzde tekrar açalım ve lava.gif dosyasının sayfaya eklendiği yerde şu değişikliği yapalım:

 

<img alt=”Volkanlar üzerine bir inceleme” src=”../resimler/lava.gif” width=300 height=259>

 

Bir değişiklik daha:

 

Artık yapmamız gereken değişiklik Volkanlar.html dosyasının ismini index.html yapmak. Neden mi? Bu dersleri bitirdiğinizde sayfanızı TR-net’teki accountunuza atacaksınız. Diyelim ki sayfanızın adresi http://www.deneme.com.tr/ . Son haliyle sayfanıza ulaşmak için yazmanız gereken adres: http://www.deneme.com.tr/Volkanlar.html dir. Fakat başlangıç dosyanızın adı index.html olsaydı adrese http://www.deneme.com.tr yazmanız yeterli olacaktı. Bunun sebebi, bir standart olarak browserlar, eğer bir dosya ismi belirtilmemişse index.html dosyasının olup olmadığına bakar, varsa bu dosyayı görüntüler.

 

 

9b. URL’ler

 

URL, WWW’nin bilgisayarları ve dosyaları bulmak için kullandığı yoldur. URL’in içerdikleri:

 

  • İnternet servisçi makinasının çeşiti
  • bir internet adresi
  • ulaştığı dosyanın dizin sırası (path)

 

URL’ler nasıl kullanılır?

 

URL’lerin kullanılma şekli şudur:

 

şekil://in.ter.net.adresi/dizin/alt-dizin/…/dosyaismi

 

“şekil” ile belirtilen yer, ulaşılan servisçi makinanın cinsini belirler:

 

http

            “HyperText Transfer Protocol” denen dosya aktarım biçimidir.

 

gopher

            dizinlerin bir menü şeklinde göründüğü bilgi iletim servisi

 

ftp

“File Transfer Protocol (FTP)” denen servisçi dosya aktarımının gerçekliştiği makinalar için kullanılır.  

 

telnet

Servisçi makinaya uzaktan erişebilmek için kullanılan bir servistir. Telneti kullandığınızda browserınız, bunun için yardımcı bir program kullanacaktır.

 

WAIS

“Wide Area Indexed Server”—genelde bir konu üzerine anahtar kelimelerden arama yapan servisçi

 

file

            kendi bilgisayarınızdaki dosyaya ulaşmak için kullanılır.

 

Şekil ile belirttiğimiz yerden sonra hep “://” kullanılır. Bunu ise ulaşacağımız makinanın internet adresi izler.

 

NOT: Bir çok servisçide büyük küçük harf arası fark vardır. UNIX ve LINUX bilgisayarları büyük küçük harf duyarlıdır ve bugün bir çok web sayfası bu bilgisayarlar üzerinden çalışır (TR-net’te olduğu gibi).

                       Volkanlar.html

            dosyası

                       volkanlar.html

 

            dosyasından farklıdır.

 

9c. İnternet’e Linkler Oluşturmak

 

Daha önce dosyalara bağlantılar oluşturduk. İnternet’teki sayfalara link oluşturmak da aynı yolla yapılır. Yapmanız gereken sadece dosya yerine yazdıklarınız yerine internet adresini yazmaktır. Yani, yazmanız gereken yaklaşık olarak şöyledir:

 

<a href=”URL”>Bağlantıyı sağlayacak yazı</a>

 

Şimdi, kendi dökümanımıza, Mars’taki volkanları gösteren bir sayfanın bağlantısını yapacağız.

  1. 1.   “index.html” dosyanızı text editörünüzde açın.
  2. 2.   Mars’ta Volkan Bölgeleri başlığının altına şunları yazalım:

 

<a href=”http://bang.lanl.gov/solarsys/mars.htm”>

Mars’ın</a> kendine özgü volkanik bölgeleri vardır. Bunlardan birinde ise Güneş Sisteminin bilinen en büyük volkanı, <a href=”http://bang.lanl.gov/solarsys/raw/mars/olympus.gif”>    Olympus Mons</a> yer alır.

 

  1. 3.   Çalışmanızı kaydedin ve browserda tekrar yükleyin.

 

Buna ek olarak, dökümanımızdaki referanslar kısmına volkanlarla ilgili bir kaç bağlantı daha ekleyelim. Burada listeler ile bağlantıların birlikte kullanımına dikkat edin:

 

 

 

Sayfanızın son hali şöyle olmalıdır:

 

 


 

9d. Bir Sayfanın Bölümlerine Linkler Eklemek

 

İnternetten sayfalara ve istediğiniz dosyaya bağlantılar kurmayı öğrendiniz. Eğer bir sayfanın/dökümanın belirli bir bölümüne (mesela 80. Satırına) bağlantı kurmak isteseydiniz ne yapardınız? HTML dilinde bu da mümkün. Bu iş için kullanılan belirteçlere “named anchor (isimlere bağlantı)” deniyor. İsimlere bağlantı yapabilmek için aşağıdaki örneği inceleyin:

 

<a isim=”İSİM”>Bağlantının yapılacağı yazı</a>

 

Buradaki “İSİM”, bağlantıyı yaparken kullanacağımız adres yerine gelecek. Bir dökümanın kendisinde (sayfanın içinde başka bir yere) bağlantı yaparken belirteç:

 

<a href=”#xxxx”>Hipertext gibi davranacak yazı</a>

 

şeklinde kullanılır. “#” sembolü browsera dökümanın geneline bakmasını ve “xxxx” isimli bağlantıya gitmesini söyler. Burada “Hipertext gibi davranacak yazı”ya kliklediğinizde browser “#xxxx” isminin olduğu yeri ekranın başına getirir.

 

İsterseniz dökümanımızda bu belirteci kullanarak konuyu pekiştirelim:

 

  1. 1.   Text editöründe index.html dosyasını açın.
  2. 2.   Giriş başlığına gelin ve şu şekilde değiştirin:

 

eski hali:

<h2>Giriş</h2>

 

yeni hali:

<h2><a name=”başlangıç”>Giriş</a></h2>

 

  1. 3.   Aynı mantıkla, dökümandaki diğer başlıklara da birer isim atayalım:

 

<h2><a name=”term”>Volkan Terminolojisi</a></h2>

 

<h2><a name=”mars”>Mars’ta Volkan   Bölgeleri</a></h2>

 

<h3><a name=”proje”>Araştırma Projesi</a></h3>

 

  1. 4.   Şu an dökümanınızı browserda tekrar yüklerseniz bir fark göremezsiniz, isim bağlantıları kullanıcılardan gizlenen belirteçlerdir.

 

Aynı dökümandaki isim bağlantılarına link eklemek

 

Son oluşturduğumuz isim bağlantılarını kullanabilmek için kullanıcıları sayfanın bu bölümlerine yönlendirecek hipertext linkleri oluşturmamız gerekir. Dökümanımız üzerinde çalışmaya devam edelim:

 

  1. 1.   Şu an açık değilse, index.html dosyasını açın.
  2. 2.   Volkanlar sayfası başlığının altındaki cümleden sonra aşağıdakileri yazın:

 

<hr>

<B>Bu derste…</B>

<ul><i>

<li><a href=”#başlangıç”>Giriş</a>

     <li><a href=”#term”>Volkan Terminolojisi</a>

<li><a href=”#mars”>Mars’ta Volkan Bölgeleri</a>

<li><a href=”#proje”>Araştırma Projesi</a>

</ul>

 

  1. 3.   Dökümanı kaydedip browserda tekrar yükleyin.

 

Başka bir dökümana isim bağlantıları koymak

 

Bu yöntemle başka bir sayfanın istediğiniz satırına (<a name…> belirtecini kullandığınız yerlere) bağlantı yapabilirsiniz. Bu konunun mantığı da dosyalara ya da internetteki adreslere bağlantı yapmakla aynıdır. Bu sefer ek olarak yazmanız gereken “#” işaretidir. Deneme olarak dökümanımızın msh.html dosyasına, index.html dosyasına geri dönmek için bir bağlantı koyalım.

 

  1. 1.   msh.html dosyasını text editöründe açın.
  2. 2.   Sayfanın en altına (</body> belirtecinden hemen önce) takip eden yazıyı yazın:

 

<hr>

<a href=”index.html#başlangıç”>Volkanlar Sayfasına dönüş</a>

 

  1. 3.   Dosyayı save edip browserınızda görüntüleyin.

 

Artık sayfada Volkanlar Sayfasına dönüş yazısına kliklerseniz index.html sayfasının başlangıç bölümüne dönersiniz.

 

 

Bundan sonra önceki bilgilerinizi de kullanarak bilgisayarınızda ya da internette istediğiniz dosyanın istediğiniz bölümüne bağlantı koyabilirsiniz.

 

9e. Hipergrafik Linkleri

 

Buraya kadar bağlantıları yaparken düz text kullandık. HTML de kullanabileceğimiz bir yöntem de hipergrafik bağlantılarıdır. Bu bağlantıları kullanarak istediğimiz grafiğe bir bağlantı atayabiliriz.

 

Şimdi dökümanımıza dönüp bir örnek deneyelim:

 

  1. 1.   Text editörünüzde index.html dosyanızı açın.
  2. 2.   Long Valley başlığı altına aşağıdakileri yazın:

 

Bu alan seismometresi volkanların yüzeye yaptığı basınç sonucu oluşan depremlerin kuvvetini ölçer. Bulunduğu yer, 600 bin yıl önce patlamış bir volkanın platosudur.

<p>

<a href=”../resimler/seismo.jpg”><img src=”../resimler/stamp.gif”>

— [Resimin Büyük Hali] — </a>

<p>

 

  1. 3.   Dosyayı kaydedin ve browserda tekrar yükleyin.

 

Ekrandaki resime mouse’u götürürseniz bir hipertext linki olduğunu göreceksiniz.

Bir cevap yazın

This site uses Akismet to reduce spam. Learn how your comment data is processed.