HTML - Гиперссылки

Содержание:

  1. Что такое ссылки?
  2. Понятие URL-адреса и пути
  3. Синтаксис гиперссылок
  4. Типы гиперссылок
  5. Создание внешних гиперссылок
  6. Создание внутренних гиперссылок
  7. Создание анкорных (якорных) ссылок
  8. Создание гиперссылок на адрес электронной почты (E-mail)
  9. Создание гиперссылок на телефонный номер
  10. Создание гиперссылок на файл

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

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

    А с изобретением в 1991 году идеологии Всемирной паутины (World Wide Web) было сказано принципиально новое слово в использовании ссылок. Смысл заключался в создании совокупности веб-страниц с различным, в том числе и мультимедийным, содержанием и гиперссылками.

    Гиперссылка в веб-разработке — это элемент контента, кликнув по которому можно перейти на другой элемент. Гиперссылки могут быть словами в тексте, картинками или другими элементами на веб-странице.

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

  2. Понятие URL-адреса и пути

    Для корректного создания гиперссылки важно понимать несколько вещей про URL-адреса и пути к файлам.

    URL-адрес (Uniform Resource Locator, или единый указатель ресурсов) — это координаты файлов в файловой системе или в Интернете.

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

    Путь к файлам в системе (например в linux или windows) бывает абсолютным и относительным. В указании URL-адреса гиперссылок в HTML-документе также используется эти два вида пути. Абсолютный чаще используется для сторонних ресурсов и прописывается полностью (например http://www.mysite.local/www/page1/index.html), а относительный путь - для всего, что находится непосредственно на нашем сервере.

    При указании относительного пути важно понимать структуру каталогов нашего веб-сайта.

    Как и в файловых системах, каждый веб-сайт имеет свой корневой каталог.

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

  3. Если говорить о синтаксисе создания гиперссылок, он не сложный. Для созданий простой гиперссылки используется тег <a>...</a>. Для этого необходимо обернуть текст, изображение или другие элементы, которые хотим преобразовать в гиперссылку этим тегом. Для указания адреса источника, на который мы ссылаемся используется атрибут href=””, размещенный внутри открывающего тега <a>. Кроме атрибута href тег <a> имеет еще один полезный атрибут title=”краткое описание гиперссылки”, который добавит всплывающую подсказку к тексту ссылки при наведении курсора на нее.

  4. Гиперссылки бывают шести основных типов:

    • внешняя ссылка
    • внутренняя ссылка
    • анкорная (якорная) ссылка
    • ссылка на файл
    • ссылка на электронную почту
    • ссылка на телефон

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

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

    В нашем случае это будет выглядеть так:

    <a href="https://www.google.com.ua/">google</a>

    <a href="https://www.google.com.ua/" target="_blank">google</a>

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

  6. Внутренние гиперссылки - это ссылки, которые ведут на внутренние страницы, разделы или ресурсы, которые расположены в пределах того же веб-сайта, на котором они размещены.

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

    И это выглядит так:

    <a href="./page1.html/">Страница 1</a>

  7. Анкорная ссылка - это внутренняя ссылка, которая переходит к конкретному разделу текущей страницы.

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

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

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Анкорные ссылки</title>
    </head>
    <body>
        <h1>Содержание</h1>
        <ul>
            <li><a href="#section1">Раздел 1</a></li>
            <li><a href="#section2">Раздел 2</a></li>
            <li><a href="#section3">Раздел 3</a></li>
        </ul>
        <h2 id="section1">Раздел 1</h2>
        <p>Текст раздела 1...</p>
        <h2 id="section2">Раздел 2</h2>
        <p>Текст раздела 2...</p>
        <h2 id="section3">Раздел 3</h2>
        <p>Текст раздела 3...</p>
    </body>
</html>

    В этом примере:

    • Ссылки в списке направляют пользователя к соответствующим разделам страницы.
    • Каждый раздел имеет свой уникальный идентификатор (id), который используется в анкорных ссылках.
    • Идентификаторы разделов начинаются с символа # и соответствуют значениям атрибута href в анкорных ссылках.

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

  8. Ссылки на электронную почту являются внешними ссылками и предназначены для связи с другими пользователями через электронную почту.

    При создании ссылки на E-mail используется атрибут href со значением “mailto:наш_адрес_электронной_почты” и это выглядит примерно вот так:

    <a href=“mailto:наш_адрес_электронной_почты”>Напишите нам</a>

    При нажатии на данную ссылку вы перейдете не на другую страницу, а вместо этого откроется настроенный на вашем компьютере почтовый клиент (например Outlook или Thunderbird).

    Пример:

    <a href="mailto:[email protected]">Напишите нам</a>

  9. Ссылки на телефон являются внешними ссылками и предназначены для связи с другими пользователями через телефон.

    Для создания ссылки на телефонный номер используется атрибут:

    <a href="tel:+наш_номер_телефона">Позвоните нам</a>

    При нажатии на данную ссылку на вашем смартфоне откроется приложение “Телефон” и пользователь вашего сайта сможет вам позвонить.

    Пример:

    <a href="tel:+1234567890">Позвоните нам</a>

  10. Ссылки на файл могут быть как внешними (ведущими на файлы размещенные на внешних ресурсах) или же внутренние (когда файл размещен непосредственно на нашем сервере или домене).

    При создании ссылки на файл используется атрибут href со значением в котором указан абсолютный или относительный путь к файлу:

    <a href="путь к файлу">Скачать или открыть файл</a>

    Пример:

    <a href="./documents/document.pdf">Скачать файл</a>

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

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

    Пример:

    <a href="./documents/document.pdf" download>Скачать файл</a>