Теперь мы готовы к тому, чтобы запачкать наши руки в типографской краске. Почувствуйте себя верстальщиком в типографии середины 20-го века. Ритмичный шум печатных станков, запах свежей печати, щелчки задвигаемых на своё место латунных буковок. Большие рулоны девственно чистой газетной бумаги, ожидающие получить на себя порцию тиражной информации. И вы, сидящий за наборным станком, укладываете в нужное место информационный блок …
Как хорошо, что придумали компьютеры. Вы можете создать себе нужную атмосферу, чтобы в спокойной обстановке начать творить. Собственно этим мы сейчас и займёмся.
Для выполнения заданий вам потребуются (будет повод обновиться):
Если интересно, вы можете проверить на сколько ваш веб-браузер поддерживает стандарт HTML5 . Пройдите по ссылке http://html5test.com , там вы увидите баллы, сумма которых формируется по количеству поддерживаемых пунктов из стандарта. На момент написания статьи, на моей машине (Ubuntu10.10), Opera11.10 набирала 258 баллов, а FireFox4 всего лишь 240. Интересно, что у вас?
В этом тьюториале, мы:
- создадим с вами страницу по стандарту HTML5
- воспользуемся новыми семантическими элементами,
- немного порисуем,
- проверим как выводится видео на нашей странице,
- проверим работу новых элементов формы.
Для работы нам будет достаточно создать один HTML-файл index.html и один CSS-файл styles.css . В странице по ходу выполнения заданий появятся скрипты, так что будьте готовы, к тому что ваш браузер предупредит вас об этом. Нужно будет разрешить выполнение скриптов на странице.
Готовим каркас страницыБраузер должен знать страницу в лицо! Если вы не расскажите ему кто она такая и откуда, то он включит режим совместимости и вам придётся гадать — “как слово ваше отзовётся” в браузере клиента. Чтобы до такого не дошло, вам необходимо записывать в самом начале страницы правильный тип документа, соответствующий коду страницы.
Видимо, услышав мольбы верстальщиков, парни из W3C сжалились, и для стандарта HTML5 сделали коротенький тег . Любая веб-страница, поддерживающая последний стандарт, должна начинаться с него. А помните как было раньше … public … transitional или strict … ещё и адрес файла описания типа документа, ну ооочень длинно.
Приступим. Создайте себе папку на рабочем столе, в ней будет лежать наша сладкая парочка HTML и CSS файлы. Создайте простой текстовый файл index.html, в кодировке utf-8. Эта кодировка символов уже давно стала стандартной для всех не англоязычных текстов.
Первая строка — пишем тип документа.
Вторая — открываем главный тег всего документа html и указываем параметр lang, записав там базовый язык страницы — русский.
Переходим к заголовку.
Первое что укажем — кодировка символов документа.
Затем заголовок, для окна браузера.
Потом, не долго думая, подключим файл стиля.
И, под конец, добавим пустой контейнер тела документа.
Всё что мы здесь описали есть в листинге №1:
Листинг 1. Базовая структура документа HTML5
Инвесторы видят перспективу
Обращаем ваше внимание на то, что большинство тегов теперь стали не такими длинными как ранее. Тегу больше ничего не нужно кроме lang . Для метатега достаточно написать charset . Кроме того, для тега link не нужно указывать type .
Каркас готов, но страницу в браузер нам пока рано выставлять. Идём далее — семантические элементы страницы.
Делаем разметку контента Разместим на каркасе семантические блокиТеперь давайте поточнее определимся с тем, что у нас будет размещаться на странице. Будем исходить из следующего: нам нужно по максимуму использовать новые семантические элементы HTML5.
Наша страница будет служить для показа полного текста новости о компании, которой посвящён сайт. На неё будет происходить переход либо с главной страницы, где размещаются последние новости, либо из архива новостей.
Разместим блоки в контейнере . Будем придерживаться следующей последовательности этих элементов:
– header
– – hgroup
– nav
– article
– – header
– – “content”
– – section
– – – header
– – – “content”
– footer
В начале, у нас будет блок — заголовок страницы. с группой заголовков, говорящих о сайте. Затем семантический блок для меню. Ссылки в меню сделаем фиктивными. После этого начинается статья, обозначенная соответствующим семантическим блоком. В ней блок заголовка для записи названия статьи и даты публикации. Далее идёт содержимое статьи, к которой добавлены собственные выводы автора, написавшего новость. Это добавка оформляется в виде секции, также сопровождается блоком заголовка и контентом. В заключении страницы идёт блок footer , в котором мы разместим дополнительную информацию о контенте наших страниц.
Всё что мы с вами здесь описали представлено в Листинге №2. Мы не приводим полный код страницы, а только то, что должно быть между тегами … .
Листинг 2. Размещение семантических блоков HTML5
ООО Рога и копыта Полный текст новости
- Главная
- О нас
- Контакты
- Архивы новостей
Ничто не мешает людям воспользоваться рогами зайцелопа. Однако копыт у него нет.
Что думает общественностьВ реальности существует только Ubuntu с таким странным именем "Зайцелоп".
2011 ООО Рога и копыта. Свои права мы держим в надёжном месте.
Теперь страницу можно рассмотреть в браузере. Однако, она пока выглядит невзрачно. Но мы ведь не зря уже позаботились и подключили файл со стилями.
Покрасим фасадУ нашей страницы пока унылый и не привлекательный вид. Сделаем ей мэйкап. Реализуем его в нашем файле стилей styles.css Первое, что мы сделаем — это определимся со шрифтом для всего документа. Если кто не знает, то скажем, проводились исследования какой шрифт лучше воспринимается с экрана монитора, выяснилось — тот, у которого нет засечек. Такие шрифты называют sans-serif — без засечек. К ним относятся, например: Arial, Helvetica, Verdana . Идём дальше, будем по порядку определять правила для оформления всех элементов нашей страницы. Для того, чтобы не забегать сильно вперёд, воспользуемся пока несколькими фишками — тенями и закруглёнными краями у блоков.
Большинство из того, что мы здесь накодим было доступно ещё в ранних стандартах CSS. Новенькие фичи мы перечислим.
box-shadow
Данный параметр указывается для блочного элемента страницы, и создаёт тень вокруг него. Первые четыре числа это линейные параметры тени, соответственно указываются либо в пикселах px
, либо других линейных единицах (em
, pt
), либо без них, в случае нулевого размера. Первое число означает — горизонтальное отбрасывание тени вправо, хотите сделать влево — ставьте отрицательное число. Следующий — вертикальное вниз, чтобы сделать вверх — ставьте отрицательное число. Далее — величина размытия тени, затем — разброс тени. После линейных размеров указывается цвет тени, и если вы хотите внутреннюю тень то ключевое слово inset
. Если вам мало одной тени, то реализуйте свои теневые фантазии через запятую.
text-shadow
Этот параметр по своим настройкам похож на предыдущий, отличие только в отсутствии разброса тени и внутренней тени. И вам также никто не мешает фантазировать на счёт количества теней, через запятую.
border-radius (-moz-border-radius, -webkit-border-radius)
Радиус скругления у блоков. Углов у блока может быть четыре, соответственно и элементов у этого параметра может быть столько же. Перечисляются по часовой стрелки начиная от верхнего левого угла. Указанные в скобке названия параметров, используются в браузерах семейства Mozilla и на движке Webkit (Chrome, Safari). Так что дублируйте в правиле настройки, указанные для border-radius
ещё и в эту парочку параметров.
Придуманное и закодированное нами оформление будет выглядеть так, как показано в Листинге №3. Этот код, вам нужно поместить в файл styles.css .
Листинг 3. CSS для новых семантических элементов HTML5
* { font-family: Lucida Sans, Arial, Helvetica, sans-serif; } body { width: 480px; margin: 0px auto; } header.mainH { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 3px 5px 0 #AA4400; -moz-box-shadow: 0 3px 5px 0 #AA4400; box-shadow: 0 3px 5px 0 #AA4400; padding: 5px; text-align: center; } header h1 { font-size: 36px; margin: 0px; } header h2 { font-size: 18px; margin: 0px; color: #888; font-style: italic; } nav ul { list-style: none; padding: 0px; display: block; clear: right; background-color: #666; padding-left: 4px; height: 24px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } nav ul li { display: inline; padding: 0px 20px 5px 10px; height: 24px; border-right: 1px solid #ccc; } nav ul li a { color: #EFD3D3; text-decoration: none; font-size: 13px; font-weight: bold; } nav ul li a:hover { color: #fff; } article > header time { font-size: 14px; display: block; width: 26px; padding: 2px; text-align: center; background-color: #993333; color: #fff; font-weight: bold; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; float: left; margin-bottom: 10px; } article > header time span { font-size: 10px; font-weight: normal; text-transform: uppercase; } article > header h1 { font-size: 20px; float: left; margin-left: 14px; text-shadow: 2px 2px 1px #FFFFFF, 2px 2px 5px #888; } article > header h1 a { color: #993333; text-decoration: none; } article > section header h1 { font-size: 16px; } article p { clear: both; } footer p { text-align: center; font-size: 12px; color: #888; margin-top: 24px; } article > section { -moz-border-radius: 6px 0 0 0; -webkit-border-radius:6px 0 0 0; border-radius: 6px 0 0 0; box-shadow: 3px 3px 3px 0 #FFAA88 inset; padding: 5px; color: #665588; margin-top: 40px; }
Если вы откроете свою индексную страничку сейчас, то она уже будет выглядеть, не так уныло, посмотрите на Рисунок 1. По сравнению с предыдущим видом, она будет просто СУПЕР
Рисунок 1. Вид стилизованой страницы
Если страница выглядит по-другому, значит вы открыли её не в том браузере. Под “не в том” я подразумеваю браузер отличный от Mozilla4+, Chrome11.0+, Opera11.10+, они показывают страницу одинаково — проверено.
Примечание: Если кому-то непонятны записи правил в листинге, например, вам непонятно зачем нужно использовать > в селекторе? Тогда пишите свои вопросы в комментариях.
XHTML хорошо подходит для обучения и вырабатывания правильной манеры вёрстки благодаря своим формальным правилам и более жёсткому, по сравнению с HTML синтаксису. Однако за десять лет прошедших со дня выпуска XHTML морально устарел и уже не соответствует современным условиям. В частности, нет штатных средств для проигрывания аудио и видеороликов, нет поддержки геолокации, возможности рисовать непосредственно в браузере, не хватает некоторых элементов форм и много другого. Конечно, часть этих проблем давно решается через сторонние плагины к браузеру, например, Adobe Flash воспроизводит видео, Google Gears реализует локальные базы данных и запуск скриптов в фоновом режиме. Язык программирования JavaScript позволяет реализовать недостающий функционал форм и различные эффекты на странице. Но все эти технологии имеют определённые ограничения - плагины нужно устанавливать дополнительно, при этом они могут не работать, как Flash на iPhone и iPad, далеко не всё умеет и JavaScript. Популярность мобильных устройств, развитие каналов связи переместило акцент веб-технологий на мультимедиа, т.е. воспроизведение потокового аудио и видео, а также соответствующих файлов. Ничего этого в XHTML нет.
W3 Consortium, разработчик спецификаций HTML и XHTML, начал работать над XHTML 2.0, в котором указанные недостатки предыдущей версии бы обходились. В результате этот проект оказался замороженным и не завершён. Обеспокоенные медленным ходом работ разработчики браузеров Safari, Firefox и Opera основали свою собственную организацию WHATWG (Web Hypertext Application Technology Working Group, Рабочая группа по разработке гипертекстовых приложений Интернета), которая подхватила упавшее знамя. Идеи W3C, современные потребности пользователей и мнения веб-разработчиков воплотились в новом языке разметки названном HTML5.
Следует понимать, что, несмотря на схожесть названий, HTML5 не является продолжением HTML4 или XHTML. Скорее речь идёт о новом языке Web Applications 1.0, который в маркетинговых целях назван знакомой аббревиатурой и построен на базе HTML.
Официально стандарт HTML5 ещё не завершён, но современные браузеры уже умеют частично с ним работать. Итак, что же интересного нам даёт HTML5? Вот некоторые его возможности.
- Поддержка геолокации - определение местоположения пользователя на карте и использование этой информации для вычисления маршрута его движения, вывода близлежащих магазинов, кинотеатров, кафе и других данных.
- Воспроизведение видеороликов.
- Воспроизведение аудиофайлов.
- Локальное хранилище - позволяет сайтам сохранять информацию на локальном компьютере и обращаться к ней позже.
- Фоновые вычисления - стандартный способ запуска JavaScript в браузере в фоновом режиме.
- Оффлайновые приложения - страницы, которые могут работать при отключении Интернета.
- Рисование - внутри тега с помощью JavaScript можно рисовать фигуры, линии, создавать градиенты и трансформировать объекты на лету.
- Новые элементы форм: для даты, времени, поиска, чисел, выбора цвета и др.
Кроме этих возможностей в HTML5 включены новые теги для разметки документа, выброшены устаревшие теги и модифицированы некоторые другие. Для вёрстки веб-страниц в первую очередь необходимо понять, что поменялось и как перевести страницу на HTML5.
Приветствую Вас, дороги читатели блога. Сегодня мы не много узнаем о основах новой разметке веб страниц HTML5. А так же узнаем как наш уже существующий сайт перевести в этот новый HTML язык.
Хочу сказать, что оказывается тут здесь ничего сложного нет. Я давно хотел перевести свой блог с div вёрстки в HTML5, но думал что это будет сложно так как основных новых тегов я не знал. А вот когда взялся за это дело то оказалось, что это совершенно не сложно.
Так что и Вам советую перейти на HTML5, так как всё новое практически всегда лучше, и ещё конечно же на много проще и удобнее.
Верстка div (старая)Друзья, сначала я начну с примеров, так как на примерах всегда понятнее. Как Вы уже догадались, что я перевёл свой блог на HTML5, и по этому возьмём его как пример, рассмотрим старую вёрстку с помощью DIV и посмотри как выглядит новая на HTML5.
Как видите из кода что для каждого div задан свой класс. Например div с классом headerInner — это блок шапки сайта который описан в стилях CSS, соответственно div с классом wrapper — это основной блок в котором находятся 2 блока с записями и боковой колонкой которые имеют классы colLeft — левый блок с постами и colRight правая колонка. И конечно же я не забыл за блок футера под классом footerInner.
Таким не сложным образом у нас получилась сетка из которой далее выходит полноценный сайт. Или же шаблон такой как на моём блоге.
А вот сейчас нам нужно данный код перевести в HTML5, но как оказывается что этот новый стандарт принёс с собой не мало новых тегов, о которых нужно знать перед тем как перевести наш код.
Теги HTML5Сначала давайте рассмотрим теги, которые используются в первую очередь, другими словами основные:
— данный тег задаёт верхнюю часть сайта, или шапку сайта. В него может входить меню, логотип, и другие элементы которые используются в верхней части сайта.
— данный тег задаётся для важных разделов на сайте, например для таких как статьи, или же важные моменты, которые Вы хотите выделить.
— обычно в этом теге содержаться разнообразные записи на сайте, новости, документы. Например посты на блоге.
— задаётся для боковых колонок на сайте (Сайтбара). Не важно где он будет находится слева или справа.
— в этот тег должен входить низ Вашего сайта (Футер)
— в данный тег входят групы заголовков сайтов, например .
— данный тег включает в себя всю навигацию на сайте (меню).
Хочу сказать, что эти все теги обязательно должны закрываться, например если это тег он должен иметь закрывающий тег и так далее.
Вот мы и рассмотрели самые основные теги. Теперь давайте посмотрим теги, которые используются не часто или же в зависимости от тематики сайта:
— данный тег выводит аудио на сайте.
— данный тег создаёт на странице поле в котором можно добавлять и применять к разным элементам разные эффекты с помощью скриптов.
— в этот тег должны входить список меню, например ul li.
— сюда входят время и дата на сайте. Например на блогах дата размещения поста.
— вставляет видео на страницу.
— данный тег переносит слово на новую строку в браузере. Аналогичен старому тегу
.
Естественно изменились не только теги в HTML5, грубо говоря круто изменился doctype. Вот как он выглядит в HTML4:
А вот как он выглядит по новому:
Ну как Вам разница? :-) По моему существенная. Так же ещё проще стал тег . Он был такой:
А стал такой:
Всё, теперь мы знаем практически все изменения и можем смело переходить к вёрстке под HTML5.
Верстка (новая)Перед тем как приступить к вёрстке нам между тегами и нужно вставить простой код для IE, так как этот «супер» браузер не понимает новых тегов:
Ещё обязательно нужно все новые теги сделать блочными. Просто добавьте этот код в любое место в Вашем файле CSS:
Footer, nav, header, section, aside { display: block }
Всё, первый шаг готов. Теперь давайте посмотри на готовый уже HTML5 код, который у меня получился, а также подробно разберём его:
Как видите, что я просто некоторые div поменял на новые теги, опять повторюсь тут ничего сложного нет, главное знать какой класс за какой участок на сайте отвечает.
Опять приведу пример. Возьмём шапку сайта. В старой вёрстке она обозначалась тегом div с классом headerInner — . Как я писал выше, что этот класс выводит блок шапки сайта. А сейчас, когда мы знаем какой тег отвечает за шапку сайта в HTML5 () можем смело его использовать вместо div только с таким же классом. Таким образом у нас получилось следующее:
И не забываем поставить закрывающий тег , а также удалить закрывающий div.
Идём дальше, а у нас главный блок контента. Значит это главный блок и его нужно окружить тегом . В старой вёрстке этот главный блок выглядел так , а в HTML5 будет выглядеть вот так . И опять же не забудьте поставить закрывающий тег и удалить старый div.
Придерживайтесь такого же принципа и в других тегах на сайте. Таким образом я перевёл свой блог в HTML5. И был приятно удивлён тем, что это совсем не сложно.
ВыводДрузья, за Вами решение переходить на HTML5 или не переходить. Но моё мнение переходить однозначно, не нужно засиживаться на одном месть, двигайтесь вперёд, изучайте новое. Ведь не просто так придумывают эти «штуки». Не правда ли? А эта новая вёрстка прямо говорит своими новыми тегами где и какая часть находится на сайте. Не говоря уж о div вёрстке, в которой всё сливается. Ну не просто же так это всё, особенно для поисковиков, которые теперь точно будут знать где и что индексировать, так как названия тегов помогают. Я конечно не знаю берут ли это во внимание поисковики, но всё же.
Вот и всё что хотелось сказать по этому поводу. Друзья, если у Вас что то не будет получаться, спрашивайте в комментариях, и я обязательно помогу:-) До скорых встреч.
Внимательно изучив этот раздел, вы научитесь самостоятельно создавать сайты с нуля, без всяких конструкторов и CMS, а с помощью исключительно HTML 5 и CSS 3. В дальнейшем, когда уже будете делать проекты с использованием популярных CMS, применяя полученные знания, вы сможете вмешаться в исходный код сайта, переделав оформление и структуру под свои нужды.
Курс состоит из 25 уроков. Первая его часть научит понимать и писать код HTML, вторая познакомит с каскадными таблицами стилей (CSS). Именно с этих материалов и рекомендую начать изучать сайтостроение.
- 1
Как создать сайт в Блокноте
Сделайте свою первую HTML-страницу, не прибегая ни к чему, кроме известного всем простейшего текстового редактора, встроенного в любую Windows - Блокнота. Но не просто сделайте, а поймите, как это работает.
- 2
Adobe Dreamweaver - программа для создания сайта
Вы познакомитесь с одним из самых популярных и многофункциональных средств, призванных упростить рабочие будни верстальщикам и веб-дизайнерам - программой Adobe Dreamweaver.
- 3
Что такое HTML
Основные вопросы, мучающие новичков. Что такое HTML? Зачем он нужен? Что позволяет делать? Что лучше - HTML4 или HTML5? Все ответы - в статье.
- 4
Теги
Теги - основная единица языка HTML. Без них не обходится ни одна веб-страница. Статья познакомит вас с основными контейнерами HTML. Из неё вы узнаете, как правильно записываются теги, научитесь частично понимать HTML-код.
- 5
Атрибуты
У тегов есть не только содержимое, но также атрибуты, которые, в свою очередь, наделены значениями. Обо всём этом и пойдёт речь в статье. Где искать атрибуты? Как правильно записывать? Какие атрибуты можно присвоить любому без исключения тегу? А ещё вы узнаете, как разрешить пользователю редактировать любой элемент страницы, как задать для каждого объекта уникальное контекстное меню и как скрыть содержимое элемента, чтобы оно не отображалось в браузере.
- 6
Форматирование текста в HTML
Всё, что связано с оформлением текста: как сделать заголовки, назначить полужирный шрифт или курсив, уменьшить/увеличить размер текста или что-нибудь процитировать. В статье вас ждёт ещё много интересных секретов форматирования текста средствами HTML. А главное - всё это показано на наглядных примерах.
- 7
Создание списков
Маркированные, нумерованные, вложенные - какие хотите. Также вы узнаете, как нумеровать список большими латинскими буквами или римскими цифрами, да ещё и в обратную сторону, как начинать нумерацию не с единицы и тому подобные вещи. А ещё вас ждёт знакомство с мало кому известным списком определений.
- 8
Создание ссылок
Ссылки - чуть ли не основной элемент Интернета, без которого никакой связности страниц бы и не было. Научитесь создавать ссылки на примерах, узнайте, чем относительные пути отличаются от абсолютных, познакомьтесь с внутренними и графическими ссылками, научитесь ставить их на e-mail и Skype.
- 9
Вставка изображений
Картинки украшают страницу, поэтому уметь добавлять их - навык очень полезный. А если превратить изображение в навигационную карту, то оно становится не только симпатичным, но и очень полезным элементом. Научитесь создавать такие объекты на наглядных примерах, которые есть в статье.
- 10
Вставка таблиц
Внимательно изучив этот раздел, вы научитесь самостоятельно работать с таблиц. На основе таблиц когда-то создавались целые структуры сайтов, но об этом будет идти речь в следующем уроке.
- 11
Табличная вёрстка сайта
Как вообще можно сверстать целый сайт? Способов есть много, один из них - делать его с помощью таблиц. О том, что представляет собой такой метод, вы и узнаете. Наглядные примеры, как всегда, присутствуют, и помогут без труда освоить табличный подход.
- 12
Фреймы
Статья для тех, кто хочет научиться отображать в одном HTML документе совершенно другую страницу. Вы узнаете, что такое фреймы, как они создавались раньше и как создаются сейчас, а также познакомитесь с доступными им атрибутами.
- 14
CSS текст
На примерах показано, как выровнять текст по горизонтали и вертикали, изменить отступ и междустрочный интервал, добавить подчёркивание или надчёркивание, увеличить расстояние между символами и сменить регистр.
- 15
CSS шрифты
Прочтя статью, вы поймёте принципы группировки шрифтов в CSS, узнаете, какие из них поддерживает любой браузер, научитесь менять их размер и стиль, цвет и насыщенность. Разберётесь с аббревиатурами RGB и HSL, а также узнаете, зачем к ним иногда добавляют букву A.
- 16
CSS ссылки
Читать стоит после того, как освоили ссылки в HTML, потому что эта статья научит их не создавать, а оформлять, причём задать внешний вид вы можете не только для разных ссылок, но и для одной и той же, находящейся в разных состояниях. Пусть если по ней ещё не переходили, она будет синей, если навели указатель - зелёной с подчёркнутым текстом, щёлкнули - жёлтой и полужирной, а перешли - курсивной и фиолетовой.
- 17
CSS таблицы
Всё о правильном оформлении таблиц: ширина и высота, расположение заголовка, удаление двойных границ, определение расстояний, скрытие фона и многое другое, подкреплённое живыми примерами.
- 18
CSS списки
А вы знали, что в качестве маркера списку можно задавать не только круг, но и окружность или даже квадрат? Да хоть произвольную картинку. А знали, что помимо стандартных нумераций можно установить, например, традиционную армянскую? А как превратить маркер из вынесенного в обтекаемый? Нет? Тогда загляните в статью, там ждёт не только теория, но и примеры.
- 19
CSS фон
Всё о фоне. Цвет, на фоне которого пишется текст. Картинка, на фоне которой отображается вся страница: повторяющаяся по горизонтали, по вертикали, по всем направлениям одновременно, позиционированная, масштабируемая и т. д.
- 20
13 Что такое CSS
Какие основные операторы и элементы присутствуют в документе каскадных таблиц стилей, что вообще такое этот CSS, зачем он нужен и чем отличается от HTML, а главное - как связать каскадную таблицу стилей с HTML-элементом.
Привет всем! Вот и началась долгожданная олимпиада. Желаю все участникам больших успехов и удачи, ну и конечно же я очень болею за Россию, т.к. я сам россиянин. А теперь к теме поста. В данной статье поговорим о современной разметке HTML5, о ее преимуществах и важности в целом. Я все никак не мог перейти на html5, думал что это только новое совсем, не все браузеры поддерживают, в частности ИЕ 7-8. Но все оказалось не совсем так.
Сегодня html5 для разметки веб-страниц используется на полном ходу и практически все современные браузеры поддерживают данную разметку, хотя считается, что спецификация html5 находится еще на стадии разработки. Что касается интернет эксплорер 7-8 версии, то для них имеется специальный костыль, состоящий из небольшого javaScript’a. На мой взгляд верстать на html5 очень удобно, т.к. в первую очередь html5 это семантика. Здесь используются некоторые структурные элементы, с помощью которых структура документа становится легко читаемой и понятной не только человеку, но и поисковому роботу.
Итак, давайте разберем разметку html5 по шагам и начнем с самого начала документа — Doctype. Doctype в html5 записывается уже намного проще, так, что можно легко запомнить.
Обозначение кодировки прописывается следующим образом
Чувствуете разницу? Код стал значительно легче и запомнить также очень легко. Также при подключении скриптов и стилей теперь не обязательно указывать type.
Следующее, что мы сделаем это подключим небольшой javascript для того, что ИЕ понимал новую разметку.
document.createElement(‘header’);
document.createElement(‘nav’);
document.createElement(‘section’);
document.createElement(‘article’);
document.createElement(‘aside’);
document.createElement(‘footer’);
Данный скрипт также можно и подгрузить с сервера Гугл.
— группирует какие либо тематические блоки (создаются секции), также поддерживается вложенность данного элемента
— определяет область заголовка раздела или страницы. Очень часто в верстке данным тегом обрамляют шапку сайта.
— определяет нижний колонтитул раздела или страницы. Обычно данным тегом обрамляют подвал сайта, в котором содержится информация о копирайте, контактах, условиях использования и т.д.
— размечает навигационную цепочку сайта. Здесь может быть меню сайта, блок хлебных крошек и др.
— определяет основное содержание сайта, например, отдельная статья.
— вторичный контент на сайте. Обычно данными элементами размечают сайдбары.
Следует отметить, что новые элементы html5 имеют инлайновую природу, т.е. для корректного отображения их необходимо сделать блоками.
Header, nav, section, article, aside, footer {display: block}
Исходя из вышеизложенного можно набросать небольшой макет страницы на html5
Примерная разметка на html5
Шапка сайта
Меню сайта
Статья
Боковая колонка (сайдбар)
Подвал сайта
Как видите, у html5 есть явное преимущество перед html4, как в плане разметки, так и в плане СЕО. О СЕО поговорим ниже.
Помимо основных тегов также часто используются и следующие теги:
placeholder (placeholder=»Текст»)
— выводит надпись в поле input, а при набирании текста он автоматически исчезает. Данный атрибут появился именно в html5, теперь отпадает использование дополнительных скриптов для вывода текста в поле, например в поле поиска.
— выделение какого либо важного слова или словосочетания. Обратите внимание на желтый фоновый цвет.
— данные теги служат для вывода адреса, например, адрес организации.
— выводит видео на сайте со стандартным плеером браузера.
— выводит аудио-запись на сайте стандартным плеером браузера
Структура статьи
HTML5 и СЕООдно из ключевых особенностей HTML5 и на мой взгляд самое важное — это разделение поисковым роботом всех блоков по их значимости, т.е. сегментация веб-страниц. В html4 сделать это было невозможно, т.к. стандартный тег div не добавляет смысловой значимости элементу, который находится внутри данного тега. С использованием новых элементов header, article, aside, footer все меняется. Т.е. грубо говоря, они «говорят» поисковым роботам каким элементам придавать значение, а какие пропускать. Например, поисковый бот легко поймет, что информация, заключенная между тегами является копирайтом и подобной информацией для посетителя.
Элементы, влияющие на индексацию в поисковых системах
Тег article является одним из наиболее важных при сегментации страниц сайта. Данный тег явно указывает поисковым системам, где находится основной контент сайта. А мы все знаем, что контент это прежде всего то, за чем приходят посетители на сайт. Здесь предполагается, что ПС будут максимально уделять внимание контенту, заключенному между тегами , отбросив или отодвинув на второй план остальные элементы.
Элемент section разбивает всю разметку на различные секции. Что это дает? Поисковые роботы хорошо ориентируются на веб-странице, которая хорошо структурирована. Если правильно использовать тег , то можно с легкостью построить информационную иерархию документа, а это в свою очередь улучшает индексацию сайта в целом.
C помощью тега header поисковые роботы легко могут найти на сайте логотип, название сайта, слоган, главную навигацию (главное меню).
Данный тег определяет навигационную структуру на сайте.
СсылкиВот основные атрибуты ссылок в HTML5:
Остальные атрибуты можете посмотреть .
Вот такой вот небольшой обзор разметки на HTML5. Что касается меня, то я давно перешел на верстку с использованием разметки HTML5 и большинство шаблонов на своих сайтах уже перевел на HTML5, вот только вот до данного блога никак руки не доходят.
На этом все. Всем пока. Увидимся в следующих постах.
А вы уже перешли на HTML5?
Загрузка...