Html'de klasörün yolu nasıl yazılır. Yolların açıklaması: mutlak, göreli, UNC ve URL

Bağlantı adresi mutlak veya göreli olabilir. Mutlak adresler bir protokolle (genellikle http://) başlamalı ve site adını içermelidir. Göreli bağlantılara sitenin kökünden veya geçerli belgeden başvurulur.

Örnek 8.2, başka bir siteye nasıl mutlak bir bağlantı oluşturulacağını gösterir.

Örnek 8.2. Mutlak bağlantıları kullanma

HTML öğrenmek

Bağlantı olarak bir site dizini (örneğin, http: // site / css /) belirttiğinizde, dizin dosyası görüntülenir. Bu, açıkça bir dosya adı belirtmeden bir dizine erişirken varsayılan olarak yüklenen dosyadır. Genellikle, dizin dosyası, dizin.html adlı bir belgedir.

Mutlak bağlantılar genellikle başka bir ağ kaynağındaki bir belgeyi belirtmek için kullanılır, ancak mevcut site içinde mutlak bağlantılar yapılmasına izin verilir. Bununla birlikte, bu tür bağlantılar oldukça uzun ve hantal olduğu için nadiren uygulanmaktadır. Bu nedenle site içerisinde ağırlıklı olarak göreceli bağlantılar kullanılmaktadır.

Geçerli belgeye göre bağlantılar

Göreli bağlantılar oluştururken, dosyaların orijinal konumuna bağlı olduğundan, href niteliği için hangi değeri belirteceğinizi bilmeniz gerekir. Birkaç tipik seçeneği ele alalım.

1. Dosyalar bir klasörde bulunur (Şekil 8.4).

Bu dosya adı sadece bir örnek için alınmıştır, sitede dosya adlarında ve hatta farklı durumlarda boşluklu Rusça karakterler kullanılmamalıdır.

2. Dosyalar farklı klasörlerde bulunur (Şekil 8.5).

Orijinal belge aynı klasörde depolandığında ve başvurulan belge sitenin kök dizininde olduğunda, bağlantı adresindeki dosya adından önce aşağıda gösterildiği gibi iki nokta ve bir bölü (/) koymalısınız.

Bu durumda iki nokta, mevcut klasörü daha yüksek bir seviyeye bırakmak anlamına gelir.

3. Dosyalar farklı klasörlerde bulunur (Şekil 8.6).

Artık kaynak dosya iki alt klasördedir ve sitenin kökündeki belgeye bağlanmak için önceki örneğin yazısını iki kez tekrarlamanız gerekir.

Bağlantı

Aynısı, herhangi bir sayıda alt klasör için de geçerlidir.

4. Dosyalar farklı klasörlerde bulunur (Şekil 8.7).

Artık durum değişiyor, kaynak dosya sitenin kök dizininde, bağlanılacak dosya ise klasörde bulunuyor. Bu durumda dosyanın yolu aşağıdaki gibi olacaktır.

Bağlantı

Klasör adının önünde fazladan nokta veya eğik çizgi olmadığına dikkat edin. Dosya bir değil iki klasörün içindeyse, yolu aşağıdaki gibi yazılır.

Bağlantı

Site köküne göre bağlantılar

Bazen dosyanın yolunu site köküne göre bulabilirsiniz, şöyle görünür: "/ Klasör / Dosya adı" başında bir eğik çizgi ile. Yani, giriş Dersler bağlantının, sitenin kökünde bulunan kurs adlı bir klasöre yönlendirdiği ve içinde dizin dosyasını indirmeniz gerektiği anlamına gelir.

Lütfen bu kayıt formunun yerel bilgisayarda çalışmadığını, sadece web sunucusunun kontrolü altında çalıştığını unutmayın.

Bu bölümde sizlere yazdığımız linkler-yollardan bahsedeceğiz. HREF özelliği.
Şu anda bildiğimiz tek şey sadece şablon:
Çapa
Yeni başlayanlar için bu bilgi yeterli, büyük bir projeyi üstlenen bir profesyonel için hayır !!! Gerçekten de büyük projelerde içeri girip çıkması gereken bölümler var… Ve sonra nasıl yapılacağı ve nasıl doğru yapılacağı soruları ortaya çıkıyor?

Öğrenmeyi kolaylaştırmak için üç sayfalık bir kartvizit sitesi oluşturalım. index.html dosyamız bizim için henüz bir değer taşımadığı için onu düzenleyip kullanacağız:

Teklifimiz
Bağlantılarımız
Ardından, bir dosya oluşturalım delo.html, size hizmetlerimizden bahsedeceğimiz: Ana sayfa
Bağlantılarımız
Ve ayrıca bir dosya oluşturun kontakt.html, bizimle iletişime geçmek için: Ana sayfa
Teklifimiz
Şimdi bakalım (yeni bir sekmede açılır) elimizde ne var.

Bu örneklerle her şeyin işe yaradığını göstermek istedim. Ama bir büyük ANCAK, doğrudan dosyalara atıfta bulunuyoruz ancak yollar görünmüyor ...
işte bu göreceli yol, yani yol, başvuru dosyasına göredir, ancak tüm dosyalarımız aynı dizinde (klasör) bulunduğundan yolun kendisi görünmez.
Eğitim klasörümüzde (my_site) adında başka bir klasör oluşturalım. razdel ve zaten içinde yeni bir dosya oluşturacağız. index.html... Bu durumda, yukarıda oluşturduğumuz dosyalarımızdan nasıl bir bağlantı koyabiliriz?
razdel / index.html "> bölümü
Ve eğer klasördeyse razdel klasör oluştur podrazdel o zaman yol zaten kök klasörden olacaktır:
razdel / podrazdel / index.html "> alt bölüm
ve klasörden razdel
podrazdel / index.html "> alt bölüm
Lütfen klasörler ve / veya dosyalar arasındaki ayırıcının bir "ileri sıçrama" (eğik çizgi) olduğunu unutmayın.

Klasörlere nasıl girileceğini öğrendik, şimdi nasıl çıkacağımıza bakalım:
razdel'deki podrazdel klasöründen çıkmak için yola eklemeniz gerekir ../ , bu karakter seti tarayıcıya istenen dosyanın bir seviye daha yüksek olduğunu söyler:
../index.html"> Bölüme geri dön
2 seviyeye dönmek için bu kombinasyonu iki kez yazın:
../../ index.html "> site köküne dön

Şimdi mutlak yollara bakmayı öneriyorum. Kesin yol bu, site adını ve protokolünü (http veya https) içeren bir dosya yoludur. Diyelim ki klasörümüz benim sitem ve bir site kökü var ve site adı my_site.ru'dur, bu durumda mutlak yol şöyle olacaktır:
http://my_site.ru veya http://my_site.ru/ veya http://my_site.ru/index.html
Klasörün mutlak yolu ise razdel
http://my_site.ru/razdel veya http://my_site.ru/razdel/ veya http://my_site.ru/razdel/index.html

Kullanmanın en iyi yolları nelerdir? mutlak !!! Fakat bu linkler belirli bir siteye işaret ettiği için hata yapma ihtimali var ve yerel olarak (sunucu olmadan) bu hataları düzeltemiyoruz...

Ve bir kez daha ana sayfa hakkında, my_site.ru bağlantısını koymayın, çünkü tarayıcı hala my_site.ru/ adresine yönlendirilecektir, yani bir yönlendirme (yönlendirme) gerçekleşir ve arama motorları yönlendirmeleri pek sevmez.
Ayrıca, my_site.ru/index.html bağlantısını asla koymayın, çünkü bu, my_site.ru/ için bir çifttir ve arama motorları açısından bunlar iki farklı sayfadır ve bu durumda bir içerik kopyası vardır ve buna arama motorları tarafından saygı gösterilmez. Yani mutlak olanlar için doğru bağlantı: my_site.ru/ ve aynı klasörden göreli olanlar için: / veya inişler: ../ ... Ve mutlak yollar kullanırsanız, adresi nasıl yazacağınıza (www ile veya www olmadan) karar vermeniz gerekir, kişisel (adanmış) bir sunucunuz varsa, o zaman olmadan ve yalnızca bir parça kiralarsanız, burada her şey basittir. sunucunun, ardından www .

Bağlantı adresi mutlak veya göreli olabilir. Mutlak adresler bir protokolle (genellikle http://) başlamalı ve site adını içermelidir. Göreli bağlantılara sitenin kökünden veya geçerli belgeden başvurulur.

Örnek 8.2, başka bir siteye nasıl mutlak bir bağlantı oluşturulacağını gösterir.

Örnek 8.2. Mutlak bağlantıları kullanma

HTML öğrenmek

Bağlantı olarak bir site dizini (örneğin, http: // site / css /) belirttiğinizde, dizin dosyası görüntülenir. Bu, açıkça bir dosya adı belirtmeden bir dizine erişirken varsayılan olarak yüklenen dosyadır. Genellikle, dizin dosyası, dizin.html adlı bir belgedir.

Mutlak bağlantılar genellikle başka bir ağ kaynağındaki bir belgeyi belirtmek için kullanılır, ancak mevcut site içinde mutlak bağlantılar yapılmasına izin verilir. Bununla birlikte, bu tür bağlantılar oldukça uzun ve hantal olduğu için nadiren uygulanmaktadır. Bu nedenle site içerisinde ağırlıklı olarak göreceli bağlantılar kullanılmaktadır.

Geçerli belgeye göre bağlantılar

Göreli bağlantılar oluştururken, dosyaların orijinal konumuna bağlı olduğundan, href niteliği için hangi değeri belirteceğinizi bilmeniz gerekir. Birkaç tipik seçeneği ele alalım.

1. Dosyalar bir klasörde bulunur (Şekil 8.4).

Bu dosya adı sadece bir örnek için alınmıştır, sitede dosya adlarında ve hatta farklı durumlarda boşluklu Rusça karakterler kullanılmamalıdır.

2. Dosyalar farklı klasörlerde bulunur (Şekil 8.5).

Orijinal belge aynı klasörde depolandığında ve başvurulan belge sitenin kök dizininde olduğunda, bağlantı adresindeki dosya adından önce aşağıda gösterildiği gibi iki nokta ve bir bölü (/) koymalısınız.

Bu durumda iki nokta, mevcut klasörü daha yüksek bir seviyeye bırakmak anlamına gelir.

3. Dosyalar farklı klasörlerde bulunur (Şekil 8.6).

Artık kaynak dosya iki alt klasördedir ve sitenin kökündeki belgeye bağlanmak için önceki örneğin yazısını iki kez tekrarlamanız gerekir.

Bağlantı

Aynısı, herhangi bir sayıda alt klasör için de geçerlidir.

4. Dosyalar farklı klasörlerde bulunur (Şekil 8.7).

Artık durum değişiyor, kaynak dosya sitenin kök dizininde, bağlanılacak dosya ise klasörde bulunuyor. Bu durumda dosyanın yolu aşağıdaki gibi olacaktır.

Bağlantı

Klasör adının önünde fazladan nokta veya eğik çizgi olmadığına dikkat edin. Dosya bir değil iki klasörün içindeyse, yolu aşağıdaki gibi yazılır.

Bağlantı

Site köküne göre bağlantılar

Bazen dosyanın yolunu site köküne göre bulabilirsiniz, şöyle görünür: "/ Klasör / Dosya adı" başında bir eğik çizgi ile. Yani, giriş Dersler bağlantının, sitenin kökünde bulunan kurs adlı bir klasöre yönlendirdiği ve içinde dizin dosyasını indirmeniz gerektiği anlamına gelir.

Lütfen bu kayıt formunun yerel bilgisayarda çalışmadığını, sadece web sunucusunun kontrolü altında çalıştığını unutmayın.

Bildiğiniz gibi etiketin href parametresinde () bağlantının yapıldığı dosyanın yolunu belirtmelisiniz.
Birçok kişi http://somesite.ru/catalog/doc.html gibi bir şeyler yazar. Evet, kimse tartışmıyor, işe yarıyor. Ama bir "ama" var. Bir örneğe bakalım.

Örneğin, sitenizin bazı ücretsiz barındırmalarda barındırılmasına izin verin ve adresi şuydu: http://fsite.freehosting.ru.
Sunucuda yaklaşık 100 belge var. Böylece sitenizi başka bir alana taşımaya karar verdiniz,
ru bölgesinde barındırma ödenmesine izin verin: http://site.ru. Peki, şimdi her yerde http://fsite.freehosting.ru'yu http://site.ru olarak mı değiştiriyorsunuz?
Evet, homesite gibi editörler sayesinde bu mümkün. Ama bu bir seçenek değil.
Sunucuya bir sayfa yüklemeden önce işlevselliğini kontrol ettiğinizi varsayalım.
ev apache sunucunuzda ("ev sunucusunun" ne olduğunu henüz bilmeyenler için - burada (Apache sunucusunu kurma ve yapılandırma) ve http: // localhost yerine http://site yazmanız gerekecek .ru her yerde Katılıyorum, en azından rahatsız edici.

Çözüm, dosyanın yolunu belirlerken sitedeki konumunu değil, sunucudaki konumunu dikkate almaktır.

Kesin yol

Örneğin, http://somesite.ru/catalog/doc.html adresinde bulunan doc.html dosyasını alın. Bildiğiniz gibi, sunucu www klasörünü içerir. Adresten de görebileceğimiz gibi bu klasör katalog klasörünü içerir ve doc.html dosyasını zaten içerir.

Dosyanın yolunu belirtirken, adresin önüne / koyarsanız, aşağıdakine benzer olacaktır: root_directory_on_north / www / dosyanın yolu.
Yani, http://somesite.ru/catalog/doc.html şuna benzer: /catalog/doc.html.
Yani adresin önünde / olması "sayma"nın www dizininden başladığı anlamına gelir.
Artık herhangi bir belgeden http://localhost/index.html yerine /index.html yazabilirsiniz.
Ancak cgi dizinine ulaşmak için şöyle yazmanız gerekir: / cgi-bin / dosyanın yolu.

Sunucudaki dosyanın mutlak (tam) yolu belirtildiğinden, yukarıda açıklanan yöntemlerle oluşturulan yollara mutlak denir.

Göreceli yol

Bağlantının geldiği belgenin kendisine göreli yollar da vardır.
Örneğin, doc.html'de bir newcat / new.html bağlantısı oluşturursanız, bu, new.html dosyasının, doc.html dosyasıyla aynı dizinde bulunan newcat dizininde bulunduğu anlamına gelir. . Gördüğünüz gibi, bu yol doc.html dosyasına göredir. Bu dosya nerede bulunursa bulunsun, doc.html dosyası ve newcat dizini aynı seviyedeyse (yani aynı dizinde) newcat / new.html yolu her zaman doğru olacaktır.

Ayrıca, bazı belgelere göre dizinde yukarı gidebilirsiniz. Bunu yapmak için ../ yazmanız gerekir.
Örneğin, büyük bir dizin var, iki dizin içeriyor: birincil ve ikincil. Birincil dizin zaten bilinen doc.html dosyasını içerir; ve ikincil dizin, new.html dosyasını içerir. doc.html dosyasından new.html dosyasına link oluşturabilmek için ../ ikincil / new.html yazmanız gerekmektedir. Ancak büyük dizin www dizinindeyse, new.html dosyasının yolu şu şekilde belirtilebilir: /big/secondary/new.html

Bu derste, yeni başlayanlara mutlak ve göreli dosya yolunun ne olduğunu ve hangi durumda hangisini kullanmanın daha iyi olduğunu açıklayacağız. Bu konuya zaten aşina iseniz, bir sonraki derse geçebilirsiniz.

Öyleyse, "yol" terimini tanımlayarak başlayalım:

Yol (İngilizce yol) - dosya sistemindeki bir dosyanın konumunu, dizin adresini gösteren bir dizi karakter.

Vikipedi

Siteler hakkında konuşursak, yol bağlantı ile aynıdır. Bağlantılar mutlak veya göreceli olabilir. Her iki seçeneği de daha ayrıntılı olarak ele alalım.

Mutlak dosya yolu nedir

https://www.google.com/images/branding/googlelogo.png

Mutlak yol, CSS'de kullanılabilir. Örneğin, bir resmi arka plan olarak ayarlamak için, resim dosyasının mutlak URL'sini alabilir VE bunu stil sayfasında belirtebilirsiniz:

Arka plan resmi: url (http://www.example.com/img/bg.png);

Göreceli dosya yolu nedir

Göreceli adresle her şey çok daha ilginç - hem site kökünden hem de mevcut belgeden sayılabilir. Kök göreli yol sitenin kök dizinine göre dosyanın konumunu gösteren bir yoldur. Bu durumda, adres herhangi bir protokol veya etki alanı adı içermez ve kök klasörü belirten bir eğik çizgi / ile başlar. Bu adres şöyle görünür:

Arka plan resmi: url (/img/bg.png);

Kök göreli adresini belirlemek ne kadar kolay? Mutlak bir bağlantı alın ve eğik çizgiyi ve ardından gelen karakterleri bırakarak protokolü ve alan adını ondan kaldırın.

Belgeden dosyanın göreli yolu geçerli belgeye göre dosyanın yoludur. Bu adres, yazıldığı dosyanın konumuna bağlıdır. Örneğin, bir stil sayfasında göreli bir bağlantı belirtildiğinde, dosya yolunu geçerli web sayfası veya kök klasör yerine stil sayfasına göre hesaplar. İşte bazı örnekler.

Örnek I

Stil sayfamız style.css ve arka plan resim dosyası bg.png aynı klasördeyse (mutlaka kök değil), tablodan resme giden göreceli yol şöyle görünecektir:

Arka plan resmi: url (bg.png); / * sadece dosya adını yazarsın * /

Örnek II

Stil sayfası kökteyse ve görüntü img klasöründeyse, ilgili bağlantı şöyle olur:

Arka plan resmi: url (img / bg.png); / * başına eğik çizgi yok * /

Örnek III

Stil sayfası bir klasördeyse ve resim bu klasöre bitişikse, ilgili yol şöyle olacaktır:

Arka plan resmi: url (../ bg.png); / * iki nokta - bir seviye yukarı git * /

Örnek IV

Stil sayfası iki klasördeyse ve resim ilk klasöre bitişikse, ilgili yol aşağıdaki gibi olacaktır:

Arka plan resmi: url (../../ bg.png); / * iki seviye yukarı çık * /

Göreli bir yolun başlangıcındaki iki nokta ve bir eğik çizgi, bir seviye yukarı çıkmak anlamına gelir. Tırmanmanız gereken seviye (katalog) sayısına bağlı olarak, gerekli sayıda noktayı bir eğik çizgi ile kaydetmeniz gerekir. Örneğin, stil sayfası iki değil dört klasör halindeyse, giriş aşağıdaki gibi olacaktır:

Arka plan resmi: url (../../../../ bg.png);

Resmin img klasöründe gizlenmesi ve stil sayfasının css klasöründe olması durumunda, css klasöründen çıkmanız ve img klasörüne gitmeniz gerekecektir. Bunun gibi:

Arka plan resmi: url (../ img / bg.png);

Birkaç klasör varsa, onları da kaydetmeniz gerekir. Bir önceki örneği değiştirelim: img klasöründe çizimimizin bulunduğu başka bir arka plan klasörü olduğunu düşünelim. Göreceli yol şöyle olacaktır:

Arka plan resmi: url (../ img / arka planlar / bg.png);

Hangi yolu kullanmak daha iyidir

Bağlantı mutlak adresi Bağlandığınız dosya başka bir sitedeyse kullanılması gerekecektir. Aynı site içinde, mutlak yol pratik olarak kullanılmaz (işe yarayacak olmasına rağmen). Bu birkaç noktadan kaynaklanmaktadır: ilk olarak, bu tür bağlantılar çok hantal olabilir ve ikincisi, alan adı değişirse bir sorun olacaktır - tüm bağlantılar eski alana yönlendirecektir, bu da birçok hataya ve kırık bağlantılara yol açabilir. .

Kök göreli yol bir web sunucusunda çalışacak, ancak yerel bir makinede geliştirirken işe yaramaz. Ancak bu tür bir bağlantının avantajı, stil sayfanızı sitedeki herhangi bir klasöre taşıyabilmeniz ve arka plan resimlerinin URL'lerinin çalışmaz hale gelmesinden korkmamanızdır.

Belgeden göreli yol- bir sunucu kullanmadan yerel bir makinede web geliştirme için en iyi seçenek. Bir tarayıcıda, bilgisayarınızda depolanan web sayfalarını normal şekilde görüntüleyebileceksiniz ve dosya adresleri çalışacaktır. Canlı bir sitede çalışacaklar, ancak bir koşulla - stil sayfasını başka bir konuma taşımazsanız (aksi takdirde yolları ayarlamanız gerekir).

Hem yerel bilgisayarınızda hem de web sunucusunda göreli yolları kullanarak alıştırma yapmayı deneyin. Nasıl çalıştığını anlamak, herhangi bir projede kesinlikle kullanışlı olacaktır.

Öğreticide ayrıca: background-repeat özelliği - arka plan görüntüsünün tekrarını kontrol edin.