4 Внеурочные занятия 8 класс. Добавление изображения на страницу HTML
презентация к уроку (8 класс)

Слайд 1

Добавление изображения на страницу html < img src =“…”> Выполнила: Шалагина Екатерина Алексеевна Внеурочные занятия для 8 класса ГБОУ гимназия №293 Санкт-Петербург, 2020

Слайд 2

изображение для веб-страницы. Прежде чем добавлять изображение на страницу, необходимо его подобрать. Удобнее всего сохранить изображение в тот же каталог, где находится файл HTML- страницы. Например, создадим страничку общества по защите носорогов ( м ожете выбрать другое животное). Изображение должно быть в формате GIF, PNG или JPEG . ЗАДАНИЕ1. Найти в интернете симпатичное изображения по тематике страницы. Сохранить его в папке с вашей HTML- страничкой, переименовать так, чтобы имя файла было короткое и английскими буквами. Чтобы изображение выгодно смотрелось в шапке нашей странице, лучше выбрать невысокую и широкую картинку . Или воспользоваться графическим редактором и обрезать до подходящего размера. r hino.jpg

Слайд 3

Добавление изображения на веб-страницу. Для добавления изображения в документ применяется тег < img > Это непарный тег (не требуется закрывающая часть ) У этого тега есть обязательный атрибут src , который определяет путь к графическому файлу. Также для тега < img > необходимо указать обязательный атрибут alt , он описывает альтернативный текст видимый в процессе загрузки изображения или при отключении картинок в браузере. Чтобы установить размер изображения, добавляются атрибуты: width или height , причем величину ширины и длины можно указывать как в абсолютных значениях (пикселях, например), так и в относительных единицах – процентах от величины экрана. В нашем примере строка кода для добавления картинки будет выглядеть так: < img src =“rhino.jpg” alt=“black rhino” width=“100%”/>

Слайд 4

Добавление изображения на веб-страницу. ЗАДАНИЕ2. Попробуйте самостоятельно написать код, в результате которого будет отображаться такая страница: (в случае затруднений воспользуйтесь кодом со следующего слайда)

Слайд 5

HTML- код страницы ЗАДАНИЕ3. Добавить внутрь тега еще один тег изображения. В атрибуте SRC указать вымышленное имя файла, которого нет в папке, обязательно прописать атрибут ALT=“image2”. Сохранить изменения, открыть страницу в браузере и выяснить, что же будет отображено. Результат в виде скрин-шота прислать в беседе или личным сообщением.

Слайд 6

Дополнительное задание Найти, сохранить в рабочей папке еще одно изображение по теме сайта (можно выбрать векторное ), добавить его на страницу, выставить размер по ширине 100 px ( атрибут width=“100”) и выровнять по центру (для выравнивания изображения добавить атрибут ALIGN=“center” ). Сохранить изменения, обновить страницу в браузере. Результат в виде скрин-шота прислать в беседе или личным сообщением.