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


Оглавление (нажмите, чтобы открыть):

Учимся понимать разницу между относительными и абсолютными ссылками

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

Абсолютная ссылка

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

Относительная ссылка

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

Чем удобны относительные ссылки?

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

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

Если вы создаете сайт на основе CMS , в которой используется промежуточная среда с отдельным уникальным доменом ( будь то WordPress или SharePoint ), то он будет целиком дублироваться в этой промежуточной среде. Применение относительных ссылок позволяет одному и тому же сайту существовать, как на промежуточном, так и на рабочем домене. Это не только упрощает написание кода для разработчиков, но и позволяет сэкономить уйму времени.

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

В чем преимущества абсолютных ссылок?

  • Защита от скачивания

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

  • Защита от дублирования контента

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

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

  • Улучшенная стратегия внутренней перелинковки

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

Например: когда на странице http://www.example.com/category/xyz.html есть тег base href , который выглядит следующим образом:

, а затем на страницах используются относительные внутренние ссылки ( /category/abc.html ). Когда Google будет сканировать подобные внутренние ссылки, это приведет к ошибке 404 .

Этой ситуации можно избежать, если использовать абсолютные ссылки HTML .

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

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

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

Данная публикация представляет собой перевод статьи « What Is The Difference Between a Relative And an Absolute Url? » , подготовленной дружной командой проекта Интернет-технологии.ру

HTML Ссылки

Ссылки являются основой гипертекстовых документов, так как они позволяют перемещаться с одного сайта на другой простым щелчком мыши. Благодаря ссылкам веб-страница структурируется и связывается с другими разделами данного документа, что обеспечивает пользователям быстрое и удобное получение информации. В языке HTML для создания ссылки применяется элемент , так называемый якорь (от англ. anchor). Чтобы превратить выделенный текст в ссылку, поместите его между открывающим и закрывающим тегами &#8212 и с помощью атрибута href (сокращение от hypertext reference (гипертекстовая ссылка)) укажите URL (Universal Resource Locator, универ-сальный указатель ресурса), иными словами, адрес страницы, на которую будет осуществляться переход. URL-адрес обязательно должен быть заключен в кавычки. Если вы хотите, чтобы при щелчке по ссылке ничего не происходило, что бывает необходимо при обучении, то в качестве значения атрибута href можно указать знак диез — (#).

В следующем примере показано создание ссылки на веб-сайт «wm-school»:

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

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

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

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

Абсолютный URL-адрес содержит обозначение протокола (http:// или https://), имя сайта (например, wm-school.ru), путь к файлу, а также имя файла (например, file.html). Между протоколом и именем сайта может идти префикс www:

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

В следующем примере показано создание абсолютной ссылки на сторонний веб­ресурс:

В данном примере ссылка вида Перейти на сайт wm-school является абсолютной и ведет на главную страницу сайта wm-school.ru. Если при указании в качестве ссылки доменного имени не указано имя файла, тогда по умолчанию отображается индексный файл (как правило index.html).

Относительный URL-адрес

Относительные ссылки могут быть использованы только для того, чтобы создать ссылку на страницу с этого же сайта, в то время как абсолютные ссылки, как правило, применяются для создания ссылки на другие сайты. Относительные URL-aдpeca представляют собой сокращенную версию абсолютных, при создании ссылок на другие страницы внутри одного и того же сайта нет необходимости указывать в URL­aдpece доменное имя. Относительная ссылка описывает путь к указанному документу относительно местоположения веб-страницы, на которой находится ссылка. Возможны следующие варианты:

Создание ссылок в пределах одного каталога

Если нужная веб-страница находится в той же папке, что и страница, содержащая ссылку, то в URL-адресе достаточно указать только имя файла. К примеру, с веб-страницы, расположенной по адресу http://mysite.ru/animals/home/edit.html, нужно перейти на http://mysite.ru/animals/home/default.html, то ссылка будет такой:

Создание ссылки на документ, находящийся одним каталогом ниже

Если с веб-страницы, расположенной по адресу http://mysite.ru/animals/home/edit.html, нужно перейти на http://mysite.ru/animals/home/wild/message.html, то ссылку можно указать так:

Создание ссылки на вышестоящий каталог

Если с веб-страницы, расположенной по адресу http://mysite.ru/animals/home/edit.html, нужно перейти на http://mysite.ru/animals/index.html, то ссылка будет такой:

СОЗДАНИЕ ССЫЛКИ НА ФАЙЛ, РАСПОЛОЖЕННЫЙ ДВУМЯ УРОВНЯМИ ВЫШЕ

При переходе с http://mysite.ru/ animals/home/wild/message.html на http://mysite.ru/animals/index.html, — ссылка будет такой:

Совет: Глядя на рис.1 вы легко поймете, что двигаясь от «родителя» к «дочке» нужно ставить точки, соответственного двигаясь к «внучатой» эти точки нужно ставить дважды и т.д.

Ссылка на адрес электронной почты

Почтовая ссылка (mailto) &#8212 это специальный вид ссылки, помогающий пользователям отправить сообщение для вас. Если в ссылке задействовать протокол mailto, ее можно связать с электронным адресом. Создание ссылки на адрес электронной почты делается почти также как и ссылка на веб-страницу. Значение атрибута href должно начинаться со слова mailto:, после которого необходимо указать адрес электронной почты, на который посетитель должен будет отправить свое письмо.

В следующем примере показано создание ссылки на адрес электронной почты:

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

Правила написания URL

При создании ссылок важно придерживаться следующих правил во избежание распространенных ошибок:

  • При создании ссылок не используйте обратный слеш (\), такая ошибка делает ваши ссылки нерабочими. В сетевых URL-адресах используется только прямой слеш (/). В операционной системе Windows обратный слэш используется при указании пути к файлам на компьютере (например, D:\Images\elefant.png).
  • Не начинайте URL-адрес ссылки с названия диска вашего компьютера (C:, D: и т. д.). Ссылки между страницами документа будут работать, пока он находится на локальном сервере, но когда вы поместите свой сайт на удаленный веб-сервер, эти ссылки перестанут работать.
  • Абсолютный URL-адрес, обязательно должен начинаться с обозначения протокола http:// или https://.
  • Не используйте в качестве URL-адреса файловые пути. С помощью протокола file можно создать ссылку на файл, расположенный на вашем компьютере (например, file:///D:/Themes/lessons.html). Но такая ссылка не будет работать в веб-сети или на других компьютерах.
  • Не применяйте в именах файлов и папок пробелы или специальные символы, даже если это допустимые символы. Например, при запросе документа с именем файла «Web Master.html» браузером будет преобразован пробел в специальный символьный код (%) т.е. Web%20Master.html. Используйте в именах файлов только цифры, литеры, дефис (-) и подчеркивание (_).
  • Любая ссылка &#8212 это встроенный элемент, поэтому нельзя размещать внутри элемента блочные элементы, но можно помещать ссылку в блочный элемент-контейнер.

Открытие ссылок в новом окне

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

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


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

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

Атрибут target может принимать следующие значения:

Значение Описание
_blank Открыть страницу в новом окне или вкладке.
_self Открыть страницу в том же окне (это значение задается по умолчанию).
_parent Используется при работе с фреймами и позволяет открыть страницу в родительском фрейме; если на текущей странице нет фреймов, то это значение работает как _self.
_top Применяется при работе с фреймами и позволяет открыть страницу в полном окне браузера, заменяя собой все фреймы, которые были на странице; если на текущей странице нет фреймов, то это значение работает как _self.
framename Открыть страницу в новом окне с именем framename.

Всплывающая подсказка для ссылки

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

Создание ссылки на определенную позицию страницы

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

Шаг 1: Создание закладки на странице

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

Наша закладка будет выглядеть следующим образом:

По сути вы создали закладку, зафиксированную на заголовке «Абсолютный URL-адрес».

Шаг 2: Создание ссылки на закладку

Для создания ссылки на элемент с установленным значением атрибута > , значение атрибута href которого должно начинаться с хеш-символа (#), после которого нужно указать значение атрибута id отмеченного элемента. Далее создадим ссылку, отправляющую читателя к закладке с именем absolut на текущей странице:

Данная ссылка ссылается на элемент

Теперь, если щелкнуть мышью по ссылке: Перейти к «Абсолютный URL-адрес», браузер отправит вас к разделу, начинающемуся с заголовка «Абсолютный URL-адрес».

Создание ссылки на фрагмент другого документа

Чтобы создать ссылку на определенную часть другой страницы, находящуюся в другом документе (на вашем или стороннем сайте), нужно в конец URL-адреса страницы добавить значение атрибута id нужного элемента, разделив их символом (#). Например, ссылка на заголовок «Всё о слонах» на странице из другого документа в том же каталоге будет выглядеть следующим образом:

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

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

Пример создания ссылки на закладку из другой веб-страницы:

В данном примере первая ссылка ведет на файл html_code_elements.html, расположенный на сайте в том же каталоге, при открытии этого файла происходит переход на закладку с именем kbd. Вторая ссылка на файл nature.html, расположенный на другом сайте (worldanimals.com), при открытии этого файла происходит переход на закладку с именем hippo.

Изображения-ссылки

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

При наведении указателя мыши на картинку в ссылке указатель превращается в кисть руки.

Открытие ссылок в новом окне

Измените код так, чтобы ссылка открывала страницу в новом окне браузера.

Что такое абсолютные и относительные ссылки

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

Абсолютные ссылки – это полный путь к необходимому объекту, включая протокол http:// или https:// и доменное имя сайта. Пример – http://site.ru/images/img.png

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

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

Пример ссылки вне зависимости от домена — /images/img.png
Пример ссылки вне зависимости от протокола — //site.ru/images/img.png

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

Правильные относительные ссылки

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

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

Рассмотрим несколько примеров самых обычных расположений файлов. Дальше можно будет просто опираться на схему и указывать путь в более сложное нахождение объектов.

Пояснение: для примера у нас есть главная папка. В этой папке содержится еще одна папка и в ней находится исходный документ – html файл. В этом файле есть ссылка, которая должна вести на объект, который находится в самой первой папки, она же главная папка. Таким образом, путь к объекту должен начинать с двоеточия и слэша ../ . По сути, две точки означают что нужно выйти из текущей папки на одну ступень выше.

Дальше уже можно по логике прописывать правильный путь. То есть если две папки, то дважды такая конструкция и т.д. Еще пару примеров для полной ясности.

Абсолютная ссылка

Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

Такой URL содержит в себе все элементы без сокращений. Если относительный тип имеет простую форму вида /page1.html, то полный – http://www.page.com/page1.html.
Рассмотрим, чем отличается абсолютная ссылка от относительной и как её используют.

Отличие абсолютной ссылки от относительной

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

На сайтах разница в том, что абсолютная ссылка – это полный адрес ресурса, относительная – часть этого же url. Основное отличие относительной ссылки от абсолютной – URL-адрес. Абсолютная ссылка начинается с протокола передачи данных – HTTP или HTTPS. Далее указывается имя домена. Рассмотрим пример абсолютной ссылки в HTML:

В таком виде конструкция вставляется в HTML код страницы. Один из недостатков этого вида ссылки – длина. Из-за большого количества элементов код становится громоздким. Поэтому в некоторых случаях используются относительные адреса.

Чтобы получить относительную ссылку, нужно немного изменить и сократить структуру кода. Убираем из него протокол передачи данных (HTTP или HTTPS) и доменное имя. Тогда ссылка будет выглядеть так:

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

Для чего нужны абсолютные ссылки на сайте

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

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

Специалисты студии SEMANTICA проведут комплексный анализ сайта по следующему плану:

– Технический аудит.
– Оптимизация.
– Коммерческие факторы.
– Внешние факторы.

Мы не просто говорим, в чем проблемы. Мы помогаем их решить

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

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

Разберемся, что из себя представляет каждая ссылка в отдельности.

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

С абсолютными ссылками все просто — они должны начинаться с протокола http:// (https://), далее должно идти название домена сайта (ваш-сайт.ru) и сама ссылка. Пример: http://ваш-сайт.ru/index.html . Если речь идет о подключении ресурса, то ссылка может выглядеть так:
.

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


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

Предположим у нас есть такая древовидная структура документов:

корень сайта (public_html)
— css (папка)
— style.css (файл стилей)
— fon.jpg (файл картинки)
index.html (главный файл сайта)

В index.html мы подключим css относительной ссылкой:

А style.css нам нужно подключить фон (fon.jpg). Это можно сделать двумя способами:
— background: url(«/css/fon.jpg»); (относительный путь от корня сайта)
— background: url(«fon.jpg»); (относительный путь от директории файла style.css)

Также есть и другие варианты работы с относительными путями. Например:
href=» ../css/style.css » — здесь ../ поднимает нас на папку выше, если написать ../../ — то поднимет на 2 папки выше относительно текущего документа

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

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

Ссылки в HTML. Якоря в HTML. Виды HTML навигации. Пути ссылок в HTML

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Ссылка — один из самых важных элементов веб-страницы, при помощи ссылок посетители могут перемещаться по сайтам, ссылки мы используем, чтобы делиться информацией, найденной в интернете с другими людьми. В общем, если бы в HTML не было ссылок, то их обязательно придумали, иначе сейчас мы бы не пользовались сетью Интернет.

Ссылки в HTML. Якоря в HTML. Виды HTML навигации. Пути ссылок в HTML

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

Применение ссылок в HTML

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

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

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

Итак, подведем промежуточные итоги. Ссылки в HTML используются для создания навигации, как постраничной (в этом случае ссылки называют HTML якорем), так и межстраничной.

Виды ссылок в HTML

Вне зависимости от того, к какому виду относится HTML ссылка, она формируется при помощи специального HTML тэга . Данный тэг является парным HTML тэгом с обязательным закрывающим тэгом. Элемент ссылки является строчным HTML элементом. Общий синтаксис создания HTML ссылок можно записать следующим образом:

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

Но HTML ссылки можно разделить еще и на абсолютные и относительные. Абсолютные ссылки содержат абсолютные URL (такие URL не зависят от своего физического расположения и работают везде), например URL главной страницы моего сайта ZametkiNaPolyah.ru является абсолютным и доступен с любого компьютера, подключенного к сети Интернет, по HTTP протоколу. Относительные адреса HTML ссылок строятся относительно какой-нибудь физической области на жестком диске, например, относительно корня сайта или относительно корня диска C, можно даже относительно какой-нибудь отдельной папки.

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

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

Атрибуты HTML ссылок

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

  1. Атрибут accesskey. Позволяет активировать HTML ссылку при помощи определенных комбинаций клавиш, которые указываются в данном атрибуте.
  2. Атрибут coords. Позволяет установить координаты активной области HTML ссылки внутри тэга .
  3. Атрибут download. Позволяет сказать браузеру, что данная ссылка является ссылкой на скачивание.
  4. Атрибут href. При помощи этого атрибуты мы можем указать путь, по которому ведет HTML ссылка.
  5. Атрибут hreflang. Этот атрибут определяет язык документа, на который ведет HTML ссылка.
  6. Атрибут name. При помощи данного атрибута мы указываем имя HTML якоря.
  7. Атрибут rel. При помощи атрибут rel мы указываем в каком отношение находится ссылаемая HTML страница, с текущей (на которой находится пользователь).
  8. Атрибут rev. Данный атрибут позволяет задать отношение между текущим документом и тем документом, на который ведет HTML ссылка.
  9. Атрибутs shape Изображения в HTML могут быть ссылками, данный атрибут поможет вам задать область HTML изображения, которая является ссылкой.
  10. Атрибут tabindex. Не у всех ваших посетителей есть мышка, поэтому можно задать порядок получения фокуса HTML ссылки при помощи данного атрибута, чтобы посетителю было удобнее пользоваться вашим сайтом.
  11. Атрибут target. Данный атрибут позволяет указать имя окна или фрейма, куда браузер будет загружать документ, указанный по ссылке.
  12. Атрибут title Полезный атрибут, который позволяет создать подсказку при наведении курсора мыши на HTML ссылку.
  13. Атрибут type Этот атрибут служит для указания MIME-типа документа, на который ведет ссылка.

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

Внешние ссылки в HTML. Межстраничная навигация по сайту

Начнем с самого простого – с внешних HTML ссылок или с ссылок, которые ведут на другие страница сайта. Обычно такие ссылки используются для создания меню на сайте или для организации внутренней перелинковки сайта. Мы уже упоминали, что любая ссылка имеет атрибут href, который служит для указания пути к документу. Давайте создадим простой пример HTML ссылки:

Блог Алeксандра Сергиенко

Приветствую, всех читателей блога int-net-partner.ru! Эту статью можно назвать продолжением статьи о УРЛ-адресах. Будем разбираться в том, что же такое абсолютные и относительные ссылки для сайта.

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

Адрес страницы начинается с http:// и заканчивается .html , а строка «Первые доходы на инвестировании» — анкор, мы будем видеть только текст и при нажатии на него перейдём на страницу сайта.

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

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

Таким образом самый короткий относительный путь получается, когда web-документ, относительно которого проставляется ссылка (донор) и web-документ, на который она ведёт (акцептор) находятся в одном месте, в одной папке на хостинге:

Таким образом относительная ссылка будет состоять только из названия акцептора:

А если акцептор находится в папке, которая расположена в одной директории с файлом-донором?

Всё так же просто:

Получается, что нужно прописать имя папки, в которой находится файл-акцептор, потом через»/»(слеш) имя документа или файла.

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

Тогда вид относительной ссылки примет вид:

Как видите, для таких случаев придумали специальный элемент «. /», а если нужно по на несколько уровней выше, например на два?

Тогда добавляем ещё такой же элемент:

Давайте разберём ещё одну ситуацию: файл-акцептор находится на 2 уровня выше в какой-то папке, в данном случае «primer-2»:

А вот такой вид примет относительная ссылка:

Все вышеприведённые примеры ссылок были написано относительны файла-донора. А если ссылки брать относительно корневой папки (в той, где лежит сайт на хостинге)? Корневая папка в обозначении относительных путей выглядет так: «/». Да, одиночный, прямой слеш=)

А вот так будет выглядеть относительная ссылка при переходе на главную страницу сайта:

Таким образом, можно значительно сокращать гиперссылки относительно корневой папки сайта:

А вот, что получилось после сокращения:

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

Как правильно ссылаться на папку?

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

Но не в коем случае не оставлять так:

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

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

А на этом статью буду заканчивать, спасибо за внимание и до скорых встреч в новых статьях!

Напоследок весёлое видео:

Как вам статья? Рекомендую получать свежие статьи блога на e-mail , чтобы не пропустить много новой интересной информации!

Рекомендую прочесть следующие полезные статьи:

Какие ссылки использовать внутри сайта, относительные или абсолютные


Какие ссылки использовать внутри сайта, относительные или абсолютные

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

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

В данном примере, мы использовали относительную ссылку, где pagename.html это страница на которую Вы перейдете при нажатии на page about car . Вы можете увидеть, что данная ссылка не имеет полного адресса (полный веб адрес включает в себя атрибуты http://www).

Вот несколько примеров относительных и абсолютных ссылок:

Относительные ссылки:

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

  • http://www.mysite.com
  • http://www.mysite.com/graphics/image.jpg
  • http://www.mysite.com/main-folder/folder/file.html

Первое отличие можно увидеть в том, что абсолютные ссылки всегда включают доменное имя веб-сайта, в том числе http://www, в то время как относительные ссылки указывают только на файл или путь к файлу.

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

Рассмотрим более подробно, в чем все же состоит преимущество относительной ссылки над абсолютной, какие между ними различия и какую из них целесообразнее использовать?

Абсолютные ссылки хороши по таким свойствам:

  • активные ссылки при автоматическом копировании полностью переносятся на сайт копировщика;
  • поисковые системы точнее определяют главное зеркало сайта;
  • корректная работа в RSS ридерах;
  • страница загружается намного быстрее, если применяются размещенные на стороннем сервере файлы;
  • нет проблем с rel=«canonical».
  • безопаснее при взломе сайта
  • более безопаснее при переходе на новую CMS
  • лучше использовать при распространении контента по электронной почте

Положительные черты относительных ссылок без протокола:

  • при использовании http: и https: проблем с протоколами нет;
  • Google советует пропускать протокол.

Относительные ссылки без имени хоста имеют такие плюсы:

  • при переносе на другой домен не нужно менять путь во внутренних ссылках;
  • не возникает сложностей в случае расположения сайта на нескольких доменах.
  • делает код HTML короче, что также влияет на скорость загрузки сайта.
  • короткий URl

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

  • дают возможность протестировать сайт, не подключаясь к Интернету;
  • объект переносится в папки проще.

Заключение:

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

Что такое URL адреса, чем отличаются абсолютные и относительные ссылки для сайта

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

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

Но нам этого и не нужно, ибо достаточно понимать структуру URL в ее прикладном применении.

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

Урл адреса — что это и как они влияют на индексацию сайта

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

URL и URI

Ну так вот, любой документ (вебстраница) в сети интернет имеет свой уникальный адрес URL, который расшифровывается как Uniform Resource Locator (определитель местонахождения ресурса). Он, равно как и протокол HTTP, а еще и как язык Html с валидатором W3C, был разработан и создан одним и тем же человеком — Тимом Бернерсом-Ли (отцом основателем проекта Всемирная паутина WWW — World Wide Web).

По большому счету URL является частным случаем другого идентификатора под названием URI (Uniform Resource Identifier — унифицированный идентификатор ресурса), но нам с вами все эти тонкости, скорее всего, будут не нужны (излишни) при работе со своим сайтом. Давайте попробуем в общих чертах разобраться с тем, что это такое и из каких частей он состоит, а потом перейдем к относительным и абсолютным ссылкам.

URL адрес — это способ однозначно указать на что-то в интернете. Он используется не только для работы с сайтами (что это?) по протоколу http (еще и по ftp), но нас, конечно же, будет интересовать именно применение этого идентификатора к Web (протоколы http и https). Урл в этом случае будет выглядеть примерно так (чуть ниже я приведу общую блок-схему его построения, но пока хотелось бы начать с простого частого примера):

В этом примере адреса часть с «http» обозначает протокол передачи данных или же, если следовать терминологии спецификации, схему (ибо тот же mailto не является протоколом передачи данных, в отличии от http или ftp, но тоже используется в Урл адресах). Далее в приведенном примере следует «ktonanovenkogo.ru» (или же это может быть «www.ktonanovenkogo.ru») — это так называемое доменное имя или же имя узла (хоста).

WWW и другие зеркала сайта, которые нужно склеить

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

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

Тоже справедливо и при переезде сайта на защищенный протокол https с http — для поисковиков это будет уже другой сайт.

Ничего плохого в использовании WWW в URL сайта нет, но нужно четко определить главное зеркало (через Яндекс Вебмастер и через Гугл Вебмастер, а также через прописывание директивы Host в файл robots.txt вашего сайта), которое будет индексироваться поисковиками и которое будет участвовать в ранжировании.

У меня, например, главное зеркало — это «ktonanovenkogo.ru», т.е. «без атавизма», и если вы добавите к любому моему Урлу эту чудо-приставку, то произойдет автоматическое перенаправление на адрес «без WWW».

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

Например, на рег.ру можно посмотреть свободные для регистрации потенциальные зеркала или освобождающиеся домены (можете вводить предполагаемое имя домена прямо в приведенную ниже форму):

Откуда берутся лишние URL-адреса (дубли страниц) вашего сайта в индексе поисковиков

Но вернемся к нашим баранам. Та часть URL, которая расположена за третьим слешем (/) — в нашем примере это «papka/fail.html» — называется путем до конкретного объекта (документа или файла). В нашем случае это документ «fail.html», который лежит в каталоге «papka», который в свою очередь лежит в корневой папке (корень в Урле всегда соответствует третьему слешу слева).

Но это еще не все, что может быть записано в адресе. Посредством URL различные CMS (системы управления контентом) передают так называемые GET параметры, которые добавляются в самый его конец после простановки знака вопроса, например, так:

Вся беда в том, что для поисковых систем два таких URL адреса (с и без Get параметров) являются абсолютно разными веб документами и каждый из них будет проиндексирован поисковиками.

К одному и тому же Урлу может добавляться вашей Cms сколько угодно много различных Get параметров и все это будет проиндексировано Яндексом и Гуглом, если вы не создадите соответствующие запреты в файле robots.txt, ссылка на статью про который приведена чуть выше. В противном случае поисковики вас могут пессимизировать за большое количество дублированного контента (одного и того же содержимого, доступного по разным адресам).

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

(даже по трем — еще и https://ktonanovenkogo.ru/) и в любом случае откроется главная страница. Это довольно плохо, т.к. поисковики найдут у меня три разных страницы (имеющих с их точки зрения разные URL адреса), но с одинаковым содержанием, что им, ох как не нравится.

Поэтому у меня сделано так, что при вводе любого из приведенных чуть выше Урлов будет выполнено перенаправление на URL вида «https://ktonanovenkogo.ru/». Делается это, как правило, с помощью 301 редиректа в файле .htaccess, либо напрямую в настройках сервера вами самими, либо вашим хостером.


Гораздо больше информации про зеркала сайта и их склейку читайте в приведенной по ссылке публикации.

Структура Урл адреса и перекодировка в URL-encoded

Вообще, полную блок-схему URL адреса можно представить так:

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

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

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

Урл адреса в виде хеш-ссылок, открывающие страницу в нужном месте

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

Якоря заранее проставляются внутри Html кода документа (страницы) с помощью добавление атрибута в нужный Html тег (абзаца, заголовка или другой подходящий), а затем, добавив название этого якоря к URL адресу страницы через символ решетки «#», вы сможете перейти не на начало этой вебстраницы, а сразу к тому месту, где был проставлен якорь (все современные веб браузеры автоматически прокрутят страницу до нужного места).

Выглядеть хеш-ссылка может так (в тексте страницы проставлен якорь «url-1»):

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

Какие символы можно использовать в URL адресах?

Еще стоит сказать о различных кодировках, которые используются в URL адресах. Без перекодирования в них можно использовать только ограниченное количество символов. Обычно советуют ограничиться набором из символов: [0-9],[a-z],[A-Z],[_],[-].

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

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

Что опечаливает, так это неудобоваримый вид URL адресов с символами, например, кириллицы, которые получаются после перекодировки. Каждый символ кириллицы кодируется с помощью двух байт в Юникоде (UTF-8), записанных в шестнадцатеричном виде и разделенных знаком процента «%». Например, такой Урл:

после перекодировки станет таким:

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

В связи со всем вышесказанным я бы советовал при использовании ЧПУ на своих CMS не делать адреса страниц на русском, а использовать транслитерацию, тем более, что по мнению многих продвиженцев так будет лучше в плане Seo оптимизации под Яндекс и Google.ru.

Относительные и абсолютные ссылки на сайте

Давайте начнем с абсолютных ссылок, т.к. в этом случае ничего особенного, сверх того, что мы уже обсудили в данной статье, говорить и не придется. Т.о. абсолютная ссылка должна соответствовать тем требованиям, которые мы предъявляем к URL адресу — должен указываться протокол передачи данных, доменное имя сайта (хоста) и путь до нужного web документа. Все.

В Html абсолютная ссылка формируется с помощью специальных тегов A (гиперссылки), т.е. для ее проставления мы просто должны будем окружить открывающим и закрывающим тегами гиперссылки нужное место в тексте документа (фразу или картинку) и прописать в открывающем теге A в атрибуте «Href» абсолютный путь до того документа, на который должен будет попасть посетитель при переходе по ней:

Все очень просто.

Чем хороши относительные ссылки и как их можно получить

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

  1. Относительные ссылки по определению более короткие и не загромождают, не утяжеляют код сайта (ведь в этом деле важна любая мелочь).
  2. Кроме того, при переезде на другой домен или при смене протокола на https вам не придется менять все ссылки на сайте.
  3. К тому же, некоторые конструкции интернет проекта можно будет очень быстро и безболезненно перенести на другой ресурс, не изменяя при этом внутренние относительные ссылки.

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

Создаем относительные ссылки относительно документа, из которого они проставляются

Самый простой и короткий вариант записи относительного пути (имеется в виду значения атрибута Href тега гиперссылки) получится в том случае, когда оба web документа: донор (с которого она проставляется) и акцептор (файл или web документ, на который она ведет), находятся в одной папке на сервере.

Тогда относительная ссылка будет представлять из себя лишь название web документа акцептора:

Теперь давайте предположим, что документ акцептор лежит в папке, которая расположена в одной директории с документом донором.

Как в этом случае будет выглядеть относительная ссылка? Все тоже довольно просто:

Пока, думаю, что все понятно — прописываем путь до файла или документа акцептора (название папки, а через прямой слеш «/» имя файла или документа). Т.е. нам для того, чтобы попасть от донора к акцептору, нужно будет открыть папку, название которой мы и указываем в относительной ссылке.

Теперь давайте рассмотрим противоположную ситуацию, когда внутри папки лежит сам документ донор, с которого нужно проставить относительную ссылку на документ или файл акцептор, который уже лежит на уровень выше:

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

Если вам понадобится подняться на два уровня вверх, то запись будет иметь вид:

Ну, а если после этого для прописывания относительного пути до акцептора вам нужно будет еще войти в какую-либо папку на втором верхнем (относительно документа донора) уровне:

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

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

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

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

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

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

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

А относительный до того же самого файла будет уже несколько короче:

Как сослаться на папку в относительном и абсолютном виде

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

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

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

Обязательно закройте эту уязвимость, если обнаружите.

Что такое url адреса, чем отличаются абсолютные и относительные ссылки для сайта

Абсолютные и относительные ссылки в HTML | Создание сайтов и заработок в сети

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

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

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

Все гиперссылки, создаваемые средствами HTML, можно классифицировать по тем или иным признакам. Чем же отличается абсолютная ссылка от относительной? Прежде всего, по виду URL адреса, выступающего в качестве обязательного атрибута href тега a.

Урл в абсолютной гиперссылке обязательно начинается с наименования протокола передачи данных (для примера мы будем использовать HTTP, поскольку он наиболее распространен и применяется на большинстве сайтов) и включает имя домена (что означает этот термин?).

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

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

Если представленный выше пример абсолютной гиперссылки немного модифицировать, убрав «http://» и доменное имя, то как раз получится образец относительной ссылки:

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


В соответствии с предоставленным выше скриншотом вы, полагаю, уже поняли следующее. Если файл (в нашем примере file2.html) входит напрямую в состав корневой папки, то путь к нему относительно корня (site.ru) примет такой вид:

Здесь самый первый слеш «/» заменяет название корневой директории «site.ru/». То есть, при создании перехода на главную страницу сайта с любой его вебстраницы можно вполне использовать вот такую короткую конструкцию:

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

Теперь давайте рассмотрим еще несколько случаев создания линков относительно текущего документа (не корня сайта). Во всех случаях требуется указывать значение атрибута href, недаром он считается обязательным. Здесь один из файлов будет донором (с которого проставлена ссылка), а другой акцептором (на который ведет гиперссылка).

1. Файлы расположены в одной папке:

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

2. Файлы находятся в разных директориях, причем документ, на который нужно сослаться, располагается внутри каталога, находящегося в одной папке, содержащей донор:

Тогда при создании относительной гиперссылки следует дополнительно прописать название директории с акцептором:

Ежели целевой файл, на который указывает ссылка, находится еще на уровень ниже относительно донорского документа в иерархической структуре (например, расположен в catalog3, который вложен в catalog2), то путь будет таким:

Ну и так далее, в зависимости от количества вложенных друг в друга директорий.

3. Теперь разберем обратную ситуацию, когда документ-акцептор располагается на уровень (или несколько) выше донорского файла:

При таком раскладе перед именем файлика необходимо поставить слэш «/» и двоеточие, означающее, что акцептор расположен на один уровень выше:

Если документ, на который ссылаются, находится на два уровня выше (скажем, донорский документ пребывает в папке catalog3, которая вложена в catalog2), то HTML код относительной гиперссылки примет следующий вид:

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

4. Есть еще вариант, когда акцептор и донор расположены в разных папках одного уровня:

Для того, чтобы сформировать относительный гиперлинк, нужно перейти на уровень выше (catalog), а в пути указать директорию документа, на который будем ссылаться:

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

Если разница 1 уровень, то относительной ссылкой является такая:

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

Ежели в качестве целевого объекта абсолютной или относительной ссылки указать не файл, а всю директорию, то в конце URL желательно прописывать слеш:

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

То серверный обработчик сначала начнет поиски файла «uploads», именно в таком виде (без расширения), а уже затем отыщет папку с таким именем. Посему, проставив сразу же слеш, вы сэкономите ресурсы сервера, на котором располагается сайт.

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

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

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

Что касается главной страницы, то абсолютная ссылка на нее включает имя домена, которое является названием корневой папки в соответствии с файловой структурой сайта на сервере:

Образец относительного линка в отношении главной я уже приводил, но повторю еще раз:

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

Что такое URL адреса, чем отличаются абсолютные и относительные ссылки для сайта, создание, продвижение и заработок на сайте

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

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

Но нам этого и не нужно, ибо достаточно понимать структуру URL в ее прикладном применении.

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

Урл адреса — что это и как они влияют на индексацию сайта

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

Ну так вот, любой документ (вебстраница) в сети интернет имеет свой уникальный адрес URL, который расшифровывается как Uniform Resource Locator (определитель местонахождения ресурса).

Он, равно как и протокол HTTP, а еще и как язык Html с валидатором W3C, был разработан и создан одним и тем же человеком — Тимом Бернерсом-Ли (отцом основателем проекта Всемирная паутина WWW — World Wide Web).

По большому счету URL является частным случаем другого идентификатора под названием URI (Uniform Resource Identifier — унифицированный идентификатор ресурса), но нам с вами все эти тонкости, скорее всего, будут не нужны (излишни) при работе со своим сайтом. Давайте попробуем в общих чертах разобраться с тем, что это такое и из каких частей он состоит, а потом перейдем к относительным и абсолютным ссылкам.

URL адрес — это способ однозначно указать на что-то в интернете.

Он используется не только для работы с сайтами (что это?) по протоколу http (еще и по ftp), но нас, конечно же, будет интересовать именно применение этого идентификатора к Web (протоколы http и https).

Урл в этом случае будет выглядеть примерно так (чуть ниже я приведу общую блок-схему его построения, но пока хотелось бы начать с простого частого примера):

В этом примере адреса часть с «http» обозначает протокол передачи данных или же, если следовать терминологии спецификации, схему (ибо тот же mailto не является протоколом передачи данных, в отличии от http или ftp, но тоже используется в Урл адресах). Далее в приведенном примере следует «ktonanovenkogo.ru» (или же это может быть «www.ktonanovenkogo.ru») — это так называемое доменное имя или же имя узла (хоста).

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

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

Тоже справедливо и при переезде сайта на защищенный протокол https с http — для поисковиков это будет уже другой сайт (ниже приведено видео с объяснением, когда лучше склевать такие зеркала).

Ничего плохого в использовании WWW в URL сайта нет, но нужно четко определить главное зеркало (через Яндекс Вебмастер и через Гугл Вебмастер, а также через прописывание директивы Host в файл robots.txt вашего сайта), которое будет индексироваться поисковиками и которое будет участвовать в ранжировании.

У меня, например, главное зеркало — это «ktonanovenkogo.ru», т.е. «без атавизма», и если вы добавите к любому моему Урлу эту чудо-приставку, то произойдет автоматическое перенаправление на адрес «без WWW».

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

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

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

Например, на рег.ру можно посмотреть свободные для регистрации потенциальные зеркала или освобождающиеся домены (можете вводить предполагаемое имя домена прямо в приведенную ниже форму):

Откуда берутся лишние URL-адреса (дубли страниц) вашего сайта в индексе поисковиков

Но вернемся к нашим баранам. Та часть URL, которая расположена за третьим слешем (/) — в нашем примере это «papka/fail.html» — называется путем до конкретного объекта (документа или файла). В нашем случае это документ «fail.html», который лежит в каталоге «papka», который в свою очередь лежит в корневой папке (корень в Урле всегда соответствует третьему слешу слева).

Но это еще не все, что может быть записано в адресе. Посредством URL различные CMS (системы управления контентом) передают так называемые GET параметры, которые добавляются в самый его конец после простановки знака вопроса, например, так:

Вся беда в том, что для поисковых систем два таких URL адреса (с и без Get параметров) являются абсолютно разными веб документами и каждый из них будет проиндексирован поисковиками.

К одному и тому же Урлу может добавляться вашей Cms сколько угодно много различных Get параметров и все это будет проиндексировано Яндексом и Гуглом, если вы не создадите соответствующие запреты в файле robots.

txt, ссылка на статью про который приведена чуть выше.

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

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

(даже по трем — еще и http://ktonanovenkogo.ru/) и в любом случае откроется главная страница. Это довольно плохо, т.к. поисковики найдут у меня три разных страницы (имеющих с их точки зрения разные URL адреса), но с одинаковым содержанием, что им, ох как не нравится.

Поэтому у меня сделано так, что при вводе любого из приведенных чуть выше Урлов будет выполнено перенаправление на URL вида «http://ktonanovenkogo.ru/». Делается это, как правило, с помощью 301 редиректа в файле .htaccess, либо напрямую в настройках сервера вами самими, либо вашим хостером.

Гораздо больше информации про зеркала сайта и их склейку читайте в приведенной по ссылке публикации.


Вообще, полную блок-схему URL адреса можно представить так:

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

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

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

Урл адреса в виде хеш-ссылок, открывающие страницу в нужном месте

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

Якоря заранее проставляются внутри Html кода документа (страницы) с помощью добавление атрибута >

Выглядеть хеш-ссылка может так (в тексте страницы проставлен якорь «url-1»):

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

Еще стоит сказать о различных кодировках, которые используются в URL адресах. Без перекодирования в них можно использовать только ограниченное количество символов. Обычно советуют ограничиться набором из символов: [0-9],[a-z],[A-Z],[_],[-].

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

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

Что опечаливает, так это неудобоваримый вид URL адресов с символами, например, кириллицы, которые получаются после перекодировки. Каждый символ кириллицы кодируется с помощью двух байт в Юникоде (UTF-8), записанных в шестнадцатеричном виде и разделенных знаком процента «%». Например, такой Урл:

после перекодировки станет таким:

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

В связи со всем вышесказанным я бы советовал при использовании ЧПУ на своих CMS не делать адреса страниц на русском

HTML: Абсолютные и относительные ссылки

  • Относительный путь
  • Абсолютный путь

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

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

Все ссылки можно также условно разделить на относительные и абсолютные. Относительные ссылки – это 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 адресов:

Анатомия URL и относительные адреса

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс “Практика HTML5 и CSS3”

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

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

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный курс “Сайт на WordPress”

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

*Наведите курсор мыши для приостановки прокрутки.

Наиболее часто используемая схема URL – это http схема. Схема http используется для поиска документов, которые находятся на веб-серверах.

Веб-сервер правильнее называть HTTP-сервером. HTTP – это HyperText Transfer Protocol (Протокол Передачи Гипертекста), специально разработанный для передачи документов по сети Интернет. Он используется для передачи практически любых документов, которые мы загружаем при использовании браузера.

URL со схемой http можно разбить на подчасти, как показано ниже:

1. http

Первая часть – имя схемы, об этом мы уже говорили (см. Структура HTML-документа, понятие URI и URL). Затем идет двоеточие и два слэша (//).


2. WebReference.com

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

Компьютеры в Интернет имеют цифровые адреса, называемые IP-адресами. IP-адрес – это несколько групп чисел в диапазоне от 0 до 255. Например, IP-адрес компьютера, на котором запущен HTTP-сервер сайта WebReference.com, следующий:

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

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

Так была создана система, названная DNS (Domain Name Service или Domain Name System – Система / Сервис Доменных Имен). Назначение DNS – трансформировать имена компьютеров в IP-адреса. В этом случае компьютеры имеют имена, которые легко запомнить пользователям.

Такие адреса называются FQDN (Fully Qualified Domain Name – Полностью Определенное Доменное Имя, или просто Доменное Имя). Доменное Имя компьютера может быть использовано где угодно в сети для того, чтобы однозначно идентифицировать компьютер и перевести его имя в IP-адрес.

Например, доменное имя сайта codeharmony.ru – www.codeharmony.ru. По сути, это просто псевдоним; компьютер может иметь более одного доменного имени, каждое из которых указывает на один и тот же IP-адрес.

Можно, например, получить доступ к моему сайту, используя имя codeharmony.ru, а не www.codeharmony.ru, потому что это тоже алиас (псевдоним) того же самого компьютера.

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

Заметьте, что доменные имена не чувствительны к регистру. www.codeharmony.ru – это то же самое, что и WWW.CODEHARMONY.RU и www.CodeHarmony.ru. Обычно доменные имена пишутся в нижнем регистре, но это не значит, что это единственный способ.

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

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

HTTP-взаимодействия обычно идут через порт 80, но не обязательно.

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

4. html/tutorial2/2.html

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

В первом случае мы ссылаемся на корневую директорию. Второй вариант – ссылка на директорию /html/. Третий пример – ссылка на документ 2.html в папке /html/tutorial2/. Наконец, четвертый пример – ссылка на документ html в корневой директории, а не на папку /html/. Это так, потому что в четвертом примере нет в конце слэша.

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

Важно отметить такой момент: путь не имеет ничего общего с форматом возвращаемого документа. В случае с WebReference.com все вышеприведенные примеры вернут HTML-документ.

Также, “расширение” в конце третьего примера (часть .html) не обязательно означает тип документа, как это бывает на операционных системах семейства Windows. Документ http://WebReference.com/cgi-bin/suggest.cgi имеет расширение .cgi, но является при этом HTML-документом.

5. ?query

Пятая часть – строка запроса, которая также необязательна.

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

Строка запроса состоит из знака вопроса (?), за которым идет передаваемая информация (она полностью зависит от того, какой программой будет производиться ее обработка).

Только что мы рассмотрели синтаксис URL-адресов со схемой http. Вы, вероятно, уже видели подобные адреса сотни раз, бороздя просторы сети; теперь Вы знаете, как они устроены. Ну а сейчас давайте рассмотрим понятие Относительных URL-адресов.

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

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

Все URL-адреса, которые мы рассматривали до этого были абсолютными. Они идентифицируют ресурсы независимо от их контекста. URL-адрес http://WebReference.com/html/ идентифицирует конкретную директорию в не зависимости от того, напечатали ли вы данный адрес в адресной строке, написали на клочке бумаги для своего друга, либо просто вспомнили “в голове”.

Относительные же URL-адреса – это способ идентификации ресурса с учетом его контекста.

Вот простая аналогия.

Представьте, что Вы в гостях на Дне Рождения у друга и кто-то спрашивает Вас, где живет какой-то из Ваших знакомых. Вы, вероятно, ответите, что-то вроде: “А вот – через дорогу в 7 доме.” Едва ли Вы скажете: “В России, в г. Москва, в районе Таком-то, на улице Такой-то, в доме номер 7.” В данном случае такой ответ был бы избыточен.

Относительные URL-адреса – что-то вроде этого. Они похожи на объяснения, типа: “вниз по переулку, потом налево, через два квартала по правой стороне.” Они имеют смысл только, если используются в определенном контексте. И этот контекст называется Base URL (Базовый URL).

Базовый URL ресурса – это все, что находится в пределах пути, включая и слэш на конце. Вот некоторые примеры:

Абсолютный URL-адрес Базовый URL-адрес
http://WebReference.com/ http://WebReference.com/
http://WebReference.com/html/ http://WebReference.com/html/
http://WebReference.com/html/about.html http://WebReference.com/html/
http://WebReference.com/foo/bar.html?baz http://WebReference.com/foo/

Таблица ниже показывает относительные адреса, для которых базовым URL является http://WebReference.com/html/ а также те абсолютные адреса, в которые “превращаются” относительные.

Относительный URL-адрес Абсолютный URL-адрес
about.html http://WebReference.com/html/about.html
tutorial1/ http://WebReference.com/html/tutorial1/
tutorial1/2.html http://WebReference.com/html/tutorial1/2.html
/ http://WebReference.com/
//www.internet.com/ http://www.internet.com/
/experts/ http://WebReference.com/experts/
../ http://WebReference.com/
../experts/ http://WebReference.com/experts/
../../../ http://WebReference.com/
./ http://WebReference.com/html/
./about.html http://WebReference.com/html/about.html

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

Да, использование относительных адресов позволяет сэкономить немного времени, но это не повод их использовать.

Очень важно понять то, что они используются только для указания на ресурс в определенном контексте. Это принципиально. Потому что URL-адреса не могут всегда использоваться в одном и том же контексте.

По материалам www.webreference.com
Перевод – Дмитрий Науменко.

P.S. Обратите также внимание на уроки ниже. Первый бесплатный курс позволит вам освоить работу с HTML и научиться создавать “каркасы” для сайтов. Второй курс покажет 5 прикладных техник для “резиновой” верстки сайтов:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Какие ссылки использовать внутри сайта, относительные или абсолютные

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

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

В данном примере, мы использовали относительную ссылку, где pagename.html это страница на которую Вы перейдете при нажатии на page about car.Вы можете увидеть, что данная ссылка не имеет полного адресса (полный веб адрес включает в себя атрибуты http://www).

Вот несколько примеров относительных и абсолютных ссылок:

Относительные ссылки:

  • index.html
  • /graphics/image.jpg
  • /main-folder/folder/file.html

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

  • http://www.mysite.com
  • http://www.mysite.com/graphics/image.jpg
  • http://www.mysite.com/main-folder/folder/file.html

Первое отличие можно увидеть в том, что абсолютные ссылки всегда включают доменное имя веб-сайта, в том числе http://www, в то время как относительные ссылки указывают только на файл или путь к файлу.

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

Рассмотрим более подробно, в чем все же состоит преимущество относительной ссылки над абсолютной, какие между ними различия и какую из них целесообразнее использовать?

Абсолютные ссылки хороши по таким свойствам:

  • активные ссылки при автоматическом копировании полностью переносятся на сайт копировщика;
  • поисковые системы точнее определяют главное зеркало сайта;
  • корректная работа в RSS ридерах;

  • страница загружается намного быстрее, если применяются размещенные на стороннем сервере файлы;
  • нет проблем с rel=«canonical».
  • безопаснее при взломе сайта
  • более безопаснее при переходе на новую CMS
  • лучше использовать при распространении контента по электронной почте

Положительные черты относительных ссылок без протокола:

  • при использовании http: и https: проблем с протоколами нет;

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

Некоторые (любопытные) дубликаты

Видеть это: http://en.wikipedia.org/wiki/URI_scheme#Generic_syntax

foo://username:password@example.com:8042/over/there/index.dtb;type=animal?name=ferret#nose
/ \________________/\_________/ \__/ \___/ \_/ \_________/ \_________/ \__/ | | | | | | | | | | userinfo hostname port | | parameter query fragment | \_______________________________/ \_____________|____|____________/
scheme | | | | | authority |path| | | | | path interpretable as filename | ___________|____________ |
/ / |
urn:example:animal:ferret:nose interpretable as extension

Абсолютный URL-адрес включает части перед частью «пути» – другими словами, он включает в себя схему ( http в http://foo/bar/baz) и имя хоста ( foo в http://foo/bar/baz) (и опционально порт, userinfo и порт).

Относительные URL-адреса начинаются с пути.

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

вы можете поставить ссылку так

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

поэтому схема, имя хоста и ведущий путь из них берутся и добавляются к pages/page1, уступая

Если бы ссылка была бы:

(Обратите внимание / появляясь в начале URL-адреса), тогда это было бы разрешено как

потому что ведущий / указывает корень хоста.

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

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

Предположим, мы создаем дочерний узел, файлы которого находятся в папке http://site.ru/shop ,

1. Абсолютный URL

Link to home page
href=”http://sites.ru/shop/” Link to the product page
href=”http://sites.ru/shop/t-shirts/t-shirt-life-is-good/”

2. Относительный URL

Link from home page to product page
href=”t-shirts/t-shirt-life-is-good/” Link from product page to home page
href=”../../”

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

Промежуточные случаи

Мы рассмотрели два крайних случая: «абсолютно» абсолютные и «абсолютно» относительные URL-адреса. Но все относительно в этом мире. Это также относится к URL-адресам. Каждый раз, когда вы говорите об абсолютном URL-адресе, вы всегда должны указывать относительно того, что.

3. URL-адрес, относящийся к протоколу

Разница между абсолютной и относительной ссылкой

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

Итак, в числе тех распространенных IT-инструментов, в которых применяются абсолютные и относительные ссылки, — программа Excel.

Элемент первого типа представляет собой фиксированный (не меняющийся при копировании содержимого ячейки в другое место таблицы) набор координат ячеек, которые определены в формуле.

То есть при использовании абсолютной ссылки перемещение ячейки A1 в любую сторону не влияет на содержание формулы — координаты прописанных в ней ячеек не изменятся. Формула будет оставаться в том виде, в котором вписана пользователем в таблицу Excel изначально.

Отметим, что для того, чтобы зафиксировать «абсолютность» ссылки, в формуле необходимо проставить знак $ перед каждой координатой. Запись в ячейке, таким образом, будет выглядеть как = $A$1+$A$2.

В свою очередь, относительная ссылка — это набор координат ячеек в формуле, меняющихся при копировании в другое место таблицы ячейки, в которую вписана формула. То есть если изначально в ячейке A1 записана формула = B1+B2, то в случае с использованием относительной ссылки при копировании данной ячейки на клетку, расположенную правее, — на A2, формула автоматически изменится на = B2+B3.

В относительных ссылках, в свою очередь, не нужно проставлять знаков $. Собственно, его отсутствие и предопределяет «относительность», а не «абсолютность» ссылки.

Ссылки в структуре веб-страницы

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

Под относительной ссылкой, размещенной в структуре веб-страницы, понимается неполный адрес файла, выглядящий примерно как /page1234.html. Предполагается, что браузер, обнаружив относительную ссылку, автоматически добавит перед знаком / недостающую часть адреса файла для того, чтобы он загрузился.

Важно, чтобы переход по относительной ссылке осуществлялся с веб-страницы, расположенной на том же сайте, где размещен файл. То есть если на портале http://www.page1.com размещается страница с относительной ссылкой вида /page1234.html, то браузер, после того как пользователь кликнет по данной ссылке, начнет загружать файл по адресу http://www.page1.com/page1234.html.

Если, в свою очередь, разместить ее, к примеру, на портале http://www.page2.com, то браузер начнет загружать страницу http://www.page2.com/page1234.html. Поэтому веб-мастеру нужно быть внимательным с размещением относительных ссылок — главное, чтобы им соответствовал реальный файл на сервере.

Под абсолютной ссылкой в веб-странице понимается, в свою очередь, полный адрес файла, выглядящий как http://www.page.com/page1.html. Браузер будет обеспечивать переход к файлу только по этому адресу и никакому другому. Абсолютную ссылку можно встроить в веб-страницу, расположенную на любом сайте, — переход по ней на указанный файл всегда будет корректным.

Сравнение

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

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

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

Сравнительная таблица

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

Что такое URL адреса, чем отличаются абсолютные и относительные ссылки для веб-сайта, создание, продвижение и заработок на веб-сайте, ссылки на домен

Обычно рекомендуют ограничиться набором из знаков: [0-9],[a-z],[A-Z],[_],[-].

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

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

Ну итак вот, хоть какой документ (страница) в сети веб имеет собственный уникальный адресок URL, который расшифровывается как Uniform Resource Locator (определитель местопребывания ресурса).

Он, равно как и протокол HTTP, а к тому же как язык Html с валидатором W3C, был разработан и сотворен одним и этим же человеком — Тимом Бернерсом-Ли (папой основоположником проекта Глобальная сеть WWW — World Wide Web).

По сути URL является личным случаем другого идентификатора под заглавием URI (Uniform Resource Identifier — унифицированный идентификатор ресурса), но нам с вами все эти тонкости, вероятнее всего, будут не необходимы (излишни) при работе со своим веб-сайтом. Та часть URL, которая размещена за третьим слешем (/) — в нашем примере это «papka/fail.

html», именуется методом до определенного документа либо файла.

»Дмитрий, Вы пишете:«Вообщем, во избежании ошибок, я бы рекомендовал задавать заглавие файлов и URL страничек собственного веб-сайта в нижнем регистре, ибо для юникс схожих систем (на которых работает большая часть интернет серверов) знаки в верхнем и нижнем регистре являются различными (в отличии от Windows).

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

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

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

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

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

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

Якоря заблаговременно проставляются снутри Html кода документа (странички) при помощи добавление атрибута >

У меня, к примеру, главное зеркало — это «ktonanovenkogo.ru», т.е. «без атавизма», и если вы добавите к хоть какому моему Урлу эту чудо-приставку, то произойдет автоматическое перенаправление на адресок «без WWW».

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

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

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

Откуда берутся излишние URL-адреса (дубли страничек) вашего веб-сайта в индексе поисковиков

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

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

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

К одному и тому же Урлу может добавляться вашей Cms сколько угодно много разных Get характеристик и все это будет проиндексировано Yandex’ом и Гуглом, если вы не создадите надлежащие запреты в файле robots.

txt, ссылка на статью про который приведена чуток выше.

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

(даже по трем — к тому же http://ktonanovenkogo.ru/) и в любом случае раскроется основная страничка. Это достаточно плохо, т.к. поисковики отыщут у меня три различных странички (имеющих с их точки зрения различные URL адреса), но с схожим содержанием, что им, ох как не нравится.

Потому у меня изготовлено так, что при вводе хоть какого из приведенных чуток выше Урлов будет выполнено перенаправление на URL вида «http://ktonanovenkogo.ru/». Делается это, обычно, при помощи триста один редиректа в файле .htaccess, или впрямую в настройках сервера вами самими, или вашим хостером.

Структура Урл адреса и перекодировка в URL-encoded

Это как необходимость выключать телефоны в самолете: все отлично понимают, что на такую высоту волны сотовых операторов все равно не доходят, а аппаратура на борту не рассчитана разве что на галлактическое излучение, но все равно продолжают этим заниматься, хотя даже «Разрушители легенд» обосновали, что мобильник для нее — как заноза в пятке носорога. Так что пред нами — обычный пример массового психоза. А всему виной кто? Верно — жиды.Эдуард: не путайте техно сторону и маркетинг.

WWW в адресе по собственной сущности — это некоторый атавизм, который делает ваше доменное имя второго уровня доменом третьего.

Тоже справедливо и при переезде веб-сайта на защищенный протокол https с http — для поисковиков это будет уже другой веб-сайт (ниже приведено видео с разъяснением, когда лучше склевать такие зеркала).Ничего отвратительного в использовании WWW в URL веб-сайта

Мастер Йода рекомендует:  Искусственный интеллект как и где изучать — отвечают эксперты
Добавить комментарий