Шпаргалочка по тегам

Шпаргалочка по тегам

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

Перечёркнутый текст: ТЕКСТ

<s> ваш текст </s>

Подчёркнутый текст: ТЕКСТ

<u> ваш текст </u>

Полужирный текст: ТЕКСТ

<b> ваш текст </b>

Полужирный крупный: ТЕКСТ

<big> ваш текст</big>

Курсивный текст: ТЕКСТ

<i>ваш текст </i>

Маленький текст: текст

<small>ваш текст</small>

Текст (картинка) по центру:

<center>ваш текст (картинка) </center>

Выравнивание текста по правому краю поста:

<div align="right"> ваш текст </div>

Равномерное выравнивание текста по всей ширине поста:

<div align="justify"> ваш текст </div>

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

<blockquote> ваш текст </blockquote>

“Закрепитель” (фиксирует текст так, как и расположите его в поле поста):

<pre>ваш текст</pre>

Бегущая строка (картинка):

<marquee> ваша бегущая строка (картинка)</marquee>

Добавленный атрибут direction=right задаст направление движения слева направо, по умолчанию - справа налево

Сноска вверху: ТЕКСТ^сноска

^{ваша сноска}

Сноска внизу: ТЕКСТ_сноска

_{ваша сноска}


Размер шрифта:

Уменьшить текст: текст - 2

<font size="-2"> уменьшенный текст </font>

Увеличить текст на 1 пункт: текст + 1

<font size="+1"> увеличить текст на 1 пункт </font>


Увеличить текст на 2 пункта: текст + 2

<font size="+2"> увеличить текст на 2 пункта </font>


Увеличить текст на 3 пункта: текст + 3

<font size="+3"> увеличить текст на 3 пункта </font>


Цвет шрифта

КРАСНЫЙ: красный текстм

<font color="red"> красный текст </font>

ЖЕЛТЫЙ: желтый текст

<font color="yellow"> желтый текст </font>

ФИОЛЕТОВЫЙ: фиолетовый текст

<font color="purple"> фиолетовый текст </font>

ЗЕЛЕНЫЙ: зеленый текст

<font color="lime"> зеленый текст </font>

СИНИЙ: синий текст

<font color="navy"> синий текст </font>

ФУКСИЯ: фуксия текст

<font color="fuchsia"> фуксия текст </font>


Оформление ссылок

Как вставить ссылку на веб-страницу:

<a href="АДРЕС СТРАНИЦЫ" _fcksavedurl="АДРЕС СТРАНИЦЫ"> ВАШ ПОДЗАГОЛОВОК</a>

Как сделать, чтобы картинка была ссылкой на веб-страницу:

<a href="АДРЕС СТРАНИЦЫ" _fcksavedurl="АДРЕС СТРАНИЦЫ"><img src="АДРЕС КАРТИНКИ В СЕТИ" _fcksavedurl="АДРЕС КАРТИНКИ В СЕТИ" /></a>

Как вставить ссылку на веб-страницу, чтоб она открылась в новом окне:

<a href="АДРЕС СТРАНИЦЫ" _fcksavedurl="АДРЕС СТРАНИЦЫ" target="_blank"> ВАШ ПОДЗАГОЛОВОК </a>

 

Делаем открытку со стихами



 

Сделаем открытку со стихами. Ввиду того что я ленивый и мне лень искать для примера фоны и текст стихов, я позаимствовал все это у inmira с её поста http://www.liveinternet.ru/users/inmira/post99542587/.

- Фон для рамки

 

- Фон для текста и картинки

 

- Картинка.

Коды картинок ( видны при редактировании черновика или поста )

<img alt="Фон таблицы" src="//s39.radikal.ru/i084/0904/81/c5fa856cfa98.gif" _fcksavedurl="//s39.radikal.ru/i084/0904/81/c5fa856cfa98.gif" /><img alt="Фон ячеек таблицы" src="//i029.radikal.ru/0904/25/910ce6bcf443.jpg" _fcksavedurl="//i029.radikal.ru/0904/25/910ce6bcf443.jpg" /><img alt="Рисунок 1" src="//s46.radikal.ru/i113/0904/b4/17ffaba36df4.jpg" _fcksavedurl="//s46.radikal.ru/i113/0904/b4/17ffaba36df4.jpg" />

Размеры картинок уменьшены что бы они не занимали много места в посте

Сделаем рамку для открытки. Для этого построим таблицу 1х1 - одна строка, один столбец. Для таблицы пропишем background.
В background укажем ссылку на фоновую картинку для рамки

<table width="800" height="100" background="//s39.radikal.ru/i084/0904/81/c5fa856cfa98.gif"> <tbody> <tr> <td> </td> </tr> </tbody></table>

 

Что бы получилась рамка нужно "лишнее" пространство залить фоном для текста и рисунка.
Что бы это сделать нужно указать background для ячейки тяблицы

<table width="800" height="100" background="//s39.radikal.ru/i084/0904/81/c5fa856cfa98.gif"> <tbody> <tr> <td background="//i029.radikal.ru/0904/25/910ce6bcf443.jpg"> </td> </tr> </tbody> </table>

 

Получилось не совсем то что мы хотели. Это потому что мы "забыли" указать отступ от границы таблицы до ячейки таблицы.
Исправим это дописав в тег <table> параметр cellspacing

<table width="800" height="100" background="//s39.radikal.ru/i084/0904/81/c5fa856cfa98.gif" cellspacing="8"> <tbody> <tr> <td background="//i029.radikal.ru/0904/25/910ce6bcf443.jpg"> </td> </tr> </tbody> </table>

 

И все равно ничего не получилось. Все это потому что в дневнике, для таблицы в глобальных стилях указано border-collapse: collape и из-за этого cellspacing игнорируется
Что бы это исправить нужно к <table> добавить стиль style="border-collapse: separate;"

<table width="800" height="100" background="//s39.radikal.ru/i084/0904/81/c5fa856cfa98.gif" cellspacing="8" style="border-collapse: separate;"> <tbody> <tr> <td background="//i029.radikal.ru/0904/25/910ce6bcf443.jpg"> </td> </tr> </tbody> </table>

 

Ура! У нас есть рамка :). Все что нам осталось это вставить в ячейку таблицы рисунок и текст стихов

<table width="800" height="100" background="//s39.radikal.ru/i084/0904/81/c5fa856cfa98.gif" cellspacing="8" style="border-collapse: separate;"> <tbody> <tr> <td background="//i029.radikal.ru/0904/25/910ce6bcf443.jpg"> <img style="width: 266px; height: 203px;" alt="Рисунок 1" src="//s46.radikal.ru/i113/0904/b4/17ffaba36df4.jpg" _fcksavedurl="//s46.radikal.ru/i113/0904/b4/17ffaba36df4.jpg" />Весь год, не соврав никому ни на грошь,Мы ждем, как небесную манну,Тот день, когда можно удариться в ложь,Невинно придаться обману!Набрав арсенал завиральный идей,С кощунственным трепетом в телеМы ловим доверчивых честных людей,Забывших о первоапреле.И мы их находим, смиренных ягнят,Простецки развесивших уши.И стрелы обмана со свистом летятВ их светлые, чистые души.Но первоапрельский веселый обман -Сердечная наша потеха.И стрелы не кровь высекают из ран,А добрые искорки смеха.О, как же он весел и как же хорош,Пришедший на смену метелям,Тот праздник, во смех превращающий ложь!Сограждане, с первым апреля! </td> </tr> </tbody> </table>

 

Весь год, не соврав никому ни на грошь,Мы ждем, как небесную манну,Тот день, когда можно удариться в ложь,Невинно придаться обману!Набрав арсенал завиральный идей,С кощунственным трепетом в телеМы ловим доверчивых честных людей,Забывших о первоапреле.И мы их находим, смиренных ягнят,Простецки развесивших уши.И стрелы обмана со свистом летятВ их светлые, чистые души.Но первоапрельский веселый обман -Сердечная наша потеха.И стрелы не кровь высекают из ран,А добрые искорки смеха.О, как же он весел и как же хорош,Пришедший на смену метелям,Тот праздник, во смех превращающий ложь!Сограждане, с первым апреля!

Не все так просто :). Во первых текст расположен не справа от рисуна, а под ним. Во вторых текст нечитаемый из-за того что цвет текста черный и размер шрифта маленький.
Что бы текст располагался справа от рисунка добавим в код рисунка align="left" в этом случае рисунок будет располагаться слевой стороны ячейки, а текст будет "обтекать" его справа.
Что бы изменить цвет текста и размер шрифта добавим к <td> стиль style="color: #fffcfc; font-size: 18px;". Цвет текста #fffcfc, размер шрифта 18px.

<table width="800" height="100" background="//s39.radikal.ru/i084/0904/81/c5fa856cfa98.gif" cellspacing="8" style="border-collapse: separate;"> <tbody> <tr> <td background="//i029.radikal.ru/0904/25/910ce6bcf443.jpg" style="color: #fffcfc; font-size: 18px;"> <img style="width: 266px; height: 203px;" alt="Рисунок 1" src="//s46.radikal.ru/i113/0904/b4/17ffaba36df4.jpg" _fcksavedurl="//s46.radikal.ru/i113/0904/b4/17ffaba36df4.jpg" align="left" />Весь год, не соврав никому ни на грошь,Мы ждем, как небесную манну,Тот день, когда можно удариться в ложь,Невинно придаться обману!Набрав арсенал завиральный идей,С кощунственным трепетом в телеМы ловим доверчивых честных людей,Забывших о первоапреле.И мы их находим, смиренных ягнят,Простецки развесивших уши.И стрелы обмана со свистом летятВ их светлые, чистые души.Но первоапрельский веселый обман -Сердечная наша потеха.И стрелы не кровь высекают из ран,А добрые искорки смеха.О, как же он весел и как же хорош,Пришедший на смену метелям,Тот праздник, во смех превращающий ложь!Сограждане, с первым апреля! </td> </tr> </tbody> </table>

 

Весь год, не соврав никому ни на грошь,Мы ждем, как небесную манну,Тот день, когда можно удариться в ложь,Невинно придаться обману!Набрав арсенал завиральный идей,С кощунственным трепетом в телеМы ловим доверчивых честных людей,Забывших о первоапреле.И мы их находим, смиренных ягнят,Простецки развесивших уши.И стрелы обмана со свистом летятВ их светлые, чистые души.Но первоапрельский веселый обман -Сердечная наша потеха.И стрелы не кровь высекают из ран,А добрые искорки смеха.О, как же он весел и как же хорош,Пришедший на смену метелям,Тот праздник, во смех превращающий ложь!Сограждане, с первым апреля!

Уже лучше :) Но есть недоработка. Текст заползает под рисунок. Что бы этого не было поместим рисунок текст стихов в тег <div>. со стилем style="float: left" для рисунка и style="float: right" для текста.
Я приведу пример сокрашенного кода что бы было понятнее

<table> ....... ....... <td> <div style="float: left: width: 300px;"> <img style="width: 266px; height: 203px;" alt="Рисунок 1" src="//s46.radikal.ru/i113/0904/b4/17ffaba36df4.jpg" _fcksavedurl="//s46.radikal.ru/i113/0904/b4/17ffaba36df4.jpg" align="left" /> </div> <div style="float: right; width: 450px;"> Текст стихов </div> </td> ....... ........</table>

Весь год, не соврав никому ни на грошь,Мы ждем, как небесную манну,Тот день, когда можно удариться в ложь,Невинно придаться обману!Набрав арсенал завиральный идей,С кощунственным трепетом в телеМы ловим доверчивых честных людей,Забывших о первоапреле.И мы их находим, смиренных ягнят,Простецки развесивших уши.И стрелы обмана со свистом летятВ их светлые, чистые души.Но первоапрельский веселый обман -Сердечная наша потеха.И стрелы не кровь высекают из ран,А добрые искорки смеха.О, как же он весел и как же хорош,Пришедший на смену метелям,Тот праздник, во смех превращающий ложь!Сограждане, с первым апреля!

Получили практически то что хотели. Осталось привести текст стихов в "божеский" вид. Можно установить галочку "Сохранять переводы строк в тексте.", но я лучше уберу это галочку и добавлю еще один тег <pre>. Все что находится внутри этого тега будет выводится со всеми пробелами и переносами строк.

<table> ....... ....... <td> <div style="float: left; width: 300px;"> <img style="width: 266px; height: 203px;" alt="Рисунок 1" src="//s46.radikal.ru/i113/0904/b4/17ffaba36df4.jpg" _fcksavedurl="//s46.radikal.ru/i113/0904/b4/17ffaba36df4.jpg" align="left" /> </div> <div style="float: right; width: 450px;"> <pre> Текст стихов </pre> </div> </td> ....... ........</table>

Вот мы и получили то что хотели.

Весь год, не соврав никому ни на грошь,Мы ждем, как небесную манну,Тот день, когда можно удариться в ложь,Невинно придаться обману!Набрав арсенал завиральный идей,С кощунственным трепетом в телеМы ловим доверчивых честных людей,Забывших о первоапреле.И мы их находим, смиренных ягнят,Простецки развесивших уши.И стрелы обмана со свистом летятВ их светлые, чистые души.Но первоапрельский веселый обман -Сердечная наша потеха.И стрелы не кровь высекают из ран,А добрые искорки смеха.О, как же он весел и как же хорош,Пришедший на смену метелям,Тот праздник, во смех превращающий ложь!Сограждане, с первым апреля!

Ссылочка на пользователя сайта с иконкой.

По просьбе моих Читателей делаю урок. Как конкретно каждого своего ПЧ-отблагодарить за присланные симпатии.Это не сложно. Здесь на Лиру есть специальные коды. Коды, заключенные в квадратные скобки, иногда называются BB-кодами, так как происходят с форумов. Их можно использовать и в простом, и в расширенном редакторе. Что такое Спец. коды на Лиру? Поподробней можно посмотреть ЗДЕСЬ. Так же пользуясь специальным кодом можно сделать ссылочку на конкретного пользователя сайта с иконкой. Выглядить это будет очень забавно например вот так. Милолика Покровская для девочек. Или Александрушек для мальчиков. КОД... [user=Милолика Покровская] Когда ник написан правильно , в зависимости от пола пользователя. Иконка ставится автоматически. Можно конечно и подурачится написать например так: Тра-ля-ля КОД... [user=Милолика Покровская]Тра-ля-ля[/user] В данном коде ссылочка будет вести на мой дневник, а вместо ника можно писать что угодно. Милолика Покровская

Делаем простую кнопку для блога.

Иногда при оформлении поста нужно загрузить много Ссылочек на разные сайты или Одна тема и много подпунктов к ней. Тогда вас выручит простая кнопка. Как она вообще выглядит?А вот так . Что бы ее сделать нужно вставить вот этот код к себе в блог <form action="URL АДРЕС ССЫЛКИ" target="_blank" method="get"><input type="submit" value="НАЗВАНИЕ КНОПКИ" /><br /></form> Там где написано "URL АДРЕС ССЫЛКИ" -нужно вставить адрес ссылки на страницу куда эта кнопка будет вести. А где написано "НАЗВАНИЕ КНОПКИ" -пишите то что нужно вам. Но это если нужна одна кнопка.А если несколько? Чуть ниже я даю коды разных вариантов кнопок.Выбирайте какой нужен вам.Копируйте код и вставляйте к себе в блог. Читаем ещё варианты далее... дневник Милолика Покровская

Полезность по таблицам
Есть масса людей, которые делают посты в таблицах. Есть даже эксперты подобного оформления. Я вот хочу полезность - азы опубликовать. Если будете брать себе, то отжимайте галочку "Сохранять переводы строк в тексте." Иначе расползется текст.

 

Строим таблицу первая клетка в первой строке вторая клетка в первой строке первая клетка во второй строке вторая клетка во второй строке	Код простой сетки <TABLE border=4> <TR> <TD>первая клетка в первой строке</td> <TD>вторая клетка в первой строке</td> </tr> <TR> <TD> первая клетка во второй строке</td> <TD>вторая клетка во второй строке</td> </tr> </table>
Сетка с фоном <TABLE background="URL адрес ФОНА" border=8> Вместо URL адрес ФОНА поставляем адрес фонового рисунка. первая клетка в первой строке вторая клетка в первой строке первая клетка во второй строке вторая клетка во второй строке	Код сетки с фоном <TABLE background="URL Адрес фона"border=4> <TR> <TD>первая клетка в первой строке</td> <TD>вторая клетка в первой строке</td> </tr> <TR> <TD> первая клетка во второй строке</td> <TD>вторая клетка во второй строке</td> </tr> </table>
Рамки с разрывом рисунка: рамка растягивается на всю ширину записи	Рамки с разрывом рисунка: <fieldset><legend><img src="адрес картинки"></legend>рамка растягивается на всю ширину записи</fieldset>
Рамка с разрывом текста:   Все для вас Основная запись, растягивается на весь пост	Рамка с разрывом текста: <fieldset><legend>Запись в разрыве</legend>Основная запись</fieldset>
Фон записи поста Вместо этих слов пишите свой текст	Код фона записи поста <Table background= вместо этих слов пишите URl адрес картинки или ссылку№1 Радикала border="0"> <TBODY> <TR> <TD width=650 > Вместо этих слов пишите свой текст </TD> </TR> </TBODY> </TABLE>

 

Очень полезное для оформления и ведения блога (дневника)

 Вставить кнопочку в блог

Сделать блестяшку из картинок	Написать свое имя египетскими иероглифами
Сделать слайдшоу фоток	Сделать анимированный аватар(генератор)
Твоё фото на улицах города.генератор	Блестящий алфавит(более 15 видов)
Создай себе макияж на фото	Скролл-текст (прыгающий, плывущий и т.д.)

 

Генератор фотографий (рамочки, кубики тд)	Генератор с картинками
Сделай свой собственный смайл	Линейка - предсказание
Романтическая линеечка	Сделать блестяшку из картинок
Сделать аватар-картинку	Нарисуй картину сам!!!
Сделать блестящий текст	Нарисуй и отошли открытку
Блестящий текст-2	Наградить свой блог/планету орденом
Сделать куколку или Dolls mania	Нарисуй открытку - 2
Сделай куколку - 2	Надписи  в картинке
Сделай анимацию со своим именем!	Сделай анимацию со своим именем -2
Сделай анимацию со своим именем - 3	Надписи на машинах и тд

 

Куколки - 3. dollz mania glitter	Генератор неоновых надписей
Всякие глиттеры	Все сайты  анимации
Линеечки на сайт/блог/планету	Счетчики, информеры ...
Куда можно закачать файлы	Напиши свое имя на любом предмете (генератор)

Моя коллекция ссылок для вас!

Собрала для вас мои дорогие коллекцию нужных и интересных ссылок,надеюсь вам пригодится!


Ссылочки здесь>>>>>>>>>>>>>>>>>

Делаем Таблицу с Картинками(ссылками).

Девчата, меня попросили сделать урок, как можно,на небольшом пространстве разместить много картинок. В этом вам помогут Таблицы, в них очень удобно компактно загружать картинки. Таблица с 6 картинками будет выглядить вот так. Картинки лучше подбирать одного размера. ЗДЕСЬ далее... Милолика Покровская

Как сделать окошко для кодов?

Всем привет. Часто получаю в личку один и тот же вопрос - Как вставить код или текст в окошечко. Вот решила об этом и в блоге написать - вдруг кому ещё интересно будет.

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

<textarea rows="5" cols="40">Ваш текст или код Вашей картинки.

Теперь чуть подробнее о коде и как его применять

rows="5" - Цифра 5 это ВЫСОТА окошка
cols="40" - Цифра 40 это ШИРИНА окошка
При необходимости поменяйте эти значения на нужные Вам.

Пример на картинке:
1. Загрузите нужную картинку,
2. Скопируете код окошка написанный выше и поставьте его после загруженной картинки,
3. Скопируете код картинки полностью и вставьте его после кода окошка.

КАРТИНКА --->>> КОД ОКОШКА --->>>КОПИЯ КОДА КАРТИНКИ

<img width="300" height="200" src="//img1.liveinternet.ru/images/attach/c/2//68/714/68714354_1294071282_59012937_1a04f142cfe2.gif" alt="" />

Плюсом, то что Вас ещё может заинтересовать :
1.Сделай слайд-шоу
2.Коды цвета для текстов
3.Сделай для блога кнопку.
4.Как сделать баннер-картинку для блога.
5.Как сделать рамочку для текста самому.
Всё остальное для оформления - рамочки, эпиграфы, картинки и инструкция как вставить их в пост находятся в разделе - Для оформления блога