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

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; просмотров: 949;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.006 сек.