Справочник html по изображениям.Шадрина Галина

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

---

Код любой картинки в сети в самом простом варианте, без рамочек, украшения и прочего: <img src="АДРЕС КАРТИНКИ"> В этот код просто подставляем Уникальный адрес (URL) картинки. [more=]

---

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

---

Регулируем расстояние меж картинками по-горизонтали: С помощью «неразрывного пробела»:  &nbsp; Расстояние, равное 4 пробелам будет выглядеть так:
&nbsp; &nbsp; &nbsp; &nbsp; Делаются такие пробелы клавишей ПРОБЕЛ, или можно вставлять приведенные выше теги. Вставляется меж кодов картинок, что бы они не сливались.

---

Всплавающая подсказка, при наведении курсора Если надо сделать всплывающую подсказку при наведении курсора на картинку, как здесь: — то добавляем в код картинки 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

---

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

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

[/more]

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

Маленький секрет качества Гиф Анимации в GIF Movie Gear- Уроки Веденея!

Ссылка на программу:
https://yadi.sk/d/yVlCHbzI3QC8Yw

Несколько движений подряд,по одному уроку.rss_akmaya_blog

Понравились уроки по анимации. Просто и красиво

Это цитата сообщения ВалюшаПП
 

Волшебная лаврушка.интервал

Лавр – символ чистоты, целеустремленности, триумфа и бессмертия. Он дает жизненную силу, успех и исполнение желаний.
Древние римляне и греки приписывали лавру магические свойства, использовали его в своих ритуалах и верили, что лавровый лист приносит победу счастье и успех. Попробуйте и вы привлечь к себе счастье с помощью, казалось бы, совсем обычной “лаврушки”.






Волшебные свойства лаврового листа:

Напишите желание на лавровом листе, потом киньте его в огонь – и все, что задумали, со временем сбудется.

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

Если постоянно носить с собой лавровый лист, он убережет от неприятностей и несчастных случаев.

Чтобы привлечь позитивные изменения, разотрите пальцами “лаврушку”, вдохните аромат и вслух, громко озвучьте свою просьбу высшим силам.

Положите лист лавра под подушку: он будет навевать хорошие сны.

Аромат лавра спасает от переутомления, а также дает дополнительные силы тем, кто занимается спортом.

Если четыре листочка положить под коврик возле порога, они принесут успех. Листочки должны быть направлены черешками один к другому, фигура будет напоминать крест. Один раз в месяц, на новую луну, меняйте листья на новые.

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

Лавровая веточка над кроватью ребенка сбережет его от сглаза.
Ритуал для привлечения денег: возьмите один листик лавра, капните на него апельсиновое эфирное масло и поместите в то место, где обычно держите сбережения – он будет притягивать туда новые финансы, их поступление будет увеличиваться.

Еще Гиппократ утверждал: если разложить высушенные листья лавра по краю кровати роженицы, то это существенно успокоит боли при родах.

Вот такой он «волшебный» лист, подаренный человеку богами!!!:)

Анимация заснеженных веточек.Beauti Flash

Размер коллажа 800px x 500px Всем привет! В этом уроке сделаем работу с анимацией. Рабочий материал, скачать -  Так как многие не видят изображения в скринах, скрины делать не буду. Постараюсь просто объяснить ход работы. Загружаете в фотошоп файл в PSD. Создаете 2 дубликата слоя с фоном. Трем слоям добавим плагин - Alien Skin Xenofex - Constellation. Настройки: - 2,64 - 7 - 5 - 0 - 100 - 100 Настройки можете изменять в зависимости от вашего фото. Галочку на прозрачность не ставим, плагин добавляем на три слоя с фоном. В работе уже есть кадры, футаж распределен по кадрам. Время выставлено. Вам нужно три слоя с фоном которым вы добавили плагин распределить по кадрам. Рамочке тоже добавим плагин, только галочку поставим для прозрачности. Создаем два дубликата слоя с белой рамочкой и добавляем плагин с настройками: - 2,21 - 6 - 7 - 0 - 100 - 100 Слои распределяем по кадрам. Глазки на слоях включите. При необходимости можете заменить клипарт. Приятного творчества!   BFlash

Для чего втыкать спички в горшки с растениями?Наталья

Комнатные растения не только добавляют жилищу уюта, но увеличивают содержание кислорода в помещении. К сожалению, иногда случается так, что растение начинает чахнуть по необъяснимым причинам, как бы старательно ты его ни поливала…



Причиной этого могут быть мелкие вредители, мошки, которых сложно увидеть невооруженным глазом.


Мошки в цветочных горшках


К счастью, существует один простой трюк, который позволит быстро избавиться от мошек в цветочных горшках. Для его выполнения понадобится лишь несколько обычных спичек! Воткни их головками в землю на расстоянии 5 см от края горшка, полей цветы. Через 2 для спички замени другими, а спустя еще 2 дня мошки совсем пропадут.



Теперь необязательно поливать вазон инсектицидами! Фосфор и сера, содержащиеся в составе смеси для спичечных головок, просачиваются в почву и надежно избавляют растение от непрошеных гостей.

Источник

Щеночек.

Несколько хитростей.candra

Низкий поклон тем женщинам, которые занимаются приготовлением еды самостоятельно, ограждая свою семью от полуфабрикатов и прочих вредных продуктов. Мы знаем, насколько это кропотливый труд: львиную долю времени занимает не только сам процесс готовки, но и поиск подходящих блюд, продуктов, а также новых способов их приготовления.

Чтобы хоть немного облегчить эту задачу, предлагаем вам, наши хозяюшки, несколько хи

тростей, которые помогут сэкономить драгоценное время и сделать ваши кулинарные шедевры еще вкуснее, а приготовление проще.
Кулинарные трюки
Чтобы скорлупа легко снималась с вареного яйца, добавьте в воду дольку лимона или половину чайной ложки соды.





2. Что может испортить отварные домашние пельмешки? Только жесткое тесто. Тем, кто часто балует себя этим блюдом, советуем вооружиться стаканом холодной воды и в определенный момент влить воду в кипящие пельмени.





3. Теперь не нужно бежать к соседке, чтобы одолжить яйцо для выпечки, отсутствие которого вы обнаружили в самый неподходящий момент. Его легко заменит половина спелого банана.





4. Бывает, что в блюдо необходимо добавить несколько зубчиков, а то и головок чеснока. Чистить их — такая морока! Облегчит задачу микроволновка: поместите в нее чеснок и подержите его внутри 15 секунд при минимальной мощности. После этого шелуха очистится гораздо легче.





5. Перед покупкой болгарского перца обратите внимание на количество камер на дне. Перец, у которого 3 камеры, слаще, его можно употреблять в чистом виде, а тот, у которого 4, — более упругий и горьковатый, он идеален для приготовления разных блюд.





6. Зубная нить легко разрежет любую выпечку, в том числе и торт. Этот трюк подойдет и для сырого теста, например, сгодится в приготовлении булочек с корицей.





7. Жареная картошка — частый ужин во многих семьях. Если ваша семья — не исключение, попробуйте сэкономить время и растительное масло, приготовив вот такую картошечку в духовке. Просто вымойте клубни, сделайте надрезы, сбрызните маслом, посолите и добавьте специи. 40 минут в духовке при 220 градусах — готово! В разрезы можно положить любую начинку: сало, сливочное масло или ломтики плавленого сыра.





8. Чтобы не плакать от лука при нарезке, предварительно поместите его на 15 минут в морозилку.





9. Из густого йогурта получится полезное и вкусное лакомство для детей. Поместите йогурт в кондитерский шприц и выдавите капельки на пергамент для выпечки. Всего 1 час в морозилке — и можно наслаждаться!





http://sovet-ok.ru/vsegda-kladu-luk-v-morozilnik-uznav-zachem-vy-budete-delat-takzhe/

Пишем красиво затухающим текстом.Шадрина Галина

Создаем вот такие красивые надписи, на прозрачном фоне, легко и быстро.




А теперь более подробно, как сделать такую надпись.

Идем на сайт ГЕНЕРАТОР КРАСИВОГО ТЕКСТА, и жмем кнопку ИЗМЕНИТЬ ЛОГОТИП.



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



Теперь начинаем редактировать свой текст. Проставляем размер текста. Шрифт проставлять НЕ ИМЕЕТ смысла, так как кириллицу они все равно НЕ ПОДДЕРЖИВАЮТ. Хотя можете поэкспериментировать, может и найдете что нибудь.
Затем нажимаем кнопочку со стрелкой вниз, что б открыть ДОПОЛНИТЕЛЬНЫЕ функции редактирования.



Открылось еще много функций, по которым редактируем свой текст далее. Здесь все понятно. Передвигая бегунок редактируйте все как вам хочется, вверху сразу будут отражаться все ваши изменения.



Затем спускаемся еще ниже по страничке, и редактируем дальше.
Здесь ВНИМАНИЕ. Если вы хотите как то выделить свой текст, и НАПИСАТЬ ЕГО НА ФОНЕ, то выбираем фон, на котором будет ваш текст, и ставим бегунок на кнопке ПРОЗРАЧНОСТЬ, в ЛЕВОЕ ПОЛОЖЕНИЕ, то есть НА ФОНЕ.



Текст на фоне выглядит вот так.


Если вы хотите что б ваш текст был на ПРОЗРАЧНОМ ФОНЕ, то Бегунок ставим в ПРАВОЕ ПОЛОЖЕНИЕ.



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

Текст так же можно НАСТРОИТЬ, что анимация его выглядела так, как вам хочется. Для этого переходит на вкладку НАСТРОИТЬ.



Сразу настраиваем ЦВЕТ ТЕКСТА, который хотим видеть.



Дальше ВНИМАНИЕ. Настраиваем КАК БУДЕТ ВЫГЛЯДЕТЬ ваш текст. То есть или он будет виден после открытия, это вот так


Или текст будет затухать, сразу после его открытия. То есть выглядеть вот так.


Для создания такого эффекта ставим ПРАВИЛЬНО бегунок на эффекте ЗАТУХАНИЕ.
Если ставим бегунок в ЛЕВОЕ положение, то текст НЕ будет затухать, и будет виден.


И в правое положение, если хотим что б текст затухал после открытия.


Ну и дальше настраиваем саму анимецию, по своему желанию. Что б открылись дополнительные функции настройки анимации, так же жмем на стрелочку.


Откроется окно с дополнительными настройками, где вы можете экспериментировать с анимацией, настраивая ее по своему вкусу.



Когда вас все устроило в настройках, переходим к сохранению. Для этого идем на вкладку ГОТОВО.



Или кнопку ДАЛЕЕ.


Здесь так же можно сохранять двумя способами.

Встать мышкой на созданный текст, нажать правую кнопку, и выбрать СОХРАНИТЬ КАК.

Или нажать на кнопку СОХРАНИТЬ НА ДИСК, и в открывшейся вкладке выбрать папку, куда сохранить текст.


Если вас что то не устроило в созданном тексте, то вернитесь вновь на РЕДАКТИРОВАНИЕ, и подправьте то, что хотите изменить.



Удачи в вашем творчестве.