Создание гиперссылок и навигации с использованием HTML-тегов a

Введение

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

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

Настройка базовой структуры HTML-страницы

На этом этапе вы научитесь создавать базовую структуру HTML-страницы, которая станет основой для добавления гиперссылок и навигации. HTML (HyperText Markup Language) - это стандартный язык разметки для создания веб-страниц.

Сначала откройте WebIDE и перейдите в каталог ~/project. Создайте новый файл с именем index.html, щелкнув правой кнопкой мыши в проводнике файлов и выбрав "Новый файл".

Создадим простой HTML5-документ с необходимой структурой:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>
      This is a basic HTML page structure that we'll use to create hyperlinks.
    </p>
  </body>
</html>

Разберём основные компоненты этой HTML-структуры:

<!DOCTYPE html> объявляет, что это HTML5-документ
<html> - корневой элемент HTML-страницы
<head> содержит метаданные о документе
<meta charset="UTF-8"> задает кодировку символов
<meta name="viewport"> обеспечивает правильное отображение на мобильных устройствах
<title> устанавливает заголовок страницы, отображаемый во вкладке браузера
<body> содержит видимое содержимое страницы

Примечание: Узнайте больше о Просмотре HTML-файлов в WebIDE.

Пример вывода при открытии этого файла в браузере:

HTML-страница, отображаемая в браузере

Создание навигационных ссылок между страницами

Теги <a> используются для создания гиперссылок в HTML. Базовый синтаксис создания гиперссылки: <a href="URL">Текст ссылки</a>.

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

Создайте два новых файла в каталоге ~/project: about.html и contact.html.

Обновите файл index.html, добавив навигационные ссылки:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website</title>
  </head>
  <body>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
    <h1>Welcome to My Website</h1>
    <p>This is the home page with navigation links.</p>
  </body>
</html>

Создайте файл about.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>About Page</title>
  </head>
  <body>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
    <h1>About Us</h1>
    <p>Learn more about our website and mission.</p>
  </body>
</html>

Создайте файл contact.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contact Page</title>
  </head>
  <body>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
    <h1>Contact Us</h1>
    <p>Get in touch with our team.</p>
  </body>
</html>

Основные моменты о навигации между страницами:

Атрибут <a href="..."> указывает целевую страницу
Используйте относительные пути к файлам при создании ссылок между страницами в одном каталоге
Каждая страница содержит единый навигационный меню

Пример вывода в веб-браузере:

Браузер с отображенными навигационными ссылками

Реализация контактных ссылок для электронной почты и телефона

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

Обновите файл contact.html следующим содержимым:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contact Page</title>
  </head>
  <body>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
    <h1>Contact Information</h1>

    <h2>Get in Touch</h2>

    <h3>Email Links</h3>
    <p>
      Contact us at:
      <a href="mailto:support@example.com">support@example.com</a>
    </p>

    <h3>Phone Links</h3>
    <p>
      Call us at:
      <a href="tel:+1-555-123-4567">+1 (555) 123-4567</a>
    </p>

    <h3>Multiple Contact Options</h3>
    <p>
      Email: <a href="mailto:info@example.com">info@example.com</a><br />
      Phone: <a href="tel:+1-800-555-0199">1-800-CONTACT</a>
    </p>
  </body>
</html>

Основные моменты о ссылках для электронной почты и телефона:

Префикс mailto: создает ссылку для электронной почты, которая открывает стандартный почтовый клиент
Префикс tel: создает ссылку на номер телефона, которая работает на мобильных устройствах
Эти ссылки позволяют пользователям легко связаться с вами одним кликом

Пример вывода в веб-браузере:

Браузер с отображенными контактными ссылками

Создание закладок в документе на одной странице

На этом этапе вы научитесь создавать внутренние закладки страницы с использованием HTML-ярлыков. Создайте новый файл с именем long-document.html в каталоге ~/project со следующим содержимым:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document with Bookmarks</title>
    <style>
      body {
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.6;
      }
      section {
        height: 500px;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Table of Contents</h1>
    <nav>
      <a href="#section1">Section 1</a> | <a href="#section2">Section 2</a> |
      <a href="#section3">Section 3</a>
    </nav>

    <section id="section1">
      <h2>Section 1: Introduction</h2>
      <p>
        This is the first section of our long document. Click the links above to
        navigate quickly.
      </p>
    </section>

    <section id="section2">
      <h2>Section 2: Main Content</h2>
      <p>This is the second section with more detailed information.</p>
    </section>

    <section id="section3">
      <h2>Section 3: Conclusion</h2>
      <p>This is the final section of the document.</p>
    </section>

    <a href="#" style="position: fixed; bottom: 20px; right: 20px;"
      >Back to Top</a
    >
  </body>
</html>

Основные моменты о закладках в документе:

Блок <style> добавляет CSS для стилизации документа, включая высоту и отступы разделов. Не беспокойтесь о CSS сейчас, мы рассмотрим его в последующих практических занятиях.
- max-width: 600px; устанавливает максимальную ширину документа
- margin: 0 auto; центрирует документ по горизонтали
- line-height: 1.6; устанавливает межстрочный интервал для лучшей читаемости
- section { height: 500px; margin-bottom: 20px; } устанавливает высоту и отступ для каждого раздела
Используйте атрибут id для создания целей закладок.
Создайте ссылки с href="#elementId", чтобы перейти к определенным разделам.
Символ #, за которым следует id, создает внутреннюю ссылку на страницу.

Добавьте long-document.html в конец навигационной ссылки, чтобы вы могли предварительно просмотреть документ.

Пример вывода в веб-браузере:

Предварительный просмотр документа с закладками в браузере

Использование атрибутов target для поведения ссылок

На этом этапе вы узнаете о HTML-атрибутах target для ссылок, которые контролируют, как ссылки открываются. Создайте новый файл с именем link-targets.html в каталоге ~/project:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Link Target Attributes</title>
  </head>
  <body>
    <h1>Link Target Demonstration</h1>

    <h2>Default Link Behavior</h2>
    <p>
      <a href="https://www.example.com">Normal Link</a>
      (Opens in the same window)
    </p>

    <h2>Target Attribute Examples</h2>
    <p>
      <a href="https://www.example.com" target="_blank">New Tab Link</a>
      (Opens in a new tab)
    </p>

    <h2>Multiple Target Demonstrations</h2>
    <p>
      <a href="https://www.example.com" target="_self">Same Window</a> |
      <a href="https://www.example.com" target="_blank">New Tab</a> |
      <a href="https://www.example.com" target="_parent">Parent Frame</a> |
      <a href="https://www.example.com" target="_top">Full Browser Window</a>
    </p>

    <h2>Named Window Target</h2>
    <p>
      <a href="https://www.example.com" target="myWindow"
        >Open in Named Window</a
      >
    </p>
  </body>
</html>

Основные моменты об атрибутах target для ссылок:

_blank: Открывает ссылку в новой вкладке или окне
_self: Поведение по умолчанию, открывает в том же окне
_parent: Открывает в родительском фрейме
_top: Открывает во всем окне браузера
Пользовательские именованные цели могут создавать определенное поведение окон

Скопируйте URL веб-сервера и добавьте /link-targets.html в конец URL, чтобы просмотреть страницу (в новой вкладке).

Демонстрация атрибутов target для ссылок

Пример вывода в веб-браузере:

Демонстрация атрибутов target для ссылок

Резюме

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

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