Как и в случае с абсолютными адресами, определить путь к корневому каталогу сайта довольно просто. Единственное отличие заключается в том, что нам не нужно указывать доменное имя, а относительные пути используются только в пределах сервера.
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).
Атрибут 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 или изображение, файл не загружается непосредственно на ваш жесткий диск. Он откроется только в вашем браузере, после чего вы сможете сохранить его или загрузить на жесткий диск.
Насколько полезна эта публикация?
Нажмите на звезду, чтобы оценить его!
Средняя оценка: 5/5. Количество оценок: 1
Отзывов пока нет. Сначала дайте оценку.
