Html код шапка для сайта: Шапка | HTML | CodeBasics

Leave a Comment / Html / By /

Шапка сайта и навигационное меню с помощью CSS – Zencoder

Просматривал видеокурс по блочной верстке сайта от Андрей Морковина.

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

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

В основу создания шапки я положил свойство вложенных слоев на ‘ах. Кстати, с этим методом я только недавно познакомился в другом видеоуроке от Дмитрия Семенова. Далее, предполагается, что размеры всех фоновых изображений известны (на практике так и происходит, при вырезании их из psd-макета).

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

1

bg-nav.gif - 300x70px
, 
1

bg-header.gif - 800x50px
, 
1

logo.gif - 30x30px
. В CSS-свойствах сделал для них подстановку с помощью фоновой заливки цветом, для подстраховки.

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

1

div
, которой прописываются свойства центрирования страницы и задания ей ширины:

#wrap{
  width: 800px;
  height: 100%;
  margin: 0 auto;
  background: #c0c0c0;
}

Затем создается слой 

1

div
, в котором будет располагаться шапка будущего сайта.
Для нее прописываю совсем короткие свойства, с помощью которых гарантированно растягиваю шапку на всю ширину блока-родителя 
1

div
и задаю ее высоту:

#header{
  width: 100%;
  height: 70px;
}

Затем создаю слой 

1

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

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

#nav{
  background: url(i/bg-nav. gif) #b318cf 100% 0 no-repeat;
  height: 70px;
}

Теперь создаю еще один слой 

1

div
, в котором будет размещено еще одно фоновое изображение. По высоте оно меньше, чем фоновое изображение слоя 
1

div
и будет располагаться поверх этого слоя, перекрывая его.

Поэтому фон слоя 

1

div
будет видет только частично, лишь его нижний краешек, для которого и отводится роль фона навигации. Для слоя 
1

div
явно задаю его высоту. Код со свойствами приведен ниже:

#head{
  background: url(i/bg-header.gif) #2b66c8 0 0 no-repeat;
  height: 50px;
}

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

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

#logo{
  background: url(i/logo.gif) #36cf18 0 0 no-repeat;
  width: 30px;
  height: 30px;
}

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

1

inline
), то ей невозможно задать правила, чтобы “растянуть” на всю высоту и ширину слоя-родителя 
1

div
.

Поэтому “превращаю” ссылку в блочный элемент с помощью свойства 

1

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

#logo a{
  display: block;
  width: 100%;
  height: 100%;
}

Осталось создать навигационное меню шапки, которое должно располагаться поверх слоя 

1

div
. Создаю ненумерованный список, который помещаю внутрь слоя 
1

div
. Так как по коду слой 
1

div
расположен выше и имеет фиксированную высоту, то список займет все оставшееся пространство под ним: 
1

70px - 50px = 20px
.

Теперь достаточно сместить список вправо с помощью 

1

float: right
и прописать для него обычные свойства, чтобы расположить горизонтально и стилизовать:

#nav ul{
  list-style-type: none;
  float: right;
}
  #nav li{
    display: inline-block;
  }
    #nav a{
      text-decoration: none;
      color: #fff;
      font-weight: bold;
      margin-right: 15px;
      line-height: 20px;
      display: inline-block;
    }

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

1

display: inline
.

Но после “наводки” Kray Storm с форума 

1

forum.htmlbook.ru
проблема была решена. Для элементов и я поменял свойство на 
1

display: inline-block
и для я дополнительно задал высоту строки 
1

line-height: 20px
, равную высоте блока . Зазоры пропали и пункты меню растянулись на всю высоту блока-родителя.

Все, шапка сайта готова. Если посмотреть на html-код, то видно, что он “правильный”. То есть, он не замусорен всякими . Разметка выполнена простыми свойствами CSS, который будут гарантировано работать почти во всех браузерах. При этом она никуда не “съедет”.

Ниже приведу полный код html-каркаса и CSS-кода.

HTML-код:

CSS-код:

/*  reset  */
  *{
    margin: 0;
    padding: 0;
  }
  /*  main */
  #wrap{
    width: 800px;
    height: 100%;
    margin: 0 auto;
    background: #c0c0c0;
  }
  #header{
    width: 100%;
    height: 70px;
  }
  #nav{
    background: url(i/bg-nav.
 
 gif) #b318cf 100% 0 no-repeat;
    height: 70px;
  }
    #nav ul{
      list-style-type: none;
      float: right;
    }
      #nav li{
        display: inline-block;
      }
        #nav a{
          text-decoration: none;
          color: #fff;
          font-weight: bold;
          margin-right: 15px;
          line-height: 20px;
          display: inline-block;
        }
  #head{
    background: url(i/bg-header.gif) #2b66c8 0 0 no-repeat;
    height: 50px;
  }
  #logo{
    background: url(i/logo.gif) #36cf18 0 0 no-repeat;
    width: 30px;
    height: 30px;
  }
    #logo a{
      display: block;
      width: 100%;
      height: 100%;
    }

Здесь я представлю нарисованную мною схему расположения всех блоков в шапке сайта:

И, наконец, результат всего — готовая шапка сайта:

На этом все.

csshtml

Создание сайта визитки (Часть 2)

Продолжение урока, на котором рассмотрим процесс создания шапки и навигационного меню для сайта

Создание шапки сайта

«Шапку» сайта создадим с помощью специального элемента <header>. ..</header>, внутри которого расположим блок с логотипом сайта (<div>…</div>) и блок с контактной информацией (<div>…</div>). Выравнивание блоков «logo» и «contacts» зададим с помощью CSS свойства float. Блок «logo» выравняем по левому краю с помощью задания ему CSS свойства — float:left, а блок «contacts» по правому краю — float:right. В рамках обучения стили будем задавать внутри файла HTML с помощью атрибута

style.

HTML код блока, в котором размещен логотип сайта


<!-- Блок с уникальным именем logo и стилем, который задаёт выравнивание элемента по левому краю -->
<div>
  <!-- Элемент img для вывода изображения, которое имеет имя logo.png и расположено в папке images -->
  <img src="images/logo.png">
</div>

HTML код блока с контактной информацией:


<!-- Блок с уникальным именем contacts и стилем, который задаёт выравнивание элемента по правому краю -->
<div>
  <!--Элемент i служит для вывода иконки Awesome с именем fa-mobile -->
  <i></i> +7-944-650-1720 |
  <i></i> info@business. ru
  <!--CSS свойство margin-left задает отступ 10px слева от предыдущего элемента-->
  <!--CSS свойство color задает цвет элементу i-->
  <i></i>
</div>

Также, необходимо задать небольшой отступ сверху для элементов внутри блока <header>…</header>, чтобы они не прилипали к верхней границы окна веб-браузера.

В результате наших действий HTML код «шапки» сайта будет выглядеть следующим образом:


<header>
  <div>
    <img src="images/logo.png">
  </div>
  <div>
    <i></i> +7-944-650-1720 |
    <i></i> [email protected]
    <i></i>
  </div>
  <div></div>
</header>

Примечание: Так как блоки «logo» и «contacts» имеют разную высоту, то необходимо создать ещё один блок с классом .clearfix. Данный блок будет расположен внизу под двумя этими блоками, и тем самым является необходимым элементом, для правильного отображения остальных блоков.

Создание навигационного меню

Горизонтальное меню сайта состоит из 4 пунктов («Главная», «О компании», Наши методы», «Наши проекты») и 1 кнопки с текстом «Бесплатная консультация», расположенной справа. Создание такого навигационного меню можно выполнить с помощью адаптивного компонента bootstrap 3 «navbar». Процесс разработки меню заключается в создании маркированных списков в определенном месте компонента «navbar».

Структура меню сайта:

Кнопку создадим с помощью элемента span к которому подключим классы Bootstrap .btn и .btn-danger. А также создадим отступы для её центрирования по вертикали относительно навигационного меню с помощью CSS классов padding-top и padding-bottom.


<nav role="navigation">
  <div>
    <button type="button" data-toggle="collapse" data-target="#bs-menu">
      <span>Toggle navigation</span>
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>
  <div>
    <ul>
      <!-- Активный пункт меню "Главная" -->
      <li><a href="#">Главная</a></li>
      <!-- Пункт меню "О компании" -->
      <li><a href="#main">О компании</a></li>
      <!-- Пункт меню "Наш метод" -->
      <li><a href="#method">Наш методы</a></li>
      <!-- Пункт меню "Наши проекты" -->
      <li><a href="#work">Наши проекты</a></li>
    </ul>
    <!-- Список, выровненный по правому краю -->
    <ul>
      <!-- Пункт меню "Бесплатная консультация" -->
      <li><a  href="#">
        <span><strong>Бесплатная консультация</strong></span></a>
      </li>
    </ul>
  </div>
</nav>

В результате у нас получился сайт, состоящий пока из 2 блоков: «шапки» сайта и навигационного меню:

Изображение сайта, при уменьшении размеров окна браузера с открытым навигационным меню:

Как добавить коды в разделы кода верхнего и нижнего колонтитула Weebly? – WebNots

Как добавить коды в раздел заголовка?

Код заголовка — это раздел, доступный в редакторе сайтов Weebly, который позволяет пользователям добавлять собственный код HTML, CSS и JavaScript в раздел заголовка страницы, сайта или блога. Во многих ситуациях пользователям может потребоваться добавить пользовательские коды между тегами…. страницы или сайта. Например, код проверки метатега инструментов для веб-мастеров должен быть добавлен в раздел кода заголовка на уровне сайта.

Weebly предлагает три возможности добавления кодов в заголовок:

  • Заголовок сайта — вставленный сюда код будет действовать на всем сайте. Коды уровня сайта можно добавить в разделе «Настройки > SEO > Код заголовка».
  • Заголовок страницы — код, вставленный сюда, повлияет на элементы на этой странице. Коды уровня страницы можно добавить в разделе «Страницы > Выберите страницу > Дополнительно > Код заголовка»
    • .
  • Заголовок сообщения в блоге — вставленный здесь код повлияет на все сообщения в блоге. Коды уровня сообщения можно вставить в разделе «Настройки > Блог > Код заголовка сообщения».

Раздел кода заголовка Weebly

Нет возможности добавить код в раздел заголовка отдельных сообщений Weebly.

Как добавить коды в нижний колонтитул?

Подобно разделу кода заголовка, Weebly также предлагает раздел кода нижнего колонтитула, который позволяет пользователям добавлять собственный код HTML, CSS и JavaScript в раздел нижнего колонтитула страницы, сайта или блога. Во многих ситуациях пользователям может потребоваться добавить пользовательские коды перед концом тега body. Добавление скрипта в нижний колонтитул позволяет быстрее загружать страницу и избежать таких проблем, как «Устранение блокирующих рендеринг JavaScript и CSS в содержимом верхней части страницы» в инструменте Google PageSpeed ​​Insights. Это также может помочь коду не конфликтовать с другим контентом на странице. Например, код отслеживания Google Analytics необходимо добавить в раздел кода нижнего колонтитула на уровне сайта.

Weebly предлагает три возможности добавления кодов в нижний колонтитул:

  • Нижний колонтитул — код, вставленный сюда, будет действовать на всем сайте. Коды уровня сайта можно добавить в разделе «Настройки > SEO > Код нижнего колонтитула».
  • Нижний колонтитул страницы – код, вставленный сюда, повлияет на элементы на этой странице. Коды уровня страницы можно добавить в разделе «Страницы > Выберите страницу > Дополнительно > Код нижнего колонтитула»
    • .
  • Нижний колонтитул сообщения в блоге – код, вставленный сюда, повлияет на все сообщения в блоге. Коды уровня сообщения можно вставить в разделе «Настройки > Блог > Код нижнего колонтитула сообщения».

Раздел кода нижнего колонтитула Weebly

Зачем использовать разделы кода верхнего и нижнего колонтитула?

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

  • Метатег проверки для инструментов для веб-мастеров, Alexa, Pinterest и т. д.
  • Код отслеживания Analytics для получения статистики трафика.
  • Связывание внешних таблиц стилей, таких как font awesome, bootstrap и т. д.
  • Добавление jQuery, Ajax и других скриптов с сайтов CDN для более быстрой доставки.

Иногда вам может понадобиться попробовать добавить код с разделами верхнего и нижнего колонтитула поочередно для достижения функции. Например, Weebly рекомендует добавлять код Google Analytics в нижний колонтитул, а Google рекомендует добавлять его в верхний колонтитул.

Использование элемента Embed Code

Элемент Embed Code используется для вставки кодов от третьих лиц с целью добавления новых функций на сайт Weebly. Обычно элемент кода встраивания используется вместе с разделами кода верхнего и нижнего колонтитула. Ниже приведены рекомендации по использованию элемента кода для встраивания:

  • Добавьте HTML-код в область содержимого с помощью элемента «Код для вставки».
  • Добавьте код CSS в раздел «Код заголовка».
  • Добавьте код сценария в раздел «Код нижнего колонтитула».

Теги заголовков HTML для SEO | Теги и подзаголовки h2

Сколько уровней тегов заголовков в HTML?

HTML содержит шесть тегов заголовков, от h2 до H6. h2 является наиболее заметным из тегов заголовков, что делает его идеальным для использования в заголовках веб-страниц, и впоследствии теги становятся меньше и менее заметными.

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

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

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

Значение тегов h2 для SEO

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

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

Значение SEO тегов h3 и выше

Теги заголовков постепенно теряют значение SEO с каждым шагом вниз.

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

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