Sökväg till html-mappen. Vilket sätt är bättre att använda. Vad mer behöver du veta?

Jag hoppas att du lyckades med den sista uppgiften och skapade tre sidor med text. Vi designade den med taggar och kom ihåg deras syfte. Tja, en rimlig fråga uppstår: "Hur navigerar man mellan dessa sidor?" Lätt! Här behöver vi länkar.

En länk är ett sidelement som i huvudsak är ren text, men det är aktivt! Det vill säga när du klickar på den här texten omdirigeras besökaren till en annan sida. Är det inte sant, det är precis vad vi letade efter! Så låt oss snabbt lära oss hur man använder länkar, här är ett exempel:

Min sida

Titta: "a"-taggen, och den har följande attribut: "href" och "target", även om dessa inte är alla attributen som den här taggen har, men jag kommer att förklara principen för dig med dem. Vissa taggar, som länk, har attribut. Det finns obligatoriska och valfria attribut. Specifikt, i vårt fall krävs href, men mål är det inte.
Men låt oss återgå till själva länken. När det gäller hur de är, är det bättre att läsa i motsvarande ämne på min webbplats: vilken typ av länkar det finns. Men där pratade jag inte i detalj om relativa och absoluta vägar:

Https://site/1.png - absolut sökväg file://localhost/C:/1.png - absolut sökväg till lokal dator../img/1.png – relativ väg

Här är några exempel. En absolut sökväg hårdkodar adressen till en sida eller fil. Det är inte önskvärt att använda dem, för om du utvecklar en webbplats på en dator och sedan överför den till servern, måste alla vägar ändras, kan du föreställa dig hur mycket krångel? Det är mycket bättre att använda relativa sökvägar, vilket fungerar enligt följande: det finns en arbetskatalog där den körande (öppna) filen finns. Och alla relativa sökvägar börjar redan från arbetskatalogen. För att flytta uppåt i katalogen måste du skriva ".." som i exemplet ovan. Om du vill stanna kvar i den här katalogen, skriv omedelbart namnet på filen eller mappen.

Tja, för förståelse: låt oss ha en mapp med filer, som ligger på följande adress C:\site och det finns en annan mapp C:\site2. I den första mappen finns sidorna page1.html, page2.html, page3.html och en mapp med img-bilder och i den andra mappen, det vill säga site2, finns sidorna page4.html och page5.html.
Följaktligen öppnar vi sidan page1.html från webbplatsmappen som den första och dansar från den:

Sida2.html är sökvägen till den andra sidan, den finns i samma katalog som den första. page3.html är densamma. img/1.png – bild i mappen med bilder. ../site2/page4.html – den här sidan finns inte i arbetsmapp Därför gick vi upp i en katalog och gick till mappen site2 för att komma åt sidan 4. ../site2/page5.html – samma sak.

Jag hoppas att det blev lite tydligare om relativa och absoluta vägar.

Här är ankaret för en länk dess text som du kan klicka på. Href innehåller vägen till vilken vi är på väg. I mål – övergångsparametrar, till exempel, öppnas i ett nytt fönster. Det finns en länktips i titeln som dyker upp när du håller muspekaren över den. Det finns många fler länkalternativ, men det är de det här ögonblicket vi behöver det inte, för det viktigaste nu, om du inte har glömt, är att länka samman våra tre sidor.
För att göra detta, öppna en sida i anteckningsblocket och i huvuddelen i början, så att länkarna är överst på sidan, lägg till länkar:

Giraff | Elefant | Zebra... Därefter kommer vår text om djuret, som vi skrev tidigare, i förra lektionen.

Glöm inte följande punkter: istället för page1.html och 2 och 3, ange namnen på dina sidor. Alla sidfiler måste finnas i samma mapp, annars använd relativa eller absoluta sökvägar för att komma åt dem.

Länkadressen kan vara antingen absolut eller relativ. Absoluta adresser måste börja med protokollet (vanligtvis http://) och innehålla webbplatsens namn. Relativa länkar är baserade på roten till webbplatsen eller det aktuella dokumentet.

Exempel 8.2 visar hur man skapar en absolut länk till en annan webbplats.

Exempel 8.2. Använder absoluta referenser

Att lära sig HTML

När du anger en webbplatskatalog som en länk (till exempel http://site/css/), visas indexfilen. Det här är filen som laddas som standard när du kommer åt en katalog utan att uttryckligen ange filnamnet. Vanligtvis är indexfilen ett dokument som heter index.html.

Absoluta länkar används vanligtvis för att peka på ett dokument på en annan nätverksresurs, men det är acceptabelt att göra absoluta länkar och inne på den aktuella webbplatsen. Detta praktiseras dock inte ofta, eftersom sådana länkar är ganska långa och besvärliga. Därför används främst relativa länkar på webbplatsen.

Länkar i förhållande till det aktuella dokumentet

När du skapar relativa länkar måste du förstå vilket värde du ska ange för href-attributet, eftersom det beror på den ursprungliga platsen för filerna. Låt oss titta på några typiska alternativ.

1. Filerna finns i en mapp (Fig. 8.4).

Detta filnamn tas endast som ett exempel på webbplatsen, ryska tecken med mellanslag bör inte användas i filnamn, och även i olika fall.

2. Filerna finns i olika mappar(Fig. 8.5).

När orginal dokument lagras i en mapp, och länken finns i roten av webbplatsen, sedan innan filnamnet i länkadressen ska du sätta två punkter och ett snedstreck (/), som visas nedan.

Två poäng in I detta fall innebär att avsluta den aktuella mappen till en högre nivå.

3. Filerna placeras i olika mappar (Fig. 8.6).

Nu originalfil finns i två undermappar, och för att länka till dokumentet i roten av webbplatsen måste du upprepa föregående exempel två gånger.

Länk

Situationen är liknande med hur många undermappar som helst.

4. Filerna placeras i olika mappar (fig. 8.7).

Nu förändras situationen, källfilen finns i roten på webbplatsen och filen som du behöver länka till finns i mappen. I det här fallet blir sökvägen till filen som följer.

Länk

Observera att det inte finns några ytterligare punkter eller snedstreck före mappnamnet. Om filen inte finns i en, utan i två mappar, skrivs sökvägen till den så här.

Länk

Länkar i förhållande till webbplatsroten

Ibland kan du hitta sökvägen till filen i förhållande till roten på webbplatsen, ser det ut som "/Mapp/Filnamn" med ett snedstreck i början. Ja, spela in Kurser innebär att länken leder till en mapp som heter kurs, som finns i roten av webbplatsen, och i den måste du ladda ner indexfilen.

Observera att denna form av inspelning inte fungerar på en lokal dator, utan endast under kontroll av en webbserver.

När du utvecklar en webbplats måste du ofta ange sökvägar till filer, länkar till dokument och sidor.
I böcker om datorteknik Du kan ofta hitta termerna absoluta och relativa sökvägar till filer som används. Ofta förklarar inte författaren vad en viss väg betyder. Läsaren blir följaktligen förvirrad när författaren i efterhand talar om att använda absoluta och/eller relativa vägar.
Låt oss säga att du har en webbplats och du behöver skapa en hyperlänk (länk) till en av sidorna på webbplatsen. Här måste du välja vilken sökvägstyp som ska användas: relativ eller absolut.

Det är mycket viktigt att förstå var vilken väg behövs och hur man bäst använder den. En absolut sökväg kan bara anges på ett sätt. Men relativ, till skillnad från absolut, har flera användningsområden.
Läs mer om hur och var den används absolut och relativ sökväg till filer, jag ska försöka berätta idag.

Eftersom jag ägnar det mesta av min tid åt webbteknik kommer jag att ge exempel relaterade till att skapa webbsidor.

Absolut väg

När en länk är den fullständiga URL-adressen till en fil eller sida så är den det absolut väg. I detta fall måste protokollet som används finnas i adressen. Till exempel, http://www.webbplatsär den absoluta vägen till en specifik webbplats. I det här fallet är den absoluta vägen till startsida min blogg. Var protokollet finns http, A www.webbplats domän namn).

Om du till exempel anger en länk till en katalog http://dindomän.ua/web/ sedan kommer indexfilen att laddas (visas). Denna regel gäller främst statiska platser. För när du använder ett programmeringsspråk kan du skapa intern routing. Indexfilär vanligtvis en fil som heter index.php, index.html, index.phtml, index.shtml. För att använda en annan indexfil måste du skapa en fil med namnet .htaccess i önskad katalog och skriva ett direktiv i den. Att ändra och skapa .htaccess-filen, samt dirigera med ett programmeringsspråk, ligger utanför den här artikelns omfattning.

I grund och botten används den absoluta sökvägen när du behöver länka till en annan sida. Med andra ord, om du vill skicka en besökare till en annan webbplats måste du använda en absolut sökväg. Även om den här sökvägen kan användas på din egen webbplats. Men många tror att länkar inom en webbplats bör vara relativa.
Att använda en absolut sökväg kan orsaka vissa problem. Till exempel när du överför en webbplats från en lokal maskin till en server (detta är om du använde lokal maskin adresser i formen http://localhost/sitename.ua/...). Svårigheter kan uppstå när det finns behov av att byta domän (webbplatsnamn). Även om alla dessa svårigheter kan lösas, måste du lägga lite tid på dem.
När det finns minus måste det finnas plus. Låt oss ta till exempel en situation som att innehåll stjäls från din webbplats. I praktiken har jag mer än en gång blivit övertygad om att hela texten är stulen, utan att lämna en bakåtlänk till originalet. Så när du använder absoluta sökvägar kan du få bakåtlänkar från platsen där det stulna innehållet finns. Men detta är bara om du har intern länkning gjordes med hjälp av absoluta banor. Även om detta inte alltid fungerar, har jag märkt mer än en gång uppkomsten av länkar från andras webbplatser där mitt innehåll fanns.

Gräver lite från ämnet, jag vill kort prata om det vad är URL.

Varje webbsida eller dokument på Internet har sin egen unika adress, som kallas URL.
URL— en enhetlig lokaliseringsanordning (platsidentifierare) för en resurs. URL står för Uniform Resource Locator. Du kan också stöta på en sådan avkodning som Universal Resource Locator (universal resource locator). Denna metod för att skriva en adress är standardiserad på Internet. Mer allmänt och brett system Identifiering resurs-URI ersätter gradvis termen URL.
URIär en teckensträng som identifierar en resurs: dokument, fil, etc. Naturligtvis avser detta internetresurser.

Relativ väg

Ofta används relativa banor mycket oftare än absoluta banor. I grund och botten anges en relativ sökväg när du behöver skicka en besökare till en annan sida på din webbplats, eller infoga ett objekt (till exempel en bild) på en av sidorna. I det här fallet är det ganska motiverat att använda i förhållande till banan. Beroende på strukturen på webbplatsen beror det på vilken form av relativ sökväg du behöver använda. Det finns två typer av relativ sökväg: en sökväg i förhållande till dokumentet, en sökväg i förhållande till webbplatsroten.

Sökväg i förhållande till dokument

Exakt sökväg i förhållande till dokument används oftast. Sådana länkar kallas även lokala länkar. I grund och botten används denna sökväg när det aktuella och relaterade dokumentet (sidan) finns i samma katalog. Om du flyttar ett dokument till en annan katalog måste sökvägen (länken) ändras. Även om du också kan länka till dokument (sidor) från andra kataloger. För att göra detta skrivs sökvägen från det aktuella dokumentet till måldokumentet (sidan). I det här fallet måste sökvägen i förhållande till dokumentet ställas in beroende på katalogstrukturen.
Låt oss ta till exempel enklaste strukturen statisk webbplats.

Låt oss anta att varje bild i katalogen bilder måste infogas på lämpliga sidor home.html, products.html, kontakt.htm l. För att infoga en bild, till exempel på sidan "home.html", måste du ange sökvägen där bilden finns. Om du använder en sökväg i förhållande till dokumentet måste du skriva följande i sidkoden:

Denna kod för att infoga en bild på sidan är ofullständig. Eftersom den inte innehåller flera viktiga egenskaper, som bredd, höjd, etc. Attribut src, tjänar här till att indikera sökvägen till filen. Alla andra attribut utelämnas här, eftersom de inte är så viktiga nu. Huvudsaken nu är att du har en uppfattning om hur vägen ser ut i förhållande till dokumentet.
När du använder dokumentrelaterade sökvägar saknas den absoluta sökvägsdelen. En del av den absoluta sökvägen trunkeras här, både för det aktuella dokumentet (sidan) och för det länkade. Här används bara den del av vägen som alltid förändras.
Låt mig återigen påminna dig om att när du använder en sökväg i förhållande till ett dokument, måste du ta hänsyn till den ursprungliga platsen för filerna.

Låt oss föreställa oss en situation där sidan products.html, kommer inte att finnas i webbplatsens rotkatalog (som var fallet i föregående exempel), utan i en underkatalog. Nu måste du infoga bilden i filen products.html, som ligger djupare än webbplatsens rotkatalog.

För att infoga en bild i en fil products.html behöver gå tillbaka till rotkatalogen. Därefter kan du använda den redan kända sökvägen, som nämndes precis ovan.

Som du kan se från koden ovan har följande nu lagts till i sökvägen: ../ . Bara denna sekvens av tecken ../ och tjänar till att flytta en katalog (nivå) högre i kataloghierarkin. Sökvägen i ovanstående kod kan läsas så här: "Gå en katalog högre (tillbaka), gå till katalogen bilder och ta filen därifrån products.png«.
Om ../ innebär att flytta en katalog (nivå) högre i kataloghierarkin, sedan symbolen / indikerar att flytta en nivå ner.
Karaktärssekvens ../ kan användas upprepade gånger när du är på språng. Till exempel om filen products.html flytta in i tre kapslade kataloger, måste du använda följande kod:

Som framgår av de tidigare exemplen, använd sökvägar i förhållande till dokumentet i många fall motiverat. Denna typ av väg används ofta i praktiken, och den kan appliceras på nästan alla situationer. Som jag sa ovan, det finns också en väg i förhållande till roten av webbplatsen, som faktiskt kommer att diskuteras nedan.

Sökväg i förhållande till webbplatsroten

Du har förmodligen redan insett att sökvägar i förhållande till ett dokument används väldigt ofta. Men det finns ett problem när du använder dem. Vilket är att när katalogstrukturen ändras måste sökvägarna ändras.
Men detta problem kan lösas genom att använda sökvägar i förhållande till webbplatsroten. Där sökvägen anges från rotkatalogen till dokumentet.
Alla vägar i förhållande till platsroten börjar med tecknet / . Endast här, till skillnad från sökvägar i förhållande till ett dokument, används detta tecken för att indikera rotkatalogen. Eftersom den används i början av resan.
Sökvägen i förhållande till webbplatsroten låter dig flytta vissa filer utan att skada länkarna. Du kan bara använda den här typen av sökväg på en webbserver på Internet eller på en webbserver som finns på den lokala datorn.

Webbservern på den lokala maskinen kan vara . Vilket gör att du kan skapa en miljö på din dator för att skapa webbplatser och förtesta dem.

Den relativa rotsökvägen innehåller ingetdera http-protokoll, inget domännamn. Och som jag redan sa, det börjar med att ange symbolen / , som pekar på rotkatalogen. Huvudsidans indexfil finns vanligtvis i denna katalog.

Till exempel, /images/products.png indikerar att filen products.png finns i mappen bilder, som finns i rotkatalogen.

Det enklaste sättet att bestämma den rotrelativa sökvägen är att ta den absoluta sökvägen och kassera http:// och värdnamnet.

Exempel
Ibland är det nödvändigt att information på en sida används av andra sidor på sajten. Detta görs ofta för att minska mängden upprepad kod på varje sida. Låt oss säga att det finns en fil _contact.html, som innehåller information om telefonnummer, e-post och innehåller en bild contact.png. (Låt det vara en liten tabell som kommer att finnas på varje sida på webbplatsen.)

Följande kod är till för att infoga bilden "contact.png".

Koden som krävs för att infoga en fil i en annan ligger utanför ramen för den här artikeln. Allt beror på vilket programmeringsspråk som används.

Jag hoppas att du redan vet vilken typ av sökväg som användes i ovanstående kod. Om inte, titta på den dokumentrelaterade sökvägsdefinitionen ovan.
Nu, när en besökare besöker webbplatssidor som t.ex home.html, contact.ntml, kommer han att se en perfekt renderad sida. I var och en av dem infogas en fil _contact.html, i vilken i sin tur en bild infogas contact.png.
Med andra ord genom att till exempel gå till sidan home.html, händer följande: "Huvudsideskoden körs home.html. Sedan infogas sidkoden och exekveras _contact.html. Sidkod _contact.html, säger att du måste gå till katalogen bilder och ta bilden därifrån contact.png«.
Om du utelämnar själva inbäddningskoden fungerar allt bra. Men om du kör sidan products.html, då uppstår ett fel. Eftersom koden kommer att försöka hitta katalogen bilder och fil contact.png i katalogen Produkter. Men en sådan katalog finns inte där, det är där problemet faktiskt uppstår.
Det blir tydligt att du inte kan använda en dokument-relativ sökväg här.
Naturligtvis kan du använda en absolut väg här. Jag pratade om för- och nackdelarna med detta tillvägagångssätt ovan.
Generellt sett är detta en av situationerna där du bör använda en sökväg i förhållande till webbplatsroten. När du använder en sökväg i förhållande till webbplatsens rot kommer länken alltid att starta från rotkatalogen (webbplatsroten). Den här typen av sökväg gör att du kan använda kod för att infoga, till exempel en bild, oavsett webbplatshierarkin och dess kataloger.
Genom att använda en sökväg i förhållande till webbplatsroten i exemplet ovan undviker du problem med att infoga en bild. För oavsett var den här typen av sökväg används, kommer den alltid att hitta filen som anges i den.
Sökvägen i förhållande till webbplatsroten är mycket lik sökvägen i förhållande till dokumentet. För att skapa en sökväg i förhållande till webbplatsroten måste du lägga till symbolen / till början av resan.

Nu kommer bilden att infogas korrekt på vilken sida som helst på webbplatsen.

Jag hoppas att jag hjälpte dig lite att förstå vilka vägar som finns, och när och var de används. Nu kan du använda alla vägtyper för deras avsedda syfte.

Som du vet, i href-parametern för taggen () måste du ange sökvägen till filen som refereras till.
Många skriver något som http://somesite.ru/catalog/doc.html. Ja, ingen bråkar, det fungerar. Men det finns ett "men". Låt oss titta på ett exempel.

Låt din webbplats vara värd, till exempel, på något gratis värd och dess adress var följande: http://fsite.freehosting.ru.
Det finns cirka 100 dokument på servern. Så du bestämmer dig för att flytta din webbplats till en annan domän,
låt det vara betald värd i ru-zonen: http://site.ru. Tja, ska vi nu ändra http://fsite.freehosting.ru till http://site.ru överallt?
Ja, tack vare redaktörer som homesite är detta möjligt. Men detta är ingen lösning.
Låt oss anta att du kontrollerar dess funktionalitet innan du laddar upp en sida till servern
på din apache-hemserver (för de som ännu inte vet vad en "hemserver" är, gå hit (Installera och konfigurera en apache-server), och istället för http://localhost måste du skriva http:// site.ru överallt Håller med om detta, det är åtminstone obekvämt.

Lösningen är att, när du anger sökvägen till en fil, inte ta hänsyn till dess position på webbplatsen, utan dess position på servern.

Absolut väg