Задание 7.

На Web-страницах могут размещаться графические файлы в трех форматов GIF, JPG, PNG. Если рисунок сохранен в другом формате, то его необходимо преобразовать в один из выше указанных форматов с помощью графического редактора.

Для вставки изображения используется тэг <IMG> с атрибутом SRC, который указывает на место хранения файла на локальном  компьютере или в Интернете. Если графический файл находится на локальном компьютере в том же каталоге, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла:

 <img src=”computer.gif”>

 Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе

 <img  src="C:\windows\system\images\ball.gif">

 Изменить размер изображения можно при помощи атрибутов width (ширина), height (высота). Значения этих атрибутов определяют ширину и высоту изображения на Web-странице в пикселах.

 <img src=”computer.gif” width=95 height=95 >

Альтернативный текст (замещающий) задается в тэге <img> значением специального атрибута ALT

<img  src="C:\windows\system\images\ball.gif" alt="Компьютер”>

Атрибут TITLE предоставляет дополнительную информацию о картинке, текст, внесенный в атрибут title, показывается при наведении курсора мышки на картинку.

<img  src="C:\windows\system\images\ball.gif" alt="Компьютер” title="Персональный компьютер">

Значение атрибутов ALT и TITLE  должно быть разным.

Расположить рисунок  относительно текста различным образом позволяет атрибут ALIGN тэга <IMG>, который может принимать пять различных значений:

TOP (верхняя линия строки текста выравнивается по верху рисунка),

BOTTOM (нижняя линия строки текста выравнивается по нижнему краю рисунка),

MIDDLE или CENTER(строка текста выравнивается посередине рисунка), 

RIGHT(рисунок расположен справа от текста),

LEFT(рисунок расположен слева от текста).

Для улучшения внешнего вида страницы с иллюстрациями  дополнительно можно использовать в тэге <img> параметры

BORDER (рамка черного цвета вокруг иллюстрации, в качестве значения параметра указывается толщина в пикселях),

HSPACE (поля слева и справа от рисунка) и VSPACE (поля сверху и снизу от рисунка). В качестве значений двух последних параметров также указываются размеры в пикселях.

Например:  <img src=”computer.gif”  width=95 height=95  align=top border=2 hspace=20>

Практическая работа

Перед выполнением работы создайте папку со своей фамилией, скопируйте в нее необходимые графические файлы для работы, создаваемые web-страницы сохраняйте в свою папку.

После выполнения задания, заархивируйте свою папку и отправьте архивированный файл на проверку. 

Задание 1.

Создайте страницу задание1.html по образцу

 

Ключ к выполнению:

  • Изображение логотипа находится в файле «Логотип.gif» 
  • Фоном данной Web-страницы  сделайте рисунок «Фон.gif».

Примечание:

Рисунок можно использовать в виде фона страницы, для этого служит атрибут BACKGROUND тега <BODY> 

 <body background="Сказка.gif">

Если еще необходимо добавить цвет фоновой страницы, то используют атрибут BGCOLOR="цвет"

<body background="Сказка.gif" bgcolor="pink">

Задание 2.

Создайте страницу задание2.html по образцу, для работы необходим файл «Мышь.gif»

Задание 3.

Создайте web-страницу задание3.html со следующим содержанием.


Ключ к выполнению:

Файлы для работы sk1.jpgsk2.jpg

1. Название  Web-страницы «Скульптуры»

2. Установите цвет фона страницы – cornsilk

3. Заголовок в содержании Web-страницы (заголовок 1 уровня, выровнен по центру, цвет текста – broun)

4. Рисунок (sk1.jpg, выровнен по правому краю, замещающий текст К.Растрелли, всплывающий текст К.Растрелли. Портрет неизвестного ширина 203, высота 240 пикселей, рамка черного цвета вокруг иллюстрации 2 пикселя, поля сверху и снизу от рисунка 20,  поля справа и слева 30 пикселей)

5. 1 абзац  (выровнен по ширине,  цвет – broun, размер 3)

6. Рисунок (sk2.jpg, выровнен по левому краю, замещающий текст Чижов, всплывающий текст Чижов. Крестьянин в беде, высота изображения 240, ширина 173 пикселя, рамка черного цвета вокруг иллюстрации 2 пикселя, поля сверху и снизу от рисунка 5,  поля справа и слева 30 пикселей)

7. Осуществите вынужденное прерывание строки 2 раза.

8. 2 абзац (выровнен по ширине, цвет текста broun, размер 3)

9. Слова Скульптура, Портрет (вначале абзацев) начертание полужирное, цвет текста – синий, размер 5.