Как сделать картинку img

Главная → HTML уроки и советы → HTML тег <img>

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

Оглавление
1. Синтаксис <img>
2. Как вставить в html картинку
 2.1. Пример. Использование тега <img>
 2.2. Пример. Вывод нескольких картинок в html друг за другом
 2.3. Пример. Использование альтренативного текста (alt) в img
3. Атрибуты и свойства тега <img>
 3.1. Пример. Выравнивание изображения в html по правому краю
 3.2. Пример. Вывод картинки в html с рамкой (границей)
 3.3. Пример. Вывод картинки в html с цветной рамкой
4. Как сделать картинку ссылкой
5. Как скруглить углы у картинки

1. Синтаксис тега <img>

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

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

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

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

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

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

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

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

<html> <body> ... <img src="https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ... </body> </html>

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

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

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

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

<html> <body> ... <img src="https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> <img src="http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ... </body> </html>

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

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

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

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

<html> <body> ... <img src="123.jpg"> <img width="400" height="50" alt="Пример изображения" src="321.jpg"> ... </body> </html>

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


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

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

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

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

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

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

<html> <body> ... <img align="right" src="https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ... </body> </html>

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

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

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

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

3. Свойство border="ЧИСЛО" - задает толщину рамки обтекающей изображение. Измеряется в пикселях. Более подробно читайте в отдельной статье: свойство CSS border

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

<body> ... <img border="5" src="http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ... </body>

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

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

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

<body> ... <img border="5" bordercolor="#000" src="http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ... </body>

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

Примечание

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

<body> ... <img style="border: 5px solid #000;" src="http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ... </body>

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 пикселей.

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

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

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

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

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

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

Например

<html> <body> ... <a href="Куда_ведет_ссылка"><img src="Адрес_изображения"></a> ... </body> </html>

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

Чтобы сделать картинку более эффектной рекомендуется в некоторых случаях применять свойство border-radius: N px, где N - радиус среза картинки. Например:

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

Более подробно про скргуления углов читайте в отдельной статье как скруглить углы в HTML через CSS

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

Ссылка на следующий урок: Урок 8. HTML тег form - подробное описание с примерами

Читайте также:
• Описание заголовочных тегов html
• Фреймы (теги <frame>, <frameset>, <noframe>, <iframe>)
• Атрибут position в HTML
• HTML тег <ul> - подробное описание с примерами
• HTML теги <h1>-<h6> - заголовочные теги внутри страницы
• Элементы тега <form>: радиокнопки, списки, флажки, текстовые поля
• HTML тег <embed>
• HTML тег <object>

← Перейти в каталог html уроков и советов


Источник: https://zarabotat-na-sajte.ru/uroki-html/teg-img.html


Поделись с друзьями



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Графика и картинки в HTML, тег «IMG - Как создать свой сайт Жизненные пожелания выпускникам

Как сделать картинку img Как сделать картинку img Как сделать картинку img Как сделать картинку img Как сделать картинку img Как сделать картинку img Как сделать картинку img Как сделать картинку img Как сделать картинку img

ШОКИРУЮЩИЕ НОВОСТИ