Основы HTML5


Содержание

Основы 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 раз на странице. Означает основной контент.

Введение в 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 – акцент). Тег заменил тег (выделение курсивом). Для тега в файле стилей может задаваться отображение курсивом, подчеркиванием, полужирным. Но значение данного тега – именно акцентирование текста, к примеру, для выделения нового термина. Однако, в случае, когда нужно употребить цитату, в семантической верстке будет уже использоваться тег , хотя ранее оба эти элемента (и новый термин, и цитата) были бы заключены в тег (выделены курсивом).

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

HTML5 и CSS3 — начнём верстать. Часть 1

Из серии статей «HTML5 и CSS3 – наступает время пользоваться»

Продолжение статьи Чем нас радует CSS3

Теперь мы готовы к тому, чтобы запачкать наши руки в типографской краске. Почувствуйте себя верстальщиком в типографии середины 20-го века. Ритмичный шум печатных станков, запах свежей печати, щелчки задвигаемых на своё место латунных буковок. Большие рулоны девственно чистой газетной бумаги, ожидающие получить на себя порцию тиражной информации. И вы, сидящий за наборным станком, укладываете в нужное место информационный блок …

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

Для выполнения заданий вам потребуются (будет повод обновиться):

Программное обеспечение или ресурс Требуемая версия
Notepad++, или любой текстовый редактор,
который не добавляет лишнего
в начало файла с кодировкой utf-8
Mozilla Firefox
Opera
Chrome
4+
11.10+
11+

Если интересно, вы можете проверить на сколько ваш веб-браузер поддерживает стандарт HTML5. Пройдите по ссылке http://html5test.com, там вы увидите баллы, сумма которых формируется по количеству поддерживаемых пунктов из стандарта. На момент написания статьи, на моей машине (Ubuntu10.10), Opera11.10 набирала 258 баллов, а FireFox4 всего лишь 240. Интересно, что у вас?

В этом тьюториале, мы:

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

Для работы нам будет достаточно создать один HTML-файл index.html и один CSS-файл styles.css. В странице по ходу выполнения заданий появятся скрипты, так что будьте готовы, к тому что ваш браузер предупредит вас об этом. Нужно будет разрешить выполнение скриптов на странице.

Готовим каркас страницы

Браузер должен знать страницу в лицо! Если вы не расскажите ему кто она такая и откуда, то он включит режим совместимости и вам придётся гадать — “как слово ваше отзовётся” в браузере клиента. Чтобы до такого не дошло, вам необходимо записывать в самом начале страницы правильный тип документа, соответствующий коду страницы.

Видимо, услышав мольбы верстальщиков, парни из W3C сжалились, и для стандарта HTML5 сделали коротенький тег . Любая веб-страница, поддерживающая последний стандарт, должна начинаться с него. А помните как было раньше … publictransitional или strict … ещё и адрес файла описания типа документа, ну ооочень длинно.

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

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

Всё что мы здесь описали есть в листинге №1:

Листинг 1. Базовая структура документа HTML5

Обращаем ваше внимание на то, что большинство тегов теперь стали не такими длинными как ранее. Тегу больше ничего не нужно кроме lang. Для метатега достаточно написать charset. Кроме того, для тега link не нужно указывать type.

Каркас готов, но страницу в браузер нам пока рано выставлять. Идём далее — семантические элементы страницы.

Делаем разметку контента


Разместим на каркасе семантические блоки

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

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

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 состоит из открывающего тега ( ), контента и закрывающего тега (

Верстаем сайт на HTML5 и CSS3. Часть 1

Дата публикации: 2011-03-29

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

Вот изображение сайта, который мы будем верстать на HTML5 и CSS3:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

Также скачайте исходники себе на компьютер!

Выше на изображении вы видите контент папки, содержащей финальную демоверсию страницы – как и обещано, ни одного изображения. У нас имеется страница HTML с «продвинутой» разметкой, файл CSS, содержащий стили, управляемые CSS3 и папка, содержащая несколько шрифтов, которые мы собираемся вставить, применив правило @font-face.

Как обычно, я советую расположить все содержимое сайта в файле index.html еще до того, как вам в голову придет перейти к CSS, так что давайте прямиком к этому и приступим.

Верстка на HTML5 — разработка быстрее, а код гибче

Вдобавок к размещению новых семантических элементов HTML5 еще и сильно укорачивает код.

Заметно, что они вышли гораздо аккуратнее, чем то, что у вас получилось бы, если писать HTML4 или XHTML. Объявление doctype занимает всего четыре буквы.

А вот как это было раньше:

Способ HTML5 гораздо лучше, правда? Далее мы открываем тэг html и устанавливаем язык документа. (Подтэг своего языка можно найти в IANA Language Subtag Registry). Еще одно заметное тут изменение – отсутствие кавычек, окружающих значение en. Вам приходилось для подтверждения правильности включать кавычки в XHTML, но исходя из того, что это HTML5, они больше не необходимы.

Может, это покажется совсем небольшим выигрышем: сколько (кило)байт вы сэкономите на нескольких кавычках? Но ведь страница грузится не единожды; со временем она вам за все отплатит. У вас в действительности может приключиться другая сложность — по привычке вы продолжите добавлять кавычки. Если в своем любимом текстовом редакторе вы пользуетесь великолепным плагином Zen Coding, то он добавляет кавычки автоматически. Единственное решение проблемы – найти и убрать их все после окончания работы над файлом.

В элементе head мы сначала определяем набор символов и добавляем заглавие. Весьма стандартно, без кавычек. Двигаясь дальше, вставляем условный комментарий, внутрь которого загружаем файл JavaScript, который поможет нам работать с Internet Explorer (IE) 8 и более ранними его версиями.

Условный комментарий – это вид HTML-комментария, который Microsoft использует в IE, по сути, для реализации отдельных (или всех) версий своего браузера.

Используемый нами здесь комментарий проверяет, является ли браузер, открывающий страницу, Internet Explorer’ом с номером версии менее 9. Другой комментарий, который мы бы использовали, это: ; он проверил бы, является ли открывающий страницу браузер IE версией ниже или равной 8. По существу, между этими двумя комментариями нет разницы; они оба направлены на один ряд версий IE, так что можете взять любой.

Причина включения скрипта HTML5Shiv Реми Шарпа (Remy Sharp) кроется в отсутствии у Internet Explorer’а поддержки элементов HTML5. Проблема IE в том, что он не применяет никаких стилей CSS к элементам, которые не распознает. Таким образом, чтобы заставить более старые версии IE правильно выполнять элементы HTML5, нам нужно при помощи JavaScript создать незнакомые элементы.

Продвигаясь к тэгу body, размечаем область заголовка своей страницы, где полно элементов HTML5:

Fictive Company Blog

a blog showcasing the übercoolness of HTML5 & CSS3

Элемент Header

Сразу же после открытия тэга body мы воспользуемся одним из новых элементов HTML5 – header. Вот какое определение дает элементу заголовка консорциум Word Wide Web (W3C):

Элемент заголовка (header) представляет вступительную группу или вспомогательные средства навигации.

Следуя их рекомендации, элемент header будет содержать наш логотип, подзаголовок и основную навигацию. При вводе элемента заголовка header у нас появляется деталь разметки, содержащая все те части страницы, которые мы интуитивно считаем заголовком. (Или все те детали страницы, которые будут вложены в элемент div с id заголовка.) На странице элемент header можно употребить не один раз, и мы снова будем пользоваться им внутри элементов article, в которых будут содержаться вступления к постам.

Элемент Hgroup

Первым внутри элемента заголовка идет другой новый тэг – hgroup. Мы воспользуемся им для показа соответственно логотипа нашего сайта и подзаголовка в тэгах h1 и h2.

Элемент hgroup используется для группирования набора элементов h1-h6, когда у заголовка имеются множественные уровни, такие как субименования, альтернативные названия или подзаголовки.

Элемент hgroup может смотреться излишним, пока вы не обернете, как обычно, заголовки в элемент div для того, чтобы у названия или субименования(й) был обычный фон или стиль. Однако в схеме документа hgroup играет важную роль. Алгоритм схемы проверяет вашу страницу и передает структуру заголовка. Проверить набросок своей работы с помощью инструмента Outliner. Когда алгоритм схемы столкнется с элементом hgroup, он проигнорирует все, кроме заголовка самого высшего уровня (обычно h1).

Теперь у нас возникла проблема: алгоритм схемы не безупречен и не завершен. Например, следующий элемент, который мы обсудим – это элемент nav, и разметка помечает его как «Untitled Section» (область без названия). К разработчикам разметки поступали просьбы об изменении алгоритма схемы для того, чтобы тот представлял элемент nav как «Navigation» (навигация). В любом случае, элемент hgroup обеспечивает вас способом группирования своих заголовков и, таким образом, организует их как структурно, так и семантически.

Элемент Nav

Мы переходим к следующему элементу HTML5 – nav. В nav мы включим основную навигацию сайта, обернутую в неупорядоченный список.

Элемент nav представляет сектор страницы, который ссылается на другие страницы или области внутри страницы: область со ссылками навигации.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

Таблица содержания (TOC) в длинном документе;

Нумерованные ссылки типа «предыдущий/следующий» и

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

Элемент Article

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

Sample Post 1

Curabitur ut congue hac, diam turpis[…]

Вот определение W3C для элемента article:

Элемент article представляет в документе модульную композицию […], таким образом, он предназначен стать автономно распределяемым или многократно используемым, например, при синдикации (одновременном опубликовании контента на нескольких веб-узлах).


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

Вы, несомненно, заметили, что внутри article мы разместили элементы заголовка и нижнего колонтитула. Как header, так и footer могут быть использованы более одного раза на отдельной HTML-странице. Так как header – это «вступительная группа или вспомогательный элемент навигации», то мы включили в него дату, название и количество комментариев. Далее, у нас имеется параграф с отрывком из поста, за которым следует footer (нижний колонтитул).

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

Элемент footer представляет нижний колонтитул той секции, к которой обращается. Обычно нижний колонтитул содержит информацию о своей секции, такую, как авторство, ссылки на связанные документы, дату копирайта и прочее.

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

Общий нижний колонтитул содержит три элемента секций и извещение об авторском праве. Оба варианта использования элемента footer правомерны и соответствуют рекомендации W3C.

Элемент Section

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

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

Элемент section довольно хитрый, потому что в определении по спецификации кажется очень похожим на элемент div. Я попался в эту ловушку, когда начал писать код для демо-страницы; я разместил внутри элемента section три элемента article. Вскоре я понял ошибочность своих методов. Единственный способ решить, употреблять ли section – это посмотреть, нужно ли той области, которую вы хотите обернуть элементом section, название (заголовок). Из определения видно, что у элемента section обычно есть заголовок.

Другой вопрос, который полезно задавать для установления обоснованности использования элемента section, это: добавляете ли вы его исключительно для стилей? Вы добавляете его просто потому, что нужно выделить эту секцию с помощью JavaScript, или потому что нужно применить к ней обычный стиль, и вы вместо того должны использовать элемент div.

Обертывание в тэг section трех элементов article нашей демо-страницы было бы оправдано, если бы section включал заголовок типа «Последние посты в блогах». Это имело бы смысл; иначе тэг, внутри которого расположены элементы article – это просто поддержка стилей – нечто, помогающее нам нацелиться на него при помощи JavaScript или CSS.

Элемент Aside

Последний используемый для демо-страницы элемент HTML5 – aside; мы использовали его как контейнер боковой колонки.

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

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

Мы разместили два section и один nav. Первый элемент section содержит ссылки на Twitter и RSS, а второй представляет последний твит (запись пользователя в Twitter’е). Второй элемент section, кроме того — один из редких случаев, когда у него отсутствует заголовок. У него могло бы быть название, что-нибудь типа: «Последний твит», но, я думаю, это необязательно, потому что читатели привыкли видеть блоки вроде этого, а метка Twitter’а под цитатой очень узнаваема. Элемент nav нашей боковой колонки используется для отражения списка блогов и, в отличие от основной навигации, у него есть заголовок.

Последнее слово

Итак, вот и подошла к завершению первая часть нашей статьи посвящённой верстке сайта на HTML5 и CSS3. Я старался сделать ее настолько короткой, насколько можно, и не тратить слишком много времени на неопределенности в спецификации HTML5, потому что она еще не закончена. Тем временем нам придется полагаться на сообщество и труд «лекарей» HTML5, что станут нашими проводниками по внедрению новых элементов в сайты.

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

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

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

ВИДЕОУРОК №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 5

В данной категории Вы сможете познакомиться с новым стандартом HTMLHTML 5, который не так давно появился в нашей жизни, и ещё очень многие про него ничего не знают, либо просто слышали. И данная категория позволит восполнить этот пробел в знаниях, ведь HTML 5 — это будущее Интернета, к которому надо быть готовым любому Web-мастеру.

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

Прочитав статьи по HTML 5, Вы узнаете:

1) Что нового появилось в HTML 5.

2) Какие элементы появились для создания структуры HTML-документа.

3) Какие появились новые блочные элементы в HTML 5.

4) Какие новые теги появились в HTML 5 для форматирования текста.

5) Какие элементы появились для работы с мультимедиа в HTML 5.

6) Какие HTML-теги появились для интерактивной работы с документом.

7) Почему не работает HTML5.

8) Об атрибуте download в HTML5.

9) Нужно ли сейчас использовать HTML5 и CSS3.

10) Новые атрибуты для полей форм, появившиеся в HTML5.

11) Какие новые значения атрибута type появились в HTML5.

12) Зачем нужен атрибут data-* в HTML5.

13) Что такое canvas в HTML5.

14) Как использовать HTML5 Notifications API.

15) Новые атрибуты HTML5: reversed, contenteditable, hidden.

16) Что такое локальное хранилище(localStorage).

17) Что такое viewport.

18) Зачем нужен атрибут read only в HTML5.

19) Что такое HTML5 WebSockets.

20) Как работать с HTML5 Video.

21) Как работать с HTML5 Audio.

22) Как проверить поддержку HTML5 и CSS3 с помощью сервиса Can I Use.

23) Как сделать видео в качестве фона сайта на HTML5. Часть 1.

24) Как сделать видео в качестве фона сайта на HTML5. Часть 2.

25) Популярность браузеров на 2014 год.

26) Что такое адаптивная верстка.

27) Что такое гибкая сетка в адаптивной верстке?

28) Как сделать изображения адаптивными?

29) Как использовать секционные элементы в HTML5.

30) Как правильно использовать теги div, section и article в HTML5.

31) Как сделать 404 страницу.

32) Как сделать верстку сайта с нуля. Меню навигации. Часть 1.

33) Как сделать верстку сайта с нуля. Верстка портфолио. Часть 2.

34) Как сделать верстку сайта с нуля. Верстка портфолио. Часть 3.

35) Как сделать верстку сайта с нуля. Трехколоночный макет. Часть 4.

36) Как сделать верстку формы обратной связи. Часть 5.

37) Как верстать прозрачную форму входа.

38) Как сделать выпадающий список в HTML.

39) Как вставить видео на HTML сайт.

40) Как сделать HTML шаблон для портфолио.

41) Верстка кнопок на сайте.

42) Верстка сайта по PSD макету (часть 1).

43) Верстка сайта по PSD макету (часть 2).

44) Верстка сайта по PSD макету (часть 3).

45) Верстка сайта по PSD макету (часть 4).

46) Красивое оформление статьи на HTML.

47) Кроссбраузерность сайта.

48) Верстка по БЭМ методологии.

49) Как верстать сайт без макета.

50) Как сделать текст в HTML (топ 10 запросов)

51) Как вставить SVG иконку на сайт.

52) Как верстать по БЭМ на flexbox.

53) Флекс контейнер и элементы флекса (верстальщику).

Основы html для начинающих на понятном языке

Основы html для начинающих, что сейчас должен знать каждый начинающий вебмастер или блогер. Если вы хотите научиться создавать элементарные сайты, понимать сам код, знать, что за чем стоит и должно идти, без знаний основ языка хтмл этого сделать просто невозможно. На своем блоге у меня будет целая цепочка статей, которые я посвящу этой теме от А до Я, опишу каждый тег, который присутствует в документе, что он обозначает и как его правильно использовать.

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

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

Навел только несколько примеров, на самом деле сейчас эти знания все чаще и чаще применяются в интернете. Я больше практик чем теоретик, поэтому в моих статьях в данной рубрике я буду показывать вам свои примеры, как и что я делал, step by step. Буду выкладывать как примеры страниц, так и целые сайты.

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

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

Основы для начинающих

Что такое html — если посмотреть, что пишет Википедия — (HyperText Markup Language) язык гипертекстовой разметки документов. Большинство страниц в интернете содержат разметку страницы на этом языке. Данный язык интерпретируется браузерами, полученный в результате форматированный текст отображается на вашем мониторе компьютера или мобильного устройства.

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

Из чего должна состоять структура документа, какие теги должны присутствовать. Давайте разберем все на одном маленьком примере. Я написал некоторый текст в MS Office и показал его вот на этом скриншоте.

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

Структура HTML-документа для создания сайта (шаблон)

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

Шаблон «скелета» HTML-страницы

Приведем исходный HTML-код с некоторыми дополнительными вставками для дальнейшей визуализации с помощью CSS и JS:

В полученном шаблоне наш «скелет», при условии что файл стилей (style.css) составлен верно, преобразуется в страницу такого типа:

Теги и атрибуты

Разберем основные теги и атрибуты, примененные в примере:

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL