HTML5. Основы


Содержание материала:

Простой документ HTML5

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

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

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

Наконец, весь документ (за исключением строки doctype) можно облачить в традиционный элемент , как показано в следующем листинге:

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

Использование элементов , и является просто вопросом стиля. Страница без этих элементов будет работать отличнейшим образом даже на старых браузерах, которые и слыхом не слыхивали ни о каком HTML5. Фактически, браузер автоматически предполагает наличие этих элементов. Поэтому, если посмотреть на модель DOM (набор программных объектов, представляющих страницу) страницы с помощью сценария JavaScript, она будет содержать объекты для элементов , и , даже если разработчик и не использовал их.

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

Описание типа документа HTML5

В первой строке каждого HTML5-документа всегда дается описание типа документа. Это описание ясно указывает, что далее следует HTML5-содержимое, и выглядит следующим образом:

Первое, что бросается в глаза в описании типа документа HTML5 — это его поразительная простота. Сравните его, например, с неуклюжим описанием типа документа, который требуется использовать веб-разработчикам при работе со строгим XHTML 1.0:

Даже профессиональные веб-разработчики были вынуждены вставлять описание типа документа XHTML методом копирования и вставки из другого документа. А описание типа документа HTML5 короткое, четкое и легко вводится вручную.

Описание типа документа HTML5 также примечательно тем, что оно не содержит номера официальной версии HTML (5 для HTML5). В нем просто указывается, что страница является HTML-страницей. Это соответствует новой концепции HTML5 как живого языка. Добавленные в HTML новые возможности автоматически доступны для размещения на странице, не требуя для этого изменений в описании типа документа.

Все это порождает непростой вопрос: если HTML5 — живой язык, то зачем тогда для страницы вообще нужно описание типа документа?

Ответ на этот вопрос таков: описание типа документа продолжает использоваться по историческим причинам. При обработке страницы с отсутствующим описанием типа документа большинство браузеров (включая Internet Explorer и Firefox) переходят в режим совместимости (quirks mode). В этом режиме они пытаются отобразить страницу с учетом ошибок в правилах, которые использовались в более ранних версиях. Проблема с этим состоит в том, что режим совместимости одного браузера может отличаться от режима совместимости другого браузера, вследствие чего страницы, разработанные для одного браузера, на другом браузере будут, скорее всего, отображаться с ошибками, такими как неправильный размер шрифта, нарушенная структура оформления и т.п.

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

Кодировка символов

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

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

HTML5 делает эту задачу легкой. Для этого нужно лишь вставить элемент в самом начале блока (или, если элемент не используется, сразу же после кода описания типа документа):

Инструменты для веб-разработки, такие как Dreamweaver или Expression Web, вставляют этот элемент автоматически при создании страницы. Эти инструменты также обеспечивают сохранение файлов в кодировке UTF. Но при создании веб-страницы с помощью обычного текстового редактора, чтобы обеспечить сохранение файлов в правильной кодировке, может потребоваться выполнить дополнительные шаги.

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

Чтобы указать язык для какого-либо содержимого, используется атрибут lang в любом элементе разметки с заданием кода требуемого языка. Код для русского языка — ru, а для английского — en. Коды для других языков можно узнать на странице people.w3.org/rishida/utils/subtags.

Вставить в веб-страницу информацию о языке легче всего через элемент :

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

Добавление таблицы стилей

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

Этот способ похож на указание таблиц стилей в традиционных HTML-документах, но немного проще. Так как существует единственный язык каскадных таблиц стилей — CSS, то в добавлении атрибута type=»text/css», который требовался ранее, больше нет надобности.

Добавление JavaScript-кода

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

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

Атрибут language=»JavaScript» не является обязательным, т. к. если не указан какой-либо другой язык сценариев (а поскольку JavaScript — единственный широко-поддерживаемый язык сценариев для HTML, то вероятность такого развития ничтожно мала), браузеры автоматически предполагают, что используется JavaScript. Но даже ссылаясь на внешний файл с кодом JavaScript, все равно нужно помнить о закрывающем теге . Если упустить этот тег по недосмотру или при попытке укоротить код, используя синтаксис пустых элементов, то страница не будет работать должным образом.

Если вы уделяете много времени тестированию своих страниц с JavaScript в Internet Explorer, может быть полезным добавление метки MOTW (Mark of the Web — метка особенности сети) в блок сразу же после строки кодировки. Делается это таким образом:

Эта строка кода указывает Internet Explorer обрабатывать страницу таким образом, как будто бы она была загружена с удаленного веб-сайта. В противном случае IE переключается в особый режим блокировки, выводит предупреждение безопасности в строке сообщений и отказывается исполнять любой код JavaScript до тех пор, пока вы не нажмете кнопку «Разрешить заблокированное содержимое».

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

Что нового в HTML5?

Прежде всего в HTML5 изменилась запись декларации типа документа DOCTYPE. Она упростилась и имеет следующую форму:

Также упростилась запись декларации кодировки символов, используемой в документе:

Пример документа HTML5:

Кодировка символов в HTML5 по умолчанию UTF-8.

Новые элементы HTML5

В HTML5 были добавлены некоторые новые элементы, среди которых можно отметить следующие наиболее интересные элементы:

Новые API-интерфейсы HTML5

В HTML5 появились новые API-интерфейсы (API – application programming interface — интерфейс прикладного программирования) :

  • HTML Geolocation — Интерфейс определения географического положения
  • HTML Drag and Drop — Интерфейс перетаскивания элементов
  • HTML Local Storage — Интерфейс локального хранилища
  • HTML Application Cache — Интерфейс кэша приложения
  • HTML Web Workers — Интерфейс разделения процессов по потокам
  • HTML SSE — Интерфейс передачи событий в реальном времени

Примечание: HTML Local storage (Интерфейс локального хранилища) это мощная замена кукисов.

Удаленные в HTML5 элементы

Следующие элементы HTML4 были удалены в HTML5:

Как писать на HTML5 и какие у него возможности

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

Что такое HTML

HTML (HyperText Markup Language) — язык разметки гипертекста. Это формат документов, который изначально содержал:

  1. Сам текст.
  2. Теги (элементы) для разметки этого текста.

Словарь HTML состоит из множества тегов. Все они записаны в стандарт, который поддерживает международная организация World Wide Web Consortium (Консорциум W3C). Последняя рекомендация W3C для языка HTML имеет номер версии 5.2. В документе перечислены все элементы, которые можно использовать в коде веб-страницы. Это большой словарь, к которому придётся часто обращаться.

Конечно, современные браузеры отлично покажут документ независимо от того, в каком стиле оформлен код HTML, но вам будет стыдно перед коллегами, которые заглянут в исходники. Курс «Frontend-разработчик» поможет не только освоить HTML, но и в разы обойти программистов-самоучек. А сейчас обратимся к самым азам.

Пишет про разработку в Skillbox. Работал главным редактором сайта «Хабрахабр», ведет корпоративные блоги.

Набор технологий HTML5

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

Термином HTML5 обозначаются свыше десяти отдельных стандартов. А некоторые из технологий HTML5 до сих пор не утверждены окончательно. Их поддерживают не все браузеры (или каждый браузер по-разному).

Когда мы говорим об интерактивных сайтах и AJAX, то почти всегда речь идёт о технологиях HTML5.

В HTML5 есть программные интерфейсы (API) для передачи видео и звука, для чатов, в том числе видеочатов через браузер, и многих других интересных интерактивных штук. На HTML5 даже создают браузерные игры. И всем известный YouTube сейчас работает через HTML5, хотя раньше обязательно требовал Flash.

Отличия HTML5 от предыдущих версий

Формально перейти с обычного HTML (HTML4) на HTML5 очень просто: достаточно написать в начале кода веб-страницы тег для указания типа документа.

Всё, теперь у нас документ по стандарту HTML5.

В HTML4 было много разных типов, а в HTML5 остался только один . Весь код, который написан на «обычном» HTML (HTML4), будет работать и в HTML5.

Однако здесь добавлено много новых технологий:

  1. Мультимедиа-контент: HTML5 audio и v >Улучшенные формы (API валидации, несколько новых атрибутов, новые значения для атрибута type тега и новый элемент ).
  2. Новые семантические элементы ( , , , , , ,

и ).

  • MathML для математических формул.

  • Веб-сокеты: постоянное соединение между страницей и сервером и обмен данными через него. Страница интерактивно обновляется без перезагрузки.
  • WebRTC: возможность общения в реальном времени. Легко подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешних приложений.
  • Server-sent-события: сервер отправляет события клиенту, а не по классической парадигме, где сервер может передавать данные только в ответ на запрос клиента.
  • Офлайн-работа: кеш приложения, офлайн- и онлайн-события.
  • Хранилище и использование файлов: веб-приложения хранят структурированные данные на стороне клиента, а HTML5 File API работает с файлами.
  • Camera API: позволяет взаимодействовать с камерой устройства.
  • WebGL и SVG: трёхмерная графика ( ) и основанный на XML формат векторных изображений.
  • …и другое.
  • Как редактировать HTML?

    Разметка HTML5 создаётся с помощью тех же приложений, что и разметка обычного HTML, начиная с «Блокнота» в Windows и заканчивая современными средствами разработки со встроенными шаблонами для быстрого создания документов HTML5 — например, Notepad++, Sublime Text.

    Справочные ресурсы по HTML

    Как научиться писать на HTML

    Одной зубрёжкой тегов не обойтись. Изучайте основные элементы и экспериментируйте. Поставьте сами конкретную задачу (например, сделать сайт-визитку) или возьмите платное задание как фрилансер и пробуйте его реализовать.

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

    Копипаст чужой работы — нормальное явление в программировании, здесь это называется Open Source, очень модное и продвинутое течение.

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

    Чтобы создавать интерактивные сайты с более сложной функциональностью, с современным и красивым дизайном, нужно дополнительно изучить CSS, JavaScript, веб-дизайн и некоторые другие предметы. Тут требуется более фундаментальная подготовка.

    Погрузившись в обучение, вы научитесь создавать свои собственные
    веб-проекты и сможете претендовать на позицию junior-разработчика.

    HTML5 — Основы

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

    Структура HTML-документа

    Изучение структуры HTML-документа начнём с того, что вспомним устройство HTML-элемента. Любой HTML-элемент в документе состоит из открывающего тега ( ), закрывающего тега ( ) и контента, расположенного между этими тегами. Среди HTML-элементов есть исключения, т.е. имеются элементы, которые состоят только из одного открывающего тега, но эти элементы не определяют структуру HTML-документа и рассматриваться в этой статье не будут.

    Контент, находящийся между открывающим и закрывающим тегом некоторого элемента (1), кроме текста может также содержать другой HTML-элемент (2) или другие HTML-элементы (3). В этом случае этот элемент (2) или эти элементы (3) будут вложены в элемент(1). Т.е. между ними образуется связь родитель (1)-ребёнок (2) или родитель (1)-дети (3).

    В свою очередь элемент (2) или каждый из HTML-элементов (3) могут в качестве контента тоже содержать HTML-элементы и т.д.

    Таким образом получается древовидная (иерархическая) конструкция, структура которой определяется в зависимости от того в каком элементе находится тот или иной элемент.

    Иерархические отношения между HTML-элементами

    Родитель (parent). Каждый HTML-элемент имеет родителя. Для некоторого HTML-элемента родительским является тот элемент, в который он вложен.

    Ребёнок (child). В каждый HTML-элемент (1) может быть вложен другой HTML-элемент (2) или несколько HTML-элементов (3). Каждый из этих элементов (2, 3) являются для элемента (1) ребёнком.

    Предок (ancestor). HTML-элемент (1) считается предком некоторого другого HTML-элемента (2), если он является родителем его родителя или имеет ещё более дальнюю родительскую связь.

    Потомок (descendant). HTML-элемент (1) считается потомком некоторого другого HTML-элемента (2), если он (1) является ребёнком его ребёнка (2) или ребёнком ещё более дальнего прародителя.

    Сиблинг (брат, сестра, сосед, sibling). HTML-элемент (1) считается сиблингом по отношению к другому HTML-элементу (2), если оба элемента имеют одного и того же родителя.

    Как правильно писать HTML-код

    Создавать HTML-код, чтобы потом в него было просто вносить изменения, необходимо с учётом вложенности одних элементов в другие. Чтобы это выполнить необходимо HTML-код (1), который вложен в некоторый HTML-элемент (2), сдвигать относительно него (2) на 2 пробела.

    Что такое веб-браузер (web-browsers)?

    Веб-браузер — это программное обеспечение для просмотра веб-страниц. Основные виды браузеров: Internet Explorer (Microsoft), Firefox (Mozilla), Chrome (Google), Safari (Apple), Opera (Opera).

    Что такое user agent?

    User agent — это любое программное обеспечение, которое используется для доступа к веб-страницам от имени пользователей.

    User agent-ами являются не только браузеры, но и программы-роботы поисковых систем Яндекс и Google.

    Инструменты для создания HTML

    Для создания HTML-документов использовать какие-то специализированные инструменты необязательно. Писать код HTML можно используя простые текстовые редакторы, такие как Notepad в Windows, TextEdit в MacOS, gedit в Ubuntu Linux и т.д.

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

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

    Создание HTML-документа

    Создание HTML-документа начинается с указания типа документа. Т.е. первое что необходимо указать при создании документа — это то, что документ является HTML 5.

    После этого пишется элемент html . Данный элемент состоит из открывающего тега ( ), контента и закрывающего тега ( ).

    Контент данного элемента — это содержимое HTML-документа (веб-страницы).

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

    Например, lang=»en» — означает, что текстовое содержимое элемента html будет соответствовать английскому языку. А например, указание атрибуту lang значения «ru» означает, что текст контента элемента html будет на русском языке.

    Если рассматривать HTML-документ как древовидную структуру, то в ней, элемент html является корнем.

    Элемент html содержит в качестве контента всегда два элемента. Первый элемент — это head , а второй элемент — это body . Элемент body всегда располагается после элемента head .

    Элемент head также как и элемент html состоит из открывающего тега ( ), контента и закрывающего тега ( ). Он используется как контейнер для того чтобы содержать другие элементы, которые предназначены для того чтобы предоставить данные о странице (коллекцию метаданных HTML-документа). Т.е. он содержит HTML-элементы, которые предоставляют user agent информацию о заголовке страницы ( title ), кодировке символов, подключенных стилях CSS и многое другое.

    Содержимое элемента head не отображается в окне или вкладки веб-браузера.

    Элемент head при открытии некоторой веб-страницы в браузере всегда загружается первым, т.е. до загрузки контента body (видимой части HTML-документа). Т.е. он (элемент head и его контент) в основном предназначен для сообщения браузеру (user agent) всей дополнительной (служебной) информации, которая необходима для правильного отображения содержимого элемента body .

    Элемент body состоит из открывающего тега ( ), контента и закрывающего тега (

    ВИДЕОУРОК №2. Введение в HTML5

    Доступ к полному курсу с учебными материалами и тестированием на 30 дней за 9.99 USD

    История развития HTML

    Возможности HTML5

    Примеры новой структуры HTML-документа

    Примеры элементов mark и abbr

    Использование ссылок в HTML5

    Пример элемента details

    Списочные элементы в HTML5

    Пример атрибута contenteditable

    Устаревшие элементы и атрибуты

    Библиотека Modernizer

    HTML валидаторы

    Элемент time и атрибут hidden

    Пример создания контекстного меню


    Полезные ресурсы при разработке HTML5 сайтов

    Новые семантические элементы HTML5

    Сравнение HTML4 и HTML5 страничек

    Пройдите тестирование по данному уроку. У вас есть три попытки на урок

    HTML5 и CSS3 Essential
    Введение в HTML5

    Количество вопросов: 5
    Время на тестирование: 5 минут

    Кандидат: <>
    Дата сдачи: <>
    Правильные ответы: <> из 5
    Время, потраченное на тест: <>

    Здравствуйте, Я рад приветствовать Вас на курсе, который посвящен разработке приложений на 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. Элементы которые мы не должны использовать это:

    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, этому диву давали >

    Введение в HTML

    Язык гипертекстовой разметки (англ. HyperText Markup Language) — является языком разметки документов во Всемирной паутине.

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

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

    Цель любого веб-браузера прочитать HTML документ и правильно его отобразить. Браузер не отображает HTML теги, но использует их, чтобы определить, как отображать конкретный документ.

    Теги бывают двух видов: парные и одиночные (пустые). У парных HTML-тегов первый тег в паре является начальным (открывающим) тегом, а второй тег является конечным (закрывающим) тегом. Основная функция начального тега заключается в том, чтобы сообщить браузеру где команда начинается, а конечным тегом определить где она заканчивается.

    Давайте рассмотрим чем отличаются парные теги от одиночных.

    Вид (синтаксис) парного тега:

    Обратите внимание, что все теги заключены в угловые скобки и > , а закрывающий тег всегда должен содержать прямой слеш перед названием тега — , этим мы сообщаем браузеру, что на этом месте наша «команда» закончена.

    Большинство ошибок в (создание структуры HTML кода) у Вас может возникать по той причине, что не указан закрывающий тег или он указан без прямого слеша / . Если не указать прямой слеш, то браузер воспринимает тег как открывающий, а не закрывающий. В том случае если вы вообще не указали закрывающий тег, то браузер не узнает где Ваша команда заканчивается, чтобы её остановить, что может привести к серьезным ошибкам, будьте внимательны. К счастью, современные редакторы HTML кода позволяют быстрее отслеживать ошибки такого рода.

    Вид (синтаксис) одиночного тега:

    В современном стандарте HTML 5 одиночные теги записываются как и начальные теги у парных тегов (наименование тега помещено в угловые скобки и > ).

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

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

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

    Пример простого HTML документа:

    И так, мы с Вами поняли, что HTML — это краеугольный камень, благодаря которому любой браузер пользователя отобразит страницу. Но как выглядит HTML? Давайте рассмотрим простой код, из которого состоит практически любая информационная страница:

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


    А теперь детально разберем из чего состоит любая HTML страница:

    DOCTYPE это декларация, которая определяет тип документа. Декларация не является тегом HTML это только инструкция для веб-браузера о том, какая версия HTML используется в документе. Декларация !DOCTYPE помогает браузеру отобразить веб-страницу правильно, для этого браузер должен знать, как тип, так и версию документа.

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

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

    Хронология версий HTML:

    Версия HTML HTML 2.0 HTML 3.2 HTML 4.01 XHTML HTML 5
    Год 1991 1995 1997 1999 2000 2014

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

    Текст между и содержит информацию о документе (сведения о документе, которые не отображаются пользователю). Внутри этого элемента обязательно должен быть вложен HTML тег .

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

    Семантическая верстка сайта: HTML5

    Привет, уважаемые читатели блога.

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

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

    Семантика в языкознании означает смысл, значение слова или речевого оборота. Мы уже встречали данный термин, когда рассматривали сбор семантического ядра для сайта. И в том контексте, и в сегодняшней статье определение «семантический» указывает на то, что в основе лежит смысл. А стало быть, семантическая верстка – это верстка, построенная на смысловой структуре. В отличие от так называемой верстки на дивах (div – html-тег), все элементы семантической верстки подчинены смысловой иерархии. И самый наглядный пример для объяснения – это использование тегов заголовков и подзаголовков h1, h2, h3 и т.д.

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

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

    Когда каждому структурному элементу сайта соответствует определенный тег, код становится упорядоченным и понятным. При этом описание стилей элементов выводятся в отдельный css-файл. Для того, чтобы увидеть насколько страницы вашего сайта структурированы можно проделать простой эксперимент. Отключите на время в браузере поддержку CSS и JavaScript и посмотрите, где на вашем ресурсе названия статей, содержание, подзаголовки и т.д. Можете ли вы разобраться в структуре вашего сайта, используя только html-разметку?

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

    Еще один наглядный пример, где ясно видно отличие семантической верстки от прошлых стандартов html, — использование тега (от английского emphasis – акцент). Тег заменил тег (выделение курсивом). Для тега в файле стилей может задаваться отображение курсивом, подчеркиванием, полужирным. Но значение данного тега – именно акцентирование текста, к примеру, для выделения нового термина. Однако, в случае, когда нужно употребить цитату, в семантической верстке будет уже использоваться тег , хотя ранее оба эти элемента (и новый термин, и цитата) были бы заключены в тег (выделены курсивом).

    А теперь приведем пример, как верстка дивами заменяется семантической.

    Основы HTML

    Стажировка HTML5

    Света Шарипова

    Структура HTML документа. Head.

    Рассмотрим структуру верхних уровней:

    сообщает браузеру, что это HTML5 документ.

    Структура HTML документа. Head.

    line 2 – основной язык страницы — английский

    line 4 – кодировка

    line 5 – Мета тег для улучшенной отрисовки в старых IE. IE=edge означает, что IE должен использовать последнюю версию движка для отрисовки, а chrome=1 означает, что IE должен использовать Google Chrome Frame, если он установлен. Google Chrome Frame — это плагин для IE на основе Chromium, работает в IE 6 — 9. Позволяет отображать страницы, используя WebKit layout engine и V8 JavaScript engine.

    Структура HTML документа. Head.

    line 6 – Мета тег viewport сообщает мобильному браузеру, как должна выглядеть страница. 1
    w > *-scale — правила масштабирования. initial-scale — дефолтные пропорции, minimum-scale — минимальный зум, maximum-scale — максимальный. Т.е. по умолчанию страница отобразится 1 к 1, но пользователь сможет уменьшить масштаб до масштаба 0.5 к 1 и увеличить до размеров, больше стандартных в 2 раза.

    line 8 – Если значение = yes, то веб-приложение отображается в полноэкранном режиме на мобильных устройствах Apple. 3 4

    Структура HTML документа. Head.

    line 10 – Заголовок страницы на мобильном iOS. Если мета тег apple-mobile-web-app-title не указан, то по умолчанию используется заголовок из тега .

    line 11 – Заголовок страницы. Отображается на вкладке.

    Структура HTML документа. Head.

    line 13 – Подключение скрипта

    line 14 – Подключение стилей

    DOM (Document Object Model) — это то, во что браузер преобразует полученный HTML-код.
    DOM имеет древовидную структуру.
    В DeveloperTools можно посмотреть визуальную интерпретацию DOM (правда, с небольшими отличиями).

    CSSOM (CSS Object Model) — это то, во что браузер преобразует полученныe стили.
    CSSOM тоже имеет древовидную структуру.

    Render tree — это комбинация DOM и CSSOM. Чтобы получить Render tree, всем видимым элементам DOM присваиваются наборы стилей из модели CSSOM.

    Layout — это этап отрисовки, на котором рассчитываются размеры и взаимное расположение элементов на странице. На этом этапе роль играют такие свойства, как: width , height , margin и т.п. 7

    Paint — это этап отрисовки, на котором применяются остальные свойства, например, цвет, фон и т.п. 7

    Body. Семантика верхнего уровня. Блочные теги.

    может быть использован только 1 раз на странице. Означает основной контент.

    Что нового в HTML5?

    Прежде всего в HTML5 изменилась запись декларации типа документа DOCTYPE. Она упростилась и имеет следующую форму:

    Также упростилась запись декларации кодировки символов, используемой в документе:

    Пример документа HTML5:

    Кодировка символов в HTML5 по умолчанию UTF-8.

    Новые элементы HTML5

    В HTML5 были добавлены некоторые новые элементы, среди которых можно отметить следующие наиболее интересные элементы:

    Новые API-интерфейсы HTML5

    В HTML5 появились новые API-интерфейсы (API – application programming interface — интерфейс прикладного программирования) :

    • HTML Geolocation — Интерфейс определения географического положения
    • HTML Drag and Drop — Интерфейс перетаскивания элементов
    • HTML Local Storage — Интерфейс локального хранилища
    • HTML Application Cache — Интерфейс кэша приложения
    • HTML Web Workers — Интерфейс разделения процессов по потокам
    • HTML SSE — Интерфейс передачи событий в реальном времени

    Примечание: HTML Local storage (Интерфейс локального хранилища) это мощная замена кукисов.

    Удаленные в HTML5 элементы

    Следующие элементы HTML4 были удалены в HTML5:

    HTML начало

    Как следует из предыдущей главы, HTML является языком разметки задача которого — просто «размечать» текстовый документ используя теги, которые, в свою очередь, говорят веб — браузеру, как именно нужно отобразить данный документ.

    Создание HTML документов

    Для того, чтобы создать HTML документ необходимо:

    1. Открыть любой текстовый редактор (например блокнот, Notepad++ и т.д.);
    2. Набрать произвольный текст и разметить его HTML тегами;
    3. Cохранить файл с расширением .htm или .html.

    Базовый документ HTML

    Ниже приведен в своей простейшей форме пример HTML-документа:

    Теперь вы можете воспользоваться кнопкой Попробуй сам, которая расположена в правом верхнем углу окна кода, для того, чтобы проверить результат этого HTML — кода, или сохраните код в HTML — файл test.html с помощью любого текстового редактора. И, наконец, откройте его с помощью веб — браузера, например Internet Explorer, Google Chrome или Firefox и т.д. Браузер должен показать следующий результат:

    HTML теги

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

    Топ-пост этого месяца:  Как определить, что это последняя страница пагинации
    Добавить комментарий