Использование графических изображений в html-страницах

Для размещения на HTML-странице изображения используется тэг img который имеет следующий вид:

<img src="imagepath">

где imagepath – полное имя к файлу изображения (путь и имя).

Цель этой части работы - научиться размещать графические изображения в HTML-странице. Выполните нижеследующие задания:

1. Предположим, у Вас есть файл изображения mypicture.gif. Включите в HTML-страницу изображение:

<img src="mypicture.gif">

Заметим, что в этом случае файл mypicture.gif должен находиться в том же самом каталоге (папке), где находится Ваша страница MyHTMLPage.htm.

2. Загрузите страницу в браузер и посмотрите, что получилось.

3. Включите в HTML-страницу изображение, которая находится в специальном каталоге (папке) для файлов изображений. Обычно, такой каталог называется images и он является подкаталогом основного каталога, где находятся файлы страниц. Создайте такой каталог и включите в Вашу страницу следующий тэг:

<img src="images/mypicture.gif">

4. Загрузите страницу в браузер и посмотрите, что получилось.

5. Создайте каталог images2, который находится на том же уровне, что и каталог с Вашей страницей. Включите в Вашу страницу следующий тэг:

<img src="../images2/mypicture.gif">

6. Загрузите страницу в браузер и посмотрите, что получилось.

7. Измените размеры изображения, включенного в Вашу HTML-страницу:

<img src="mypicture.gif" width="x" height="y">,

где x – ширина изображения в пикселях, а y – высота изображения (также в пикселях).

8. Сделайте рамку вокруг изображения:

<img src="mypicture.gif" width="x" height="y" border="2">

Заметьте, что значение атрибута border есть толщина рамки.

9. Загрузите страницу в браузер и посмотрите, что получилось.

10. Запомните типичные ошибки, которые совершаются при использовании изображений в HTML-страницах:

• Неверное указание пути к файлу изображения

• Отсутствие файла изображения в правильно заданном каталоге.

• Использование имен в неправильном регистре (MyPicture.GIF вместо mypicture.gif).