Kuten tiedät, tunnisteen href-parametrissa () sinun on määritettävä viittauksen kohteena olevan tiedoston polku.
Monet ihmiset kirjoittavat jotain kuten http://somesite.ru/catalog/doc.html. Kyllä, kukaan ei kiistä, se toimii. Mutta on yksi "mutta". Katsotaanpa esimerkkiä.

Anna sivustosi isännöidä esimerkiksi jollakin ilmaisella isännöinnillä ja sen osoite oli seuraava: http://fsite.freehosting.ru.
Palvelimella on noin 100 dokumenttia. Joten päätät siirtää verkkosivustosi toiseen verkkotunnukseen,
Olkoon se maksullinen isännöinti ru-alueella: http://site.ru. No, pitäisikö meidän nyt muuttaa http://fsite.freehosting.ru osoitteeksi http://site.ru kaikkialla?
Kyllä, kotisivun kaltaisten toimittajien ansiosta tämä on mahdollista. Mutta tämä ei ole ratkaisu.
Oletetaan, että tarkistat sen toimivuuden ennen kuin lataat sivun palvelimelle
kotiapache-palvelimellasi (niille, jotka eivät vielä tiedä, mikä "kotipalvelin" on, mene tähän (Apache-palvelimen asennus ja määrittäminen), ja http://localhostin sijaan sinun on kirjoitettava http:// site.ru kaikkialla samaa mieltä tästä, ainakin se on hankalaa.

Ratkaisu on, että määritettäessä tiedoston polkua ei oteta huomioon sen sijaintia sivustolla, vaan sen sijainti palvelimella.

Absoluuttinen polku

Otetaan esimerkiksi tiedosto doc.html, joka sijaitsee osoitteessa: http://somesite.ru/catalog/doc.html. Kuten tiedät, palvelimella on www-kansio. Kuten osoitteesta näemme, tämä kansio sisältää luettelokansion, ja se sisältää jo doc.html-tiedoston.

Jos määrität tiedoston polkua / ennen osoitetta, se on samanlainen kuin seuraava: juurihakemisto_pohjoisessa_pohjoinen/www/tiedoston polku.
Eli http://somesite.ru/catalog/doc.html on samanlainen kuin seuraava: /catalog/doc.html.
Joten kun osoitteen edessä on /, se tarkoittaa, että "laskenta" alkaa www-hakemistosta.
Nyt voit kirjoittaa /index.html mistä tahansa asiakirjasta http://localhost/index.html sijaan.
Mutta päästäksesi cgi-hakemistoon sinun on kirjoitettava näin: /cgi-bin/polku tiedostoon.

Yllä kuvatuilla menetelmillä luotuja polkuja kutsutaan absoluuttisiksi, koska palvelimella olevan tiedoston absoluuttinen (täysi) polku ilmoitetaan.

Suhteellinen polku

On myös suhteellisia polkuja, jotka on määritetty suhteessa itse asiakirjaan, josta linkki tulee.
Jos esimerkiksi luot linkin tiedostoon doc.html newcat/new.html, tämä tarkoittaa, että tiedosto new.html sijaitsee newcat-hakemistossa, joka puolestaan ​​on samassa hakemistossa kuin doc.html-tiedosto. Kuten näet, tämä polku on suhteessa doc.html-tiedostoon. Missä tahansa tämä tiedosto sijaitsee, polku newcat/new.html on aina voimassa, jos doc.html-tiedosto ja newcat-hakemisto ovat samalla tasolla (eli samassa hakemistossa).

Voit myös siirtää hakemistoa ylöspäin suhteessa asiakirjaan. Tätä varten sinun on kirjoitettava ../.
Esimerkiksi on olemassa hakemisto iso, se sisältää kaksi hakemistoa: ensisijainen ja toissijainen. Ensisijainen hakemisto sisältää jo tutun doc.html-tiedoston; ja toissijaisessa hakemistossa on tiedosto new.html. Jotta voit luoda linkin doc.html-tiedostosta new.html-tiedostoon, sinun on kirjoitettava ../secondary/new.html. Mutta jos iso hakemisto sijaitsee www-hakemistossa, polku new.html-tiedostoon voidaan määrittää seuraavasti: /big/secondary/new.html

Johtopäätöksen sijaan on syytä sanoa, että absoluuttisten ja suhteellisten polkujen käyttö helpottaa huomattavasti web-mastereiden työtä, olipa he sitten aloittelija tai ammattilainen. Joten käytä tätä tilaisuutta, kuten he sanovat, täysimääräisesti ja yritä välttää polkuja, kuten http://site.ru/catalog/file.file, tai ainakin turvautua heidän apuunsa mahdollisimman harvoin.

Artikkeli sisältää koodinpätkiä. Täysi versio on ladattavissa täältä - https://bitbucket.org/okiseleva/html-and-css-learn/src. Kansiot - "absolute_path_lvl_1" ja kaikki alikansiot.

Polku voi olla absoluuttinen tai suhteellinen.

Absoluuttinen polku

Absoluuttinen polku on polku juurikansiosta tiedostoon.

Polku koostuu kaikista kansioista, joita meidän on tarkasteltava, erotettuina vinoviivalla. Katsotaanpa esimerkkiä:

/absolute_path_lvl_1/level_2.1/level_3.1/Kevin.png

Absoluuttinen polku tiedostoon

Suhteellinen polku

Suhteellinen polku on linkki, joka osoittaa sivustosi muille sivuille suhteessa siihen verkkosivuun, jolla linkki on jo olemassa.

Jos siirrämme kansioita alaspäin, erotamme ne myös käyttämällä "/". Jos haluat nousta tasolle, kirjoita ".."

1. Yksinkertaisin esimerkki suhteellisesta polusta on vain tiedoston nimi. jos tiedosto on lähellä, ilmoita sen nimi

Hello.png

Suhteellinen polku, tiedosto lähellä

2. Siirry yhden kansion verran ylöspäin

../Kevin_lvl_2.png

Suhteellinen polku 2

3. Monimutkaisempi esimerkki, alkaen Diff_paths.html kuvaan Kevinin kanssa

../level_2.1/level_3.1/Kevin.png

Suhteellinen polku 3

Mitä eroa on absoluuttisten ja suhteellisten polkujen välillä?

Se on hyvin yksinkertaista. Jos polku määritetään järjestelmän juuresta, tämä on absoluuttinen polku. Miten se on? postiosoite V oikeaa elämää- minne menetkin, löydät aina oikean paikan tarkasta osoitteesta.

Jos juuria ei ole määritetty polun alussa, tämä polku on suhteellinen ja se valmistuu alkaen nykyinen tilanne. Tosielämässä se on kuin tie viinakauppaan - "kaksi korttelia vasemmalle ja suoraan koko ajan." Tälle polulle pääsee vain tietystä pisteestä. Toisesta päädyt täysin eri paikkaan.

Tiedostossa absoluuttinen_polku_lvl_1/level_2.2/Diff_paths.html voit nähdä HTML esimerkki sivuja, joilla on eri tiedostopolut.

Tässä on esimerkki absoluuttisesta ja suhteellisesta polusta samalle tiedostolle Kevinin kanssa.

D:/hgprojects → Latasin "html-and-css-learn" -projektin tästä. Sinulla voi olla toinen tapa

PS - lisätietoja kirjassa "

Linkit voidaan jakaa kahteen luokkaan:
linkkejä ulkoisia resursseja - luotu tunnisteen avulla ja sitä käytetään laajentamaan ominaisuuksia nykyinen asiakirja kun selain käsittelee sen;
hyperlinkkejä— linkkejä muihin resursseihin, joissa käyttäjä voi käydä tai ladata.

Kuinka tehdä hyperlinkkejä verkkosivustolle

1. Linkin rakenne

Hyperlinkit luodaan käyttämällä tunnistepari. Web-sivulla näkyvä teksti sijoitetaan tunnisteen sisään. Linkin teksti näkyy selaimessa alleviivauksella, fontin väri on sininen ja kun siirrät hiiren linkin päälle, hiiren osoitin muuttaa ulkoasua.

Pakollinen tunnisteparametri on href-attribuutti, joka määrittää verkkosivun URL-osoitteen.

linkkihakemisto

Linkki koostuu kahdesta osasta − osoitin Ja osoiteosa. Linkkihakemisto on tekstin tai kuvan pala, joka näkyy käyttäjälle. Osoite osa Linkki ei näy käyttäjälle, se edustaa sen resurssin osoitetta, johon sinun on siirryttävä.

Linkin osoiteosa koostuu URL-osoitteesta. URL-osoite(Uniform Resource Locator) - yhtenäinen resurssiosoite. Osoitteita luotaessa on suositeltavaa käyttää väliviivaa alaviivan sijaan sanojen erottamiseen. IN yleinen näkemys URL-osoite, jossa on seuraava muoto:

Käytä metodia://palvelimen nimi:portti/polku

Pääsymenetelmä, tai protokolla, vaihtaa tietoja työasemien välillä eri verkkoja. Yleisimmät tiedonsiirtoprotokollat:

tiedosto tarjoaa tiedoston lukemisen paikalliselta levyltä:

Tiedosto:/gallery/pictures/summer.html

http tarjoaa pääsyn verkkosivulle HTTP-protokollan avulla:

http://site.ru/

https on HTTP-protokollan erityinen toteutus, joka käyttää salausta (yleensä SSL tai TLS)

https://site.ru/

ftp pyytää FTP-palvelinta vastaanottamaan tiedoston:

Ftp://pgu/hakemisto/kirjasto

mailto aloittaa istunnon postipalvelu määritetyn kohteen ja isännän kanssa:

Mailto: [sähköposti suojattu]

Palvelimen nimi kuvailee koko nimi verkossa olevia koneita, esimerkiksi site.ru. Jos palvelimen nimeä ei ole määritetty, niin linkki katsotaan paikalliseksi, ts. se on samassa koneessa kuin linkin sisältävä HTML-dokumentti.

TCP-portin numero, jolla verkkopalvelin toimii. Edustaa numeroa, joka on määritettävä, jos menetelmä vaatii portin numeron ( erilliset palvelimet voi olla oma porttinumeronsa). Jos porttia ei ole määritetty, porttia 80 käytetään oletuksena. Vakioportit ovat:
21 - FTP
23 - Telnet
70 - Gopher
80 - HTTP

Polku sisältää sen kansion nimen, jossa tiedosto sijaitsee.

2. Absoluuttinen ja suhteellinen polku

Kun linkki määrittää vain tiedoston nimen, selain olettaa, että tiedosto on samassa kansiossa hyperlinkin sisältävän asiakirjan kanssa. Käytännössä verkkosivustot sisältävät satoja asiakirjoja, jotka on julkaistu erilliset kansiot jotta niitä olisi helpompi hallita. Jos haluat luoda linkin nykyisen asiakirjan sisältävän kansion ulkopuolelle, sinun on määritettävä tiedoston sijainti tai polku. HTML tukee kahta polkutyyppiä: absoluuttista ja suhteellista.

Riisi. 1. Esimerkki kansiorakenteesta

2.1. Absoluuttinen polku

Absoluuttinen polku ilmaisee tiedoston tarkan sijainnin tietokoneen (palvelimen) koko kansiorakenteessa. Tiedoston absoluuttinen polku antaa pääsyn tiedostoon kolmannen osapuolen resursseista ja sisältää seuraavat osat:
1) protokolla, esimerkiksi http (valinnainen);
2) verkkotunnus ( verkkotunnuksen nimi tai tietokoneen IP-osoite);
3) kansio (kansion nimi, joka osoittaa tiedoston polun);
4) tiedosto (tiedoston nimi).

Absoluuttisia polkumerkintöjä on kahta tyyppiä: protokollaosoituksella ja ilman:

Http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html

Jos tiedosto on juurikansiossa, tiedoston polku on seuraava:

http://site.ru/index.html

Jos tiedostonimeä ei ole, ladataan web-palvelimen asetuksissa oletusarvoisesti asetettu verkkosivu (ns. hakemistotiedosto).

http://site.ru/

Yleensä hakemistotiedosto on asiakirja nimeltä index.html. Viimeinen vinoviiva / tarkoittaa, että pääsy menee kansioon, jos sitä ei ole, se menee suoraan tiedostoon.

2.2. Suhteellinen polku

Suhteellinen polku kuvaa polun määritettyyn asiakirjaan suhteessa nykyiseen asiakirjaan. Polku määräytyy sen verkkosivun sijainnin perusteella, jolla linkki sijaitsee. Suhteellisia linkkejä käytetään luotaessa linkkejä muihin saman sivuston asiakirjoihin. Kun selain ei löydä linkistä http://-protokollaa, se etsii samasta palvelimesta määritettyä asiakirjaa.

Suhteellinen polku sisältää seuraavat komponentit:
1) kansio (kansion nimi, joka osoittaa polun tiedostoon);
2) tiedosto (tiedoston nimi).

Suhteellisten linkkien polulla on kolme erityisiä nimityksiä:
/ osoittaa juurihakemisto ja sanoo, että sinun on aloitettava polku asiakirjan juurihakemistosta ja siirryttävä seuraavaan kansioon
./ osoittaa nykyinen kansio
../ mene ylös yhden kansion (hakemisto)

Suurin ero suhteellisen polun ja absoluuttisen polun välillä on se, että suhteellinen polku ei sisällä juurikansion ja yläkansioiden nimeä, mikä lyhentää osoitetta, ja jos siirryt toimialueelta toiseen, sinun ei tarvitse syötä uusi absoluuttinen osoite. Mutta jos kolmannen osapuolen resurssi linkittää esimerkiksi kuviisi suhteellisilla osoitteilla, niin niitä ei näytetä toisella sivustolla.

3. Ankkurit

Ankkurit, tai sisäiset linkit, luovat siirtymiä nykyisen verkkosivun eri osiin, jolloin voit siirtyä nopeasti osioiden välillä. Tämä osoittautuu erittäin käteväksi, kun sivulla on liikaa tekstiä. Sisäiset linkit luodaan myös tunnisteen avulla sillä erolla, että href-attribuutti sisältää osoittimen nimen - ns ankkuri, ei URL-osoite. Osoittimen nimeä edeltää aina #-merkki.

Kun kehität verkkosivustoa, sinun on usein määritettävä tiedostojen polut, linkit asiakirjoihin ja sivuille.
Käytössä olevissa kirjoissa tietokonetekniikat Löydät usein termit absoluuttiset ja suhteelliset polut käytettyihin tiedostoihin. Usein kirjoittaja ei selitä, mitä tietty polku tarkoittaa. Lukija on siis hämmentynyt, kun kirjoittaja myöhemmin puhuu absoluuttisten ja/tai suhteellisten polkujen käytöstä.
Oletetaan, että sinulla on verkkosivusto ja sinun on luotava hyperlinkki (linkki) yhdelle sivuston sivuista. Tässä sinun on valittava käytettävä polkutyyppi: suhteellinen vai absoluuttinen.

On erittäin tärkeää ymmärtää, missä polkua tarvitaan ja miten sitä parhaiten käyttää. Absoluuttinen polku voidaan määrittää vain yhdellä tavalla. Mutta suhteellisella, toisin kuin absoluuttisella, on useita käyttötarkoituksia.
Lue lisää kuinka ja missä sitä käytetään absoluuttinen ja suhteellinen polku tiedostoihin, yritän kertoa sinulle tänään.

Koska omistan suurimman osan ajastani verkkoteknologioihin, annan esimerkkejä verkkosivustojen luomisesta.

Absoluuttinen polku

Kun linkki on tiedoston tai sivun täydellinen URL-osoite, se on absoluuttinen polku. Tässä tapauksessa käytetyn protokollan on oltava läsnä osoitteessa. Esimerkiksi, http://www.sivusto on ehdoton polku tietylle verkkosivustolle. IN tässä tapauksessa ehdoton polku kotisivu minun blogini. Missä protokolla on http, A www.sivusto verkkotunnus (nimi).

Jos määrität esimerkiksi linkin hakemistoon http://omaverkkotunnus.ua/web/ sitten hakemistotiedosto ladataan (näkyy). Tämä sääntö koskee pääasiassa staattisia sivustoja. Koska ohjelmointikieltä käytettäessä voit luoda sisäisen reitityksen. Hakemistotiedosto on yleensä tiedosto nimeltä index.php, index.html, index.phtml, index.shtml. Jos haluat käyttää eri hakemistotiedostoa, sinun on luotava .htaccess-niminen tiedosto haluttuun hakemistoon ja kirjoitettava siihen jokin ohje. .htaccess-tiedoston muokkaaminen ja luominen sekä reititys ohjelmointikielellä eivät kuulu tämän artikkelin piiriin.

Periaatteessa absoluuttista polkua käytetään, kun sinun on linkitettävä toiseen sivustoon. Toisin sanoen, jos haluat lähettää vierailijan toiselle sivustolle, sinun on käytettävä absoluuttista polkua. Tätä polkua voi kuitenkin käyttää omalla verkkosivustollasi. Mutta monet ihmiset uskovat, että sivuston sisältämien linkkien tulee olla suhteellisia.
Absoluuttisen polun käyttö voi aiheuttaa ongelmia. Esimerkiksi siirtäessäsi sivustoa paikalliselta koneelta palvelimelle (tämä on jos käytit paikallinen kone osoitteet muodossa http://localhost/sitename.ua/...). Vaikeuksia voi ilmetä, kun verkkotunnusta (sivuston nimeä) on vaihdettava. Vaikka kaikki nämä vaikeudet voidaan ratkaista, sinun täytyy viettää aikaa niihin.
Kun on miinuksia, pitää olla plussia. Otetaan esimerkiksi tilanne, kuten verkkosivustosi sisällön varastaminen. Käytännössä olen useammin kuin kerran vakuuttunut siitä, että koko teksti varastetaan jättämättä paluulinkkiä alkuperäiseen. Joten, kun käytät absoluuttisia polkuja, voit saada käänteisiä linkkejä sivustolta, jossa varastettu sisältö sijaitsee. Mutta tämä on vain, jos sinulla on sisäinen linkitys tehtiin käyttämällä absoluuttisia polkuja. Vaikka tämä ei aina toimi, olen huomannut useammin kuin kerran linkkejä muiden ihmisten sivustoilta, joilla sisältöni oli.

Kaivettuani hieman aiheesta, haluan puhua siitä lyhyesti mikä on URL.

Jokaisella Internetin verkkosivulla tai asiakirjalla on oma yksilöllinen osoite, jota kutsutaan nimellä URL-osoite.
URL-osoite- resurssin yhtenäinen paikannus (sijaintitunniste). URL on lyhenne sanoista Uniform Resource Locator. Voit myös törmätä sellaiseen dekoodaukseen kuin Universal Resource Locator (universal Resource locator). Tämä osoitteen kirjoitustapa on standardoitu Internetissä. Yleisempi ja laaja järjestelmä URI-resurssin tunnistaminen korvaa vähitellen termin URL-osoitteen.
URI- Tämä merkkijono, joka tunnistaa resurssin: asiakirjan, tiedoston jne. Tietenkin tämä viittaa Internet-resursseihin.

Suhteellinen polku

Usein suhteellisia polkuja käytetään paljon useammin kuin absoluuttisia polkuja. Periaatteessa suhteellinen polku määritetään, kun sinun täytyy lähettää vierailija sivustosi toiselle sivulle tai lisätä objekti (esimerkiksi kuva) jollekin sivuista. Tässä tapauksessa käyttäminen suhteessa polkuun on melko perusteltua. Sivuston rakenteesta riippuen se riippuu käytettävästä suhteellisesta polusta. Suhteellisia polkuja on kahta tyyppiä: polku suhteessa asiakirjaan, polku suhteessa sivuston juureen.

Polku suhteessa asiakirjaan

Täsmälleen polku suhteessa asiakirjaan käytetään useimmiten. Tällaisia ​​linkkejä kutsutaan myös paikallisiksi. Periaatteessa tätä polkua käytetään, kun nykyinen ja siihen liittyvä asiakirja (sivu) ovat samassa hakemistossa. Jos siirrät asiakirjan toiseen hakemistoon, polkua (linkkiä) on muutettava. Voit kuitenkin linkittää myös muiden hakemistojen asiakirjoihin (sivuihin). Tätä varten polku kirjoitetaan nykyisestä asiakirjasta kohdeasiakirjaan (sivulle). Tässä tapauksessa asiakirjan polku on asetettava hakemistorakenteen mukaan.
Otetaan esimerkiksi yksinkertaisin rakenne staattinen sivusto.

Oletetaan, että jokainen kuva hakemistossa kuvia on lisättävä asianmukaisille sivuille home.html, tuotteet.html, contact.htm l. Jos haluat lisätä kuvan esimerkiksi "koti.html" -sivulle, sinun on määritettävä polku, jolla kuva sijaitsee. Jos käytät asiakirjaan liittyvää polkua, sinun on kirjoitettava sivukoodiin seuraava:

Tämä koodi kuvan lisäämiseksi sivulle on epätäydellinen. Koska se ei sisällä useita tärkeitä määritteitä, kuten leveys, korkeus jne. Attribuutti src, tässä osoittaa tiedoston polun. Kaikki muut attribuutit on jätetty pois, koska ne eivät ole niin tärkeitä nyt. Tärkeintä nyt on, että sinulla on käsitys siitä, miltä polku näyttää suhteessa asiakirjaan.
Asiakirjan suhteellisia polkuja käytettäessä absoluuttinen polkuosa puuttuu. Osa absoluuttisesta polusta katkaistaan ​​tässä sekä nykyisen asiakirjan (sivun) että linkitetyn asiakirjan (sivun) osalta. Tässä käytetään vain sitä osaa polusta, joka aina muuttuu.
Muistutan vielä kerran, että kun käytät polkua suhteessa asiakirjaan, sinun on otettava huomioon alkuperäinen sijainti tiedostot.

Kuvitellaanpa tilanne, jossa sivu tuotteet.html, ei sijaitse sivuston juurihakemistossa (kuten edellisessä esimerkissä), vaan alihakemistossa. Nyt sinun on lisättävä kuva tiedostoon tuotteet.html, joka sijaitsee syvemmällä kuin sivuston juurihakemisto.

Kuvan lisääminen tiedostoon tuotteet.html sinun on palattava juurihakemistoon. Tämän jälkeen voit käyttää jo tunnettua polkua, joka mainittiin juuri edellä.

Kuten yllä olevasta koodista näkyy, polkuun on nyt lisätty seuraava: ../ . Juuri tämä merkkisarja ../ ja siirtää yhden hakemiston (tason) korkeammalle hakemistohierarkiassa. Yllä olevan koodin polku voidaan lukea seuraavasti: "Mene yksi hakemisto ylemmäksi (takaisin), mene hakemistoon kuvia ja ota tiedosto sieltä products.png«.
Jos ../ tarkoittaa siirtämistä yhden hakemiston (tason) korkeammalle hakemistohierarkiassa, sitten symbolin / osoittaa siirtymistä yhden tason alaspäin.
Hahmosarja ../ voidaan käyttää toistuvasti liikkeellä ollessa. Esimerkiksi jos tiedosto tuotteet.html siirryttäessä kolmeen sisäkkäiseen hakemistoon, sinun on käytettävä seuraavaa koodia:

Kuten edellisistä esimerkeistä voidaan nähdä, käyttämällä polut suhteessa asiakirjaan monissa tapauksissa perusteltua. Tämän tyyppistä polkua käytetään usein käytännössä, ja sitä voidaan soveltaa melkein mihin tahansa tilanteeseen. Kuten edellä sanoin, sivuston juureen liittyy myös polku, josta itse asiassa keskustellaan jäljempänä.

Polku suhteessa sivuston juureen

Olet luultavasti jo ymmärtänyt, että dokumenttiin liittyviä polkuja käytetään hyvin usein. Mutta niiden käytössä on yksi ongelma. Eli kun hakemistorakenne muuttuu, polut on vaihdettava.
Mutta tämä ongelma voidaan ratkaista käyttämällä polut suhteessa sivuston juureen. Missä polku on määritetty juurihakemistosta asiakirjaan.
Kaikki sivuston juureen liittyvät polut alkavat merkillä / . Ainoastaan ​​tässä, toisin kuin asiakirjaan liittyvissä poluissa, tätä merkkiä käytetään osoittamaan juurihakemisto. Koska sitä käytetään matkan alussa.
Sivuston juureen suhteutetun polun avulla voit siirtää joitain tiedostoja vahingoittamatta linkkejä. Voit käyttää tämäntyyppistä polkua vain Internetin verkkopalvelimessa tai paikallisessa koneessa sijaitsevassa verkkopalvelimessa.

Paikallisen koneen verkkopalvelin voi olla . Tämän avulla voit luoda tietokoneellesi ympäristön verkkosivustojen luomista ja esitestausta varten.

Suhteellisen juuren polku ei sisällä kumpaakaan http-protokolla, ei verkkotunnusta. Ja kuten jo sanoin, se alkaa symbolin osoittamisesta / , joka osoittaa juurihakemistoon. Pääsivun hakemistotiedosto sijaitsee yleensä tässä hakemistossa.

Esimerkiksi, /images/products.png osoittaa, että tiedosto products.png on kansiossa kuvia, joka sijaitsee juurihakemistossa.

Helpoin tapa määrittää suhteellinen juuren polku on valita absoluuttinen polku ja hylätä http:// ja isäntänimi.

Esimerkki
Joskus on välttämätöntä, että yhdeltä sivulta saatuja tietoja käytetään sivuston muille sivuille. Tämä tehdään usein toistuvan koodin määrän vähentämiseksi kullakin sivulla. Oletetaan, että siellä on tiedosto _contact.html, joka sisältää tietoa aiheesta puhelinnumerot, sähköposti ja sisältää kuvan contact.png. (Olkoon se pieni taulukko, joka sijaitsee sivuston jokaisella sivulla.)

Seuraava koodi on "contact.png"-kuvan lisäämiseen.

Koodi, joka tarvitaan yhden tiedoston lisäämiseen toiseen, ei kuulu tämän artikkelin piiriin. Kaikki riippuu käytetystä ohjelmointikielestä.

Toivottavasti tiedät jo, minkä tyyppistä polkua yllä olevassa koodissa käytettiin. Jos ei, katso yllä olevaa asiakirjan suhteen polun määritelmää.
Nyt, kun vierailija vierailee sivuston sivuilla, kuten home.html, contact.ntml, hän näkee täydellisesti hahmonnetun sivun. Joihin jokaiseen on lisätty tiedosto _contact.html, johon vuorostaan ​​lisätään kuva contact.png.
Toisin sanoen menemällä esimerkiksi sivulle home.html, tapahtuu seuraavaa: "Pääsivun koodi on käynnissä home.html. Sitten sivukoodi lisätään ja suoritetaan _contact.html. Sivun koodi _contact.html, sanoo, että sinun täytyy mennä hakemistoon kuvia ja ota kuva sieltä contact.png«.
Jos jätät itse upotuskoodin pois, kaikki toimii hyvin. Mutta jos pyörität sivua tuotteet.html, silloin tapahtuu virhe. Koska koodi yrittää löytää hakemiston kuvia ja tiedosto contact.png hakemistossa tuotteita. Tällaista hakemistoa ei kuitenkaan ole olemassa, joten ongelma itse asiassa syntyy.
On selvää, että et voi käyttää asiakirjan suhteen polkua tässä.
Tietysti voit käyttää tässä ehdotonta polkua. Tietoja eduista ja haitoista tätä lähestymistapaa sanoin edellä.
Yleisesti ottaen tämä on yksi niistä tilanteista, joissa sinun tulee käyttää polkua suhteessa sivuston juureen. Kun käytät polkua suhteessa sivuston juureen, linkki alkaa aina juurihakemistosta (sivuston juurihakemistosta). Tämän tyyppisen polun avulla voit käyttää koodia esimerkiksi kuvan lisäämiseen sivustohierarkiasta ja sen hakemistoista riippumatta.
Polun käyttäminen suhteessa sivuston juureen yllä olevassa esimerkissä välttää ongelmia kuvan lisäämisessä. Koska riippumatta siitä, missä tämäntyyppistä polkua käytetään, se löytää aina siinä määritetyn tiedoston.
Polku sivuston juureen on hyvin samanlainen kuin asiakirjan polku. Jotta voit luoda polun suhteessa sivuston juureen, sinun on lisättävä symboli / matkan alkuun.

Nyt kuva lisätään oikein mille tahansa sivuston sivulle.

Toivon, että auttoin sinua ymmärtämään, mitä polkuja on olemassa ja milloin ja missä niitä käytetään. Nyt voit käyttää kaikkia polkutyyppejä aiottuun tarkoitukseen.

IN tämä oppitunti Selitämme aloittelijoille, mikä on absoluuttinen ja suhteellinen tiedostopolku, ja myös missä tapauksessa kumpaa on parempi käyttää. Jos olet jo perehtynyt tähän aiheeseen, voit siirtyä seuraavalle oppitunnille.

Joten aloitetaan itse termin "polku" määritelmästä:

Polku (englanniksi polku) - joukko merkkejä, jotka osoittavat tiedoston sijainnin tiedostojärjestelmä, hakemiston osoite.

Wikipedia

Jos puhumme sivustoista, polku on sama kuin linkki. Linkit voivat olla absoluuttisia tai suhteellisia. Katsotaanpa kumpaakin vaihtoehtoa tarkemmin.

Mikä on absoluuttinen polku tiedostoon

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

Absoluuttista polkua voidaan käyttää CSS:ssä. Jos haluat esimerkiksi asettaa kuvan taustaksi, voit ottaa kuvatiedoston absoluuttisen URL-osoitteen JA määrittää sen tyylitaulukossa:

Taustakuva: url(http://www.example.com/img/bg.png);

Mikä on suhteellinen tiedostopolku

Suhteellisella osoitteella kaikki on paljon mielenkiintoisempaa - se voidaan laskea sekä sivuston juuresta että nykyisestä asiakirjasta. Suhteellinen juuren polku- tämä on polku, joka osoittaa tiedoston sijainnin suhteessa sivuston juurihakemistoon. Tässä tapauksessa osoite ei sisällä protokollaa eikä verkkotunnusta, ja se alkaa vinoviivalla /, joka osoittaa juurikansio. Tämä osoite näyttää tältä:

Taustakuva: url(/img/bg.png);

Kuinka helposti määrittää suhteellinen juuriosoite? Ota vain absoluuttinen linkki ja poista siitä protokolla ja verkkotunnus jättäen vinoviiva ja kaikki sen jälkeen tulevat merkit.

Suhteellinen tiedostopolku asiakirjasta on polku tiedostoon suhteessa nykyiseen asiakirjaan. Tämä osoite riippuu sen tiedoston sijainnista, johon se on tallennettu. Joten milloin suhteellinen linkki määritetty tyylisivulla, se laskee tiedostopolun tyylisivun perusteella, ei nykyisen verkkosivun tai juurikansion perusteella. Annetaan muutama esimerkki.

Esimerkki I

Jos tyylisivumme on style.css ja tiedosto, jossa on taustakuva bg.png ovat samassa kansiossa (ei välttämättä juuri), niin suhteellinen polku taulukosta kuvaan näyttää tältä:

Taustakuva: url(bg.png); /* kirjoitat vain tiedostonimen */

Esimerkki II

Jos tyylisivu on juuressa ja kuva sisällä img-kansio, suhteellinen linkki on tällainen:

Taustakuva: url(img/bg.png); /* ei tarvita kenoviivaa */

Esimerkki III

Jos tyylisivu on kansiossa ja kuva on tämän kansion vieressä, suhteellinen polku on seuraava:

Taustakuva: url(../bg.png); /* kaksi pistettä - mene yhden tason ylöspäin */

Esimerkki IV

Jos tyylisivu on kahdessa kansiossa ja piirros on ensimmäisen kansion vieressä, suhteellinen polku on seuraava:

Taustakuva: url(../../bg.png); /* nouse kaksi tasoa ylös */

Kaksi pistettä ja vinoviiva suhteellisen polun alussa tarkoittavat yhden tason nousua. Riippuen tasojen (hakemistojen) lukumäärästä, joille sinun on kiivettävä, sinun on syötettävä tarvittava määrä pisteitä vinoviivalla. Esimerkiksi, jos tyylisivu ei sijaitse kahdessa, vaan neljässä kansiossa, merkintä on vastaavasti seuraava:

Taustakuva: url(../../../../bg.png);

Jos kuva on piilotettu img-kansioon ja tyylisivu on piilotettu css-kansioon, sinun on poistuttava css-kansiot ja mene img-kansioon. näin:

Taustakuva: url(../img/bg.png);

Jos kansioita on useita, sinun on myös rekisteröitävä ne. Muutetaan edellinen esimerkki: kuvitellaan, että img-kansiossa on toinen taustat-kansio, joka sisältää piirustuksemme. Suhteellinen polku olisi seuraava:

Taustakuva: url(../img/backgrounds/bg.png);

Kumpaa tapaa on parempi käyttää

Ehdoton linkin osoite Sinun on käytettävä sitä, jos tiedosto, johon linkität, on toisella sivustolla. Yhden sivuston sisällä absoluuttista polkua ei käytännössä käytetä (vaikka se toimii). Tämä johtuu useista seikoista: ensinnäkin tällaiset linkit voivat olla erittäin hankalia, ja toiseksi, jos verkkotunnuksen nimi muuttuu, syntyy ongelma - kaikki linkit johtavat vanhaan verkkotunnukseen, mikä voi johtaa moniin virheisiin ja rikkinäisiin linkkeihin.

Suhteellinen juuren polku toimii web-palvelimella, mutta se on hyödytöntä kehitettäessä paikallinen tietokone. Mutta tämäntyyppisten linkkien etuna on, että voit siirtää tyylisivusi mihin tahansa kansioon sivustolla etkä pelkää, että osoitteet taustakuvia jää työttömäksi.

Suhteellinen polku asiakirjasta - paras vaihtoehto kun kehitetään verkkoa paikallisella koneella ilman palvelinta. Selaimessa voit tarkastella tietokoneellesi tallennettuja verkkosivuja normaalisti ja tiedostojen osoitteet toimivat. Ne toimivat live-sivustolla, mutta yhdellä ehdolla - jos et siirrä tyylisivua toiseen paikkaan (muuten sinun on säädettävä polkuja).

Kokeile suhteellisten polkujen käyttöä sekä paikallisella tietokoneellasi että verkkopalvelimellasi. Tämän toiminnan ymmärtäminen on varmasti hyödyllistä sinulle missä tahansa projektissa.

Lisää opetusohjelmassa: background-repeat -ominaisuus - ohjaa taustakuvan toistoa.