Дешевые авиабилетыВыгодные цены, удобный поиск, без комиссии, 24 часа. Бронируй сейчас – плати потом!
Tv программаПрограммы Тв
Photoshop onlineДля того чтоб отредактировать картинку совсем не обязательно иметь фотошоп на комьпьютере. Это можно сделать с помощью приложения online photoshop =)
Про HTML5 плеер |
|
Серия сообщений "Уроки от Любаши К":
Часть 1 - Настраиваем ноут при закрытии крышки
Часть 2 - Делаем авку и собираем пазлы...
...
Часть 31 - Как сделать аудио плейлист на сайте uppod.ru
Часть 32 - Как сделать плейлист по скинам на сайте uppod.ru
Часть 33 - Про HTML5 плеер
|
РАБОТА С ТЕКСТОМ. html коды для текста |
Сегодня мы поговорим о шрифтах, тексте, его основных формулах, и различном написании.
Красиво написанный текст или оформленный заголовок всегда привлекает внимание к себе. Но не все знают как сделать это, да и трудно удержать в голове различные теги и формулы. Поэтому в этом посте собраны все основные теги и формулы по написанию и оформлению текста. Просто вписывайте свой текст в данные коды, и ваш текст будет выглядеть как в этих примерах. Значения размеров, толщину и цвет в кодах всегда можно поменять на свои.
Серия сообщений "Шпаргалки":
Часть 1 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 2 - Несколько оригинальных формул и ссылок для дневника
...
Часть 10 - Все о бегущем тексте. Примеры и коды.
Часть 11 - Все о ссылках, оформление и коды.
Часть 12 - РАБОТА С ТЕКСТОМ. html коды для текста
Часть 13 - Он-лайн графические редакторы
Часть 14 - Бродилка по РУБРИКАМ моего дневника.
...
Часть 28 - Вставляем картинки в свои сообщения
Часть 29 - Справочник html по изображениям
Часть 30 - Как сохранить гифку из Одноклассников
|
Про плеер с html кодом.. |
|
ВЕРТИКАЛЬНАЯ ЛИНИЯ в тексте. |
Серия сообщений " ШПАРГАЛКИ***** кодов для оформления":
Часть 1 - ССЫЛКА на свой дневник...
Часть 2 - Рамочки в 1 слой...
...
Часть 26 - ДЛЯ ТЕКСТА — Мини-генератор кода для текста; Код текста с тенью...
Часть 27 - Всё для Вашего дневника...
Часть 28 - Ещё одна находка - ВЕРТИКАЛЬНАЯ ЛИНИЯ в тексте.
Серия сообщений " *** Пишем красиво - ":
Часть 1 - Коды при оформлении ТЕКСТА (выделение цитаты, эпиграф, расположение текста в столбиках)...- 2 -
Часть 2 - Бегущие строчки...
...
Часть 11 - ШРИФТЫ...
Часть 12 - ДЛЯ ТЕКСТА — Мини-генератор кода для текста; Код текста с тенью...
Часть 13 - Ещё одна находка - ВЕРТИКАЛЬНАЯ ЛИНИЯ в тексте.
|
Как превратить HTML аудиоплеер в круглую кнопку и разместить его поверх фонового изображения - повтор поста по просьбе |
|
Закругление углов изображения без ФШ |
|
Сделать текст с окошечком прокрутки (флеймом) |
|
код для кликабельности картинки... |
|
Как сделать самую простую кликабельную кнопку с надписью |
 Как сделать самую простую кликабельную кнопку с надписью! Для этого воспользуемся вот такой формулой А теперь поподробнее. Формула выглядит вот так  Здесь надо заменить слова АДРЕС СТРАНИЦЫ, на тот адрес, куда вы хотите попасть с помощью этой кнопки. Для примера берем сайт мелких анимашек, и делаем на него кнопочку- посылалочку.. Вот адрес этого сайта, http://fantasyflash.ru/index.php?&kontent=anime который я взяла в адресной строке сайта  Теперь переносим его на нашу кнопочку. Стираем слова АДРЕС СТРАНИЦЫ, а вместо этих слов подставляем адрес http://fantasyflash.ru/index.php?&kontent=anime Запись тогда будет выглядеть вот так  А теперь пишем слова, которые хотим видеть на кнопочке, стерев слова НАЗВАНИЕ КНОПКИ. Например ИДЕМ СЮДА, или, САЙТ ЗДЕСЬ, вообщем все, что вы хотите. Я сейчас напишу САЙТ С КАРТИНКАМИ ЗДЕСЬ. Выглядеть теперь наша запись будет вот так  Вот и все. Теперь наша кнопочка будет выглядеть вот так, и нажав на нее, вы попадете на сайт с анимашками. Таким образом вы можете делать простейшие кнопочки для любых сайтов и блогов, использовав эту формулу. Можно вместо слов на кнопочку вставить мелкую картинку. Вот код этой кнопочки. Вместо слов АДРЕС КАРТИНКИ, вновь подставляем адрес, а в место слов АДРЕС КАРТИНКИ, ставим ее адрес. Я взяла звездочку, с того же сайта, на который мы и делали кнопочку. Картинки там мелкие и очень удобные для того что бы делать такие кнопочки. Адрес картинки берете так- ВСТАЕТЕ МЫШКОЙ НА КАРТИНКУ, ЖМЕТЕ ПРАВУЮ КНОПКУ МЫШИ И ВЫБИРАЕТЕ "КОПИРОВАТЬ ССЫЛКУ НА ИЗОБРАЖЕНИЕ" или выбираете свойства, а в них находите адрес картинки и копируете его. Теперь наша кнопочка выглядит вот так. Можно сделать кнопочку, где будет и картинка и текст. Вот этот код Здесь все аналогично, заменяем слова на АДРЕС СТРАНИЧКИ, затем АДРЕС КАРТИНКИ и СЛОВА ДЛЯ КНОПКИ. Тогда наша кнопочка будет выглядеть вот так Можно так же такую кнопочку сделать на любом фоне. Вот этот код. Все аналогично, вместо слов вставляете адреса. Тогда наша кнопочка будет выглядеть так! ВНИМАНИЕ, ТЕКСТ НА КНОПОЧКЕ, можете спокойно редактировать- размер шрифта, цвет и прочее. Вот и все. Для вашего удобства, все выше приведенные коды кнопочек я сейчас сделаю табличкой, что бы удобнее было пользоваться. Текст на кнопке - Картинка на кнопке - Текст и картинка на кнопке - Кнопка на фоне - Кому хочется делать кнопочки покрасивее и посложнее, уже готовые, то посмотрите ВОТ ЗДЕСЬ. Здесь ссылка на сайт с красивыми кнопочками, и описание как ими пользоваться! Успехов! Надеюсь у всех все получится! Из блога ГАЛИНЫ ШАДРИНОЙ |
|
Применение таблиц |
Разместим в дневнике большое количество небольших по размеру рисунков. Для примера я взял 6 анимированных смыйликов
Для того что бы рисунки располагались горизонтально необходимо убрать галочку с "Сохранять переводы строк в тексте.".
Я специально взял смайлы разного размера. Попробуем теперь сделать вывод рисунков более логичным.
Большие смайлы в одной колонке, маленькие - в другой
Для этого построим таблицу из двух колонок и трех строк ( по количеству смайлов одного размера )
Коды рисунков смайлов ( видны при редактировании черновика или поста )
Что бы не гадать где какой рисунок я в кодах рисунков, в alt подписал рисунки. alt - это альтернативный текст который виден в том случае если рисунок по какой то причине не может быть показан
Все что теперь осталось это разместить рисунки каждый в своей ячейке таблицы
|
|
|
|
|
|
|
|
|
Ширина первой и второй колонки не одинаковые что не всегда красиво. Добавим в нашу таблицу еще одну строку Эта строка задаст ширину колонок в 200 пикселей ( можно указать ширину в процентах от общей ширины таблицы )
Что бы не загромождать код я в дальнейшем буду показывать только часть кода где делаем изменения
|
|
|
|
|
|
|
|
|
Осталась самая малость. Разместить рисунки по центру ячеек. Для этого в добавим valign="middle" и align="center"
|
|
|
|
|
|
|
|
|
Подпишем колонки. Для этого добавим вначале еще одну строку в которой вместо пропишем
| Большие смалы | Маленькие смайлы |
|---|---|
|
|
|
|
|
|
|
|
|
Добавим к каждому смайлу название.
Вид таблицы мягко говоря не очень :)
| Большие смалы | Маленькие смайлы |
|---|---|
|
Большой1
|
Маленький1
|
|
Большой2
|
Маленький2
|
|
Большой3
|
Маленький3
|
Исправим это добавив еще 2 колонки для названий смайлов
Обратите внимание на то что добавилось еще две строки с и . Даже если в ячейках ничего не выводится количество ячеек в каждой строке должно быть одинаковым!!!!!
Название колонок "Большие смайлы и маленькие смайлы" не совсем правильно расположены
| Большие смалы | Маденькие смайлы | ||
|---|---|---|---|
|
|
Большой1 |
|
Маленький1 |
|
|
Большой2 |
|
Маленький2 |
|
|
Большой3 |
|
Маленький3 |
Объеденим попарно ячейки с названием колонок.
| Большие смалы | Маденькие смайлы | ||
|---|---|---|---|
|
|
Большой1 |
|
Маленький1 |
|
|
Большой2 |
|
Маленький2 |
|
|
Большой3 |
|
Маленький3 |
Не нравится мне грозный красный смайл :)). Я его выделю каким то фоном что бы он бросался в глаза :). Добавлю в ячеку с этим смайлом фоновый цвет
Заодно и строку с названием колонок выделю фоном
| Большие смалы | Маденькие смайлы | ||
|---|---|---|---|
|
|
Большой1 |
|
Маленький1 |
|
|
Большой2 |
|
Маленький2 |
|
|
Большой3 |
|
Маленький3 |
Сделаем этот грозный смайл не таким грозным. Разместим его на этом фоновом рисунке :))
Для этого добавим в ячейку с этим смайлом параметр background
| Большие смалы | Маденькие смайлы | ||
|---|---|---|---|
|
|
Большой1 |
|
Маленький1 |
|
|
Большой2 |
|
Маленький2 |
|
|
Большой3 |
|
Маленький3 |
Что еще творить с таблицей зависит только от вашей фантазии :)) Можно каждую строку выделить своим цветом добавиви в параметр background. Можно для каждой ячейки или строки задать фоновый рисунок прописав background. Вместо текста в ячейках можно прописать ссылки.
ps: Добавьте в код рисунка title="текст" и при наведении мышки на рисунок будет выскакивать подсказка с текстом
|
Как сделать линию с помощью HTML и CSS |
Для подчеркивания некоторых особенно важных элементов сайта, не помешало бы использовать всевозможные и предусмотренные для этого CSS стили и свойства. Допустим, у вас есть текст, который нуждается в разделении из-за специфики его смысловой нагрузки. Вот тут-то и приходят на помощь html и СSS свойства. Как сделать в тексте линию средствами CSS
|
|
Полоски или линии которыми можно украсить свой текст |
Иногда полоска может очень даже красиво украсить наш текст, например вместо разделителей или панелей текста..Может кому интересно? Мне это было очень интересно.. Здесь то, что я знаю.Если у вас есть ещё предложения пишите, я допишу в пост от вашего имени. Хочется побольше манипуляций с кодами... Простая прямая полоска на всю ширину вашей рамочки или текста, которая всегда серого цвета выглядит так: их можно сделать сразу 2 шт.,но ни размер,ни цвет и толщину полоски вы тут не измените. Видите, что они серого цвета? А теперь я дам вам код, в котором можно менять цвет, толщину и длину полоски.. |
|
Оформление текста (все коды в окошечках) |
Увеличить текст (+2,3 и т.д.), уменьшить (-2,3 и т.д.) Окошечко для вставки кода rows и cols определяют площадь окна (ширину и высоту): Вставить флеш в окошко: [Звездочка*flash=500,500,АДРЕС ФЛЕШКИ] ФОН под ЗАПИСЬ (цвет меняем по желанию) Подписываем картинку: Выделение текста Фон для записи: "Закрепитель": текст остается таким, каким вы его пишете *** |
|
Красивый текст для блога |
|
|
Картинки в ряд, формула |
Здесь берем код < table border="0" > border="0" рамочки у таблицы не будет видно, меняем на 1 появилась рамочка Еще о таблицах Генератор таблиц Таблица для бродилки |
|
HTML - HyperText Markup Language |
HyperText Markup Language (HTML) - это язык разметки гипертекста. Здесь очень много открытий чудных - читаем и учимся...   |
|
Справочник html по изображениям |
Серия сообщений "Шпаргалки":
Часть 1 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 2 - Несколько оригинальных формул и ссылок для дневника
...
Часть 27 - Проигрывание музыки при открытии поста
Часть 28 - Вставляем картинки в свои сообщения
Часть 29 - Справочник html по изображениям
Метки: справочник |
HTML-коды и названия цветов 3 |
|
Серия сообщений "***ПОЛЕЗНОЕ ДЛЯ ДНЕВА": Часть 1 - Оттенки синего
Часть 2 - Оттенки зеленого.
...
Часть 37 - HTML-коды и названия цветов 1
Часть 38 - HTML-коды и названия цветов 2
Часть 39 - HTML-коды и названия цветов 3
Часть 40 - HTML- код спектра оттенков основного цвета (синий, зелёный, красный и чёрный)
Часть 41 - Схемка "Новогодние шары" (бесшовная) от "R-Oksana"
...
Часть 46 - Палитра цветов
Часть 47 - Пример цвета текста с использованием #FFD700
Часть 48 - Пишем красиво
|
Простые ОБЪЕМНЫЕ рамочки разной формы |
  Копируйте их, и ставьте в свои записи в Простом редакторе, меняйте фоны под свой дневник. Там где написано ВАШ ПОСТ- Вставляете свой текст. |
Серия сообщений "Шпаргалки":
Часть 1 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 2 - Несколько оригинальных формул и ссылок для дневника
...
Часть 5 - Разлиновка — шаблоны разлинованных листов всех форматов.
Часть 6 - Красивые слайд-шоу в ваш дневник
Часть 7 - Простые ОБЪЕМНЫЕ рамочки разной формы
Часть 8 - Простые, оригинальные рамочки разного цвета
Часть 9 - Бродилка по ОНЛАЙН - генераторам для создания Слайд-шоу.
...
Часть 25 - html коды для текста
Часть 26 - Краткий словарь начинающих лирушников.
Часть 27 - Проигрывание музыки при открытии поста
|
Красивые слайд-шоу в ваш дневник |
Серия сообщений "Шпаргалки":
Часть 1 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 2 - Несколько оригинальных формул и ссылок для дневника
...
Часть 4 - БРОДИЛКА ПО САЙТАМ одноразовая e-mail электронная почта
Часть 5 - Разлиновка — шаблоны разлинованных листов всех форматов.
Часть 6 - Красивые слайд-шоу в ваш дневник
Часть 7 - Простые ОБЪЕМНЫЕ рамочки разной формы
Часть 8 - Простые, оригинальные рамочки разного цвета
...
Часть 25 - html коды для текста
Часть 26 - Краткий словарь начинающих лирушников.
Часть 27 - Проигрывание музыки при открытии поста
|
