Как вставлять картинки на страницу HTML

Вернуться на главную
Стихи
Флеш-игры


Картинка - имидж - тег <IMG>

Оглавление

Как вставить картинку на страницу html

Чтобы вставить на сайт изображение -картинку, (фотографию или любую графику) надо указать путь к источнику ( к файлу-картинке) при помощи тега img Тег img- это сокращение от английского imagе (имидж, изображение), Источник - по английски source, сокращенно src
Важно: вес и размер картинки (небольшой), имя файла (без пробелов и только латинские буквы и цифры), формат картинки ( расширения . GIF, JPG, JPEG, PNG. Возможно использование анимированных картинок (GIF).
Путь к картинке указывается абсолютный или относительный, в зависимости от того, где картинка находится у вас или в интернете на сторонних ресурсах ( тогда надо указать URL) вернуться назад к оглавлению
В. Княгницкий. "Туман"
Туман. Художник Владимир Княгницкий

Код . В коде указан относительный адрес (относительно папки у меня на сервере )

Код . В коде указан абсолютный адрес картинки


Размер изображения и толщина рамки

Реальный размер этой картинки: Ширина (width)="499" Высота (height)="434". Не прибегая в фотошопу можно сделать так, чтоб на экране картинка выглядела больше или меньше своих реальных размеров. Для этого используются атирибуты width и height. Например, чтоб картинка выглядела в 2 раза меньше, указываем ширину (width)="250" и высоту (height)="217" . И добавляем рамку толщиной 4 пикселя( border="4"). Слева изображение с рамкой, справа, для срвнения, без рамки

Картина Туман    Картина Туман

Код выглядит вот так /▲ вернуться назад к оглавлению


Атрибуты тэга IMG

src -Обязательный атрибут, указывающий URL рисунка (его адрес, месторасположение)
IMG SCR= " img/kartinka.gif"

align - Выравнивает изображение к одной из сторон документа
align="left" - Выравнивание по левому краю
align="right" Выравнивание по правому краю
align="bottom"Выравнивание по нижнему краю
align="top" Выравнивание по верхнему краю
align="middle" Выравнивание по середине

alt - Выводит текст к картинке. Альтернатива графике, если она не грузится
border - Устанавливает толщину рамки вокруг изображения в пикселах. По умолчанию рамка не используется.

width ширина картинки в пикселях или процентах
height - высота картинки в пикселях или процентах

hspace отступ по горизонтали
vspace отступ по вертикали
вернуться назад к оглавлению


Примеры выравнивания картинки с текстом при помощи HTML


Картинка размещена перед текстом без указания каких либо атрибутов. Без форматирования текста. В результате получилось то,что вы видите.

КОД


Картинка  БабочкаКартинка расположена слева от текста про помощи атрибута align со значенем left . align="left" .
Это, конечно, намного лучше предыдущего варианта расположения картинки с текстом. Но не думаю что кому то нравится, когда изображение прижато вплотную к тексту. На картинке бабочка, бабочка, бабочка. И текст, текст, текст про бабочку, бабочку, бабочку. Слишком близко к изображению. Картинка не должна сливаться с текстом, даже если текст написан просто как текст, чтоб наглядно продемонстировать обтекание картинки текстом. Очень важно чтобы на экране картинкал не сливалась с текстом, чтобы не раздражала , чтобы радовала глаз и была на своем месте. Достаточное количество текста нагляднее десонмтрирует пример.
Есть правила верстки в книгоиздательстве, должны быть правила верстки и при сайтостроении.

КОД


Картинка  слева от текстаКартинка расположена слева от текста про помощи атрибута align со значением LEFT, отступ от текста - 20 пикслелей по горизонтали.
align="left" hspace=20 Отступы добавляются при помощи атрибутов HSPACE (отступ по горизонтали) и VSPACE (отступ по вертикали) . В данном случае отступ по вертикали равен нулю, чтобы верх картинка был на одном уровне с верхней строкой текста. Если отступ равен нулю, он не указывавется. Ну а отступ по вертикали указан в атрибуте. И хотя в настоящее время вебмастеров убеждают отказаться от атрибутов HTML и полностью перейти на CSS, мне кажется что простота такого метода дает ему право на существование.
КОД


Картинка расположена справа от текста про помощи атрибута align о значениемRIGHT, добавлены отступы при помощи атрибутов HSPACE (отступ по горизонтали). Картинка справа от текстаи VSPACE (отступ по вертикали). В принципе всё то же, что в предыдущем варианте, только вместо лево, указано право и картинка вставлена не перед текстом, а примерно посредине. Форматирование при помощи атрибутов align (линейное выравнивание) и при помощи отступов по горизонтали и вертикали дает вполне нормальный результат. Картинка обтекается текстом слева, сверху, и снизу (если текста достаточно много). Отступ текста от картинки слева, сверху и снизу рвняется 20 пикселям. Все так, как мы указали в коде.
Два вида выравнивая ( по левому краю и по правому краю) используются чаще всего, а остальные ... Почти все остальные считаются устаревшими. На современных сайтах все изображения ( да и вообще весь дизайн) оформлятеся при помощи каскадных таблиц стилей (CSS)

КОД

 


Картинка  Бабочка Картинка расположена про помощи атрибута align со значением middle. Добавлены отступы при помощи атрибутов HSPACE (отступ по горизонтали) и VSPACE . Выглядит это вот так, код записан ниже.. На этом с атрибутами позиционирования картинок заканчиваем

КОД/ ▲ вернуться назад к оглавлению


Как использовать атрибуты alt и title.


В.Княгницкий. Натюрморт. Атрибуты alt и title содержат название картинки. ALT -это альтернатива изображению, если оно по каким то причинам не загрузилось. Title - это титульная надпись на картинке. Она появляется при наведении мышки на картинку
Если вы делаете сайт только для себя, то можете не применять эти атрибуты. Если сайт предназначен для людей, то эти атрибуты надо заполнить дав четкое точное описание изображения.
Во-первых, это удобно для посетителей, во вторых, необходимо для поисковых машин. Именно текст внутри тега IMG позволяет поисковым роботам индексировать картинки, сортировать их по ключевым словам и выдавать их по запросам пользователя. Кстати, Яндекс даже предупреждает, что если и у картинки отсутствует содержательное описание, она не попадают в поиск. Индексируются картинки только стандартных графических форматов (JPEG, GIF и PNG). Фоновые изображения и картинки, раскрывающиеся при помощи скрипта, не индексируются.

КОД картинки с заполнеными alt и title ▲ вернуться назад к оглавлению


Как сделать картинку ссылкой


картинка=ссылка Любая ссылка делается при помощи тега А и атрибута href (если это гиперссылка) или name если (ссылка на абзац или элемент, расположенный на этой же странице).
Начальный тег <a href = " адрес"> Источник картинки </a>закрывающий тег

КОД рисунка-ссылки

Аналогичный результат можно получить используя метод get (смотри раздел Формы html)

КОД .Рисунок и ссылка внутри Формы с атрибутом аcton ▲ вернуться назад к оглавлению


Прозрачность картинки - opacity


В.Княгницкий. Натюрморт.  В.Княгницкий. Натюрморт. Для изменения внешнего вида изображения, том чиле прозрачности (opacity) можно использовать атрибут style, хотя не рекомендуется . Все что касается стиля (style) следует прописывать в отдельном файле CSS, связанным со страницей при помощи link.
На этих примерах прозрачность opacity прописана во внутреннем стиле тега img. В верхней картинкe прозрачность равна 100%, в нижней равна 30%.
Без указания opacity прозначность по умолчанию равна 100% или 1 (единице). Как указывать, в процентах или десятых долях? Сколько браузеров - столько правил. Для IE нужно писать filter:alpha(opacity=30), для большинства остальных -opacity:0.3. Принято указывать как минимум 2 варианта


КОД картинки с прозрачностью 0,3 (30%) ▲ вернуться назад к оглавлению
hr width="100%" color="#000099">

Меняющиеся картинки. Обработчик событий OnMouse


Если CSS еще не освоен, но менять изображения можно с помощью обработчика событий OnMouse. Действия мыши над картинкой вызывают изменение размера, изменение прозрачности, смена источника изображения и тому подобное;
В этих примерах я использую onMouseOver (навели мыши) onMouseOut(убрали мышь) onClick(клик по картинке) onDblClick (двойной клик),onMouseDown (практически то же, что и onClick)
Пример 1. При наведении мышки на картинку меняется размер изображения
картинка

КОД

Пример 2. При наведении мышки на картинку мышки происходит смена изображений
КОД . Обратите внимание где двойные кавычки, где одинарные. Это важно

Пример 3. При наведении мышки на картинку происходит смена прозрачости

Используя атрубут style можно получать эффекты меняя параметры изображения

КОД.      ▲ вернуться назад к оглавлению


Пример 4. Изменения происходят при наведении мыши, при клие и двойном клике

КОД.      ▲ вернуться назад к оглавлению


<hr>


.