HTML HTML5 XHTML ПРИМЕРЫ СПРАВОЧНИК РЕКЛАМА ГОСТЕВАЯ

HTML Урок 13 Изображения


« Назад Далее »

Пример

Путешествие в Горы Норвегии

Скала

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

Примеры

Примеры

Вставка изображений
Как вставить изображение в HTML документ.

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

(Вы найдете больше примеров внизу страницы).


HTML Изображения - Тег <img> и Атрибут Src

В HTML, изображения определяются с помощью тега <img>. 

Тег <img>   пустой, т.е. он содержит только атрибуты и не имеет закрывающего тега.

Чтобы показать изображение на странице, вы должны использовать атрибут src. Src означает "source" - источник. Значение атрибута src - это адрес (URL или Uniform Resource Locator - Унифицированный Указатель Ресурса) изображения, которое вы хотите показать.

Синтакс определения изображения:

<img src="адрес(url)" alt="некоторый_текст"/>

Адрес (URL) указывает место, где хранится изображение. Изображение под названием "boat.gif", расположенное в директории "images" на "http://Uroki-HTML.ru" имеет адрес URL: http://Uroki-HTML.ru/images/boat.gif.

Браузер показывает изображение как только встречает тег <img> в документе. Если вы поместите тег изображения между двумя параграфами браузер покажет первый параграф, затем изображение, а затем второй параграф.


HTML Изображения - Атрибут Alt

Атрибут alt указывает альтернативный текст для изображения, если изображение не может быть отображено браузером.

Значение атрибута alt - это некоторый текст, определяемый автором HTML документа:

<img src="boat.gif" alt="Большая Лодка" />

Атрибут alt обеспечивает альтернативную информацию для изображения, если пользователь по какой-то причине не может увидеть его (в силу медленного соединения, ошибочно указанного адреса в src атрибуте, или если пользователь отключил показ изображений).


HTML Изображения - Установка Высоты и Ширины Изображения

Атрибуты высоты и ширины указывают высоту и ширину изображения.

Значения атрибутов указываются в пикселях по умолчанию:

<img src="pulpit.jpg" alt="Скала" width="304" height="228" />

Совет: Рекомендуется указывать атрибуты высоты и ширины для изображения. Если эти атрибуты установлены, пространство, требуемое для изображения резервируется при загрузке страницы. Однако, без этих атрибутов, браузер не знает размер изображения. В результате дизайн страницы будет изменяться (дергаться, прыгать) во время загрузки старницы (пока грузятся изображения).


Простые Замечания - Полезные Советы

Замечание: Если HTML файл содержит десять изображений - одиннадцать файлов необходимо, чтобы отобразить страницу корректно. Загрузка изображений занимает время, поэтому наш лучший совет: Используйте изображения осторожно.

Замечание: Когда веб страница загружается, именно браузер в этот момент, в действительности получает изображение с веб сервера и вставляет в страницу. Поэтому удостоверьтесь, что изображения действительно находятся в указанных местах в отношению к веб странице, иначе ваши посетители увидят изображения неправильных ссылок (например в виде красного крестика). Изображение неправильной ссылки отображается, если браузер не может найти изображение.


Примеры

Дополнительные примеры

Выравнивание изображений
Как выровнить изображение внутри текста.

Плавающие изображения
Как позволить изображению обтекать параграф слева или справа.

Создание изображения-ссылки
Как сделать из изображения ссылку.

Создание карты изображения
Как сделать карту изображения, с несколькими регионами, где каждый регион - гиперссылка.


HTML Теги Изображений

ТегОписание
<img />Определяет изображение
<map>Определяет карту изображения
<area />Определяет регион для клика внутри карты изображения




« Назад Далее »
© 2011-2017 Уроки HTML
Рейтинг@Mail.ru