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

Laat uw site bijvoorbeeld hosten op een gratis hosting en het adres was als volgt: http://fsite.freehosting.ru.
Er staan ​​ongeveer 100 documenten op de server. En dus besluit u uw website naar een ander domein te verhuizen,
laat het betaalde hosting zijn in de ru-zone: http://site.ru. Moeten we nu http://fsite.freehosting.ru overal in http://site.ru veranderen?
Ja, dankzij editors als homesite is dit mogelijk. Maar dit is geen oplossing.
Laten we aannemen dat u, voordat u een pagina naar de server uploadt, de functionaliteit ervan controleert
op uw thuis-apache-server (voor degenen die nog niet weten wat een “thuisserver” is, ga hierheen (Een apache-server installeren en configureren), en in plaats van http://localhost moet u http:// schrijven site.ru overal. Ben het hiermee eens, het is tenminste lastig.

De oplossing is om bij het opgeven van het pad naar een bestand niet rekening te houden met de positie op de site, maar met de positie op de server.

Absoluut pad

Laten we bijvoorbeeld het bestand doc.html nemen, dat zich bevindt op: http://somesite.ru/catalog/doc.html. Zoals u weet, bevindt zich een www-map op de server. Zoals we aan het adres kunnen zien, bevat deze map de catalogusmap en bevat deze al het bestand doc.html.

Als u bij het opgeven van het pad naar een bestand / voor het adres plaatst, ziet het er als volgt uit: root_directory_in_the_north/www/pad naar het bestand.
Dat wil zeggen, http://somesite.ru/catalog/doc.html is vergelijkbaar met het volgende: /catalog/doc.html.
Dus als er een / voor het adres staat, betekent dit dat het “aftellen” begint vanuit de www-directory.
In plaats van http://localhost/index.html kunt u nu vanuit elk document /index.html schrijven.
Maar om naar de cgi-map te gaan, moet je als volgt schrijven: /cgi-bin/pad naar het bestand.

Paden die met de hierboven beschreven methoden zijn gemaakt, worden absoluut genoemd, omdat het absolute (volledige) pad naar het bestand op de server wordt aangegeven.

Relatief pad

Er zijn ook relatieve paden, die worden opgegeven ten opzichte van het document zelf waar de link vandaan komt.
Als u bijvoorbeeld een link maakt in doc.html newcat/new.html, betekent dit dat het bestand new.html zich in de map newcat bevindt, die zich op zijn beurt in dezelfde map bevindt als het bestand doc.html. Zoals u kunt zien, is dit pad relatief ten opzichte van het doc.html-bestand. Waar dit bestand zich ook bevindt, het pad newcat/new.html zal altijd geldig zijn als het doc.html-bestand en de map newcat zich op hetzelfde niveau bevinden (d.w.z. in dezelfde map).

U kunt ook een map hoger gaan ten opzichte van een document. Om dit te doen, moet u ../.
Er is bijvoorbeeld een map groot, deze bevat twee mappen: primair en secundair. De primaire map bevat het reeds bekende doc.html-bestand; en in de secundaire map staat een bestand new.html. Om een ​​link te maken van het doc.html-bestand naar het new.html-bestand, moet je ../secundair/new.html schrijven. Maar als de grote map zich in de www-map bevindt, kan het pad naar het new.html-bestand als volgt worden gespecificeerd: /big/secondary/new.html

In plaats van een conclusie te trekken, is het de moeite waard om te zeggen dat het gebruik van absolute en relatieve paden het werk van webmasters, of het nu een beginner of een professional is, enorm vergemakkelijkt. Maak dus optimaal gebruik van deze mogelijkheid, zoals ze zeggen, en probeer paden als http://site.ru/catalog/file.file te vermijden, of gebruik in ieder geval zo min mogelijk hun hulp.

Het artikel bevat stukjes code. De volledige versie kan hier worden gedownload - https://bitbucket.org/okiseleva/html-and-css-learn/src. Mappen - “absolute_path_lvl_1” en alle submappen.

Het pad kan absoluut of relatief zijn.

Absoluut pad

Een absoluut pad is het pad van de hoofdmap naar het bestand.

Het pad bestaat uit alle mappen die we moeten bekijken, gescheiden door een schuine streep. Laten we eens kijken naar een voorbeeld:

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

Absoluut pad naar het bestand

Relatief pad

Een relatief pad is een link die naar andere pagina's op uw site verwijst ten opzichte van de webpagina waarop de link al bestaat.

Als we de mappen naar beneden verplaatsen, scheiden we ze ook met “/”. Als je een niveau hoger wilt gaan, schrijf dan “..”

1. Het eenvoudigste voorbeeld van een relatief pad is slechts een bestandsnaam. als het bestand in de buurt is, geeft u eenvoudig de naam op

Hallo.png

Relatief pad, bestand in de buurt

2. Ga één map omhoog

../Kevin_lvl_2.png

Relatief pad 2

3. Een ingewikkelder voorbeeld, uit Diff_paths.html naar de foto met Kevin

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

Relatief pad 3

Wat is het verschil tussen absolute en relatieve paden?

Het is heel simpel. Als het pad wordt opgegeven vanuit de systeemhoofdmap, is dit een absoluut pad. Hoe is dat postadres V echte leven- waar u ook heen gaat, u vindt altijd de juiste plek op het exacte adres.

Als de root niet aan het begin van het pad is opgegeven, is dit pad relatief en wordt het vanaf voltooid huidige situatie. In het echte leven is het net als de weg naar de slijterij: "twee blokken naar links en altijd rechtdoor." Dit pad is alleen vanaf een bepaald punt te bereiken. Van de ander kom je op een heel andere plek terecht.

In bestand absoluut_pad_lvl_1/level_2.2/Diff_paths.html je kan zien HTML-voorbeeld pagina's met verschillende bestandspaden.

Hier is een voorbeeld van een absoluut en relatief pad voor hetzelfde bestand met Kevin.

D:/hgprojects → Ik heb het project “html-and-css-learn” hier gedownload. Misschien heb je een andere manier

PS - meer details in het boek "

Links kunnen in twee categorieën worden verdeeld:
koppelingen naar externe bronnen - gemaakt met behulp van een tag en gebruikt om de mogelijkheden uit te breiden huidig ​​document wanneer verwerkt door de browser;
hyperlinks— links naar andere bronnen die de gebruiker kan bezoeken of downloaden.

Hoe hyperlinks op een website te maken

1. Linkstructuur

Hyperlinks worden gemaakt met behulp van tag-paar. De tekst die op de webpagina wordt weergegeven, wordt in de tag geplaatst. De linktekst wordt onderstreept weergegeven in de browser, de kleur van het lettertype is blauw en wanneer u over de link beweegt, verandert de muiscursor van uiterlijk.

Vereiste tagparameter is het href-attribuut, dat de URL van de webpagina specificeert.

link-index

De koppeling bestaat uit twee delen − wijzer En adres deel. Link-index is een stukje tekst of afbeelding zichtbaar voor de gebruiker. Adresgedeelte De link is niet zichtbaar voor de gebruiker; deze vertegenwoordigt het adres van de bron waar u naartoe moet.

Het adresgedeelte van de link bestaat uit URL. URL(Uniform Resource Locator) - uniform bronadres. Bij het maken van adressen wordt aanbevolen om een ​​koppelteken te gebruiken in plaats van een onderstrepingsteken om woorden te scheiden. IN algemeen beeld URL met het volgende formaat:

Toegangsmethode://servernaam:poort/pad

Toegangsmethode, of protocol, wisselt gegevens uit tussen werkstations in verschillende netwerken. De meest voorkomende protocollen voor gegevensoverdracht:

bestand maakt het lezen van een bestand vanaf de lokale schijf mogelijk:

Bestand:/gallery/pictures/summer.html

http biedt toegang tot een webpagina via het HTTP-protocol:

http://site.ru/

https is een speciale implementatie van het HTTP-protocol dat gebruik maakt van encryptie (meestal SSL of TLS)

https://site.ru/

ftp doet een verzoek aan de FTP-server om een ​​bestand te ontvangen:

Ftp://pgu/map/bibliotheek

mailto start een sessie posterijen met de opgegeven bestemming en host:

Mailto: [e-mailadres beveiligd]

Server naam beschrijft voor-en achternaam machines op het netwerk, bijvoorbeeld site.ru. Als de servernaam niet is opgegeven, wordt de link als lokaal beschouwd, d.w.z. het bevindt zich op dezelfde machine als het HTML-document dat de link bevat.

TCP-poortnummer, waarop de webserver draait. Vertegenwoordigt een getal dat moet worden opgegeven als een methode een poortnummer vereist ( aparte servers kunnen een eigen onderscheidend poortnummer hebben). Als er geen poort is opgegeven, wordt poort 80 standaard gebruikt. Standaard poorten Zijn:
21 - FTP
23 - Telnet
70 - Gopher
80 - HTTP

Pad bevat de naam van de map waarin het bestand zich bevindt.

2. Absoluut en relatief pad

Wanneer een link alleen een bestandsnaam specificeert, gaat de browser ervan uit dat het bestand zich in dezelfde map bevindt als het document dat de hyperlink bevat. In de praktijk bevatten websites honderden documenten waarop wordt gepost aparte mappen om ze gemakkelijker te kunnen beheren. Als u een koppeling wilt maken naar een bestand buiten de map die het huidige document bevat, moet u de bestandslocatie of het pad opgeven. HTML ondersteunt twee typen paden: absoluut en relatief.

Rijst. 1. Voorbeeld mapstructuur

2.1. Absoluut pad

Absoluut pad geeft de exacte locatie van het bestand aan binnen de gehele mappenstructuur op de computer (server). Het absolute pad naar het bestand geeft toegang tot het bestand vanuit bronnen van derden en bevat de volgende componenten:
1) protocol, bijvoorbeeld http (optioneel);
2) domein ( Domeinnaam of computer-IP-adres);
3) map (mapnaam die het pad naar het bestand aangeeft);
4) bestand (bestandsnaam).

Er zijn twee soorten absolute padnotatie: met en zonder protocolaanduiding:

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

Als het bestand zich in de hoofdmap bevindt, is het pad naar het bestand als volgt:

http://site.ru/index.html

Als er geen bestandsnaam is, wordt de webpagina geladen die standaard is ingesteld in de webserverinstellingen (de zogenaamde indexbestand).

http://site.ru/

Normaal gesproken is het indexbestand een document met de naam index.html. De aanwezigheid van een afsluitende schuine streep / betekent dat de toegang naar de map gaat; als deze er niet is, gaat deze rechtstreeks naar het bestand.

2.2. Relatief pad

Relatief pad beschrijft het pad naar het opgegeven document ten opzichte van het huidige document. Het pad wordt bepaald op basis van de locatie van de webpagina waarop de link zich bevindt. Relatieve links worden gebruikt bij het maken van links naar andere documenten op dezelfde site. Wanneer de browser het http://-protocol in de link niet vindt, zoekt hij op dezelfde server naar het opgegeven document.

Een relatief pad bevat de volgende componenten:
1) map (mapnaam die het pad naar het bestand aangeeft);
2) bestand (bestandsnaam).

Het pad voor relatieve links heeft er drie speciale aanduidingen:
/ wijst naar hoofdmap en zegt dat je het pad vanuit de hoofdmap van het document moet starten en naar de volgende map moet gaan
./ wijst naar huidige map
../ één map omhoog gaan (directory)

Het belangrijkste verschil tussen een relatief pad en een absoluut pad is dat het relatieve pad niet de naam van de hoofdmap en de bovenliggende mappen bevat, waardoor het adres korter wordt, en als u van het ene domein naar het andere verhuist, hoeft u dit niet te doen. voer een nieuw absoluut adres in. Maar als bron van derden linkt bijvoorbeeld naar uw afbeeldingen met relatieve adressen, dan worden ze niet op een andere site weergegeven.

3. Ankers

Ankers, of interne links, maken overgangen naar verschillende secties van de huidige webpagina, zodat u snel tussen secties kunt schakelen. Dit blijkt erg handig als er teveel tekst op de pagina staat. Interne links worden ook gemaakt met behulp van de tag met het verschil dat het href-attribuut de naam van de pointer bevat - de zogenaamde anker, niet de URL. De aanwijzernaam wordt altijd voorafgegaan door een #-teken.

Bij het ontwikkelen van een website moet u vaak paden naar bestanden, links naar documenten en pagina's opgeven.
In boeken over computertechnologieën Je kunt vaak de termen absolute en relatieve paden naar gebruikte bestanden vinden. Vaak legt de auteur niet uit wat een bepaald pad betekent. De lezer raakt dan ook in verwarring als de auteur het vervolgens heeft over het gebruik van absolute en/of relatieve paden.
Stel dat u een website heeft en dat u een hyperlink (link) naar een van de pagina's van de site moet maken. Hier moet u kiezen welk padtype u wilt gebruiken: relatief of absoluut.

Het is erg belangrijk om te begrijpen waar welk pad nodig is en hoe u dit het beste kunt gebruiken. Een absoluut pad kan slechts op één manier worden opgegeven. Maar relatief heeft, in tegenstelling tot absoluut, verschillende toepassingen.
Lees meer over hoe en waar het wordt gebruikt absoluut en relatief pad naar bestanden, Ik zal het je vandaag proberen te vertellen.

Omdat ik het grootste deel van mijn tijd aan webtechnologieën besteed, zal ik voorbeelden geven die verband houden met het maken van websites.

Absoluut pad

Wanneer een link de volledige URL van een bestand of pagina is, is dat ook het geval 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 in dit geval absoluut pad naar Startpagina mijn blog. Waar het protocol is http, A www.site domeinnaam).

Als u bijvoorbeeld een link naar een map opgeeft http://uwdomein.ua/web/ vervolgens wordt het indexbestand geladen (weergegeven). Deze regel is vooral van toepassing op statische sites. Omdat u bij het gebruik van een programmeertaal interne routing kunt creëren. 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 in de gewenste map maken en daarin een richtlijn schrijven. Het wijzigen en maken van het .htaccess-bestand, evenals het routeren met behulp van een programmeertaal, valt buiten het bestek van dit artikel.

Kortom, het absolute 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. Hoewel dit pad op uw eigen website kan worden gebruikt. Maar veel mensen zijn van mening dat links binnen een site relatief moeten zijn.
Het gebruik van een absoluut pad kan enkele problemen veroorzaken. Wanneer u bijvoorbeeld een site overzet van een lokale machine naar een server (dit is als u lokaal apparaat adressen in de vorm http://localhost/sitename.ua/...). Er kunnen zich problemen voordoen wanneer het domein (sitenaam) moet worden gewijzigd. Hoewel al deze moeilijkheden kunnen worden opgelost, zult u er wat tijd aan moeten besteden.
Als er minnen zijn, moeten er ook plussen zijn. Laten we als voorbeeld een situatie nemen waarin inhoud van uw website wordt gestolen. In de praktijk ben ik er meer dan eens van overtuigd dat de hele tekst wordt gestolen, zonder dat er een backlink naar het origineel achterblijft. Dus als u absolute paden gebruikt, kunt u krijgen backlinks van de site waar de gestolen inhoud zich bevindt. Maar dit is alleen als je dat hebt interne koppeling werd gedaan met behulp van absolute paden. Hoewel dit niet altijd werkt, heb ik meer dan eens de verschijning van links opgemerkt vanaf de sites van anderen waarop mijn inhoud zich bevond.

Als ik een beetje uit het onderwerp graaf, wil ik er kort over praten wat is URL.

Elke webpagina of document op internet heeft zijn eigen unieke adres, dat wordt gebeld URL.
URL— een uniforme locator (locatie-identificatie) van een hulpbron. URL staat voor Uniform Resource Locator. Je kunt een dergelijke decodering ook tegenkomen als Universal Resource Locator (universal resource locator). Deze manier om een ​​adres te schrijven is gestandaardiseerd op internet. Meer algemeen en breed systeem URI-bronidentificatie vervangt geleidelijk de term URL.
URI- Dit tekenreeks, die een bron identificeert: document, bestand, enz. Uiteraard heeft dit betrekking op internetbronnen.

Relatief pad

Vaak worden relatieve paden veel vaker gebruikt dan absolute paden. Kortom, een relatief pad wordt opgegeven 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 wilt invoegen. In dit geval is het gebruik relatief ten opzichte van het pad volkomen gerechtvaardigd. Afhankelijk van de structuur van de site, hangt het ervan af welke vorm van relatief pad u moet gebruiken. Er zijn twee typen relatieve paden: een pad relatief ten opzichte van het document, en een pad relatief ten opzichte van de hoofdmap van de site.

Pad relatief aan document

Precies pad ten opzichte van document wordt het meest gebruikt. Dergelijke links worden ook wel lokale links genoemd. In principe wordt dit pad gebruikt wanneer het huidige en gerelateerde document (pagina) zich in dezelfde map bevinden. Als u een document naar een andere map verplaatst, moet het pad (link) worden gewijzigd. Al kun je ook linken naar documenten (pagina's) uit andere directory's. Om dit te doen, wordt het pad geschreven van het huidige document naar het doeldocument (pagina). In dit geval moet het pad ten opzichte van het document afhankelijk van de mapstructuur worden ingesteld.
Laten we een voorbeeld nemen eenvoudigste structuur statische plaats.

Laten we aannemen dat elke afbeelding in de directory afbeeldingen moeten op de juiste pagina's worden ingevoegd thuis.html, producten.html, contact.htm l. Om bijvoorbeeld een afbeelding op de pagina “home.html” in te voegen, moet u het pad opgeven waar de afbeelding zich bevindt. Als u een pad ten opzichte van het document gebruikt, moet u het volgende in de paginacode schrijven:

Deze code voor het invoegen van een afbeelding op de pagina is onvolledig. Omdat het niet een aantal belangrijke attributen bevat, zoals breedte, hoogte, enz. Attribuut src, dient hier om het pad naar het bestand aan te geven. 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 ten opzichte van het document.
Bij het gebruik van document-relatieve paden ontbreekt het absolute padgedeelte. Een deel van het absolute pad wordt hier afgekapt, zowel voor het huidige document (pagina) als voor het gekoppelde document. Hier wordt alleen het deel van het pad gebruikt dat altijd verandert.
Ik wil u er nogmaals aan herinneren dat u bij het gebruik van een pad ten opzichte van een document rekening moet houden originele locatie bestanden.

Laten we ons een situatie voorstellen waarin de pagina producten.html, bevindt zich niet in de hoofdmap van de site (zoals het geval was in het vorige voorbeeld), maar in een submap. Nu moet je de afbeelding in het bestand invoegen producten.html, die dieper ligt dan de hoofdmap van de site.

Om een ​​afbeelding in een bestand in te voegen producten.html u moet terugkeren naar de hoofdmap. Hierna kunt u het reeds bekende pad gebruiken, dat zojuist hierboven werd genoemd.

Zoals je uit de bovenstaande code kunt zien, is nu het volgende aan het pad toegevoegd: ../ . Alleen deze reeks karakters ../ en dient om één directory (niveau) hoger in de directoryhiërarchie te verplaatsen. Het pad in bovenstaande code kun je als volgt lezen: “Ga een map hoger (terug), ga naar de map afbeeldingen en neem het bestand vanaf daar producten.png«.
Als ../ betekent dat u één directory (niveau) hoger in de directoryhiërarchie verplaatst, en vervolgens het symbool / geeft aan dat u één niveau naar beneden gaat.
Karaktervolgorde ../ kan onderweg herhaaldelijk worden gebruikt. Als het bestand bijvoorbeeld producten.html naar drie geneste mappen gaat, moet u de volgende code gebruiken:

Zoals uit de voorgaande voorbeelden blijkt, wordt gebruik gemaakt van paden ten opzichte van het document in veel gevallen gerechtvaardigd. Dit type pad 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 root van de site, dat hieronder zal worden besproken.

Pad relatief ten opzichte van de hoofdmap van de site

U heeft zich waarschijnlijk al gerealiseerd dat paden relatief aan een document heel vaak worden gebruikt. Maar er is één probleem bij het gebruik ervan. Dat wil zeggen dat wanneer de mapstructuur verandert, de paden moeten worden gewijzigd.
Maar dit probleem kan worden opgelost door gebruik te maken van paden ten opzichte van de hoofdmap van de site. Waar het pad is opgegeven van de hoofdmap naar het document.
Alle paden ten opzichte van de hoofdmap van de site beginnen met het teken / . Alleen hier wordt dit teken, in tegenstelling tot paden relatief aan een document, gebruikt om de hoofdmap aan te geven. Omdat het aan het begin van de reis wordt gebruikt.
Dankzij het pad ten opzichte van de hoofdmap van de site kunt u bepaalde bestanden verplaatsen zonder de links te beschadigen. U kunt dit type pad alleen gebruiken op een webserver op internet of op een webserver op de lokale computer.

De webserver op de lokale machine kan een . Hiermee kunt u een omgeving op uw computer creëren waarin u websites kunt maken en deze vooraf kunt testen.

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

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

De eenvoudigste manier om het relatieve rootpad te bepalen, is door het absolute pad te nemen en http:// en de hostnaam weg te laten.

Voorbeeld
Soms is het nodig dat informatie op de ene pagina wordt gebruikt door andere pagina's op de site. Dit wordt vaak gedaan om de hoeveelheid herhaalde code op elke pagina te verminderen. Stel 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 staat.)

De volgende code is bedoeld 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. Als dat niet het geval is, kijk dan eens naar de document-relatieve paddefinitie hierboven.
Wanneer een bezoeker nu sitepagina's bezoekt zoals thuis.html, contact.ntml, ziet hij een perfect weergegeven pagina. In elk daarvan wordt een bestand ingevoegd _contact.html, waarin op zijn beurt een afbeelding wordt ingevoegd contact.png.
Met andere woorden, door bijvoorbeeld naar de pagina te gaan thuis.html, gebeurt het volgende: “De hoofdpaginacode wordt uitgevoerd thuis.html. Vervolgens wordt de paginacode ingevoegd en uitgevoerd _contact.html. Paginacode _contact.html, zegt dat je naar de directory moet gaan afbeeldingen en neem vanaf daar de afbeelding contact.png«.
Als je de insluitcode zelf weglaat, werkt alles prima. Maar als u de pagina uitvoert producten.html, dan zal er een fout optreden. Omdat de code zal proberen de map te vinden afbeeldingen en bestand contact.png in de map producten. Maar zo'n map bestaat daar niet, en dat is waar het probleem zich feitelijk voordoet.
Het wordt duidelijk dat je hier geen document-relatief pad kunt gebruiken.
Uiteraard kunt u hier een absoluut pad gebruiken. Over de voor- en nadelen deze aanpak zei ik hierboven.
Over het algemeen is dit een van de situaties waarin u een pad ten opzichte van de hoofdmap van de site moet gebruiken. Wanneer u een pad gebruikt dat relatief is aan de hoofdmap van de site, begint de link altijd vanuit de hoofdmap (hoofdmap van de site). Met dit type pad kunt u code gebruiken om bijvoorbeeld een afbeelding in te voegen, ongeacht de sitehiërarchie en de bijbehorende mappen.
Als u in het bovenstaande voorbeeld een pad ten opzichte van de hoofdmap van de site gebruikt, voorkomt u problemen bij het invoegen van een afbeelding. Want waar dit type pad ook wordt gebruikt, het zal altijd het daarin opgegeven bestand vinden.
Het pad ten opzichte van de hoofdmap van de site lijkt sterk op het pad ten opzichte van het document. Om een ​​pad ten opzichte van de hoofdmap van de site te maken, moet u het symbool toevoegen / naar het begin van de reis.

Nu wordt de afbeelding correct op elke pagina van de site ingevoegd.

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

IN deze les We zullen beginners uitleggen wat een absoluut en relatief bestandspad is, en ook in welk geval welk pad het beste is om te gebruiken. Als u al bekend bent met dit onderwerp, kunt u doorgaan naar de volgende les.

Laten we dus beginnen met de definitie van de term 'pad' zelf:

Pad (Engels pad) - een reeks tekens die de locatie van het bestand aangeven bestandssysteem, adresboek.

Wikipedia

Als we het over sites hebben, is het pad hetzelfde als de link. Koppelingen kunnen absoluut of relatief zijn. Laten we beide opties in meer detail bekijken.

Wat is een absoluut pad naar een bestand

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

Absoluut pad kan in CSS worden gebruikt. Als u bijvoorbeeld een afbeelding als achtergrond wilt instellen, kunt u de absolute URL naar het afbeeldingsbestand nemen EN deze opgeven in het stylesheet:

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

Wat is een relatief bestandspad

Met een relatief adres is alles veel interessanter: het kan zowel vanaf de hoofdmap van de site als vanuit het huidige document worden geteld. Relatief pad van de root- dit is een pad dat de locatie van het bestand aangeeft ten opzichte van de hoofdmap van de site. In dit geval bevat het adres noch een protocol, noch een domeinnaam en begint het met een schuine streep /, wat aangeeft hoofdmap. Dit adres ziet er als volgt uit:

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

Hoe eenvoudig het relatieve rootadres bepalen? Neem gewoon een absolute link en verwijder het protocol en de domeinnaam ervan, waarbij u de schuine streep en alle tekens die daarna komen, laat staan.

Relatief bestandspad vanaf document is het pad naar het bestand ten opzichte van het huidige document. Dit adres is afhankelijk van de locatie van het bestand waarin het is geschreven. Dus wanneer relatieve link opgegeven in het stijlblad, berekent het het bestandspad op basis van het stijlblad, en niet op basis van de huidige webpagina of hoofdmap. Laten we een paar voorbeelden geven.

Voorbeeld I

Als ons stylesheet style.css is en het bestand met achtergrond afbeelding bg.png zich in dezelfde map bevinden (niet noodzakelijkerwijs de root), dan ziet het relatieve pad van de tabel naar de afbeelding er als volgt uit:

Achtergrondafbeelding: url(bg.png); /* je schrijft gewoon de bestandsnaam */

Voorbeeld II

Als het stijlblad zich in de hoofdmap bevindt en de afbeelding zich in img-map, zal de relatieve link er als volgt uitzien:

Achtergrondafbeelding: url(img/bg.png); /* geen voorloopslash nodig */

Voorbeeld III

Als het stijlblad zich in een map bevindt en de afbeelding grenst aan deze map, dan ziet het relatieve pad er als volgt uit:

Achtergrondafbeelding: url(../bg.png); /* twee punten - ga één niveau omhoog */

Voorbeeld IV

Als het stijlblad zich in twee mappen bevindt en de tekening grenst aan de eerste map, is het relatieve pad als volgt:

Achtergrondafbeelding: url(../../bg.png); /* ga twee niveaus omhoog */

Twee punten en een schuine streep aan het begin van het relatieve pad betekenen dat u één niveau omhoog gaat. Afhankelijk van het aantal niveaus (directories) waarnaar u moet klimmen, moet u het vereiste aantal stippen met schuine strepen invoeren. Als het stijlblad zich bijvoorbeeld niet in twee, maar in vier mappen bevindt, is de invoer dienovereenkomstig als volgt:

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

In het geval dat de afbeelding verborgen is in de map img en het stijlblad verborgen is in de map css, moet u afsluiten css-mappen en ga naar de img-map. Soortgelijk:

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

Als er meerdere mappen zijn, moet u deze ook registreren. Laten we het vorige voorbeeld veranderen: stel je voor dat er in de map img nog een map met achtergronden is, die onze tekening bevat. Het relatieve pad zou er als volgt uitzien:

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

Welke manier is beter om te gebruiken

Absoluut linkadres U moet het gebruiken als het bestand waarnaar u linkt, op een andere site staat. Binnen één site wordt het absolute pad praktisch niet gebruikt (hoewel het wel zal werken). Dit komt door verschillende punten: ten eerste kunnen dergelijke links erg omslachtig zijn, en ten tweede, als de domeinnaam verandert, zal er een probleem ontstaan: alle links zullen naar het oude domein leiden, wat tot veel fouten en verbroken links kan leiden.

Relatief pad van de root werkt op een webserver, maar is nutteloos bij het ontwikkelen ervan lokale computer. Maar het voordeel van dit soort links is dat u uw stylesheet naar elke map op de site kunt verplaatsen en niet bang hoeft te zijn dat de adressen achtergrondafbeeldingen werkloos zal worden.

Relatief pad vanaf document - beste optie bij het ontwikkelen van internet op een lokale machine zonder een server te gebruiken. In de browser kunt u webpagina's die op uw computer zijn opgeslagen normaal bekijken en de bestandsadressen werken. Ze werken op een live site, maar met één voorwaarde: als u het stijlblad niet naar een andere plaats verplaatst (anders moet u de paden aanpassen).

Probeer te oefenen met het gebruik van relatieve paden, zowel op uw lokale computer als op uw webserver. Als u begrijpt hoe dit werkt, zal dit zeker nuttig voor u zijn bij elk project.

Verder in de tutorial: background-repeat eigenschap - bestuurt de herhaling van de achtergrondafbeelding.