Абсолютные и относительные ссылки в html: Абсолютные и относительные ссылки (внешние и внутренние)

Содержание

Абсолютные и относительные ссылки (внешние и внутренние)

Все HTML ссылки делятся на внешние и внутренние. Внешние ссылки - это ссылки, ведущие с одного сайта на другой сайт или файл, расположенный на другом сайте. Внутренние ссылки - это ссылки, ссылающиеся с одной страницы сайта на другую страницу этого же сайта или на разделы этой же страницы.

Все внешние ссылки в атрибуте href тега <a> содержат абсолютный путь до документа на который они ссылаются. Внутренние ссылки, в свою очередь, могут содержать как абсолютный путь, так и относительный (в данном случае это зависит от ваших личных предпочтений).

Все ссылки можно также условно разделить на относительные и абсолютные. Относительные ссылки - это HTML ссылки, содержащие относительные пути, относительные ссылки могут быть только внутренними. Абсолютные ссылки - это ссылки, содержащие абсолютные пути, абсолютные ссылки могут быть как внешними так и внутренними.

Относительный путь

Относительный путь означает, что указание пути на нужный файл или страницу вашего сайта начинается относительно каталога, в котором расположена страница со ссылкой, либо относительно корневого каталога сайта. Рассмотрим части, из которых может состоять относительный путь:

Части пути Описание Примеры значений
имя_файла Если в качестве значения атрибута указать только имя файла это значит, что нужный файл находится в той же папке, где и страница со ссылкой. "page.html"
каталог/ Если файл, к которому нужно указать путь, расположен в дочернем каталоге относительно файла с ссылкой, это означает, что нам надо спуститься на один уровень вниз (в дочернюю папку текущего каталога), в этом случае путь начинается с указания имени дочернего каталога, после его имени указывается прямой слэш "/", он служит для разделения частей пути, после него указывается имя нужного нам файла.

Примечание: опуститься можно ровно на столько папок вниз, сколько вы их создали. К примеру, если вы создали папку на 10 уровней ниже корневой, то можете указать путь, который приведет вас вниз на 10 папок. Однако, если у вас так много уровней, это, скорее всего, означает, что организация вашего сайта излишне неудобно составлена.

"каталог/page.html"

"каталог1/каталог2/page.html"

../ Если нужно указать, что файл, на который вы ссылаетесь, находится в родительской папке, используйте символы .. (две точки), они означают подняться на один уровень вверх (в родительскую папку текущего каталога). Далее мы указываем прямой слэш "/", чтобы разделить части пути, и пишем имя нашего файла.

Примечание: символы .. можно использовать сколько угодно раз подряд, используя их, вы поднимаетесь каждый раз на одну папку вверх. Однако, подниматься вверх можно до тех пор, пока не придете в корневую папку своего сайта. Выше этой папки подняться нельзя.

"../page.html"

"../../page.html"

"../../../кат1/кат2/page.html" - поднимаемся из текущей папки на три каталога выше и уже из него спускаемся на два уровня ниже к требуемому файлу

/ Относительный путь не обязательно всегда должен начинаться относительно текущего расположения страницы со ссылкой, он также может начинаться относительно корневого каталога сайта. К примеру, если нужный файл находится в корневом каталоге, путь может начинаться с символа "
/
", после которого надо всего лишь указать имя нужного файла, который расположен в корневом каталоге.

Примечание: когда символ "/" указывается первым, это означает начало пути от корневого каталога.

"/page.html"

"/кат1/кат2/car.png"

Абсолютный путь

Абсолютный путь обычно применяется для указания пути к файлу, который расположен на другом сетевом ресурсе. Он представляет из себя полный URL-адрес к файлу или странице. Первым делом в адресе указывается используемый протокол, после которого идет название домена (имя сайта). Например: http://www.пример.ру - так выглядит абсолютный путь к конкретному веб-сайту. http:// - это протокол передачи данных, а www.пример.ру - имя сайта (домен).

Абсолютный путь можно использовать и на собственном сайте. Однако внутри сайта рекомендуется использовать в качестве значения ссылок относительный путь.

Теперь давайте рассмотрим, что такое URL-адрес. Каждая веб-страница в сети Интернет имеет свой собственный уникальный адрес, вот он как раз и называется URL. Аббревиатура URL расшифровывается как Uniform Resource Locator (унифицированный адрес ресурса), проще говоря URL - это определитель местонахождения ресурса. Этот способ записи адреса стандартизирован в сети Интернет.

Пара примеров URL адресов:


"httр://www.puzzleweb.ru/"

"httр://www.puzzleweb.ru/html/all_tags.php"

С этой темой смотрят:

Урок 4. Навигация, ссылки. Относительные и абсолютные пути.

Надеюсь, вы успешно справились с прошлым заданием и создали три странички с текстом. Оформили его с помощью тегов и запомнили их назначение. Что же, возникает резонный вопрос: «Как перемещаться между этими страничками?». Легко! Тут нам понадобятся ссылки.

Ссылка это элемент страницы, который по сути своей представляет собой обычный текст, но он активный! То есть при нажатии на этот текст происходит перенаправление посетителя на другую страницу. Неправда ли, это как раз то, что мы искали! Так давайте скорее научимся использовать ссылки, вот вам пример:


<a href="https://myblaze.ru" target="_blank">Мой сайт</a>

Смотрите: тег «a», а у него атрибуты: «href» и «target», хотя это не все атрибуты, которые имеет данный тег, но на них я вам объясню принцип. Некоторые теги, как например, ссылка имеют атрибуты. При этом есть обязательные атрибуты и не обязательные. Конкретно в нашем случае обязательным является href, а target нет.
Но вернемся к самой ссылке. Насчет того, какие они бывают лучше почитать в соответствующей теме у меня на сайте: какие бывают ссылки. Но там я не рассказал подробно об относительных и абсолютных путях:


https://myblaze.ru/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 из папки site как начальную и от нее пляшем:


page2.html – путь ко второй странице, она находится в том же каталоге что и первая.
page3.html – то же самое.
img/1.png – рисунок в папке с картинками.
../site2/page4.html – эта страница находится не в рабочей папке, следовательно, мы поднялись на каталог выше и зашли в папке site2 для доступа к 4 странице.
../site2/page5.html – то же самое.

Надеюсь стало чуть понятнее насчет относительный и абсолютных путей.

Вот, анкор ссылки – ее текст, на который можно нажимать. В href пишется путь, на который переходим. В target – параметры перехода, например, открывать в новом окне. В title подсказка для ссылки, всплывает при наведении. Есть еще много параметров ссылки, но они на данный момент нам не нужны, ведь главное сейчас, если вы не забыли, это связать три наши странички вместе между собой.
Для этого открывает в блокноте страницу и в разделе body в самом начале, чтобы ссылки были вверху страницы, добавляем ссылки:


<body>
<a href="page1.html">Жираф</a> | <a href="page2.html">Слон</a> | <a href="page3.html">Зебра</a>
…
Дальше идет уже наш текст о животном, который мы написали до этого, в прошлом уроке.

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

← Урок 3. Наполняем страницу | Содержание | Урок 5. Вставляем картинки →

Веб-разработка. Абсолютные и относительные адреса.

При разработке веб-страниц очень часто приходиться сталкиваться с задачей указания адреса к тому или иному месту в сети Интернет или файлу.

Адреса нужно указывать:

+ Когда вы даете ссылки на что-либо;

+ Когда вставляете изображения;

+ Указываете в качестве фона какое-либо изображение;

и.т.д.

Есть 2 основных способа, как вы можете указать адрес на веб-страницах:

Способ 1. Абсолютный адрес.

Способ 2. Относительный адрес.

Каждый из этих способов имеет свои достоинства и недостатки и каждый из них можно использовать в своей ситуации.

Если вы хотите научиться основам веб-разработки, мои курсы на эту тему здесь.

Относительные адреса:

Исходя из названия путь или адрес здесь указывается относительно какого-то места. Это действительно так.

Чтобы понять, как это работает, давайте рассмотрим несколько примеров.

1) Структура следующая. Имеем 2 веб-страницы формата html, которые находятся в одной папке.

Чтобы сделать ссылку в одном файле на другой, нужно всего-лишь написать название файла.

Например, ссылка с файла file1.html на файл file2.html будет выглядеть просто:

<a href="file2.html">Ссылка</a>

2) Следующая ситуация.

Имеем 2 файла html:

file1.html находится в папке folder1, а file2.html находится на уровень ниже.

   

Чтобы создать ссылку в файле file1.html на файл file2.html, нужно написать следующий код:

<a href="../file2.html">Ссылка</a>

Оператор ../ означает, что происходит обращение на уровень ниже.

3) Теперь обратная ситуация.

Нужно создать ссылку в файле file2.html на файл file1.html.

Для этого используем следующий код:

<a href="folder1/file1.html">Ссылка</a>

Таким образом, при относительных адресах путь к файлу зависит от расположения того файла, в котором создается ссылка.

Использовать относительные адреса возможно в том случае, если файлы расположены на одном сайте.

Если нужно сделать ссылку на файл, который располагается на другом сайте, то нужно использовать абсолютные адреса.

Абсолютные адреса.

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

В интернет абсолютный адрес представляет собой url и полный путь относительно домена сайта (его корня) до того места, где лежит файл.

Предположим, что файл лежит в папке folder1, которая лежит в корне сайта site1.ru.

Абсолютный адрес до этого файла будет следующий:

http://site1.ru/folder1/file.html

Наверняка вам не раз уже приходилось видеть адреса в таком виде.

Если вы пытаетесь сделать ссылку со страницы, которая находится на вашем сайте на файл, который располагается на другом домене, то указание адреса в этом случае будет возможно только в абсолютном виде.

Абсолютными адресами оперируют при ссылке с одного сайта на другой, но бывает также, что их используют и в том, случае, когда файлы располагаются на вашем сайте.

Абсолютный и относительный путь к файлам

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

Допустим, у Вас есть сайт и Вам нужно создать гиперссылку(ссылку) на одну из страниц сайта. Здесь нужно выбрать какой использовать тип пути: относительный или абсолютный.

Очень важно понимать, где какой путь нужно и лучше использовать. Абсолютный путь можно указать только одним способом. А вот относительный в отличии от абсолютного имеет несколько вариантов использования.
Подробнее о том как и где используется абсолютный и относительный путь к файлам, я попытаюсь вам сегодня рассказать.

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

Оглавление

  1. Абсолютный путь
  2. Относительный путь
  3. Путь относительно документа
  4. Путь относительно корня сайта

Абсолютный путь

Когда ссылка представляет из себя полный URL файла или страницы, это и есть абсолютный путь. При этом в адресе должен присутствовать используемый протокол. Например, http://www.uamedwed.com — это абсолютный путь к конкретному веб-сайту. В данном случае абсолютный путь к главной странице моего блога. Где протоколом является http, а www.uamedwed.com доменом(именем).

Если указывать ссылку на католог, например 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 — это символьная строка, которая идентифицирует какой-либо ресурс: документ, файл, и т.д. Конечно, здесь подразумеваются ресурсы сети Интернет.

Относительный путь

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

Путь относительно документа

Именно путь относительно документа используется чаще всего. Такие ссылки ещё называются локальными. В основном такой путь используется тогда, когда текущий и связанный документ(страница) находятся в одной директории. Если переместить документ в другую директорию, то путь(ссылку) придётся менять. Хотя можно ссылаться и на документы(страницы) из других директорий. Для этого путь прописывается от текущего документа до целевого документа(страницы). При этом путь относительно документа должен задаваться в зависимости от структуры директорий.
Возьмём к примеру простейшую структуру статического сайта.

Предположим, что каждое изображение в каталоге images нужно вставить в соответствующие страницы home.html, products.html, contact.html. Для того что бы вставить изображение к примеру на страницу «home.html», нужно прописать путь, где расположено изображение. Если использовать путь относительно документа, то нужно будет прописать в коде страницы следующее:

<img src="images/home.png">

<img src="images/home.png">

Этот код для вставки изображения на страницу — неполный. Так как он не содержит нескольких важных атрибутов, таких как ширина, высота и др. Атрибут src, здесь служит для указания пути к файлу. Здесь опущены все остальные атрибуты, так как они сейчас не столь важны. Главное сейчас, что бы Вы имели представление о том, как выглядит путь относительно документа.
При использовании путей относительно документа отсутствует часть абсолютного пути. Часть абсолютного пути, здесь усекается, как для текущего документа(страницы), так и для связанного. Здесь используется только та часть пути, которая всегда меняется.
Напомню ещё раз про то, что при использовании пути относительно документа, нужно учитывать исходное расположение файлов.

Представим ситуацию, когда страница products.html, будет располагаться не в корневой директории сайта(как это было в предыдущем примере), а в подкаталоге. Теперь необходимо вставить изображение, в файл products.html, который находится, глубже чем корневая директория сайта.

Для того, что бы вставить изображение в файл products.html нужно вернуться в корневую директорию. После чего, можно использовать уже известный путь, о котором говорилось чуть выше.

<img src="../images/products.png">

<img src="../images/products.png">

Как видно из приведённого выше кода, к пути теперь добавилось следующее: ../. Как раз эта последовательность символов ../ и служит для перехода на одну директорию(уровень) выше в иерархии каталогов. Путь в вышеприведённом коде можно прочесть так: «Перейти на один каталог выше(назад), зайти в директорию images и взять от туда файл products.png«.
Если ../ означает переход на одну директорию(уровень) выше в иерархии каталогов, то символ / обозначает переход на один уровень ниже.
Последовательность символов ../ можно использовать в пути неоднократно. Например, если файл products.html переместить в три директории вложенные в друг друга, то нужно будет использовать следующий код:

<img src="../../../images/products.png">

<img src="../../../images/products.png">

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

Путь относительно корня сайта

Вы наверное уже поняли что пути относительно документа используются очень часто. Но при их использовании существует одна проблема. Которая заключается в том, что при смене структуры директорий, пути придется менять.
Но такая проблема решаема при использовании путей относительно корня сайта. Где путь указывается от корневой директории до документа.
Все пути относительно корня сайта начинаются со знака /. Только здесь, в отличии от путей относительно документа этот знак используется для указания корневой директории. Потому, что он используется в начале пути.
Путь относительно корня сайта позволяет перемещать некоторые файлы, без ущерба для ссылок. Этот тип пути Вы сможете использовать только на web-сервере в интернете, или на web-сервере расположенном на локальной машине.

В качестве web-сервера на локальной машине может выступать — XAMPP. Который позволит у себя на компьютере создать среду для созданию сайтов и их предварительного тестирования.

Корневой относительный путь не содержит ни протокола http, ни доменного имени. И как я уже говорил начинается с указания символа /, который указывает на корневую директорию. В этой директории обычно располагается индексный файл главной страницы.

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

Самый простой способ определить корневой относительный путь — взять абсолютный и отбросить http:// и имя хоста.

Пример
Иногда бывает нужно, что бы информацию одной страницы использовали другие страницы сайта. Часто это делается для того что бы сократить количество повторяемого кода на каждой странице. Допустим есть файл _contact.html, который содержит информацию о телефонных номерах, e-mail и содержит изображение contact.png. (Пускай это будет небольшая таблица, которая будет располагаться на каждой странице сайта.)

Следующий код предназначен для вставки изображения «contact.png».

<img src="images/contact.png">

<img src="images/contact.png">

Код, который необходим для вставки одного файла в другой, выходит за рамки этой статьи. Здесь все зависит от используемого языка программирования.

Я надеюсь, что Вы уже знаете какой тип пути использовался в вышеприведённом коде. Если нет, тогда посмотрите приведённое выше определение пути относительно документа.
Теперь, когда посетитель зайдет на такие страницы сайта как home.html, contact.ntml, он увидит прекрасно отображаемую страницу. В каждую из которых вставлен файл _contact.html, в который, в свою очередь, вставлено изображение contact.png.
Другими словами зайдя, к примеру, на страницу home.html, происходит следующее: «Выполняется код основной страницы home.html. Затем вставляется и исполняется код страницы _contact.html. Код страницы _contact.html, говорит что нужно перейти в директорию images и взять от туда изображение contact.png«.
Если опустить сам код для вставки, то все работает отлично. Но вот если запустить страницу products.html, то произойдет ошибка. Так как код будет пытаться найти директорию images и файл contact.png в директории products. Но такой директории там не существует, из за чего собственно и возникает проблема.
Становится ясным, что использовать путь относительно документа здесь нельзя.
Конечно здесь можно использовать абсолютный путь. О плюсах и минусах данного подхода я говорил выше.
В общем говоря, это одна из ситуаций, когда нужно использовать путь относительно корня сайта. При использовании пути относительно корня сайта, ссылка будет всегда начинаться с корневого каталога(корня сайта). Такой тип пути позволит использовать код для вставки, например изображения, независимо от иерархии сайта, и его директорий.
Использование пути относительно корня сайта в вышеприведённом примере, позволит избежать проблем, со вставкой изображения. Потому как независимо от того где будет использовать такой тип пути, он всегда найдет указанный в нем файл.
Путь относительно корня сайта, очень похож на путь относительно документа. Для того что бы создать путь относительно корня сайта, нужно добавить символ / в начало пути.

<img src="/images/contact.png">

<img src="/images/contact.png">

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

Надеюсь я немного помог Вам разобраться в том какие пути существуют, и в том когда и где они используются. Теперь можно использовать все типы пути по прямому их назначению.

Абсолютный и относительный url в HTML ссылках | 1

Абсолютный URL

Адрес ссылки может быть абсолютным, либо относительным. Абсолютные адреса должны начинаться с указания протокола (http:// или https://) и содержать доменное имя сайта (к примеру brainoteka.com). Относительные ссылки указываются относительно от корня сайта или текущего документа.

Так выглядит абсолютная ссылка на ресурс brainoteka.com

<a href="http://brainoteka.com">Обучающие курсы</a>

Ссылки относительно текущего документа (Относительный url)

При создании относительных ссылок необходимо учитывать, какое значение для атрибута href следует указывать, поскольку оно зависит от исходного расположения файлов. Вот несколько примеров

При указании относительных ссылок, нужно учитывать, что значение атрибута href будет зависеть от исходного расположения файлов на сервере.

Ссылки на файлы, расположенные в одной папке

В этом случае код будет следующий.

<a href="secondpage.html">Ссылка</a>

Файлы размещенные в разных папках (уровень вверх)

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

<a href="../secondpage.html">Ссылка</a>

Две точки означают выйти из текущей папки на уровень выше.

Файлы размещаются в разных папках (2 уровня вверх)

В данном случае чтобы сослаться на документ в корне сайта, требуется повторить написание предыдущего примера дважды.

<a href="../../secondpage.html">Ссылка</a>

Ну и по аналогии, на сколько уровней вверх нам будет необходимо перейти вверх, столько раз, данная конструкция и будет повторяться

Файлы размещаются в разных папках (Уровень вниз)

Теперь, исходный файл располагается в корне сайта, а файл, на который необходимо сделать ссылку - в папке. Как изменится значение href в данном случае?

<a href="Site/secondpage.html">Ссылка</a>

Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.

<a href="Site/Folder/secondpage.html">Ссылка</a>

Ссылки относительно корня сайта

Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как "/Папка/Имя файла" со слэшем вначале. Так, запись

<a href="/Content/">Контент</a>

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

Создание абсолютных и относительных ссылок в HTML документе.

Движемся дальше, разберем один, достаточно важный момент, - это ссылки. Наверное, нет ни одной WEB – страницы, чтобы на ней не было хотя бы одной ссылки. Как же тогда из обычного текста сделать ссылку? в целом все очень просто и в HTML есть для этого тег <a> этот тег является парным и должен обязательно иметь закрывающийся тег </a>. Это сокращение от английского слова anchor и переводится как якорь.

Если просто указать тег <a> то браузеру это еще не о чем не говорит, браузер не знает что это за ссылка и куда она ведет. Поэтому тут такая же ситуация как и с вставкой изображения нужно дописать атрибуты чтобы браузеру стало понятно что это за ссылка. Если применить только сам тег, то браузер просто проигнорирует наш тег и в место ссылки у нас будет простой текст.

Для ссылки самым главным атрибутом является href="". Этот атрибут указывает куда ведет указанная ссылка, и в нашем случае укажем путь на главную страницу нашего сайта.

HTML

<a href="http://www.webteoretik.ru/">Ведет на главную webteoretik.ru</a>

Теперь, если Вы вставите в редактор эту ссылку и сохраните код, а затем обновите браузер, то у нас появится ссылка при нажатии на которую на Вашей странице загрузится главная страница сайта webteoretik.ru. Это не всегда является удобно так как вы можете потерять посетителя Вашего сайта. Почему? Потому что посетитель, кликнув на ссылку на вашем сайте, загрузит страницу другого сайта, и посетитель вероятней всего останется уже на нем. Что для этого делать? Открывать страницу другого сайта в новой вкладке. Для этого нужно в ссылке нужно указать еще один атрибут target="_blank". Теперь нажав на ссылку, страница у нас откроется в новое окне, а наша остается не тронутой. И есть еще один атрибут, это по сути универсальный атрибут, и может быть использован и с другими тегами. Это атрибут title="webteoretik". Данный атрибут при наведении мыши на ссылку или элемент выведет подсказку. В нашем случае после наведения мыши всплывает подсказка webteoretik.

HTML

<a href="http://www.webteoretik.ru/" target="_blank" title="webteoretik">Ведет на главную webteoretik.ru</a> Какой-то текст Какой-то текст

В примере выше, если Вы заметили, ссылка вложена в абзац и в этом нечего страшного нет. Так вставляется любая ссылка внутри текста. Вот мы и рассмотрели, как создается абсолютная ссылка то есть используется атрибут href="http://www.webteoretik.ru/materials/25" к которому присваивается конкретный адрес сайта вместе с названием домена.

Теперь рассмотрим Относительные ссылки. Такими ссылками могут быть ссылки, например, которые позволяют скачивать файлы. Например, в прошлом уроке показано как вставить изображение, там путь к картинке также указывался относительной ссылкой. И так вернемся к ссылке, которая помогает скачивать файлы. Для файлов которые скачиваются, как правило, так же создается отдельная папка. В папке HTML рядом с папкой images создайте еще одну папку files и в нее занесите какой-то файл, например files.pdf. Ниже показан пример относительной ссылки для скачивания файла.

HTML

Скачать PDF - документ

Если вы хотите чтобы закачка начиналась в новом окне, то можно так же указать атрибут target="_blank".

В Относительной ссылке указывается путь относительно корня сайта, т.е. корень сайта – это там, где лежит файл index.html, а в абсолютной указывается конкретный адрес сайта. Относительные ссылки опасны, так как если папка с файлом переместится в другое место, на уровень выше в files2, то браузер уже не сможет найти Ваш файл для закачки или же указанную картинку. Поэтому при создании сайтов лучше использовать абсолютные ссылки, чтобы потом не возникали не понятные ошибки. На этом все, встретимся в следующем уроке, где будет показано, как делать якорные ссылки и ссылки на электронную почту.


Ссылки html.

Урок 13.

Html ссылки делятся на два основных вида, это внешние и внутренние. В этом уроке мы разберем с Вами оба варианта.

Внешние ссылки html.

Внешние ссылки - это ссылки ведущие на страницы других сайтов.

Для создания ссылок используется тег &lta&gt. Ссылкой можно сделать любой текст на странице. Текст который будет между тегом &lta&gt и &lt/a&gt будет являться ссылкой.

Каждая ссылка (тег &lta&gt) имеет обязательный атрибут href, в его значении указывается адрес страницы на которую ведет ссылка. Повторюсь, атрибут href обязателен! Если нет его, то нет и ссылки.

Теперь в качестве примера давайте на нашей странице сделаем ссылку которая будет открывать главную страницу Яндекса. Код будет следующим:

Пояснения к коду:
Тег &lta&gt имеет атрибут href в значении которого указан адрес главной страницы Яндекса. Далее идет текст который будет ссылкой. Затем прописывается закрывающий тег &lt/a&gt.

Если сделать все правильно, то в браузере ссылка будет отображаться следующим образом:

Ссылка на главную страницу Яндекса

Внутренние ссылки html.

Внутренние ссылки - это ссылки между страницами одного сайта. Внутренние ссылки бывают абсолютными и относительными.

Абсолютные ссылки html.

Ссылка будет абсолютной, если в атрибуте href прописывается полный путь к странице.
Пример написания абсолютной ссылки:

Относительные ссылки html.

Ссылка будет относительной, если в атрибуте href прописывается не полный путь к странице, а путь относительно страницы в которой делается ссылка.
Пример написания относительной ссылки:

Применим знания на практике.

Для начала полезный совет. Если наш файл будет называться "Audi" (с заглавной буквы), а в ссылке на него мы напишем "audi", то ссылка работать не будет. По этому, чтобы избежать путаницы, в названии файлов используйте всегда только маленькие латинские буквы и/или цифры.

Сейчас в нашей папке "Сайт" находится четыре html файла. Давайте сделаем в этих файлах ссылки друг на друга. Для начала нажимаем правой кнопкой мыши на любой из файлов и открываем его с помощью Notepad. Теперь работаем с кодом. Я начну с файла audi.html

Пояснения к коду:
1) В теге &lttitle&gt я написал название страницы (Audi).
2) В теге &lth2&gt я прописал заголовок страницы (тоже Audi).
3) Далее идут ссылки на все наши файлы. Писать абсолютные ссылки у нас сейчас нет возможности, так как сайт еще не в интернете, а это значит, что наши страницы не имеют абсолютных адресов. Соответственно все ссылки будут относительные. Все наши файлы лежат в одной папке, по этому в атрибуте href пишутся только названия файлов на которые мы ссылаемся. Обязательно указывайте расширение файлов (.html).
4) Чтобы наши ссылки были в столбик, в конце каждой строки я поставил тег &ltbr&gt отвечающий за перенос строки. Напомню, что после тега &lth2&gt ставить тег &ltbr&gt не нужно, так как заголовки страницы по умолчанию пишутся на отдельной строке.

На рисунке который выше, изображен код для страницы audi.html. Теперь сделайте так, чтобы в каждом нашем файле был один и тот же код. Меняйте только содержимое тегов &lttitle&gt и &lth2&gt. Вписывайте в них соответствующие названия марок авто (BMW, Mercedes), а в файле index.html пропишите в этих тегах "Главная".

Если Вы сделали все правильно, то в результате у Вас должны получиться 4 страницы как на рисунке. Если зайти на любую из страниц через браузер и нажимать на ссылки, то страницы будут переключаться между собой.

Вы что-то не поняли из этого урока? Спрашивайте!
- [email protected]

ВАДИМ, ТЫ ОЧЕНЬ СИЛЬНО МНЕ ПОМОГ, Я ХОЧУ ОТБЛАГОДАРИТЬ ТЕБЯ Абсолютный или относительный путь

- какой путь использовать?

Автор: Коди Арсено

Обновлено 18 августа 2017 г.

Создание и отслеживание веб-ссылок может быть проблемой, особенно если вы не понимаете разницы между абсолютным и относительным путями. Эти противоречивые подходы к соединению веб-страниц могут существенно повлиять на производительность веб-сайта и ценность SEO. Это руководство объяснит два типа ссылок и поможет вам определить правильный путь для любой ситуации.

Относительный путь и абсолютный путь: что они означают?

Абсолютные пути содержат полный URL-адрес, который включает протокол, доменное имя веб-сайта и, возможно, конкретный файл, подпапку или имя страницы. Например:

   Google Trends .
  

URL здесь, https://trends.google.com/trends/ , можно ввести в строку поиска браузера, и вы попадете туда, куда хотите.Хотя ваш личный браузер может позволить вам опустить протокол https: // , вы всегда должны включать схему (например, http: // или https: // ) при кодировании абсолютных ссылок, чтобы убедиться, что они работают для все посетители.

И наоборот, относительная ссылка включает только имя определенного файла или страницы, относительное к текущему пути. Если вы храните все файлы своего веб-сайта в одном каталоге, вы можете устанавливать ссылки между страницами следующим образом:

   Следующая страница 
  

В этом случае ссылка действительна только в пределах каталога, в котором находится page2.html . При нажатии браузер ищет в каталоге текущей страницы page2.html и отображает его. Конечно, если вы просто вставите page2.html в строку поиска браузера, это не приведет вас туда, куда вы хотите. Следовательно, путь ссылки составляет относительно текущего документа, отображаемого браузером , отсюда и термин относительный путь.

Вам нужно будет включить протокол и ваше доменное имя в ссылку, чтобы превратить тот же пример, что и выше, в ссылку с абсолютным путем:

   Следующая страница 
  

Хотя некоторые разработчики отказываются от использования относительных ссылок для ограничения потенциального дублирования контента, они все же могут быть полезны в некоторых ситуациях.

Создание относительного пути для соединения элементов веб-сайта

Иногда для создания относительного пути необходимо включить больше информации, чем имя файла.Возвращаясь к последнему примеру, если page1.html находится в корневом каталоге, а page2.html находится в подкаталоге с именем folderA , относительная ссылка с page1.html на page2.html будет иметь до включить имя папки с косой чертой:

   Следующая страница 
  

Имейте в виду, что имена папок и файлов всегда чувствительны к регистру в URL-адресах ! Однако в доменных именах регистр не учитывается.

Допустим, вы хотите создать ссылку на page2.html , которая вернет вас на page1.html . Чтобы создать относительный путь к каталогу более высокого уровня, вы просто добавляете две точки, за которыми следует косая черта в начале ссылки:

   Предыдущая страница 
  

Добавление ../ указывает браузеру искать нужный файл в иерархии папок.

Теперь представьте себе структуру папок с корневым каталогом, который содержит folderA , а folderA содержит folderB .Если page1.html находится в корневом каталоге, а page3.html находится в папке B , вы можете создать ссылку с page3.html на page1.html следующим образом:

   Вернуться на страницу 1. 
  

Вы можете просто добавлять ../ каждый раз, когда хотите переместиться на один каталог вверх, но что, если вам нужно переместиться вверх, а затем вниз? Например, представьте, что в этом же корневом каталоге также есть папка с именем , подпапка , которая содержит файл contactpage.html . Если page2.html находится в folderA , и вы хотите создать относительный путь от page2.html до contactpage.html , вы должны использовать следующий формат ссылки:

  Свяжитесь с нами 
  

Создание абсолютного пути для соединения разных веб-сайтов

Хотя относительные ссылки могут быть полезны для внутренних ссылок, абсолютные ссылки полезны для создания ссылок как между отдельными веб-сайтами, так и внутри.При ссылке на внешний веб-сайт лучше всего настроить таргетинг на пустое окно браузера, чтобы ссылка открывалась в отдельном окне, а не перенаправлял посетителей с вашего веб-сайта. Таким образом, пользователь по-прежнему будет видеть ваш сайт, когда закроет связанную страницу. Чтобы указать браузеру открыть ссылку в новом окне, необходимо добавить атрибут target = "_ blank" . Например, вы можете сделать ссылку на главную страницу Google следующим образом:

   Домашняя страница Google 
  

Будет ли ссылка открываться во вкладке или в окне, зависит от настроек браузера пользователя.С другой стороны, относительные ссылки, соединяющие страницы вашего собственного веб-сайта, всегда должны загружаться на одной и той же странице браузера.

Независимо от того, используете ли вы относительные или абсолютные пути, у каждого метода есть свои плюсы и минусы. Если вы просто связываете страницы, которые находятся на одном и том же веб-сайте, традиционная мудрость гласит, что нет необходимости использовать абсолютные ссылки. Если вы когда-нибудь измените свое доменное имя, сохранение всех ссылок относительными значительно упростит переход. Однако использование абсолютных URL-адресов дает преимуществ SEO , которые будут обсуждаться позже.

А как насчет относительных URL-адресов протоколов?

Некоторые веб-сайты позволяют пользователям запрашивать ресурсы как по HTTP, так и по HTTPS. Если текущая страница просматривается через HTTPS, то ресурс, использующий относительный протокол, будет доставлен через HTTPS. С другой стороны, если сайт просматривается через HTTP, актив также будет соответствовать этому протоколу и будет доставлен через HTTP. Ниже приводится пример того, как выглядит ссылка, использующая относительный протокол:

   Мое изображение 
  

Относительные протоколы могут быть полезны, если у вас есть сценарии или изображения, которые существуют как в защищенных, так и в незащищенных областях вашего веб-сайта. Однако, поскольку HTTPS теперь считается стандартным , вам больше не нужно использовать относительные протоколы. Ознакомьтесь с нашим полным руководством о том, как перейти с HTTP на HTTPS, если вы еще этого не сделали.

Кроме того, относительные URL-адреса протоколов не идеальны для связи между страницами, и их нельзя использовать вместе с каноническими тегами.Это может создать проблемы с дублированием контента, из-за которых поисковые роботы будут сканировать одну и ту же страницу в режимах HTTP и HTTPS. Для веб-сайтов, которые переходят исключительно на HTTPS, лучше всего просто включить полный протокол, например:

   My Image 
  

Относительный путь или абсолютный путь: что лучше для SEO?

Когда дело доходит до SEO, последовательное использование абсолютных URL-адресов предпочтительнее даже для внутренних ссылок.Если у вас есть отдельная промежуточная среда, вы, вероятно, можете настроить свою CMS для динамического создания абсолютных URL-адресов на основе текущей серверной среды. Например, WordPress автоматически генерирует абсолютные URL-адреса для ссылок, которые не встроены в контент.

Если части вашего промежуточного сайта общедоступны, очень важно избегать использования относительных URL-адресов для ссылок навигации по сайту. Если одна неверная ссылка будет развернута в производственной среде, она может открыть весь ваш промежуточный сайт для сканирования, индексации и отображения в результатах поиска.Наличие нескольких копий вашего веб-сайта в результатах поиска может представлять серьезную угрозу безопасности помимо проблем с дублированием контента.

Относительные ссылки также проблематичны для RSS-каналов. Последовательное использование абсолютных ссылок гарантирует, что контент всегда отображается правильно, и дает вам лучшую защиту от парсеров. Использование абсолютных ссылок для изображений позволяет вам заявить о праве собственности в результатах поиска изображений, что снижает вероятность появления дублированного контента на веб-сайте конкурента.

Канонизация ссылок

Если у вас возникли проблемы с дублированием контента из-за относительных ссылок, и у вас нет времени или ресурсов для исправления всех ваших ссылок, канонизация всех ваших страниц может решить эту проблему. Канонический тег указывает, что URL-адрес ведет к главной копии веб-страницы, которая является версией, отображаемой в результатах поиска:

Канонический тег также очень удобен при реализации CDN. Поскольку CDN содержат кешированную копию ресурсов вашего веб-сайта и в большинстве случаев доставляют их с отдельного URL-адреса, сканеры могут рассматривать это как дублированный контент.Однако указание канонического тега устраняет эту проблему, и правильно указывает поисковым роботам на исходный ресурс .

KeyCDN предлагает функцию канонического заголовка, чтобы защитить вас от любых проблем с дублированием контента, вызванных использованием CDN.

Сводка

Если у вас уже есть веб-сайт с относительными ссылками, вам следует подумать о том, чтобы изменить их на абсолютные ссылки по причинам, указанным выше. В некоторых случаях, таких как WordPress, вы можете использовать плагин, такой как Better Search Replace, для изменения определенных ссылок.Например, это было бы полезно, если ваш сайт содержит много относительных ссылок на протоколы, и вы хотите изменить их, чтобы использовать абсолютные URL-адреса протоколов. Хотя будьте осторожны с этим подходом, как если бы вы ссылались на внешний сайт, который не поддерживает HTTPS, ваши пользователи получат сообщение об ошибке при нажатии на указанную ссылку.

Что касается относительных путей, в большинстве случаев их придется изменять вручную. Хотя относительные пути - это не то, что нужно срочно изменять, важно учитывать их подводные камни при продвижении вперед.

Какой формат лучше всего подходит для вашего сайта в 2020 году?

Абсолютные и относительные URL-адреса

Хорошо продуманная структура URL-адресов имеет решающее значение для правильной работы, успешного сканирования и точного индексирования вашего веб-сайта. Основное внимание уделяется настройке всех ваших URL-адресов в едином формате, относительном или абсолютном. В этой статье объясняется разница между ними и рассматриваются основы, чтобы помочь вам выбрать лучший вариант, отвечающий вашим целям.

Что такое абсолютный URL?

Абсолютный URL-адрес предоставляет все доступные данные о местоположении страницы в Интернете.

Пример: https://www.somewebsite.com/catalog/category/product

Мы знаем, что протокол (HTTPS) и домен (www.somewebsite.com) могут отслеживать все уровни вложенности и определять местоположение страницы на веб-сайте.

Что такое относительный URL?

Относительный URL-адрес предоставляет только тег абсолютного URL-адреса.

Если вы хотите создать ссылку на страницу продукта со страницы категории, вы должны использовать следующий относительный URL-адрес HTML: .

Предполагается, что если на определенной странице появляется относительная ссылка, эта конкретная страница должна использоваться в качестве ее корня.

Теперь, когда вы понимаете разницу между относительной ссылкой и абсолютной ссылкой, давайте проясним их оптимальное использование.

причин использовать относительные ссылки

Эффективное кодирование

Относительный URL-путь - излюбленный вариант веб-разработчиков, поскольку он значительно упрощает работу по кодированию.Вместо того, чтобы обрисовывать весь маршрут, что может быть утомительным и трудоемким при работе с тысячами страниц, вы можете просто ввести код «/ product», и легко понять, что страница находится по адресу www.somewebsite.com , в определенной категории в каталоге.

Простой переход от стадии подготовки к производству

Если промежуточная среда для somewebsite.com размещена в уникальном домене somewebsite staging .com , абсолютный URL-адрес страницы продукта будет выглядеть так: https: // www.somewebsite staging .com / catalog / category / product. Когда тысячи страниц помещены в промежуточную среду, вы можете столкнуться с острой необходимостью перенести их все на somewebsite.com. Чтобы перекодировать тысячи ссылок, потребуется уйма времени и энергии.

относительных URL избавят вас от этой головной боли. Вы можете сразу переместить всю структуру веб-сайта в рабочую, и теги, указанные в относительных адресах, будут применяться к новому домену.Это гораздо более эффективный способ использовать ресурсы вашей команды разработчиков.

Незначительное увеличение скорости загрузки

Благодаря коротким URL страницы загружаются немного быстрее. Однако не следует полагаться только на относительные звенья для увеличения скорости загрузки, поскольку ускорение действительно небольшое. Если ваш контент загружается слишком долго, копайте глубже, чтобы исправить более серьезные проблемы.

Проблемы с дублированием

Как и любое другое решение, формат относительного URL-адреса HTML имеет некоторые недостатки.Ключевой из них является то, что один относительный URL-адрес может дать начало четырем вариантам абсолютного URL-адреса:

    • https://www.somewebsite.com/catalog/category/product

  • https://somewebsite.com/catalog/category/product

    • http://www.somewebsite.com/catalog/category/product

  • http: // somewebsite.ru / catalog / category / product

Если вы не выберете каноническую версию, Google будет воспринимать все эти версии как уникальные страницы. Конечно, по мере того, как алгоритм Google становится умнее, он автоматически определяет основную версию. Но ошибки все же возможны, поэтому не стоит полностью полагаться на цифровой разум.

Почему нежелательно дублирование содержимого?

Некоторые оптимизаторы поисковых систем боятся наказаний за дублированный контент. Однако вы не получите такого же сурового наказания, как за спам-ссылки.Тем не менее, плохое сканирование - это одна из причин, по которой ваш сайт может пострадать. Google тратит огромные ресурсы на сканирование Интернета на предмет обновлений и отражение последних изменений в результатах поиска. Каждому веб-сайту выделяется ограниченный бюджет сканирования. Его количество зависит от авторитета платформы, размера, сложности ее структуры и частоты обновлений.

Если у вас четыре версии веб-сайта, вашего краулингового бюджета может быть недостаточно для сканирования их всех. Google не будет знать об изменениях, внесенных на непроверенные страницы, и вместо этого будет показывать устаревшую информацию в раскрывающемся списке поиска.Если Google регулярно сталкивается с дублированным контентом, он может принять решение уменьшить ваш краулинговый бюджет и частоту посещений вашей платформы.

В этих условиях абсолютные URL-адреса являются оптимальным решением. Поисковые роботы будут видеть единую версию веб-сайта и не будут отвлекаться на дубликаты, что значительно повысит шансы на то, что ваш обновленный контент будет размещен.

Риски соскабливания

Относительные URL-адреса позволяют легко переносить контент из тестовой среды в производственный домен.Но здесь есть одна оговорка: конкуренты могут так же легко очистить контент вашей платформы и разместить его на своем домене, а вы не хотите, чтобы это происходило с вашим созданным вручную детищем.

Абсолютные URL-адреса помогают защитить вашу интеллектуальную собственность. Вместо того, чтобы переписывать веб-адреса тысяч страниц, парсеры с большей вероятностью будут искать другие незащищенные платформы.

Создание эффективных абсолютных ссылок

Если вы планируете использовать абсолютные URL-адреса, следующие советы помогут вам установить единый формат:

  • При канонизации основной версии вашего веб-сайта отдайте предпочтение протоколу HTTPS, поскольку Google считает его более безопасным.
  • Хотя это напрямую не влияет на ваши показатели SEO, лучше использовать версию без www., Поскольку эти четыре символа служат только для удлинения ваших URL-адресов.
  • Объясните важность абсолютных URL-адресов вашей команде разработчиков, поскольку они могут рассматривать перекодирование тысяч веб-адресов как пустую трату времени.
  • Исправьте ссылки во внутренней навигации.
  • Попросите свою команду сообщать вам обо всех неабсолютных URL-адресах, на которые они наталкиваются при работе с веб-сайтом.
  • Используйте Screaming Frog или другие подобные инструменты для обнаружения ссылок, не соответствующих общепринятому формату.
  • Если вы не можете исправить все свои URL-адреса, сделайте их каноническими, чтобы снизить риски дублирования контента и очистки.

Сводка

Теперь вы знаете разницу между относительными и абсолютными URL-адресами и для каких целей они служат. У каждого формата есть свои уникальные преимущества и недостатки. Относительные ссылки значительно упрощают работу веб-разработчиков, в то время как абсолютные ссылки обеспечивают большую безопасность, решают проблемы с дублированием и помогают максимально эффективно использовать бюджет сканирования.

Хотя многие эксперты считают использование абсолютных ссылок одним из лучших методов SEO, не спешите переписывать все относительные ссылки. Тщательно взвесьте все «за» и «против» каждого варианта и сопоставьте их со своими приоритетами и целями.

Главное - использовать выбранный вами формат последовательно на всем сайте, чтобы снизить риск ошибок как для вашей команды веб-разработчиков, так и для роботов Google.

Должен ли я использовать относительные или абсолютные URL-адреса?

Взгляды автора полностью принадлежат ему (за исключением маловероятного случая гипноза) и не всегда могут отражать взгляды Моза.

Когда-то для разработчиков было обычным делом кодировать относительные URL-адреса на сайте. Есть ряд причин, по которым это может быть не лучшей идеей для SEO, и сегодня на Whiteboard Friday Рут Бёрр Риди расскажет вам, почему.

Для справки, вот кадр с доски на этой неделе. Нажмите на нее, чтобы открыть изображение с высоким разрешением в новой вкладке!

Давайте обсудим некоторые нефилософские абсолюты и их родственники

Привет, фанаты Moz.Меня зовут Рут Берр Риди. Вы можете узнать меня по таким проектам, как когда я был руководителем отдела SEO в Moz. Сейчас я старший менеджер по поисковой оптимизации в BigWing Interactive в Оклахома-Сити. Сегодня мы поговорим об относительных и абсолютных URL-адресах и о том, почему они важны.

В любой момент времени ваш веб-сайт может иметь несколько различных конфигураций, которые могут вызывать проблемы с дублированием контента. У вас может быть просто стандартный http://www.example.com. Это довольно стандартный формат для веб-сайта.

Но основные источники дублированного контента на уровне домена, которые мы видим, - это когда не-www.example.com не перенаправляет на www или наоборот, и когда HTTPS-версии ваших URL-адресов не вынуждены разрешать к версиям HTTP или, опять же, наоборот. Это может означать, что если все эти сценарии верны, если все четыре URL-адреса разрешаются без принудительного преобразования в каноническую версию, вы, по сути, можете разместить четыре версии своего веб-сайта в Интернете.Это может быть, а может и не быть проблемой.

Он не идеален по нескольким причинам. Во-первых, дублированный контент - это проблема, потому что некоторые люди думают, что дублированный контент повлечет за собой наказание. Дублированный контент не повлечет за собой наказание вашего веб-сайта так же, как вы можете увидеть штраф за спам-ссылку от Penguin. Фактического штрафа нет. Вы не будете наказаны за дублированный контент.

Проблема с дублированием контента заключается в том, что вы в основном полагаетесь на Google, чтобы выяснить, какова реальная версия вашего веб-сайта.Google видит URL-адреса всех четырех версий вашего веб-сайта. Они попытаются выяснить, какой URL является настоящим, и просто ранжируют его. Проблема в том, что вы в основном оставляете это решение на усмотрение Google, когда это то, что вы можете контролировать сами.

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

Однако то, что эти URL-адреса не разрешаются друг с другом, может быть, а может и не быть огромной проблемой.Когда это действительно становится серьезной проблемой, это когда эта проблема сочетается с необдуманным использованием относительных URL-адресов во внутренних ссылках. Итак, давайте немного поговорим о разнице между относительным URL-адресом и абсолютным URL-адресом, когда дело доходит до внутренней ссылки.

При использовании абсолютного URL-адреса вы помещаете в ссылку весь веб-адрес страницы, на которую вы ссылаетесь. Вы помещаете свой полный домен, все, что указано в ссылке, включая / page. Это абсолютный URL.

Однако при кодировании веб-сайта довольно распространенной практикой веб-разработки является кодирование внутренних ссылок с помощью так называемого относительного URL-адреса.Относительный URL-адрес - это просто / страница. В основном это зависит от вашего браузера, чтобы понять: «Хорошо, эта ссылка указывает на страницу, которая находится в том же домене, что и мы. Я просто предполагаю, что это так, и перехожу туда. . "

Есть несколько действительно веских причин для кодирования относительных URL-адресов

1) Кодировать намного проще и быстрее.

Когда вы веб-разработчик и создаете сайт с тысячами страниц, кодирование относительных URL-адресов в сравнении с абсолютными - это способ повысить эффективность.Вы будете видеть это много раз.

2) Промежуточные среды

Другая причина, по которой вы можете увидеть относительные URL-адреса в сравнении с абсолютными, заключается в том, что некоторые системы управления контентом - и SharePoint является отличным примером этого - имеют промежуточную среду, которая находится в собственном домене. Вместо example.com это будет examplestaging.com. Весь веб-сайт будет в основном реплицирован на этом промежуточном домене. Наличие относительных URL-адресов в сравнении с абсолютными означает, что один и тот же веб-сайт может существовать как на стадии подготовки, так и на производстве, или же версия вашего веб-сайта, доступная в реальном времени, без необходимости повторного кодирования всех этих URL.Опять же, это более эффективно для вашей команды веб-разработчиков. Это действительно веские причины для этого. Так что не кричите на свою команду веб-разработчиков, если они закодировали относительные URL-адреса, потому что с их точки зрения это лучшее решение.

Относительные URL-адреса также заставят вашу страницу загружаться немного быстрее. Однако, по моему опыту, преимущества использования абсолютных и относительных URL-адресов на вашем веб-сайте для SEO намного перевешивают то крохотное время, которое потребуется для загрузки страницы.Это очень незначительно. Если у вас действительно очень долгое время загрузки страницы, вы можете изменить множество вещей, которые будут иметь большее значение, чем кодирование ваших URL-адресов как относительных по сравнению с абсолютными.

Время загрузки страницы, на мой взгляд, не имеет значения. Тем не менее, это то, что ваша команда веб-разработчиков может поднять с вами, когда вы попытаетесь решить с ними тот факт, что с точки зрения SEO кодирование вашего веб-сайта с относительными или абсолютными URL-адресами, особенно в навигации, не является хорошим решением. .

Есть еще более веские причины использовать абсолютные URL-адреса

1) Скребки

Если у вас есть все ваши внутренние ссылки как относительные URL-адреса, для парсера было бы очень, очень, очень легко просто очистить весь ваш сайт и поместить его на новом домене, и весь веб-сайт будет просто работать. Это отстой для вас и отлично подходит для этого скребка. Но если вы по какой-то причине не предоставляете общественные услуги для парсеров, это, вероятно, не то, что вы хотите, чтобы произошло с вашим красивым, трудолюбивым, созданным вручную сайтом.Это одна из причин. Существует риск скребка.

2) Предотвращение проблем с дублированием контента

Но другая причина, по которой очень важно иметь абсолютные и относительные URL-адреса, заключается в том, что это действительно снижает риск дублирования контента, который может возникнуть, когда у вас нет всех этих версий вашего веб-сайта. сводя к одной версии. Google потенциально может зайти на ваш сайт на любой из этих четырех страниц, которые для вас совпадают. Для Google это четыре разные страницы.Они для вас одно и то же. Это четыре разных домена для Google.

Но они могут войти на ваш сайт, и если все ваши URL-адреса являются относительными, они могут сканировать и индексировать весь ваш домен, используя любой формат. Если у вас есть закодированные абсолютные ссылки, даже если Google заходит на ваш сайт по www. и это решает, что после того, как они просканируют на другую страницу, что вы закодировали без www., всех остальных внутренних ссылок и всех других страниц на вашем веб-сайте, Google не будет предполагать, что они живут в www.версия. Это действительно сокращает количество разных версий каждой страницы вашего сайта. Если у вас есть относительные URL-адреса, у вас будет четыре разных веб-сайта, если вы не исправили эту проблему.

Опять же, это не всегда большая проблема. Повторяющийся контент, это не идеально. Тем не менее, Google довольно хорошо разбирается в том, какова настоящая версия вашего веб-сайта.

Когда вы думаете об этом, вы действительно хотите думать о внутренних ссылках. Если у вас есть в основном четыре разных версии любого URL-адреса, которые любой может просто скопировать и вставить, когда он захочет дать ссылку на вас или когда он захочет поделиться чем-то, что вы создали, вы разбавляете свои внутренние ссылки на четыре, что не является Отлично.По сути, вам придется создать в четыре раза больше ссылок, чтобы получить такой же авторитет. Это одна из причин.

3) Бюджет сканирования

Другая причина, почему этого очень важно не делать, - это бюджет сканирования. Вместо этого я собираюсь указать на это вот так.

Когда мы говорим о бюджете сканирования, в основном это то, что он представляет собой каждый раз, когда Google сканирует ваш веб-сайт, существует конечная глубина, на которую они будут сканировать. Есть ограниченное количество URL-адресов, которые они будут сканировать, а затем они решают: «Хорошо, я закончил."Это основано на нескольких разных вещах. Авторитет вашего сайта является одним из них. Ваш фактический PageRank, а не PageRank панели инструментов, но то, насколько хорош Google на самом деле думает о вашем веб-сайте, является большой частью этого. Но также и то, насколько сложен ваш сайт, как часто он обновляется, подобные вещи также будут влиять на то, как часто и насколько глубоко Google будет сканировать ваш сайт.

Когда мы думаем о бюджете сканирования, важно помнить, что для Google бюджет сканирования обходится в долларах. Одна из самых больших затрат Google как компании - это деньги и пропускная способность, необходимые для сканирования и индексации Интернета.Вся энергия, затрачиваемая на сканирование и индексацию Интернета, живет на серверах. Эта пропускная способность исходит от серверов, а это означает, что использование пропускной способности стоит Google реальных долларов.

Таким образом, Google заинтересован в том, чтобы сканировать как можно более эффективно, потому что, когда они выполняют сканирование неэффективно, это стоит им денег. Если ваш сайт неэффективен для сканирования, Google собирается сэкономить деньги, сканируя его реже и просматривая меньшее количество страниц за одно сканирование. Это может означать, что если у вас есть сайт, который часто обновляется, ваш сайт может не обновляться в индексе так часто, как вы его обновляете.Это также может означать, что Google во время сканирования и индексации может сканировать и индексировать версию вашего веб-сайта, которая не является той версией, которую вы действительно хотите сканировать и индексировать.

Таким образом, наличие четырех разных версий вашего веб-сайта, каждая из которых полностью доступна для сканирования до последней страницы, поскольку у вас есть относительные URL-адреса и вы не устранили эту проблему с дублированием контента, означает, что Google придется тратить в четыре раза больше деньги, чтобы действительно сканировать и понимать ваш сайт.Со временем они будут делать это все реже и реже, особенно если у вас нет действительно авторитетного веб-сайта. Если у вас небольшой веб-сайт, если вы только начинаете, если у вас только среднее количество входящих ссылок, со временем вы заметите, что скорость и частота сканирования снизятся, и это плохо. Мы этого не хотим. Мы хотим, чтобы Google постоянно возвращался, видел все наши страницы. Они красивые. Поместите их в указатель. Хорошо их ранжируйте. Вот чего мы хотим. Вот что мы должны делать.

Существует несколько способов решить проблему относительных и абсолютных URL-адресов

1) Исправить то, что происходит на стороне сервера вашего веб-сайта

Вы должны убедиться, что вы используете все эти разные версии вашего веб-сайта. domain, чтобы разрешить одну версию вашего домена. На мой взгляд, я совершенно не уверен, какую версию вы выберете. Вероятно, вы уже должны иметь довольно хорошее представление о том, какая версия вашего веб-сайта является реальной версией, будь то www, не-www, HTTPS или HTTP.На мой взгляд, наиболее важным является то, что все четыре версии сводятся к одной версии.

С точки зрения SEO есть свидетельства, которые можно предположить, и Google определенно сказал, что HTTPS немного лучше, чем HTTP. С точки зрения длины URL я предпочитаю не иметь www. там, потому что на самом деле он ничего не делает. Это просто делает ваши URL-адреса на четыре символа длиннее. Если вы не знаете, какой выбрать, я бы выбрал именно этот HTTPS, а не W. Но какой бы из них вы ни выбрали, что действительно наиболее важно, так это то, что все они сводятся к одной версии.Вы можете сделать это на стороне сервера, и обычно вашей команде разработчиков довольно легко исправить это, как только вы скажете им, что это должно произойти.

2) Исправьте внутренние ссылки

Отлично. Итак, вы исправили это на стороне сервера. Теперь вам нужно исправить ваши внутренние ссылки, и вам нужно перекодировать их, чтобы они были относительными, чтобы быть абсолютными. Это то, что ваша команда разработчиков не захочет делать, потому что это требует много времени и, с точки зрения веб-разработчиков, не так важно. Однако вам следует использовать такие ресурсы, как эта Whiteboard Friday, чтобы объяснить им, с точки зрения SEO, как с точки зрения риска парсера, так и с точки зрения дублирования контента, наличие этих абсолютных URL-адресов является высоким приоритетом и тем, что необходимо сделать.

Вам нужно будет исправить это, особенно в элементах навигации. Но как только вы исправите свою навигацию, также вытащите свою базу данных или запустите сканирование Screaming Frog или, как бы то ни было, вы хотите обнаружить внутренние ссылки, которые не являются частью вашей навигации, и убедитесь, что вы обновляете их, чтобы они были абсолютными, как хорошо.

Затем вы проведете некоторое обучение со всеми, кто коснется вашего веб-сайта, говоря: «Эй, когда вы делаете внутреннюю ссылку, убедитесь, что вы используете абсолютный URL-адрес и убедитесь, что он в нашем предпочтительном формате», потому что это действительно даст вы получаете наибольшую отдачу от каждой внутренней ссылки.Так что сделайте некоторое образование. Исправьте ваши внутренние ссылки.

Иногда ваша команда разработчиков говорит: «Нет, мы не можем этого сделать. Мы не собираемся перекодировать всю навигацию. Это плохое использование нашего времени», и иногда они правы. У команды разработчиков есть дела поважнее. Это нормально.

3) Канонизируйте это!

Если вы не можете исправить свои внутренние ссылки или они не будут исправлены в ближайшем будущем, временная мера или пластырь, который вы можете как бы наложить на эту проблему, - канонизировать все ваши страниц.Поскольку вы меняете свой сервер, чтобы все эти разные версии вашего домена преобразовывались в одну, в то же время вы должны реализовать канонический тег на всех страницах вашего веб-сайта для самоканонизации. На каждой странице у вас есть тег канонической страницы, в котором говорится: «Эта страница прямо здесь, на которой они уже были, является канонической версией этой страницы». Или, если есть другая страница, которая является канонической версией, то, очевидно, вы вместо этого указываете на нее.

Но самоканонизация каждой страницы снизит как риск дублирования контента внутри, так и некоторый риск, связанный с парсерами, потому что, когда они парсят ваш сайт и вставляют его где-то еще, эти канонические теги часто будут оставаться на месте, и это позволяет Google знать, что это не настоящая версия веб-сайта.

В заключение, относительные ссылки не так хороши. Абсолютные ссылки, это то, что нужно. Убедитесь, что вы исправляете эти очень распространенные проблемы с дублированием контента на уровне домена. Если ваша команда разработчиков пытается сказать вам, что они не хотят этого делать, просто скажите им, что я вас послал. Спасибо, парни.

Подробнее:
• Повторяющееся содержимое | Лучшие практики SEO

Транскрипция видео с Speechpad.com

html - Абсолютные и относительные URL-адреса

Должен ли я использовать абсолютные или относительные URL-адреса?

Если под абсолютными URL-адресами вы имеете в виду URL-адреса, включая схему (например,грамм. http / https) и имя хоста (например, yourdomain.com) никогда не делают этого (для локальных ресурсов), потому что его будет ужасно поддерживать и отлаживать.

Допустим, вы использовали абсолютный URL везде в своем коде, например . Что теперь будет, когда вы поедете:

  • переключиться на другую схему (например, http -> https)
  • переключить доменные имена (test.yourdomain.com -> yourdomain.com)

В первом примере произойдет то, что вы получите предупреждения о небезопасном содержании, запрашиваемом на странице.Поскольку все ваши URL-адреса жестко запрограммированы на использование http (: //yourdomain.com/images/example.png). И при запуске ваших страниц через https браузер ожидает, что все ресурсы будут загружены через https, чтобы предотвратить утечку информации.

Во втором примере при запуске вашего сайта из тестовой среды это будет означать, что все ресурсы по-прежнему указывают на ваш тестовый домен, а не на ваш действующий домен.

Итак, чтобы ответить на ваш вопрос о том, использовать ли абсолютные или относительные URL-адреса: всегда используйте относительные URL-адреса (для локальных ресурсов).

В чем разница между разными URL-адресами?

Сначала давайте посмотрим на различные типы URL-адресов, которые мы можем использовать:

  • http://yourdomain.com/images/example.png
  • //yourdomain.com/images/example.png
  • /images/example.png
  • images / example.png

К каким ресурсам эти URL-адреса пытаются получить доступ на сервере?

В приведенных ниже примерах я предполагаю, что веб-сайт запущен из следующего местоположения на сервере / var / www / mywebsite .

http://yourdomain.com/images/example.png

Указанный выше (абсолютный) URL-адрес пытается получить доступ к ресурсу /var/www/website/images/example.png . Этот тип URL-адреса всегда следует избегать при запросе ресурсов с вашего собственного веб-сайта по причинам, изложенным выше. Однако у него есть свое место. Например, если у вас есть веб-сайт http://yourdomain.com и вы хотите запросить ресурс из внешнего домена по https, вы должны использовать его.Например. https://externalsite.com/path/to/image.png .

//yourdomain.com/images/example.png

Этот URL-адрес является относительным на основе текущей используемой схемы и должен почти всегда использоваться при включении внешних ресурсов (изображений, javascripts и т. Д.).

Этот тип URL использует текущую схему страницы, на которой он находится. Это означает, что вы находитесь на странице http://yourdomain.com и на этой странице есть тег изображения URL-адрес изображения будет разрешен в http://yourdomain.com/images/example.png .
Когда вы были бы на странице http ** s ** : //yourdomain.com и на этой странице тег изображения URL-адрес изображения будет разрешен в https: // yourdomain. com / images / example.png .

Это предотвращает загрузку ресурсов через https, когда в этом нет необходимости, и автоматически гарантирует, что ресурс запрашивается через https, когда - это .

Указанный выше URL-адрес разрешается на стороне сервера таким же образом, что и предыдущий URL-адрес:

Указанный выше (абсолютный) URL-адрес пытается получить доступ к ресурсу /var/www/website/images/example.png .

/images/example.png

Для локальных ресурсов это предпочтительный способ ссылки на них. Это относительный URL-адрес, основанный на корне документа ( / var / www / mywebsite ) вашего веб-сайта. Это означает, что у вас есть всегда разрешается в /var/www/mywebsite/images/example.png .

Если в какой-то момент вы решите сменить домен, он все равно будет работать, потому что он относительный.

изображений / example.png

Это также относительный URL, хотя и немного отличается от предыдущего. Этот URL-адрес относится к текущему пути. Это означает, что он будет разрешаться по разным путям в зависимости от того, где вы находитесь на сайте.

Например, когда вы находитесь на странице http://yourdomain.com и используете , на сервере он будет преобразован в / var / www / mywebsite / images / example.png , как и ожидалось, однако, когда вы находитесь на странице http://yourdomain.com/some/path и используете тот же тег изображения, он внезапно преобразуется в / var / www / mywebsite / некоторые / путь / изображения / пример.png .

Когда что использовать?

При запросе внешних ресурсов вы, скорее всего, захотите использовать URL-адрес, относящийся к схеме (если вы не хотите принудительно использовать другую схему), а при работе с локальными ресурсами вы хотите использовать относительные URL-адреса на основе корня документа.

Пример документа:

  

    
         Пример 
        
         
    
    
        
        
    

  

Некоторые (вроде) дубликаты

Абсолютные, относительные и корневые ссылки

Моя новая книга Sams Teach Yourself Microsoft Expression Web 3 за 24 часа близится к завершению (вчера вечером только что закончил финальный обзор первых 10 глав). Книга представляет собой переработку оригинала для новой версии Expression Web, и в процессе переписывания я также добавил несколько новых материалов, чтобы помочь читателям лучше понять иногда сбивающий с толку и загадочный мир веб-кода.Эти дополнения в основном были вызваны вопросами и комментариями читателей, как в случае с приведенным ниже отрывком о синтаксисе гиперссылок.

Я выбрал этот отрывок, потому что он актуален не только для людей, использующих Expression Web 3, но и для всех, кто что-либо делает в сети. Когда я начинал в этой области, я часто не понимал, почему существует три разных типа гиперссылок и как и когда их использовать. Что ж, вот простое объяснение с примерами:

Абсолютные, относительные и корневые гиперссылки - объяснение

При создании гиперссылок в Expression Web 3 вы заметите, что синтаксис адреса ссылки в представлении «Код» изменяется в зависимости от того, на что вы ссылаетесь.На самом деле существует три разных способа написания адреса гиперссылки, и все они используются для разных целей:

Абсолютные гиперссылки

Абсолютные гиперссылки - это полные адреса, содержащие все элементы URL. Они всегда начинаются с некоторой версии http: //, за которой следует имя домена (например, www.designisphilosophy.com) и, возможно, страница / папка. Абсолютные гиперссылки используются при ссылках на страницы за пределами текущего сайта, которые имеют другое доменное имя.

Относительные гиперссылки

Относительные гиперссылки - это адреса, относящиеся к текущему домену или местоположению. Они содержат только имя целевой страницы с префиксом любых необходимых перемещений папок (например, default.html). Браузер видит, что это относительная гиперссылка, и добавляет домен и расположение папки текущей страницы в начало ссылки, чтобы завершить ее. Если вы используете относительные гиперссылки и хотите перейти со страницы, хранящейся в одной папке, на страницу, хранящуюся в другой папке, вы добавляете префиксы папок к гиперссылке.Например, относительная ссылка со страницы в папке 1 на страницу в папке 2 будет выглядеть так: ../Folder 2 / page.html, где ../ сообщает браузеру, что вы хотите выйти из текущей папки в новый. Когда вы создаете гиперссылки между страницами в Expression Web 3, они всегда вставляются как относительные ссылки, так что приложение может легко обновлять их, если вы решите перемещать файлы. Однако, если вы переместите файлы на свой компьютер за пределы программы Expression Web, гиперссылки разорвутся.

Корневые гиперссылки

Корневые гиперссылки - это подмножество относительных гиперссылок, в которых предполагается, что все ссылки начинаются с корневой папки (доменного имени) сайта. Они отличаются от относительных гиперссылок тем, что перед адресом стоит косая черта (например, /default.html). Браузер применяет только домен к началу этой ссылки. Корневые гиперссылки используются вместо относительных на крупных сайтах, где есть вероятность, что файлы будут перемещаться без использования приложения, такого как Expression Web 3, для их обновления.Поскольку они относятся к корню сайта, а не к текущему местоположению страницы, на которой они размещены, они работают независимо от того, где размещен файл, до тех пор, пока они остаются в правильном домене.

Ссылки для поиска и устранения неисправностей

Устранение неполадок относительных и абсолютных ссылок

Если ссылка не работает, то даже хотя файл правильно назван и расположен, проверьте адрес, который появляется при попытке перейти по неработающей ссылке. Если адрес содержит букву диска (обычно C: //), вы случайно связались с файлом на своем компьютере, а не на сервер (то есть вы связались с локальным файлом, а не с файлом на сервер).

На более глубоком уровне это проблема относительных по сравнению с абсолютными ссылок.

Относительные ссылки относятся к файлам в том же относительном местоположении. Эти ссылки часто представляют собой просто имя файла (если файл находится в том же каталоге) или комбинация имени каталога / имени файла:

Если у вас есть отдельная папка для ваш класс 377 внутри вашей папки public_html, ссылка из вашего файла index.html ваш файл 377.html будет выглядеть так (если вы используете код Посмотреть в Composer):

  

и обратная ссылка из файла 377.html на файл index.html . будет выглядеть так:

  

"../" просто означает «перейти на один каталог вверх».

Если все ваши файлы в одном папку, ссылка должна быть такой:

  

и обратная ссылка будет

  

Все они считаются родственниками ссылки .

Для небольших сайтов можно хранить файлы в одной папке, но по мере роста вашего сайта вам, вероятно, понадобится отдельная папка / каталоги для каждого класса или каждый год. Использование графического редактора относительные ссылки обычно предполагаются, если вы используете кнопку Insert Link и выберите . Выберите файл , но иногда URL-адрес файла будет начать с буквы диска:

  

Это абсолютный URL и будет не работает.Либо проверьте, что URL-адрес относится к полю местоположения файла, или отредактируйте URL-адрес, чтобы удалить букву диска.


Абсолютные ссылки относятся к файлам по их полным URL-адресам, включая префикс . Они используются, когда вы ссылаетесь на страницу за пределами твой сайт. Например, ссылка на домашнюю страницу GMU будет выглядеть так:

  

Абсолютная ссылка на файл на жестком диске будет выглядеть так

  

Такие ссылка будет работать только на вашем компьютере. Если вы загружаете файл, содержащий такой файл, связанный с буквой диска, ссылка не будет работать, поскольку диск C: // (или диск A: //), к которому вы подключились, не находится на сервере.

Преимущество относительной ссылки - транспортабельность: пока файлы находятся в тех же относительных местоположениях, ссылки будут работать. Вы можете переместить весь веб-сайтах, просто переместив каталог public_html в другой server, а относительные ссылки останутся нетронутыми.Но если вы переместите файл в в новом относительном местоположении эти ссылки разорвутся. Например, если у вас был изображения в вашем каталоге public_html , но затем решил переместите все свои изображения в новый каталог изображений , ссылки к тем изображениям сломается. Вам нужно будет обновить каждую из них.

Та же проблема является причиной многих битых изображений на веб-страницах. Взгляните на исходный код ( View -> Page Source) или Щелкните правой кнопкой мыши поврежденное изображение и проверьте его свойства . Если путь к изображению или содержит букву диска (пример: ), изображение появится только при доступе к странице на вашем компьютере, поскольку вы случайно связались с локальной копией, а не с удаленной файл на сервере.

Хранение файлов в одном и том же относительном месте является проблемой сайта. Обслуживание.


Dean Taciuch
GMU English Department


Это произведение находится под лицензией Creative Лицензия Commons.

Общие сведения о ссылках - Dreamweaver CS6: Отсутствующее руководство [Книга]

Ссылки - это фрагменты кода, которые указывают веб-браузерам, как переходить с одной страницы на другую в сети. Что делает ссылки мощными, так это что расстояние, пройденное по этим направлениям, не имеет значения. Ссылка может вести на другую страницу того же сайта так же легко, как и ведет на страницу на веб-сервере на другом конце земного шара.

За кулисами простой тег HTML, называемый тегом привязки () заставляет работать каждую ссылку.Ссылки бывают трех ароматы: абсолютных, относительных к документу и родственник по корню . Типы ссылок в действии демонстрируют примеры каждого из упражняться.

Когда люди хотят отправить вам письмо, они просят ваше адрес. Предположим, это 123 Main St., Smithville, NY 12001, USA. Нет независимо от того, где в стране ваши друзья, если они пишут 123 Main St., Smithville, NY 12001, USA на конверт и отправьте его по почте, их письма дойдут до вас.Это потому что ваш адрес уникален.

Точно так же каждая веб-страница имеет уникальный адрес, называемый URL (большинство людей произносят это «вы-эль») или Единый указатель ресурсов. Если вы откроете веб-браузер и наберете http://www.cafesoylentgreen.com/events/index.html в адресную строку, на страницу событий Cafe Soylent Green открывается.

Этот URL представляет собой абсолютную ссылку - это полный, уникальный адрес для одной страницы.Абсолютные ссылки всегда начинаются с http: // , а абсолютная ссылка ведет на одну и ту же целевую страницу, независимо от того, какую страницу веб-сайта вы разместите эта ссылка включена - абсолютная ссылка на веб-странице может вызывать другую страницу на том же сайте или на странице целиком на другом сайте. Вы будете использовать абсолютные ссылки каждый раз, когда вы ссылаетесь на веб-страницу за пределами ваш собственный сайт - это только веб-браузер может переходить со страницы вашего сайта на страницу за пределами твой сайт.Однако, если вы хотите вызвать страницу внутри вашего сайта, есть другой способ написать ссылку (описанную далее), которая позволяет просматривать ваши страницы без подключение к Интернету прямо на вашем рабочем столе - подвиг, невозможно с абсолютными ссылками.

Итог: используйте абсолютные ссылки, если хотите создать ссылку на страница на другом сайте.

Предположим, вы, житель Мейн-стрит, 123, заезжаете на пара, которая только что переехала в дом через дорогу от ты.Рассказав им обо всех отличных ресторанах поблизости, вы рассказываете им о вечеринке, которую устраиваете у себя дома.

Когда вас спросят, где вы живете, вы могли бы сказать: «Я живу в 123 Main St., Smithville, NY 12001, USA », но ваши соседи возможно, вы думаете, что вам нужна психиатрическая помощь. Вместо этого вы бы сказали что-то вроде: «Просто пройди через улицу, и вот ты где». Из конечно, вы не можете использовать эти инструкции в качестве почтового адреса, и они не имели бы смысла для соседа, который жил семь дома вниз.Эти указания помогают только соседям напрямую через дорогу от их дома к вашему.

Если вы хотите создать ссылку с одной веб-страницы на другую на том же веб-сайте вы используете аналогичное сокращение, называемое ссылка на документ . По сути, ссылка, относящаяся к документу - например, направления, которые вы дали своему сосед - сообщает браузеру, где найти страницу. относительно вашего текущего местоположения, в данном случае относительно текущей веб-страницы.Если две страницы находятся в к той же папке, например, путь такой же простой, как «Перейти на эту страницу там." В этом случае ссылка - это просто имя файла. вы хотите разместить ссылку, например, на: index.html . Ты можешь уйти от всего этого http://www.your_site.com/ бизнеса, потому что ты уже на этом сайте и в этом каталоге.

Ссылки, относящиеся к документу, могут быть привередливыми, потому что они полностью зависят от местоположения страницы, содержащей связь.Если вы переместите эту страницу в другую часть своего сайта - подача например, в другой папке - ссылка работать не будет (это как хотя ваши соседи переехали через город - они не могли перейти улица, чтобы добраться до вашего дома больше). Вот почему работа с ссылки, относящиеся к документу, традиционно были одними из самых хлопотные хлопоты для веб-дизайнеров, даже если такая ссылка идеально подходит для перехода с одной страницы на другую в том же сайт.

К счастью, Dreamweaver позволяет работать с документами, относящимися к ссылки настолько легкие, что вы можете забыть, о чем идет речь. В Dreamweaver, всякий раз, когда вы сохраняете страницу, имеющую относительный документ ссылку на папку, отличную от исходной папки страницы - маневр, который обычно разрушает все ссылки на страница - Dreamweaver незаметно переписывает ссылок, чтобы они все еще работают. Еще лучше, используя управление сайтом программы инструментов, вы можете бесцеремонно реорганизовать свой сайт, не боясь файлы и папки, не нарушая тонких связей между файлы вашего сайта.(Вы узнаете об управлении сайтом Dreamweaver подробно рассматриваются в Части 4 этого книга.)

Корневые относительные ссылок, также называемые корневых ссылок сайта , опишите, как получить с одной страницы на другую в пределах одного и того же сайта, точно так же, как ссылки, относящиеся к документу. Однако в этом случае ссылка описывает путь относительно корневой папки сайта - папка, содержащая домашнюю страницу и все остальные страницы, папки, и файлы, из которых состоит ваш сайт.(Подробное описание корневую папку и структуру веб-сайта см. в главе 15.)

Представьте, что вы работаете в большом офисном здании. Скажите, что вам нужно получить в офис коллеги в том же здании, поэтому позвоните ей, чтобы направления. Она может не знать точного направления от вашего офиса. ей, но она может рассказать вам, как выйти из здания вход в ее офис. Поскольку вы оба знаете, где находится здание входная дверь есть, эти направления работают хорошо.Фактически, она может дать одинаковые направления ко всем остальным в здании, и поскольку все они знать, где вход, они тоже найдут ее офис. Думайте о офисном здании как о своем участке, а его входную дверь - как о корень вашего сайта. Корневые ссылки всегда начинаются с косой черты (/). Эта косая черта заменяет корневая папка - входная дверь - вашего сайта. Та же корневая относительная ссылка всегда ведет на одну и ту же страницу, независимо от того, где она находится на вашем Веб-сайт.

Если вы используете Dreamweaver для разработки всех своих веб-страниц, вы вероятно, не потребуются ссылки, относящиеся к корню, но они могут пригодиться. Например, предположим, вас попросили создать новую страницу для существующий веб-сайт. Ваш клиент дает вам текст, графику и список других страниц сайта, на которые эта страница должна ссылаться. Проблема в том, что ваш клиент не знает, где на сайте новый страница должна быть закрыта, и его веб-мастер не отвечает на ваши звонки.

К счастью, вы можете использовать корневые ссылки, чтобы решить эту проблему. дилемма. Поскольку эти ссылки работают независимо от того, где находится страница на вашем сайт, вы можете заполнить страницу и позволить клиенту поместить ее туда, где он принадлежит - и ссылки будут работать.

У корневых ссылок есть один серьезный недостаток: они не работают при тестировании. их на вашем собственном компьютере. Если вы просматриваете веб-страницу на своем жесткий диск компьютера, нажатие на ссылку, относящуюся к корневому каталогу, в браузере либо не работает или выдает только ошибку «Файл не найден».Корневые ссылки работают только если страницы, на которых они есть, находятся на веб-сервере. Это потому что технология, лежащая в основе веб-серверов, понимает ссылки, а на вашем персональном компьютере нет.

Одним из решений проблемы корневых ссылок является установка веб-сервер на вашем компьютере и поместите в него файлы вашего сайта. Это ваш подход при создании динамических сайтов, описанных в главе 21.

Примечание

Есть одно исключение из «корневых относительных ссылок, которые не превью правильно »дилемма.Dreamweaver предоставляет два способа предварительный просмотр веб-страницы: с временным файлом или без . Параметр временного файла имеет пара преимуществ: вы можете предварительно просмотреть страницу без необходимости сначала сохраните его, и вы сможете предварительно просмотреть на своем локальном компьютере любой связанные с корнем ссылки, которые вы создаете.

Чтобы включить эту функцию, перейдите в Edit → Preferences. (Dreamweaver → Настройки), нажмите «Предварительный просмотр в браузере» категории и установите флажок «Предварительный просмотр с использованием временного файла».За кулисами Dreamweaver тайно переписывает корень-родственник ссылки как ссылок относительно документа ссылок всякий раз, когда создает временный файл. Если вы видите на своем сайте файлы со странным такие имена, как TMP2zlc3mvs10.htm, это временные файлы Dreamweaver создает. Не стесняйтесь удалять их.

Если у вас нет особой причины использовать корневые ссылки (например, ваш ИТ-отдел говорит, что вы должны), лучше всего использовать ссылки, относящиеся к документу, для ваших страниц.Но имейте в виду это обсуждение. Позже в книге вы убедитесь, что функции управления сайтом Dreamweaver за кулисами используют относительные корневые пути для отслеживания ваших файлы сайта.

Примечание

У вас могут возникнуть проблемы с корневыми ссылками, если сайт, над которым вы работаете, находится в папке внутри сети корневая папка сервера. Например, ваш приятель дает вам место на своем веб-сервере. Он говорит, что вы можете поместить свой сайт в папку называется my_friend , поэтому ваш URL http: // www.my_buddy.com/my_friend/. В этом случае ваши веб-страницы не сидят в корне сайта - они в папке внутри корень. Таким образом, относительная корневая ссылка на ваша домашняя страница будет /my_friend/index.html. Dreamweaver умеет справиться с подобной ситуацией, но только если вы предоставите правильный URL вашего сайта - http: //www.my_buddy.com/my_friend/ - когда вы его установите вверх (см. Рисунок 4-1).

Рисунок 4-1. При настройке сайта в Dreamweaver вы можете определить URL-адрес сайта, даже если он находится в подпапке в корне папка - это фактический адрес сайта в Интернете.Разверните список параметров дополнительных настроек слева от настройки сайта щелкните категорию Local Info, а затем введите полный веб-адрес. адрес вашего сайта в поле URL-адрес. Вы также можете сказать Dreamweaver, какой тип ссылки - ссылка на документ или на сайт root-relative - следует использовать при создании ссылки на другую страницу на вашем сайте (обведено). Вы всегда можете вернуться в это окно, чтобы измените этот параметр: выберите «Сайт» → «Управление сайтами», выберите свой сайт, а затем щелкните Изменить.

Рисунок 4-2 показывает веб-сайт так, как он отображается на жестком диске: папки, заполненные HTML-документы и графика. Вот некоторые ссылки, которые вы могут найти на этих страницах и как они могут работать.

Рисунок 4-2. Вот несколько примеров ссылок на фиктивный веб-сайт. расположен по адресу http://www.nationalexasperator.com. Три стрелки показывают связи между исходной страницей (где каждый начинается стрелка) и страницу, на которую она указывает (где каждая стрелка заканчивается).

Ссылка с домашней страницы (Index.html) на страницу контактов (Contact.html)

Большинство веб-сайтов называют домашнюю страницу index.html или index.htm . Вы можете сделать ссылку с этой страницы на contact.html страница, обозначенная цифрой 1 на рисунке 4-2 - с использованием любого из три типа ссылок:

  • Абсолютный адрес ссылки : http: //www.nationalexasperator.com / contact.html. Что это означает: перейдите на сайт http://www.nationalexasperator.com и загрузите страница contact.html .

  • Ссылка на документ адрес : contact.html . Что это означает: искать в той же папке, что и текущая страница, и скачать страницу contact.html .

  • Корневая относительная ссылка адрес : / контакт.html . Что это означает: перейдите в папку верхнего уровня этого сайта и загрузите contact.html .

Совет

Если вы можете написать абсолютный URL, вы можете легко написать относительный к корню URL. Просто снимите http: // и имя веб-сервера. в пример выше, удалив http://www.nationalexasperator.com в абсолютный адрес оставляет / контакт.html - путь относительно корня.

Ссылка со страницы гороскопов на страницу Рыб

А теперь представьте, что вы создали веб-страницу, на которую хотите перейти. страницу в подпапке вашего сайта. Вот как вы могли бы использовать каждый из три типа ссылок для открытия документа, вложенного во вложенную папку (в этом Например, вложенная папка «2005»), обозначенная номером 2 на Рис. 4-2:

  • Абсолютный адрес ссылки : http: // www.nationalexasperator.com/horoscopes/2005/pisces.html. Что это означает: перейдите на сайт http://www.nationalexasperator.com, посмотрите в папка гороскопы , затем загляните в папка 2005 , а затем скачать страницу pisces.html .

  • Ссылка на документ адрес : 2005 / pisces.html . Какие это означает: с текущей страницы загляните в папку 2005 и скачать страницу рыб.html .

  • Корневая относительная ссылка адрес : /horoscopes/2005/pisces.html . Что это означает: перейдите в папку верхнего уровня этого сайта, посмотрите в папка гороскопы , затем загляните в папка 2005 , а затем скачать страницу pisces.html .

Ссылка со страницы Скорпиона на страницу гороскопов

Теперь предположим, что вы создаете веб-страницу, которая вложенная папка, и вы хотите, чтобы она ссылалась на документ за пределами эта папка, как и ссылка с меткой 3 на рисунке 4-2:

  • Абсолютный адрес ссылки : http: // www.nationalexasperator.com/horoscopes/horoscopes.html. Что это означает: перейдите на сайт http://www.nationalexasperator.com, посмотрите в папку гороскопы , и скачать страницу horoscopes.html .

  • Ссылка на документ адрес : ../horoscopes.html . Что это означает: подняться на один уровень выше текущего папку - и загрузите страницу гороскопов.html . В адресах веб-сайтов косая черта / представляет папку или каталог. Две точки (..) означает: «Перейти на один уровень вверх» в папку, содержит текущую папку. Итак, чтобы связать на страницу, которая находится на два уровня выше, например, чтобы перейти по ссылке с scorpio.html на главную ( index.html ) - вы должны использовать .. / дважды, вот так: ../../index.html .

  • Корневая относительная ссылка адрес : /horoscopes/horoscopes.html . Что это означает: перейдите в папку верхнего уровня этого сайта, посмотрите в папку гороскопы , и скачать страницу horoscopes.html .

Вкратце: используйте абсолютные URL-адреса для ссылки на страницы за пределами папки вашего сайта, используйте относительный документ ссылки на страницы на вашем сайте , и, если вы не знаете, что делаете (или ваш ИТ-отдел не сообщает вам что вам нужно), избегайте использования корневых ссылок все вместе.

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *