Анатолий Мигов (micoff) wrote,
Анатолий Мигов
micoff

ПОЛЕЗНЫЕ ШТУЧКИ: ВСТАВЛЯЕМ В ТЕКСТ КАРТИНКИ И ФОТО

 
Решил описать некоторые полезные штучки, которым сам научился. Да и самому для себя систематизировать знания. Для начала: как вставить картинку в текст поста или в комментарий; как вставить в картинку в рамку; как расположить текст справа либо слева от картинки.
Для вставки картинки или фото в текст поста необходимо перейти из "Визуального редактора" в режим "HTML". Для вставки в комментарий - прямо в поле для текста комментария.
Проще всего коды не набирать самому, а просто копировать и вставлять в нужное место.
 

ВСТАВЛЯЕМ КАРТИНКУ В ТЕКСТ


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

Например, я хочу вставить фото социальной рекламы (Антиспид).
Адрес картинки в интернете: http://www.sostav.ru/articles/rus/2009/24.08/news/images/2onelife2.jpg
Добавляю (без пробелов) в адрес <img src="..."> Получиться должно так (адрес я написал сокращенно)
<img src="http://www.sostav.....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>
(картинка будет слева, как в данном примере)

Обратите внимание, что этот код вставляется между " и > (с пробелом после " ).
Tags: жж, полезные штучки
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 65 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →