Изображения. Урок 6

Изображения
Изображения на web-странице играют как декоративную, так и информативную роль.
изображение

Практическая работа
Урок 6

Практическая работа
В папке 2_lesson на рабочем столе (названа своей фамилией) открываем через SublimeText файл photo.html:

Практическая работа
В папке images добавим изображения:

Практическая работа
Работаем со страницей photo.html
Необходимо добавить изображения.

Практическая работа
Работаем со страницей photo.html
Посмотреть результат в браузере.

Практическая работа
Добавим атрибут width=100%
Посмотреть результат в браузере.
Что изменилось?

Практическая работа
Добавим атрибут width=100%
Посмотреть результат в браузере.
Что изменилось?
Изменить значение на width=33%

Практическая работа
Если необходимо выровнять изображения по высоте, то применяем атрибут width=500px
Посмотреть результат в браузере.
Что изменилось?

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

Практическая работа
Создадим рамочки для изображений border=4

Создадим подписи к изображениям
Один из трюков в Паркуре

Самостоятельная работа
Самостоятельно создать гиперссылки изображений: щелчком по картинке осуществляется переход на новую страницу с большим изображением.
Должны быть созданы дополнительно несколько новых страниц.

Видео
Урок 5

Вставка видео
Видео хранится на собственном сервере: