HTML5

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

В этом вводном курсе мы познакомимся с новыми возможностями HTML5. Основной упор сделаем на новые теги, но коснёмся и других нововведений.

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

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

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

<!DOCTYPE html>

Что вы уже давным-давно делаете в наших курсах.

А теперь пара новых тегов:

<header> — хедер сайта или раздела;
<footer> — футер сайта или раздела.

Да-да, это те самые хедер и футер, которые обычно верстались дивами с классамиheaderилиfooter. Они были настолько распространены, что для них было решено создать собственные теги.

Основное содержание. Тег main[2/19]

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

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

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

А раз теги неуникальные, то и стилизовать их лучше с помощью классов, как мы и сделали.

Если вы не хотите использовать классы для шапки и подвала сайта, то можете использовать селекторыbody > headerиbody > footer. Эти селекторы не повлияют на хедеры и футеры, вложенные более глубоко.

Другое дело новый тег<main>, который обозначает основное содержание сайта и по спецификации может использоваться на странице только один раз. Для его стилизации никакие классы не нужны.

Кстати, загляните в CSS и посмотрите, как сделаны фоны для основных блоков. В хедере и футере мы использовали линейные градиенты, которые детально разберём в более позднем курсе. А фоновую картинку для основного содержания мы задали с помощью так называемогоdata:URI, закодировав изображение прямо в CSS-коде. Это одна из продвинутых техник оптимизации вёрстки.

Разделы страницы. Теги article и section[3/19]

С шапками, подвалами и основным содержанием разобрались. Теперь перейдём к остальным разделам сайта.

Раньше почти все разделы верстались на дивах. Но в HTML5 добавили сразу два новых тега для разметки разделов:

<section> — смысловой или логический раздел документа;
<article> — самостоятельный и независимый раздел документа.

Чтобы не было путаницы, разберём где и когда использовать разные контейнеры:

<div> — контейнер общего назначения, не обязательно смысловой. Дивы используются для разметки мелких блоков, создания сетки и декоративных эффектов.
<section> — более крупный логический контейнер, объединяющий содержание по смыслу. Например, блок «О компании», список товаров, раздел личной информации в профиле и так далее.
<article> — самостоятельный, цельный и независимый раздел документа. Этот раздел можно в неизменном виде использовать в различных местах, в том числе и на других сайтах. Примеры: статья, пост в блоге, сообщение на форуме и так далее.

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

Изображения в формате SVG[4/19]

Мы разметили базовые разделы нашей страницы. Теперь поработаем над каждым из них и начнём с шапки сайта.

Давайте добавим нашему сайту логотип. Для этого добавим в хедер<div>, а внутри него разместим привычное изображение. Используем картинку в векторном форматеSVG, который уже достаточно хорошо поддерживается браузерами. Векторные изображения можно уменьшать и увеличивать без потери качества, в этом вы убедитесь в задании.

Кстати, обратите внимание на полупрозрачный фон в блоке «Обо мне». Он сделан с помощью нового формата записи цветов в CSS —rgba.

Навигация. Тег nav[5/19]

Теперь давайте добавим в шапку главное меню.

В HTML5 добавили специальный элемент для навигационных блоков — тег<nav>. Так что теперь меню и блоки ссылок лучше оборачивать не в дивы, а в навы.

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

Использование нестандартных шрифтов[7/19]

Перед тем как продолжить работу над сайтом, давайте разберёмся со шрифтами.

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

Простейший способ использовать такой шрифт — найти его в специальном сервисе по названию, получить там код подключения шрифта, вставить этот код в свою вёрстку и использовать шрифт, как обычно, с помощью свойстваfont-family.

Подобных сервисов с бесплатными шрифтами достаточно много. Один из самых известных — этоGoogle Fonts. А вот похожий сервис:fontstorage.

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

font-family: "PT Sans", "Arial", sans-serif;

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

Подробнее о шрифтах. Правило @font-face[8/19]

Технически подключение веб-шрифтов производится с помощью CSS-правила@font-face. Читается как «эт-правило font-face». Вот пример:

@font-face {
    font-family: "Roboto";
    src:
        local("Roboto Regular"),
        url("/assets/course73/roboto.woff") format("woff");
}

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

Более подробно о технических тонкостях подключения шрифтов можно прочитать в серии статей на webfont.ru:первая частьивторая часть.

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

Берут файл шрифта (например,.ttf) и конвертируют в веб-формат в сервисе наподобиеFont Squirrel(для кириллических шрифтов надо указать дополнительные параметры конвертации).
Затем сконвертированные файлы шрифта размещают у себя на сервере.
И подключают шрифт с помощью @font-face .

Сейчас мы подключим шрифт, который расположен на сервереhtmlacademy. Мы уже сконвертировали шрифт в веб-формат.

Дополнительное содержание. Тег aside[9/19]

Теперь продолжим работу над страницей блога. Детальнее разметим раздел «Обо мне».

Этот раздел состоит из двух частей. В первой части будет содержаться основная информация, а во второй вспомогательная. Поэтому основную часть мы разметим с помощью уже знакомого<section>. А вторую часть разметим с помощью нового тега —<aside>.

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

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

Еще раз про article. Анонс поста[10/19]

Теперь добавим пост в блок с последними постами.

Так как пост — это цельный, законченный и самостоятельный фрагмент информации, то для его разметки идеально подойдёт тег<article>.

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

Это означает, что у нашего поста будет своя собственная структура (шапка, подвал, разделы) и иерархия заголовков, которая будет начинаться с заголовка первого уровня.

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

Давайте договоримся для краткости называть<article>словом «статья», а<section>словом «раздел»

Даты для людей и машин. Тег time[13/19]

В HTML5 добавили специальный тег для обозначения даты и времени —<time>. У этого тега есть атрибутdatetime — для указания даты в машиночитаемом формате ISO 8601.

С помощью<time>можно описывать даты одновременно и для человека, и для машины, например:

<time datetime="2014-04-20">Вчера</time>
 мы готовили курс к публикации.

Браузер отображает только содержимое тега, а содержимоеdatetimeне отображается. Человек увидит только слово «вчера», а машина прочитает атрибут и получит дату в нужном ей формате. И все довольны.

Кстати, в этом задании вы не только добавите дату, но и наполните пост настоящим содержанием.

Раньше в спецификации указывалось, что у тега<time>может быть ещё один атрибут —pubdate. Сейчас этот атрибут из спецификации убран, и использовать его больше не нужно.

Картинки с подписями. Теги figure и figcaption[14/19]

Теперь, когда шаблон поста готов, можно добавить в блог еще несколько коротких записей. А начнём с фотопоста.

Один из новых тегов — это<figure>.

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

Обычно каждый такой материал сопровождает разъясняющий комментарий или «легенда». Для обозначения этого комментария и предназначен ещё один новый тег —<figcaption>, который размещается первым или последним элементом внутри<figure>. Пример:

<figure>
    схема,    график,    диаграмма    и так далее
    <figcaption>Легенда</figcaption>
</figure>

Мы используем этот тег для более прозаичных целей.

Видео. Тег video[15/19]

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

Для вставки видео предназначен тег<video>. Его основные атрибуты:

`width` и `height`	задают ширину и высоту видео
`controls`	пустой атрибут, при наличии которого отображается панель управления видео
`preload`	задаёт режим предзагрузки видео, имеет 3 возможных значения:`none` — не загружать ничего;`metadata` — загрузить служебную мета-информацию (длительность, первый кадр и т.д.);`auto` — можно загрузить всё видео.значение по умолчанию зависит от браузера
`src`	задаёт адрес видеофайла
`autoplay`	пустой атрибут, при наличии которого воспроизведение видео начинается автоматически
`poster`	задаёт адрес картинки-обложки, которая отображается, когда видео еще не загрузилось или не воспроизводится

Форматы и источники видео[16/19]

У тега<video>есть атрибутsrc, в котором можно указать адрес видеофайла, но мы почему-то его не использовали.

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

Поэтому мы должны в видео указывать адреса файлов во всех этих форматах (и конвертировать исходное видео в эти форматы, конечно). Делается это с помощью тегов<source>:

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogv" type="video/ogg">
    <source src="video.webm" type="video/webm">
</video>

В атрибутеsrcуказывается адрес видеофайла, а в атрибутеtypeего тип (также там могут указываться и кодеки). Браузер из списка видеофайлов выбирает первый, который может проиграть и загружает его.

Атрибутtypeне является обязательным, так как браузер умеет сам определять тип и кодеки, но указывая тип явно, мы помогаем ему не ошибиться.

Аудио. Тег audio[17/19]

Работа с аудио в HTML5 очень похожа на работу с видео, только у тега для аудио чуть меньше параметров.

Для вставки звука предназначен тег<audio>. Его основные атрибуты:

`controls`	пустой атрибут, при наличии которого отображается панель управления проигрывателем
`preload`	задаёт режим предзагрузки аудио, имеет 3 возможных значения:`none` — не загружать ничего;`metadata` — загрузить служебную мета-информацию;`auto` — можно загрузить весь файл.значение по умолчанию зависит от браузера
`src`	задаёт адрес аудиофайла
`autoplay`	пустой атрибут, при наличии которого воспроизведение звука начинается автоматически

Курс «

Знакомство с HTML5

Форматы и источники звука[18/19]

У звуковых файлов с поддержкой форматов дела обстоят лучше, чем у видео.

Для охвата большинства современных браузеров, достаточно использовать всего два формата:

И снова мы не можем указать только один файл в атрибутеsrcу тега<audio>. Мы должны так же, как и в случае с видео, перечислить адреса звуковых файлов в разных форматах с помощью тегов<source>:

<audio controls>
    <source src="sound.mp3" type="audio/mpeg">
    <source src="sound.oga" type="audio/ogg">
</audio>

Теги<source>в аудио работают так же, как и в видео.

HTML5

HTML5

Хедер и футер. Теги header и footer[1/19]

Основное содержание. Тег main[2/19]

Разделы страницы. Теги article и section[3/19]

Изображения в формате SVG[4/19]

Навигация. Тег nav[5/19]

Использование нестандартных шрифтов[7/19]

Подробнее о шрифтах. Правило @font-face[8/19]

Дополнительное содержание. Тег aside[9/19]

Еще раз про article. Анонс поста[10/19]

Даты для людей и машин. Тег time[13/19]

Картинки с подписями. Теги figure и figcaption[14/19]

Видео. Тег video[15/19]

Форматы и источники видео[16/19]

Аудио. Тег audio[17/19]

Форматы и источники звука[18/19]

results matching ""

No results matching ""