HTML тег <img>
В интернете трудно найти сайт, который бы не содержал картинок, и это не удивительно, ведь они являются основной частью дизайна сайта, которая придает ему запоминающейся вид. А хороший дизайн сайта — залог его успешного развития. Для вывода изображений в html существует единственный тег <img> .
1. Синтаксис тега <img>
Обратите внимание, что данный тег является одиночным и не требует закрывающего тега </img> .
Атрибут src является обязательным. С помощью него указывается адрес выводимого изображения. Можно указать абсолютный или относительный URL. Если адрес не указать или же написать с ошибкой, то картинка выведена не будет.
Атрибут alt=»описание» — не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.
Остальные атрибуты являются необязательными, их мы рассмотрим чуть ниже. Сначала приведем простенький пример вывода картинки на html.
2. Как вставить в html картинку
Для вставки картинки в html используется тег <img> . Синтаксис мы рассмотрели чуть выше. Давайте приведем практические примеры.
Пример 2.1. Использование тега <img>
Этот код преобразуется на странице в следующее:
В данном примере мы указали прямой адрес изображения из картинок на Яндекс Фото. Чаще всего указывается ссылки на картинки, которые лежат на том же URL. Например, src=»https://zarabotat-na-sajte.ru/img/kartinka.jpg», т.е. указывается относительный адрес.
Возможно размещение нескольких картинок подряд. Если они не будут умещаться на одной строке, то автоматически произойдет переход на следующую.
Пример 2.2. Вывод нескольких картинок в html друг за другом
Преобразуется на странице в следующее:
Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой оно бы уже не уместилось.
Пример 2.3. Использование альтернативного текста (alt) в img
Рекомендуется прописывать альтернативный текст (атрибут alt) в теге <img> , чтобы застраховать себя от случая, что картинка не доступна. Ниже приведен пример с использованием альтернативного текста. В первом случае мы не задавали размеры картинки, а во втором задаем.
Преобразуется на странице в следующее:
Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой строке оно бы уже не уместилось.
Теперь рассмотрим подробно все атрибуты тега <img> .
3. Атрибуты и свойства тега <img>
1. Свойство align=»параметр» — определяет выравнивание рисунка. Это значение так же влияет на то, как текст будет обтекать рисунок. Может принимать следующее параметры:
- left — выравнивание по левому краю
- middle — выравнивание середины изображения по базовой линии текущей строки
- bottom — выравнивание нижней границы изображения по окружающему тексту
- top — верхняя граница изображения выравнивается по самому высокому элементу текущей строки
- right — выравнивание по правому краю
Пример 3.1. Выравнивание изображения в html по правому краю
Преобразуется на странице в следующее:
2. Свойство alt=»текст» — подсказка/описание картинки. Выполняет сразу две важные функции:
- Выдает подсказку при наведении
- Если в браузере отключены изображения, то выводится этот текст
Этот атрибут также очень важен при ранжировании изображений в Яндекс Картинках и Google Картинках. Его следует прописывать к каждому изображению, поскольку это является одним из факторов в алгоритмах поисковых системах.
3. Свойство border=»ЧИСЛО» — задает толщину рамки обтекающей изображение. Измеряется в пикселях. Более подробно читайте в отдельной статье: свойство CSS border
Пример 3.2. Вывод картинки в html с рамкой (границей)
Преобразуется на странице в следующее:
4. Свойство bordercolor=»цвет» — задает цвет рамки, которая обтекает изображение. Имеет смысл, только если атрибут border больше 0.
Пример 3.3. Вывод картинки в html с цветной рамкой
Результат можно видеть чуть выше.
Атрибуты border и bordercolor можно задать в стилях CSS к img:
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 пикселей.
Преобразуется на странице в следующее:
В данном примере — отступ сверху составил 10 пикселей, слева 50 пикселей.
9. Свойство class=»имя_класса» — можно присвоить класс изображению, чтобы задать стиль всем изображениям этого класса.
4. Как сделать картинку ссылкой
Такой вопрос возникает у молодых вебмастеров. На самом деле все очень легко. Для этого достаточно обрамить тег <img> тегом <a> (ссылкой).
5. Как скруглить углы у картинки
Чтобы сделать картинку более эффектной рекомендуется в некоторых случаях применять свойство border-radius: N px , где N — радиус среза картинки. Например:
Более подробно про скргуления углов читайте в отдельной статье как скруглить углы в HTML через CSS
Уважаемый читатель, теперь Вы узнали гораздо больше о html теге img. Теперь советую перейти к следующему уроку.
HTML <img> class Attribute
The class attribute assigns one or more classnames to the <img> tag.
Classnames are defined in a stylesheet or in a local <style> element.
Classes, i.e. classnames, are used to style elements.
Example
A class attribute styling an <img> element.
Using class
Classes (i.e. classnames) are used for styling the img element.
Multiple classnames are separated by a space.
JavaScript uses classes to access elements by classname.
Tip: class is a global attribute that can be applied to any HTML element.
Syntax
Values
| Value | Description |
|---|---|
| classnames | One or more space-separated class names. |
More Examples
A class attribute styling an <img> element.
Clicking the button toggles a classname that changes the border radius.
Code explanation
Two CSS classes are defined in the <style> element.
The class attribute in <img> assigns a single classname.
Repeatedly clicking the button toggles the second class, changing the <img> border radius.
Как вставить в html картинку
Изображения – пожалуй, именно они формируют наше общее представление о всемирной сети. Согласитесь, что графическую информацию человек запоминает в целом намного лучше, чем текстовую. Поэтому изображения являются важной частью любого сайта и любой веб-странички. И поэтому я хочу вам рассказать, как вставить в html картинку.
Вставка картинки в html с помощью тега
Наверняка вы знаете, что все команды в html выполняются с помощью тегов. Вот и для изображений придумали свой тег — <img>. Он одинарный, то есть у него нет закрывающей части.
Самым главным атрибутом img тега является src (source) – путь до картинки. В нем вы записываете адрес, по которому расположено изображение. Его можно записать как абсолютный (dolinacoda.ru/images/images2/image.jpg) или как относительный (images/images2/image.jpg).
Оба эти пути ведут к одному и тому же файлу image.jpg , который лежит в папке image2. Та в свою очередь лежит в директории images, а та – в корневой папке. Если записывать все относительно, то при смене доменного имени у вашего сайта все останется работоспособным. Например, редактор wordpress по умолчанию вставляет абсолютные адреса. Но лично я домен менять не собираюсь и меня это устраивает.
Дополнительные атрибуты и оформление через css
Так, отвлеклись от темы Для отображения картинки ей достаточно указать атрибут src, но для ее оформления есть еще много других атрибутов.
- width и height – ширина и высота картинки. Ее можно задать в соответствующих атрибутах в теге img
- align – выравнивание картинки по отношению к тексту. По умолчанию выравнивается слева ( left ). Также можно поставить справа и по центру ( right, center )
- alt – альтернативный текст, который выведется если у пользователя отключен показ картинок в браузере. Полезно его заполнять
- title – практически то же самое. Своего рода описание картинки, которое выведется при наведении курсора на нее
- vspace и hspace – вертикальный и горизонтальный отступ картинки от остального контента. Внимание! Атрибуты уже устарели и лучше эти отступы задавать через таблицу стилей
- class – стилевой класс, который привязывается к картинке и накладывает на нее какие-то стили
Сегодня рекомендуется задавать все параметры внешнего вида именно через css, так как это правильно с точки зрения стандартов. Разберем на примере:
Вставляем такую милую картинку. Мне аж петь хочется, когда я на нее смотрю Здесь мы повесили на картинку класс preview и теперь с css через него можем обратиться к картинке.
Мы добавили картинке внутренние и внешние отступы, сделали рамку и фиолетовую размытую тень, а также немного трансформировали. И вот что получилось:
Ну? Это явно покруче, чем оформить только средствами html?
Подведу итог
Итак, для отображения картинки вам всего лишь нужно написать тег img и прописать в нем атрибут src, который задает путь к изображению. Все остальное — это дополнительные возможности — выравнивание, размеры, альтернативный текст, повороты, рамки и т.д.
И наконец, в идеале все это должно прописываться через CSS. То есть не задавать размеры в атрибутах, а повесить на картинку дополнительный стилевой класс, который и будет определять размеры. То же самое с выравниванием, которое в css можно сделать с помощью свойства text-align , а также плавающих блоков float .
Я думаю, теперь вы имеете представление, как вставить в html картинку и нормально оформить ее. До встречи в следующих статьях.
Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший — HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей — 4.8 из 5. Пусть вашим сайтам будет хорошо.
Как присвоить картинке определенный класс при нажатии?
Подскажите пожалуйста, есть код, состоящий из радиокнопок с картинками. Как сделать, чтобы при нажатии на картинку (когда выделяется радиокнопка) у картинки появлялся бордер? Нашел на просторах интернета скрипт, который добавляет активному элементу допкласс (нужно чтобы тегу img добавлялся класс), но к сожалению, с яваскриптом пока не знаком, подкорректировал наобум, не сработало. Направьте, пожалуйста, падавана на путь истинный.
код: