Link Oluşturmanın Mantığı
Bu dersteki mantık hem işletim sistemindeki dosya sistemi mantığıdır. Hem de statik web sitelerindeki linklerin çalışma mantığıdır. Bu konuyu tüm detayıyla anlattık. Bu yüzden bu dersi gerekirse defalarca okuyarak ve zihin yorarak anlamaya çalışın.
Link oluşturmak için 3 farklı metot kullanılır. İlk metodumuz linkin tamamını girmektir. Örneğin https://hakkod.com/iletisim/ şeklinde linkin tamamını girmektir.
Örneğin statik sitemizin yapısı aşağıdaki şekildeki gibi olsun.
- index.html
- sayfa1.html
- sayfa2.html
- icerikler
- icerik1.html
- icerik2.html
Buradaki "icerikler" yazısı alt dallara ayrıldığı için bir klasörü temsil etmektedir. İlk metodumuza göre bunların linklerini girelim.
- index.html (https://hakkod.com/ veya https://hakkod.com/index.html)
- sayfa1.html (https://hakkod.com/sayfa1.html)
- sayfa2.html (https://hakkod.com/sayfa2.html)
- makaleler
- makale1.html (https://hakkod.com/makaleler/makale1.html)
- makale2.html (https://hakkod.com/makaleler/makale2.html)
Fark ettiyseniz makaleler klasörünün linki yok. Çünkü makaleler klasörünün içerisinde index.html belgesi yoktur. Eğer aşağıdaki gibi olsaydı o zaman https://hakkod.com/makaleler/ şekline ve https://hakkod.com/makaleler/index.html şeklinde erişim sağlanabilirdi.
- index.html (https://hakkod.com/ veya https://hakkod.com/index.html)
- sayfa1.html (https://hakkod.com/sayfa1.html)
- sayfa2.html (https://hakkod.com/sayfa2.html)
- makaleler (https://hakkod.com/makaleler/)
- index.html (https://hakkod.com/makaleler/index.html)
- makale1.html (https://hakkod.com/makaleler/makale1.html)
- makale2.html (https://hakkod.com/makaleler/makale2.html)
https://hakkod.com/makaleler/ şeklinde bir istekte bulunulduğunda arka plandan makaleler klasörünün içerisindeki index.html belgesindeki kodlar gönderilir. Yani https://hakkod.com/makaleler/ ile https://hakkod.com/makaleler/index.html aynı sonucu verir.
İkinci metot ise linkleri kök dizininden itibaren vermektir. Bu metot ile ilk metot arasındaki fark protokolün (protokolden kastımız http:// ve https:// ifadeleri) ve alan adının çıkartılmasıdır. Aşağıdaki örnekteki linkler ikinci metoda göre verilmiştir.
- index.html (/ veya /index.html)
- sayfa1.html (/sayfa1.html)
- sayfa2.html (/sayfa2.html)
- makaleler (/makaleler/)
- index.html (/makaleler/index.html)
- makale1.html (/makaleler/makale1.html)
- makale2.html (/makaleler/makale2.html)
Bu metodlardan sadece bir tanesi bile kullanmak yeterli olacağı için üçüncü metot karmaşık gelirse endişelenmenize gerek yoktur. Çünkü birinci veya ikinci metodu tercih ettiğinizce üçüncü metoda gerek kalmayacaktır. Bizim kullandığımız ve size de tavsiye ettiğimiz metot 2. metottur. Çünkü alan adı değişirse tüm linkleri tekrardan düzenlemeniz gerekmez. İkinci metot ilk metoda göre daha esnektir. Fakat ikinci metodu kullanabilmeniz için cihazınıza bir web sunucusu kurmanız gerekmektedir. Eğer cihazınıza bir web sunucusu kurmadan sayfaları birbirine bağlamak isterseniz o zaman üçüncü metodu kullanmanız gerekir. Web sunucusu kurmayı ileriki derslerde anlatacağız. Şimdilik işin mantığını zihninizde oturtmaya çalışın.
Üçüncü metotta ise işler biraz değişmektedir. Çünkü üçüncü metotta linkler göreli olarak verilir. Örneğin siz sayfa1.html'den sayfa2.html'e geçiş yapmak istiyorsanız ilk metotta https://hakkod.com/sayfa2.html yazmanız yeterlidir. İkinci metotta ise bu linki /sayfa2.html şeklinde verebilirsiniz. Veya ilk metotta sayfa1.html'den makale1.html'e geçiş yapmak istiyorsanız https://hakkod.com/makaleler/makale1.html şeklinde link vermeniz yeterlidir. İkinci metotta ise /makaleler/makale1.html şeklinde link vermeniz yeterlidir.
Üçüncü metot ile sayfa1.html'den sayfa2.html'e geçiş yapmak istiyorsanız linki slaş (/) olmadan sayfa2.html şeklinde vermeniz yeterlidir. sayfa1.html'den makale2.html'e geçiş yapmak içinde yine slaş koymanıza gerek yoktur. Bunun yerine makaleler/makale1.html yazmanız yeterlidir. Fakat siz makale1.html'den sayfa1.html'e link vermek istiyorsanız o zaman ../sayfa1.html yazmanız gerekmektedir. Buradaki iki tane nokta ve slaş (../) bir alt klasöre in demektir. Çünkü makale1.html bir üst klasörde bulunur ve bir alt klasöre inerek sayfa1.html'e link verir. Bu yapı metot 1 ve metot 2 de değişmez. Eğer ilk metot ile makale1.html'den sayfa1.html'e geçiş yapmak isterseniz herhangi bir değişiklik yapmadan tüm url adresini https://hakkod.com/sayfa1.html şeklinde yazabilirsiniz. Yine ikinci metot ile yapmanız gerekirse /sayfa1.html yazabilirsiniz. Üçüncü metotta linkleri dosyalara göre ayarlamanız gerekeceği için ilk başta karmaşık gelebilir. Bu yüzden sizlere tavsiyemiz ikinci metodu kullanmanızdır.
Tekrardan bir örnek yapalım. Örneğin üçüncü metoda göre makale1.html'den makale2.html'e link vermek isterseniz makale2.html yazmanız yeterlidir. Fakat ilk baştaki index.html, sayfa1.html veya sayfa2.html'den makale2.html'e link vermek isterseniz o zaman slaş (/) kullanmanız gerekir. Örneğin makaleler/makale2.html şeklinde link vermeniz gerekir. Fakat bir üst dizinde bulunan bir belgeden örneğin makale2.html'den sayfa2.html'e link vermek isterseniz bir alt klasöre inmeniz gerekeceği için ilk önce iki nokta ve bir slaş koymanız gerekmektedir. Örneğin makale2.html içerisinden ../sayfa2.html şeklinde link vermeniz gerekecektir.
Örneğin aşağıdaki gibi bir klasör yapınız olsun:
- index.html
- iletisim.html
- tarifler
- pasta-tarfileri
- kek-tarifi.html
- pasta-tarfileri
Bu klasör yapısında tarifler ve pasta-tarifleri birer klasördür. Şimdi her üç metot ile iletisim.html'den kek-tarifleri.html'e link verelim.
- İlk metot: https://hakkod.com/tarifler/pasta-tarfileri/kek-tarifi.html
- İkinci metot: /tarifler/pasta-tarfileri/kek-tarifi.html
- Üçüncü metot: tarifler/pasta-tarfileri/kek-tarifi.html
Şimdi de üç metodu kullanarak kek-tarifi.html'den iletisim.html'e link verelim.
- İlk metot: https://hakkod.com/iletisim.html
- İkinci metot: /iletisim.html
- Üçüncü metot: ../../iletisim.html
Fark ettiyseniz üçüncü metodda iki defa (../) ifadesini kullandık. İlk kullandığımızda pasta-tarifleri klasörüne indik. Ardından ikinci kez (../) ifadesini kullanarak kök dizinine indik ve böylece iletisim.html sayfasının bulunduğu konuma gelmiş olduk.