Цель работы: изучить основные тэги для вставки изображений в html-документ и для их преобразования.
Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.
Теоретический материал:
<IMG SRC = “имя файла.jpg (gif, png)”>
<IMG SRC = “C:\Documents and Settings\User\ Мои документы\....jpg”>
<IMG SRC = “ имя файла. jpg (gif, png)” ALIGN = “RIGHT”> выравнивание по правому краю
<IMG SRC = “ имя файла. jpg (gif, png)” ALIGN = “LEFT”> выравнивание по левому краю
<IMG SRC = “ имя файла. jpg (gif, png)” ALIGN = “TOP”> выравнивание текста по верхней кромке изображения
<IMG SRC = “ имя файла. jpg (gif, png)” ALIGN = “BOTTOM”> выравнивание текста по левой кромке изображения
<IMG SRC = “ имя файла. jpg (gif, png)” ALIGN = “MIDDLE”> выравнивание текста по средней кромке изображения
<IMG SRC = “ имя файла. jpg (gif, png)” BORDER = “3”> обрамление графического объекта
<IMG SRC = “ имя файла. jpg (gif, png)” HSPACE = “30” VSPACE = “30”> вставка пустой области вокруг изображения
<IMG SRC = “ имя файла. jpg (gif, png)” WIDTH = “110” HEIGHT = “220”> изменение размера изображения
<EMBED SRC = “ имя файла. wav> вставка звуковых объектов
<EMBED SRC = “ имя файла. wav WIDTH = “ ” HEIGHT = “ ”> атрибуты для задания размеров экранных элементов
Ход работы:
Вставить изображение в текст:
выравнивание текста по верхнему краю рисунка
выравнивание текста по центру рисунка
выравнивание текста по нижнему краю рисунка
Использовать рамки вокруг рисунка:
рисунок без рамки
рамка 2 пикселя
рамка 5 пикселей
рамка 10 пикселей
Создать плавающие рисунки с обтекающим текстом вокруг них:
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
Изменить размеры изображения:
Без изменения размера
Параметр height=60
Параметр width=55
Не пропорциональное изменения размера: height=40 width=80
Создание плавающих рисунков с обтеканием текста вокруг них и отступом в 10 и 20 пикселей вокруг них
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
Вставить звук на страницу.
Сохранить этот документ под любым именем с расширением .htm в папке RABOCHLAB в директории HTMLLAB.
Листинг html-программы:
<HTML>
<HEAD>
<TITLE> Компьютер </TITLE>
</HEAD>
<BODY bgcolor='«#008080'>
<font face='Comic Sans Ms' color='blue'>
<H1 ALIGN = 'CENTER'> <u> Все о компьютере </u> </H1>
<font face='Monotype Corsiva' color='white' size=2> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</font> <br>
<font face='Arial' color='pink' size=2> Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. </font> <br>
Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и web-сайт состоит из компьютерных web-страниц. Сайт является интерактивым средством представления информации. Интерактивность сайта обеспечивают различные формы, с помощью которых посетитель сайта может
зарегестрироваться на сайте, заполнить анкету и так далее. Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы. Гиперссылки также имеются на других web-страницах сайта, что обеспечивает возможность пользователю свободно перемещаться по сайту. Web-сайты являются мультимедийными, так как кроме текста могут содержать иллюстрации, анимацию.</font>