Добавление медиа - научиться кодировать HTML и CSS

  1. Урок 9 Мы просматриваем Интернет в поисках интересного и информативного контента, который мы обычно...
  2. ImageПоддерживаемые форматы изображений
  3. Размер изображения
  4. Позиционирование изображений
  5. Встроенные изображения позиционирования
  6. Блок позиционирования изображения
  7. Расположение изображений влево или вправо
  8. Когда использовать элемент изображения против фонового изображения
  9. На практике
  10. Добавление аудио
  11. Атрибуты аудио
  12. Аудио откат и несколько источников
  13. Добавление видео
  14. Настройка аудио и видео элементов управления
  15. Атрибут плаката
  16. Демонстрация атрибутов плаката
  17. Видео Fallbacks
  18. HTML5 аудио и видео форматы файлов
  19. Добавление встроенных фреймов
  20. Добавление демонстрации встроенных фреймов
  21. На практике
  22. Демо и исходный код
  23. Семантически идентифицирующие рисунки и подписи
  24. фигура
  25. Подписи к рисунку
  26. Резюме
Урок 9

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

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

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

Добавление изображений

Чтобы добавить изображения на страницу, мы используем встроенный элемент <img>. Элемент <img> является самодостаточным или пустым элементом, что означает, что он не переносит никакого другого содержимого и существует как один тег. Для работы элемента <img> необходимо указать атрибут и значение src, чтобы указать источник изображения. Значением атрибута src является URL-адрес, обычно относящийся к серверу, на котором размещен веб-сайт.

Вместе с атрибутом src должен применяться атрибут alt (альтернативный текст), который описывает содержимое изображения. Значение атрибута alt подбирается поисковыми системами и вспомогательными технологиями, чтобы помочь передать цель изображения. Альтернативный текст будет отображаться вместо изображения, если по какой-либо причине изображение недоступно.

1 2 <img src = "dog.jpg" alt = "Черная, коричневая и белая собака в платке"> 1 2 <img src = dog Рис 9

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

ImageПоддерживаемые форматы изображений

Изображения могут быть разных форматов, и каждый браузер может поддерживать (или не поддерживать) разные форматы. В целом, наиболее часто поддерживаемые форматы онлайн - это изображения в форматах gif, jpg и png. Из них наиболее широко используемыми форматами сегодня являются JPG и PNG. Формат jpg обеспечивает качественные изображения с большим количеством цветов, в то же время сохраняя приличный размер файла, что идеально подходит для более быстрой загрузки Формат png отлично подходит для изображений с прозрачностью или низким количеством цветов. Мы обычно видим изображения jpg, используемые для фотографий, и изображения png, используемые для значков или фоновых рисунков.

Размер изображения

Важно определить размер изображения, чтобы сообщить браузеру, насколько большим должно быть изображение, прежде чем страница будет загружена; таким образом, браузер может зарезервировать место для изображения и быстрее отобразить страницу. Существует несколько способов изменения размера изображений, чтобы они хорошо работали на странице. Один из вариантов - использовать атрибуты width и height непосредственно внутри тега <img> в HTML.

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

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

1 2 3 4 5 img {height: 200px; ширина: 200 пикселей; }

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

Позиционирование изображений

Мы можем использовать различные подходы для размещения изображений на веб-странице. По умолчанию изображения позиционируются как элементы встроенного уровня; однако их положения могут быть изменены с помощью CSS, в частности свойства float, display и box-модели, включая padding, border и margin.

Встроенные изображения позиционирования

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

1 2 <p> Гэтсби - черный, коричневый и белый щенок, который любит выть в пожарных машинах и собирать животы. <img src = "dog.jpg" alt = "Черная, коричневая и белая собака в платке"> Хотя он проводит большую часть времени во сне, он также быстро преследует любых птиц, попадающих в его зрение. </ Р>

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

Блок позиционирования изображения

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

1 2 3 4 img {display: block; }

Расположение изображений влево или вправо

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

Вспоминая урок 5, « Позиционирование контента , »Мы напоминаем, что свойство float изначально предназначалось для позиционирования изображений слева или справа от содержащего элемента. Теперь мы будем использовать его для этой первоначальной цели.

Плавающее изображение это начало; тем не менее, все остальное содержимое будет соответствовать непосредственно этому. Чтобы обеспечить интервал вокруг изображения, мы будем использовать свойство margin. Кроме того, при желании мы можем использовать свойства padding, border и background для создания рамки для изображения.

1 2 3 4 5 6 7 8 img {background: #eaeaed; граница: 1px solid # 9799a7; плавать: правильно; поле: 8px 0 0 20px; обивка: 4px; }

Когда использовать элемент изображения против фонового изображения

Существует два основных способа добавления изображений на веб-страницу. Один из способов, как описано здесь, заключается в использовании элемента <img> в HTML. Другой способ - использовать свойство background или background-image в CSS для назначения фонового изображения элементу. Любой вариант сделает работу; однако, у каждого из них есть определенные варианты использования.

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

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

Элемент <img> довольно популярен, и когда он был первоначально добавлен в спецификацию HTML, он навсегда изменил способ создания веб-сайтов.

На практике

Теперь, когда мы знаем, как добавлять и размещать изображения на странице, давайте взглянем на наш веб-сайт Styles Conference и посмотрим, где можно добавить несколько изображений.

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

    Прежде чем мы перейдем к коду, давайте создадим новую папку с именем «images» в нашей папке «assets». Затем, в папке «images», давайте создадим еще одну папку с именем «home» специально для изображений нашей домашней страницы. В папке «home» мы добавим три изображения: speaker.jpg, schedule.jpg и venue.jpg. (Для справки, эти изображения могут быть загруженный в zip-файле.)

    Затем внутри нашего файла index.html каждый раздел тизера содержит элемент <a>, заключающий в себе как элемент <h3>, так и элемент <h5>. Давайте переместим элемент <h5> над элементом <a> и заменим его элементом <img>. Значение атрибута src для каждого элемента <img> будет соответствовать структуре папки и имени файла, которые мы установили, а значение атрибута alt будет описывать содержимое каждого изображения.

    HTML-код нашего первого тизера для страницы «Спикеры» будет выглядеть следующим образом:

    1 2 3 4 5 6 7 8 9 <section class = "teaser col-1-3"> <h5> Динамики </ h5> <a href= "speakers.html"> <img src = "assets / images / home /speakers.jpg "alt =" Профессиональный спикер "> <h3> Спикеры мирового класса </ h3> </a> <p> К нам со всего мира присоединяются более двадцати фантастических спикеров, чтобы поделиться своими историями. </ p> </ section>

    Давайте продолжим эту модель и для тизеров страницы Расписание и Место проведения.

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

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

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

    Как только мы добавим эти новые стили в существующие стили домашней страницы (используя класс тизера в качестве квалифицирующего селектора для элементов <img>), наш CSS будет выглядеть следующим образом:

    1 2 3 4 5 6 7 .teaser img {border-radius: 5px; дисплей: блок; нижнее поле: 22 пикселя; максимальная ширина: 100%}
  3. Далее, давайте добавим изображения всех ораторов на страницу Speakers. Мы начнем с создания папки «колонки» в нашей папке «изображения» и размещения там изображений всех колонок.

    В файле speaker.html давайте добавим элемент <img> в каждый из элементов <aside> информации о докладчике. Давайте разместим каждый элемент <img> внутри элемента <div> со значением атрибута класса speaker-info, чуть выше элемента <ul>.

    Значение атрибута src каждого изображения будет соответствовать папке «динамика», которую мы настроили, и имени докладчика; значение атрибута alt будет именем говорящего.

    Элемент <aside> для меня как докладчика будет выглядеть так:

    1 2 3 4 5 6 7 8 9 10 11 12 13 <aside class = "col-1-3"> <div class = "speaker-info"> <img src = "assets / images / speaker / shay-howe. jpg "alt =" Шей Хоу "> <ul> <li> <a href= "https://twitter.com/shayhowe"> @shayhowe </a> </ li> <li> <a href =" http : //learn.shayhowe.com/ "> learn.shayhowe.com </a> </ li> </ ul> </ div> </ aside>

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

  4. Как и в случае с изображениями на нашей домашней странице, мы хотим применить некоторые стили к изображениям на странице «Динамики».

    Давайте начнем с применения свойства border-radius со значением 50%, превратив наши изображения в круги. Оттуда давайте установим фиксированную высоту 130 пикселей для каждого изображения и установим их выравнивание по вертикали к верхней части линии, в которой они находятся.

    Имея высоту и вертикальное выравнивание, давайте применим вертикальные поля к изображениям. Используя отрицательное 66-пиксельное поле в верхней части изображений, мы слегка вытянем их из элемента <aside> и сделаем их по центру по вертикали с верхней границей элемента <div> со значением атрибута класса speaker- Информация. Затем, применение 22-пиксельного поля в нижней части изображения обеспечивает пространство между изображением и элементом <ul> под ним.

    Когда мы добавим эти новые стили в наши существующие стили страницы Speakers (используя класс speaker-info в качестве квалифицирующего селектора для элементов <img>), наш CSS будет выглядеть следующим образом:

    1 2 3 4 5 6 7 .speaker-info img {border-radius: 50%; высота: 130 пикселей; поле: -66px 0 22px 0; выравнивание по вертикали: верх; }
  5. Так как мы используем агрессивное отрицательное поле для элемента <img> в элементе <div> со значением атрибута класса speaker-info, нам нужно удалить отступ в верхней части этого элемента <div>.

    Ранее мы использовали свойство padding со значением 22px 0, таким образом размещая 22 пикселя отступа сверху и снизу и 0 пикселей отступа слева и справа от элемента <div>. Давайте поменяем это свойство и значение на свойство padding-bottom, так как это единственный отступ, который нам нужно идентифицировать, и используем значение 22 пикселя.

    Новый набор правил класса speaker-info выглядит следующим образом:

    1 2 3 4 5 6 7 8 .speaker-info {border: 1px solid # dfe2e5; радиус границы: 5 пикселей; маржинальная вершина: 88px; padding-bottom: 22px; выравнивание текста: по центру; }

Теперь наши домашние страницы и страницы докладчиков выглядят довольно резкими.

Рис 9Рис 9

Наша домашняя страница Styles Conference после добавления изображений в каждый раздел, который дразнит другую страницу

Рис 9Рис 9

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

Добавление аудио

HTML5 обеспечивает быстрый и простой способ добавления аудиофайлы на сайт через <аудио> элемент , Как и в случае элемента <img>, элемент <audio> принимает исходный URL-адрес, указанный в атрибуте src. В отличие от элемента <img>, элемент <audio> требует наличия как открывающих, так и закрывающих тегов, которые мы скоро обсудим.

1 2 <audio src = "jazz.ogg"> </ audio>

Атрибуты аудио

Несколько других атрибутов могут сопровождать атрибут src в элементе <audio>; самые популярные включают автозапуск, элементы управления, цикл и предварительную загрузку.

Атрибуты autoplay, control и loop являются булевыми атрибутами. Как булевы атрибуты, они не требуют установленного значения. Вместо этого, когда каждый элемент присутствует в элементе <audio>, его значение будет установлено равным true, а элемент <audio> будет вести себя соответствующим образом.

По умолчанию элемент <audio> не отображается на странице. Если логический атрибут autoplay присутствует в элементе <audio>, на странице ничего не появится, но аудиофайл будет автоматически воспроизводиться при загрузке.

1 2 <audio src = "jazz.ogg" autoplay> </ audio>

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

1 2 <audio src = "jazz.ogg" control> </ audio>

При наличии в элементе <audio> логический атрибут loop будет вызывать непрерывное повторение аудиофайла от начала до конца.

Наконец, атрибут preload для элемента <audio> помогает определить, какую информацию об аудиофайле, если таковая имеется, следует загрузить до воспроизведения клипа. Он принимает три значения: нет, авто и метаданные. Значение none не будет предварительно загружать любую информацию об аудиофайле, в то время как значение auto предварительно загружает всю информацию об аудиофайле. Значение метаданных находится между значениями none и auto, так как оно будет предварительно загружать любую доступную информацию метаданных об аудиофайле, например длину клипа, но не всю информацию.

Когда атрибут preload отсутствует в элементе <audio>, загружается вся информация об аудиофайле, как если бы значение было установлено на auto. По этой причине использование атрибута preload со значением метаданных или без него является хорошей идеей, когда аудиофайл не является существенным для страницы. Это поможет сохранить пропускную способность и позволить страницам загружаться быстрее.

Аудио откат и несколько источников

На данный момент разные браузеры поддерживают разные форматы аудио файлов, три самых популярных из которых: ogg, mp3 и wav. Для лучшей поддержки браузера нам понадобится несколько аудио-откликов, которые будут включены в открывающий и закрывающий теги элемента <audio>.

Для начала мы удалим атрибут src из элемента <audio>. Вместо этого мы будем использовать элемент <source> с атрибутом src, вложенный в элемент <audio>, чтобы определить новый источник.

Используя элемент <source> и атрибут src для каждого формата файла, мы можем перечислить один формат аудиофайла за другим. Мы будем использовать атрибут type, чтобы быстро помочь браузеру определить, какие типы аудио доступны. Когда браузер распознает формат аудиофайла, он загружает этот файл и игнорирует все остальные.

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

1 2 3 4 5 6 7 <управление аудиосистемой> <source src = "jazz.ogg" type = "audio / ogg"> <source src = "jazz.mp3" type = "audio / mpeg"> <source src = " jazz.wav "type =" audio / wav "> Пожалуйста, <a href= "jazz.mp3" download> загрузите </a> аудиофайл. </ Аудио>

Чтобы просмотреть предыдущий код, элемент <audio> включает в себя логический атрибут controls, который обеспечивает отображение аудиоплеера в браузерах, которые поддерживают этот элемент. Элемент <audio> не включает атрибут src и вместо этого оборачивает три разных элемента <source>. Каждый элемент <source> включает в себя атрибут src, который ссылается на другой формат аудиофайла, и атрибут type, чтобы идентифицировать формат аудиофайла. В качестве последнего отступления, если браузер не распознает какой-либо из форматов аудиофайлов, будет отображена якорная ссылка для загрузки элемента.

В дополнение к элементу <audio> в HTML5 также появился элемент <video>, который имеет довольно много общего с элементом <audio>.

Добавление видео

Добавление видео в HTML5 очень похоже на добавление аудио. Мы используем элемент <video> вместо элемента <audio>. Все те же атрибуты (src, автозапуск, элементы управления, цикл и предварительная загрузка) и запасные варианты применимы и здесь.

С элементом <audio>, если не указан логический атрибут элементов управления, аудиоклип не отображается. Для видео, если логический атрибут элементов управления не указан, видео будет отображаться. Тем не менее, его довольно сложно просмотреть, если не применяется также логический атрибут autoplay. Как правило, в этом случае рекомендуется включать логический атрибут controls, если только у вас нет веской причины не разрешать пользователям запускать, останавливать или воспроизводить видео.

Поскольку видео занимают место на странице, не помешает указать их размеры, что чаще всего делается с помощью свойств width и height в CSS. Это помогает гарантировать, что видео не слишком большое и остается в пределах предполагаемого макета страницы. Кроме того, указание размера, как и для изображений, помогает браузеру рендерить видео быстрее и позволяет ему выделять место, необходимое для отображения видео.

1 2 <video src = "earth.ogv" control> </ video>

Настройка аудио и видео элементов управления

По умолчанию элементы управления <audio> и <video> определяются каждым браузером независимо. В зависимости от дизайна веб-сайта может потребоваться больше правдоподобия внешнего вида медиаплеера. Если это так, то можно создать специальный проигрыватель, но для его работы потребуется немного JavaScript.

Кроме того, если пользовательский проигрыватель использует элемент <img> в качестве элемента управления, значение атрибута alt должно явно указывать, что изображение является элементом управления и для его работы требуется надлежащее взаимодействие.

Атрибут плаката

Один дополнительный атрибут, доступный для элемента <video>, - это атрибут poster. Атрибут poster позволяет указать изображение в виде URL, которое будет отображаться перед воспроизведением видео. Пример ниже использует снимок экрана с видео в качестве постера для видео Земли.

1 2 <video src = "earth.ogv" контролирует poster = "earth-video-screenshot.jpg"> </ video>

Демонстрация атрибутов плаката

Из соображений производительности это видео-демонстрация размещается локально, однако просмотреть и отредактировать этот код на CodePen.

пожалуйста скачать видео.

Видео Fallbacks

Как и в случае с элементом <audio>, откат видео также необходим. Один и тот же формат разметки с несколькими элементами <source> для каждого типа файла и резервным текстом в обычном формате также применяется в элементе <video>.

1 2 3 4 5 6 <video control> <source src = "earth.ogv" type = "video / ogg"> <source src = "earth.mp4" type = "video / mp4"> Пожалуйста, <a href = " earth.mp4 "скачать> скачать </a> видео. </ Видео>

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

HTML5 аудио и видео форматы файлов

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

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

Добавление встроенных фреймов

Другой способ добавить контент на страницу - это вставить другую HTML-страницу на текущую страницу. Это делается с помощью встроенного фрейма или элемента <iframe>. Элемент <iframe> принимает URL-адрес другой HTML-страницы в значении атрибута src; это приводит к тому, что содержимое встроенной HTML-страницы отображается на текущей странице. Значением атрибута src может быть URL-адрес относительно страницы, на которой появляется элемент <iframe>, или абсолютный URL-адрес для полностью внешней страницы.

Многие страницы используют элемент <iframe> для встраивания мультимедиа на страницу с внешнего веб-сайта, такого как Google Maps, YouTube и другие.

1 2 <iframe src = "https: //www.google.com/maps/embed? ..."> </ iframe>

Добавление демонстрации встроенных фреймов

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

Элемент <iframe> имеет несколько стилей по умолчанию, включая границу вставки, ширину и высоту. Эти стили можно настроить с помощью HTML-атрибутов frameborder, width и height или с помощью CSS-свойств border, width и height.

Страницы, на которые есть ссылка в атрибуте src элемента <iframe>, воспроизводятся по своим собственным правилам, поскольку они не наследуют стили или поведения со страницы, на которую они ссылаются. Любые стили, примененные к странице, содержащей элемент <iframe>, не будут наследоваться страницей, на которую ссылается элемент <iframe>. Кроме того, ссылки на странице, на которую ссылается элемент <iframe>, будут открываться внутри этого фрейма, оставляя страницу, содержащую элемент <iframe>, без изменений.

На практике

Встроенные фреймы предоставляют отличный способ добавить динамический контент на страницу. Давайте сделаем это, обновив нашу страницу Места с некоторыми картами.

  1. Прежде чем добавлять какие-либо карты или встроенные фреймы, давайте сначала подготовим нашу страницу Место проведения для сетки из двух столбцов. Ниже переднего раздела страницы мы добавим элемент <section> со значением атрибута class строки, чтобы идентифицировать новый раздел страницы, и добавим несколько общих стилей, таких как белый фон и некоторые вертикальные отступы. ,

    Прямо внутри этого элемента <section> добавим элемент <div> со значением атрибута класса grid. Класс сетки центрирует наш контент на странице и подготавливает столбцы в одну треть и две трети.

    Пока что основной раздел нашего файла venue.html выглядит так:

    1 2 3 4 5 6 <section class = "row"> <div class = "grid"> ... </ div> </ section>

  2. В элементе <div> со значением атрибута класса grid у нас будет два новых раздела, один для места проведения конференции и один для отеля для конференций. Давайте добавим два новых элемента <section> и дадим каждому из этих элементов <section> уникальный класс, соответствующий его содержимому. Мы будем использовать эти классы для добавления полей внизу каждого раздела.

    Наш HTML должен теперь выглядеть так:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 <section class = "row"> <div class = "grid"> <section class = "venue-theatre"> ... </ section> <section class = "Venue-hotel"> ... </ section> </ div> </ section>
  3. Теперь, когда у нас есть несколько классов для работы, давайте создадим новый раздел в нашем файле main.css для стилей страницы Venue. Мы добавим 66-пиксельное поле внизу элемента <section> со значением атрибута class venue-theatre, чтобы вставить пространство между ним и элементом <section> под ним.

    Затем мы добавим 22-пиксельное поле внизу элемента <section> со значением атрибута class venue-hotel, чтобы обеспечить некоторое пространство между ним и элементом <footer> под ним.

    Новый раздел места в файле main.css выглядит следующим образом:

    1 2 3 4 5 6 7 8 9 10 11 12 13 / * ================================== ===== Место проведения ============================================== * / .venue -theatre {margin-bottom: 66px; } .venue-hotel {margin-bottom: 22px; }

    Элемент <section> со значением атрибута класса venue-hotel имеет меньшее нижнее поле, чем элемент <section> со значением атрибута класса venue-theatre, поскольку он расположен рядом с отступом снизу элемента <section> с атрибутом класса строки. Добавление этого поля и отступа дает нам то же значение, что и нижнее поле элемента <section> со значением атрибута class venue-theatre.

  4. Теперь пришло время создать два столбца в каждом из новых элементов <section>. Мы начнем с добавления элемента <div> со значением атрибута класса col-1-3, чтобы установить столбец в одну треть. После этого мы добавим элемент <iframe> со значением атрибута класса col-2-3, чтобы установить столбец в две трети.

    Помня, что классы столбцов делают элементы <div> и <iframe> элементами inline-block, нам нужно удалить пустое пространство, которое появится между ними. Для этого мы откроем комментарий HTML непосредственно после закрывающего тега <div> и закроем комментарий HTML непосредственно перед открывающим тегом <iframe>.

    В целом наш HTML для столбцов выглядит так:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <section class = "row"> <div class = "grid"> <section class = "venue-theatre"> <div class = "col-1-3"> </ div> <! - -> <iframe class = "col-2-3"> </ iframe> </ section> <section class = "venue-hotel"> <div class = "col-1-3"> </ div> <! - -> <iframe class = "col-2-3"> </ iframe> </ section> </ div> </ section >

  5. В каждом из элементов <div> со значением атрибута класса col-1-3 давайте добавим название объекта в элемент <h2>, за которым следуют два элемента <p>. В первом элементе <p> давайте включим адрес места проведения, а во втором элементе <p> включим веб-сайт места проведения (в пределах ссылки) и номер телефона.

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

    Для элемента <section> со значением атрибута класса venue-theatre HTML-код выглядит следующим образом:

    1 2 3 4 5 6 7 8 9 10 11 12 <section class = "venue-theatre"> <div class = "col-1-3"> <h2> Chicago Theatre </ h2> <p> 175 N State St <br> Чикаго, Иллинойс 60601 </ p> <p> <a href= "http://www.thechicagotheatre.com/"> thechicagotheatre.com </a> <br> (312) 462-6300 </ p > </ div> <! - -> <iframe class = "col-2-3"> </ iframe> </ section>

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

  6. Мы можем искать эти адреса в Карты Гугл , Как только мы найдем адрес и создадим индивидуальную карту, у нас появится возможность встроить эту карту в нашу страницу. Следуя инструкциям на Google Картах о том, как делиться и встраивать карту, мы получим HTML-код для элемента <iframe>.

    Давайте скопируем элемент HTML - <iframe>, атрибут src и все - на нашу страницу, где находится наш существующий элемент <iframe>. Мы сделаем это для каждого местоположения, используя два разных элемента <iframe>.

    При копировании элемента <iframe> из Google Maps нам необходимо убедиться, что мы сохраним атрибут и значение класса col-2-3 из нашего существующего элемента <iframe>. Мы также должны быть осторожны, чтобы не повредить HTML-комментарий, который закрывается непосредственно перед нашим открывающим тегом <iframe>.

    Если посмотреть прямо на элемент <section> со значением атрибута класса venue-theatre, HTML-код выглядит следующим образом:

    1 2 3 4 5 6 7 8 9 10 11 12 <section class = "venue-theatre"> <div class = "col-1-3"> <h2> Chicago Theatre </ h2> <p> 175 N State St <br> Чикаго, Иллинойс 60601 </ p> <p> <a href= "http://www.thechicagotheatre.com/"> thechicagotheatre.com </a> <br> (312) 462-6300 </ p > </ div> <! - -> <iframe class = "col-2-3" src = "https://www.google.com/maps/embed?pb=!1m5!3m3!1m2!1s0x880e2ca55810a493 % 3A0x4700ddf60fcbfad6! 2schicago + theatre! 5e0! 3m2! 1sen! 2sus! 4v1388701393606 "> </ iframe> </ section>
  7. Наконец, мы хотим убедиться, что оба элемента <iframe>, ссылающиеся на Карты Google, имеют одинаковую высоту. Для этого мы создадим новый класс venue-map и применим его к каждому элементу <iframe> рядом с существующим значением атрибута класса col-2-3.

    HTML-код для элемента <section> со значением атрибута class venue-theatre теперь выглядит следующим образом:

    1 2 3 4 5 6 7 8 9 10 11 12 <section class = "venue-theatre"> <div class = "col-1-3"> <h2> Chicago Theatre </ h2> <p> 175 N State St <br> Чикаго, Иллинойс 60601 </ p> <p> <a href= "http://www.thechicagotheatre.com/"> thechicagotheatre.com </a> <br> (312) 462-6300 </ p > </ div> <! - -> <iframe class = "venue-map col-2-3" src = "https://www.google.com/maps/embed?pb=!1m5!3m3! 1m2! 1s0x880e2ca55810a493% 3A0x4700ddf60fcbfad6! 2schicago + theatre! 5e0! 3m2! 1sen! 2sus! 4v1388701393606 "> </ iframe> </ section>

    Как только класс карты места будет применен к каждому элементу <iframe>, давайте создадим набор правил класса карты места в нашем файле main.css. Включает свойство height со значением 264 пикселей.

    Набор правил класса карты места выглядит следующим образом:

    1 2 3 4 .venue-map {height: 264px; }

Теперь у нас есть страница «Место проведения» с картами для различных мест проведения нашей конференции.

Рис 9Рис 9

Наша страница Место проведения конференции Styles, которая теперь включает встроенные рамки

Демо и исходный код

Ниже вы можете просмотреть веб-сайт Styles Conference в его текущем состоянии, а также загрузить исходный код веб-сайта в его текущем состоянии.

Просмотр веб-сайта Styles Conference или же Скачать исходный код (Zip-файл)

Семантически идентифицирующие рисунки и подписи

С HTML5 также появилось введение элементов <figure> и <figcaption>. Эти элементы были созданы для семантической разметки автономного контента или медиа, обычно с подписью. До HTML5 это часто делалось с использованием упорядоченного списка. Хотя упорядоченный список работал, разметка не была семантически правильной.

фигура

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

1 2 3 4 <figure> <img src = "dog.jpg" alt = "Черная, коричневая и белая собака в платке"> </ figure>

Подписи к рисунку

Чтобы добавить подпись или легенду к элементу <figure>, используется элемент <figcaption>. <Figcaption> может появляться сверху, снизу или где-либо внутри элемента <figure>; однако, это может появиться только один раз. Когда он используется, элемент <figcaption> будет служить заголовком для всего содержимого в элементе <figure>.

Кроме того, элемент <figcaption> может заменить атрибут alt элемента <img>, если содержимое элемента <figcaption> предоставляет полезное описание визуального содержимого изображения.

1 2 3 4 5 <figure> <img src = "dog.jpg"> <figcaption> Красивая черная, коричневая и белая гончая собака в платке. </ figcaption> </ figure>

Не все формы мультимедиа необходимо включать в элемент <figure> или включать элемент <figcaption>; только те, которые являются автономными и принадлежат к группе.

Резюме

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

В этом уроке мы рассмотрели следующее:

  • Лучшие способы добавления изображений, аудиоклипов, видео и встроенных фреймов на страницу
  • Различные способы позиционирования изображений в разных ситуациях
  • Как предоставить аудио и видео запасные версии для старых браузеров
  • Общие атрибуты, доступные для аудиоклипов и видео
  • Семантический способ разметки автономного контента, включая медиа

Мы приступаем к изучению HTML и CSS, и осталось представить только несколько дополнительных компонентов. Далее в списке находятся формы.

Ресурсы и ссылки

Com/maps/embed?
Com/maps/embed?
Com/maps/embed?