Новости

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

  1. Додавання зображень
  2. Демонстрація додати зображення
  3. Формати зображень
  4. розміри зображень
  5. Демонстрація розмірів зображення
  6. позиціонування зображень
  7. Рядкове позиціонування зображень
  8. Демонстрація сатиричного зображення
  9. Блочне позиціонування зображень
  10. Демонстрація блочного зображення
  11. Демонстрація обтічного зображення
  12. На практиці
  13. Додавання аудіо
  14. Атрибути <audio>
  15. Демонстрація додавання аудіо
  16. Альтернатива аудіо і кілька джерел
  17. Додавання відео
  18. Налаштування управління аудіо і відео
  19. Атрибут poster
  20. альтернатива відео
  21. Формати аудіо і відеофайлів в HTML5
  22. Додавання вбудованих фреймів
  23. Демонстрація додавання вбудованого фрейма
  24. Атрибут seamless
  25. На практиці
  26. Демонстрація і вихідний код
  27. Семантичне визначення figure і figcaption
  28. <Figure>
  29. Демонстрація <figure>
  30. Демонстрація <figcaption>
  31. резюме
  32. Ресурси і посилання

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

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

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

Додавання зображень

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

Поряд з атрибутом src повинен бути застосований атрибут alt (альтернативний текст), який описує вміст зображення. Значення атрибута alt збирають пошукові системи і допоміжні технології, це допомагає їм донести призначення зображення. Альтернативний текст буде відображатися замість зображення, якщо з якоїсь причини зображення поза зоною досяжності.

<Img src = "dog.jpg" alt = "Чорно-біло-коричнева собака з надітим на неї хусткою">

Демонстрація додати зображення

Демонстрація додати зображення

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

Формати зображень

Зображення надходять в різних форматах файлів і кожен браузер може підтримувати (або не підтримувати) різні формати. За великим рахунком, найбільш типові підтримувані формати зображень в Інтернеті - це gif, jpg і png. З них найбільш широко використовуваними сьогодні форматами є jpg і png. Формат jpg забезпечує якість зображення з високою кількістю квітів, зберігаючи скромний розмір файлу, що ідеально підходить для швидкого завантаження. Форматі png відмінно підходить для зображень з прозорістю або малим числом квітів. Ми зазвичай бачимо що зображення в jpg використовуються для фотографій, а зображення в png - для іконок або фонових візерунків.

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

Важливо визначити розмір зображення, щоб сказати браузеру, наскільки великою має бути картинка до завантаження сторінки. Таким чином браузер може зарезервувати місце для зображення і відображати сторінки швидше. Є кілька різних способів задати розмір зображень, які добре працюють на сторінці. Одним із способів є використання атрибутів 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> є за замовчуванням рядково-блоковим. Додавання зображення на сторінку без будь-яких стилів буде позиціонувати його на тому ж рядку, що і вміст навколо зображення. Крім того, зміниться висота рядка, в якій з'являється зображення, щоб відповідати висоті зображення і це може створити великі вертикальні зазори в рядку.

<P> Гетсбі - чорно-біло-коричнева дворняга, яка любить виття пожежних машин і коли йому чешуть пузо. <Img src = "dog.jpg" alt = "Чорно-біло-коричнева собака з надітим на неї хусткою"> Незважаючи на те, що він більшу частину часу спить, він дуже швидко ганяється за будь-якими птахами, яких бачить уві сні. < / p>

Демонстрація сатиричного зображення

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

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

Додавши властивість display до зображення і встановивши його значення як block ми змусимо зображення бути блоковим елементом. Це відображає зображення на окремому рядку, що дозволяє навколишнього вмісту розташовуватися вище і нижче зображення.

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; }

Демонстрація обтічного зображення

Коли використовувати зображення замість фонової картинки

Є два основних способи додавання зображення на веб-сторінку. Описаний тут спосіб - це використання елемента <img> в HTML. Інший спосіб полягає в застосуванні властивості background або background-image в CSS і призначення фонового зображення для елемента. Обидва варіанти виконують свою роботу, але у кожного є свої конкретні області застосування.

Елемент <img> в HTML є кращим варіантом, коли зображення має зберігати смислове значення і має відношення до змісту сторінки.

Властивість background або background-image в CSS є кращим варіантом, коли зображення використовується як частина дизайну або інтерфейсу на сторінці. Як таке, воно безпосередньо не пов'язане зі змістом сторінки.

Елемент <img> є досить популярним і коли був спочатку доданий в специфікацію HTML, то назавжди змінив шлях створення сайтів.

На практиці

Тепер, коли ми знаємо як додати і позиціонувати зображення на сторінці, давайте поглянемо на наш сайт 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 для нашого першого тізера зі спікерами буде виглядати наступним чином:

    <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> для мене як спікера буде виглядати наступним чином:

    <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> вимагає відкриває і закриває теги, які ми обговоримо найближчим часом.

<Audio src = "jazz.ogg"> </ audio>

Атрибути <audio>

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

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

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

<Audio src = "jazz.ogg" autoplay> </ audio>

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

<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, вкладений в елемент <audio>, щоб визначити новий исходник.

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

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

<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. Це гарантує, що відео не опиниться занадто великим і залишиться в межах макета сторінки. Крім того, завдання розміру як і з зображеннями допомагає браузеру відображати відео швидше і дозволяє виділити належне місце, необхідне для показу відео.

<Video src = "earth.ogv" controls> </ video>

Налаштування управління аудіо і відео

За замовчуванням, управління в елементах <audio> і <video> визначаються кожним браузером самостійно. Залежно від дизайну сайту, може знадобитися більше влади над зовнішнім виглядом медіаплеєра. В цьому випадку плеєр може бути модифікований, але для роботи буде потрібно трохи JavaScript.

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

Атрибут poster

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

<Video src = "earth.ogv" controls poster = "earth-video-screenshot.jpg"> </ video>

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

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

<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 . Ці сайти відеохостингу дозволяють завантажити наші відео, надають стандартний відеоплеєр і можливість впровадити відео на сторінку за допомогою вбудованого фрейма.

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

Підтримка браузерів для елементів <audio> і <video> змінюється, як і формати файлів, необхідних для цих елементів. У кожного браузера є свої власні бажані формати аудіо і відеофайлів.

Існує кілька інструментів, які допомагають перетворити аудіо або відео в інші формати і швидкий пошук дає достаток варіантів.

Додавання вбудованих фреймів

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

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

<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> це дозволяє стилям для сторінки з елементом <iframe> успадковуватися сторінці всередині елемента <iframe>. Крім того, атрибут seamless дозволяє посиланнях, натискує на сторінці всередині <iframe>, відкриватися в тому ж вікні, що і вихідна сторінки, яка містить елемент <iframe>.

<Iframe src = "contact.html" seamless> </ iframe>

Атрибут seamless є новим атрибутом представленим в HTML5. Хоча підтримка браузерів для цього атрибута росте, він не буде працювати в старих браузерах. Рекомендуємо перевірити атрибут seamless перед його використанням.

На практиці

Вбудовані фрейми пропонують відмінний спосіб додавання динамічного вмісту на сторінку. Дозволимо їм вистрілити і оновимо нашу сторінку «Місце проведення» деякими картами.

  1. Перед додаванням будь-яких карт або вбудованих фреймів давайте спочатку підготуємо нашу сторінку для сітки з двох колонок. Нижче розділу зі вступом ми додамо елемент <section> з класом row, щоб визначити новий розділ сторінки і включити деякі загальні стилі, такі як білий фон і вертикальний padding.

    Безпосередньо всередині цього елемента <section> додамо елемент <div> з класом grid. Клас grid вирівнює наш контент по центру сторінки і готується супроводжувати колонки 1/3 і 2/3.

    Поки головний розділ нашого файлу venue.html виглядає наступним чином:

    <Section class = "row"> <div class = "grid"> ... </ div> </ section>

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

    Наш HTML повинен виглядати так:

    <Section class = "row"> <div class = "grid"> <section class = "venue-theatre"> ... </ section> <section class = "venue-hotel"> ... </ section> </ div> </ section>
  3. Тепер у нас є кілька класів для роботи, давайте створимо новий розділ в нашому файлі main.css для стилів сторінки «Місце проведення». Ми додамо нижній margin 66 пікселів до елементу <section> з класом venue-theatre, щоб вставити деякий простір між ним і елементом <section> нижче.

    Потім ми додамо 22-піксельний margin внизу елемента <section> з класом venue-hotel, щоб забезпечити деякий простір між ним і елементом <footer> нижче.

    Новий розділ в файлі main.css виглядає наступним чином:

    / * ======================================== Місце проведення ====== ================================== * / .venue-theatre {margin-bottom: 66px; } .Venue-hotel {margin-bottom: 22px; }

    У елемента <section> з класом venue-hotel нижній margin менше, ніж у елемента <section> з класом venue-theatre, тому що він є сусідами з нижнім padding від елемента <section> з класом row. Спільне додавання margin і padding дасть нам те ж значення, що і нижній margin для елемента <section> з класом venue-theatre.

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

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

    В цілому, наш HTML для колонок виглядає наступним чином:

    <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 виглядає наступним чином:

    <Section class = "venue-theatre"> <div class = "col-1-3"> <h2> Chicago Theatre </ h2> <p> 175 N State St <br> Chicago, IL 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 Maps . Після того, як знайдемо адресу і створимо персональну карту, у нас є можливість вставити цю карту на нашу сторінку. Дотримуйтесь інструкцій на Google Maps про те як впровадити карту і отримати HTML для елемента <iframe>.

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

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

    Дивлячись прямо на <section> з класом venue-theatre, HTML виглядає наступним чином:

    <Section class = "venue-theatre"> <div class = "col-1-3"> <h2> Chicago Theatre </ h2> <p> 175 N State St <br> Chicago, IL 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 Maps, однакової висоти. Щоб зробити це, ми створимо новий клас venue-map і застосуємо його до кожного елементу <iframe> поряд з існуючим класом col-2-3.

    HTML для елемента <section> з класом venue-theatre тепер виглядає наступним чином:

    <Section class = "venue-theatre"> <div class = "col-1-3"> <h2> Chicago Theatre </ h2> <p> 175 N State St <br> Chicago, IL 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>

    Після того, як клас venue-map застосовується до кожного елементу <iframe>, давайте створимо набір правил для цього класу в нашому файлі main.css. Він включає в себе властивість height зі значенням 264 пікселів.

    Набір правил для класу venue-map виглядає так:

    .venue-map {height: 264px; }

Тепер у нас є сторінка з місцем проведення, в комплекті з картами для різних місць нашої конференції.

Мал. 9.04. Наша сторінка «Місце проведення» тепер включає вбудовані фрейми

Демонстрація і вихідний код

Нижче ви можете переглянути сайт Styles Conference в його нинішньому стані, а також завантажити вихідний код сайту на даний момент.

Перегляд сайту Styles Conference або Завантажити вихідний код

Семантичне визначення figure і figcaption

З HTML5 також прийшли елементи <figure> і <figcaption>. ці елементи були створені для семантичної розмітки самостійного вмісту або медіа-контенту, зазвичай з заголовком. До HTML5 це часто робилося за допомогою нумерованого списку і хоча такий список працював, розмітка була семантично невірною.

<Figure>

Блоковий елемент <figure> застосовується для ідентифікації та охоплення незалежного вмісту, часто у вигляді медіа-контенту. Він може оточувати зображення, аудіо, відео, блоки коду, діаграми, малюнки або інший самостійний медіа-контент. Усередині <figure> одночасно може міститися більше одного незалежного вмісту, на кшталт декількох зображень і відео. Якщо елемент <figure> переміщається з основної частини сторінки в інше місце (наприклад, вниз сторінки), це не повинно порушувати вміст або читабельність сторінки.

<Figure> <img src = "dog.jpg" alt = "Чорно-біло-коричнева собака з надітим на неї хусткою"> </ figure>

Демонстрація <figure>

<Figcaption>

Щоб додати підпис або пояснення до елементу <figure> застосовується елемент <figcaption>. Елемент <figcaption> може з'явитися вгорі, внизу або десь ще в елементі <figure>, але тільки один раз. Під час використання елемент <figcaption> служить заголовком для всього контенту всередині елемента <figure>.

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

<Figure> <img src = "dog.jpg"> <figcaption> Красива чорно-біло-коричнева дворняга з надітим на неї хусткою. </ Figcaption> </ figure>

Демонстрація <figcaption>

Не всякий тип медіа-контенту повинен бути включений в елемент <figure> або включати <figcaption>. Тільки той, який є незалежним і відноситься до однієї групи.

резюме

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

У цьому уроці ми розглянули наступне:

  • кращі способи додавання на сторінку зображення, аудіо- та відео і вбудованих фреймів;
  • різні способи позиціонування зображень в різних ситуаціях; як забезпечити альтернативу аудіо і відео для старих браузерів;
  • типові атрибути, доступні для аудіо та відео;
  • атрибут seamless, який дозволяє нам зробити поведінку вбудованих фреймів так, ніби вони є частиною сторінки, з якої вони викликаються;
  • семантичний спосіб розмітити незалежне вміст, в тому числі медіа-контент.

Ми виходимо на фінішну пряму в вивченні HTML і CSS, залишилося тільки уявити кілька компонент. Наступними за списком йдуть форми.

Ресурси і посилання

Автор і редактори

Автор: Шей Хоу

Остання зміна: 11.08.2018

Редактори: Влад Мержевіч

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

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

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация: