Het pad naar de html-map. Welk pad is beter om te gebruiken. Wat moet je nog meer weten?

Ik hoop dat je de laatste opdracht met succes hebt voltooid en drie pagina's tekst hebt gemaakt. We ontwierpen het met behulp van tags en onthielden hun doel. Welnu, een redelijke vraag rijst: "Hoe navigeer je tussen deze pagina's?" Gemakkelijk! We hebben hier links nodig.

Een link is een pagina-element dat in wezen platte tekst is, maar het is actief! Dat wil zeggen, bij het klikken op deze tekst wordt de bezoeker doorgestuurd naar een andere pagina. Is het niet waar, dit is precies wat we zochten! Dus laten we liever leren hoe we links moeten gebruiken, hier is een voorbeeld:

Mijn website

Kijk: tag "a", en het heeft attributen: "href" en "target", hoewel dit niet alle attributen zijn die deze tag heeft, maar ik zal je het principe ervan uitleggen. Sommige tags, zoals een link, hebben attributen. In dit geval zijn er verplichte en optionele attributen. In ons geval is href vereist, maar target niet.
Maar terug naar de link zelf. Welke zijn beter te lezen in het bijbehorende onderwerp op mijn site: wat zijn de links. Maar daar heb ik niet in detail gesproken over relatieve en absolute paden:

Https: //site/1.png - absoluut padbestand: // localhost / C: /1.png - absoluut pad naar lokale computer../img/1.png - relatief pad

Hier zijn enkele voorbeelden. Een absoluut pad is hardcoded naar het adres van een pagina of bestand. Het is onwenselijk om ze te gebruiken, want als je een website op een computer ontwikkelt en deze vervolgens naar de server overbrengt, moeten alle paden worden gewijzigd, kun je je voorstellen hoeveel moeite? Het is veel beter om relatieve paden te gebruiken, die als volgt werken: er is een werkdirectory waarin het lopende (open) bestand zich bevindt. En alle relatieve paden beginnen al vanuit de werkdirectory. Om naar de directory te gaan, moet je ".." schrijven, zoals in het bovenstaande voorbeeld. Als je in deze map wilt blijven, schrijf dan meteen de naam van het bestand of de map op.

Nou, voor het begrip: laten we zeggen dat we een map met bestanden hebben, die zich op het volgende adres C: \ site bevindt en er is een andere map C: \ site2. De eerste map bevat pagina's pagina1.html, pagina2.html, pagina3.html en een map met img-afbeeldingen, en in een andere map, namelijk site2 pagina's pagina4.html en pagina5.html.
Dienovereenkomstig openen we de pagina page1.html uit de sitemap als de eerste en dansen ervan:

Page2.html - het pad naar de tweede pagina, het bevindt zich in dezelfde map als de eerste. page3.html is hetzelfde. img / 1.png - een afbeelding in een map met afbeeldingen. ../site2/page4.html - deze pagina is niet in werkmap daarom zijn we de bovenstaande map beklommen en naar de map site2 gegaan om toegang te krijgen tot pagina 4. ../site2/page5.html is hetzelfde.

Ik hoop dat het wat duidelijker is geworden over relatieve en absolute paden.

Hier is het anker van de link de klikbare tekst. De href bevat het pad waar we naartoe gaan. In doel - overgangsparameters bijvoorbeeld, openen in een nieuw venster. In de titel is er een hint voor de link die verschijnt bij de muisaanwijzer. Er zijn nog veel meer linkparameters, maar ze staan ​​aan dit moment we hebben het niet nodig, want het belangrijkste nu, als je het niet vergeten bent, is om onze drie pagina's aan elkaar te koppelen.
Open hiervoor een pagina in Kladblok en in het hoofdgedeelte helemaal aan het begin, zodat de links bovenaan de pagina staan, voeg links toe:

Giraf | Olifant | Zebra ... Vervolgens komt onze tekst over het dier, die we eerder schreven, in de laatste les.

Vergeet de volgende punten niet: voer in plaats van pagina1.html en 2 en 3 de namen van uw pagina's in. Alle paginabestanden moeten zich in dezelfde map bevinden, gebruik anders relatieve of absolute paden om ze te openen.

Het linkadres kan absoluut of relatief zijn. Absolute adressen moeten beginnen met een protocol (meestal http://) en de sitenaam bevatten. Er wordt naar relatieve links verwezen vanuit de hoofdmap van de site of het huidige document.

Voorbeeld 8.2 laat zien hoe u een absolute link naar een andere site kunt maken.

Voorbeeld 8.2. Absolute links gebruiken

HTML leren

Wanneer u een sitedirectory opgeeft (bijvoorbeeld http: // site / css /) als koppeling, wordt het indexbestand weergegeven. Dit is het bestand dat standaard wordt geladen bij toegang tot een map zonder expliciet een bestandsnaam op te geven. Meestal is het indexbestand een document met de naam index.html.

Absolute links worden meestal gebruikt om een ​​document op een andere netwerkbron aan te geven, maar het is toegestaan ​​om dit te doen absolute links en binnen de huidige site. Dit wordt echter zelden toegepast, aangezien dergelijke links vrij lang en omslachtig zijn. Daarom worden binnen de site voornamelijk relatieve links gebruikt.

Links met betrekking tot het huidige document

Wanneer u relatieve links maakt, moet u weten welke waarde u moet specificeren voor het href-attribuut, aangezien dit afhangt van de oorspronkelijke locatie van de bestanden. Laten we een paar typische opties bekijken.

1. Bestanden bevinden zich in één map (Fig. 8.4).

Deze bestandsnaam is alleen als voorbeeld genomen; op de site mogen Russische tekens met spaties niet worden gebruikt in bestandsnamen, en zelfs in andere gevallen.

2. Bestanden bevinden zich in verschillende mappen(afb. 8.5).

Wanneer origineel document is opgeslagen in één map en de link bevindt zich in de hoofdmap van de site, dan moeten vóór de bestandsnaam in het linkadres twee punten en een schuine streep (/) worden geplaatst, zoals hieronder wordt weergegeven.

Twee punten in in dit geval betekent om de huidige map naar een hoger niveau te verlaten.

3. Bestanden bevinden zich in verschillende mappen (Fig. 8.6).

nutsvoorzieningen origineel bestand bevindt zich in twee submappen en om naar het document in de hoofdmap van de site te linken, moet u het schrijven van het vorige voorbeeld twee keer herhalen.

Koppeling

Hetzelfde geldt voor een willekeurig aantal submappen.

4. Bestanden bevinden zich in verschillende mappen (Fig. 8.7).

Nu is de situatie aan het veranderen, het bronbestand bevindt zich in de hoofdmap van de site en het bestand waarnaar moet worden gelinkt, bevindt zich in de map. In dit geval is het pad naar het bestand als volgt.

Koppeling

Merk op dat er geen extra punten of schuine strepen voor de mapnaam staan. Als het bestand zich niet in één, maar in twee mappen bevindt, wordt het pad ernaartoe als volgt geschreven.

Koppeling

Links ten opzichte van de hoofdmap van de site

Soms kun je het pad naar het bestand relatief vinden ten opzichte van de hoofdmap van de site, het lijkt erop: "/ Map / Bestandsnaam" met een schuine streep aan het begin. Dus de inzending Cursussen betekent dat de link leidt naar een map met de naam course, die zich in de root van de site bevindt, en daarin moet je het indexbestand downloaden.

Houd er rekening mee dat deze vorm van registratie niet op de lokale computer werkt, maar alleen onder controle van de webserver.

Bij het ontwikkelen van een site moet je vaak paden naar bestanden, links naar documenten, pagina's schrijven.
In boeken over computer technologie je ziet vaak het gebruik van de termen absolute en relatieve bestandspaden. Vaak legt de auteur niet uit wat een bepaald pad betekent. De lezer raakt dan ook in de war als de auteur vervolgens spreekt over het gebruik van een absoluut en/of relatief pad.
Stel, u heeft een website en u moet een hyperlink (link) maken naar een van de pagina's van de website. Hier moet u kiezen welk type pad u wilt gebruiken: relatief of absoluut.

Het is erg belangrijk om te begrijpen waar welk pad moet worden gebruikt en welk pad het beste kan worden gebruikt. Er is maar één manier om een ​​absoluut pad op te geven. Maar het relatieve heeft, in tegenstelling tot het absolute, verschillende gebruiksscenario's.
Meer over hoe en waar het wordt gebruikt absolute en relatieve bestandspaden, ik zal het je vandaag proberen te vertellen.

Aangezien ik het grootste deel van mijn tijd aan webtechnologieën wijd, zal ik voorbeelden geven met betrekking tot het maken van sites.

Absoluut pad

Als een link de volledige URL van een bestand of pagina is, is dat: absoluut pad... In dit geval moet het gebruikte protocol aanwezig zijn in het adres. Bijvoorbeeld, http: //www.site Is het absolute pad naar een specifieke website. In dit geval is het absolute pad naar Startpagina mijn blog. Waar het protocol is? http, een www.site domeinnaam).

Als u bijvoorbeeld een link naar een catalogus verstrekt http://uwdomein.ua/web/ dan wordt het indexbestand geladen (weergegeven). Deze regel is voornamelijk van toepassing op statische sites. Omdat u bij het gebruik van een programmeertaal interne routering kunt maken. Indexbestand is meestal een bestand met de naam index.php, index.html, index.phtml, index.shtml... Om een ​​ander indexbestand te gebruiken, moet u een bestand met de naam .htaccess maken in de vereiste map en er een richtlijn in schrijven. Het wijzigen en maken van het .htaccess-bestand, evenals het routeren met een programmeertaal, valt buiten het bestek van dit artikel.

Kortom, een absoluut pad wordt gebruikt wanneer u naar een andere site moet linken. Met andere woorden, als u een bezoeker naar een andere site wilt sturen, moet u een absoluut pad gebruiken. Dit pad kan echter ook op uw eigen site worden gebruikt. Maar velen houden vast aan het feit dat links binnen een site relatief moeten zijn.
Het gebruik van een absoluut pad kan enkele problemen introduceren. Bijvoorbeeld bij het overbrengen van een site van een lokale machine naar een server (dit is het geval als u on lokaal apparaat adressen in de vorm http: //localhost/sitename.ua/...). Er kunnen problemen ontstaan ​​wanneer het domein (sitenaam) moet worden gewijzigd. Hoewel, al deze problemen kunnen worden opgelost, maar ze zullen een bepaalde hoeveelheid tijd moeten besteden.
Als er nadelen zijn, dan moeten er ook voordelen zijn. Neem bijvoorbeeld een situatie als het stelen van inhoud van uw site. In de praktijk heb ik er meer dan eens voor gezorgd dat de hele tekst wordt gestolen, zonder een backlink naar het origineel achter te laten. Dus als u absolute paden gebruikt, kunt u backlinks krijgen van de site waar de gestolen inhoud zich bevindt. Maar dit is alleen als je hebt interne koppeling werd gedaan met behulp van absolute paden. Hoewel dit niet altijd werkt, heb ik al meer dan eens gemerkt dat er links verschijnen van sites van andere mensen waarop mijn inhoud zich bevond.

Een beetje afwijkend van het onderwerp, wil ik je daar kort over vertellen wat is url.

Elke webpagina of document op internet heeft zijn eigen unieke adres, genaamd URL.
URL- een uniforme locator (locator) van de bron. URL staat voor Uniform Resource Locator. U kunt zo'n transcript ook vinden als de Universal Resource Locator (universal resource locator). Deze manier van adresschrijven is op internet gestandaardiseerd. Meer algemeen en breed systeem identificatie bron-URI vervangt geleidelijk de term URL.
URI is een tekenreeks die een bron identificeert: document, bestand, enz. Dit verwijst natuurlijk naar de bronnen van internet.

Relatief pad

Vaak worden relatieve paden veel vaker gebruikt dan absolute paden. Kortom, een relatief pad wordt aangegeven wanneer u een bezoeker naar een andere pagina op uw site moet sturen, of een object (bijvoorbeeld een afbeelding) op een van de pagina's moet invoegen. In dit geval is het gebruik ten opzichte van het pad redelijk gerechtvaardigd. Afhankelijk van de structuur van uw site, hangt het af van welke vorm van relatief pad u wilt gebruiken. Er zijn twee soorten relatieve paden: document-relatief en site-root relatief.

Document-relatief pad

Precies pad ten opzichte van document het meest gebruikt. Dergelijke links worden ook wel lokaal genoemd. Dit pad wordt in principe gebruikt wanneer het huidige en gekoppelde document (pagina) zich in dezelfde map bevinden. Als u het document naar een andere map verplaatst, moet het pad (link) worden gewijzigd. Wel is het mogelijk om te linken naar documenten (pagina's) uit andere directories. Hiervoor wordt het pad van het huidige document naar het doeldocument (pagina) geschreven. In dit geval moet het pad ten opzichte van het document worden opgegeven, afhankelijk van de directorystructuur.
Neem bijvoorbeeld eenvoudigste structuur statische website.

Stel dat elke afbeelding in de directory afbeeldingen moeten worden ingevoegd in de overeenkomstige pagina's home.html, producten.html, contact.htm ik. Om een ​​afbeelding in te voegen, bijvoorbeeld op de pagina "home.html", moet u het pad registreren waar de afbeelding zich bevindt. Als u een pad gebruikt dat relatief is aan het document, moet u het volgende in de paginacode schrijven:

Deze code om een ​​afbeelding in een pagina in te sluiten is onvolledig. Omdat het niet meerdere bevat: belangrijke attributen zoals breedte, hoogte, enz. Attribuut src, dient hier om het pad naar het bestand te specificeren. Alle andere attributen zijn hier weggelaten, omdat ze nu niet zo belangrijk zijn. Het belangrijkste is nu dat je een idee hebt van hoe het pad eruit ziet in relatie tot het document.
Bij gebruik van document-relatieve paden, ontbreekt een deel van het absolute pad. Het deel van het absolute pad wordt hier afgekapt, zowel voor het huidige document (pagina) als voor het gekoppelde document. Alleen het deel van het pad dat altijd verandert, wordt hier gebruikt.
Laat me je er nogmaals aan herinneren dat wanneer je een pad gebruikt ten opzichte van het document, je rekening moet houden met de originele locatie van de bestanden.

Stel je een situatie voor waarin de pagina producten.html, bevindt zich niet in de hoofdmap van de site (zoals in het vorige voorbeeld), maar in een submap. Nu moet je de afbeelding in het bestand invoegen producten.html die zich dieper bevindt dan de hoofdmap van de site.

Een afbeelding invoegen in een bestand producten.html moet terug naar hoofdmap... Daarna kunt u het reeds bekende pad gebruiken, dat net hierboven werd vermeld.

Zoals je kunt zien aan de bovenstaande code, is het volgende nu toegevoegd aan het pad: ../ ... Alleen deze reeks tekens ../ en dient om een ​​directory (niveau) hoger in de directoryhiërarchie te plaatsen. Het pad in de bovenstaande code kan als volgt worden gelezen: “Go one directory up (back), go to the directory afbeeldingen en neem het bestand vanaf daar producten.png«.
Indien ../ betekent een directory (niveau) hoger in de directoryhiërarchie verplaatsen, dan het symbool / geeft een overgang een niveau lager aan.
Opeenvolging van tekens ../ kan onderweg meerdere keren worden gebruikt. Als het bestand bijvoorbeeld producten.html ga naar drie mappen die in elkaar zijn genest, dan moet je de volgende code gebruiken:

Zoals u kunt zien in de vorige voorbeelden, gebruikt u paden ten opzichte van document in veel gevallen gerechtvaardigd. Dit soort paden wordt in de praktijk vaak gebruikt en kan in vrijwel elke situatie worden toegepast. Zoals ik hierboven al zei, is er ook een pad ten opzichte van de hoofdmap van de site, dat in feite hieronder zal worden besproken.

Pad ten opzichte van de hoofdmap van de site

U realiseerde zich waarschijnlijk al dat documentrelatieve paden heel vaak worden gebruikt. Maar er is één probleem bij het gebruik ervan. Dat is dat wanneer u de directorystructuur wijzigt, de paden moeten worden gewijzigd.
Maar dit probleem kan worden opgelost bij gebruik: paden ten opzichte van de site root... Waar het pad is van de hoofdmap naar het document.
Alle paden ten opzichte van de hoofdmap van de site beginnen met het teken / ... Alleen hier, in tegenstelling tot document-relatieve paden, wordt dit teken gebruikt om de hoofdmap aan te geven. Omdat het aan het begin van het pad wordt gebruikt.
Het pad ten opzichte van de hoofdmap van de site stelt je in staat om sommige bestanden te verplaatsen zonder de links te beschadigen. U kunt dit type pad alleen gebruiken op een webserver op internet of op een webserver op een lokale computer.

De webserver op de lokale computer kan -. Hiermee kunt u een omgeving op uw computer maken voor het maken van sites en hun voorlopige tests.

Het relatieve rootpad bevat geen van beide http-protocol, geen domeinnaam. En zoals ik al zei, het begint met het specificeren van het symbool / die verwijst naar de hoofdmap. Deze directory bevat meestal het indexbestand van de hoofdpagina.

Bijvoorbeeld, /images/products.png geeft aan dat het bestand producten.png bevindt zich in de map afbeeldingen die zich in de hoofdmap bevindt.

De gemakkelijkste manier om het relatieve root-pad te achterhalen, is door de absolute te nemen en de http:// en hostnaam weg te laten.

Voorbeeld
Soms is het nodig dat de informatie van de ene pagina werd gebruikt door andere pagina's van de site. Dit wordt vaak gedaan om de hoeveelheid herhalende code op elke pagina te verminderen. Laten we zeggen dat er een bestand is _contact.html die informatie bevat over telefoonnummers, e-mail en bevat een afbeelding contact.png... (Laat het een kleine tabel zijn die op elke pagina van de site zal worden geplaatst.)

De volgende code is voor het invoegen van de afbeelding "contact.png".

De code die nodig is om het ene bestand in het andere in te voegen, valt buiten het bestek van dit artikel. Het hangt allemaal af van de gebruikte programmeertaal.

Ik hoop dat je al weet welk type pad in de bovenstaande code is gebruikt. Zo niet, zie dan de bovenstaande document-relatieve definitie van pad.
Wanneer een bezoeker nu dergelijke sitepagina's bezoekt als: home.html, contact.ntml, zal hij een perfect weergegeven pagina zien. In elk waarvan een bestand is ingevoegd _contact.html, waarin op zijn beurt de afbeelding wordt ingevoegd contact.png.
Met andere woorden, door bijvoorbeeld naar de pagina te gaan home.html, gebeurt het volgende: "De code van de hoofdpagina wordt uitgevoerd home.html... Vervolgens wordt de paginacode ingevoegd en uitgevoerd. _contact.html... Paginacode _contact.html, zegt dat je naar de directory moet gaan afbeeldingen en vanaf daar een foto maken contact.png«.
Als je de eigenlijke insluitcode weglaat, werkt alles prima. Maar als je de pagina uitvoert producten.html dan zal er een fout optreden. Omdat de code zal proberen de map te vinden afbeeldingen en het bestand contact.png in de map producten... Maar zo'n directory bestaat daar niet, daarom doet het probleem zich eigenlijk voor.
Het wordt duidelijk dat je hier geen pad ten opzichte van het document kunt gebruiken.
Natuurlijk kunt u hier een absoluut pad gebruiken. Ik sprak hierboven over de voor- en nadelen van deze aanpak.
Over het algemeen is dit een van de situaties waarin u een pad moet gebruiken ten opzichte van de hoofdmap van de site. Bij gebruik van een pad ten opzichte van de site root, zal de link altijd starten vanuit de root directory (site root). Met dit type pad kunt u insluitcode gebruiken, zoals afbeeldingen, ongeacht de sitehiërarchie en de bijbehorende mappen.
Als u in het bovenstaande voorbeeld een pad gebruikt dat relatief is ten opzichte van de hoofdmap van de site, voorkomt u problemen met het invoegen van afbeeldingen. Omdat het niet uitmaakt waar het dit type pad zal gebruiken, het zal altijd het daarin gespecificeerde bestand vinden.
Het site-rootpad lijkt erg op het document-relatieve pad. Om een ​​pad te creëren dat relatief is ten opzichte van de hoofdmap van de site, moet u het symbool toevoegen / naar het begin van het pad.

Nu wordt de afbeelding correct ingevoegd in een van de pagina's van de site.

Ik hoop dat ik je een beetje heb geholpen om te begrijpen welke paden er zijn, en wanneer en waar ze worden gebruikt. Nu kunt u alle soorten paden gebruiken voor het beoogde doel.

Zoals je weet, in de href parameter van de tag (), moet u het pad opgeven naar het bestand waarnaar de koppeling wordt gemaakt.
Veel mensen schrijven iets als http://somesite.ru/catalog/doc.html. Ja, niemand beweert, het werkt. Maar er is één "maar". Laten we naar een voorbeeld kijken.

Laat uw site bijvoorbeeld worden gehost op een gratis hosting en het adres was het volgende: http://fsite.freehosting.ru.
Er staan ​​ongeveer 100 documenten op de server. En dus besloot je om je site naar een ander domein te verhuizen,
laat het betaalde hosting zijn in de ru-zone: http://site.ru. Welnu, verander nu overal http://fsite.freehosting.ru in http://site.ru?
Ja, dankzij editors als homesite is dit mogelijk. Maar dit is geen optie.
Stel dat u, voordat u een pagina naar de server uploadt, de functionaliteit ervan controleert.
op uw home-apache-server (voor degenen die nog niet weten wat een "home-server" is - hier (De apache-server installeren en configureren), en in plaats van http: // localhost, moet u http://site schrijven .ru overal mee eens, in ieder geval ongemakkelijk.

De oplossing is dat bij het specificeren van het pad naar het bestand niet rekening wordt gehouden met de positie op de site, maar met de positie op de server.

Absoluut pad