Код меню для сайта html: Виды горизонтальных меню для сайта


03.11.1976 Facebook Twitter LinkedIn Google+ Разное


Содержание

Меню, пожалуйста | WebReference

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

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Меню</title>
    <link rel="stylesheet" href="main.css" media="screen">
  </head>
  <body>
    <nav>
      <ul>
        <li>
          <a href="index.html">Главная</a>
        </li>
        <li>
          <a href="training.html">Обучение</a>
        </li>
        <li>
          <a href="conferences.html">Конференции</a>
        </li>
        <li>
          <a href="about.html">О нас</a>
        </li>
      </ul>
    </nav>
  </body>
</html>

Наше меню будет состоять из четырёх элементов:

  • Главная
  • Обучение
  • Конференции
  • О нас

Мы хотим, чтобы оно выглядело так.

Вы могли заметить, что мы добавили новые теги <nav>, <ul> и <li>.

<nav> используется для определения всех видов навигационных функций на сайтах, которые содержат ссылки на внутреннюю или внешнюю информацию. Размещение <nav> в коде говорит «всё внутри <nav> будет использоваться для навигации по сайту».

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

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

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

Теперь попробуем изготовить более стильное меню через наш код CSS.

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

Следующий тег <ul> начинает список. Мы хотим, чтобы наш список выглядел немного иначе, чем по умолчанию. Самое главное — добавить новый фон.

nav ul {
  background-color: PaleVioletRed;
}

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

На самом деле мы применили цвет фона ко всем элементам <ul>. Это потому, что мы применяем его к тегам <nav> и <ul> с помощью следующего селектора.

nav ul {}

Теперь мы хотим избавиться от круглых чёрных точек в этом списке и сделать его более похожим на меню. Мы можем скрыть их благодаря свойству list-style, как показано ниже.

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
}

Установка list-style в значение none делает список без характерных маркеров.

Это выглядит гораздо лучше.

Широкая область цвета удивительно большая. Мы хотим немного урезать её, используя тот же пример, что с рамкой вокруг изображения (padding).

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
  padding: 0;
}

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

Теперь пришло время для работы с размерами. Наша навигация должна быть 200 пикселей в ширину.

nav ul { background-color: PaleVioletRed; list-style: none; padding: 0; width: 200px; }

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

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
  padding: 0;
  width: 200px;
  border: 1px solid MediumVioletRed;
}

Вот результат и это выглядит здорово!

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

nav ul li {}

Этот код ищет <nav>, затем внутри <ul> и <li>. Кажется, что каждому элементу в списке нужна своя граница.

nav ul li {
  border-bottom: 1px solid MediumVioletRed;
}

С помощью этого кода мы добавили border-bottom, так что каждый элемент <li> теперь имеет такой же тип границы как у внешней рамки, но только в нижней части текста.

В настоящее время наше меню должно выглядеть так.

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

nav ul li {
  border-bottom: 1px solid MediumVioletRed;
  padding: 5px;
}

Это гораздо лучше, правда? Мы добавили padding шириной 5 пикселей между текстом и границами.

Наша вторая проблема менее заметна, но всё ещё существует в виде двойной линии в нижней части нашего меню. Это потому, что наша граница для меню добавилась к нашей границе для последнего элемента, когда мы вставили bottom-border. Помните, что мы использовали код в <ul> из <nav> для указания границы.

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
  padding: 0;
  width: 200px;
  border: 1px solid MediumVioletRed;
}

Также вспомним, что мы устанавливаем list-style в none так, что маркеры или любые другие знаки не появляются.

list-style: none;

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

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

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

Результат применения этого кода сверхэффективен.

Двойная граница исчезла, всё потому, что мы нашли <ul> в <nav>, а затем выбрали в нём последний <li> и отключили нижнюю границу. Псевдо-селектор last-child указывает на последний элемент списка.

nav ul li:last-child {}

Этот селектор можно перевести следующим образом:

«найдите <nav>, затем <ul> и примените все изменения к последнему элементу <li>».

Последнее, что нам нужно сделать, это настроить текст в ссылках. Вы можете создать ссылки в HTML следующим образом.

<a href="url">Набранный здесь текст ведёт на указанный веб-адрес</a>

Мы используем тег <a> вместе с атрибутом href. Значением этого атрибута должен быть адрес, на который вы хотите переместить пользователя, если он щёлкает по ссылке. В нашем примере у нас есть четыре ссылки. Одна из них выглядит так.

<a href="training.html">Обучение</a>

Это значит, что браузер будет показывать слово «Обучение», на которое можно щёлкнуть и затем браузер отправится на страницу, которая была сохранена в файле training. html.

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

nav ul li a {}

Вуаля!

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

nav ul li a {
  color: white;
}

Обновление браузера показывает наши новые изменения.

Отлично! Теперь у нас есть ссылки белого цвета. Изменим некоторые акценты. Браузер устанавливает выделение в CSS для всех ссылок в виде text-decoration: underline. Мы хотим изменить это значение, как мы уже делали это раньше со значением none.

nav ul li a {
  color: white;
  text-decoration: none;
}

Красота! Мы завершили желаемое меню.

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

Проверьте эту ссылку, которую я написал в своём Twitter (без подчёркивания).

При наведении указателя мыши на эту ссылку происходит нечто интересное, о чём многие интернет-пользователи хорошо знают — текст становится подчёркнутым.

Попробуем сделать нечто подобное в нашем меню, что позволит ссылке выделиться при наведении на неё. Мы будем использовать псевдо-селектор под названием hover.

nav ul li a:hover {
  text-decoration: underline;
}

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

div:hover
li:hover
img:hover

Эффект виден ниже, когда мы наводим курсор мыши на ссылку «Конференции».

В итоге, окончательный код CSS должен выглядеть так.

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
  padding: 0;
  width: 200px;
  border: 1px solid MediumVioletRed;
}
  
nav ul li {
  border-bottom: 1px solid MediumVioletRed;
  padding: 5px;
}

nav ul li:last-child {
  border-bottom: 0;
}

nav ul li a {
  color: white;
  text-decoration: none;
}

nav ul li a:hover {
  text-decoration: underline;
}

Недавно появившиеся псевдо-селекторы (last-child и hover) будут полезны в будущем.

В этой главе вы узнали, как использовать ссылки и вставлять их в HTML-документы. На данный момент мы использовали только адреса, ведущие на локальные файлы (например, training.html), сохранённые на вашем компьютере, но вы также можете использовать ссылки, указывающие на внешние сайты в Интернете, вроде этого.

<a href="http://twitter.com/varjs">Мой Twitter</a>

Этот код в браузере будет отображаться как Мой Twitter. Обратите внимание, что адрес содержит http:// в самом начале. Это правило говорит, что каждая ссылка используемая в HTML-документе и ведущая на другой сайт, должна быть с префиксом http://. В противном случае, ваши ссылки не будут перенаправлять пользователей в нужное место.

Автор и редакторы

Автор: Дамиан Вельгошик

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

css3 меню для сайта | Beloweb.ru

Здравствуйте, дорогие читатели блога. Сегодня представляю вторую часть подборки jQuery и CSS3 меню для Вашего любимого сайта. Если Вы не видели прошлую подборку, обязательно посмотрите. Я надеюсь, что Вам понравится. Наслаждайтесь:)

JQuery и HTML5 меню

Очень интересное меню с замечательным дизайном.

Пример ι Скачать исходники

Меню для сайта в стиле Apple

Отличная навигация для ресурса в голубых тонах с использованием JQuery.

Пример ι Скачать исходники

Интересное меню с JQuery

Простое и интересное меню с выбором объекта.

Пример ι Скачать исходники

Простое JQuery и css3 меню для сайта

Не сложное выпадающее меню.

Пример ι Скачать исходники

Многопользовательское выпадающее CSS3 меню

Классное выпадающее меню с подменю в тёмных тонах.

Пример ι Скачать исходники

CSS3 меню с выпадающими подменю

Очень интересное меню для сайта, я уверен Вам понравится:)

Пример ι Скачать исходники

Темное выпадающее CSS3 меню

Замечательное выпадающее меню для сайтов в тёмных тонах.

Пример ι Скачать исходники

Круглое меню для сайта

Бесподобное и удивительное меню сделанное в форме круга.

Пример ι Скачать исходники

Всплывающее меню с JQuery

Классное всплывающее меню внизу сайта. В примере нажмите крестик в нижнем левом углу.

Пример ι Скачать исходники

Выпадающее меню с JQuery

Пример ι Скачать исходники

Анимационное CSS3 меню

Очень красивое меню, которое подойдёт практически для любого сайта.

Пример ι Скачать исходники

Красивое CSS3 меню

Пример ι Скачать исходники

JQuery и CSS3 выпадающее меню

Отличное многоуровневое выпадающее меню в темных тонах для Вашего сайта.

Пример ι Скачать исходники

Анимационное меню для сайта

Пример ι Скачать исходники

Яркое и красивое меню с JQuery

Пример ι Скачать исходники

Меню для сайта с использованием JQuery

Замечательное меню с превосходным дизайном.

Пример ι Скачать исходники

Вертикальное и горизонтальное меню для сайта

Отличное меню с выпадающими ссылками и подсказками.

Пример ι Скачать исходники

Классное анимационное меню с JQuery

Пример ι Скачать исходники

Обалденное меню мозайка

Пример ι Скачать исходники

Горизонтальное выпадающее меню

Пример ι Скачать исходники

Создаем вертикальное меню для сайта на CSS используя анимации

 

@media only screen and (min-width: 1200px) {

    .container {

        width: 1210px;

    }

}

 

@media only screen and (min-width: 960px) and (max-width: 1199px) {

    .container {

        width: 1030px;

    }

 

    .mcd-menu {

        margin-left:10px;

    }

}

 

@media only screen and (min-width: 768px) and (max-width: 959px) {

    .container {

        width: 682px;

    }

 

    .mcd-menu {

        width: 200px;

    }

 

    .mcd-menu li a {

        height:30px;

    }

 

    .mcd-menu li a i {

        font-size: 22px;

    }

 

    . mcd-menu li a strong {

        font-size: 12px;

    }

 

    .mcd-menu li a small {

        font-size: 10px;

    }

 

    .mcd-menu li a.search input {

        width: 120px;

        font-size: 12px;

    }

 

    .mcd-menu li a.search button{

        padding: 8px 10px 9px 10px;

    }

 

    .mcd-menu li > ul {

        min-width:180px;

    }

 

    .mcd-menu li:hover > ul {

        min-width:180px;

        left:200px;

    }

 

    .mcd-menu li ul li > ul, 

    .mcd-menu li ul li ul li > ul {

        min-width:150px;

    }

 

    .mcd-menu li ul li:hover > ul {

        left:180px;

        min-width:150px;

    }

 

    .mcd-menu li ul li ul li:hover > ul {

        left:150px;

        min-width:150px;

    }

 

    .mcd-menu li ul a {

        font-size:12px;

    }

 

    . mcd-menu li ul a i {

        font-size:14px;

    }

}

 

@media only screen and (min-width: 480px) and (max-width: 767px) {

    .container {

        width: 428px;

        margin: 0 auto;

    }

 

    .mcd-menu {

        width: 50px;

    }

 

    .mcd-menu li a {

        position: relative;

        padding: 12px 16px;

        height:20px;

    }

 

    .mcd-menu li a small,

    .mcd-menu li a strong,

    .mcd-menu li .search {

        display: none;

    }

 

    .mcd-menu li a:hover strong,.mcd-menu li a.active strong {

        display:block;

        font-size:10px;

        padding:3px 0;

        position:absolute;

        bottom:0px;

        left:0;

        background:#e67e22;

        color:#FFF;

        min-width:100%;

        text-transform:lowercase;

        font-weight:normal;

        text-align:center;

    }

 

    . mcd-menu li > ul {

        min-width:180px;

        left:70px;

    }

 

    .mcd-menu li:hover > ul {

        min-width:180px;

        left:50px;

    }

 

    .mcd-menu li ul li > ul, 

    .mcd-menu li ul li ul li > ul {

        min-width:150px;

    }

 

    .mcd-menu li ul li:hover > ul {

        left:180px;

        min-width:150px;

    }

 

    .mcd-menu li ul li ul li > ul {

        left:35px;

        top: 45px;

        border:0;

        border-top:4px solid #e67e22;

    }

 

    .mcd-menu li ul li ul li > ul:before {

        left:30px;

        top: -9px;

        border:0;

        border-bottom:5px solid #e67e22;

        border-left:5px solid transparent;

        border-right:5px solid transparent;

    }

 

    .mcd-menu li ul li ul li:hover > ul {

        left:30px;

        min-width:150px;

        top: 35px;

    }

 

    . mcd-menu li ul a {

        font-size:12px;

    }

 

    .mcd-menu li ul a i {

        font-size:14px;

    }

}

 

@media only screen and (max-width: 479px) {

    .container {

        width: 320px;

        margin: 0 auto;

    }

 

    .mcd-menu {

        width: 50px;

    }

 

    .mcd-menu li a {

        position: relative;

        padding: 12px 16px;

        height:20px;

    }

 

    .mcd-menu li a small,

    .mcd-menu li a strong,

    .mcd-menu li .search {

        display: none;

    }

 

    .mcd-menu li a:hover strong,

    .mcd-menu li a.active strong {

        display:block;

        font-size:10px;

        padding:3px 0;

        position:absolute;

        bottom:0px;

        left:0;

        background:#e67e22;

        color:#FFF;

        min-width:100%;

        text-transform:lowercase;

        font-weight:normal;

        text-align:center;

    }

 

    . mcd-menu li > ul {

        min-width:180px;

        left:70px;

    }

 

    .mcd-menu li:hover > ul {

        min-width:180px;

        left:50px;

    }

 

    .mcd-menu li ul li > ul, 

    .mcd-menu li ul li ul li > ul {

        min-width:150px;

    }

 

    .mcd-menu li ul li:hover > ul {

        left:180px;

        min-width:150px;

    }

 

    .mcd-menu li ul li ul li > ul {

        left:35px;

        top: 45px;

        border:0;

        border-top:4px solid #e67e22;

    }

 

    .mcd-menu li ul li ul li > ul:before {

        left:30px;

        top: -9px;

        border:0;

        border-bottom:5px solid #e67e22;

        border-left:5px solid transparent;

        border-right:5px solid transparent;

    }

 

    .mcd-menu li ul li ul li:hover > ul {

        left:30px;

        min-width:150px;

        top: 35px;

    }

 

    . mcd-menu li ul a {

        font-size:12px;

    }

 

    .mcd-menu li ul a i {

        font-size:14px;

    }

}

Как вставить один и тот же код на все страницы сайта? SSI

.. или что такое SSI — Включения на стороне сервера?

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

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

Файл index.html :
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Включения на стороне сервера</title>
</head>
<body>
<table border=»1″ align=»center» cellspacing=»0″ cellpadding=»15″>
<tr>
<td colspan=»2″>
<h4>Шапка сайта. </h4>
Представьте что здесь есть логотип, ссылка на главную страницу, форма «поиск по сайту», графика в общем всё то что обычно располагают в шапке сайта..
</td>
</tr>
<tr>
<td>
<h5>Меню:</h5>
<ul>
<li><a href=»#»>Ссылка 1</a></li>
<li><a href=»#»>Ссылка 2</a></li>
<li><a href=»#»>Ссылка 3</a></li>
<li><a href=»#»>Ссылка 4</a></li>
<li><a href=»#»>Ссылка 5</a></li>
</ul>
</td>
<td>
<h5>Содержание сайта</h5>
Здесь основное содержание сайта, куча текста, рисунки, графики, таблицы.. контент короче. . И что интересно по сравнению с другими будущими страницами данного сайта меняться будет только эта ячейка! Ячейки с шапкой, подвалом, меню сайта будут точно такими же как и на всех остальных страницах.
</td>
</tr>
<tr>
<td colspan=»2″><h5>Подвал сайта</h5> Здесь авторские права, дата, адрес, счётчики..</td>
</tr>
</table>
</body>
</html>

В связи с этим веб мастерам приходится постоянно проделывать одни и те же операции..

Ну например: есть у Вас штук десять страниц сайта и Вы написали ещё одну — одиннадцатую и теперь чтобы связать страницу ссылками с другими страницами сайта Вам нужно открывать каждую страницу, искать в ней блок с меню, дописывать в этом блоке ссылку на новую страницу.. хорошо если страниц на сайте всего десять! А если их штук 100?? Убить полдня на перелинковку?

Выход есть!

А что если одинаковые кусочки кода повторяющиеся на каждой странице вынести в отдельные файлы, а потом загружать их в нужные места на страницы? Ну вот допустим вытащить ячейку с «меню» из примера выше в отдельный файл. . вот этот кусок кода:

<td>
<h5>Меню:</h5>
<ul>
<li><a href=»#»>Ссылка 1</a></li>
<li><a href=»#»>Ссылка 2</a></li>
<li><a href=»#»>Ссылка 3</a></li>
<li><a href=»#»>Ссылка 4</a></li>
<li><a href=»#»>Ссылка 5</a></li>
</ul>
</td>

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

Для этих целей существует технология SSI (Server Side Includes) — Включения на стороне сервера.

SSI — это директивы, вставляемые непосредственно в HTML и служащие для передачи указаний Web-серверу. Встречая такие директивы, Web-сервер интерпретирует их и выполняет соответствующие действия (вставка HTML-фрагмента из другого файла, динамическое формирование страниц и так далее)

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

Теперь по порядку.. будьте внимательны!!

  • Первое что нам необходимо сделать, это переименовать наш файл index.html на index.shtml — именно такое расширение файла указывает Web-серверу на то, что мы собираемся использовать SSI
  • Вырезаем из файла index.shtml куски кода которые будут повторятся на всех страницах сайта (в примере они выделены цветами) и сохраняем их отдельными файлами с расширением *.txt назовём, их к примеру:
    header.txt — файл с кодом «шапки» сайта
    menu.txt — файл с кодом меню сайта
    footer. txt — файл с кодом «подвала» сайта
    — обычно такие кусочки кода сохраняют в отдельной папке под именем include
  • Вставляем в нужные места кода файла index.shtml директивы — включения на стороне севера
    Пишутся эти директивы в виде комментариев вот так:
    <!—#include virtual=»include/menu.txt»—>
    — так например эта строчка заменит собой отсутствующий код с меню сайта и будет его черпать из файла menu.txt который лежит в папке include.

В результате всех этих манёвров у нас должно получиться четыре файла:

Файл index.shtml :
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Включения на стороне сервера</title>
</head>
<body>
<table border=»1″ align=»center» cellspacing=»0″ cellpadding=»15″>
<!—#include virtual=»include/header. txt»—>
<tr>
<!—#include virtual=»include/menu.txt»—>
<td>
<h5>Содержание сайта</h5>
Здесь основное содержание сайта, куча текста, рисунки, графики, таблицы.. контент короче.. И что интересно по сравнению с другими будущими страницами данного сайта меняться будет только эта ячейка! Ячейки с шапкой, подвалом, меню сайта будут точно такими же как и на всех остальных страницах.
</td>
</tr>
<!—#include virtual=»include/footer.txt»—>
</table>
</body>
</html>
Файл header.txt :
<tr>
<td colspan=»2″>
<h4>Шапка сайта.</h4>
Представьте что здесь есть логотип, ссылка на главную страницу, форма «поиск по сайту», графика в общем всё то что обычно располагают в шапке сайта. .
</td>
</tr>

Файл menu.txt :
<td>
<h5>Меню:</h5>
<ul>
<li><a href=»#»>Ссылка 1</a></li>
<li><a href=»#»>Ссылка 2</a></li>
<li><a href=»#»>Ссылка 3</a></li>
<li><a href=»#»>Ссылка 4</a></li>
<li><a href=»#»>Ссылка 5</a></li>
</ul>
</td>

Файл footer.txt :
<tr>
<td colspan=»2″><h5>Подвал сайта</h5> Здесь авторские права, дата, адрес, счётчики..</td>
</tr>

Вот собственно и всё.. теперь можно загрузить всё это дело на сервер, открыть страницу index. shtml и насладится первым результатом! Только имейте ввиду, что сервер должен поддерживать эту технологию.. думаю на любом платном хостинге есть поддержка SSI, так что с этим проблем не будет..

Теперь чтобы изменить какой либо блок с повторяющимся кодом одновременно на всех страницах сайта достаточно внести изменения в один единственный файлик, включённый в данные страницы с помощью директивы:
<!—#include virtual=»*.txt»—>

Меня спрашивали я отвечал:

Я всё делал по инструкции, но на моём компьютере ничего не работает!!
— Если Вы для создания сайтов на Вашем компьютере не используете какой либо виртуальный сервер, то ничего работать не будет до тех пор пока Вы не отправите всё содержимое на сервер Вашего хостера .. На то и называется эта технология — включения на стороне сервера, а не включения на стороне пользователя.

Какой <!DOCTYPE> следует указывать при использовании технологии SSI с такими вот файлами txt?
— В самих txt файлах <!DOCTYPE> вообще не нужен!!, а в файле *. shtml используйте тот который стоял у Вас раньше.. Эта технология всего на всего позволяет «раскроить» страницу, а потом «сшить» её из отдельно взятых кусочков кода..

Как обстоит дело и индексацией страниц? будут ли видны поисковому роботу такие «склеенные» страницы?
— Так как «склеивание» документа происходит на стороне сервера поисковый робот, равно как и человек, не заметит подмены.. Сервер по запросу робота выдаст уже полный «склеенный» документ, так что проблем с его индексацией быть не может!

Я вынес «подвал» сайта в отдельный txt файл, там у меня расположены счетчики посещений, будут ли они теперь корректно работать?
— Да, счетчики будут работать корректно.. ещё раз говорю, что файлы txt «склеиваются» на стороне сервера и сервер выдаёт по запросу всю страницу целиком.



Семантический HTML | Основы современной вёрстки

При создании вёрстки нужно учитывать семантику, то есть смысловое (логическое) значение элементов.

Основная цель любой HTML-вёрстки — передача смысла блоков. Часто, помимо пользователей, по нашим страницам ходят и роботы. Они собирают и анализируют информацию страницы. К примеру, поисковые роботы просматривают всю страницу и определяют её полезность, а также уникальность. И если для человека достаточно просто поделить страницу на части и найти шапку, основной контент, футер, то для робота это достаточно сложная задача. Робот видит исключительно нашу вёрстку и не может «глазами» отделить части макета.

Вторая важная причина необходимости создания семантической вёрстки — использование страниц людьми с ограниченными возможностями. Слабовидящие пользователи используют «скринридеры» — устройства или приложения, воспроизводящие голосом элементы страницы. Чтобы скринридер мог правильно понять, где содержится основная информация, меню, поясняющие блоки и так далее, мы должны правильно разметить страницу. Это поможет устройствам правильно разбить страницу на логические блоки и дать возможность посетителям корректно перемещаться по странице. Такая концепция называется «Доступный WEB».

Запомните: минимальная доступность лучше, чем её отсутствие.

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

Шапка сайта

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

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

Один из примеров шапки сайта:

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <div> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </div>
</header>

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

Навигация

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

  • Картинку.
  • Блочный элемент div.
  • Маркированный список.
  • Набор ссылок.

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

Как же нам ему помочь? Для этого в стандарте HTML5 появился тег nav. Он обозначает навигационную область. Причём помочь отделить основное меню от меню раздела можно с помощью других тегов, речь о которых пойдёт ниже.

Заменим простой блочный элемент div на его семантичного брата nav:

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <nav> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </nav>
</header>

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

Уникальный контент

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

Для разметки уникального контента в стандарте HTML5 появился специальный тег main. Именно он поможет обозначить область с самым важным контентом на странице. Старайтесь в нём держать только контент. Обычно меню, боковые панели и футер в эту область не входят. Исключением может быть только ситуация, если эти блоки действительно уникальны для данной страницы. Например, меню может вести по разделам страницы. В таком случае оно на полных правах может быть включено в область уникального контента.

Добавим такую область в нашу вёрстку:

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <nav> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </nav>
</header>

<main>
    <h2>Хекслет — практические курсы по программированию</h2>

    <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением.  Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
    <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
    <p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. </p>
</main>

Наличие тега main также очень важно для мобильных браузеров. Вы могли видеть, что многие из них имеют функцию «Режим чтения». При его включении браузер автоматически удалит всё оформление и все ненужные блоки, оставив только главный контент. Этим контентом и будет являться область, заключённая в тег main. Такой режим отлично подходит для людей, у которых, в настоящий момент, слабое подключение к интернету.

Так как внутри main содержится уникальный контент страницы, то разрешено использовать только один такой тег на странице.

Секции

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

  • С правильно разделённым контентом удобно работать. Мы легко можем перемещать такие области, менять местами или удалять. В коде их будет легко найти.
  • Правильная группировка разделов — важная часть при создании доступного web’а.

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

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <nav> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </nav>
</header>

<main>
    <h2>Хекслет — практические курсы по программированию</h2>

    <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением.  Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
    <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
    <p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. </p>

    <section>
        <h3>Преимущества</h3>

        <ul>
            <li>Много теории</li>
            <li>Много практики</li>
            <li>Много менторов</li>
        </ul>
    </section>
</main>

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

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

Независимые секции

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

Между section и article есть одна существенная разница: article является независимой секцией, то есть её можно перенести на любую страницу сайта или даже на другой сайт, и при этом она не потеряет своего контекста.

Представьте себе блог и отдельную статью в нём. Можем ли мы понять статью, если она вдруг окажется не в блоге, а, например, на странице с услугами? Конечно! Ведь статья — это законченный текст. Следовательно, такую статью можно обернуть в тег article.

Добавим колонку новостей в наш пример вёрстки. Сразу подумаем, как она может быть разделена. Сами по себе новости являются достаточно уникальным элементом, ведь даже если их перенести на другую страницу, то они не потеряют свою актуальность. В этом случае каждую новость можно обернуть в article. А что делать с обёрткой блока? Она объединяет по смыслу несколько различных новостей, её можно спокойно назвать одним словом, и она точно будет иметь свой заголовок. Следовательно, ей подойдёт тег section.

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <nav> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </nav>
</header>

<main>
    <h2>Хекслет — практические курсы по программированию</h2>

    <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением.  Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
    <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
    <p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. </p>

    <section>
        <h3>Преимущества</h3>

        <ul>
            <li>Много теории</li>
            <li>Много практики</li>
            <li>Много менторов</li>
        </ul>
    </section>

    <section>
        <h3>Новости</h3>

        <article>
            <h4>Новость 1</h4>
            <p>Текст новости 1</p>
            <a href="#">Подробнее</a>
        </article>

        <article>
            <h4>Новость 2</h4>
            <p>Текст новости 2</p>
            <a href="#">Подробнее</a>
        </article>

        <article>
            <h4>Новость 3</h4>
            <p>Текст новости 3</p>
            <a href="#">Подробнее</a>
        </article>
    </section>
</main>

Дополняющие секции

Ещё одним крупным контейнером для нашего контента служит тег aside. Это область с дополнительной информацией. Она может быть как связана с текущей страницей, так и не очень. Подобные секции вы можете встречать в виде боковых панелей на сайтах. Там содержится дополнительное меню, баннеры, реклама и другая информация.

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

Давайте добавим такую информацию в нашу вёрстку. Внутри этой дополнительной секции будет находиться ещё одно меню, которое не будем оборачивать в nav, так как оно не является основным.

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <nav> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </nav>
</header>

<aside>
    <div>
        <a href="#">Необязательный пункт 1</a>
        <a href="#">Необязательный пункт 2</a>
        <a href="#">Необязательный пункт 3</a>
    </div>
</aside>

<main>
    <h2>Хекслет — практические курсы по программированию</h2>

    <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением.  Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
    <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
    <p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. </p>

    <section>
        <h3>Преимущества</h3>

        <ul>
            <li>Много теории</li>
            <li>Много практики</li>
            <li>Много менторов</li>
        </ul>
    </section>

    <section>
        <h3>Новости</h3>

        <article>
            <h4>Новость 1</h4>
            <p>Текст новости 1</p>
            <a href="#">Подробнее</a>
        </article>

        <article>
            <h4>Новость 2</h4>
            <p>Текст новости 2</p>
            <a href="#">Подробнее</a>
        </article>

        <article>
            <h4>Новость 3</h4>
            <p>Текст новости 3</p>
            <a href="#">Подробнее</a>
        </article>
    </section>
</main>

Самостоятельная работа

Создайте файл index. html на своём компьютере и создайте собственное резюме. Используйте изученные в этом уроке теги.


Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

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

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Самый простой способ создать его для своего сайта!

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

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

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

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

Шаг 1. Создание файла с кодом HTML

Для начала создайте файл HTML для фактического содержания и синтаксиса раскрывающегося меню. Перейдите к диспетчеру файлов с панели управления hPanel и создайте новый файл с именем menu. html внутри каталога public_html .

Файл menu.html будет содержать элементы выпадающего меню – один родительский элемент с пятью пунктами меню. Каждое подменю будет перенаправлять пользователей на разные страницы вашего сайта.

Добавьте в файл menu.html следующий код:

 <дел>
  
  <дел>
    Подменю 1
    Подменю 2
    Подменю 3
    Подменю 4
    Подменю 5
  

Классы dropdown, mainmenubtn, и dropdown-child представляют разные элементы HTML. CSS будет использовать их для доступа к определенному элементу и изменения его дизайна.

Вот как будет выглядеть HTML-меню без правил CSS:

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

Шаг 2. Добавление CSS и создание эффекта раскрывающегося списка

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

Создайте внутреннюю таблицу стилей в меню .html , поместив следующий код в элемент