Вставка изображения

ЗАДАНИЕ. Вставка рисунка и изменение его расположения на странице

1. Откройте Photoshop, создайте новый рисунок (Файл /Новый), размер 9090 пикс.

Потом залейте рисунок фоновым цветом (например, зеленым). Кистью нанесите на фон любой рисунок. Сохраните рисунок под именем рис1.gif.

2. Откройте 1.htm в Блокноте. Между <body>..</body> всё удалите и:

 Введите 4-5 строк текста (можно 4-5 строк любых букв с пробелами).

 Щелкните в начало текста, введите тег <img src="рис1.gif" align="bottom">

 Сохраните документ под именем рисунок.htm

3. Откройте в браузере Internet Explorer файл рисунок.htm. Заметьте, как сейчас рисунок расположен относительно текста?

4. Вернитесь в Блокнот и измените значение атрибута align="top". Сохраните файл под тем же именем. Вернитесь в Internet Explorer и щелкните Обновить. Как изменилось расположение рисунка с атрибутом "top"?

5. Вернитесь в Блокнот и измените значение атрибута align="right". Сохраните файл под тем же именем. Вернитесь в Internet Explorer и щелкните Обновить. Как изменилось расположение рисунка с атрибутом "right"?

6. Вернитесь в Блокнот и добавьте в тег <img> (в конец записи) атрибуты hspace=40 vspace=20. Сохраните файл под тем же именем.

В Internet Explorer щелкните Обновить. Как изменилось положение рисунка?

ВЫВОД: тэг для вставки рисунка в текст – <img src="рис.ext">.

Если точка вставки находится за пределами абзаца (рисунок стоит на строке один, без текста), то этот тэг ещё окружается тэгами абзаца <p>..</p>

Для настройки рисунка тэг может иметь атрибуты:

а) Для задания выравнивания рисунка (Align) к тэгу вставки рисунка добавляют атрибут выравнивания align=.. После знака = указывают значение, как выровнять рисунок (по низу строки - bottom, по верху абзаца - top, справа от абзаца - right или слева - left). Так, тэг для рисунка, выровненного по левому краю страницы, таков: <img src="makaka. gif" align=left>

(подробнее с примерами – см. в Главе 6).

б) Для задания обводки рисунка рамкой (Border) толщиной в n пикселей к тэгу добавится атрибут border=n. Например, тэг для рисунка c рамкой толщиной 3 пикселя, таков: <img src="makaka. gif" border=3>

в) Для вставки сверху и снизу от рисунка свободного пространства шириной в n пикселей к тэгу добавится атрибут vspace=n. Например: <img src="makaka. gif" vspace=5>

Аналогично, для вставки слева и справа от рисунка свободного пространства шириной в n пикселей к тэгу добавится атрибут hspace=n.

г) Для задания ширины рисунка в n пикселей к тэгу добавится атрибут width=n. Например, <img src="makaka. gif" width=30> Аналогично, для задания высоты рисунка в n пикселей к тэгу добавится атрибут height=n.

д) Для добавления комментария к рисунку к тэгу добавится атрибут alt="комментарий". Пример: <img src="makaka. gif" alt="obezjana">

Зачем? Рисунки занимают большой объем памяти (в сравнении с текстом), поэтому их пересылка по сети занимает больше времени. Пользователь может отказаться от их просмотра, ведь часто рисунки просто оформляют web-страницы (а некоторые программы просмотра html-документов работают в текстовом режиме, не могут отображать графику). Тогда программы просто отмечают словом-комментарием (или иконкой) те места в документах, где должна находиться графика.