HTML5

Рубрики HTML

Использование нестандартных шрифтов

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

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

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

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

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

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

Дополнительное содержание. Тег aside.

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

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

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

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

 

Еще раз про article. Анонс поста.

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

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

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

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

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

 

Даты для людей и машин. Тег time.

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

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

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

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

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

 

Картинки с подписями. Теги figure и figcaption.

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

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

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

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

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

Видео. Тег video.

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

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

width и height задают ширину и высоту видео
controls пустой атрибут, при наличии которого отображается панель управления видео
preload задаёт режим предзагрузки видео, имеет 3 возможных значения:

  • none — не загружать ничего;
  • metadata — загрузить служебную мета-информацию (длительность, первый кадр и т.д.);
  • auto — можно загрузить всё видео.

значение по умолчанию зависит от браузера
src задаёт адрес видеофайла
autoplay пустой атрибут, при наличии которого воспроизведение видео начинается автоматически
poster задаёт адрес картинки-обложки, которая отображается, когда видео еще не загрузилось или не воспроизводится

 

Форматы и источники видео.

У тега <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.

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

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

controls пустой атрибут, при наличии которого отображается панель управления проигрывателем
preload задаёт режим предзагрузки аудио, имеет 3 возможных значения:

  • none — не загружать ничего;
  • metadata — загрузить служебную мета-информацию;
  • auto — можно загрузить весь файл.

значение по умолчанию зависит от браузера
src задаёт адрес аудиофайла
autoplay пустой атрибут, при наличии которого воспроизведение звука начинается автоматически

 

Форматы и источники звука.

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

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

  • MP3
  • OGG

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

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

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

 

Кнопка-изображение.

В качестве кнопки отправки формы можно использовать изображение.

Для этого у тега input нужно указать тип image.

Аналогично обычным изображениям на сайте у кнопки-изображения есть еще два атрибута:

src адрес изображения
alt альтернативный текст, отображаемый в том случае, если изображение не загружено

Кнопка-изображение работает аналогично кнопке submit, но на сервер дополнительно передаются координаты точки, по которой был произведен щелчок.

 

Альтернативный способ задания кнопок.

Помимо тега <input> для добавления кнопок можно использовать тег <button>. Он расширяет возможности создания кнопок.

Внутри тэга <button> можно размещать любые HTML-элементы, в том числе изображения. Например:

<button>Календарь <img src="/assets/course74/calend.png" alt=""></button>

В данном случае кнопка будет выглядеть примерно вот так:

Если в атрибуте type тега <button> указать значение submit или reset, то кнопка будет отправлять данные на сервер или сбрасывать введенные значения.