Команды html вставка изображения. Как вставить картинку в HTML — редактирование, выравнивание, атрибуты
Изображения в HTML
давно завоевали заслуженную популярность
среди создателей сайтов. Они активно
используются в дизайне сайтов, для
наглядного дополнения текстовой
информации, для оформления ссылок и Бог
знает для чего еще.
Важным составляющим
любого изображения является его размер
(объем, вес) в килобайтах, ведь чем он
больше, тем дольше будет загружаться
HTML-страница. Поэтому в интернете
существует три самых распространенных
формата, которые содержат оптимальное
соотношение размер-качество изображения -
это GIF, JPG (JPEG) и PNG.
Тег или
как вставить изображение в HTML?
Для вставки
изображения в HTML страницу используется
тег . Это самый обычный встроенный
(inline, уровня строки)
элемент, то есть он не создает впереди
и после себя переводы строк в начало.
Но вот содержимого у него не может быть,
так как не имеет закрывающего
тега и является пустым
.
У тега есть
два обязательных
атрибута
-
это src, который указывает путь (URL) к
изображению и alt, выводящий альтернативный
текст, когда в браузере отключен показ
изображений. Если src вы вряд ли забудете
указать, ведь без него изображение
просто-напросто не загрузится, то про
alt очень часто забывают даже опытные
вебмастеры.
По умолчанию все
браузеры показывают изображения в их
натуральные размеры. Но при помощи
атрибутов width и height тега можно
изменить их высоту и ширину. Значения
указываются в числах, которые означают
размеры в пикселях (ставить в конце
чисел буквы px не нужно) или процентах,
в этом случае в конце надо поставить
знак %.
Пример изменения
размеров изображений
Изменение
размеров изображений
Результат в браузере
Не следует
злоупотреблять изменением размеров,
так как при визуальном уменьшении
изображений, их объем в килобайтах не
уменьшается, соответственно они
загружаются столько же времени. А при
увеличении изображений могут появиться
размытости и другие искажения.
Тем не менее, лучше
всегда указывать размеры изображений,
даже если вы их не меняете. В этом случае
браузеры не будут ожидать их полной
загрузки, а выделят под них место и
пойдут загружать страницу дальше, а
изображения загрузят в конце. Это
позволяет пользователям не сидеть в
томительном ожидании и быстрее начать
пользоваться сайтом. Кроме этого, если
браузеры сразу будут знать размеры, то
при загрузке страницы им не придется
по ходу дела подстраиваться под
появляющиеся картинки, что поможет
избежать ненужных скачков и дерганий
окружающих их HTML-элементов.
Выравнивание
изображений
В старых версиях
HTML для выравнивания изображений у тега
имелся уже известный вам атрибут
align, но в современном HTML его нет, поэтому
будем использовать тоже уже знакомый
вам, и, надеюсь, ставший родным style.
style="float:left" -
прижимает изображение к левой стороне
блока, в котором находится изображение,
а весь текст обтекает его справа.
style="float:right"
- прижимает изображение к правой стороне
блока, а текст обтекает его слева.
Пример выравнивания
изображения по левому краю.
Выравнивание
изображений
Первый
параграф.
Текст перед
картинкой.
После картинки.
Последний
параграф.
Результат в браузере
style="clear:left" -
прерывает обтекание изображений
выровненных по левой стороне.
style="clear:right"
- прерывает обтекание изображений
выровненных по правой стороне.
style="clear:both" -
прерывает обтекание изображений
выровненных по обеим сторонам.
Пример прерывания
обтекания изображения
Прерывание
обтекания изображений
Первый
параграф.
Текст перед
картинкой.
После картинки.
Последний параграф.
Результат в браузере
Всплывающий
текст-подсказка у изображений в HTML
Как и у многих
других HTML-тегов, у тега есть
атрибут title, выводящий текстовую подсказку
при наведении курсора мыши на изображение.
title="Любой текст."
Изображения для
фона
Изображения в
качестве фонов используются в HTML не
менее часто, чем просто изменения цвета
фона, которые мы с вами уже проходили.
И это вполне логично, ведь с помощью
изображений можно сделать неоднотонный
и более красочный фон.
Обычно, в качестве
образца для фона применяются небольшие
по размеру и объему (в килобайтах)
рисунки, а все потому, что фоновые
изображения браузеры обрабатывают
иначе, чем обычные рисунки. Они берут
эту маленькую картинку и замащивают
ей, как кирпичиками, весь участок
HTML-страницы или всю ее целиком.
В прошлых версиях
HTML у некоторых тегов существовал
специальный атрибут background, который
позволял делать фоновое изображение.
Но в том-то и дело, что только у некоторых,
причем далеко не у всех, например у
блочного тега
его не было. Сегодня
я вам покажу способ, который можно
применить абсолютно к любым HTML-тегам и
опять мы используем стили (CSS), а точнее
атрибут style. Общий синтаксис такой:
Обязательно
заключайте адрес картинки в одинарные
кавычки, как показано. И если вы хотите
сделать фоновый рисунок для всей
страницы, то используйте style внутри тега
Обратите внимание,
что точку с запятой посередине ставить
не надо, так как оба значения относятся
к фону. При такой записи браузер в первую
очередь показывает фон-изображение, а
не цвет. А теперь представьте, что у вас
фоновое изображение - это рисунок
в темных тонах, а цвет текста на странице
вы сделали белым. И все отлично смотрится...
Пока пользователь не отключит в браузере
показ изображений. Тогда у него фон
станет скорее всего белым, как и ваш
цвет текста.
Пример создания
фоновых изображений в HTML
Фоновые
изображения в HTML
Созвездия в
заоблачной дали Раздумьям тщетным
многих обрекли. Одумайся, побереги
рассудок - Мудрейшие и те в тупик
зашли. Омар Хайам.
Таблицы
Чаще всего таблицы
в HTML используются не по их прямому
назначению - отображению табличных
данных, а для создания глобального
каркаса страницы. То есть создается
таблица, растягивается во всю ширину
страницы, а потом в ее левом столбце
делают одно меню, в правом - другое,
в среднем располагают основную информацию
и так далее.
Существует три
вида верстки: табличная, о которой я вам
рассказал выше; слоями (блочная), требующая
среднего уровня знания стилей (CSS) и
комбинированная. По многим параметрам
блочная верстка все же предпочтительней,
поэтому, если верстальщик может сделать
задание, как с помощью таблиц, так и с
помощью блоков, то обычно выбирается
последнее.
За вставку картинок в HTML-документ отвечает тег и его атрибуты, главным из которых можно считать src
, задающий адрес изображения. Он является обязательным, так как если не указать, где взять рисунок, браузер не сможет узнать, что именно добавлять на страницу.
Простейший случай вставки картинки будет выглядеть так (изображение называется image.png и находится в той же папке, что и HTML-документ):
Раньше у тега был ещё один обязательный атрибут - alt
, но с приходом HTML 5 он был переведён в разряд желательных. alt
устанавливает текст, который пользователь увидит вместо картинки, если она вдруг не загрузится. Этот атрибут рекомендуют добавлять и некоторые оптимизаторы, потому как считается, что это положительно сказывается на продвижении в поисковиках.
Если не указывать изображению никаких дополнительных атрибутов, то оно будет выведено в полный размер, а нужно это бывает далеко не всегда. К счастью, желаемый размер рисунку можно задать при помощи атрибутов width
(указывает ширину) и height
(определяет высоту). Размеры можно записывать либо в пикселях, либо в процентах. Во втором случае процент обозреватель будет высчитывать от родительского элемента (например, абзаца, в который вставлена картинка).
Допустим, нам требуется добавить на страницу изображение image.png
с альтернативным текстом «Просто картинка», шириной 420 и длиной 280 пикселей. Код в таком случае будет следующим:
Навигационная карта
О том, как сделать картинку ссылкой, мы говорили в предыдущей статье. Однако HTML позволяет задавать на одном изображении не одну ссылку, а сразу несколько. В результате пользователь, щёлкая на разные места одной картинки, будет переходить по разным интернет-адресам. Эту возможность можно использовать, например, для создания эффектного меню, интерактивных тестов или наглядных графических моделей.
Для создания карты изображения (именно так называется описанная возможность) понадобятся следующие теги и атрибуты:
- контейнер, внутри которого описывается карта изображения.
- тег внутри , описывающий одну область картинки. На сколько активных областей планируется разделить изображение, столько элементов и придётся поставить. Связка - работает точно так же, как связки -
и
-
, создающие списки.
shape
- атрибут тега , задающий форму ссылки. Активная область может иметь форму прямоугольника, многоугольника или круга.
cords
- определяющий координаты области атрибут. Также принадлежит тегу . Для прямоугольника указываются координаты левого верхнего и правого нижнего углов, для многоугольника - координаты вершин, определяя круг, необходимо задать координаты его центра и радиус.
usemap
- атрибут тега img
, который связывает изображение с картой. Благодаря ему браузер понимает, что в контейнере описана карта именно этого рисунка.
Пример карты изображения
Чтобы было понятно, как всем вышеперечисленным пользоваться, приведу элементарный пример. Есть рисунок map.jpg
. Его нужно разделить на две активные области. Щелчок на верхней части (зелёный цвет) откроет сайт «Одноклассники», нижняя же часть (синий цвет) будет вести на «ВКонтакте». Ссылки должны открываться в новой вкладке. Для создания карты выполняем следующие шаги.
1. Вставляем изображение на страницу и привязываем его к будущей карте (она будет называться social), для чего пишем следующий код:
2. Определяем на картинке будущие активные области и соответствующие им координаты. Это можно сделать в Paint, Photoshop или любом другом графическом редакторе. В нашем случае всё элементарно: прямоугольники равны и по высоте (114 пикселей) и по ширине (384 пикселя).
3. Начинаем создавать карту: открываем тег и прописываем в атрибуте name её название, которое обязательно должно совпадать со значением свойства usemap самой картинки:
4. С помощью тегов area определяем активные области:
5. Закрываем карту:
Итогом работы стала картинка, щелчок на разных частях которой ведёт к открытию разных социальных сетей, и вот такой HTMLкод: