HTML навигационные ссылки: мастерство в навигации по сайту

Введение

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

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Создание базовой HTML-страницы

Сначала создадим новую HTML-страницу с именем index.html и добавим базовую HTML-структуру.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>
  </head>
  <body></body>
</html>

Добавление навигационных ссылок с использованием тега

Теперь создадим навигационное меню с помощью HTML-тега <nav>. Создайте элемент <nav> внутри тега <body>.

<body>
  <nav></nav>
</body>

Добавление навигационных ссылок с использованием тега

Далее, добавьте несколько навигационных ссылок внутри тега <nav> с использованием HTML-тега <a>.

<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact Us</a>
  </nav>
</body>

Стилизация навигационного меню

Для того, чтобы навигационное меню было более наглядным, добавим к нему несколько стилей CSS. Добавьте следующие стили в ваш HTML:

<head>
  <meta charset="UTF-8" />
  <title>My Website</title>

  <style>
    nav {
      background-color: #333;
      overflow: hidden;
    }

    a {
      float: left;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    a:hover {
      background-color: #ddd;
      color: black;
    }
  </style>
</head>

Финальная страница

Ваша конечная страница index.html должна выглядеть примерно так:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>

    <style>
      nav {
        background-color: #333;
        overflow: hidden;
      }

      a {
        float: left;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      a:hover {
        background-color: #ddd;
        color: black;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact Us</a>
    </nav>
  </body>
</html>

Резюме

В этом практическом занятии вы узнали, как использовать HTML-тег <nav> для создания навигационного меню на вашем сайте. Создание навигационных меню с использованием тега <nav> и их стилизация с помощью CSS позволяет пользователям легко перемещаться по вашему сайту и делает его более привлекательным визуально.