Справочник html по изображениям

Вторник, 27 Февраля 2018 г. 14:00 + в цитатник

Цитата сообщения Шадрина_Галина

Прочитать целиком В свой цитатник или сообщество!

Справочник html по изображениям

Имя	Код	Имя	Код	Имя	Код	Имя	Код
aqua	#00FFFF	green	#008000	navy	#000080	silver	#C0C0C0
black	#000000	gray	#808080	olive	#808000	teal	#008080
blue	#0000FF	lime	#00FF00	purple	#800080	white	#FFFFFF
fuchsia	#FF00FF	maroon	#800000	red	#FF0000	yellow	#FFFF00

В этом посте, постараюсь собрать все коды и теги по КАРТИНКАМ, которые нам нужны для создания постов, рамочек и поздравительных открыток.

Код любой картинки в сети в самом простом варианте, без рамочек, украшения и прочего:

<img src="АДРЕС КАРТИНКИ">

В этот код просто подставляем Уникальный адрес (URL) картинки.

Как и где найти АДРЕС КАРТИНКИ

Уникальный адрес (URL) типа http://…jpg выдает картинке фотохостинг (специальный сайт для картинок, куда вы ее грузите. Например РАДИКАЛ, или ЯНДЕКС ФОТО.), куда ее необходимо закачать с вашего компьютера.

По сути, любая картинка, которую вы видите в сети — вебстраничка, имеющая свой уникальный адрес, начинающийся с http://…

(посмотреть адрес так же можно в свойствах картинки)

Чтоб узнать URL картинки, нужно кликнуть на нее правой кнопкой мыши.

В Хроме:

В Internet Explorer — правой кнопкой мыши — Свойства — копируем Адрес (URL)

В Mozilla Firefox — правый клик — Копировать ссылку на изображение

В Opera — правый клик — Копировать адрес изображения

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

Запомните: Если вы удаляете картинку с хостинга (например, с РАДИКАЛА, или с альбомов ЯНДЕКС ФОТО), то она ИСЧЕЗНЕТ и из записи в вашем блоге!

Как сделать картинку ПО ШИРИНЕ ЗАПИСИ

Если картинка очень большая а вы хотите, например? вставить ее в рамочку - тогда нам нужен будет такой код:
<img src="АДРЕС КАРТИНКИ" width="100%" />

Где параметр width="100% говорит нам о том, что изображение должно занять 100% ширины. Это значение можно менять.

А если наоборот - картинка слишком мала, то используйте первый код, т.к. при растяжении маленького изображения на всю ширину теряется его качество.

Вставка изображения из интернета

Если знаете адрес картинки в сети (URL) вида http://…jpg вам просто надо вставить его между кавычек вот в это код:

<img src="АДРЕС КАРТИНКИ">

Так вставляются картинки в комментарии к записям в ЖЖ и других блогах, везде, где нет кнопки для публикации картинок.

«обтекание» картинки текстом

Картинка слева, текст справа:
для этого просто добавьте в код картинки:

align=left hspace=20

После добавления тега СЛЕВА, код картинки примет вид:

<img src="АДРЕС КАРТИНКИ" 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> — все, заключенное в этот контейнер будет находиться на одной строке. Применять с осторожностью, можно деформировать пост.

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

С помощью «неразрывного пробела»:  
Расстояние, равное 4 пробелам будет выглядеть так:

       

Делаются такие пробелы клавишей ПРОБЕЛ, или можно вставлять приведенные выше теги.
Вставляется меж кодов картинок, что бы они не сливались.

Всплавающая подсказка, при наведении курсора

Если надо сделать всплывающую подсказку при наведении курсора на картинку, как здесь:
— то добавляем в код картинки title="ВСПЛЫВАЮЩЕЕ СЛОВО"

<img src="АДРЕС КАРТИНКИ" alt="" title="ВСПЛЫВАЮЩЕЕ СЛОВО">

Добавляем к картинке рамочку.

Если надо вставить картинку в цветную рамку, добавьте в код картинки:

style="border:5px solid red;" — задана красная рамка толщиной 5 пикселей

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

где - 5px толщина рамки (ее можно менять)
red - название цвета. Тоже можно заменять на нужный.

Пример картинки в синей рамке.

Как быстро вставить картинку с любого другого сайта:

Для этого используем следующий код.

<img src="АДРЕС КАРТИНКИ">

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

Меняем размер картинки.

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

Оптимальный способ уменьшить размер фото на компьютере:

Уменьшать, увеличивать размер картинки, или уменьшать ее "вес", оптимальнее всего на фотохостингах.
Вот адреса, с уроками как это сделать

Сайт, на котором можно не только УМЕНЬШИТЬ картинку, но и УВЕЛИЧИТЬ - НАХОДИТСЯ ЗДЕСЬ
Развернуть картинку, клипарт или анимашку в другую сторону СМОТРИМ ЗДЕСЬ
Как быстро обрезать или уменьшить анимированныю картинку СМОТРИМ ЗДЕСЬ
Он-лайн сервисы для сжатия фото НАХОДИТСЯ ЗДЕСЬ
Объединение двух фотографий в одну онлайн СМОТРИМ ЗДЕСЬ

Как вставить картинки в свои сообщения СМОТРИМ ЗДЕСЬ

Центрирование:
текст (картинка) по центру
<center>ваш текст (картинка) </center>

Выравнивание текста (картинки) по правому краю поста:
<div align=right> ваш текст(картинка) </div>

Выравнивание текста (картинки) по всей ширине поста:
<div align=justify> ваш текст </div>

Отступ (для цитат и определений, текст отделен пустой строкой и отступ слева 8 пробелов):
<blockquote> текст </blockquote>

Сделать картинку бегущей с помощью кодов.

Код бегущей картинки:

<marquee><img src="АДРЕС КАРТИНКИ В СЕТИ"></marquee>

Таблица «базовых» цветов (вводим «Имя» или «Код» на ЛиРу работают оба кода):

Имя Код Имя Код Имя Код Имя Код
aqua #00FFFF green #008000 navy #000080 silver #C0C0C0
black #000000 gray #808080 olive #808000 teal #008080
blue #0000FF lime #00FF00 purple #800080 white #FFFFFF
fuchsia #FF00FF maroon #800000 red #FF0000 yellow #FFFF00

Сайты для обработки фото. Все представленные сервисы бесплатные. Проверено, все ссылки рабочие и безопасные!

СОЗДАТЬ СЛАЙД - ШОУ
ДОБАВИТЬ ФОТОЭФФЕКТ. АНИМИРОВАТЬ ФОТО.
НАПИСАТЬ ТЕКСТ НА ФОТО
УВЕЛИЧИТЬ,УМЕНЬШИТЬ,ПОДПИСАТЬ.
СОЗДАТЬ БЛЁСТКИ НА ФОТО
ВСТАВИТЬ ЛИЦО В ШАБЛОН.СОЗДАТЬ РОЛИК.
ВСЕВОЗМОЖНЫЕ ЭФФЕКТЫ,КОЛЛАЖИ, АВАТАРКИ
СОЗДАТЬ КОЛЛАЖ ИЗ ФОТО
МНОЖЕСТВО ФОТОРАМОК.ФОТОЭФФЕКТЫ.
ВСЕВОЗМОЖНЫЕ ЭФФЕКТЫ,ГЛИТЕРЫ
УВЕЛИЧИТЬ,УМЕНЬШИТЬ. ВСЕВОЗМОЖНЫЕ ЭФФЕКТЫ
СОЗДАТЬ ЭФФЕКТЫ ДОЖДЯ,СНЕГА
СОЗДАТЬ ПРИКОЛЬНОЕ ФОТО
ИЗМЕНИТЬ РАЗМЕР,ПОДПИСАТЬ
МНОЖЕСТВО ФОТОРАМОК
ФОТОРАМКИ.ФОТОЭФФЕКТЫ
МНОЖЕСТВО ФОТОЭФФЕКТОВ И РАМОК
РАМКИ,ШАБЛОНЫ,ЭФФЕКТЫ
ОНЛАЙН РЕДАКТОР ФОТО
РЕДАКТОР ПРИКОЛЬНЫХ ФОТО
МНОЖЕСТВО РАМОК И ЭФФЕКТОВ
МОРЕ РАМОЧЕК,ЭФФЕКТЫ
ФОТОРАМКИ.РАЗНЫЕ ЭФФЕКТЫ,НАДПИСИ И Т.Д
ДЕТСКИЕ ФОТОРАМКИ ОНЛАЙН
МНОЖЕСТВО КРАСИВЫХ РАМОЧЕК
МНОГО ВАРИАНТОВ РАМОЧЕК
АНИМИРОВАТЬ ФОТО
СОЗДАТЬ ФОТОМОНТАЖ
ФОТОРАМОЧКИ ДЕТСКИЕ.
СОЗДАТЬ АНИМИРОВАННУЮ АВАТАРКУ
ЗВУКОВЫЕ ФЛЕШ ЭФФЕКТЫ ОНЛАЙН
ФОТОРАМКИ ОНЛАЙН
КРАСИВЫЕ ФОТОРАМОЧКИ
ОТЛИЧНЫЙ ФОТОРЕДАКТОР
ФОТОРЕДАКТОР ОНЛАЙН
ОБРЕЗАТЬ.ПОДПИСАТЬ ФОТО И Т.Д
СДЕЛАТЬ ФОТО С ЭФФЕКТОМ ВОДЫ
АНИМИРОВАННЫЕ ФОТОРАМКИ

Серия сообщений "Шпаргалки":

Часть 1 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 2 - Несколько оригинальных формул и ссылок для дневника
...
Часть 27 - Проигрывание музыки при открытии поста
Часть 28 - Вставляем картинки в свои сообщения
Часть 29 - Справочник html по изображениям
Часть 30 - Как сохранить гифку из Одноклассников

Рубрики:

Всё по работе с текстом коды html

Метки: справочник

<a href="https://www.liveinternet.ru/users/6211323/post431152321/">РЎРїСЂР°РІРѕС‡РЅРёРє html РїРѕ РёР·РѕР±СЂР°Р¶РµРЅРёСЏРј</a><br/>РЎРїСЂР°РІРѕС‡РЅРёРє  html  РїРѕ РёР·РѕР±СЂР°Р¶РµРЅРёСЏРј

Р’ СЌС‚РѕРј РїРѕСЃС‚Рµ, РїРѕСЃС‚Р°СЂР°СЋСЃСЊ СЃРѕР±СЂР°С‚СЊ РІСЃРµ РєРѕРґС‹ Рё С‚РµРіРё РїРѕ РљРђР РўРРќРљРђРњ, РєРѕС‚РѕСЂС‹Рµ РЅР°Рј РЅСѓР¶РЅС‹ РґР»СЏ СЃРѕР·РґР°РЅРёСЏ РїРѕСЃС‚РѕРІ, СЂР°РјРѕС‡РµРє Рё РїРѕР·РґСЂР°РІРёС‚РµР»СЊРЅС‹С… РѕС‚РєСЂС‹С‚РѕРє.

РљРѕРґ Р»СЋР±РѕР№ РєР°СЂС‚РёРЅРєРё РІ СЃРµС‚Рё РІ СЃР°РјРѕРј РїСЂРѕСЃС‚РѕРј РІР°СЂРёР°РЅС‚Рµ, Р±РµР· СЂР°РјРѕС‡РµРє, СѓРєСЂР°С€РµРЅРёСЏ Рё РїСЂРѕС‡РµРіРѕ:

&lt;img src="РђР”Р Р•РЎ РљРђР РўРРќРљР"&gt;

Р’ СЌС‚РѕС‚ РєРѕРґ РїСЂРѕСЃС‚Рѕ РїРѕРґСЃС‚Р°РІР»СЏРµРј РЈРЅРёРєР°Р»СЊРЅС‹Р№ Р°РґСЂРµСЃ (URL) РєР°СЂС‚РёРЅРєРё.

РљР°Рє Рё РіРґРµ  РЅР°Р№С‚Рё РђР”Р Р•РЎ РљРђР РўРРќРљР

РЈРЅРёРєР°Р»СЊРЅС‹Р№ Р°РґСЂРµСЃ (URL) С‚РёРїР° http://вЂ¦jpg РІС‹РґР°РµС‚ РєР°СЂС‚РёРЅРєРµ С„РѕС‚РѕС…РѕСЃС‚РёРЅРі (СЃРїРµС†РёР°Р»СЊРЅС‹Р№ СЃР°Р№С‚ РґР»СЏ РєР°СЂС‚РёРЅРѕРє, РєСѓРґР° РІС‹ РµРµ РіСЂСѓР·РёС‚Рµ. РќР°РїСЂРёРјРµСЂ Р РђР”РРљРђР›, РёР»Рё РЇРќР”Р•РљРЎ Р¤РћРўРћ.), РєСѓРґР° РµРµ РЅРµРѕР±С…РѕРґРёРјРѕ Р·Р°РєР°С‡Р°С‚СЊ СЃ РІР°С€... <a href="https://www.liveinternet.ru/users/6211323/post431152321/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>