Изображения – пожалуй, именно они формируют наше общее представление о всемирной сети. Согласитесь, что графическую информацию человек запоминает в целом намного лучше, чем текстовую. Поэтому изображения являются важной частью любого сайта и любой веб-странички. И поэтому я хочу вам рассказать, как вставить в 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, так как это правильно с точки зрения стандартов. Разберем на примере:
<img src = “image.jpg” class = “preview”>
Вставляем такую милую картинку. Мне аж петь хочется, когда я на нее смотрю Здесь мы повесили на картинку класс preview и теперь с css через него можем обратиться к картинке.
.preview{
Padding: 20px;
Margin: 10px;
Border: 5px solid orange;
Transform: skewX(10deg);
box-shadow: 0 0 15px 10px purple
}
Мы добавили картинке внутренние и внешние отступы, сделали рамку и фиолетовую размытую тень, а также немного трансформировали. И вот что получилось:
Ну? Это явно покруче, чем оформить только средствами html?
Подведу итог
Итак, для отображения картинки вам всего лишь нужно написать тег img и прописать в нем атрибут src, который задает путь к изображению. Все остальное — это дополнительные возможности — выравнивание, размеры, альтернативный текст, повороты, рамки и т.д.
И наконец, в идеале все это должно прописываться через CSS. То есть не задавать размеры в атрибутах, а повесить на картинку дополнительный стилевой класс, который и будет определять размеры. То же самое с выравниванием, которое в css можно сделать с помощью свойства text-align, а также плавающих блоков float.
Я думаю, теперь вы имеете представление, как вставить в html картинку и нормально оформить ее. До встречи в следующих статьях.