Изображения на Web-странице

Тема урока: Изображения  на Web-странице.

Цели урока:  

Ø  Показать способы использования изображений на Web-странице;

Ø  Научить вставлять изображения.

Тип урока: изучение нового материала.

Вид урока: повторение, лекция, практикум.

Форма организации учебно-познавательной деятельности учащихся: фронтальная, индивидуальная.

Методы обучения:

Ø  словесные: рассказ, объяснение;

Ø  наглядные: методы иллюстрации;

Конспект урока.

Теоретическая часть

<IMG>

Элемент для создания ссылки на графический файл. Он не содержит конечного тэга – вся необходимая информация задается при помощи атрибутов. Этот элемент является универсальным: с его помощью можно использовать изображения  в гиперссылках, вставлять картинки в таблицы , просто размещать рисунки на Web-странице, решать задачи дизайна и т. д.

Необходимым атрибутом является  src ­– указатель на графический файл:

src=”путь к  файлу”

Пример: <IMG src=”foto.gif”> ,  если файл находится в той же папке, что Web-страничка.

Если графический файл находится в другой папке, то надо прописать весь путь до данного файла.

Пример: <IMG src=”image/foto.gif”>

Если графический файл и файл html находятся в разных папках одного уровня, то путь графического файла начинается со знака    ../

Пример: <IMG src=”../image/foto.gif”>

На случай, если у кого-то из пользователей  браузер не позволяет просматривать графику (или просмотр графики отключен ради ускорения загрузки страниц), полезно добавить также и параметр

alt=”[текст комментария]”,

 который в подобной ситуации  будет выводить заданную текстовую строку вместо рисунка. Эта же строка комментария выводится и при наведении на рисунок курсора  мыши в качестве «всплывающей подсказки».

Пример: <IMG src=”foto.gif” alt=”фото автора”>

Высоту и ширину области, в которой демонстрируется рисунок, задают при помощи атрибутов

height – высота и

width – ширина.

В  том случае, когда задается один из этих атрибутов, рисунок масштабируется таким образом, чтобы его высота или ширина соответствовали заданной.  Второй размер устанавливается  автоматически, в соответствующей пропорции. Таким образом, применение только одного из атрибутов изменяет оба размера рисунка. Если задать явным образом оба атрибута, то рисунок будет масштабироваться по двум осям в соответствии с заданным размером. Масштабирование, как правило, ухудшает качество изображения.

Пример: <IMG src=” soccer.gif”  width =”200” alt=”футбольный мяч”>

Пример: <IMG src=” soccer.gif” height=”100”  width =”200” alt=”футбольный мяч”>

Скомбинировать рисунок с текстом тоже несложно.

Пер­вый способ — вставка картинки отдельно между абзацами текста, для чего надо заключить тэг <IMG> в обособленный контейнер <Р>. . .</Р>. Уже знакомый нам параметр ALIGN служит здесь для центрирования рисунка на странице (зна­чения LEFT и RIGHT передвинули бы рисунок к левому или правому краю окна браузера, соответственно).

 Пример:

<Н1  ALIGN=CENTER><B> 3имняя   сказка</В></Н1>

<Р  ALIGN=CENTER><IMG  SRC=”winter.gif"  ALT="Зима  в  лесу"</Р>

Второй способ — выполнение оборки («обтекания») ри­сунка текстом. Для этого служит уже знакомый нам пара­метр align, но уже входящий в состав тэга <IMG>. Его значе­ние может быть равным LEFT (тогда рисунок выравнивается по левому краю, а текст обтекает его справа) или RIGHT (ри­сунок справа, текст слева).

Пример

Домашнее задание: учебник п.3.7.4.

Практическая часть

Создать интернет-страницу по предложенному образцу (образец выдается в электронном виде виде). Все необходимые файлы находятся в папке  для учеников. Сохранить в личной папке под именем  pic.html