"ВЕСЁЛЫЕ КАРТИНКИ"

[250x250]

Редактируя пост или отвечая на комментарии, нам порой с большим трудом удается избежать соблазна его приукрасить. Картинки в тему и нет, безумное количество блесток и сверканий, - красотища... Конечно, каждый автор пытается создать свой, неповторимый облик для своего Блога, и его можно понять. Но если уж мы решаем вставить в тело текста картинку, то мы должны уметь редактировать её размеры, и знать каким образом это делается.

Ведь большие картинки, доставляют массу неудобств как для человека решившего прочесть пост, так и для автора-владельца ресурса. Замедляется загрузка страницы, что отталкивает потенциальных читателей. Владельцы ресурсов, порой вынуждены идти на радикальные меры, и отключать отображение картинок в комментариях... Их прекрасно можно понять, ведь безумно неприятно, когда под надписью - Спасибо, вставляется картинка форматом на пол страницы... Если желаете сделать приятное автору, напишите пару тёплых слов, или кликните на ссылку - Нравится... Поверьте, это будет намного приятнее.)

И так, - Изображения

Код любой картинки в сети в простом варианте:
<img src="http://site/…jpg">
Уникальный адрес (URL) типа http://site/…jpg выдает картинке фотохостинг (специальный сайт), куда ее необходимо закачать с вашего компьютера. По сути, любая картинка, которую вы видите в сети – отдельная веб-страничка, имеющая свой уникальный адрес, начинающийся с http://… (посмотреть его всегда можно в свойствах картинки)
Среди «чайников» кочует миф, что можно показывать в блоге картинки прямо со своего компьютера. Это не так. Для этого ваш компьютер должен быть круглосуточно работающим веб-сервером.

Запомните: Если вы удаляете картинку из галереи хостинга (например, «фотоальбома жж»), то она исчезнет и из вашего блога!

Резюме: если знаете адрес своей или чей-то картинки формата http://…jpg вы можете опубликовать ее кодом:
<img src="http://…jpg">
Так вставляются картинки в комментарии к записям.

Как сделать, чтобы текст «обтекал» картинку?
Легко – картинка слева, текст справа:
добавляем в код картинки:
align=left hspace=20
Код картинки примет вид:
<img src="http:…" 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;
Расстояние, равное 8 пробелам будет выглядеть так:
&nbsp; &nbsp; &nbsp; &nbsp;
Вставляется меж кодов картинок.

Если надо всплывающую подсказку при наведении курсора на картинку, как здесь: – введите в код картинки title="ТЕКСТ"

Если надо цветную рамку , добавьте в код картинки:style="border:5px solid red;"– задана красная рамка толщиной 5 пикселей

Чтоб быстро вставить картинку с другого сайта, вставьте в пост:
<img src="">
затем войдите в «Свойства» картинки на этом сайте, скопируйте ее URL и вставьте в код меж кавычек

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

Источник

Серия сообщений "Теги HTML":
Часть 1 - Бесплатные библиотеки, огромный выбор.
Часть 2 - В помощь работе с HTML кодами (тегами)
...
Часть 27 - Инструменты для подбора цвета (Free OnLine Service)
Часть 28 - HTML - Таблицы
Часть 29 - HTML - Вставляем в пост изображения
Часть 30 - HTML - Оформляем ссылки
Часть 31 - HTML - Что же это такое?
...
Часть 42 - Латинские буквы с диакритическими знаками - Спецсимволы
Часть 43 - Греческие Алфавит - Спецсимволы
Часть 44 - Таблица HTML - Спецсимволов (просто огромная)