Самое важное о ссылках в HTML. Как сделать ссылку на сайт.

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

HTML ссылки

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

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

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

В HTML гиперссылки (или просто «ссылки») определяются тегом (HTML Anchor Element).

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

Мы уже несколько раз отмечали, что некоторые теги можно использовать только в сочетании с атрибутами (сами по себе они бесполезны), и здесь это тоже верно. Атрибут href (сокращение от hyperlink) — это ключевой атрибут тега, который сообщает браузерам, куда ведет ссылка на URL. Единый локатор ресурсов (URL) — это унифицированный локатор ресурсов.

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

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

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

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

  Юзабилити что это такое. Юзабилити что это такое.

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

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

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

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

Пример ссылки на файл:

Перейдем к следующему примеру: Допустим, у нас есть файл index.html, в том же каталоге есть папка (каталог) с именем etc., из которой нам нужно связать изображение и создать ссылку на документ page.html:

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

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

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

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

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

Если вы планируете создавать веб-сайты и не имеете среды для своей практики, я рекомендую загрузить пакет программ, предназначенный для локальной разработки, отладки и тестирования веб-проектов. Я использую Open Server, который предназначен для пользователей с операционной системой Windows. В качестве аналога Open Server для Mac я могу порекомендовать MAMP, если он вам не понравится, вы можете попробовать другую программу. Мы не будем использовать эти программные среды для практических занятий (вы сможете установить их после изучения HTML/CSS).

  Раскрутка сайта в 2022: как раскрутить сайт быстро и бесплатно. Как продвинуть сайт в яндексе самому бесплатно пошаговая инструкция

Атрибут target

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

Все значения этого атрибута перечислены ниже:

Атрибут Значение
_blank Загружает страницу в новое окно браузера.
_self Загружает страницу в текущее окно. Это значение по умолчанию.
_родитель Загружает страницу в родительский фрейм. Если кадров нет, это значение работает как _self.
_top Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, это значение работает как _self.
Рама Открывает ссылку на выбранный кадр.

Об этом будет рассказано далее в этом учебнике в разделе «HTML-фреймы».

Ссылка «Номер телефона» — это ссылка, при нажатии на которую при просмотре веб-сайта с мобильного устройства будет вставлено приложение «Телефон». Если вы посещаете веб-сайт с компьютера, откроется приложение для телефона по умолчанию.

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

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

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

Открытие ссылки

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

При звонке на сайт с мобильного телефона срабатывает простое нажатие на ссылку на телефоне (вызывается номер). Пользователю не нужно копировать номер телефона или записывать его где-то. Им просто нужно ввести номер телефона в функции Tel в международном формате.

Ссылка на почту

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

  Как успешно запустить новый товар на Вайлдберриз. Как продвигать товар на вайлдберриз

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

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

и переносится в нижний колонтитул.

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

Настройки атрибута target

Атрибут target указывает браузеру, как открыть связанный документ. Существует четыре определенных цели, и имя каждой цели начинается с символа подчеркивания ( _ ):

  • _blank — открыть связанный документ в новом окне или вкладке.
  • _parent — открывает связанный документ в родительском окне.
  • _self — открывает связанный документ в том же окне или вкладке, что и исходный документ. Это значение по умолчанию, поэтому вам не нужно указывать его явно.
  • _top — открывает связанный документ в полном окне браузера.

Вы можете использовать следующий пример, чтобы понять, как работает атрибут «target»:

Если ваш сайт находится в iframe, вы можете использовать target=»_top» в ссылках, чтобы выйти из iframe и отобразить целевую страницу в полном окне браузера.

Создание якорей # на странице

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

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

Создание ссылок для скачивания

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

В следующем примере мы создали ссылки на скачивание для файлов .zip, .pdf и .jpg.

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

jivo banner 480x320 etxt banner 480x320 kwork banner 480x320

Насколько полезна эта публикация?

Нажмите на звезду, чтобы оценить его!

Средняя оценка: 5/5. Количество оценок: 1

Отзывов пока нет. Сначала дайте оценку.

Оцените статью
Бизнес блог