• 1882
  • 0
  • Автор: --------------
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Код любой картинки в сети в простом варианте:

<img src="http://site/…jpg">

Уникальный адрес (URL) типа http://site/…jpg выдает картинке фотохостинг (специальный сайт), куда ее необходимо закачать с вашего компьютера. По сути, любая картинка, которую вы видите в сети — отдельная веб-страничка, имеющая свой уникальный адрес, начинающийся с http://… (посмотреть его всегда можно в свойствах картинки)

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



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



Резюме: если знаете адрес своей или чей-то картинки формата 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> — три пустые строки.

Вставить две и более картинки горизонтально:

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

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

С помощью «неразрывного пробела»:  &nbsp;

Расстояние, равное 8 пробелам будет выглядеть так:



Вставляется меж кодов картинок, есс-но

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

Если надо цветную рамку , добавьте в код картинки: — задана красная рамка толщиной 5 пикселей

Чтоб быстро вставить картинку с другого сайта, вставьте в пост:



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

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


Можешь почитать и вот эту статейку "Падающий снег на сайт на css и js"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

TWIG -что это?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element