Изображения на web-страницах могут использоваться двумя способами: в качестве фона и в качестве самостоятельного изображения. Рекомендуется использование трех форматов графики: JPEG, GIF и PNG. Именно их поддерживают все браузеры, для остальных форматов могут потребоваться специальные средства.

Как правило, все изображения для сайта хранятся в отдельной папке, например, images. А пути к изображениям прописываются также, как в ссылках. Если забыли посмотрите .

Во всех последующих примерах пути к изображениям будут прописаны, исходя из того, что картинки находятся в папке images, а страницы в папке site, находящейся на том же уровне.

Фоновые изображения

Фоновое ихображение заполняет собой все пространство элемента для которого оно задано. Так, указав в теге атрибут background="fon.gif" , рисунком fon.gif будет залито все окно браузера.

Пример кода: Результат

Задавая фоновый рисунок документа, не забывайте указывать также параметр bgcolor . Это связано с тем, что у пользователя может быть отключена загрузка изображений и вашего красивого фона он не увидит. Тогда браузер и будет использовать параметр bgcolor .

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

Для размещения на странице изображений используется тег , имеющий единственный обязательный параметр src , определяющий URL-адрес изображения.

Пример кода:

Тег img Остальное содержимое документа

Результат:

Остальное содержимое документа

Согласитесь, текст рядом с картинкой выглядит не очень красиво.

Для того, чтобы наши изображения выглядели так, как нам хочется их надо выровнять. И поможет нам в этом параметр align .

У этого параметра есть несколько значений. Рассмотрим их все на примерах.

Пример кода с параметром align="left"

Тег img с параметром align="left" Картинка слева, а текст обтекает ее справа и этот текст может занимать несколько строчек.

Результат:

Картинка слева, а текст обтекает ее справа и этот текст может занимать несколько строчек.

Пример кода с параметром align="right"

Тег img с параметром align="right" Картинка справа, а текст обтекает ее слева и этот текст может занимать несколько строчек.

Результат:

Картинка справа, а текст обтекает ее слева и этот текст может занимать несколько строчек.

Пример кода с параметром align="top"

Тег img с параметром align="top" Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. Изображение как бы встраивается в строчку. Если изображение большое, то и строка раздвигается на эту высоту.

Результат:

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

Пример кода с параметром align="texttop"

Тег img с параметром align="texttop" Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки (заглавная буква строки).

Результат:

Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки (заглавная буква строки).

Пример кода с параметром align="middle"

Тег img с параметром align="middle" Выравнивание середины изображения по базовой линии текущей строки.

Результат:

Выравнивание середины изображения по базовой линии текущей строки. * крупный шрифт сделан для наглядности разницы между middle absmiddle

Пример кода с параметром align="absmiddle"

Тег img с параметром align="absmiddle" Выравнивание середины изображения посередине текущей строки.

Результат:

Выравнивание середины изображения посередине текущей строки.

Пример кода с параметром align="bottom"

Тег img с параметром align="bottom" Выравнивание нижней границы изображения по базовой линии текущей строки.

Результат:

Выравнивание нижней границы изображения по базовой линии текущей строки.

Пример кода с параметром align="absbottom"

Тег img с параметром align="absbottom" Выравнивание нижней границы изображения по нижней границе текущей строки.

Результат:

Выравнивание нижней границы изображения по нижней границе текущей строки.

Если же мы хотим, чтобы текст располагался под картинкой, то необходимо использовать тег
с параметром clear , который запрещает обтекание. Обтекание можно запретить с правой стороны (right), с левой стороны (left) и с обеих сторон (all).

Пример кода:

Запрет обтекания картинки
Остальные элементы документа

Результат:

Остальные элементы документа

Размеры изображений

Любое изображение имеет размер, заданный в пикселах. При встраивании изображения на страницу, возможно вам понадобиться уменьшить размер исходной картинки.

Для этого у тега существуют параметры width - ширина и height - высота. Они задаются в пикселах или в процентах (процент от ширины экрана)

При загрузке изображения браузер будет автоматически масштабировать вашу картинку к заданным параметрам ширины и высоты. Только имейте в виду, что неаккуратное задание параметров, может привести к изменению пропорций рисунка, а следовательно, к его искажению.

Пример кода:

Результат:

Отделение изображения от текста

Вы, наверно, обратили внимание, что текст очень близко прилипает к картинкам. Это не всегда красиво. Для решения этой проблемы имеются параметры hspace - горизонтальный отступ и vspace - вертикальный отступ. Отступы задаются в пикселах.

Пример кода:

Тег img с отступами Остальное содержимое документа теперь не прилипает к изображению.

Результат:

Альтернативный текст

Если у пользователя отключен режим загрузки изображений, то вместо картинки он увидит красный крестик (в Internet Explorer) или другую иконку (в других браузерах). Неплохо было бы дать ему подсказку, что изображено на рисунке. Для этого используется параметр alt . Текст из этого параметра будет отображаться вместо картинки (если отключен режим загрузки изображений). В случае же, если картинка отображается, этот параметр дает подсказку при наведении курсора мыши, правда, не во всех браузерах.

В интернете трудно найти сайт, который бы не содержал картинок, и это не удивительно, ведь они являются основной частью дизайна сайта, которая придает ему запоминающейся вид. А хороший дизайн сайта - залог его успешного развития. Для вывода изображений в html существует единственный тег .

1. Синтаксис тега

Описание изображения " src ="URL " [атрибуты ]>

Обратите внимание, что данный тег является одиночным и не требует закрывающего тега .

Атрибут src является обязательным. С помощью него указывается адрес выводимого изображения. Можно указать абсолютный или относительный URL . Если адрес не указать или же написать с ошибкой, то картинка выведена не будет.

Атрибут alt="описание" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.

Остальные атрибуты являются необязательными, их мы рассмотрим чуть ниже. Сначала приведем простенький пример вывода картинки на html.

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

Для вставки картинки в html используется тег . Синтаксис мы рассмотрели чуть выше. Давайте приведем практические примеры.

Пример 2.1. Использование тега

... ...

Этот код

В данном примере мы указали прямой адрес изображения из картинок на Яндекс Фото. Чаще всего указывается ссылки на картинки, которые лежат на том же URL. Например, src="/img/kartinka.jpg", т.е. указывается относительный адрес.

Возможно размещение нескольких картинок подряд. Если они не будут умещаться на одной строке, то автоматически произойдет переход на следующую.

Пример 2.2. Вывод нескольких картинок в html друг за другом

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg "> ...

Преобразуется на странице в следующее:

Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой оно бы уже не уместилось.

Пример 2.3. Использование альтернативного текста (alt) в img

Рекомендуется прописывать альтернативный текст (атрибут alt) в теге , чтобы застраховать себя от случая, что картинка не доступна. Ниже приведен пример с использованием альтернативного текста. В первом случае мы не задавали размеры картинки, а во втором задаем.

... Пример изображения " src ="321.jpg "> ...

Преобразуется на странице в следующее:

Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой строке оно бы уже не уместилось.

Теперь рассмотрим подробно все атрибуты тега .

3. Атрибуты и свойства тега

1. Свойство align="параметр" - определяет выравнивание рисунка. Это значение так же влияет на то, как текст будет обтекать рисунок. Может принимать следующее параметры:

• left - выравнивание по левому краю
• middle - выравнивание середины изображения по базовой линии текущей строки
• bottom - выравнивание нижней границы изображения по окружающему тексту
• top - верхняя граница изображения выравнивается по самому высокому элементу текущей строки
• right - выравнивание по правому краю

Пример 3.1. Выравнивание изображения в html по правому краю

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg "> ...

Преобразуется на странице в следующее:

2. Свойство alt="текст" - подсказка/описание картинки. Выполняет сразу две важные функции:

• Выдает подсказку при наведении
• Если в браузере отключены изображения, то выводится этот текст

Этот атрибут также очень важен при ранжировании изображений в Яндекс Картинках и Google Картинках. Его следует прописывать к каждому изображению, поскольку это является одним из факторов в алгоритмах поисковых системах.

Пример 3.2. Вывод картинки в html с рамкой (границей)

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg "> ...

Преобразуется на странице в следующее:

4. Свойство bordercolor="цвет" - задает цвет рамки, которая обтекает изображение. Имеет смысл, только если атрибут border больше 0.

Пример 3.3. Вывод картинки в html с цветной рамкой

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg "> ...

Результат можно видеть чуть выше.

Примечание

Атрибуты border и bordercolor можно задать в стилях CSS к img:

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg "> ...

5. Свойство height="ЧИСЛО" - задает высоту изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 400х200, а мы укажем высоту 150 пикселей, то оно сжимается до 300х150 (на 25% меньше), т.е. пропорционально.

6. Свойство width="ЧИСЛО" - задает ширину изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 1000х800, а ширина указывается 1200 пикселей, то оно автоматически расширяется на 20% до 1200х960.

7. Свойство hspace="ЧИСЛО" - задает горизонтальный отступ изображения в пикселях от других объектов html.

8. Свойство vspace="ЧИСЛО" - задает вертикальный отступ изображения в пикселях от других объектов html.

Примечание

Вместо hspace и vspace советую применять старый и проверенный margin (более подробно про него можете прочитать в уроке про описание стилей html). Кратко напомню:

• margin-top: X px; (X - отступ сверху)
• margin-bottom: Y px; (Y - отступ внизу)
• margin-left: L px; (L - отступ слева)
• margin-right: R px; (R - отступ справа)

Задают отступы от объектов в пикселях. Допускаются отрицательные значения. По умолчанию либо наследуется значение предка, либо имеет значение 0.

Например. Отступ слева составляет 50 пикселей, а сверху 10 пикселей.

... margin-top:10px; margin-left:50px " src ="https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg "> ...

Преобразуется на странице в следующее:

В данном примере - отступ сверху составил 10 пикселей, слева 50 пикселей.

9. Свойство class="имя_класса" - можно присвоить класс изображению, чтобы задать стиль всем изображениям этого класса.

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

Такой вопрос возникает у молодых вебмастеров. На самом деле все очень легко. Для этого достаточно обрамить тег тегом (ссылкой).

Например

... Адрес_изображения "> ...

5. Как скруглить углы у картинки

https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg " style ="border-radius: 30px ">

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

Тег IMG предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный параметр src , который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег IMG в контейнер A . При этом вокруг изображения отображается рамка, которую можно убрать, добавив параметр border=0 в тег IMG .

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

Синтаксис

Закрывающий тег
Не требуется.

Параметры
align - определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
alt - альтернативный текст для изображения.
border - толщина рамки вокруг изображения.
height - высота изображения.
hspace - горизонтальный отступ от изображения до окружающего контента.
ismap - говорит браузеру, что картинка является серверной картой-изображением.
lowsrc - путь к графическому файлу низкого разрешения для предварительного отображения.
src - путь к графическому файлу.
vspace - вертикальный отступ от изображения до окружающего контента.
width - ширина изображения.
usemap - ссылка на тег MAP , содержащий координаты для клиентской карты-изображения.

Пример 1. Использование тега IMG

Lorem ipsum dolor sit amet...

Описание параметров тега IMG

Параметр ALIGN

Описание
Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега IMG .

Синтаксис

Аргументы
В таблице 1 перечислены возможные значение параметра align и результат его использования.

Таблица 1. Использование значений параметра align

Значение align	Описание	Пример
absbottom	Нижняя граница изображения выравнивается по самому нижнему краю текущей строки.
absmiddle	Середина изображения выравнивается по средней линии текста.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
bottom или baseline	Нижняя граница изображения выравнивается по базовой линии текстовой строки. Это значение установлено по умолчанию.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
left	Изображение располагается по левому краю родительского элемента.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
middle	Середина изображения выравнивается по базовой линии текущей строки текста.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
right	Изображение выравнивается по правому краю родительского элемента.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
texttop	Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
top	Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Наиболее популярные параметры - left и right , создающие обтекание текста вокруг изображения. Чтобы текст не прилегал плотно к рисунку, рекомендуется в теге IMG добавить параметры hspace и vspace , задающие расстояние до текста в пикселах.

Хотя все значения параметра align поддерживаются браузерами, аргументы absbottom , absmiddle , baseline и texttop не описаны в спецификации HTML 4.

Значение по умолчанию
bottom

Пример 2. Выравнивание рисунка

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Примечание
Хотя все значения параметра align поддерживаются браузерами, аргументы absbottom , absmiddle , baseline и texttop не поддерживаются спецификацией HTML 4.

Параметр ALT

Описание
Параметр alt устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением.

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

Синтаксис

Аргументы
Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.

Значение по умолчанию
Нет.

Пример 3. Добавление альтернативного текста

alt="Вернуться на главную страницу" >

Параметр BORDER

Описание
Изображение, помещаемое на веб-страницу, можно поместить в рамку различной ширины. Для этого служит параметр border тега IMG . По умолчанию рамка вокруг изображения не отображается за исключением случая, когда рисунок является ссылкой. Цвет рамки в этом случае совпадает с цветом текста, заданным с помощью стиля или параметра text тега BODY .

Синтаксис

Аргументы

Значение по умолчанию
0

Пример 3. Рамка вокруг рисунка

рамка зеленого цвета толщиной 2 пиксела

Параметр HEIGHT и WIDTH

Описание
Для изменения размеров изображения средствами HTML предусмотрены параметры width и height . Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента - контейнера, где находится тег IMG . В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=100% означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного параметра width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

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

Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту - размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее. Но качество рисунка при этом ухудшается.

Синтаксис

Аргументы
Любое целое положительное число в пикселах или процентах.

Значение по умолчанию
Исходная ширина или высота изображения.

Пример 4. Размеры изображения

Параметр HSPACE и VSPACE

Описание
Для любого изображения можно задать невидимые отступы по горизонтали и вертикали с помощью параметров hspace и vspace . Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не «наезжал» плотно на изображение, необходимо вокруг него добавить пустое пространство.

Синтаксис

Аргументы
Любое целое положительное число в пикселах.

Значение по умолчанию
0

Пример 5. Отступы от рисунка

Параметр ISMAP

Описание
Параметр ismap говорит браузеру что рисунок является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах - серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.

Отправка данных на сервер происходит следующим образом. Необходимо поместить тег IMG в контейнер A , где в качестве значения параметра href указать адрес CGI-программы. Программа анализирует полученные координаты нажатия мыши, которые считаются от левого верхнего угла изображения, и возвращает требуемую веб-страницу.

Синтаксис

Аргументы
Нет.

Значение по умолчанию
По умолчанию этот параметр выключен.

Пример 6. Рисунок как карта-изображение

Если пользователь установил координаты мыши на изображении 100, 50, то после нажатия на ссылку будет открыт файл по адресу http://www.htmlbook.ru/cgi-bin/map.cgi?100,50. Последние цифры передаются в CGI-программу по методу GET и интерпретируются на сервере.

Параметр LOWSRC

Описание
Параметр lowsrc используется для отображения рисунка низкого качества перед полной загрузкой конечного изображения. Такой подход предназначен для снижения времени ожидания пользователя. Предварительно ему показывается изображение в низком разрешении или черно-белый рисунок, который быстро загружается из-за небольшого исходного объема файла. Пока пользователь рассматривает его, происходит загрузка изображения хорошего качества, которое постепенно сменяет первоначальное. Размеры этих изображений обязательно должны совпадать.

Синтаксис

Аргументы

Значение по умолчанию
Нет.

Пример 7. Путь к рисунку низкого качества

Параметр SRC

Описание
Адрес графического файла, который будет отображаться на веб-странице. Наиболее популярны файлы в формате GIF и JPEG.

Синтаксис

Аргументы
В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию
Нет.

Пример 8. Путь к графическому файлу

Тег

Тег используется для вставки изображений в HTML-страницу. Он имеет два обязательных атрибута: src и alt . Изображения в интернете играют одну из ключевых ролей. Они активно применяются в оформлении сайтов, в ссылках (вставкой их в тег ), наглядно дополняют текстовую информацию и т.д. Если тег используется внутри ссылки или задает карту изображений, то вокруг самого изображения некоторые браузеры отображают рамку, которую можно убрать при помощи атрибута border .

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

Также, для ускорения загрузки страниц рекомендуется устанавливать атрибуты width и height , тега . Тогда браузер не будет ожидать полной загрузки изображения, он просто выделит под него место и будет загружать страницу дальше, а его подгрузит потом. К тому же, если одно изображение используется на странице несколько раз (значение атрибута src одинаковое), то браузер загружает его с сервера только один раз, а потом берет из кэш-памяти.

Атрибуты

Личные атрибуты:

• align - Устанавливает положение изображения относительно окружающего контекста.
• alt - Обязательный атрибут. Альтернативный текст, если в браузере отключен показ изображений.
• border - Устанавливает размер рамки вокруг изображения.
• height - Переопределяет высоту изображения.
• hspace - Размер боковых полей изображения от его краев до окружающего контекста.
• ismap - Позволяет использовать серверные карты изображений.
• src - Обязательный атрибут. Указывает адрес местонахождения изображения.
• title - Выводит «всплывающую» подсказку при наведении курсора мыши на изображение.
• usemap - Позволяет использовать клиентские карты изображений.
• vspace - Устанавливает размер верхних и нижних полей изображения от его краев до окружающего контекста.
• width - Переопределяет ширину изображения.

• accesskey - устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
• class - задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
• dir - указывает направление текста внутри элемента.
• - задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
• lang - указывает язык, на котором написан текст внутри HTML-элемента.
• style - необходим для применения встроенных стилей CSS к тегу.
• tabindex - устанавливает порядок табуляции между элементами (клавиша Tab).
• title - выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Назначение: изображения .

Модель тега: inline (встроенный, уровня строки).

Может содержать: данный элемент является пустым/Empty.

Открывающий тег: необходим. Закрывающий тег: запрещен.

Синтаксис

Пример HTML: применение тега IMG

А вы знаете, что такое знак

Результат.

Поддержка версиями HTML

Версия:	HTML 4.01	HTML 5	XHTML 1.0	XHTML 1.1
Поддержка:	Да	Да	Да	Да

Поддержка браузерами

Браузер:	Internet Explorer	Google Chrome	Mozilla Firefox	Opera
Версия:	6.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Да	Да	Да	Да	Да

Сейчас почти ни один сайт не обходится без использования картинок в HTML-страницах, ведь как гласит народная мудрость: «Лучше один раз увидеть, чем сто раз услышать». Прочитав данную статью вы узнаете как использовать тег IMG, с помощью которого добавляются изображения на страницы сайта. Мы будем рассматривать примеры для HTML 5, но они будут работать в том числе для более ранних версий языка гипертекстовой разметки.

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

Для вставки картинки в страницу используется HTML-тег IMG. Для изображения должно быть указано как минимум два атрибута src (путь к файлу с картинкой) и alt (альтернативный текст, который видит пользователь если изображение не загрузилось). Атрибут alt может быть пустым, но должен присутствовать обязательно. Также можно задать атрибут title и тогда при наведении курсора на изображение будет отображаться заданный в данном атрибуте текст.

Если файл с изображением находится в той же папке что и страница, на которую оно загружается, то в атрибуте src можно указать только имя файла, например:

Если страница находится по адресу http://www..html, а изображение http://www..jpg, то тогда путь к изображению указывается таким образом:

Если страница находится в папке http://www..сайт/logo.jpg, то путь будет таким:

Если картинка находится в папке http://www.сайт/images/, то независимо от того в какой папке находится страница на том же сайте, в которую вставляется изображение, путь к файлу можно указать следующим образом:

Либо можно указать полный путь к файлу картинки, если он расположен на другом сайте:

Ширина (width) и высота (height) изображения

В более ранних версиях HTML высота и ширина задавались с помощью атрибутов width и height, но сейчас все что влияет на отображение картинки задается с помощью CSS в атрибуте style. Чаще всего ширина и высота задаются в пикселях:

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

Также ширину и высоту можно указывать в % от ширины или высоты окна браузера или какого-либо блочного элемента, внутри которого находится изображение:

Обтекание картинки в тексте и отступы

По-умолчанию текст отображается под изображением. Для того чтобы текст обтекал картинку используется CSS свойство float, которое заменяет атрибут align. Если мы хотим чтобы картинка была слева от текста, а текст обтекал ее справа и снизу, то тогда задается значение left для CSS свойства float, а если картинка должна быть справа, то тогда указывается значение right:

Здесь идет текст параграфа

Также можно задать отступы сверху, справа, снизу и слева от картинки:

То же самое можно задать в сокращенной форме:

Либо можно задать отступы по вертикали и по горизонтали двумя значениями свойства margin вместо устаревших атрибутов vspace и hspace. Допустим нам нужно чтобы сверху и снизу был отступ 10 пикселей, а слева и справа 8 пикселей:

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

Либо мы можем задать свои цвет, тип и толщину рамки картинки:

Форматы изображений для веб

Обычно на веб-сайтах используется несколько форматов изображений. Для фотографий используется формат JPEG, если же нужно чтобы изображение было с прозрачным фоном, то используется формат PNG. Ранее вместо формата PNG использовался GIF, но он уже устарел – единственным его преимуществом является возможность создания анимированных изображений. Обычно PNG и GIF используются только как элементы дизайна, да и то в случаях когда нужно чтобы у изображения были прозрачные участки или оно должно быть полупрозрачным. Так как файлы в этих форматах получаются очень большими по размеру, то их не рекомендуется использовать для обычных фотографий – для этого есть формат JPEG. Перед загрузкой изображений на сайт стоит уменьшить их по ширине и высоте до того размера в котором они будут выводиться на сайте, чтобы они загружались быстрее у пользователей.

Копирование статьи запрещено.

Поделись статьей: