Коды HTML для оформления постов, блогов

Окошко для кода - Рамочка вокруг текста - Рамочка вокруг текста (разрыв слева) - Рамочка вокруг текста (разрыв справа) - Картинки в записи Картинка слева от текста - Картинка справа от текста - Картинки по бокам текста - Картинки в ряд: 2 картинки - 3 картинки - 4 картинки - 5 картинок - 6 картинок - Кнопки в записи Текст на кнопке - Картинка на кнопке - Текст и картинка на кнопке - Кнопка на фоне - Номера страниц в блоге - Рамка с картинками по углам - Таблица -

Полоски или линии которыми можно украсить свой текст .(по просьбам, повтор от 2018 года)

УРОКИ Фантазия блогеров-дизайнеров не знает границ.. Каждый раз придумывается что-то новое от чего захватывает дух..Сегодня я предложу незначительный, но иногда приходящий в помощь нам урок. Тема: "Полоски"(линии) Иногда полоска может очень даже красиво украсить наш текст, например вместо разделителей или панелей текста..Может кому интересно? Мне это было очень интересно.. Здесь то, что я знаю.Если у вас есть ещё предложения пишите, я допишу в пост от вашего имени. Хочется побольше манипуляций с кодами... Простая прямая полоска на всю ширину вашей рамочки или текста, которая всегда серого цвета выглядит так: <hr /> их можно сделать сразу 2 шт.,но ни размер,ни цвет и толщину полоски вы тут не измените. <hr /><hr /> Видите, что они серого цвета? А теперь я дам вам код, в котором можно менять цвет, толщину и длину полоски..

БРОДИЛКА ПО ЦВЕТОВЫМ ГАММАМ

Делюсь с вами подборкой полезных и очень удобных онлайн-ресурсов, где вы можете работать с палитрами цветов — подбирать оттенки и составлять их комбинации для чего угодно ГЕНЕРАТОР ЦВЕТА ПРАВИЛЬНОЕ НАЗВАНИЕ ЦВЕТОВ И ОТТЕНКОВ ТАБЛИЦА «БЕЗОПАСНЫХ» ЦВЕТОВ ЦВЕТА РАЗБИТЫЕ НА ОТТЕНКИ НАЗВАНИЯ ЦВЕТОВ

Серия сообщений "Полезности":

Часть 1 - Базовый список сочетания всех цветов
Часть 2 - Путеводитель по ИНТЕРНЕТУ.
...
Часть 14 - Эффективное средство для мытья ковров и не только
Часть 15 - Стираем кухонные полотенца в микроволновке
Часть 16 - БРОДИЛКА ПО ЦВЕТОВЫМ ГАММАМ

Бегущая строка из картинок или текста ( Восстановленный пост блогера bloginja )

На восстановление данного поста потратила полдня: сначала "поехала" сама рамочка, и три попытки к успеху не привели, потом, при поиске через архив очередной картинки, выяснилось, что она никак не подходит под тематику поста, как и следующая. Зато я убедилась, что в архиве одному и тому же адресу может соответствовать несколько различных картинок. Пост замечательный: все подано на блюдечке с голубой каемочкой. Восхищаюсь!!!

Бегущая строка из картинок или текста ( Восстановленный пост блогера bloginja )

На восстановление данного поста потратила полдня: сначала "поехала" сама рамочка, и три попытки к успеху не привели, потом, при поиске через архив очередной картинки, выяснилось, что она никак не подходит под тематику поста, как и следующая. Зато я убедилась, что в архиве одному и тому же адресу может соответствовать несколько различных картинок. Пост замечательный: все подано на блюдечке с голубой каемочкой. Восхищаюсь!!!

Тег marquee - Бегущая строка

Тег marquee создает бегущую строку на странице и позволяет перемещать по ней любые элементы — изображения, текст и т.д.

Читать далее...

Компьютерная Азбука. Видеоуроки для начинающих пользователей.| Ссылки (130 уроков).

Компьютерная Азбука.

Видеоуроки для начинающих пользователей.

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

Для прохождения курса желательно, чтобы на компьютере была установлена операционная система Microsoft Windows 7 в версии Домашняя Расширенная.

• Урок №1. Работа с компьютерной мышью • Урок №2. Работа на ноутбуке без мыши • Урок №3. Что такое Windows • Урок №4. Что такое файлы и папки • Урок №5. Что такое программы • Урок №6. Работа с мышью • Урок №7. Как настроить Рабочий стол в Windows • Урок №8. Что такое разрешение экрана • Урок №9. Меню Пуск в Windows • Урок №10. Закрепляем значки программ • Урок №11. Учетные записи пользователей Windows 7 • Урок №12. Меню Пуск в Windows 7 • Урок №13. Настройка меню Пуск • Урок №14. Окна в Windows 7 • Урок №15. Панель задач в Windows 7 • Урок №16. Область уведомлений • Урок №17. Языковая панель windows 7 • Урок №18. Регулятор громкости Windows • Урок №19. Дата и время в Windows • Урок №20. Настройка панели задач • Урок №21. Панель управления Windows 7 • Урок №22. Центр поддержки Windows 7 • Урок №23. Создание учетной записи пользователя • Урок №24. Назначение клавиш клавиатуры • Урок №25. Мультимедийная клавиатура • Урок №26. Стандартные программы Windows

• Урок №27. Программа Блокнот • Урок №28. Ввод и редактирование текста • Урок №29. Поиск и замена • Урок №30. Работа с файлами и настройка программы • Урок №31. Интерфейс программы WordPad • Урок №32. Форматируем текст в WordPad • Урок №33. Работаем с абзацами в WordPad • Урок №34. Параметры страницы • Урок №35. Вставляем изображение в текстовый документ • Урок №36. Настраиваем внешний вид WordPad • Урок №37. Рисуем в Paint • Урок №38. Как сделать звукозапись в Windows 7 • Урок №39. Калькулятор в Windows • Урок №40. Программа Записки • Урок №41. Что такое скриншот? • Урок №42. Программа Ножницы • Урок №43. Что такое жесткий диск • Урок №44. Программа Проводник • Урок №45. Адресная строка • Урок №46. Раздел Компьютер • Урок №47. Работаем в Проводнике Windows • Урок №48. Контекстное меню файлов и папок • Урок №49. Расширения и форматы файлов • Урок №50. Свойства файлов и папок

Серия сообщений "чайнику от чайника":

Часть 1 - Компьютерные курсы для начинающих.
Часть 2 - Шпаргалочка по тегам.
...
Часть 48 - Действия, которыми мы незаметно портим свой ноутбук.
Часть 49 - Что такое Гибернация в Windows 7, режим гибернации.
Часть 50 - Компьютерная Азбука. Видеоуроки для начинающих пользователей.| Ссылки (130 уроков).

Полоски или линии которыми можно украсить свой текст .

Фантазия блогеров-дизайнеров не знает границ.. Каждый раз придумывается что-то новое от чего захватывает дух..Сегодня я предложу незначительный, но иногда приходящий в помощь нам урок. Тема: "Полоски"(линии) Иногда полоска может очень даже красиво украсить наш текст, например вместо разделителей или панелей текста..Может кому интересно? Мне это было очень интересно.. Здесь то, что я знаю.Если у вас есть ещё предложения пишите, я допишу в пост от вашего имени. Хочется побольше манипуляций с кодами... Простая прямая полоска на всю ширину вашей рамочки или текста, которая всегда серого цвета выглядит так: <hr /> их можно сделать сразу 2 шт.,но ни размер,ни цвет и толщину полоски вы тут не измените. <hr /><hr /> Видите, что они серого цвета? А теперь я дам вам код, в котором можно менять цвет, толщину и длину полоски..

сделаем рамку для текста с картинками хостинга ЛИру

ДОРОГИЕ МОИ! про событие на ЯНДЕКС-фотках заинтересованные в этом ресурсе,уже слышали,...не радостно,конешно,но не смертельно и особой трагедии для тех,кто делает коллажи,рамки,НЕТ и метаться в поисках какого-то другого хостинга не вижу смысла,поскольку речи о закрытии ЛИрушки,вроде,нет и закачать картинки в посты можно минимум 3-мя способами и об этом я понаписала достаточно ЗДЕСЬ:

ЧИТАЕМ ДАЛЬШЕ и ВНИКАЕМ

Изучаю тени...

И все- таки интересная вещь-эти тени! Сколько интересных возможностей, и все без ФШ! Пойду смотреть и пытаться делать самой...

Для начала зайду-ка

habrahabr ru

Серия сообщений "*** уроки":

Часть 1 - комментики на скорую руку
Часть 2 - Делаем простую Рамку с двигающимся текстом.
...
Часть 15 - Делаем круглые картинки без ФШ
Часть 16 - Внутренние тени изображений и текста
Часть 17 - Изучаю тени...
Часть 18 - Как сделать тени в рамочке и на картинках
Часть 19 - мастерская ZOMKI -рамочка
...
Часть 36 - РАСШИРЕННЫЙ РЕДАКТОР ЛИру
Часть 37 - образцы и формулы нарядных РАМОЧЕК для текста
Часть 38 - Учимся делать рамочки

Закругление углов изображения без ФШ

Закруглять будем с помощью HTML кода + свойство CSS border-radius.


<img src="АДРЕС ИЗОБРАЖЕНИЯ" style="border-radius: width: ШИРИНА ИЗОБРАЖЕНИЯpx; height: ВЫСОТА ИЗОБРАЖЕНИЯpx; border: 3px solid red; border-radius: 100%;" />

Так выглядит код картинки — HTML овал (для прямоугольных изображений):

< img src="https://img-fotki.yandex.ru/get/16129/163781271.f8/0_
f121c_96424eec_L.jpg" style="border-radius: width: 430px; height: 280px;
border: 3px solid red; border-radius: 100%;"/>

Смотрим дальше

Рамка вокруг изображения

С помощью CSS можно вокруг любого изображения сделать симпатичную
рамку-обводку. Поскольку у стилевого свойства border есть несколько значений,
то и рамочки могут быть разными по стилю, цвету и толщине.

Название цвета указываем по-английски. Значения меняем в строке:
style="border: 10px double Blue", где 10 — толщина, double — стиль, Blue — цвет.
Сначала покажу примеры рамок, а ниже представлю их коды.

Вариант 1

Изображение заключено в двойную рамку: стиль double;

Смотрим дальше

Генераторы для дизайна 1 часть.

Читайте также:

Ч.2 Генераторы для работы с фотографиями.(Online-fotoshop)Ч.2

Ч.3 Генераторы фотоэффектов и создания слайда. Ч.3

Генераторы для создания аватарок.

 

Здесь продолжение

Как вставить код любого изображения в аккуратную рамку (урок)

Большинство из вас выставляют посты с картинками, анимацией и т.д. А под ними коды. Коды бывают разные... Мне например, не нравятся некоторые из них - широкие, некрасивые и не аккуратные. Хочу вам предложить коды, которые я использую постоянно. А нужно это вам или нет, решайте сами. Вот код окошка, в которое вставляется код: <input type='text' size='35' value='<ВАШ КОД>'>

Читать далее...

Генератор кнопок..

В последнее время часто задают вопрос -как сделать правильную кнопку . потому что то, что предлагает HTML-ка для наших соцсетей не подходит....они у нас не работают ..Точнее, тег form action работает не на всех платформах..Например на Ли ру...-работает...а на Мейле -нет.. А вот у нас на Я ру не хочет показывать так как должен)))Ну и бог с ним...Тем более что всем нам хочется что нибудь не такое стандартное))) И тут к нам на помощь могут придти вот такие сервисы, как например, этот Он иностранный, но я , как обычно, дам вам пояснения в виде скринов...Итак....жмем... (Кстати...вот этот заголовок я сделала при помощи этого генератора)

все внутри

Оформляем текст и картинки

Картинка обтекаемая текстом Не забывайте, что картинка должна быть не очень большой, иначе текст просто выдавит ее вверх. цифровые значения vspace="10" и hspace="10"- это всего навсего расстояние от картинки к тексту вправо и вниз, можно их менять, по вашему вкусу.	Код обтекания картинки текстом <img src="httр:адрес картинки" align="left" vspace="10" hspace="30" alt=>"здесь нет картинки, хотя должно быть изображение. Какое оно будет, решать вам"
Картинка слева от текста Снова пишем свой текст. Если картинка длинная, бордюрного типа, то и весь текст будет вдоль нее. Если не очень большая, то продолжится ниже. Снова предупреждение в постах, картинка не должна превышать размер 200 в ширину иначе просто снова уйдет вверх.	Код картинки слева <img src="URL адрес картинки" align="left" border="0"> И снова пишем свой текст, или стихотворение, или.... придумали? молодцы!
Картинка справа от текста: Все правила написания для правой стороны такие же , как и для левой.	Код для картинки с права: <img src="URL адрес картинки" align="right" border="0">Пишем свой текст, что напишем, то и увидим
Картинка в центре текста: Обратите внимание, что текст пишется перед кодом и после кода. Это для того, чтобы обтекание было полноценным, и как бы обкутывало вашу картинку. Поэтому, часть текста вверху, часть внизу и создают такой эффект.	Код для картинки в центре текста: Первая часть текста <img src="URL адрес картинки" align="middle" border="0"> Вторая часть текста.
Текст между двух картинок Чтобы текст лег красиво, нужно, чтобы картинки были по длине больше, чем по ширине, если текст выйдет за рамки рисунков, он уйдет вниз.	Код для текста между двух картинок <table align=center border=0> <tr> <td><img src="URL адрес КАРТИНКИ"></td> <td>Текст, который красиво расположится между картинками.</td> <td><img src="URL адрес КАРТИНКИ"></td> </tr> </table>
Картинка между текстом Красиво получается, когда картинка находится между текстом, как-то необычно. Главное, чтобы текст соответствовал, и картинка отражала его суть. Остальное - полет фантазии	Код для картинки между текстом <table align=center border=0> <tr> <td>ТЕКСТ</td> <td><img src="URL адрес КАРТИНКИ"></td> <td>ТЕКСТ</td> </tr> </table>

 

Новый конструктор цвета для вашего текста.