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