ПОЛЕЗНЫЕ ШТУЧКИ: ВСТАВЛЯЕМ В ТЕКСТ КАРТИНКИ И ФОТО
Решил описать некоторые полезные штучки, которым сам научился. Да и самому для себя систематизировать знания. Для начала: как вставить картинку в текст поста или в комментарий; как вставить в картинку в рамку; как расположить текст справа либо слева от картинки.
Для вставки картинки или фото в текст поста необходимо перейти из "Визуального редактора" в режим "HTML". Для вставки в комментарий - прямо в поле для текста комментария.
Проще всего коды не набирать самому, а просто копировать и вставлять в нужное место.
ВСТАВЛЯЕМ КАРТИНКУ В ТЕКСТ
Код будет выглядеть так:
Например, я хочу вставить фото социальной рекламы (Антиспид).
Адрес картинки в интернете: http://www.sostav.ru/articles/rus/2009/24.08/news/images/2onelife2.jpg
Добавляю (без пробелов) в адрес
> Получиться должно так (адрес я написал сокращенно)
Получается картинка:
На самом деле картинка в оригинале была очень большого размера и я ее уменьшил. Для этого в код картинки надо вставить атрибут width (ширина) или height (высота). Картинка уменьшится автоматически пропорционально, независимо от того, укажете вы высоту или ширину. В данном случае я вставил ширину - width=300.
Код для вставки такой " width=300 Вставить надо в конце адреса картинки, перед символом "> Получиться должно так (в конце кода картинки) ...2onelife2.jpg" width=300"> Обратите внимание на пробел после " и перед width
300 - это в данном случае ширина получившейся картинки.
Если бы я поставил ширину 150, то получилось бы так:
ВСТАВИТЬ КАРТИНКУ В РАМКУ
В код картинки надо вставить style="border:5px solid black;
Здесь 5px - это толщина рамки, а black - цвет рамки черный.
Получиться должно так (в конце кода картинки) ...2onelife2.jpg" width=150 style="border:5px solid black;">
Обратите внимание на пробел между width=150 и style
Получилась картинка в рамке:
Если заменить black на red (красный), и изменить толщину (заменить 5 на 10), то получится так:
Цвета можно выбирать любые. Можно вместо буквенного обозначения цвета ставить цифровой код:
aqua #00FFFF green #008000 navy #000080 silver #C0C0C0
black #000000 grey #808080 olive #808000 teal #008080
blue #0000FF lime #0FF00 purple #80008 white #FFFFFF
fuchsia #FF00FF maroon #800000 red #FF0000 yellow #FFFF00
РАСПОЛОЖИТЬ ТЕКСТ СПРАВА ИЛИ СЛЕВА ОТ КАРТИНКИ
Чтобы текст был сбоку от картинки, надо вставить код align=left hspace=15 или align=right hspace=15
Здесь right - картинка справа, текст слева; left - картинка слева, тест справа; hspace - это расстояние между картинкой и текстом (в данном примере - 15 пикселей, можно выбрать любое значение).
В результате весь текст, который был под картинкой, займет место сбоку от нее.
После вставки получиться должно так (в конце кода картинки)
...2onelife2.jpg" width=150 style="border:3px solid #FF00FF;" align=left hspace=15>
(картинка будет слева, как в данном примере)
Обратите внимание, что этот код вставляется между " и > (с пробелом после " ).