HTML5 & CSS3

Импорт внешних виджетов

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

★ Повторить пройденное
★ Научиться добавлять карту
★ Научиться добавлять видеоплеер
★ Научиться добавлять музыку
★ Научиться добавлять “листалку” документов
★ Расширить функционал своего блога :)
 Виджет карты
1. Перейдите по адресу:
https://www.google.ru/maps
 Виджет карты
2. Выберите нужный объект на карте и нажмите
значок “Поделиться” в открывшейся панели.
 Виджет карты
3. Выберите пункт “встраивание карт”
 Виджет карты
4. Выберите размер карты и скопируйте код.
Теперь его можно вставить в ваш HTML-документ.
 Что нам сегодня предстоит?
Цель занятия: научиться добавлять на сайт интерактивные
элементы без их самостоятельного программирования.

★ Повторить пройденное
★ Научиться добавлять карту
★ Научиться добавлять видеоплеер
★ Научиться добавлять музыку
★ Научиться добавлять “листалку” документов
★ Расширить функционал своего блога :)
 Виджет видео
1. Перейдите на сайт
https://www.youtube.com
 Виджет видео
2. Откройте нужное вам видео и внизу увидите
кнопку “Поделиться”. Нажмите на неё.
 Виджет видео
3. После чего необходимо сделать клик по
иконке “Встроить”
 Виджет видео
4. Выберите с начала или нет вам необходим
запуск видео.
 Виджет видео
5. Также есть
дополнительные настройки,
выберите нужные вам и
поставьте галочки напротив
этих пунктов.

Всё! Скопируйте код и

вставьте в HTML-документ.
 Что нам сегодня предстоит?
Цель занятия: научиться добавлять на сайт интерактивные
элементы без их самостоятельного программирования.

★ Повторить пройденное
★ Научиться добавлять карту
★ Научиться добавлять видеоплеер
★ Научиться добавлять музыку
★ Научиться добавлять “листалку” документов
★ Расширить функционал своего блога :)
 Виджет ЯМузыки
1. Перейдите на сайт
https://music.yandex.ru/home
 Виджет ЯМузыки
2. Выберите композицию которая вам больше по душе и
воспроизведите её.
 Виджет ЯМузыки
3. Теперь сделайте клик по третьей иконке -
поделиться.
 Виджет ЯМузыки
4. Осталось выполнить
клик по кнопке “HTML-
код”, выбрать нужные
параметры и
скопировать код себе в
документ.
 Что нам сегодня предстоит?
Цель занятия: научиться добавлять на сайт интерактивные
элементы без их самостоятельного программирования.

★ Повторить пройденное
★ Научиться добавлять карту
★ Научиться добавлять видеоплеер
★ Научиться добавлять музыку
★ Научиться добавлять “листалку” документов
★ Расширить функционал своего блога :)
 Виджет документов
1. Перейдите на сайт
https://ru.scribd.com/upload-document
 Виджет документов
2. Делаем клик по зеленой
кнопке.
Далее выбираем нужный PDF файл
и загружаем его в систему. (если
появляется окно с предложением
о регистрации - закрываем его!)
 Виджет документов
3. Обязательно указываем название и описание
документа и кликаем на кнопку Done.
 Виджет документов
4. Видим что всё успешно и кликаем на кнопку
EMBED.
 Виджет документов
5. В открывшемся окне делаем
следующие настройки:

A. Формат - HTML
B. Размер - 600х800 (стандарт)
C. Убираем галочку с пункта
Include link
D. Остальное по вкусу :)
 Виджет документов
6. После копируем
сгенерированный код из верхней
части данного окна и вставляем
в свой HTML-документ.
 Что нам сегодня предстоит?
Цель занятия: научиться добавлять на сайт интерактивные
элементы без их самостоятельного программирования.

★ Повторить пройденное
★ Научиться добавлять карту
★ Научиться добавлять видеоплеер
★ Научиться добавлять музыку
★ Научиться добавлять “листалку” документов
★ Расширить функционал своего блога :)
 Практика

Прокачайся виджетами
 Спасибо
за внимание :)
 Виджет документов
Откроем вам один секрет, с помощью этого
сервиса возможно размещать не только PDF
документы, но и PPTX-презентации.

Только учитывайте следующий факт:

презентация автоматически будет
переведена в PDF формат, и все анимации
аннулируются!