Страница о Mozilla
==================

* Назад
* Обзор: Multimedia and embedding

В этом задании мы проверим ваши знания приёмов, рассмотренных в статьях этого модуля, через добавление изображений и видео на забавную страницу о Mozilla!

| Предпосылки: | Прежде чем приступить к этому заданию, вы должны проработать остальную часть модуля мультимедиа и встраивания. |
| --- | --- |
| Задача: | Для проверки знаний о встраивании изображений и видео в веб-страницы, фреймы и методы визуального восприятия HTML. |

Отправная точка
---------------

Для начала этого задания скачайте все HTML файлы и изображения, доступные на github(mdn-splash-page-start). Сохраните содержимое index.html в файле с именем `index.html` на вашем диске в новой папке. Затем сохраните pattern.png в той же папке (правый клик на изображении для выбора опции сохранения).

Сохраните изображения из папки originals тем же способом; возможно вы захотите сохранить их в другой папке пока не обработаете (некоторые из них) с помощью графического редактора.

**Примечание:** Приведённый для примера HTML файл содержит довольно много CSS для стилизации страницы. Вам не нужно изменять CSS, только HTML внутри `<body>` элемента — пока вы используете корректную разметку, CSS будет придавать правильный внешний вид.

Описание проекта
----------------

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

### Подготовка изображений

Используя ваш любимый редактор изображений, создайте версии шириной 400px и 120px, следующих изображений:

* `firefox_logo-only_RGB.png`
* `firefox-addons.jpg`
* `mozilla-dinosaur-head.png`

Назовите их как-нибудь разумно, например `firefoxlogo400.png` и `firefoxlogo120.png`.

Вместе с `mdn.svg`, эти изображения будут иконками для ссылок на другие ресурсы внутри секции `further-info`. Вы также дадите ссылку на логотип Firefox в шапке сайта. Сохраните все копии внутри той же папки, что и `index.html`.

Затем создайте фоновую версию `red-panda.jpg` шириной 1200px и портретную версию шириной 600px, которая показывает панду более крупным планом. Снова назовите их разумно, чтобы легко распознавать их. Сохраните обе копии внутри той же папки, что и `index.html`.

**Примечание:** Следует обрабатывать JPG и PNG изображения, чтобы делать их как можно меньше по весу, при сохранении хорошего вида. tinypng.com - отличный сервис для этого.

### Добавление логотипа в шапку

Добавьте внутрь элемента `<header>` элемент `<img>`, который вставит уменьшенную версию логотипа Firefox в шапку.

### Добавление видео к основному содержанию статьи

Внутри элемента `<article>` (сразу после открывающего тэга), вставьте ролик с YouTube по ссылке https://www.youtube.com/watch?v=ojcNcvb1olg, используя подходящие инструменты YouTube для генерации кода. Видео должно быть 400px в ширину.

### Добавление отзывчивых изображений к ссылкам с доп. информацией

Внутри `<div>` с классом `further-info` вы найдёте четыре элемента `<a>` — каждый из которых ссылается на интересную страницу, связанную с Mozilla. Для завершения этой секции вам необходимо поместить элемент `<img>` внутрь каждого элемента `<a>` дополнив подходящими атрибутами `src`, `alt`, `srcset` и `sizes`.

В каждом случае (кроме одного - какой из них по сути отзывчивый?) мы хотим, чтобы браузер использовал изображение шириной 120px , когда экран меньше или равен 480px, либо шириной 400px в других случаях.

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

**Примечание:** Для проверки правильности работы `srcset`/`sizes` , вам нужно загрузить ваш сайт на сервер (используйте Github pages - простое и бесплатное решение). Затем вы сможете проверить правильность их работы используя инструменты разработчика в браузере, как описано в Responsive images: useful developer tools.

### Искусственно изменённая красная панда

Внутри элемента `<div>` с классом `red-panda`, мы хотим поместить элемент `<picture>` , который использует маленькое портретное изображение панды, если экран меньше или равен 600px, либо большое фоновое изображение.

Пример
------

Следующие скриншоты демонстрируют, как сайт-визитка выглядит, при правильной разметке, на широких и узких экранах.

![A wide shot of our example splash page](/ru/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page/wide-shot.png)

![A narrow shot of our example splash page](/ru/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page/narrow-shot.png)

Заключение
----------

Если вы выполняете это задание как часть организованного курса вам следует передать вашу работу учителю/наставнику для оценки. Если вы обучаетесь самостоятельно, то вы легко можете получить отметку в ветке форума этого упражнения, либо в IRC канале #mdn на Mozilla IRC. Сначала попробуйте выполнить упражнение - жульничеством ничего не добиться!

* Назад
* Обзор: Multimedia and embedding