Как сделать навигацию по сайту в html – как сделать удобную навигацию по сайту, и какие ее виды выбрать для своего интернет-ресурса

alexxlab

Содержание

HTML5 | Создание панели навигации

Создание панели навигации

Последнее обновление: 27.04.2016

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

Фактически панель навигации — это набор ссылок, часто в виде ненумерованного списка. Панели навигации бывают самыми различными: вертикальными и горизонтальными, одноуровневыми и многоуровневыми, но в любом случае в центре каждой навигации находится элемент <a>. Поэтому при создании панели навигации мы можем столкнуться с рядом трудностей, которые вытекают из ограничений элемента ссылки. А именно, элемент <a> является строчным, а это значит, что мы не можем указать для него ширину, высоту, отступы. По ширине ссылка автоматически занимает то место, которое ей необходимо.

Вертикальное меню

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


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Панель навигации в HTML5</title>
		<style>
			ul.nav{
				margin-left: 0px;
				padding-left: 0px;
				list-style: none;
			}
			ul.nav a {
				display: block;
				width: 7em;
				padding:10px;
				background-color: #f4f4f4;
				border-top: 1px dashed #333;
				border-right: 1px dashed #333;
				border-left: 5px solid #333;
				text-decoration: none;
				color: #333;
			}
			ul.nav li:last-child a {
				border-bottom: 1px dashed #333;
			}
		</style>
    </head>
    <body>
		<ul>
			<li><a href="#">Главная</a></li>
			<li><a href="#">Контакты</a></li>
			<li><a href="#">О сайте</a></li>
		</ul>
    </body>
</html>

После установки свойства display: block мы можем определить у блока ссылки ширину, отступы и т.д.

Горизонтальное меню

Для создания горизонтального меню есть два метода. Первый заключается в применении свойства float и создании из ссылок плавающих элементов, которые обтекают друг друга с слева. И второй способ состоит в создании строки ссылок с помощью установки свойства display: inline-block.

Использование float

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

Второй этап заключается в установке у элемента ссылки display: block, что дает нам возможность устанавливать ширину, отступы, вообщем все те признаки, которые характерны для блочных элементов.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Панель навигации в HTML5</title>
		<style>
			ul.nav{
				margin-left: 0px;
				padding-left: 0px;
				list-style: none;
			}
			.nav li { 
				float: left;
			}
			ul.nav a {
				display: block;
				width: 5em;
				padding:10px;
				margin: 0 5px;
				background-color: #f4f4f4;
				border: 1px dashed #333;
				text-decoration: none;
				color: #333;
				text-align: center;
			}
			ul.nav a:hover{
				background-color: #333;
				color: #f4f4f4;
			}
		</style>
    </head>
    <body>
		<ul>
			<li><a href="#">Главная</a></li>
			<li><a href="#">Блог</a></li>
			<li><a href="#">Контакты</a></li>
			<li><a href="#">О сайте</a></li>
		</ul>
    </body>
</html>
inline и inline-block

Для создания горизонтальной панели навигации нам надо сделать каждый элемент li строчным, то есть установить для него display: inline. После этого для элемента ссылки, которая располагается в элементе li, мы можем установить display: inline-block:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Панель навигации в HTML5</title>
		<style>
			ul.nav{
				margin-left: 0px;
				padding-left: 0px;
				list-style: none;
			}
			.nav li { 
				display: inline; 
			}
			ul.nav a {
				display: inline-block;
				width: 5em;
				padding:10px;
				background-color: #f4f4f4;
				border: 1px dashed #333;
				text-decoration: none;
				color: #333;
				text-align: center;
			}
			ul.nav a:hover{
				background-color: #333;
				color: #f4f4f4;
			}
		</style>
    </head>
    <body>
		<ul>
			<li><a href="#">Главная</a></li>
			<li><a href="#">Блог</a></li>
			<li><a href="#">Контакты</a></li>
			<li><a href="#">О сайте</a></li>
		</ul>
    </body>
</html>

СSS Панель навигации

Демонстрация: панелей навигации

Горизонтальная


Панель навигации

Наличие простой в использовании навигации важно для любого веб сайта.

С помощью CSS вы можете превратить скучные HTML меню в красивые навигационные панели

Панель авигации = список ссылок

Панель навигации нуждается в стандартном HTML в качестве основы.

В наших примерах мы построим панель навигации из стандартного HTML списка.

Панель навигации — это в основном список ссылок, поэтому использование элементов <ul> и естественно <li>:

Пример

<ul>
  <li><a href=»index.php»>Главная</a></li>
  <li><a href=»news.php»>Новости</a></li>
  <li><a href=»contact.php»>Контакты</a></li>
  <li><a href=»about.php»>О Нас</a></li>
</ul>

Редактор кода »

Теперь давайте удалим маркеры, поля и отступы из списка:

Пример объяснение:

  • list-style-type: none; — Убирает маркеры. В панели навигации не нужны маркеры для списка
  • Установить margin: 0; и padding: 0; чтобы удалить настройки браузера по умолчанию

Код в приведенном выше примере — это стандартный код, используется как на вертикальной, так и на горизонтальной панели навигации.

Вертикальная панель навигации

Чтобы создать вертикальную панель навигации, нужно задать стиль элемента <a> в списке, к дополнению коду выше:

Объяснение примера:

  • display: block; — Отображение ссылок в виде элементов блока составляет область кликабельных ссылок (не только текст), и позволяет указать ширину (и отступы, поля, высота и т. д. какие вы хотите)
  • width: 60px; — Элементы блока занимают всю ширину, доступную по умолчанию. Мы хотим задать ширину 60 пикселей

Вы также можете установить ширину <ul> и удалить ширину <a>, поскольку они будут занимать всю ширину, доступную при отображении в виде элементов блока. Это приведет к тому же результату, что и в предыдущем примере:

Пример

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 70px;
}

li a {
    display: block;
}

Редактор кода »

Пример вертикальной панели навигации

Создание базовой вертикальной панели навигации с серым цветом фона и изменение цвета фона ссылок при наведении курсора мыши на них:

Пример

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
    background-color: #555;
    color: white;
}

Редактор кода »

Активная и текущая ссылка навигации

Добавьте класс .active к текущей ссылке, чтобы пользователь знал, на какой странице он находится:

Центральные ссылки и добавить границы

Добавить выравнивание text-align:center в <li> или <a>ссылки по центру.

Добавить свойство border в <ul>. Добавить границы вокруг навигации. Если Вы также хотите установить границы внутри панели, нужно добавить

border-bottom во все элементы <li>, за исключением последнего:

Пример

ul {
    border: 1px solid #555;
}

li {
    text-align: center;
    border-bottom: 1px solid #555;
}

li:last-child {
    border-bottom: none;
}

Редактор кода »

Фиксированная вертикальная навигация

Создать в полную в высоту, «фиксированную» боковую панель навигации:

Пример

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* Полная высота */
    position: fixed; /* Сделайте его придерживаться, даже на прокрутки */
    overflow: auto; /* Включить прокрутку, если sidenav имеет слишком много содержимого */
}

Редактор кода »

Примечание: Этот пример может работать неправильно на мобильных устройствах.

Горизонтальная панель навигации

Существует два способа создания горизонтальной панели навигации. Использование встроенных или плавающих элементов списка.

Встроенные элементы списка

Одним из способов построения горизонтальной панели навигации является указание элементов <li> как встроенные, кроме того в «стандартные» в коде выше:

Объяснение примера:

  • display: inline; — По умолчанию, элементы <li> — это элементы блока. Здесь мы удалим разрывы строк до и после каждого элемента списка, чтобы отобразить их на одной линии

Плавающие элементы списка

Другой способ создания горизонтальной навигации, плавают элементы <li> им нужно указать расположение для навигационных ссылок:

Пример

li {
    float: left;
}
a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
}

Редактор кода »

Объяснение примера:

  • float: left; — Используйте поплавок, чтобы заставить элементы блока плавать рядом друг с другом
  • display: block; — Отображение ссылок в виде элементов блока составляет всю область кликабельных ссылок (не только текст), позволяет нам указывать отступы (и высоту, ширину, поля и т.д. если вы хотите)
  • padding: 8px; — Поскольку элементы блока занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому, укажите некоторые дополнения, чтобы сделать их выглядеть красиво
  • background-color: #dddddd; — Добавить серый фон цвета к каждому элементу

Совет: Добавить background-color: #dddddd; в <ul> для каждого элемента <a>, чтобы цвет фона был на всю ширину:

Примеры горизонтальной панели навигации

Создание базовой горизонтальной панели навигации с темным цветом фона и изменение цвета фона ссылок при наведении курсора мыши на них:

Пример

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Измените цвет ссылки на #111 (черный) при наведении */
li a:hover {
    background-color: #111;
}

Редактор кода »

Активная и текущая ссылка навигации

Добавьте класс .active к текущей ссылке, чтобы пользователь знал, на какой странице он находится:

Выравнивание списка по правому краю

Выравнивание ссылок по правому краю путем перемещения элементов списка вправо float:right;:

Пример

<ul>
  <li><a href=»#home»>Главная</a></li>
  <li><a href=»#news»>Новости</a></li>
  <li><a href=»#contact»>Контакты</a></li>
  <li><a class=»active» href=»#about»>О Нас</a></li>
</ul>

Редактор кода »

Разделители границ списка

Добавить свойство border-right в <li> для создания разделителей ссылок:

Пример

/* Добавление серой правой границы ко всем элементам списка, кроме последнего (последний ребенок) */
li {
    border-right: 1px solid #bbb;
}

li:last-child {
    border-right: none;
}

Редактор кода »

Фиксированные горизонтальные панели навигации

Сделайте так, чтобы панель навигации оставалась вверху или внизу страницы, даже когда пользователь прокручивает страницу:

Фиксированная навигация сверху

ul {
    position: fixed;
    top: 0;
    width: 100%;
}

Редактор кода »

Фиксированная навигация снизу

ul {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Редактор кода »

Примечание: Фиксированная позиция может работать неправильно на мобильных устройствах.

Серая горизонтальная панель навигации

Пример серой горизонтальной панели навигации, с тонкой серой границей:

Липкая панель навигации

Использовать position: sticky; в <li>, чтобы создать липкую навигацию.

Липкий элемент переключается между относительным и фиксированным в зависимости от положения прокрутки. Он позиционируется относительно до тех пор, пока заданное положение смещения не будет выполнено в видимом экране — тогда он «прилипает» на месте (например, position:fixed).

Примечание: Internet Explorer, Edge 15 и более ранние версии не поддерживают фиксированное позиционирование. Safari требует префикс -webkit- (см. пример выше). Необходимо также указать по крайней мере одно из top, right, bottom или left для липкое позиционирование работы.

Еще примеры

Отзывчивая верхняя навигация

Как использовать медиа запросы CSS для создания адаптивной верхней навигации.

Редактор кода »

Отзывчивая боковая навигация

Как использовать медиа запросы CSS для создания адаптивной навигации по сайту.

Редактор кода »

Выпадающий список навигации

Как добавить выпадающее меню в панели навигации.

Редактор кода »

Создаем фиксированное навигационное меню | HTML/xHTML

Фиксированное навигационное меню часто называют «липким» меню, потому как его суть, помимо самой навигации, состоит в том, что оно всегда остается в одном положении на странице, независимо от скроллинга пользователя.

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

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

В этой статье я покажу вам простой CSS-прием для внедрения в сайт горизонтального «липкого» навигационного меню.

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

Ниже я привожу несколько ссылок.

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


Разработчики онлайн-публикатора 99U встроили в навигационную панель меню навигации. Во время чтения новости пользователь ресурса имеет возможность моментального перехода в необходимый ему раздел сайта:


Сайт Forbes.com расположил меню, систему поиска по сайту и виджет для авторизации на фиксированной панели навигации, предоставив пользователю, читающему новости удобство быстрого доступа.

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


И, как хорошо видно из предыдущего примера, навигационная панель существенно повышает юзабилити сайта с множеством разнообразного контента.

Навигационная панель это отличный способ, позволяющий сократить время, потраченное на переход от одной задачи к другой при работе с сайтом (поиск, авторизация, перемещение по структуре). Говоря по-существу, этот элемент дизайна, повышает эффективность сайта, применяя законы Фиттса:

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

Ниже демонстрационный пример того, как это выглядит на практике:


ПРОСМОТРЕТЬ ДЕМО
СКАЧАТЬ ИСХОДНИКИ С GITHUB

Перейти к GitHub Repository

Разметка требуется минимальная — элемент блочной верстки, в который мы поместим содержимое фиксированной навигационной панели:

<nav>   <!-- Содержимое навигационной панели --> </nav>

Элемент nav отлично подходит в данном случае. Он предоставляет сторонним сервисам (таким, как например роботы поисковых систем) возможность без проблем понимать информационную структуру вашего сайта. Элемент nav по умолчанию является блочным, так что не нужно писать лишнюю строчку CSS-кода.

Но если вы не хотите использовать nav, то подойдет любой по умолчанию блочный элемент, например div. Также можно использовать inline-элемент, такой как span, но прописать ему в CSS-коде свойство display: block.

Вот CSS-код, который заставляет нашу навигационную панель фиксироваться в одном месте:

.fixed-nav-bar {   position: fixed;   top: 0;   left: 0;   z-index: 9999;   width: 100%;   height: 50px;   background-color: #00a087; }

Ранее, мы присвоили нашему HTML-элементу класс fixed-nav-bar, поэтому сейчас просто применим к данному селектору нужные стили.

Значения трех последних свойств (width, height и background-color) меняйте на подходящие для вашего сайта.

Давайте теперь рассмотрим подробнее эти четыре волшебных CSS-свойства, ответственных за магию:

Когда мы устанавливаем значение position равным fixed панель позиционируется относительно области просмотра. Это и позволяет панели оставаться на одном месте:

top: 0; left: 0; right: 0;

Устанавливая свойства top, left и right в 0, мы избегаем нежелательного появления отступов по сторонам панели навигации.

Подсказка: если нужно разместить панель в «подвале» области просмотра то, нужно просто заменить top: 0 на bottom: 0:

Такое большое значение z-index используется, чтобы избежать появления другого элемента HTML-разметки поверх фиксированной панели навигации (если конечно не появится элемента со значением z-index больше, чем 9999).

На этом, пожалуй, все.

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

Исследуйте исходный код, если вам станет интересно, как работает эта часть (если возникнут непонятные моменты, просто делайте tweet и я буду счастлив помочь вам разобраться).

Фиксированная панель навигации довольно проста в реализации. Она требует минимальной HTML-разметки и всего несколько CSS-свойств, которые мы с вами рассмотрели.

Обсуждаемый в этой статье метод имеет отличную кроссбраузерную совместимость, потому как использует только проверенные и надежные свойства CSS, и, таким образом, будет работать должным образом даже в самых древних веб-браузерах. Тем не менее, если обратная совместимость сильно важна для ваших проектов, вы можете принять решение о замене nav (который относится к HTML5) на div.

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

Данная публикация представляет собой перевод статьи «How to Create a Fixed Navigation Bar» , подготовленной дружной командой проекта Интернет-технологии.ру

Ссылки в HTML. Якоря в HTML. Виды HTML навигации. Пути ссылок в HTML

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Ссылка — один из самых важных элементов веб-страницы, при помощи ссылок посетители могут перемещаться по сайтам, ссылки мы используем, чтобы делиться информацией, найденной в интернете с другими людьми. В общем, если бы в HTML не было ссылок, то их обязательно придумали, иначе сейчас мы бы не пользовались сетью Интернет.

Ссылки в HTML. Якоря в HTML. Виды HTML навигации. Пути ссылок в HTML

Ссылки в HTML. Якоря в HTML. Виды HTML навигации. Пути ссылок в HTML

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

Применение ссылок в HTML

Содержание статьи:

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

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

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

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

Виды ссылок в HTML

Вне зависимости от того, к какому виду относится HTML ссылка, она формируется при помощи специального HTML тэга <a>. Данный тэг является парным HTML тэгом с обязательным закрывающим тэгом. Элемент ссылки является строчным HTML элементом. Общий синтаксис создания HTML ссылок можно записать следующим образом:

<a href=»url/uri»>ссылка</a>

<a href=»url/uri»>ссылка</a>

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

Но HTML ссылки можно разделить еще и на абсолютные и относительные. Абсолютные ссылки содержат абсолютные URL (такие URL не зависят от своего физического расположения и работают везде), например URL главной страницы моего сайта ZametkiNaPolyah.ru является абсолютным и доступен с любого компьютера, подключенного к сети Интернет, по HTTP протоколу. Относительные адреса HTML ссылок строятся относительно какой-нибудь физической области на жестком диске, например, относительно корня сайта или относительно корня диска C, можно даже относительно какой-нибудь отдельной папки.

SEO оптимизаторы делят еще ссылки на внутренние и внешние. Внутренняя HTML ссылка ведет на другую одного и того же сайта. А внешняя HTML ссылка ведет на страницу другого сайта.

Подведем промежуточный итог о видах HTML ссылок. HTML ссылки в HTML делятся на внутренние и внешние, если смотреть на них с позиции SEO. Ссылки делятся на постраничные и межстраничные. А также HTML ссылки можно разделить по значению атрибута href на относительные и абсолютные.

Атрибуты HTML ссылок

Для HTML ссылок доступны все универсальные HTML атрибуты и события. Но также у HTML ссылок есть довольно-таки большое количество уникальных HTML атрибутов. Давайте посмотрим на атрибуты, доступные при создании HTML ссылок а дадим им короткую характеристику:

  1. Атрибут accesskey. Позволяет активировать HTML ссылку при помощи определенных комбинаций клавиш, которые указываются в данном атрибуте.
  2. Атрибут coords. Позволяет установить координаты активной области HTML ссылки внутри тэга <object>.
  3. Атрибут download. Позволяет сказать браузеру, что данная ссылка является ссылкой на скачивание.
  4. Атрибут href. При помощи этого атрибуты мы можем указать путь, по которому ведет HTML ссылка.
  5. Атрибут hreflang. Этот атрибут определяет язык документа, на который ведет HTML ссылка.
  6. Атрибут name. При помощи данного атрибута мы указываем имя HTML якоря.
  7. Атрибут rel. При помощи атрибут rel мы указываем в каком отношение находится ссылаемая HTML страница, с текущей (на которой находится пользователь).
  8. Атрибут rev. Данный атрибут позволяет задать отношение между текущим документом и тем документом, на который ведет HTML ссылка.
  9. Атрибутs shape Изображения в HTML могут быть ссылками, данный атрибут поможет вам задать область HTML изображения, которая является ссылкой.
  10. Атрибут tabindex. Не у всех ваших посетителей есть мышка, поэтому можно задать порядок получения фокуса HTML ссылки при помощи данного атрибута, чтобы посетителю было удобнее пользоваться вашим сайтом.
  11. Атрибут target. Данный атрибут позволяет указать имя окна или фрейма, куда браузер будет загружать документ, указанный по ссылке.
  12. Атрибут title Полезный атрибут, который позволяет создать подсказку при наведении курсора мыши на HTML ссылку.
  13. Атрибут type Этот атрибут служит для указания MIME-типа документа, на который ведет ссылка.

Итак, мы разобрались с HTML атрибутами ссылок и теперь можем более детально поговорить про создание ссылок на HTML страницах в браузере.

Внешние ссылки в HTML. Межстраничная навигация по сайту

Начнем с самого простого – с внешних HTML ссылок или с ссылок, которые ведут на другие страница сайта. Обычно такие ссылки используются для создания меню на сайте или для организации внутренней перелинковки сайта. Мы уже упоминали, что любая ссылка имеет атрибут href, который служит для указания пути к документу. Давайте создадим простой пример HTML ссылки:

<a href=”//zametkinapolyah.ru/” title=”Сайт о создании сайтов” >Создание сайтов</a>

<a href=”//zametkinapolyah.ru/” title=”Сайт о создании сайтов” >Создание сайтов</a>

Данная ссылка будет вести на главную страницу моего сайта, текст ссылки или ее анкор: «Создание сайтов», а при наведении курсора мыши на текст ссылки браузер покажет подсказку: «Сайт о создании сайтов». Если вы хотите проявить заботу о тех посетителях вашего сайта, которые пользуются ноутбуком или нетбуком без мышки, то используйте атрибут tabindex, который позволяет задать порядок переключения между HTML ссылками при помощи клавиши Tab:

<a href=”//zametkinapolyah.ru/” title=”Сайт о создании сайтов” tab=”1” >Создание сайтов</a> <a href=”//zametkinapolyah.ru/zametki-o-mysql/sqlite” title=”Уроки по SQL и базам данных SQLite” tab=”2” >Библиотека SQLite</a> <a href=”//zametkinapolyah.ru/verstka-sajtov/html” title=”Самоучитель по языку HTML” tab=”3” >HTML</a>

<a href=”//zametkinapolyah.ru/” title=”Сайт о создании сайтов” tab=”1” >Создание сайтов</a>

 

<a href=”//zametkinapolyah.ru/zametki-o-mysql/sqlite” title=”Уроки по SQL и базам данных SQLite” tab=”2” >Библиотека SQLite</a>

 

<a href=”//zametkinapolyah.ru/verstka-sajtov/html” title=”Самоучитель по языку HTML” tab=”3” >HTML</a>

Теперь при нажатии клавиши Tab, фокус сперва получит ссылка с анкором «Создание сайтов», если еще раз нажать Tab, браузер переключится на ссылку «Библиотека SQLite», третье нажатие клавиши позволит переключиться на ссылку с текстом «HTML».

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

Мы можем сказать браузеру, как открывать HTML ссылку. У нас есть четыре вариант того, как открывать HTML ссылку:

  1. Открывать страницу в новом окне/вкладке браузера: target=”_blanc”.
  2. Открывать страницу в текущем окне браузера: target=”_self”.
  3. Открывать страницу в родительском фрейме: target=”_parent”.
  4. Отменить все фреймы и открыть страницу в полном окне: target=”_top”.

Отметим, что последних два варианта используются не так часто, и мы их рассмотрим, когда поговорим про HTML фреймы, так же стоит сказать, что если на странице нет фреймов эти значения работают, как target=”_self”. По умолчанию браузер использует значение target=”_self”, поэтому обычно все ссылки открываются в текущей вкладке. Стоит заметить, что XHTML документы запрещают использование атрибуты target.

Давайте рассмотрим несколько примеров. Первый пример мы уже видели:

<a href=”//zametkinapolyah.ru/” title=”Сайт о создании сайтов” >Создание сайтов</a> <a target=”_self” href=”//zametkinapolyah.ru/” title=”Сайт о создании сайтов” >Создание сайтов</a>

<a href=”//zametkinapolyah.ru/” title=”Сайт о создании сайтов” >Создание сайтов</a>

 

<a target=”_self” href=”//zametkinapolyah.ru/” title=”Сайт о создании сайтов” >Создание сайтов</a>

Обе ссылки будут открыты в текущей вкладке браузер, следовательно, мы можем не указывать атрибут target со значением _self, если хотим, чтобы документ по ссылке открывался в текущей вкладке браузера. Пример открытия ссылки в новой вкладке/окне:

<a href=”//zametkinapolyah.ru/” title=”Ссылка будет открыта в новой вкладке благодаря значению _blanc” >Создание сайтов</a>

<a href=”//zametkinapolyah.ru/” title=”Ссылка будет открыта в новой вкладке благодаря значению _blanc” >Создание сайтов</a>

Ссылка из примера выше будет открыта в новой вкладке, так как для нее мы указали атрибут target=”_blanc”. Обращу ваше внимание на то, что не все посетители вашего сайта, мягко говоря, любят, когда ссылки на сайте открываются в новой вкладке автоматически (сам автор, мягко говоря, не очень любит сайты, на которых открытие в новой вкладке происходит автоматически), поэтому смею вам посоветовать использовать атрибут title с аналогичной подсказкой, в которой вы сообщите посетителю, что ссылка будет открыта в новой вкладке.

Якорь в HTML или внутренние HTML ссылки. Постраничная навигация в HTML

Дайте познакомимся с понятием  HTML якоря. Мы уже упоминали, что HTML якоря используются для создания постраничной навигации HTML документа. Пример использования HTML якоря вы можете найти на любой странице моего блога. Каждая публикация сопровождается небольшой навигацией по статье в ее начале.

Мы уже знаем, что для создания HTML якоря используется специальный атрибут name, который позволяет задать имя якорю (имя метки, на которую будет вести ссылка). Общий синтаксис якоря будет выглядеть примерно следующим образом:

<a name=»my_position»></a>

<a name=»my_position»></a>

HTML якоря удобно применять в том случае, если ваш HTML документ очень большого размера и посетителю бывает непросто сориентироваться внутри данного документа. Обратите внимание: у HTML якоря обычно нет содержимого, это делается намеренно. А теперь давайте сделаем ссылку, которая будет направлять браузер к тому месту страницы, где расположен HTML якорь:

<a href=”#my_position”>Браузер осуществит переход к тому месту, где расположен якорь my_position</a>

<a href=”#my_position”>Браузер осуществит переход к тому месту, где расположен якорь my_position</a>

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

Стоит обратить внимание на то, как браузер работает с якорями. Когда вы переходите к HTML якорю и затем нажимаете кнопу «Назад», то браузер будет возвращать вас не на предыдущую открытую страницу, а к тому месту в HTML документе, где расположена ссылка на якорь.

Ссылку с HTML якорем можно создавать не только для текущей страницы, но и для других документов, например, мы можем осуществить переход к определенному разделу другого HTML документа из текущего следующим образом:

<a href=”//zametkinapolyah.ru/zametki-o-mysql/chast-12-8-poluchit-znachenie-iz-bazy-dannyx-v-diapazone-between-i-select-v-sql-i-bazax-dannyx-sqlite.html#_BETWEEN_SELECT_SQL__SQLite ”>Переход будет осуществлен к разделу HTML документа, а не к его началу </a>

<a href=”//zametkinapolyah.ru/zametki-o-mysql/chast-12-8-poluchit-znachenie-iz-bazy-dannyx-v-diapazone-between-i-select-v-sql-i-bazax-dannyx-sqlite.html#_BETWEEN_SELECT_SQL__SQLite ”>Переход будет осуществлен к разделу HTML документа, а не к его началу </a>

Чтобы осуществить переход к HTML якорю на другой странице, вам нужно сперва указать путь к странице, затем написать символ «#» и затем имя якоря. Если вы создали ссылку на другую страницу с якорем, а якоря нет, то браузер осуществит переход к началу указанного HTML документа и при этом это не будет считаться ошибкой.

Минусом использования HTML якоря является то, что браузеру приходится создавать лишний пустой HTML элемент на странице, а нам приходится писать немного больше HTML кода, поэтому стандарт разрешает использовать HTML идентификаторы для того, чтобы делать постраничную навигацию в HTML документе. Напомним, что для создания HTML идентификатора используется атрибут id. Такой подход очень удобен, если вы разделяете документ при помощи HTML заголовков на разделы. Давайте посмотрим пример создания постраничной навигации в HTML при помощи идентификаторов. Сперва нам нужно задать идентификаторы для тех элементов страницы, к которым будут вести ссылки, например:

<h4 id=”head1”>Первый заголовок</h4> <h4 id=”head2”>Второй заголовок</h4> <h4 id=”head3”>Третий заголовок</h4>

<h4 id=”head1”>Первый заголовок</h4>

 

<h4 id=”head2”>Второй заголовок</h4>

 

<h4 id=”head3”>Третий заголовок</h4>

А теперь нам нужно создать саму постраничную навигацию при помощи HTML ссылок, которые будут направлять посетителя к тому разделу страницы, в котором расположен заголовок:

<ul> <li><a href=”#head1”>Ссылка на раздел первого заголовка</a></li> <li><a href=”#head3”>Ссылка на раздел второго заголовка</a></li> <li><a href=”#head3”>Ссылка на раздел третьего заголовка</a></li> </ul>

<ul>

 

<li><a href=”#head1”>Ссылка на раздел первого заголовка</a></li>

 

<li><a href=”#head3”>Ссылка на раздел второго заголовка</a></li>

 

<li><a href=”#head3”>Ссылка на раздел третьего заголовка</a></li>

 

</ul>

Для создания постраничной навигации мы использовали HTML списки и ссылки, каждая ссылка будет вести не на другой HTML документ, а к определенному разделу страницы. Соответствие между ссылкой и разделом страницы устанавливается при помощи атрибутов id и href: их значения должны совпадать. А путь, который указывается в атрибуте href должен начинаться с символа «#».

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

Путь ссылки в HTML: абсолютные и относительные ссылки

Мы уже упоминали, что у HTML ссылок есть путь, путь бывает относительным и абсолютным, например, пути: //zametkinapolyah.ru/ и //zametkinapolyah.ru/verstka-sajtov, являются абсолютными, так как такие ссылки будут однозначно идентифицировать ресурс, по которому находится документ из любой точки. При этом неважно, где такая ссылка проставлена: на сайте в Австралии или же в презентации PowerPoint на вашем компьютере. Собственно, мы уже ранее подробно рассмотрели использование абсолютных HTML ссылок.

Давайте лучше поговорим про относительные HTML ссылки. Особенностью таких ссылок является то, что путь для них указывается относительно какого-то объекта файловой системы компьютера, на котором расположен ваш документ или сайт. Такие ссылки будут работать только внутри этой файловой системы или сайта. Например, ссылка:

<a href=”verstka-sajtov/html”>HTML</a>

<a href=”verstka-sajtov/html”>HTML</a>

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

<a href=”C:\Users\Aspire\Desktop\HTML\Lesson 5\space.html”>Пример пробелов в HTML</a>

<a href=”C:\Users\Aspire\Desktop\HTML\Lesson 5\space.html”>Пример пробелов в HTML</a>

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

Цвета HTML ссылок. Учимся менять цвет ссылки при помощи HTML атрибутов

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

Если можно так сказать, то у ссылок в HTML есть три состояния:

  1. Обычная ссылка, по которой еще не переходил пользователь.
  2. Ссылка, по которой пользователь осуществлял переход.
  3. Ссылка на текущий документ (документ открытый в данный момент).

Каждое из этих состояний отмечается специальным цветом в HTML: не посещённые ссылки по умолчанию отображаются браузером синим цветом, ссылки, которые пользователь уже посетил пурпурные, а текущие ссылки браузеры обычно выделяют красным цветом.

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

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

У <body> для изменения цвета ссылок есть три атрибута:

  1. Атрибут link. Используется для изменения цвета ссылок, которые пользователь еще не посетил.
  2. Атрибут vlink. Позволяет изменить цвет ссылок, которые пользователь уже посетил.
  3. Атрибут alink. Изменяет цвет активной HTML ссылки.

Такой подход лучше не использовать, так как содержимое лучше отделять от его оформления.

Примеры использования HTML ссылок

Теперь давайте создадим HTML документ, в котором попрактикуемся в создании HTML ссылок. Для этого нам потребуется редактор, можно даже Блокнот (хотя есть множество прекрасных и многофункциональных альтернатив: IDE NetBeans, Brackets, Notepad++, Sublime Text 3), и браузер. Создадим простой HTML документ:

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Ссылки в HTML</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <h2>Примеры работы с ссылками в HTML</h2><a name=»top_document»></a> <h4>Навигация по странице</h4> <ul> <li><a href=»#head1″>Абсолютный путь</a></li> <li><a href=»#head2″>Относительный путь</a></li> <li><a href=»#head3″>Атрибут target со значением _blanc</a></li> <li><a href=»#head4″>Межстраничная навишация</a></li> <li><a href=»#head5″>Якорь в HTML</a></li> </ul> <h3>Примеры с использованием абсолютного пути</h3> <p>Для HTML ссылок можно задавать абсолютный путь, в этом случае документ, к которому ведет ссылка может быть открыт из любого места земного шара и на любом устройстве, например <a href=»//zametkinapolyah.ru/»>Блог о создании сайтов</a></p> <h3>Примеры с использованием относительного пути</h3> <p>Нужно понимать, что относительный путь получил свое название от того, что он строится относительно какой-то физической точки, например, папки на вашем компютере или корня вашего сайта. Приведем простой пример ссылки с относительным путем: <a href=»..\Lesson 5\pre.html»>пример авторского форматирования</a>. В данном случае мы создали ссылку с относительным путем. Относительный он потому, что такая ссылка будет работать только на локальном компюьтере с определенной файловой системой.</p> <h3>Пример открытия HTML ссылки в новом окне</h3> <p>Атрибут target позволяет сказать браузеру о том, как открывать ссылку, давайте сделаем так, чтобы ссылка открывлась в новом окне: <a href=»//zametkinapolyah.ru/» target=»_blanc» title=»Ссылка откроется в новом окне»> Блог о создании сайтов</a>. Не злоупотребляйте использованием данного атрибута.</p> <h3>Пример межстраничной навигации</h3> <p>Любое меню на сайте в 99 случаях из 100 — это комбинация HTML ссылок и HTML списков:</p> <ul> <li><a href=»//zametkinapolyah.ru/verstka-sajtov»>Верстка сайтов</a></li> <li><a href=»//zametkinapolyah.ru/verstka-sajtov/css»>CSS</a></li> <li><a href=»//zametkinapolyah.ru/verstka-sajtov/html»>HTML</a></li> <li><a href=»//zametkinapolyah.ru/verstka-sajtov/less»>LESS</a></li> <li><a href=»//zametkinapolyah.ru/verstka-sajtov/sass»>SASS</a></li> </ul> <p> Мы создали простое меню на сайте или другими словами: мы создали межстраничную навигацию для сайта. Меню довольно простое и никак не оформлена, но в скором времени мы исправим данную ситуацию, когда начнем изучать CSS. </p> <h3>Пример ссылки на скачивание</h3> <p> Атрибут download один из тех редких атрибутов, который не имеет значений, а назначение его — говорить браузеру о том, что данная ссылка является ссылкой на скачивание: <a href=»..\Lesson 5\pre.html» download> Скачать файл</a>. </p> <p> Вам нужно понимать, как работают ссылки с относительным путем, чтобы успешно создавать ссылки на скачивание в своих HTML документах. </p> <h3>Создание HTML якоря</h3> <p> И в завершении примера рассмотрим HTML якорь, мы создали якорь рядом с заголвком h2, а теперь сделаем ссылку на якорь: <a href=»#top_document»>наверх</a> </p> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

<!DOCTYPE html>

 

<html lang=»ru-RU»>

 

<head>

 

<meta charset=»UTF-8″>

 

<title>Ссылки в HTML</title>

 

<link rel=»stylesheet» type=»text/css» href=»style.css» />

 

</head>

 

<body>

 

<h2>Примеры работы с ссылками в HTML</h2><a name=»top_document»></a>

 

<h4>Навигация по странице</h4>

 

<ul>

 

<li><a href=»#head1″>Абсолютный путь</a></li>

 

<li><a href=»#head2″>Относительный путь</a></li>

 

<li><a href=»#head3″>Атрибут target со значением _blanc</a></li>

 

<li><a href=»#head4″>Межстраничная навишация</a></li>

 

<li><a href=»#head5″>Якорь в HTML</a></li>

 

</ul>

 

<h3>Примеры с использованием абсолютного пути</h3>

 

<p>Для HTML ссылок можно задавать абсолютный путь, в этом случае

 

документ, к которому ведет ссылка может быть открыт из любого места

 

земного шара и на любом устройстве, например

 

<a href=»//zametkinapolyah.ru/»>Блог о создании сайтов</a></p>

 

<h3>Примеры с использованием относительного пути</h3>

 

<p>Нужно понимать, что относительный путь получил свое название от того, что

 

он строится относительно какой-то физической точки, например, папки на

 

вашем компютере или корня вашего сайта. Приведем простой пример ссылки с относительным

 

путем: <a href=»..\Lesson 5\pre.html»>пример авторского форматирования</a>. В данном

 

случае мы создали ссылку с относительным путем. Относительный он потому,

 

что такая ссылка будет работать только на локальном компюьтере с определенной

 

файловой системой.</p>

 

<h3>Пример открытия HTML ссылки в новом окне</h3>

 

<p>Атрибут target позволяет сказать браузеру о том, как открывать ссылку, давайте

 

сделаем так, чтобы ссылка открывлась в новом окне:

 

<a href=»//zametkinapolyah.ru/» target=»_blanc» title=»Ссылка откроется в новом окне»>

 

Блог о создании сайтов</a>. Не злоупотребляйте использованием данного атрибута.</p>

 

<h3>Пример межстраничной навигации</h3>

 

<p>Любое меню на сайте в 99 случаях из 100 — это комбинация HTML ссылок и HTML списков:</p>

 

<ul>

 

<li><a href=»//zametkinapolyah.ru/verstka-sajtov»>Верстка сайтов</a></li>

 

<li><a href=»//zametkinapolyah.ru/verstka-sajtov/css»>CSS</a></li>

 

<li><a href=»//zametkinapolyah.ru/verstka-sajtov/html»>HTML</a></li>

 

<li><a href=»//zametkinapolyah.ru/verstka-sajtov/less»>LESS</a></li>

 

<li><a href=»//zametkinapolyah.ru/verstka-sajtov/sass»>SASS</a></li>

 

</ul>

 

<p>

 

Мы создали простое меню на сайте или другими словами: мы создали межстраничную навигацию для сайта.

 

Меню довольно простое и никак не оформлена, но в скором времени мы исправим данную ситуацию,

 

когда начнем изучать CSS.

 

</p>

 

<h3>Пример ссылки на скачивание</h3>

 

<p>

 

Атрибут download один из тех редких атрибутов, который не имеет значений,

 

а назначение его — говорить браузеру о том, что данная ссылка является ссылкой

 

на скачивание:

 

<a href=»..\Lesson 5\pre.html» download>

 

Скачать файл</a>.

 

</p>

 

<p>

 

Вам нужно понимать, как работают ссылки с относительным путем, чтобы успешно создавать

 

ссылки на скачивание в своих HTML документах.

 

</p>

 

<h3>Создание HTML якоря</h3>

 

<p>

 

И в завершении примера рассмотрим HTML якорь, мы создали якорь рядом с

 

заголвком h2, а теперь сделаем ссылку на якорь: <a href=»#top_document»>наверх</a>

 

</p>

 

</body>

 

</html>

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

Навигация для сайта.

html

Привет, Уважаемые подписчики!

Только закончил работу над очередным проектом. В нем помимо основного меню, присутствовала так же и навигация. И я решил, что неплохо было бы показать вам, как подобные вещи делаются буквально в несколько строк кода. Причем делается это исключительно средствами html и css.


html

Такая навигация ставится обычно слева на сайте. Ничего сложного при ее разработке нет. Каждый пункт навигации заключаем в тег <h3>…</h3>. В него ставится ссылка.

PSD макет данной вещи для тренировки можно скачать тут.

Так же данный урок доступен в видео версии, которую можно скачать здесь:

Качаем виде версию урока.

html

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

Ну, в общем все! Давайте посмотрим на код, и все станет ясно окончательно.

<div>

<h3><a href="#">О ЦЕНТРЕ</a></h3>

<h3><a href="#">ФОТОГАЛЕРЕЯ</a></h3>

<h3><a href="#">ПРЕЙСКУРАНТ ЦЕН</a></h3>

<h3><a href="#">КОНТАКТЫ</a></h3>

</div>

Все остальное будем делать с помощью стилей.

Для класса .bar-menu назначаются стили, которые нужны исходя из расположения соседних блоков. У меня в примере ничего кроме этой навигации на странице нет, поэтому я просто задам ему ширину.

Поскольку текст располагается по центу, то проще всего его отцентрировать, задав для тега <h3> выравнивание текста по центру.

Далее нам нужно вырезать картинки, которые поставим фоном для ссылок.

Вырезаем фон для обычной ссылки:

img17-1

И для ссылки в наведенном состоянии:

html

Картинки вырезаны, принимаемся писать css код для навигации. Точнее для ссылок навигации! Остальные стили у нас уже есть.

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

.bar-menu h3 a{

background:url(images/bg-menu-main.jpg) center center;

font-family:Tahoma;

font-size:10px;

color:#056e04;

font-weight:bold;

}

И что ж мы увидим?

html

Почему так? Дело в том, что фоновая картинка расположилась в ссылке ровно на столько, сколько ей позволяет это сделать текст. То есть ширина и высота ссылки определяется лежащим в ней текстом. Это кстати явный признак строчных тегов. Давайте укажем ширину и высоту:

.bar-menu h3 a{

background:url(images/bg-menu-main.jpg) center center;

font-family:Tahoma;

font-size:10px;

color:#056e04;

font-weight:bold;

width:190px;

height:27px;

}

html

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

По-прежнему ничего не изменилось.

html

Мы не перевели ссылку из строчного типа в блочный. За это отвечает свойство display со значением block. Добавим это свойство:

.bar-menu h3 a{

background:url(images/bg-menu-main.jpg) center center;

font-family:Tahoma;

font-size:10px;

color:#056e04;

font-weight:bold;

width:190px;

height:27px;

display:block;

}

Вроде начинает навигация принимать нужный нам вид:

img17-1

Добавляем отступ снизу у каждой из ссылок. Так же добавляем padding-top для каждой из ссылок и незабываем его вычесть из высоты:

.bar-menu h3 a{

background:url(images/bg-menu-main.jpg) center center;

font-family:Tahoma;

font-size:10px; color:#056e04;

font-weight:bold;

width:190px;

height:21px;

display:block;

margin-bottom:10px;

padding-top:6px;

}

Получаем то, что нужно:

html

Доделываем ссылку в состоянии hover. В общем, копируем код для обычной ссылки и меняем значение фона, цвета текста ссылки и делаем текст не подчеркнутым. Остальное оставляем без изменения:

.bar-menu h3 a:hover{

background:url(images/bg-menu.jpg) center center;

font-family:Tahoma;

font-size:10px;

color:#ffffff;

font-weight:bold;

width:190px;

height:21px;

display:block;

margin-bottom:10px;

padding-top:6px;

text-decoration:none;

}

Вот и получилась наше навигационное меню:

html

Надеюсь, урок будет полезен. С вами был Андрей. Спасибо за внимание. До встречи в очередных уроках!

Автор: Андрей Бернацкий.

E-mail:[email protected]

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

html

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться html

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+6.0+10.6+5.0+4.0+2.1+3.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <nav> задает навигацию по сайту. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов <nav> в документе. Запрещается вкладывать <nav> внутрь <address>.

Синтаксис

<nav>ссылки</nav>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>nav</title>
 </head> 
 <body>
  <header>
    <h2>Чебурашка и крокодил Гена</h2>
  </header>
  <nav><a href="1.html">Чебурашка</a> | <a href="2.html">Гена</a> |
       <a href="3.html">Шапокляк</a> | <a href="4.html">Лариска</a></nav>
  <article>
    <h3>Добро пожаловать!</h3>
  </article>
 </body> 
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Навигация по сайту

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <nav>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору NAV.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

Тег | HTML справочник

HTML теги

Значение и применение

Тег <nav> (навигация) используется для обозначения содержимого в виде основных навигационных ссылок. Документ может иметь несколько элементов <nav>, например, один для навигации по сайту, а второй для навигации по странице.

<nav> <!-- начало навигации -->
	<ul> <!-- маркированный список -->
		<li><a href = "#">Домой</a></li> <!-- ссылка в элементе списка -->
		<li><a href = "#">HTML</a></li> <!-- ссылка в элементе списка -->
		<li><a href = "#">CSS</a></li> <!-- ссылка в элементе списка -->
	</ul> <!--конец списка-->
</nav> <!-- конец навигации -->
Пример размещения тега <nav> на странице.

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

Тег <div> имеет довольно общий характер — это просто элемент на уровне блока, используемый для разбиения страницы на разделы. Одна из целей HTML 5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически более осмысленных тегов.

Рис. 43 Человек, который использует только тег <div>.

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

Поддержка браузерами

Пример использования

Рассмотрим пример в котором сделаем простую разметку для сайта, используя современный стандарт гипертекстовой разметки HTML5.

<!DOCTYPE html>
<html>
	<head>
		<title>Разметка страницы</title>
	</head>
	<body>
		<header style = "background-color:khaki; height:100px">
			<p>Верхний колонтитул (тег <header>)</p>
		</header>
		<nav style = "background-color:coral; height:75px">
			<a href = "#">Ссылка 1</a> |
			<a href = "#">Ссылка 2</a> |
			<a href = "#">Ссылка 3</a> |
		<p>Панель навигации (тег <nav>)</p>
		</nav>
		<aside style  = "float:right; width:200px; height:250px; background-color:tan">
			<p>Справа мы разместили тег <aside></p>
		</aside>
		<main style = "height:250px">
			<h2>Главный заголовок сайта</h2>
			<p>Основное содержимое (тег <main>)</p>
			<section style = "background-color:grey; height:75px">
				<h3>Заголовок второго уровня</h3>
				<p>Раздел 1 (тег <section>)</p>
			</section>
			<section style = "background-color:grey; height:75px">
				<h3>Заголовок второго уровня</h3>
				<p>Раздел 2 (тег <section>)</p>
			</section>
		</main>
		<footer style = "background-color:khaki; height:80px">
			<p>Нижний колонтитул (подвал) тег <footer></p> 
			<address>Пример с сайта basicweb.ru</address>
		</footer>
	</body>
</html>

Обратите внимание, что практически к каждому элементу для демонстрации мы применили встроенный CSS стиль, применение встроенных стилей не является хорошей практикой, научиться грамотно применять стили вы можете после изучения языка HTML 5 в Учебнике CSS 3.

И так по порядку, что мы сделали в этом документе:

  • Для элемента <header> (верхний колонтитул) мы задали цвет заднего фона khaki и установили высоту элемента равную 100 пикселям.
  • Следующим на странице мы разместили элемент <nav> (навигация), для которого задали те же встроенные CSS свойства, но указали цвет заднего фона coral, а высоту элемента 75 пикселей.
  • Далее мы разместили элемент <aside>, который мы сделали плавающим и сместили в правую сторону (CSS свойство float со значением right), задали ему цвет заднего фона (tan), ширину (200 пикселей) и высоту (250 пикселей). Как вы можете заметить другие элементы его обтекают, не смотря на то, что они блочные. Таким образом происходит верстка плавающими элементами. Подробно изучить работу с плавающими элементами вы можете в учебнике CSS в статье «Плавающие элементы».
  • Добавили на страницу элемент <main> в который мы добавили заголовок первого уровня (тег <h2>). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
  • Внутри элемента <main> мы добавили два тематических раздела (тег <section>), поместили внутри этих элементов заголовки второго уровня (тег <h3>), задали им цвет заднего фона grey и высоту блоков по 75 пикселей.
  • После основного содержимого мы разместили элемент <footer> (нижний колонтитул), по аналогии с предыдущими элементами задали ему цвет заднего фона (khaki) и высоту (80 пикселей). Внутри него разместили тег <address>, в котором указали контактные данные, которые по умолчанию отображаются курсивом.

Результат нашего примера:

Разметка страницы на HTML 5.

Значение CSS по умолчанию

nav {
display: block;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *