HTML ссылки: создание внешних и внутренних гиперссылок

Введение

Добро пожаловать в лабораторию HTML-ссылок! Гиперссылки являются основой Всемирной паутины, позволяя пользователям перемещаться между страницами и ресурсами. В HTML ссылки создаются с помощью тега <a> (якорь).

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

Вы будете работать с файлом index.html в WebIDE. Вы можете видеть свои изменения в реальном времени, переключившись на вкладку "Web 8080" в интерфейсе LabEx.

Приступим!

Добавьте тег с атрибутом href для внешней ссылки

На этом шаге вы создадите свою первую гиперссылку. Тег <a>, сокращение от "anchor" (якорь), используется для определения гиперссылки. Самым важным атрибутом элемента <a> является href, который указывает URL назначения ссылки.

Давайте добавим ссылку на веб-сайт LabEx.

Сначала откройте файл index.html из файлового проводника в левой части WebIDE.

Теперь найдите элемент <h2>Section 1</h2> и добавьте следующий тег <a> внутри тега <p> сразу после него.

<a href="https://labex.io">Visit LabEx</a>

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

<body>
  <h1>Welcome to the HTML Links Lab</h1>
  <p>
    This page will be used to practice creating different kinds of HTML links.
  </p>

  <nav>
    <!-- Navigation links will be added here -->
  </nav>

  <div class="section">
    <h2>Section 1</h2>
    <p>
      <a href="https://labex.io">Visit LabEx</a>
    </p>
  </div>

  <div class="section">
    <h2>Section 2</h2>
    <p>
      This is the section we will link to from the top of the page. It is placed
      far down to demonstrate the page jump effect.
    </p>
  </div>
</body>

После добавления кода сохраните файл (Ctrl+S или Cmd+S). Затем переключитесь на вкладку "Web 8080", чтобы увидеть вашу новую ссылку. При нажатии на нее вы перейдете на главную страницу LabEx.

Установите атрибут target в значение _blank для открытия в новой вкладке

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

Установка target="_blank" предписывает браузеру открывать связанный документ в новой вкладке или окне. Это распространенная практика для внешних ссылок, поскольку она позволяет пользователю оставаться на вашем веб-сайте, одновременно давая возможность посетить внешний ресурс.

Давайте изменим ссылку, которую вы создали на предыдущем шаге. Добавьте атрибут target="_blank" к тегу <a>.

<a href="https://labex.io" target="_blank">Visit LabEx</a>

Первый раздел вашего обновленного файла index.html теперь должен содержать эту измененную ссылку:

<div class="section">
  <h2>Section 1</h2>
  <p>
    <a href="https://labex.io" target="_blank">Visit LabEx</a>
  </p>
</div>

Сохраните файл и переключитесь на вкладку "Web 8080". Теперь, когда вы нажмете на ссылку "Visit LabEx", она должна открыться в новой вкладке браузера, оставив вашу вкладку с лабораторной средой открытой.

Создайте внутреннюю ссылку с href на якорь id

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

Чтобы создать внутреннюю ссылку, вы устанавливаете атрибут href на символ хеша (#), за которым следует id элемента, на который вы хотите сослаться. Например, href="#section-name".

Давайте добавим ссылку внутри элемента <nav> в верхней части нашей страницы, которая будет переходить к "Разделу 2".

Добавьте следующую строку внутри тега <nav>:

<a href="#section2">Jump to Section 2</a>

Область навигации вашего файла index.html теперь должна выглядеть следующим образом:

<nav>
  <!-- Navigation links will be added here -->
  <a href="#section2">Jump to Section 2</a>
</nav>

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

Добавьте атрибут id к элементу для создания якоря

На предыдущем шаге вы создали ссылку, указывающую на #section2. Теперь вам нужно создать назначение для этой ссылки. Это делается с помощью атрибута id.

Атрибут id предоставляет уникальный идентификатор для HTML-элемента на странице. Значение id должно быть уникальным в пределах HTML-документа. Наша внутренняя ссылка href="#section2" будет искать элемент с id="section2".

Давайте добавим этот id к тегу <h2> для Раздела 2. Найдите следующую строку:

<h2>Section 2</h2>

И измените ее, чтобы включить атрибут id:

<h2 id="section2">Section 2</h2>

Второй раздел вашего обновленного файла index.html теперь должен выглядеть следующим образом:

<div class="section">
  <h2 id="section2">Section 2</h2>
  <p>
    This is the section we will link to from the top of the page. It is placed
    far down to demonstrate the page jump effect.
  </p>
</div>

Сохраните файл и вернитесь на вкладку "Web 8080". Нажмите на ссылку "Jump to Section 2" в верхней части страницы. Браузер должен плавно прокрутиться вниз к заголовку "Section 2".

Используйте атрибут title для всплывающей подсказки ссылки

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

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

Давайте добавим описательный заголовок к нашей внешней ссылке на LabEx. Найдите ссылку, которую вы создали на первых двух шагах, и добавьте к ней атрибут title.

<a href="https://labex.io" target="_blank" title="Go to the LabEx homepage"
  >Visit LabEx</a
>

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

<div class="section">
  <h2>Section 1</h2>
  <p>
    <a href="https://labex.io" target="_blank" title="Go to the LabEx homepage"
      >Visit LabEx</a
    >
  </p>
</div>

Сохраните файл в последний раз. Перейдите на вкладку "Web 8080" и наведите курсор мыши на ссылку "Visit LabEx". Должен появиться небольшой блок с текстом "Go to the LabEx homepage".

Резюме

Поздравляем с завершением лабораторной работы! Вы освоили основы создания и настройки ссылок в HTML.

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

Использование тега <a> с атрибутом href для создания внешних ссылок.
Использование атрибута target="_blank" для открытия ссылок в новой вкладке.
Создание внутренних якорей страницы с помощью href="#id" для навигации в пределах одной страницы.
Использование атрибута id для определения назначения внутренней ссылки.
Добавление информативных всплывающих подсказок к вашим ссылкам с помощью атрибута title для улучшения пользовательского опыта.

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