Количество просмотров:
0В статье раскрываются мнения экспертов о HTML5 - сайт шаблон с CSS3. Данная статья была создана 2013 и подкорректирована в апреле 2016.
Если Вы изучаете HTML5 и используете в своем арсенале все новые его технологии, то Вам вероятно будет гораздо удобнее использовать собственный основной шаблон HTML5 для сайта, а также включаете CSS3 , с которого начнете программирование. Эта наша рекомендация, вы можете в своей работе использовать конечно любые другие источники для изучения HTML5.
Все же, в данной программе мы хотим составить собственный код с самого начала, вместе с Вами рассматривая и объясняя каждую его часть.
Безусловно, мы будем рассматривать не каждый элемент и метод кода, так как получится достаточно громоздко, а рассмотрим только некоторые новые функции, которыми Вы не пользовались, а возможно и не знали о них. Таким образом, Вы сможете расширить собственный арсенал приемов в программировании веб-сайтов и веб-приложений с использованием HTML5 & CSS3, а данная статья будет служить для Вас в качестве некого краткого справочника, где сможете найти полезные методики программирования.
Давайте начнем с простого, шаблон сайта HTML5
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<script src="js/scripts.js"></script>
</body>
</html>
С помощью этого основного шаблона давайте вместе рассмотрим некоторые из основных частей разметки и сравним их написание в HTML и HTML5.
Сравним Doctype
Во-первых мы используем документа Document Type Declaration или иными словами Doctype. Используя данный параметр мы сообщаем браузеру , либо другому анализатору какой тип присвоен документу. Если мы говорим об HTML, то указывается конкретная версия и ее особенности.
Doctype всегда находится на первом месте, в верхней части каждого HTML-файла. Много лет назад параметр Doctype выглядел загромождено, трудновоспринимаемо и беспорядочно.
Версия скрипта XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Уже в HTML4 он выглядит так
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Несмотря на то, что длинная строчка Doctype в верхней части кода никоем образом не влияет на работоспособности сайта (если не брать в учет что происходит загрузка дополнительных байтов у зрителей сайта) HTML5 покончило с этим неразборчивым уродство.
Теперь все, что Вам нужно это прописать следующее:
<!doctype html>
Красота! Просто и по сути. Доктайп может быть записан в верхнем регистре, в нижнем регистре, или используя и тот и другой случай. Вы наверное уже заметили, что "5" не прописывается в коде, хотя безусловно для каждого программиста данная веб-разметка известна, как "HTML5", это на самом деле это просто версия предыдущих HTML, будущие версий будут развиваться на основе HTML5.
Поскольку все существующие в Интернете документы поддерживаются браузерами, то Доктайп говорит браузеру какие функции поддерживаются в данном документе. Другими словами сам по себе Doctype не делает ваши страницы совместимыми с HTML5, - эта задача браузера.
Фактически Вы можете использовать одну из старых версий Doctype вперемешку с новыми элементами HTML5 в коде, страница будет отражаться с учетом использования HTML5.
Элемент -html-
Следующим в верхней строке HTML кода - это элемент - html-, который особо не изменился с HTML5. В нашем примере используем атрибут lang с присвоенным значением -en- сообщает браузеру, что документ самой страницы написан на английском языке. Данный атрибут необходимо было включать в Xmlns, в HTML5 в данном атрибуте не нуждается, без атрибута lang документ будет корректно отражаться.
Таким образом, он будет отражать код с закрывающим тегом </html>.
<!doctype html> <html lang="en"> </html>
Элемент -head-
Следующей частью нашего кода элемент head - раздел <голова> . Первой строкой внутри раздела -head- задают кодировку документа. Этот элемент также был упрощен в сравнении с версиями XHTML и HTML4 и прописывался так:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML5 усовершенствовал кодировку за счет уменьшения количества символов тега <META> до минимума:
<meta charset="utf-8">
Практически всегда вы будете прописывать значение UTF-8 в коде страницы. Более подробное раскрытие значения данного символа кода мы в данной статье рассматривать не будем, так как это не столь увлекательно, но если у Вас все же появилось желание углубиться в эту тематику, то можете изучить более подробно на W3C или WHATWG.
Примечание: объявление о кодировке
Для того чтобы браузеры считывали корректно кодировку символов, всё объявление кодировки должны быть внесены в 512 символов нашего документа. Данное объявление должно появиться перед основными мета данными. (В нашем примере объявление кодировки происходит после элемента <title>)
По этому вопросу, мы могли бы рассказать гораздо больше, но мы хотим избавить вас от ненужной информации, поэтому заострим внимание на главном. Сейчас мы остановимся и перейдем к следующей части документа.
<title>The HTML5 Herald</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint">
В этих строках HTML5 практически не отличается от своих предыдущих версий. Название заголовка -title- (единственный обязательный элемент в заголовке head ) объявляется также как и в прошлых версиях, а мета теги, включенные нами ради примера о месте их расположения, являются необязательными, здесь вводятся все существующие мета-данные, которыми вы пользуетесь.
Ключевым моментом этой части разметки является таблица стилей, которая прописывается с помощью обычного элемента -link- (ссылки). В отличие от тега link, другие, такие как href и rel являются необязательными. Атрибут type, используемый в прошлых версиях HTML, здесь стал не нужным, ранее он использовался для таблицы стилей.
Рабочая область
Прежде чем рассмотрим следующий элемент разметки, немного отступим для справки. В HTML5 были включены новые элементы, такие как article и section, которые будут рассмотрены более подробно далее. Некоторые подумают, что новые теги могут быть нераспознаны старыми браузерами, но это не так, так как большинству браузеров все равно какие теги вы используете.
Если вы использовали тег recipe или ziggy в документе в версии HTML, то используемый CSS прописал стили данного документа, браузер корректно отразит ваш документ. Конечно, теоретически такой документа будет доступен во всех браузерах, возможно проблемы с доступом могут возникнуть в старых версиях Internet Explorer. До 9 версии Internet Explorer не отражают корректно нераспознанные элементы стилей. Эти элементы были помечены как "неопознанные элементы", поэтому вы их и не увидели. Это касается не только "неопознанных элементов", но и тех, которые должны были быть распознаны. Как вы уже поняли это касается элементов HTML5.
Хорошей новостью является тот факт, что на момент написания статьи, большинство пользователей уже успешно перешли на 9 и выше версию Internet Explorer (IE) с этим никаких проблем, однако же остается та малая часть пользователей с 8 и более ранними версиями браузера, и теперь должны убедиться, что все ваши проекты корректно отражаются.
К счастью, есть достаточно простое решение: простейшая вставка части JavaScript, предложенная John Resig. Предложенная идея Sjoerd Visscher, поможет новые элементы HTML5 корректно отражать в устаревших версиях IE.
Мы включили, так называемое определение HTML5 в наш код, как тег "с условием". Данное прописанное условие позволит распознать код в 9 и более ранних версиях IE. Данная возможность позволит учитывать специфику отражения скриптов или стилей различных версий браузера.
В приведенном ниже примере, происходит сообщение браузеру, что разметка должна отражаться только при использовании просмотра страниц в IE до 9 версии:
<!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> <![endif]-->
Обращаем внимание, что корректное отражение кодировки HTML5 и новых API-интерфейсов возможно при использовании библиотеки JavaScript в виде скрипта, в этом случае можно не использовать приведенное выше условие.
Modernizr - один из примеров библиотеки JavaScript , которая распознает новые функции HTML и CSS. У Modernizr открытый исходный код, который позволяет определить поддерживание всевозможных свойств для пользования всеми возможностями HTML5 и шаблон CSS3, не обращая внимание версионность браузеров.
Другими словами, Modernizr дает возможность распознавать код HTML5, та что прописанное ранее условие будет лишним.
В дальнейшем мы более внимательно рассмотрим возможности , Modernizr.
примечание: HTML5-скрипт распознается не всеми .
Не будем забывать, что существует пользователи, которые не используют HTML5-скрипт: те, которые сознательно не используют JavaScript или же пользуются версией IE версии 8 или ниже.
Как веб-дизайнеры, мы должны стремиться что бы доступность наших сайтов не зависела от использование JavaScript или версионности браузера. Все не так плохо, как кажется.
По приведенным исследованиям за 2013 и 2010 года пользователи со старыми браузерами или отключенными JavaScript составило около 1% от общего числа.
Просматривая далее, видим обычный элемент body, вместе с закрывающимся тегом, а также закрывающийся тег html. Мы также прописываем внутри файла JavaScript скрипт -элемент.
Знакомый ранее тег link не содержит тег <script>, для объявление атрибута type.
Если вы работали в XHTML то Ваши скрипты - теги выглядели примерно так
<script src="js/scripts.js" type="text/javascript"></script>
Так как JavaScript практически всегда успешно использует единый язык в Интернете, а все браузеры распознают, что Вами используется данный JavaScript, даже в тех случаях когда не объявляете атрибут type, не используемый в HTML5:
<script src="js/scripts.js"></script>
Мы специально поместили -script- элемент в конце кода для лучшей работы JavaScript. Это связано со скоростью загрузки страницы, ведь когда браузеры встретят cкрипт, это будет тормозить загрузку всей страницы на то время пока идет распознание скрипта.
Чем больше скриптов используется в верхней части кода, тем медленнее происходит загрузка документа, поэтому все скрипты лучше использовать в самом низу, что бы браузер распознавал их успев загрузить остальные части страницы.
В некоторых случаях (HTML5) скрипты специально используются в начале кода страницы, если Вы хотите, например, чтобы они уже работали до обработки браузером страницы.