ЗАДАНИЕ. Вставка рисунка и изменение его расположения на странице
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-документов работают в текстовом режиме, не могут отображать графику). Тогда программы просто отмечают словом-комментарием (или иконкой) те места в документах, где должна находиться графика.
Дата добавления: 2015-02-23; просмотров: 1006;