Вы находитесь на странице: 1из 29

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 формат, и все анимации
аннулируются!