Додавання медіа-вмісту

Ми переглядаємо Інтернет у пошуках цікавої та пізнавальної інформації, яку зазвичай знаходимо у вигляді простого тексту. Для його супроводження HTML пропонує способи впровадити мультимедіа у вигляді зображень, аудіо та відео, а також включити контент з іншої веб-сторінки у вигляді вбудованого кадру.

Можливість включати зображення, звук, відео та вбудовані кадри на сайти існує вже деякий час. Браузери підтримують зображення та вбудовані кадри в цілому дуже добре. І хоча додавати звук та відео на сайт можна вже багато років, цей процес був досить громіздким. На щастя, він удосконалюється і став набагато простіше з прямою підтримкою з HTML.

Сьогодні ми можемо вільно використовувати зображення, аудіо, відео та вбудовані кадри, знаючи що вони підтримуються всіма основними браузерами.>Додати зображення

Щоб додати зображення на сторінку, ми використовуємо рядковий елемент <img>. Елемент <img> відноситься до самостійних або порожніх елементів; це означає, що він не містить будь-якого контенту і існує як єдиний тег. Для роботи <img> повинен бути включений атрибут src зі значенням, що вказує на вихідний зображення. Значення атрибута src це URL, зазвичай щодо сервера, на якому розміщений сайт. вміст зображення. Значення атрибута alt збирають пошукові системи та допоміжні технології, що допомагає їм донести призначення зображення. Альтернативний текст буде відображатися замість зображення, якщо з якоїсь причини зображення недоступне.

<code data-language="html"><img src="dog. jpg" alt="Чорно-біло-коричневий собака з одягненою на неї хусткою">

Мал. 9.01. Альтернативний текст показаний на місці відсутнього зображення

Розміри зображень

Важливо визначити розмір зображення, щоб сказати браузеру, наскільки великою має бути картинка до завантаження сторінки. Таким чином, браузер може зарезервувати місце для зображення і відображати сторінки швидше. Є кілька різних способів встановити розмір зображень, які добре працюють на сторінці. Одним із способів є використання атрибутів width та height безпосередньо у тезі <img> у HTML.

Крім того, для вказівки розмірів зображення можуть бути використані властивості width та height у CSS. Коли одночасно застосовуються властивості CSS та атрибути HTML, то властивості CSS матимуть пріоритет над атрибутами HTML.

Вказівка лише ширини або висоти налаштує інший розмір автоматично, щоб зберегти пропорції зображення. Як приклад, якщо ми хочемо, щоб зображення було 200 пикселів у висоту, але ширина нас не особливо турбує, то ми можемо встановити height як 200 пикселів, а ширина зображення підлаштовується відповідно. Одночасне встановлення width та height також буде працювати, однак це може порушити пропорції зображення, внаслідок чого з'являться спотворення.

img { height: 200px; width: 200px; }

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

Позиціонування зображень

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

Міжне позиціонування зображень

Елемент <img> є за замовчуванням рядково-блоковим. Додавання зображення на сторінку без будь-яких стилів позиціонуватиме його на тому ж рядку, що й вміст навколо зображення. Крім того, зміниться висота рядка, в якому з'являється зображення, щоб відповідати висоті зображення, і це може створити великі вертикальні зазори в рядку.

<code data-language="html"><p>Гетсбі — чорно-біло-коричнева дворняга, яка любить виття пожежних машин і коли йому чухають пузо. <img src="dog.jpg" alt="Чорно-біло-коричневий собака з одягненою на неї хусткою"> Незважаючи на те, що він багато часу спить, він дуже швидко ганяється за будь-якими птахами, яких бачить уві сні.< зображення</h3> <iframe width="100%" height="280" src="//jsfiddle.net/webref/dtuxe21y/embedded/result,html,css/" allowfullscreen="allowfullscreen"></iframe> 
</div>
<p>Залишити зображення позиціонованими за умовчанням доводиться рідко. Частіше зображення відображаються як блокові або обтічні елементи.</p> 
<h4>Блочне позиціонування зображень</h4>
<p>Додавши властивість <span class="attribute">display</span> до зображення та встановивши його значення як <span class="value">block</span> ми змусимо зображення бути блоковим елементом. Це відображає зображення на окремому рядку, що дозволяє навколишньому вмісту розташовуватися вище і нижче зображення.</p> <pre class="sh_css">img { display: block; }

Позиціонування зображень ліворуч або праворуч

Іноді виведення зображення як рядкового, блокового або, можливо, навіть рядково-блокового елемента не є ідеальним. Ми можемо зробити так, щоб зображення з'явилося на лівій або правій стороні елемента, що містить його, в той час як інший вміст обтікав навколо зображення при необхідності. Щоб зробити це, ми використовуємо властивість float зі значенням left або right.

Повертаючись назад до уроку 5, «Позиціонування вмісту», нагадаємо, що властивість float спочатку призначалося для розміщення зображень зліва або справа в елементі, що містить їх. Тепер ми використовуємо його для цієї початкової мети.

Обтікання зображення це початок, решта вмісту буде вирівнюватися безпосередньо навпаки. Для забезпечення простору навколо зображення ми скористаємось властивістю margin. Додатково ми можемо застосувати властивості padding, border та background для створення рамки навколо зображення за бажанням.

img { background: #eaeaed; border: 1px solid #9799a7; float: right; margin: 8px 0 0 20px; padding: 4px; }

На практиці

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

1. Почнемо з додавання декількох зображень до нашої головної сторінки. Зокрема, ми додамо зображення до кожного розділу з тизером, які просувають деякі наші сторінки.

   Перш ніж ми перестрибнемо до коду, давайте створимо нову папку з назвою images у нашій папці assets. Потім у папці images створимо іншу папку з назвою home спеціально для зображень нашої головної сторінки. До папки home ми додамо три зображення: speakers.jpg, schedule.jpg та venue.jpg (для довідки, ці зображення можна завантажити з zip-файлу).

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

   HTML для нашого першого тизера зі спікерами буде виглядати так:

   <code data-language="html"><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%, щоб гарантувати, що вони не перевищують ширину відповідних колонок. Зміна значення цієї ширини важлива, оскільки вона дозволяє нашим зображенням підлаштовуватися під ширину колонок при необхідності.

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

   Після того, як ми додамо ці нові стилі до наших існуючих стилів для головної сторінки (за допомогою класу teaser як відбірного селектора для елементів <img>), наш CSS буде виглядати так:

   .teaser img { border-radius: 5px; display: block; margin-bottom: 22px; max-width: 100% }

3. Потім додамо зображення всіх спікерів на сторінці Спікери. Ми почнемо зі створення папки speakers у нашій папці images і помістимо в неї зображення всіх виступаючих.

   У файлі speakers.html додамо елемент <img> всередину кожного елемента <aside> з інформацією про спікера. Розмістимо кожен елемент <img> всередині елемента <div> зі значенням speaker-info у атрибуту class, трохи вище за елемент <ul>.

   Значення атрибута src кожного зображення буде відповідати папці speakers, яку ми створили та імені спікера; значенням атрибуту alt буде ім'я спікера.

   Елемент <aside> для мене як спікера виглядатиме наступним чином:

   <code data-language="html"><aside class="col-1-3"> <div class="speaker-info"> <img src="assets/images/speakers/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 пікселів для кожної картинки і задамо вертикальне вирівнювання по верху рядка, в якому вони знаходяться.

   Після цього застосовуємо до зображення вертикальні відступи. Використовуючи негативний margin зверху в 66 пікселів ми витягнемо трохи зображення з елемента <aside> і вирівняємо по центру верхньої межі елемента <div> з класом speaker-info. Далі, застосування margin як 22 пікселя до нижньої частини зображення забезпечує простір між зображенням та елементом <ul> нижче за нього.

   Після того, як ми додамо ці нові стилі до наших існуючих стилів сторінки Спікери (за допомогою класу speaker-info як відбірний селектор для елементів <img>), наш CSS буде виглядати так:

   .speaker-info img { border-radius: 50%; height: 130px; margin:-66px 0 22px 0; vertical-align: top; }

5. Оскільки ми використовуємо агресивний негативний margin для елемента <img> ; всередині елемента <div> з класом speaker-info, ми повинні прибрати padding зверху у цього елемента <div>.

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

   Новий набір правил для класу speaker-info виглядає так:

   .speaker-info { border: 1px solid #dfe2e5; border-radius: 5px; margin-top: 88px; padding-bottom: 22px; text-align: center; }

Тепер головна сторінка та сторінка Спікери виглядають дуже круто.

Мал. 9.02. Головна сторінка Styles Conference після додавання зображень до кожного розділу з тизером

Мал. 9.03. Сторінка Спікери після додавання зображення для кожного спікера

Додавання аудіо

HTML5 пропонує швидкий і простий спосіб додати аудіофайли на сайт через елемент < audio>. Як і елемент <img>, елемент <audio> приймає URL-адресу вихідного коду, зазначену в атрибуті src. При цьому, на відміну від елемента <img> елемент <audio> вимагає відкриває та закриває теги, які ми обговоримо в найближчим часом.

<code data-language="html"><audio src="jazz.ogg"></audio>

Атрибути <audio>

Кілька інших атрибутів можуть супроводжувати атрибут src для елемента <audio>, найбільш популярні це autoplay, controls, loop та preload.

Атрибути autoplay, controls та loop — логічні атрибути і вимагають наявності значення. Замість цього, коли кожен присутній в елементі <audio>, значення атрибуту буде встановлено істинним і елемент <audio> буде вести відповідно.

За умовчанням, елемент <audio> не відображається на сторінці. Якщо є логічний атрибут autoplay, на сторінці нічого не з'явиться, але аудіофайл почне відтворюватися автоматично після завантаження.

<code data-language="html"><audio src="jazz.ogg" autoplay></audio>

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

<code data-language="html"><audio src="jazz.ogg" controls></audio>

За наявності логічного атрибуту loop для елемента <audio> аудіофайл буде повторюватися постійно, з початку і до кінця.

Зрештою, атрибут preload для елемента <audio> допомагає визначити, яка інформація про аудіофайл, якщо вона є, повинна бути завантажена до відтворення кліпу. Він приймає три значення: none, auto та metadata. Значення none не завантажує жодної інформації про аудіофайл, тоді як значення auto завантажить всю інформацію про аудіофайл. Значення metadata розташовується між значеннями none та auto і завантажить усі доступні відомості про аудіофайл, наприклад, довжину кліпу, але не всю інформацію.

Якщо атрибут preload не представлений в елементі <audio> , вся інформація про аудіофайл буде завантажена, наче значення було встановлено як auto. З цієї причини використання атрибуту preload зі значенням metadata або none — хороша ідея, коли аудіофайл не є необхідним для сторінки. Це допоможе не завантажувати канал і дозволить сторінці завантажуватися швидше.

Альтернатива аудіо та кілька джерел

В даний час різні браузери підтримують різні формати аудіофайлів, трьома найбільш популярними з яких є ogg, mp3 та wav. Для кращої підтримки браузерами нам потрібно використовувати кілька аудіофайлів, які будуть включені всередині тега, що відкриває і закриває, <audio>.

Для початку ми видалимо атрибут src з елемента <audio>. Натомість ми скористаємося елементом <source> з атрибутом src, вкладеним у елемент < щоб визначити новий вихідний файл. за іншим. Ми будемо використовувати атрибут type, який допоможе браузеру швидко визначити, які типи аудіо доступні. Коли браузер розпізнає формат аудіофайлу, він завантажить файл і проігнорує інші.

Оскільки елемент <audio> був представлений у HTML5, деякі браузери його не підтримують. У цьому випадку ми можемо запропонувати посилання для завантаження аудіофайлу після будь-якого елемента <source> всередині <audio>.

>

<code data-language="html"><audio controls> <source src="jazz.ogg" type="audio/ogg"> <source src="jazz.mp3" type="audio/mp3"> <source src="jazz.wav" type="audio/wav"> Будь ласка, <a href="jazz.mp3" download>завантажте</a> аудіофайл.
</audio>

Розглянемо попередній код. Елемент <audio> включає логічний атрибут controls, що гарантує відображення аудіоплеєра в браузерах, які підтримують цей елемент. <audio> не включає атрибут src, а натомість містить три різні елементи < source>. Кожен елемент <source> включає атрибут src що вказує на різний формат аудіофайлу і атрибут type, який визначає формат аудіофайлу. Останній рядок дано як резерв — якщо браузер не розпізнає жоден з форматів аудіофайлів, буде показано посилання на завантаження.

На додаток до елемента <audio>, HTML5 також представив елемент <video>, який має досить багато подібності з <audio>.

>

Додавання відео

Додавання відео в HTML5 дуже схоже на додавання аудіо. Ми використовуємо елемент <video> на місці елемента <audio>. Ті самі атрибути (src, autoplay, controls, loop та preload) та альтернативи застосовні і тут.

Для елемента < audio> характерно, що якщо логічний атрибут controls не вказаний, аудіокліп не відображається. Для відео, якщо атрибут controls не вказано, відео буде показано. Однак його досить важко подивитися, якщо логічний атрибут autoplay також не застосовується. В цілому, гарною практикою буде включити атрибут controls, якщо немає серйозної причини не дозволяти користувачам запускати, зупиняти або повторювати відео.

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

<code data-language="html">< ;video src="earth.ogv" controls></video>

Атрибут poster

Для елемента <video> доступний додатковий атрибут poster. Цей атрибут дозволяє встановити зображення у вигляді URL-адреси, яка буде показана до відтворення відео. У наведеному нижче прикладі скріншот із відео використовується як постер для відео Землі.

<code data-language="html"><video src="earth.ogv" controls poster="earth-video-screenshot.jpg"></video>

Альтернатива відео

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

<code data-language="html"><video controls> <source src="earth.ogv" type="video/ogg"> <source src="earth.mp4" type="video/mp4"> Будь ласка, <a href="earth.mp4" download>завантажте</a> це відео.
</video>

Додатковим запасним варіантом, який може бути використаний замість звичайного тексту, є вбудоване відео YouTube або Vimeo. Ці сайти відеохостингу дозволяють завантажити наші відео, надають стандартний відеоплеєр та можливість впровадити відео на сторінку за допомогою вбудованого кадру.

Додавання вбудованих кадрів

Ще один спосіб додавання вмісту на сторінку — це впровадити іншу HTML-сторінку на поточну. Це робиться за допомогою вбудованого кадру або елементу <iframe>. Цей елемент приймає URL-адресу іншої HTML-сторінки у значенні атрибута src — це викликає вміст із впровадженої HTML-сторінки для відображення на поточній сторінці. Значення атрибуту src може бути URL-адресою сторінки, де з'являється елемент <iframe> або абсолютною адресою для виключно зовнішньої сторінки.

Багато сторінок використовують елемент <iframe> для впровадження медіа-контенту на сторінку із зовнішнього сайту, на зразок Google Maps, YouTube та ін.

<code data-language="html"><iframe src="https://www.google.com/maps/embed?...">< /iframe>

Елемент <iframe> містить кілька стилів за промовчанням, у тому числі border, width та height. Ці стилі можна регулювати за допомогою атрибутів у HTML frameborder, width та height або за допомогою CSS-властивостей border, width та height.

Атрибут seamless

Сторінки, на які посилається атрибут src елемента <iframe> грають за своїми правилами — так, вони не успадковують будь-які стилі або поведінку зі сторінки, яку вказують. Будь-які стилі, що застосовуються до сторінки з елементом <iframe> не успадковуються сторінкою всередині елемента <iframe>. Крім того, посилання всередині сторінки в елементі <iframe> відкриються всередині кадру, залишаючи сторінку, яка містить елемент <iframe> , без змін.

У нас буде час, коли ми захочемо змінити подібну поведінку та логічний атрибут seamless дозволить нам це зробити. Коли атрибут seamless присутній в елементі <iframe> це дозволяє стилям