Поиск








  


Главная » Статьи » Web дизайн

Изображения Images The code for any image on the network is in the simple version: <img src = "http: // site / ... jpg">

 

VideoGIF Link

<p><a href="http://cniatcdat.ucoz.ru/load/nedvizhimost_arenda/reklama/1-1-0-241#.YCFf2ugzbIU"><img alt="" src="http://cniatcdat.ucoz.ru/_tbkp/gif_logotip_moj.gif" style="width: 250px; height: 141px;" /></a></p>

од любой картинки в сети в простом варианте:
<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МБ, то меньше не станет:)

 

 

 

 
 

 

Категория: Web дизайн | Добавил: натанатаната (09.01.2021)
Просмотров: 273 | Теги: on the network is in the, Изображения Images The code for any, simple version: img src = http: // | Рейтинг: 0.0/0
Всего комментариев: 0
avatar

 
главная доска объявлений Правила пользования Доской ©
Автомобили недвижимость Промышленное оборудование Для офиса Строительство Разное Бизнес, сотрудничество животные Бытовые товары
Компьютеры Услуги в разных сферах