В этом посте, постараюсь собрать все коды и теги по КАРТИНКАМ, которые нам нужны для создания постов, рамочек и поздравительных открыток.

Код любой картинки в сети в самом простом варианте, без рамочек, украшения и прочего:

<img src="АДРЕС КАРТИНКИ">

В этот код просто подставляем Уникальный адрес (URL) картинки.

Как и где найти АДРЕС КАРТИНКИ

Уникальный адрес (URL) типа http://…jpg выдает картинке фотохостинг (специальный сайт для картинок, куда вы ее грузите. Например РАДИКАЛ, или ЯНДЕКС ФОТО.), куда ее необходимо закачать с вашего компьютера.

По сути, любая картинка, которую вы видите в сети — вебстраничка, имеющая свой уникальный адрес, начинающийся с http://…

(посмотреть адрес так же можно в свойствах картинки)


Чтоб узнать URL картинки, нужно кликнуть на нее правой кнопкой мыши.

В Хроме:

В Internet Explorer — правой кнопкой мыши — Свойства — копируем Адрес (URL)

В Mozilla Firefox — правый клик — Копировать ссылку на изображение

В Opera — правый клик — Копировать адрес изображения

Многие «чайники» часто считают, что можно показывать в блоге картинки прямо со своего компьютера. Это не так. Для этого ваш компьютер должен работать в режиме вебсервера.

Запомните: Если вы удаляете картинку с хостинга (например, с РАДИКАЛА, или с альбомов ЯНДЕКС ФОТО), то она ИСЧЕЗНЕТ и из записи в вашем блоге!

Как сделать картинку ПО ШИРИНЕ ЗАПИСИ

Если картинка очень большая а вы хотите, например? вставить ее в рамочку - тогда нам нужен будет такой код:
<img data-cke-saved-src="АДРЕС КАРТИНКИ" src="АДРЕС КАРТИНКИ" width="100%" />

Где параметр width="100% говорит нам о том, что изображение должно занять 100% ширины. Это значение можно менять.

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

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

Если знаете адрес картинки в сети (URL) вида http://…jpg вам просто надо вставить его между кавычек вот в это код:

<img src="АДРЕС КАРТИНКИ">

Так вставляются картинки в комментарии к записям в ЖЖ и других блогах, везде, где нет кнопки для публикации картинок.

«обтекание» картинки текстом

Картинка слева, текст справа:
для этого просто добавьте в код картинки:

align=left hspace=20


После добавления тега СЛЕВА, код картинки примет вид:

<img src="АДРЕС КАРТИНКИ" align=left hspace=20>

Добавляем следующие теги:
align=left – картинка слева, текст справа
align=right — картинка справа, текст слева
hspace=20 — расстояние между текстом и картинкой 20 пиксел по горизонтали
vspace=20 — расстояние между текстом и картинкой 20 пиксел по вертикали

Более подробно, с примерами и кодами КАК РАСПОЛОЖИТЬ КАРТИНКУ ПО ОТНОШЕНИЮ К ТЕКСТУСМОТРИМ ЗДЕСЬ

Код картинки с плавным обтеканием текстом справа и снизу (или сверху):

<img src="http:…" align=left hspace=20 vspace=15>

Прекратить обтекание и вернуть текст под картинку можно тэгом <br>


Закрывать не надо, он работает один.

<br> выполняет перенос на следующую строку.
В блогсервисах и редакторах текста его заменяет нажатие Enter.

<br><br><br> — три пустые строки.

Вставить две и более картинки горизонтально, то есть рядом друг с другом


<nobr>Текст (картинки)</nobr>— все, заключенное в этот контейнер будет находиться на одной строке. Применять с осторожностью, можно деформировать пост.

Регулируем расстояние меж картинками по-горизонтали:

С помощью «неразрывного пробела»:  &nbsp;
Расстояние, равное 4 пробелам будет выглядеть так:

&nbsp; &nbsp; &nbsp; &nbsp;

Делаются такие пробелы клавишей ПРОБЕЛ, или можно вставлять приведенные выше теги.
Вставляется меж кодов картинок, что бы они не сливались.

Всплавающая подсказка, при наведении курсора

Если надо сделать всплывающую подсказку при наведении курсора на картинку, как здесь:
— то добавляем в код картинки title="ВСПЛЫВАЮЩЕЕ СЛОВО"

<img src="АДРЕС КАРТИНКИ" alt="" title="ВСПЛЫВАЮЩЕЕ СЛОВО">

Добавляем к картинке рамочку.

Если надо вставить картинку в цветную рамку, добавьте в код картинки:

style="border:5px solid red;"— задана красная рамка толщиной 5 пикселей

Тогда код будет выглядеть вот так.
<img src="АДРЕС КАРТИНКИ"style="border:5px solid red">

где - 5px толщина рамки (ее можно менять)
red - название цвета. Тоже можно заменять на нужный.

Пример картинки в синей рамке.

Как быстро вставить картинку с любого другого сайта:

Для этого используем следующий код.

<img src="АДРЕС КАРТИНКИ">

затем войдите в «Свойства» картинки на этом сайте, скопируйте ее URL и вставьте в код меж кавычек

Меняем размер картинки.

Можно с помощью атрибутов width (ширина) и height (высота).
Вставьте в код картинки, например, width=300 и ваша картинка будет шириной 300 пикселов,
высота подгонится пропорционально.
Браузер при этом все равно подгружает изначальную картинку, и если та весила 3МБ, то меньше не станет:)


Оптимальный способ уменьшить размер фото на компьютере:

Уменьшать, увеличивать размер картинки, или уменьшать ее "вес", оптимальнее всего на фотохостингах.
Вот адреса, с уроками как это сделать

Сайт, на котором можно не только УМЕНЬШИТЬ картинку, но и УВЕЛИЧИТЬ - НАХОДИТСЯ ЗДЕСЬ
Развернуть картинку, клипарт или анимашку в другую сторону СМОТРИМ ЗДЕСЬ
Как быстро обрезать или уменьшить анимированныю картинку СМОТРИМ ЗДЕСЬ
Он-лайн сервисы для сжатия фото НАХОДИТСЯ ЗДЕСЬ
Объединение двух фотографий в одну онлайн СМОТРИМ ЗДЕСЬ

Как вставить картинки в свои сообщения СМОТРИМ ЗДЕСЬ

Центрирование:

<center>ваш текст (картинка) </center>

Выравнивание текста (картинки) по правому краю поста:
<div align=right> ваш текст(картинка) </div>

Выравнивание текста (картинки) по всей ширине поста:
<div align=justify> ваш текст </div>

Отступ (для цитат и определений, текст отделен пустой строкой и отступ слева 8 пробелов):
<blockquote> текст </blockquote>

Сделать картинку бегущей с помощью кодов.

Таблица «базовых» цветов (вводим «Имя» или «Код» на ЛиРу работают оба кода):

Сайты для обработки фото. Все представленные сервисы бесплатные. Проверено, все ссылки рабочие и безопасные!