Веб-дизайн. А класс 02.12.2020. Тема: Форматы изображений используемых в Интернете, их особенности. Размещение и выравнивание изображений на веб-страницах. Изображения и карты ссылок. Создание и размещение на сайтах gif-анимации.. Повторение. Web-страницы

Веб-дизайн

11-А класс 02.12.2020

Тема: Форматы изображений используемых в Интернете, их особенности. Размещение и выравнивание изображений на веб-страницах. Изображения и карты ссылок. Создание и размещение на сайтах gif-анимации.

Задание.Изучите материал урока. Запишите краткий конспект урока. Выполните практические задания №1-2. Полученные файлы вышлите на почту учителю указав в теме Веб-дизайн_Дата урока за который выполняется задание_Изображения_HTML_Ваша фамилия и имя_класс.

Адрес почты: distancia101@gmail.com

Видеоматериал к уроку:

1. Повторение. Web-страницы и Web-сайты. Структура Web-страницы

https://youtu.be/vcrE0UAnwLI

! Техника безопасности при работе с ПК:

ü Будьте внимательны, осторожны.

ü Не трогайте провода.

ü Не касайтесь мониторов руками.

ü Не пытайтесь самостоятельно устранить неполадки в компьютере.

ü Монитор должен быть на расстоянии не менее 60 см от глаз.

ü Каждые 5 минут старайтесь отрывать взгляд от экрана.

ü Делайте перерывы в работе, физкультминутки.

Новый материал.

1. Размещение изображения в HTML

Форматы изображений для размещения на сайте: .gif, .png-8, .png-24, .png-32 и .jpg (в случае необходимости размещения качественного фото)

Синтаксис:

img — строчный элемент с замещаемым контентом

Практическое задание №1:

1. Создайте свою папку с именем Изображения_HTML_Фамилия _Имя_класс.

2. Поместите в папке Изображения_HTML изображение myshi_2.gif.

3. В созданной папке создайте ещё одну папку с именем Веб-страница.

4. Создайте с помощью программы Блокнот, веб-страницу, листинг которой представлен ниже. Сохраните веб-страницу под именем Мышонок.html в папке Веб-страница.

5. Поместите в папке Веб-страница изображение myshi_1.gif

6. Просмотрите полученную веб-страницу.

Листинг страницы:

<html> Вставка изображений <body> <p><img src=" myshi_1.gif "> <p><img src="../myshi_2.gif"> <p><img src=" https://skazkidlyadetey.ru/wp-content/uploads/2018/03/pro-myshonka-iz-knizhonki-dzhanni-rodari-600x400.jpg "> </body></html>

Практическое задание №2:

1. Выполните практическое задание №1, заменив в нем изображения.

2. (Дополнительное задание). Самостоятельно подберите изображения и создайте свою веб-страницу с изображениями. Можно добавить на страницу свой текст.

12 Следующая ⇒