Верстка сайта html примеры: CSS / HTML верстка сайта

Содержание

Основы HTML5 или учимся верстать на HTML5

62 069 любопытных

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

Хочу сказать, что оказывается тут здесь ничего сложного нет. Я давно хотел перевести свой блог с div вёрстки в HTML5, но думал что это будет сложно так как основных новых тегов я не знал. А вот когда взялся за это дело то оказалось, что это совершенно не сложно.

Так что и Вам советую перейти на HTML5, так как всё новое практически всегда лучше, и ещё конечно же на много проще и удобнее.

Верстка div (старая)

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span>

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">
 <head profile="http://gmpg.org/xfn/11">

<!-- ......... -->

</head>
 <body>
 <!-- Шапка сайта -->

<div>

<!-- Навигация -->

<div>
 <!-- ......... -->
 </div>
 <!-- Конец навигации -->

</div><!-- Конец шапки сайта -->

<div><!-- основной блок -->

<div><!-- блок там где отображаются посты -->

<!-- Начало поста -->
 <div>
 <!-- ......... -->
 </div>
 <!-- Начало поста -->

<div> <!-- блок боковой колонки -->
 <!-- ......... -->
 </div>

</div>
 </div>

<div><!-- Футер сайта -->
 <!-- . 
  ........ -->
 </div>

</body>
</html>

Как видите из кода что для каждого div задан свой класс. Например div с классом headerInner — это блок шапки сайта который описан в стилях CSS, соответственно div с классом wrapper — это основной блок в котором находятся 2 блока с записями и боковой колонкой которые имеют классы colLeft — левый блок с постами и colRight правая колонка. И конечно же я не забыл за блок футера под классом footerInner.

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

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

Теги HTML5

Сначала давайте рассмотрим теги, которые используются в первую очередь, другими словами основные:

<header> — данный тег задаёт верхнюю часть сайта, или шапку сайта. В него может входить меню, логотип, и другие элементы которые используются в верхней части сайта.

<section> — данный тег задаётся для важных разделов на сайте, например для таких как статьи, или же важные моменты, которые Вы хотите выделить.

<article> — обычно в этом теге содержаться разнообразные записи на сайте, новости, документы. Например посты на блоге.

<aside> — задаётся для боковых колонок на сайте (Сайтбара). Не важно где он будет находится слева или справа.

<footer> — в этот тег должен входить низ Вашего сайта (Футер)

<hgroup> — в данный тег входят групы заголовков сайтов, например <h3>.

<nav> — данный тег включает в себя всю навигацию на сайте (меню).

Хочу сказать, что эти все теги обязательно должны закрываться, например если это тег <article> он должен иметь закрывающий тег </article> и так далее.

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

<audio> — данный тег выводит аудио на сайте.

<canvas> — данный тег создаёт на странице поле в котором можно добавлять и применять к разным элементам разные эффекты с помощью скриптов.

<menu> — в этот тег должны входить список меню, например ul li.

<time> — сюда входят время и дата на сайте. Например на блогах дата размещения поста.

<video> — вставляет видео на страницу.

<wbr> — данный тег переносит слово на новую строку в браузере. Аналогичен старому тегу <br>.

Естественно изменились не только теги в HTML5, грубо говоря круто изменился doctype. Вот как он выглядит в HTML4:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

А вот как он выглядит по новому:

<!doctype html>

Ну как Вам разница? 🙂 По моему существенная. Так же ещё проще стал тег <html>. Он был такой:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">

А стал такой:

<html lang=ru>

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

Верстка (новая)

Перед тем как приступить к вёрстке нам между тегами <head> и </head> нужно вставить простой код для IE, так как этот «супер» браузер не понимает новых тегов:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Ещё обязательно нужно все новые теги сделать блочными. Просто добавьте этот код в любое место в Вашем файле CSS:

footer, nav, header, section, aside {

display: block

}

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

<!DOCTYPE html>
<html lang="ru">
<head>

<!-- ......... -->

</head>
<body>

<!-- Шапка сайта -->

<header>

<!-- Навигация -->

<nav>
<!-- ......... -->
</nav>
<!-- Конец навигации -->

</header><!-- Конец шапки сайта -->

<section><!-- основной блок -->

<aside><!-- блок там где отображаются посты -->
<!-- Начало поста -->
<article>
<!-- ......... -->
</article>
<!-- Начало поста -->

<aside> <!-- блок боковой колонки -->
<!-- ......... -->
</aside>

</div>
</section>

<footer><!-- Футер сайта -->
<!-- .   ........ -->
</footer>

</body>
</html>

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

Опять приведу пример. Возьмём шапку сайта. В старой вёрстке она обозначалась тегом div с классом headerInner — <div id=»headerInner»>. Как я писал выше, что этот класс выводит блок шапки сайта. А сейчас, когда мы знаем какой тег отвечает за шапку сайта в HTML5 (<header>) можем смело его использовать вместо div только с таким же классом. Таким образом у нас получилось следующее:

<header>

И не забываем поставить закрывающий тег </header>, а также удалить закрывающий div.

Идём дальше, а у нас главный блок контента. Значит это главный блок и его нужно окружить тегом <section>. В старой вёрстке этот главный блок выглядел так <div id=»wrapper»>, а в HTML5 будет выглядеть вот так <section id=»wrapper»>.

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

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

Вывод

Друзья, за Вами решение переходить на HTML5 или не переходить. Но моё мнение переходить однозначно, не нужно засиживаться на одном месть, двигайтесь вперёд, изучайте новое. Ведь не просто так придумывают эти «штуки». Не правда ли? А эта новая вёрстка прямо говорит своими новыми тегами где и какая часть находится на сайте. Не говоря уж о div вёрстке, в которой всё сливается. Ну не просто же так это всё, особенно для поисковиков, которые теперь точно будут знать где и что индексировать, так как названия тегов помогают. Я конечно не знаю берут ли это во внимание поисковики, но всё же.

Опять рекомендую Вам переходить Вам на новую технологию.

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

что это такое и зачем она нужна для SEO – Elit-Web

Верстка сайта — это создание структуры гипертекстового документа с использованием HTML-разметки.

И пока вы не успели закрыть эту страницу из-за совершенно непонятного термина, позвольте объяснить!

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

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

Что такое семантическая верстка?

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

Для лучшего понимания взгляните на два примера ниже:

<p>Ваш креативный заголовок</p>

<p>Отличный текст</p>

<p>И еще немного отличного текста</p>

<h2>Ваш креативный заголовок</h2>

<p>Отличный текст</p>

<p>И еще немного отличного текста</p>

</article>

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

Почему? Об этом расскажем далее!

Почему семантика сайта важна

Продолжим рассматривать наш пример!

Тег <p> обозначает «параграф/абзац». С его помощью удобно делать разбивку текста с переносом строки. Вот только с точки зрения поисковых алгоритмов он не несет особой информации. Вы можете обернуть заголовок тегом <p> и даже ярко его ВЫДЕЛИТЬ (никогда так не делайте). Пользователь поймет, что это заголовок, но вот для алгоритмов Google он все еще остается обычным блоком текста — не более важным, чем последующие. Без семантической верстки ваша страница для поисковика будет просто большим текстовым документом, где невозможно выделить основную информацию и эффективно использовать алгоритмы поиска.

Семантическая структура сайта важна по двум ключевым причинам.

1) Улучшение позиций веб-ресурса в поисковой выдаче

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

Можем привести неплохой пример пользы семантической верстки. Введите в Google запрос «расписание поездов Киев», и одним из первых результатов будет следующий график:

Используя правила семантической верстки, разработчики «показали» поисковику, что это за блок и что именно его стоит выводить в результатах поиска по релевантному запросу. Если бы расписание было заключено в обычные теги <p>, поисковые боты просто не поняли бы, что именно они отвечают на вопрос пользователя и что их стоит показать в выдаче.

2) Повышение доступности сайта

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

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

Семантические теги в HTML

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

<header>

Этим тегом обычно обозначают вводную часть раздела/страницы. Говоря более простым языком, <header> — это «шапка» сайта, которая зачастую одинаковая на всех страницах. Здесь в основном размещают ссылки на основные разделы сайта, контакты, кнопки обратной связи, выбор языка и тому подобное.

<nav>

Это тег для блока навигации на сайте. Он может быть вложенным в хедер или оставаться отдельным блоком. Иногда на одной странице встречается несколько навигационных блоков — это нормально.

<main>

В этот тег заключается основное содержимое страницы, которое НЕ ПОВТОРЯЕТСЯ на других. Кроме того, на ней этот тег разрешается использовать только один раз. Размещать два блока <main> не допускается. Внутри <main> могут находиться <article>, <section>, <aside> и другие.

<article>

Тег обозначает крупную самостоятельную и завершенную по смыслу единицу на странице. Самый распространенный пример — статья в блоге. Но в <article> может оборачиваться небольшой виджет или встроенный в страницу твит.

<section>

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

<aside>

Тегом <aside> зачастую обозначают область с дополнительной информацией, которая не всегда связана с текущей страницей. Когда вы видите на сайте любую боковую панель, это, вероятнее всего, <aside>. Например, блок навигации, баннеры, реклама и прочее.

<footer>

Завершающая часть страницы или отдельного смыслового раздела. На одной странице может быть несколько футеров, но обычно он один. Здесь часто размещают различную дополнительную информацию и ссылки: контакты, линки на другие страницы, логотипы и тому подобное. <footer> также принято называть «подвалом» сайта.

Как разметить страницы сайта с точки зрения семантики

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

Тег	Применение
<header>, <main>, <footer>	Большие смысловые блоки на странице
<nav>, <section>, <article>, <aside>	Отдельные разделы внутри блоков
<h2> – <h6>	Заголовки с первого по шестой уровень
<p>, <ul>, <div>, <span> и другие	Мелкие блоки и элементы внутри смысловых разделов
<img>, <a>, <button> и прочие	Картинки, кнопки, ссылки, небольшие текстовые блоки и прочее

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

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

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

Примеры семантической верстки

Мы приведем несколько простых примеров HTML-кода с корректной версткой. Обратите внимание на структуру и вложенность разных элементов.

<header>

<nav>

<main>

Хороший способ лучше разобраться в семантической верстке — изучать код различных сайтов. Для этого вам достаточно открыть интересующую страницу и нажать F12 (для браузера Safari алгоритм другой) — появится блок с HTML-кодом и стилями. Здесь же можно выбрать инструмент Inspector, который при клике на тот или иной элемент сразу покажет его в HTML-коде.

Основные ошибки

Хотя HTML-верстка и считается довольно несложной задачей, но правильная семантическая разметка даже сейчас есть далеко не на всех сайтах, вплоть до весьма известных.

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

применение <section> как обертки для оформления;
переизбыток блоков <header>;
обрамление всех ссылок в тег <nav>;
путаница с тегами <main>, <article> и <section>.

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

Попробуем объяснить, почему нужно делать именно так.

Представьте, что вы, размещая статью в блоге, решили, например, выделить первые слова в каждом абзаце красным цветом. Зачем? Захотелось, и все тут. Можно ли это сделать прямо в HTML? Да! Достаточно применить дополнительный тег <font> для изменения характеристик шрифта и задать ему цвет. Вот только придется потратить немало времени, потому как для каждого абзаца вы будете прописывать теги и оформление вручную.

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

CSS же позволяет сделать все гораздо быстрее. Присваиваем нужным тегам <p> определенный класс (одинаковый для выбранных нами), а в CSS буквально одной строчкой прописываем оформление. Надоел красный цвет — меняем всего одно правило, и он изменяется на дефолтный черный ДЛЯ ВСЕХ <p> с тем же классом. Либо можно стереть правило для класса и тем самым убрать оформление.

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

Вывод

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

Мы ведем к тому, что при разработке и продвижении сайтов очень важно не стараться бездумно экономить, обращаясь к начинающим верстальщикам или пытаясь верстать страницы самостоятельно, не имея должного опыта. Если хотите, чтобы все было сразу сделано правильно, а вам не пришлось платить дважды за одну работу, обращайтесь в Elit-Web. Мы к вашим услугам!

Макет в HTML с примерами

Вернуться к: Учебники по HTML

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

Макет HTML

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

Разделы макета веб-страницы

Заголовок : На веб-страницах тег
используется для добавления раздела заголовка.
Панель навигации : Панель навигации очень похожа на список меню. Он используется для отображения информации о содержимом через гиперссылки.
Боковая панель : Содержит дополнительную информацию или рекламу и не обязательно должна быть размещена на странице.
Содержание Раздел : Раздел контента — это основная часть веб-сайта, где отображается контент.
Нижний колонтитул : Нижний колонтитул содержит контактную информацию и другие запросы, связанные с веб-страницей. Нижний колонтитул всегда находится внизу веб-страницы. Тег
используется для определения нижнего колонтитула на веб-страницах.

Пример макета HTML

 

<голова>
 Макет страницы
 <стиль>
         тело{
         семейство шрифтов: arial;
         набивка: 4%;
         }
  .head1 {
   размер шрифта: 40px;
   цвет: сланцево-синий;
   вес шрифта: полужирный;
  }
  .head2 {
   размер шрифта: 17 пикселей;
   поле слева: 10px;
   нижняя граница: 15px;
  }
  тело {
   поле: 0 авто;
   фоновая позиция: центр;
   размер фона: содержит;
  }
 
  .меню {
   положение: липкое;
   сверху: 0;
   цвет фона: сине-голубой;
   заполнение: 10px 0px 10px 0px;
   белый цвет;
   поле: 0 авто;
   переполнение: скрыто;
  }
  .меню {
   плыть налево;
   белый цвет;
   выравнивание текста: по центру;
   отступ: 14px 16px;
   текстовое оформление: нет;
   размер шрифта: 20px;
  }
  .меню-журнал {
   справа: авто;
   поплавок: справа;
  }
  нижний колонтитул {
   ширина: 100%;
   внизу: 0px;
   цвет фона: #141414;
   цвет: #fff;
   положение: абсолютное;
   верхняя часть отступов: 20 пикселей;
   отступ снизу: 50px;
   выравнивание текста: по центру;
   размер шрифта: 30px;
   вес шрифта: полужирный;
  }
  . body_sec {
   поле слева: 20px;
  }
 

<тело>
 
 
 <заголовок>
  Руководство по DotNet
  Лучшая платформа для изучения программирования для начинающих и профессионалов
 
 
 
 <дел>
  ГЛАВНАЯ
  О нас
  Контакт
  <дел>
   ВХОД

<голова> Макет страницы <стиль> .

head1 { размер шрифта: 40px; цвет: сланцево-синий; вес шрифта: полужирный; } .head2 { размер шрифта: 17 пикселей; поле слева: 10px; нижняя граница: 15px; } тело { поле: 0 авто; фоновая позиция: центр; размер фона: содержит; семейство шрифтов: arial; набивка: 4%; } <тело> <заголовок>

Руководство по DotNet

Лучшая платформа для изучения программирования для начинающих и профессионалов

<голова> Макет страницы <стиль> тело{ семейство шрифтов: arial; набивка: 4%; поле: 0 авто; фоновая позиция: центр; размер фона: содержит; } .

меню { положение: липкое; сверху: 0; цвет фона: сине-голубой; заполнение: 10px 0px 10px 0px; белый цвет; поле: 0 авто; переполнение: скрыто; } .меню { плыть налево; белый цвет; выравнивание текста: по центру; отступ: 14px 16px; текстовое оформление: нет; размер шрифта: 20px; } .меню-журнал { справа: авто; поплавок: справа; } <тело> <дел> ГЛАВНАЯ О нас Контакт <дел> ВХОД