Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

Img — вставка картинки в Html (Img Src), обтекание изображения текстом, картинка как фон для сайта (Html background), размер и выравнивание изображений

Здравствуйте уважаемые читатели блога KtoNaNovenkogo.ru. Про то, какие именно форматы растровой графики (Gif, Png, Jpg) и в каких случаях лучше всего будет использовать для вставки картинок на страницы своего сайта мы подробно успели поговорить с статье, ссылка на которую приведена чуть выше. Сегодня же мы подробно рассмотрим все аспекты использования тега Img для вставки изображения на свой сайт, посмотрим как задать обтекание картинки текстом в Html коде, узнаем как использовать изображения в качестве фона для сайта, как изменять размер картинок и задавать их выравнивание (по центру, влево и вправо).

Итак, давайте посмотрим как можно использовать картинки на своем сайте. Во-первых, это возможность вставки картинки как элемента (объекта) в Html код страницы. Как раз именно такая вставка изображения осуществляется с помощью элемента Img, который является особенным в языке Html. Img является строчным элементом с замещаемым контентом, к которым относятся всего лишь четыре элемента языка гипертекстовой разметки — Img, Iframe, Object и Embed.

Img — вставка картинки в Html (Src в Img), размер изображения в Width и Height

Img называется строчным элементом с замещаемым контентом потому, что ведет себя он в точности как строчный элемент, но вот внутри него отображается посторонний внешний контент (картинка в случае Img или видео и флеш в случае Object и Embed). Любой из этих элементов (Img, Iframe, Object и Embed) подразумевает наличие внешнего файла, который будет подгружаться вот в эту самую область, заданную атрибутами в тегах Img, Iframe, Object и Embed.

Итак, Img является сточным элементом, в который загружается внешний файл (изображение, картинка, фотография, рисунок). А для указания пути до файла картинки, который должен подгружаться на странице, служит специальный атрибут Src тэга Img.

<img src="путь_до_файла_изображения">

Браузер пользователя при разборе Html кода страницы вашего сайта, как только встретит в нем тэг Img, сразу же создает область для строчного элемента, в которую загружается внешний файл (картинка). Путь до нужной картинки браузер берет из содержимого атрибута Src в Img. Когда изображение начинает загружаться с вашего сервера на компьютер пользователя, браузер определяет истинные размеры этой картинки и раздвигает на эти самые размеры ту строчную область, которую создал при обнаружении в коде элемента Img.

Если вы хотите, чтобы браузер сразу же выделял для элемента Img область нужного размера, а не потом ее изменял при получении данных о размере загружаемого изображения, то вы должны будет обязательно указать атрибуты Width и Height в Img.

<img src="путь до файла изображения" width="ширина картинки в пикселах"  height="высота изображения в пикселах">

Если вы задали атрибуты Width и Height в элементе Img, то тогда браузер пользователя создает область с нужными заданными размерами и туда уже будет вписывать вашу картинку, даже если она другого размера. Кстати, иногда приходится встречать на сайтах начинающих вебмастеров такую ошибку.

На сервер заливается изображение огромного размера и весом в несколько мегабайт (сразу после фотографирования без дальнейшей обработки) и прописывается до него путь в элементе Img. А для того, чтобы изображение не занимало бы весь экран в тэг Img дописывают атрибуты Width и Height с приемлемыми размерами по ширине и высоте для этой картинки.

И что получается в результате? Посетитель такого сайта наблюдает удручающе медленную картину подгрузки изображения в сравнительно малую область, заданную в элементе Img (несколько мегабайт веса вписываются в размер 300 на 400 пикселов). Поэтому сразу же делайте картинки для Html того самого размера, который вы будет показывать на сайте и прописывать в Width и Height элемента Img. Уважайте своих пользователей и не тратьте понапрасну их трафик (особенно мобильный).

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

Теперь давайте посмотрим, каким образом можно указать путь до файла с изображением в Src тэга Img. Собственно, можно использовать и относительные и абсолютные ссылки, о которых я уже довольно подробно писал в приведенной статье. Все зависит от нюансов и удобства. Т.е. Src тэга Img может содержать, например, следующие записи:

<img src="название_файла">

<img src="папка/название_файла">

<img src="http://ktonanovenkogo.ru/папка/название_файла">

В первом случае, файл с картинкой должен лежать в той же папке, что и файл вашей Html страницы (в случае использования вами движка сайта, первые два варианта вам вряд ли подойдут, хотя для задания фонового изображения в CSS это очень удобно). Во-втором случае, файл с изображением лежит во вложенной папке относительно файла вашей Html страницы, ну а в третьем случае, в Src тэга Img указан абсолютный путь до файла с картинкой.

И тут следуете обратить ваше внимание, что картинка, которую вы вставляете в Html код страницы вашего сайта, может лежать абсолютно на любом сервере. Т.е. вы можете, допустим, скопировать путь до любого изображения на моем блоге и вставить этот путь в атрибут Src тэга Img на своем сайте. Все будет прекрасно работать, правда, если я не запрещу подобные действия в файле .htaccess на своем сервере, но это уже отдельная песня (погуглите на тему «Защита от хотлинков»).

Вообще, по правилам языка Html на сервере вашего сайта обязан находиться только сам Html документ (web страница), а все остальные документы и файлы (картинки, скрипты, стили), которые будут подгружаться вместе с ним, могут находиться на разных серверах. В этом, кстати говоря, заключается один из способов повышения скорости загрузки сайта. Да и те же самые счетчики посещений для сайта, которые вы наверняка будет использовать на своем ресурсе для наблюдения за статистикой сайта, тоже будут подгружать свои картинки и скрипты с отличных от вашего серверов.

Вставить картинку на сайт как ссылку, влияние значений Alt и Title в Img на продвижение

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

<a href="http://ktonanovenkogo.ru"><img src="http://ktonanovenkogo.ru/image/webcamxp.png"></a>

В браузере IE вокруг картинки, которую вы сделали ссылкой, появится рамочка шириной в три пиксела. Чтобы ее убрать вам нужно будет добавить в тэг Img атрибут Border со значением ноль:

<a href="http://ktonanovenkogo.ru"><img border=0 src="http://ktonanovenkogo.ru/image/webcamxp.png"></a>

Для всех тех случаев, когда картинка по каким-либо причинам не может подгрузиться вместе с Html документом (путь до файла с изображением прописан не верно или же еще что-то), предусмотрен специальный атрибут Alt для элемента Img.

Alt в Img выполняет роль альтернативного представления вашей картинки. Что происходит в том случае, когда картинка не грузится? Браузер все равно, обнаружив в Html коде элемент Img, формирует под изображение область, которая в зависимости от используемого пользователем браузера может либо оставаться заданного размера, либо схлопываться.

Но чтобы пользователь имел представление, что на этом месте web страницы должна быть картинка, вы и ставите атрибут Alt в Img, где и вводите текст с описанием вашей картинки. Содержимое атрибута Alt тэга Img будут выводиться в области неподгрузившейся картинки.

<img src="путь до файла изображения" width="545"  height="50" >

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

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

Раньше, кстати, к всплывающей подсказке приводило и добавление в тэг Img атрибута Alt, но сейчас от такого поведения отказываются и атрибут Alt сейчас в основном выполняет только роль альтернативного текста, а Title — для всплывающих подсказок.

<img src="http://ktonanovenkogo.ru/image/rss_no_drop1.pngя" height="71" width="90" alt="" title="">

На самом деле содержимое атрибутов Alt и Title тэга Img не только служит для удобства посетителей вашего сайта, но и может оказывать очень существенную роль на успешность продвижения вашего проекта.

Для этого нужно не забывать употреблять в этих атрибутах элемента Img ключевые слова, как я об этом неоднократно писал, например, в статье про продвижение сайта самостоятельно или же в публикации про то, как раскрутить сайт самому. Ключевые слова в Alt и Title тэга Img (особенно в Alt) могут заметно улучшить ранжирование вашего сайта на стартовой странице Яндекса или в выдаче поисковика Гоогл, а так в сервисах поиска по изображениям (картинкам).

Обтекание картинки текстом в Html, выравнивание изображений в Align тэга Img

Теперь давайте поговорим про выравнивание картинок в Html. У всех четырех строчных элементов с замещаемым контентом (Img, Iframe, Object и Embed) есть возможность выравнивания с помощью атрибута Align. Но атрибут Align вообще-то применяется только для блочных элементов, а элемент Img — строчный.

Поэтому некоторые значения атрибута Align для тэга Img (например, задание обтекания картинки текстом) будут означать совсем иное, нежели при использовании этого же атрибута в блочных элементах (параграфах и т.п.). Вообще, выравнивание картинок с помощью атрибута Align для тэга Img можно разделить на две группы.

Итак, что же происходит, когда мы вставляем картинку в текст Html документа? Фактически она встает как одна большая буква:

По умолчанию используется выравнивание по нижнему краю, т.е. добавление в элемент Img атрибута align="bottom" ничего не изменит. Но зато можно попробовать задать выравнивание картинки по верхнему краю, добавив в элемент Img атрибут align="top":

<img src="http://ktonanovenkogo.ru/image/rss_no_drop1.png" align="top">

В этом случае произошло выравнивание текста в строке, где расположена картинка, по верхнему краю этой самой картинки. Для этой группы выравнивания картинок с помощью атрибута Align тэга Img возможно еще одно значение этого атрибута align="middle":

<img src="http://ktonanovenkogo.ru/image/rss_no_drop1.png" align="middle">

В этом случае текст в строке с картинкой будет выравниваться по середине этого самого изображения. Но кроме выравнивания картинок по вертикали в Html и обтекании их текстом существуют значения атрибута Align тэга Img для выравнивания картинки по горизонтали — Left и Right. Эта группа значений атрибута Align сильно отличается от предыдущей.

При использовании значений Left и Right для атрибута Align элемента Img мы добиваемся так называемого обтекания картинки текстом в Html. В этом случае картинка становится плавающей и текст начинает ее обтекать. Например, при значении атрибута align="left" мы получим такой результат:

<img src="http://ktonanovenkogo.ru/image/rss_no_drop1.png" align="left">

Значение Left атрибута Align элемента Img означает, что картинка плавает в левую сторону, а текст ее обтекает справа. А в случае align="right" картинка будет плавать в правую сторону, а текст ее будет обтекать слева:

<img src="http://ktonanovenkogo.ru/image/rss_no_drop1.png" align="right">

При задании обтекания картинки текстом в Html есть один нюанс — текст слишком близко располагается от изображения, что создает неприятный глазу эффект прилипания. Данную проблему совсем легко решить с помощью CSS свойств, но и в чистом Html существует свое решение. Для этого можно использовать атрибуты элемента Img — Hspace и Vspace. С помощью них можно отжать обтекающий текст от изображения, которое он обтекает.

Атрибут Hspace тэга Img задает отступы слева и справа от изображения до обтекающего его текста, а Vspace — сверху и снизу. Отступы от изображения до обтекающего текста задаются в пикселах, например:

<img src="http://ktonanovenkogo.ru/image/rss_no_drop1.png" align="left" hspace="30" vspace="30">

Background — как сделать фон для сайта с помощью картинок и фоновых изображений

Картинки можно использовать не только как элементы Html кода страницы, но и как заливку в качестве ее фона. Вообще, фон для сайта в Html можно задать либо цветом, либо с помощью фоновых картинок. Ну, а в современной верстке (Div верстке с использованием свойств CSS) фоновые картинки являются одним из основных элементов, ибо никаких оформительских элементов, вставленных с помощью Img на страницах современных сайтов, нет.

Поэтому фоновые картинки и изображения играют очень важную роль в современной верстке с использованием CSS (поговорим об этом в ближайших статьях). Пока же мы рассмотрим как используются картинки для фона сайта в Html с помощью атрибута Background тэга Body. Атрибут Background, который может использоваться в теге Body и тегах Html таблицы, показывает путь до файла фонового изображения, которым будет залита web страница или же таблица (ячейка таблицы).

Например, добавив в тег Body атрибут Background следующего вида:

<body background="http://ktonanovenkogo.ru/image/bgkletka.gif">

Мы получим фон для нашего сайт, состоящий из размноженной фоновой картинки, которой будет заполнена вся видимая область на манер плитки:

Фоновая картинка в Html, начиная с левого верхнего угла, начинает повторяться сразу по двум осям (абсцисс и ординат). Последующее фоновое изображение состыковывается с предыдущим и т.д. Кстати, если вы захотите залить фон страницы сайта или фон таблицы одним цветом, то для этого вам нужно будет использовать уже не Background, а атрибут bgcolor, в качестве значения которого вы может вставить код Html цвета, например, так:

<body bgcolor="#f0f8ff">

То получим следующий цвет фона для сайта заданный через Html атрибут bgcolor:

Точно так же, как и в случае с атрибутом background, атрибут bgcolor можно будет еще использовать и для задания фона всей Html таблицы или же отдельных ее элементов.

Удачи вам! Да, можете еще посмотреть бесплатные видеоуроки. До скорых встреч на страницах блога KtoNaNovenkogo.ru