Път до папката html. Кой начин е по-добре да използвате. Какво още трябва да знаете?

Надявам се, че сте изпълнили успешно последната задача и сте създали три страници с текст. Проектирахме го с помощта на етикети и запомнихме тяхното предназначение. Е, възниква разумен въпрос: „Как да навигирате между тези страници?“ Лесно! Тук имаме нужда от връзки.

Връзката е елемент на страница, който по същество е обикновен текст, но е активен! Тоест, когато щракнете върху този текст, посетителят се пренасочва към друга страница. Не е ли вярно, точно това търсихме! Така че нека бързо се научим как да използваме връзки, ето един пример:

Моят сайт

Вижте: тагът „a“ и той има следните атрибути: „href“ и „target“, въпреки че това не са всички атрибути, които има този таг, но ще ви обясня принципа с тях. Някои тагове, като link, имат атрибути. Има задължителни и незадължителни атрибути. По-конкретно, в нашия случай href се изисква, но target не е.
Но да се върнем на самата връзка. Що се отнася до това какви са, по-добре е да прочетете в съответната тема на моя уебсайт: какви връзки има. Но там не говорих подробно за относителни и абсолютни пътища:

Https://site/1.png - абсолютен път file://localhost/C:/1.png - абсолютен път до локален компютър../img/1.png – относителен път

Ето няколко примера. Абсолютният път твърдо кодира адреса на страница или файл. Не е желателно да ги използвате, защото ако разработите уебсайт на компютър и след това го прехвърлите на сървъра, тогава всички пътища ще трябва да бъдат променени, можете ли да си представите колко караница? Много по-добре е да използвате относителни пътища, което работи по следния начин: има работна директория, в която се намира работещият (отворен) файл. И всички относителни пътища вече започват от работната директория. За да се придвижите нагоре в директорията, трябва да напишете „..“, както в примера по-горе. Ако искате да останете в тази директория, незабавно напишете името на файла или папката.

Е, за разбиране: нека имаме папка с файлове, която се намира на следния адрес C:\site и има друга папка C:\site2. В първата папка има страници page1.html, page2.html, page3.html и папка с img картинки, а в другата папка, тоест site2 има страници page4.html и page5.html.
Съответно отваряме страницата page1.html от папката на сайта като начална и танцуваме от нея:

Page2.html е пътят към втората страница, тя се намира в същата директория като първата. page3.html е същото. img/1.png – снимка в папката с картинки. ../site2/page4.html – тази страница не се намира в работна папкаЗатова се качихме в директория и отидохме до папката site2 за достъп до страница 4. ../site2/page5.html – същото.

Надявам се, че стана малко по-ясно за относителните и абсолютните пътища.

Тук котвата на връзката е нейният текст, върху който можете да щракнете. Href съдържа пътя, към който отиваме. В target – параметрите на прехода, например, отваряне в нов прозорец. В заглавието има подсказка за връзка, която изскача, когато задържите курсора на мишката върху нея. Има много повече опции за връзки, но те са този моментнямаме нужда от това, защото основното нещо сега, ако не сте забравили, е да свържем нашите три страници заедно.
За да направите това, отворете страница в Notepad и в секцията body в самото начало, така че връзките да са в горната част на страницата, добавете връзки:

Жираф | слон | Зебра... Следва текстът ни за животното, който написахме преди, в миналия урок.

Не забравяйте следните точки: вместо page1.html и 2 и 3, въведете имената на вашите страници. Всички файлове на страницата трябва да са в една и съща папка, в противен случай използвайте относителни или абсолютни пътища за достъп до тях.

Адресът на връзката може да бъде абсолютен или относителен. Абсолютните адреси трябва да започват с протокола (обикновено http://) и да съдържат името на сайта. Относителните връзки се основават на корена на сайта или текущия документ.

Пример 8.2 показва как да създадете абсолютна връзка към друг сайт.

Пример 8.2. Използване на абсолютни препратки

Изучаване на HTML

Когато посочите директория на сайт като връзка (например http://site/css/), индексният файл се показва. Това е файлът, който се зарежда по подразбиране при достъп до директория без изрично посочване на името на файла. Обикновено индексният файл е документ с име index.html.

Абсолютните връзки обикновено се използват за насочване към документ на друг мрежов ресурс, но това е приемливо абсолютни връзкии вътре в текущия сайт. Това обаче не се практикува често, тъй като такива връзки са доста дълги и тромави. Следователно относителните връзки се използват предимно в рамките на сайта.

Връзки спрямо текущия документ

Когато създавате относителни връзки, трябва да разберете каква стойност трябва да посочите за атрибута href, тъй като зависи от първоначалното местоположение на файловете. Нека да разгледаме няколко типични опции.

1. Файловете се намират в една папка (фиг. 8.4).

Това име на файл е взето само като пример на сайта, руски символи с интервали не трябва да се използват в имената на файловете и дори в различни случаи.

2. Файловете се намират в различни папки(фиг. 8.5).

Кога оригинален документсе съхранява в една папка, а връзката е в корена на сайта, тогава преди името на файла в адреса на връзката трябва да поставите две точки и наклонена черта (/), както е показано по-долу.

Две точки в в такъв случайозначава излизане от текущата папка на по-високо ниво.

3. Файловете се поставят в различни папки (фиг. 8.6).

Сега оригинален файлсе намира в две подпапки и за да направите връзка към документа в корена на сайта, трябва да повторите предишния пример два пъти.

Връзка

Подобна е ситуацията с произволен брой подпапки.

4. Файловете се поставят в различни папки (фиг. 8.7).

Сега ситуацията се променя, изходният файл се намира в корена на сайта, а файлът, към който трябва да се свържете, е в папката. В този случай пътят до файла ще бъде както следва.

Връзка

Имайте предвид, че няма допълнителни точки или наклонени черти преди името на папката. Ако файлът се намира не в една, а в две папки, тогава пътят до него е написан така.

Връзка

Връзки спрямо корена на сайта

Понякога можете да намерите пътя до файла спрямо корена на сайта, изглежда така "/Име на папка/файл"с наклонена черта в началото. Да, запис Курсовеозначава, че връзката води до папка с име course, която се намира в основата на сайта и в нея трябва да изтеглите индексния файл.

Моля, имайте предвид, че тази форма на запис не работи на локален компютър, а само под контрола на уеб сървър.

Когато разработвате уебсайт, често трябва да посочите пътища до файлове, връзки към документи и страници.
В книгите по компютърни технологииЧесто можете да намерите използваните термини абсолютни и относителни пътища към файловете. Често авторът не обяснява какво означава определен път. Следователно читателят е объркан, когато авторът впоследствие говори за използване на абсолютни и/или относителни пътища.
Да приемем, че имате уебсайт и трябва да създадете хипервръзка (линк) към една от страниците на сайта. Тук трябва да изберете кой тип път да използвате: относителен или абсолютен.

Много е важно да разберете къде кой път е необходим и как най-добре да го използвате. Абсолютен път може да бъде определен само по един начин. Но относителното, за разлика от абсолютното, има няколко приложения.
Прочетете повече за това как и къде се използва абсолютен и относителен път към файловете, ще се опитам да ви кажа днес.

Тъй като посвещавам по-голямата част от времето си на уеб технологиите, ще дам примери, свързани със създаването на уебсайтове.

Абсолютен път

Когато връзката е пълният URL адрес на файл или страница, това е така абсолютен път. В този случай използвания протокол трябва да присъства в адреса. Например, http://www.сайте абсолютният път до конкретен уебсайт. В този случай абсолютният път към начална страницаМоят блог. Къде е протоколът http, А www.сайтиме на домейн).

Ако посочите връзка към директория, например http://yourdomain.ua/web/тогава индексният файл ще бъде зареден (показан). Това правило важи предимно за статични сайтове. Защото, когато използвате език за програмиране, можете да създадете вътрешно маршрутизиране. Индекс файлобикновено е файл с име index.php, index.html, index.phtml, index.shtml. За да използвате различен индексен файл, трябва да създадете файл с име .htaccess в желаната директория и да напишете някаква директива в него. Модифицирането и създаването на файла .htaccess, както и маршрутизирането с помощта на език за програмиране, са извън обхвата на тази статия.

По принцип абсолютният път се използва, когато трябва да се свържете с друг сайт. С други думи, ако искате да изпратите посетител на друг сайт, трябва да използвате абсолютен път. Въпреки това, този път може да се използва на вашия собствен уебсайт. Но много хора вярват, че връзките в рамките на един сайт трябва да са относителни.
Използването на абсолютен път може да причини някои проблеми. Например, когато прехвърляте сайт от локална машина към сървър (това е, ако сте използвали локална машинаадреси във формата http://localhost/sitename.ua/...). Трудности могат да възникнат, когато има нужда от промяна на домейна (името на сайта). Въпреки че всички тези трудности могат да бъдат разрешени, ще трябва да отделите известно време за тях.
Когато има минуси, трябва да има и плюсове. Да вземем за пример ситуация като откраднато съдържание от вашия уебсайт. На практика неведнъж съм се убеждавал, че се краде целият текст, без да се оставя обратна връзка към оригинала. Така че, когато използвате абсолютни пътища, можете да получите обратни връзки от сайта, където се намира откраднатото съдържание. Но това е само ако имате вътрешно свързванебеше направено с помощта на абсолютни пътища. Въпреки че това не винаги работи, забелязах повече от веднъж появата на връзки от сайтове на други хора, на които се намира моето съдържание.

Изкопавайки малко от темата, искам да говоря накратко за нея какво е URL.

Всяка уеб страница или документ в Интернет има свой уникален адрес, който се нарича URL адрес.
URL адрес— унифициран локатор (идентификатор на местоположение) на ресурс. URL означава Uniform Resource Locator. Можете също да срещнете такова декодиране като Universal Resource Locator (универсален локатор на ресурси). Този метод на писане на адрес е стандартизиран в Интернет. По-общи и широка системаидентифициране URI ресурспостепенно заменя термина URL.
URIе символен низ, който идентифицира ресурс: документ, файл и др. Разбира се, това се отнася за интернет ресурси.

Относителен път

Често относителните пътища се използват много по-често от абсолютните пътища. По принцип относителен път се посочва, когато трябва да изпратите посетител на друга страница на вашия сайт или да вмъкнете обект (например изображение) на една от страниците. В този случай използването спрямо пътя е напълно оправдано. В зависимост от структурата на сайта, зависи каква форма на относителен път трябва да използвате. Има два вида относителен път: път спрямо документа, път спрямо корена на сайта.

Път спрямо документа

Точно път спрямо документасе използва най-често. Такива връзки се наричат ​​още локални. По принцип този път се използва, когато текущият и свързаният документ (страница) са в една и съща директория. Ако преместите документ в друга директория, пътят (връзката) ще трябва да бъде променен. Въпреки че можете да се свържете и с документи (страници) от други директории. За да направите това, пътят се записва от текущия документ до целевия документ (страница). В този случай пътят спрямо документа трябва да бъде зададен в зависимост от структурата на директорията.
Да вземем за пример най-проста структурастатичен сайт.

Да приемем, че всяко изображение в директорията изображениятрябва да бъдат вмъкнати в съответните страници home.html, продукти.html, contact.htmл. За да вмъкнете изображение, например, на страницата „home.html“, трябва да посочите пътя, където се намира изображението. Ако използвате път спрямо документа, ще трябва да напишете следното в кода на страницата:

Този код за вмъкване на изображение на страницата е непълен. Тъй като не съдържа няколко важни атрибути, като ширина, височина и др. Атрибут src, тук служи за указване на пътя до файла. Всички други атрибути са пропуснати тук, тъй като сега не са толкова важни. Основното нещо сега е, че имате представа как изглежда пътят спрямо документа.
Когато използвате пътища, относителни към документа, частта с абсолютния път липсва. Тук се съкращава част от абсолютния път, както за текущия документ (страница), така и за свързания. Тук се използва само частта от пътя, която винаги се променя.
Нека ви напомня още веднъж, че когато използвате път спрямо документ, трябва да вземете предвид първоначалното местоположение на файловете.

Нека си представим ситуация, при която страницата продукти.html, няма да се намира в основната директория на сайта (както беше в предишния пример), а в поддиректория. Сега трябва да вмъкнете изображението във файла продукти.html, която се намира по-дълбоко от основната директория на сайта.

За да вмъкнете изображение във файл продукти.htmlтрябва да се върна към главна директория. След което можете да използвате вече познатия път, който беше споменат малко по-горе.

Както можете да видите от кода по-горе, следното вече е добавено към пътя: ../ . Само тази последователност от знаци ../ и служи за преместване на една директория (ниво) по-нагоре в йерархията на директориите. Пътят в горния код може да се прочете по следния начин: „Отидете една директория по-нагоре (назад), отидете до директорията изображенияи вземете файла от там продукти.png«.
Ако ../ означава преместване на една директория (ниво) по-високо в йерархията на директориите, след символа / показва преместване едно ниво надолу.
Последователност на знаци ../ може да се използва многократно в движение. Например, ако файлът продукти.htmlпреместете в три вложени директории, ще трябва да използвате следния код:

Както може да се види от предишните примери, използвайки пътеки спрямо документав много случаи оправдано. Този тип пътека често се използва на практика и може да се приложи в почти всяка ситуация. Както казах по-горе, има и път спрямо корена на сайта, който всъщност ще бъде обсъден по-долу.

Път спрямо корена на сайта

Вероятно вече сте разбрали, че пътищата, свързани с документ, се използват много често. Но има един проблем при използването им. Което е, че когато структурата на директорията се промени, пътищата ще трябва да се променят.
Но този проблем може да бъде решен с помощта на пътища спрямо корена на сайта. Където е указан пътят от основната директория до документа.
Всички пътища спрямо корена на сайта започват със знака / . Само тук, за разлика от пътеките спрямо документ, този знак се използва за обозначаване на основната директория. Тъй като се използва в началото на пътуването.
Пътят спрямо корена на сайта ви позволява да преместите някои файлове, без да повредите връзките. Можете да използвате този тип път само на уеб сървър в Интернет или на уеб сървър, разположен на локалната машина.

Уеб сървърът на локалната машина може да бъде . Което ще ви позволи да създадете среда на вашия компютър за създаване на уебсайтове и предварителното им тестване.

Основният относителен път не съдържа нито едно от двете http протокол, без име на домейн. И както вече казах, започва с посочване на символа / , който сочи към основната директория. Индексният файл на главната страница обикновено се намира в тази директория.

Например, /images/products.pngпоказва, че файлът продукти.pngе в папката изображения, който се намира в основната директория.

Най-лесният начин да определите основния относителен път е да вземете абсолютния път и да изхвърлите http:// и името на хоста.

Пример
Понякога е необходимо информацията на една страница да бъде използвана от други страници на сайта. Това често се прави, за да се намали количеството повтарящ се код на всяка страница. Да кажем, че има файл _contact.html, който съдържа информация за телефонни номера, имейл и съдържа изображение contact.png. (Нека това е малка таблица, която ще бъде разположена на всяка страница на сайта.)

Следният код е за вмъкване на изображението "contact.png".

Кодът, необходим за вмъкване на един файл в друг, е извън обхвата на тази статия. Всичко зависи от използвания език за програмиране.

Надявам се, че вече знаете какъв тип път е използван в горния код. Ако не, тогава вижте дефиницията на относителния път на документа по-горе.
Сега, когато посетител посети страници на сайта като напр home.html, contact.ntml, той ще види перфектно изобразена страница. Във всяка от които е вмъкнат файл _contact.html, в който от своя страна се вмъква изображение contact.png.
С други думи, като отидете например на страницата home.html, се случва следното: „Кодът на главната страница се изпълнява home.html. След това кодът на страницата се вмъква и изпълнява _contact.html. Код на страницата _contact.html, казва, че трябва да отидете в директорията изображенияи вземете изображението от там contact.png«.
Ако пропуснете самия код за вграждане, всичко работи добре. Но ако стартирате страницата продукти.html, тогава ще възникне грешка. Тъй като кодът ще се опита да намери директорията изображенияи файл contact.pngв указателя продукти. Но там такава директория не съществува, откъдето всъщност възниква проблемът.
Става ясно, че тук не можете да използвате път, свързан с документа.
Разбира се, можете да използвате абсолютен път тук. Говорих за плюсовете и минусите на този подход по-горе.
Най-общо казано, това е една от ситуациите, в които трябва да използвате път спрямо корена на сайта. Когато използвате път спрямо корена на сайта, връзката винаги ще започва от основната директория (корен на сайта). Този тип път ще ви позволи да използвате код за вмъкване, например на изображение, независимо от йерархията на сайта и неговите директории.
Използването на път спрямо корена на сайта в горния пример ще избегне проблеми с вмъкването на изображение. Защото независимо къде се използва този тип пътека, той винаги ще намери посочения в него файл.
Пътят спрямо корена на сайта е много подобен на пътя спрямо документа. За да създадете път спрямо корена на сайта, трябва да добавите символа / до началото на пътуването.

Сега изображението ще бъде правилно вмъкнато на всяка страница на сайта.

Надявам се, че съм ви помогнал малко да разберете какви пътища съществуват и кога и къде се използват. Сега можете да използвате всички типове пътища по предназначение.

Както знаете, в параметъра href на тага () трябва да посочите пътя до файла, към който се препраща.
Много хора пишат нещо като http://somesite.ru/catalog/doc.html. Да, никой не спори, работи. Но има едно "но". Нека разгледаме един пример.

Нека вашият сайт се хоства например на някакъв безплатен хостинг и адресът му е следният: http://fsite.freehosting.ru.
На сървъра има около 100 документа. И така решавате да преместите уебсайта си в друг домейн,
нека бъде платен хостинг в зоната ru: http://site.ru. Е, сега трябва ли да променим http://fsite.freehosting.ru на http://site.ru навсякъде?
Да, благодарение на редактори като homesite това е възможно. Но това не е решение.
Да приемем, че преди да качите страница на сървъра, проверявате нейната функционалност
на вашия домашен apache сървър (за тези, които все още не знаят какво е „домашен сървър“, отидете тук (Инсталиране и конфигуриране на apache сървър) и вместо http://localhost ще трябва да напишете http:// site.ru навсякъде, съгласен съм с това, поне е неудобно.

Решението е, когато посочвате пътя до файл, да вземете предвид не позицията му в сайта, а позицията му на сървъра.

Абсолютен път