В этом видео я расскажу вам, что такое встраиваемые элементы и как вставить сайт внутрь другого сайта. Итак, что такое встраиваемые элементы? Это элементы, при вставке которых они заменяются на какой-то контент (например, картинка). Для того чтобы вставить картинку, нужно использовать элемент img, и при помощи атрибута src указывается ссылка на эту картинку. Картинка может быть в формате JPEG, GIF, SVG, PNG — всё зависит от того, в каком браузере это отображать. Элемент title позволяет добавить подпись к картинке или её название. В качестве значения атрибута alt обычно указывается описание этой картинки, то есть что там изображено. В случае если картинка не загрузилась, то будет показан текст, который написан в атрибуте alt. Важно понимать: если нет никакой информации, относящейся к картинке, например, эта картинка является декоративной, то лучше всего оставить атрибут alt пустым, потому что если люди, используя Screen Reader, будут проходиться по картинкам, и в случае если атрибута alt не окажется, то Screen Reader начнёт прочитывать ссылку на картинку, что не очень хорошо. А если значение оставить пустым, то Screen Reader скажет, что данная картинка не имеет описания и не будет её прочитывать. Ниже по ссылке вы можете подробно прочитать об элементе img. Итак, вот у нас есть картинка, и в случае если эта картинка не загрузилась, то у нас показывается внутри текст, который является значением атрибута alt. У картинки также можно задавать размеры. Если мы зададим картинке только лишь ширину, то высота изменится пропорционально; если мы зададим только высоту, то ширина картинки изменится пропорционально. Если мы укажем значения «высота» и «ширина», то картинка изменит свои размеры так, как указано в этих атрибутах. Например, у нас есть картинка. Мы указываем ей ширину 300 пикселей — по высоте она изменилась пропорционально. Если мы указываем высоту в 300 пикселей, то ширина изменилась пропорционально. Если мы указываем оба значения, то картинка растянулась, то есть её размеры стали непропорциональными. Элемент iframe позволяет загружать в область любые другие независимые документы. Например, у нас есть некая страница. Мы добавляем внутрь элемент iframe и в качестве значения src указываем ссылку на какой-то другой документ. Также этому элементу можно указать атрибуты «ширина» и «высота». В браузере это будет выглядеть как-то вот так, то есть внутрь страницы мы вставили другой документ (в данном случае сайт [НЕРАЗБОРЧИВО]). В HTML5 можно вставлять видео прямо на страницу. Для этого можно использовать элемент video и в качестве значения атрибута src можно указать ссылку на внешний ресурс. Также можно при помощи атрибутов height и width указать высоту и ширину соответственно. Но не всё так просто. Не каждый браузер поддерживает все форматы, поэтому ниже по ссылке можно посмотреть, какой браузер какие форматы поддерживает. И для того чтобы указать несколько форматов для одного видео, можно внутри элемента video указать элементы source и в качестве значения атрибута src указать ссылки на другие форматы видео (например, MP4 и OGV). В случае если элемент не поддерживается браузером, то можно внутрь элемента записать текст и ссылку, для того чтобы скачать видео и посмотреть. Также можно указать в качестве дополнительных атрибутов к видео ссылку на постер, то есть картинку, которая будет показываться перед тем, как человек нажмёт на Play, и указать controls, то есть элементы управления: включить/ выключить autoplay и включить зацикленное видео при помощи атрибута loop. Вот так это выглядит в браузере Chromium. Как правило, каждый браузер может по-своему отображать элементы управления. В данном случае у видео установлен постер, и при помощи элементов управления внизу можно сделать во весь экран, изменить уровень звука и перемотать на нужный момент. Элемент audio позволяет вставить аудио на страницу. Также при помощи атрибута src можно указать ссылку на ресурс и при помощи атрибута controls можно либо включить, либо выключить показ элементов управления. Так же, как с элементом видео, не каждый браузер поддерживает все форматы. По ссылке можно перейти посмотреть, какие браузеры какие форматы поддерживают. Для того чтобы указать несколько форматов по аналогии с элементом видео, можно указать внутри в качестве элементов source ссылки на другие форматы. Ну и также, если элемент аудио не поддерживается, можно добавить текст и ссылку, для того чтобы скачать и прослушать аудиотрек. Вот так это выглядит в браузере Chromium, то есть у нас есть controls для управления и больше ничего. Элемент track позволяет добавлять текстовые дорожки к элементу video. Внутри элемента video мы добавляем элементы track, указывая, какой тип дорожки (например, это субтитры). Также можно указать, на каком языке (например, srclang = "en"), то есть эти субтитры — на английском. И в качестве значения атрибута label указываем название звуковой дорожки. Например, если это язык английский, то можно написать слово english, и, соответственно, это будет английская дорожка; и можно указать также русскую дорожку, указав в качестве значения в качестве значения атрибута srclang "ru", и в качестве значения label слово «русский». И можно указать атрибут default — по умолчанию будет выбрана эта дорожка. Вот так это выглядит в браузере, то есть появляется дополнительный элемент CC, при нажатии на который появляется список доступных дорожек, и по умолчанию выбрана русская. Если мы воспроизведём это видео, то увидим, что внизу появляются текстовые надписи, которые задаются в файле vtt. Это такой специальный формат для текстовых дорожек, и подробней можно почитать по ссылке. В этом видео вы узнали, как добавить на страницу картинку, видео или аудиозапись. В следующем видео я расскажу вам об элементах формы.
