Здравствуйте, Я рад приветствовать Вас на курсе, который посвящен разработке приложений на HTML 5 и CSS3. Это базовый курс. Что бы успешно усвоить материал данного курса, вы должны знать основы HTML верстки и иметь базовые навыки работы с JavaScript кодом. Тема урока: введение в HTML5. Мы сегодня с вами разберем кратко историю развития спецификации, увидим основные возможности, так же мы разберем семантическую разметку, это новые элементы, которые применяются при делении структуры документа и так же рассмотрим несколько особенностей, о которых вы должны знать создавая новый документ используя HTML 5. Что такое HTML я думаю уже знают все, даже те кто не имеют отношения к веб программированию.

HTML – стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML. Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

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

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

Язык HTML был разработан вначале 90-х годов британским ученым Бернардсом Ли, он так же является автором многих других веб-стандартов и веб-технологий, например протокол HTTP.

Его биографию, историю созданий некоторых приложений вы можете посмотреть на Википедии.

Язик HTML 5, если посмотреть на историю, достаточно быстро начал развиваться. С 1995 – 1997 год, вышло 3 версии. В 1999 году вышел HTML версии 4.1 и на этом этапе развитие HTML затихло.

Я думаю вы все знаете организацию World Wide Web Consortium, которая занимается стандартизацией веб технологий. В 2004 году несколько крупных производителей браузеров собрали группу и под ее руководством было положено развитие новой спецификации HTML5. К 2008 году консорциум переподключился к развитию этой спецификации и со временем от разработки XML и XHTML второго стандарта отказались. Акцент был сделан на HTML5 спецификацию. В 2008 году появилась первая версия и на данный момент HTML5 все так же остается в разработке. На текущий момент спецификация еще не завершена. Завершение разработки планируется в 2014 году. Всю историю разработки вы можете посмотреть на Википедии или на сайте самой группы разработчиков. Давайте перейдем к следующему слайду и посмотрим идеологию, которой придерживается компания разрабатывающая HTML5 спецификацию. Первый пункт это

Совместимость – если вы разрабатываете сайт на HTML5, то можете не беспокоится, он будет корректно работать, без сбоев, даже в тех браузерах, которые не поддерживает HTML5.

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

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

Универсальность доступа – возможность получения информации с сайта всеми пользователями в независимости от их возможностей, от языка и т.п. По сути универсальность доступа базируется на 3-х принципах: доступность, сайт HTML5 спецификации работает с несколькими стандартами, которые предназначены для предоставления функциональности пользователям с ограниченными возможностями. Следующий пункт это – независимость от мультимедийных устройств.

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

Первый пункт: Canvas – элемент для использования растровых изображений в документе.

Передача сообщений между документами – 2 разных документа могут наладить между собой общение.

Geolocation API – возможность, встроенная в браузер, которая дает информацию об текущем расположении пользователя.

MathMl – набор элементов для отображения сложных формул.

Microdata – элемент для добавления специальных данных. Можно добавить элементы для читания поисковиками.

WebSocket – протокол для создания приложений реального времени. Можно сделать приложение, в котором серверная сторона может обратится к клиентской. Например: чат.

С использованием данного инструмента можно оповестить всех участников чата об сообщении.

Веб-хранилища – дополнительные возможности сохранять данные на стороне клиента.

Web SQL Database – возможность использование базы данных в коде. База будет собой представлять текстовый файл.

Web Workers – инструмент для создания отдельных веб приложений.

XMLHttpRequest Level 2 – инструмент для написания Ajax сайта.

Теперь давайте перейдем в Visual Studio и начнем разбирать примеры по текущему уроку. Конечно вы можете использовать не только Visual Studio, но и любой другой текстовый редактор, которым вам удобно пользоваться. Если вы будете пользоваться Visual Studio, чтобы открыть файлы к текущему уроку, воспользуйтесь меню file – open – web site, найдите текущий урок и откройте его в студии. В Solution Explorer у вас загрузится контент урока, в каждом уроке у вас есть презентация и файл с описанием, в котором находятся домашние задания и рекомендации по прохождению текущего урока. Начнем мы урок с примеров показывающих новую структуру работы HTML документа. Открываем первый пример и смотрим как мы можем определить, что текущий документ является документом написанным на HTML 5. В обычных HTML документах, на первой строчке у нас всегда находилась строка doctypes с достаточно сложным и непонятным содержимым. Мало кто из вас на память знает, что нужно писать. Обычно все полагаются на возможности текстового редактора в котором вы разрабатываете свою страницу. В зависимости от этой строки, у нас браузеры будут определять какой версией HTML разметки мы пользовались и в зависимости от этого браузер будет делать какие то отметки при визуализации документа. Я думаю, вы легко сможете найти в интернете описание всем возможным доктайпам, сейчас мы не будем разбирать это. Так как курс предназначен для изучения HTML5. Поэтому постарайтесь самостоятельно найти описание doctype, если вам интересна данная тема. Строка 6-я, вместо того, чтобы использовать doctype старый, в HTML5 doctype сильно упростили и если вы собираетесь создать HTML5 документ, вам достаточно сделать doctype с атрибутом HTML. Эта строчка будет указывать, что текущий документ написан с помощью HTML5 спецификации. Теперь вы можете полагаться не на инструмент, которым разрабатываете страницу, а самостоятельно определить doctype. Следующее упрощение относиться к определение кодировки, которая используется на странице. Кодировка в большинстве случаев возвращается самим сервером, когда браузер скачивает HTML, в заголовках с ответом сервера, иногда находится кодировка, которой браузер должен пользоваться для отображения самой страницы. Но если кодировка не предоставлена, в таком случае мы можем использовать специальные элементы разметки, которые скажут браузерам, какую кодировку следует использовать. Для того, чтобы указать кодировку в предыдущих версиях HTML, нам нужно было использовать элемент meta в head. Вот такая строка указывала бы, что текущий документ использует кодировку UTF8. Сейчас, для того чтобы определить кодировку в HTML5 нам достаточно атрибут и использовать элемент. Вот таким вот способом определяется кодировка в HTML5. Следующее изменение и упрощение относится к подключения java script кода и css файлов. Если посмотреть на 12 строчку, мы подключаем css, в 13 строчке мы используем script, где указываем путь к подключенному элемент кода. Вот выглядит подключение сценариев и стилей в HTML5. Если сравнить это с HTML4, то по сути отличия заключаются только в 1-м атрибуте type, для каждого типа содержимого, которое возвращается со стороны сервера или отправляет на сервер есть такая строчка, которая определяет формат данных. Сейчас эти атрибуты необязательны для сценариев определения стилей на странице, достаточно просто определить те атрибуты, которые указывают на сценарий или стиль. Большинство браузеров не требуют атрибута type, даже старые версии будут корректно работать со стилем или скриптом, если вы этот атрибут не предоставили. Вот первые 3 файла, мы увидели самые простые элементы страницы, с которыми мы сталкиваемся постоянно. В следующих примерах мы пройдемся по некоторым новым атрибутам, которые можно использовать непосредственно в теле документа. Пример номер 4, элемент mark. С помощью этого элемента мы можем определить текст в документе, который должен быть помеченным, так как будто мы производили поиск и ключевую фразу, которую мы искали, нам нужно выделить. Элемент mark в большинстве браузерах он будет использовать дополнительные стили. Этот элемент мы можем стилизовать и определить как именно контент может отображаться пользователю. Давайте посмотрим этот пример, запустим его в браузере. Мы можем нажать на комбинацию ctrl f5, visual studio запустит браузер, который установлен в ToolBar visual studio и в браузере мы увидим, что 2 элемента, которые были помещены в mark. Следующий пример, это элемент abbr, использующийся для указания аббревиатуры в коде. 8-я строчка, определяем элемент abbr и в него помещаем текст, который является аббревиатурой, также в title мы определяем расшифровку аббревиатуры или какую то подсказку, которая будет показываться пользователю, если навести мышку на текст, у нас появляется title, в котором выводится сообщение, заложенное в атрибут. Это тоже один из элементов, который появился в HTML5.

Следующие возможности, которые касаются ссылок. Если вы создаете HTML5 документ, в браузере который поддерживает HTML5, если вы создаете ссылку и в эту ссылку помещаете несколько HTML элементов, вот например у нас сейчас ссылка, которая ведет на сайт и в этой ссылке у нас находится элемент H1 и картинка. Если мы сейчас запустим этот пример, то мы увидим, что элемент H1 и изображение будут кликабельны и каждый с элементов будет представлять отдельную ссылку. Но между ними пространство не является ссылкой, хотя все это помещено в один тег /А. Если мы хотим сделать такое же в HTML4, то нам придется использовать 2 отдельные ссылки, иначе это все будет единой ссылкой, если мы будем использовать оба элемента в одной ссылке /А.

Следующий пример, пример использования элемента details. К сожалению этот элемент на данный момент работает только в google chome. Посмотрите, что у нас сейчас находится внутри страницы. Строка 13-я, у нас есть элемент details, ниже элемент summary, где определяется текст привязанный к details, а дальше контент, который мы хотим поместить в блок details. Я думаю вы все видели элементы управления, которые принято называть аккордеонами, которые разворачиваются при клике и сворачиваются при повторном клике. Вот, по сути, с помощью элемента details, без подключения внешних плагинов, мы можем использовать некоторое подобие аккордеона на своей странице. Сейчас, если мы запустим этот пример в visual studio, которая запускает его в FireFox, на данный момент. При запуске приложения у нас отображается обычная HTML разметка. Все, что находилось внутри элемента details, оно отображается как обычный HTML текст, но мы переключимся на google chrome, то увидим, что у нас отображается стрелочка, которая определяет текст, который мы заложили в элемент summary, если мы кликаем по стрелочке, то разворачивается контент, который был помещен в элемент details. Кликаем повторно, контент сворачивается. В других браузерах, данная функция еще не реализована. Следующий пример – order list. В этом примере мы разберем элемент /оl, который вы все использовали на своих сайтах, естественно этот элемент не является частью HTML5 спецификации, он появился достаточно давно, но в HTML5 спецификации появляются атрибуты, которые мы можем использовать в данном тэге. Если мы посмотрим в начало нашего документа. В строке /оl, определяем в нем 3 элемента и на 12-й строчке указываем, что /оl должен начинаться с символа 3. По умолчанию /оl нам рисует список, который пронумерован, если мы не укажем старт = 3 тогда HTML будет первым пунктом, java script вторым, jquery третьим. Если мы запустим пример, первый список, 3..4..5, благодаря атрибуту start, Если посмотреть на следующий список /оl с атрибутом reversed, это означает, что при отображении в браузере все элементы, которые находятся в документе будут происходить в противоположном направлении. Вот вы видите в хроме, как отобразился этот документ. Если мы будем использовать /ul с атрибутом reversed, то это никак не повлияет на отображение списка. Вы видите как в хроме отобразились данные. Никакого обратного вывода не получилось. И последний блок кода в этом документе, это /оl, в котором каждый лист item использует атрибут value. С помощью атрибута мы можем явно указать какой индекс будет использоваться возле одного элемента списка. Обратите внимание как данные отобразились в хроме. Строка 39, здесь у нас пункт с индексом 1, потом 40-я строчка пункт с индексом 1.

Следующий пример, это атрибут Contenteditable, если вы создаете элемент разметки и добавляете к этому элементу атрибут Contenteditable, это значит что содержимое элемента может быть отредактировано пользователем. Элемент article мы с вами разберем в следующих примерах. Этот элемент никаких дополнительных возможностей для HTML разметки текущей страницы не добавляет. Но вы видите, что article использует атрибут Contenteditable, это значит, что если мы запустим этот пример, и поставим курсор внутри данного элемента, то мы сможем производить редактирование. Вот допустим в конце я могу написать сообщение Hello World или удалить текст внутри данного блога. Естественно, сейчас изменения, которые я произвел, они происходят только локально, на стороне сервера ничего не меняется. Другие пользователи эти изменения не увидят. Если вы хотите, чтобы данные, которые вы сейчас вносили, сохранились на сервер. Необходимо добавить java script код, который будет собирать изменения с элемента article и производить изменения Ajax-ом, например, и отправлять их на сервер.

Следующий пример, в котором указаны, по сути мы должны его просто запустить и посмотреть на те элементы разметки, которые уже устарели, которые мы не должны использовать, если делаем верстку с использованием HTML5. Элементы которые мы не должны использовать это:

basefont,

big, который позволяет делать текст больших размеров,

center, который позволяет центрировать элемент,

font для указания шрифта,

plaintext для отображения чистого текста, определения, что блок документа содержит в себе содержимое текстового типа,

s и stike для того чтобы указать, что блок текста должен быть перечеркнутым

tt, эдля определения того, что текст должен быть моножирным шрифтом

u, для того чтобы сделать подчеркнутым элемент.

От этих элементов в HTML5 спецификации мы отказываемся и использовать не должны. Так же у нас есть ряд атрибутов, которые тоже устарели в HTML5 спецификации. Это атрибут

Align для выравнивания текста внутри блока,

Background для задания фона,

Bgcolor, так же для задания фона,

Border, для задания цвета фона,

Атрибут cellpadding, cellspacing, height, align, width. По сути эти атрибуты мы должны заменять css стилями, от них мы должны отказаться, но я думаю, что большинство из вас не пользовались этими элементами, а использовали уже css правила, для того что бы оформить документ. Посмотрите на эти элементы, запомните их и постарайтесь не применять.

В следующем примере мы разберем использование очень полезной библиотеки для HTML5 сайта, библиотеки modernizer. Эта библиотека используется, что бы определить возможности текущего браузера, который скачал HTML страницу. Библиотеку вы можете бесплатно скачать по указанному вначале файла сайту. Давайте сейчас перейдем по этому адресу и посмотрим, что из себя представляет эта библиотека, как вы можете ее получить. Modernizer это java script библиотека, которая распостраняется бесплатно. На сайте вы можете найти документацию, дополнительные ресурсы, последние новости по разработке библиотеки, ну и естественно можете ее скачать. Вы видите 2 кнопки: development и production, у вас есть возможность собрать необходимые себе функции и скачать эту библиотеку в несжатом виде. Если вы собираетесь использовать библиотеку у себя на продакшн сайте, то естественно вы должны воспользоваться кнопкой и скачать библиотеку, которая будет минимизирована, В исходно коде будут удалены все комментарии, все переносы в новую строчку, лишние пробелы и локальные переменные, их имена будут переименованы в максимально короткие времена. Это делается для того, чтобы библиотека весила минимум и как можно быстрее скачивалась клиентами. Если вы кликаете, например по кнопке development, видите, как выглядит страница скачивания. Вы указываете, какие именно функции вам необходимо поместить в библиотеку и нажимая на кнопку download, вы скачиваете выбранный набор функционала в виде единой библиотеки. Если же вы собираетесь работать с продакшн версией, то в таком случае нажимаете кнопку production, выбираете только необходимые себе функции. Обратите внимание, что на пред идущем слайде все галочки были проставлены для development версии. Давайте посмотрим как выглядит наш пример с использование библиотеки. Вот она скопирована в наш проект. Если мы откроем ее, это продакшн версия, невозможно разобрать тот код, который здесь находится, у нас все превратилось в линейную строчку и все элементы у нас превратились в АСDE, библиотека была минимизирована и были удалены все лишние имена. Вот эту библиотеку мы скопировали к себе в проект и в приложении, которое мы сейчас разбираем, строка 10-я, библиотека подключена с помощью элемента script. Что мы делаем в самом теле документа. Библиотека предоставляет нам глобальный обьект. У которого есть много различных свойств, если мы хотим проверить наличие в браузере canvas, мы проверяем modernizer canvas, если это свойство с значением true, мы видим, что браузер поддерживает canvas, если false, браузер не поддерживает. Строка 19, мы узнаем, поддерживает ли браузер воспроизведение видео вот в таком формате. 23 строчка – проверка геолокации. 27 – проверка возможности использовать input с типом color. Для чего нужна вот такая проверка. Когда вы на своих страницах используете различные фичи HTML5, которые еще не всеми браузерами поддерживаются, вы можете сделать проверку. Получается, что modernizer, это важная библиотека, которая позволяет делать приложения, корректно работающие как в современных браузерах и браузерах, которые не поддерживают возможности HTML5. Давайте запустим в хроме. Если переключимся на фаерфокс, увидим, что он поддерживает то же самое, но элемент color он не воспроизводит. Следующий пример использования, покажет нам как загрузить, в зависимости от наличия поддержки, загрузить документ, необходимый для имитации какого ни будь функционала. Посмотрите на 15 строку, мы вызываем функцию load и в качестве параметра передаем java script объект. Этот блок проверяет знает ли modernizer о свойстве placeholder для input. Если мы загрузим пример, фаерфокс поддерживает, поэтому выводиться yep, если загрузим браузер, который не поддерживает placeholder, увидим другое сообщение. По сути все браузеры поддерживают атрибут placeholder. Теперь давайте разберем следующий пример, в котором показаны 2 HTML валидатора, позволяющие проверить, насколько ваша разметка соответствует стандартам. Если мы запустим этот пример, то вы видите, в браузере у нас есть 2 ссылки, которые ведут на стандартный валидатор консорциума и валидатор, разработанный посторонними разработчиками. Если вы перейдете по ссылке, то сможете на главной странице этого валидатора указать адрес сайта, который вы собираетесь проверить, либо файл, в котором находится исходный код для проверки, либо указать непосредственно контент, вставив его в текстбокс. Возьмем какой-нибудь сайт. Нажмем проверить его, и увидим перечень тех ошибок, которые не соответствуют стандартам на странице Google, точно так же вы можете проверить свои собственные страницы и постараться избавится от ошибок, которые вводит валидатор. Если взять следующий валидатор, он тоже очень похожий, вы можете взять текст либо выбрать файл, либо указать адрес и проверить содержимое документа.

14-й пример показывает использование элемента time, вы можете в тело документа использовать данные о времени. Вы можете добавлять значения определяющие время и дату. Вы видите в строке 18 у нас есть текст опубликован и элемент, который будет указывать, когда именно элемент был опубликован в текущий документ. Если мы семантически выделить внутри документа, что по смыслу, данный контекст является временем, для того что бы поисковики могли понимать, где у нас обычный текст, а где текст, который определяется наличием даты/времени. Это нужно для поисковой оптимизации, для того что бы определить, что данный блок текста является временем. Так же мы можем стилизовать этот элемент. На 11 строке мы создали стиль, который меняет фон. И видите? как у нас отображаются даты. Следующий элемент показывает использование атрибута hidden, с помощью него вы можете указать, что элемент не должен отображаться пользователю. По сути это эквивалент использования сss стилей, когда мы в css указываем видимость элемента. В 11-й строке мы определяем атрибут hidden и при загрузке элемента, текст не отображается.

16-й пример показывает использование контекстного меню. Контекстное меню будет у нас работать только в фаерфоксе. Пока еще не все браузеры поддерживают данную возможность. Мы запускаем текущий пример, у нас в браузере появляется изображение, если мы правой кнопкой кликаем по нему, то в стандартном окне появляется 2 пункта меню. Можно повернуть на 90 градусов по часовой стрелке или против. Если мы кликаем по пункту меню, происходит вращение, происходят изменения. Давайте посмотрим на 38-ю строку, где реализована наша картинка. Для того что бы к картинке привязать контекстное меню, используем атрибут контекст меню и указываем имя элемента на данной странице, которая представляет контекстное меню. Мы указали edit, а на 40 строчке у нас есть элемент id edit. Строка 41 и 43 определяет элементы этого меню. Закончив разбор этих примеров, мы рассмотрели основные изменения, касающиеся важных элементов документа, указывание доктайпа, указывание кодировки, так же мы посмотрели несколько новых атрибутов, которые появились в HTML5, обсудили какие атрибуты устарели, посмотрели какие есть инструменты библиотеки modernizer и разобрали использование контекстного меню и использование валидаторов. Перед тем как перейти к примеру, в котором мы изучим с вами семантическую разметку, в котором разберем те новые теги, которые вы должны использовать делая верстку страниц. Давайте мы рассмотрим ресурсы, которые будут полезными для разработки HTML5 сайтов. В фаерфоксе я подготовил уже перечень вкладок, которые вы должны будете себе записать и пользоваться, изучать материал под средством этих сайтов. В презентации есть ссылки на несколько из этих сайтов. Самый первый сайт это Caniuse, с его помощью вы можете проверить поддержку либо HTML5 либо CSS в современных браузерах. Мы хотим проверить, можно ли использовать, например canvas, вводим в поисковой строке, и сайт отображает нам информацию о том в каких браузерах и на каком этапе находится сейчас поддержка канваса. В правом верхнем углу вы видите общее описание того, насколько элемент сейчас поддерживается в общем браузерами. Так же вы можете увидеть список всех браузеров которые поддерживают или не поддерживают canvas. Здесь есть дополнительные ресурсы, на которых вы можете почитать подробнее о канвасе. Вы можете здесь встретить статьи или ссылки на документацию, поэтому обращайтесь к этому сайту, когда вы сталкиваетесь с проблемами использования какой то функции HTML5. Второй сайт, который будет полезный, это html5test.com. Заходя на этот сайт с помощью браузера, вы увидите то, как браузер поддерживает HTML5 спецификацию. Те цифры, которые выводятся на главной странице, это очки которые набрал браузер в соответствии с поддержкой функций HTML5. Откроем эту вкладку, например в хроме, и видим что хроме намного лучше поддерживает HTML5 спецификацию. У хрома очкой 463, у фаерфокса 410. Так же на этом сайте что является полезным, вы видите что поддерживается, а что не поддерживается. Вот допустим фаерфокс поддерживает элемент видео, поддерживает некоторые кодеки, mpeg4 они не поддерживает. Другие кодеки он поддерживает. Вы можете просмотреть информацию о том, что поддерживается, что не поддерживается в конкретных браузерах и так же вы можете перейти по документации, посмотреть описание по каждому пункту. Большинство здесь элементов ссылаются на w3c консорциум, либо на другие ресурсы. Вы можете детально узнать о том, как использовать ту или иную функцию HTML5. Эти 2 сайта нужны для того, чтобы проверить насколько та функция, которую вы используете поддерживается на данный момент, можно ли ее добавить на сайт или лучше найти какой нибудь другой вариант. Если открыть следующую вкладку, html5rock.com. Этот сайт содержит в себе много полезных статей, Если вы откроете главную странице сайта, вы увидите, что все статьи разбиты на блоки. То что относиться к использованию web storage, написанию оффлайн приложений, использования семантическою разметки новых элементов. Заходите на этот сайт, посмотрите этот сайт. Просмотрите какие здесь есть статьи, я думаю что много с этого сайта вам будет интересно и будет полезным. И последний ресурс, рускоязычный, это htmlbook.ru, он тоже может вам пригодится при изучении HTML5. На этом сайте есть отдельно глава, с переведенной книгой к HTML5, рекомендую книгу эту читать по мере прослушивания курса. Она достаточно на простом языке написана, вы можете заходить на этот сайт и смотреть статьи, которые безплатны. И так же можете проверять поддержку тех или иных элементов в браузере и смотреть документацию или краткое описание того, для чего нужен тот или иной элемент. Вот допустим элемент, который мы вначале урока смотрели, abbr. Мы вводим его в поиске и переходим на страницу, на которой идет описание этого элемента. Где он поддерживается, в каких браузерах и в какой спецификации он появился. Слева отображается перечень атрибутов, которые вы можете использовать вместе с этим элементом. Идет краткое описание, пример кода и комментарии пользователей, обсуждающих то, как этот элемент правильно использовать на своем сайте. Вот такие ресурсы, которые, я думаю вам пригодятся по мере разработке, по мере изучения HTML5.

И теперь у нас остается рассмотреть вторую часть первого урока. Вторая часть посвящена семантической разметке HTML5. Перед тем, как мы перейдем к примерам самого кода, давайте рассмотрим презентацию, и перейдем к 7-му слайду, где у нас перечислены новые семантические элементы, которые появились в HTML5, для определения структуры документа. Видите какие у нас есть элементы. Если обратить внимание на первые элементы, я думаю многие и вас при создании сайта, создавали шапку сайта в виде div, этому диву давали id и присваивали класс. Почему появились такие названия элементов, потому что поисковые системы анализируя разметку большинства сайтов, определили что названия для элементов сайта, обычно задаются вот такими тегами. Для того, чтобы разметка имела какую то смысловую нагрузку, в HTML5 внесли несколько дополнительных элементов, которые образом не влияют на отображения страницы, зато они добавляют смысловую нагрузку для самой страницы. У каждого элемента есть особый смысл, который скорее всего будет важен поисковику. Разработчику, пользователю абсолютно все равно, как у вас будет сделана шапка или как у вас будет сделана навигация. Вы навигацию можете сделать обычным div и положить в блок с навигацией кучу ссылок, а можете сделать навигацию с помощью элемента nav. Если поисковик начнет анализировать разметку вашей страницы, он поймет что на странице есть блок с навигацией, будет какое то другое значение придавать блоку разметки. Будет понимать где находятся ссылки, ведущие на разные страницы текущего сайта. Вот мы сейчас с вами разберем семантическую разметку, разберем как сайт выглядит на HTML5 и HTML4, проведем сравнительный анализ. Открываем visual studio, что бы нам удобнее было сравнивать 2 сайта, я сейчас закрою все вкладки кроме странички index.html и открою index index_html4.html. Чтобы было больше пространства, я сворачиваю solution explorer. Смотрите какая есть возможность в visual studio. Если я захвачу вкладку и потяну ее за пределы панельки со вкладками, то вкладка оторвется, если наведу ее на вот этот аддон, то я смогу вкладку захватить и разместить его в 2 панельки. Теперь мы можем просматривать в левой части, то как выглядит HTML5 страница, в правой части, то как выглядит HTML4 страница. Для начала давайте запустим пример, что бы мы имели представление, как выглядит документ. Видите, шапка сайта. У нас есть на странице несколько статей. Первая статья – заголовок, контент статьи. Вторая статья и ее контент, футер сайта. Здесь у нас идет навигация по сайту. Идет выноска, справа какой то блок с текстом. Сейчас мы сделаем сравнительный анализ, о том как эта страница сверстана в HTML5 и как она сверстана HTML4. Первая строчка в HTML5, видите какой мы указали доктайп и какой доктайп длинный в HTML4. Далее, как мы указывали кодировку, вот кодировка указана в HTML4 вот она указана в HTML5. В теле документа, на 10 строчке мы делаем шапку документа, если сравнить HTML4 документ мы задаем div class = header. Вы видите, что содержимое одинаковое, но если мы запустим сайт, то увидим что header у нас стилизован. Есть фон, цвет шрифта. Если посмотреть в solution explorer, у нас есть еще 2 css файла. Если вы создаете свой сайт и собираетесь использовать HTML5 верстку, то используйте соответствующую семантическую разметку, что бы четко определить для поисковика, с каких частей состоит сайт и какие элементы на вашем сайте присутствуют. И в завершении этого примера, рекомендую вам посетить сайт, который мы уже разбирали сегодня. Зайти на htmlbook.ru. Если вы перейдете на пункт сайта посвященный HTML5, то вы увидите что в статьях есть статьи посвященные верстке. Здесь последовательно определено, как вы должны последовательно, используя новые элементы и разметку, как вы должны правильно эту разметку при создании сайта. Вы видите пошаговое руководство, как создается сайт в HTML5. Рекомендую статью посмотреть, почитать для того что бы увидеть все тонкости того, как создается HTML5 страница. В xps файлах к текущему уроку вы найдете материалы и домашнее задание, которое обязательно постарайтесь выполнить. На этом мы заканчиваем введение в HTML5, спасибо за внимание. До новых встреч.