Вставка изображений

Особенностью графики в Web-дизайне является то, что обычно она соседствует с текстовой информацией и элементами интерфейса (кнопками, переключателями и т.п.). Это соседство приходится учитывать при создании изображений. Основное назначение графики в том, чтобы привлечь внимание к Web-странице в целом или к отдельным ее фрагментам, а также представить информацию, которую словами не опишешь. Таким образом, графика используется для оформления страницы и для представления информации (иллюстраций).

Существуют два основных способа вставки графических изображений из файлов в HTML–документ:

§ Вставка отдельных графических изображений;

§ Заполнение фона всего документа графическим изображением.

<img> - тег позволяющий вставлять на страницу изображения из файла графического формата с указанием адреса файла в качестве значения обязательного атрибута src:

<img src=”адрес_графического_файла”>

Правила написания тега <img>:

• Регистр букв в пути и имени изображения имеет значение.

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

• Не используйте пробелы в названиях изображений и папок.

При создании сайта не используйте символ пробела в названии файлов и папок.

• Типы изображений используемых в Интернете.

В настоящее время получили распространение только два типа изображений. Это изображения GIF (имеют расширение.gif) и изображения JPEG (имеют расширение.jpg или.jpeg). Поэтому старайтесь использовать только изображения этих двух типов. Изображения других типов не будут отображаться во всех браузерах.

• Всегда используйте параметры WIDTH и HEIGHT.

Это ускорит загрузку страниц и обеспечит правильное отображение изображения.

• Всегда используйте параметр ALT.

Всегда используйте параметр ALT, для того, чтобы пользователи, которые не смогут увидит изображение, смогли прочитать комментарий к нему.

• Использование абсолютных и относительных адресов.

Всегда используйте абсолютные адреса для файлов, находящихся вне вашего сайта. Всегда используйте относительные адреса для фалов и ссылок, находящихся на вашем сайте.

Тег <img> может иметь атрибуты width (ширина) и height (высота), для указания размера изображения на экране, измеряемые в пикселах или процентах. Если указывается только один атрибут, то второй рассчитывается браузером так, чтобы сохранить оригинальную пропорцию размеров изображения.

Основные параметры тега <IMG> и их возможные значения:

SRC - указывает путь и название графического элемента, который нужно использовать для отображения на странице.

WIDTH - ширина графического элемента в пикселах. Параметры ширины и высоты не являются обязательными. Если же параметры ширины и высоты не указаны, то страница может не отображаться до полной загрузки всех изображений (особенно это касается таблиц содержащих картинки).

HEIGHT - высота графического элемента в пикселах.

BORDER - размер поля вокруг графического элемента в пикселах. Значение этого параметра может принимать любое целое число от 0 до бесконечности.

ALT - параметр альтернативного текста принимает в качестве значения текстовую строку, которая будет появляться вместо графического изображения.

ALIGN – положение (выравнивание) элемента на странице относительно других элементов документа. Возможные следующие значения параметра ALIGN:

· absbottom – выравнивание нижней границы изображения по нижней границе текущей строки;

· absmiddle - выравнивание середины изображения по середине текущей строки;

· baseline - выравнивание нижней границы изображения по базовой линии текущей строки;

· bottom – то же, что и baseline;

· top – верхняя граница изображения выравнивается по самому высокому элементу текущей строки;

· texttop - верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки;

· left – изображение располагается у левого края окна; текст и другие элементы обтекают изображение справа;

· right - изображение располагается у правого края окна; текст и другие элементы обтекают изображение слева.

Пример вставки изображения в HTML–документ (рис.1.8):

Текст HTML-программы	Комментарий
<html>
<head> <title> Моя домашняя страничка </title> </head>
<body bgcolor=white text=black	Определение цвета фона и цвета текста
background=fon.gif>	Вставка фонового изображения
<center> <h1>Моя домашняя страничка</h1> </center>
<img src="foto.jpeg"	Вставка изображения
align=left	Обтекание изображения текстом справа
hspace=10>	Расстояние левого и правого поля вокруг изображения равное 10 пикселам
<b> Здравствуйте. </b> <br> Приветствую Вас на своей домашней страничке. <br>
Немного о себе:<br>
Студент Тюменского государственного университета <i>
<pre> Обучаюсь в институте математики и компьютерных наук получаю дополнительную специальность в области Web-дизайна и Компьютерной графики </pre>	Авторское форматирование
</i>
</body>
</html>

Рис.1.8. Вставка изображения

Дата добавления: 2015-10-02