Носова О.В., 302 группа Предмет: информатика  Класс: 8  Тема: «Вставка изображений в Web­страницы» Ход урока I. Организационный момент. II. Актуализация знаний. Задание 1.  А) Назвать правильный путь к файлам аквариум.bmp, Катунь.jpeg, мелодия.mp3. Б) Записать на доске путь к файлам Онегин.doc, буква.txt, Бия.jpeg. В) выбрать правильно записанный путь к файлу цифры.doc. 1) E:/тексты/буква.txt 2) E\ тексты\буква.txt 3) E:\буква.txt 4) E:\ тексты\буква.txt Задание 2. (работа по карточкам) 1 вариант Установите соответствие между тегом  (атрибутом) и его назначением a) Изменение  6 2 вариант Дан скриншот Web­страницы.  Написать HTML­код, чтобы  получить данную страницу. 10 Установка связи старого и нового знания. Практическое задание. Открыть HTML­документ «задание_1.html» (на диске D в папке «Информатика 8»). В данном  документе необходимо: h) Переход на новую  i) Размер шрифта j) Горизонтальная  строку    установить размер шрифта = 16, изменить цвет заголовка, установить выравнивание заголовка по середине, линия 3 2 1.

2. 4 5 3. Color 4. Align 5.

6. 7. 8.
9. Size 10.

---

1 III. 9 8 7 размера шрифта  заголовков b) Изменение  параметров  c) форматирования  шрифта d) Выравнивание  текста e) Разделение текста  на абзацы f) Полужирное  начертание g) Начертание  курсив  заголовок от текста отделить горизонтальной чертой,       вставить изображение «рисунок1.     страницу   (проблемное задание).  Web  », которое находиться в этой же папке,  на     jpeg     ­ Дети приходят к выводу, что нужен специальный тег для вставки изображений. - Сегодня мы научимся вставлять рисунки на Web­страницы.  - Для чего нам нужно вставлять изображения на Web­страницы? Учащиеся самостоятельно знакомятся со вставкой изображений в Web­страницы с помощью  обучающей программы. 1 вариант Вставка изображений Для   вставки   изображения   на  Web­страницу используется тег  с неотъемлемым атрибутом SRC, который указывает на место хранения файла на локальном компьютере или Интернете. Задание 1.  Выберите  тег, который используется для вставки изображения на Web­страницу. А)  Б)  В)  Г)  Задание 2. Выберите атрибут тега  А) SRC Б) MPS В) STC Если   графический   файл   находится   на   локальном компьютере в той же папке, что и файл Web­страницы, то   в   качестве   значения   атрибута  SRC  достаточно указать только имя файла.  Например:  Если графический файл находится в другой папке на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе.  Например: Задание. Укажите верно записанное значение атрибута SRC, если изображение находится в другой папке на данном локальном компьютере. А)  Б)  В)  Если   графический     файл   находится   на   удаленном сервере в Интернете, то должен быть указан Интернет­ адрес этого файла.  Например: 2 вариант Вставка изображений Для   вставки   изображения   на  Web­страницу используется   тег     с   неотъемлемым атрибутом  SRC,   который   указывает   на   место хранения файла  на локальном  компьютере или Интернете. Если графический файл находится на локальном компьютере в той же папке, что и файл  Web­ страницы, то в качестве значения атрибута SRC достаточно указать только имя файла.  Например:  Если   графический   файл   находится   в   другой папке   на   данном   локальном   компьютере,   то значением   атрибута   должно   быть   полное   имя файла,   включая   путь   к   нему   в   иерархической файловой системе.  Например: Если   графический     файл   находится   на удаленном сервере в Интернете, то должен быть указан Интернет­адрес этого файла.  Например: Задание. Выберите верные записи. 1)Графический файл находится в той же папке, что и файл Web­страницы.   А)   Б)   В)   Г) 2)Графический файл находится в другой папке на данном локальном компьютере.   А)   Б)    В)   Г) Задание. Укажите верно записанное значение атрибута SRC,   если   изображение   находится   на   удаленном сервере в Интернете А)  Б)  В) Г)  После выполнения   –  практическое задание.  В папке находится   пустая  Web­страница   и   картинка «рисунок1.jpeg».   Необходимо   вставить   картинку   на Web­страницу. 3)Графический   файл   находится   на   удаленном сервере в Интернете.   А)   Б)    В)   Г) Если верно выполнены все задания, то переход к практике, если нет, то повторное ознакомление с теорией. Практическое задание. Создать HTML­документ и   вставить   картинку   «рисунок1.jpeg»   из указанной папки. Далее учитель рассказывает и показывает, как можно расположить рисунок относительно текста и  как вставить альтернативный текст. Действия учителя проектируются на экран. ­ Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN, который может принимать 5 различных значений:   TOP (верх),   MIDDLE (середина),   BOTTOM (низ),   LEFT (слева),   RIGHT (справа). Показывает.  ­Для того чтобы рисунок располагался по правому краю текста, тег вставки изображения должен принять  следующий вид: .  ­Для того чтобы рисунок располагался по левому краю текста, тег вставки изображения должен принять  следующий вид: .   (И так для top, bottom, middle). ­ Пользователи иногда, в целях экономии времени отключают в браузере загрузку графических  изображений и читают только тексты. Чтобы не терялся смысл страницы, вместо рисунка должен  выводиться альтернативный текст. Альтернативный текст выводится с помощью атрибута ALT, значением которого является текст,  поясняющий, что должен был бы увидеть пользователь на рисунке: < IMG SRC=”computer.gif” ALIGN=”right” ALT=”Компьютер”> Физминутка. IV. Осмысление новых знаний. Практическое задание (  проблемное  )  . Дана пустая Web­страница.  Необходимо вставить следующие изображения:    Zima.png  Vesna.gif  Leto.jpeg  Osen.psd. Для каждой картинки вставить стихотворение. Каждую картинку разместить по разному относительно  текста и вставить замещающий текст для каждой картинки. При выполнении задания возникает проблема, не все изображения отображаются на Web­странице. ­Какое изображение не отображается? ­Как вы думаете почему?  ­Обратите внимание на формат изображений? ­ Какой можно сделать вывод? Ответы: изображения не всех форматов можно размещать на Web­страницах. ­ Верно, на Web­страницы можно помещать изображения, хранящиеся в графических файлах трех  форматов – GIF, JPEG и PNG. Поменять формат изображения и доделать задание. V. Закрепление новых знаний. ­ Вы читали сказку «Общее счастье»? (Если не читали или плохо помнят, то учитель включает  мультфильм «Общее счастье» ) ­Чаще всего мы с вами желаем друг другу счастья. Мечтаем о счастье. А что это такое – счастье?  Каким оно бывает? Как его добиться? Как остаться счастливыми? Подумаем вместе над этими  вопросами, когда будем слушать сказку «Общее счастье».  Эта сказка передавалась из уст в уста, из поколения в поколение народами, живущими на Северном  Кавказе. После прослушивания вопросы. ­Согласен ли ты с тем, что счастье может быть только общим? ­Что бы спросил у Общего Счастья ты? ­Что ты делаешь для того, чтобы из вашей семьи не уходило счастье? ­Представь себе, что не было бы этого мудрого старика­ отца или он не смог бы вернуть Общее  счастье. Что бы тогда произошло? Задание. А сейчас, вам необходимо оформить страницу сказки, вставив сам текст сказки,   иллюстрации к сказке, написать заголовок. (Текст сказки и картинки находятся в папке). Сохранить  файл в папке «8 класс» под своей фамилией. VI. Домашнее задание. П.3.7.4, создать HTML­страницу «Моё резюме» (ФИО, фото, дата рождения и т.д.).  Проблемное: поменять цвет страницы резюме.  Учитель показывает пример готового резюме. VII. Рефлексия.  Оценить учащимися собственную учебную деятельность (самооценка).