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

Для начала обозначу, что я не стану писать о том, как сделать выравнивание текста, изменить его размер или цвет, сделать маркированный список или таблицу. Все эти вещи вы можете легко найти на панели инструментов в расширенном редакторе текста при написании поста. Для тех, кто не понимает, о чём идёт речь, приведу пару скриншотов:

Выбор редактора текста (выбран расширенный)

Панель инструментов расширенного редактора.

 

Это всё те вещи, которые используются большинством блоггеров. Однако записи в дневе позволяют использовать много больше возможностей языка HTML, нежели представлено на панели инструментов. Чтобы увидеть, как выглядит форматированный текст в исходном коде, вам достаточно нажать кнопку "Источник" в левом верхнем углу. Знакомтесь - это HTML.

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

Давайте посмотрим, что можно написать в источник, чтобы получить разные эффекты.

Бегущая строка:

 <marquee>Текст</marquee>

Результат:

 

Текст

 

<marquee direction="right">Вправо</marquee>

Результат:

 

Вправо

 

<marquee behavior="alternate">От края до края</marquee>

Результат:

 

От края до края

 

 

Бегущая картинка:

Для бегущей картинки достаточно внутрь тега бегущей строки вставить тег картинки:

<marquee><img src="адрес картинки"></marquee>

Результат:

 

 

 

Скролловый текст:

<marquee direction="up" scrollamount="1" scrolldelay="0" height="32">ВАШ ТЕКСТ</marquee>

Результат:

 

Текст текст текст,
много разного текста
и он бегает значит тут

 

<marquee direction="down" scrollamount="1" scrolldelay="0" height="32">ВАШ ТЕКСТ</marquee>

Результат:

Текст текст текст,
много разного текста
и он бегает значит тут

 

 

Текст в исходном виде.

Известно, что редактор "чистит" текст от повторяющихся пробелов. Однако иногда пробелы нужны для распределения слов по строкам. На такой случай можно воспользоваться тегом <pre>         т е    к с        т</pre>

         т е    к с        т

 

 

Скрыть часть текста (кат, убрать под кат).

Иногда посты содержат много текстовой информации или много фотографий, картинок, флешэлементов и прочего. Такой пост весит очень много, загружается медленно и в целом портит вид днева и осложняет его чтение, потому что посты загружаются очень медленно. На такой случай и существует кат. Самая тяжёлая часть сообщения берётся в тег [mоre] [/mоre]. Таким образом общая схема сообщения будет выглядеть так:

Вступительная часть, описание поста.

[mоre=Читать дальше]

тяжёлая часть поста, картинки, куча текста и пр.

[/mоre]

Таким образом, сообщение целиком увидит лишь тот, кто нажмёт на соответсвующую ссылку. В остальном пост будет выглядеть укорочено и будет загружаться быстрее. Кстати говоря, текущее сообщение тоже написано с использованием ката :)

 

 

Обычная табличная рамка.

Как сделать просую рамку вокруг текста? Просто нарисовать таблицу 1х1 ! Просто, не правда ли?)

<table border="1" cellpadding="5"><tr><td>Ваш текст в рамке</td></tr></table>

Ваш текст в рамке

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

<table border="1" cellpadding="5"><tr><td><table border="1" cellpadding="5"><tr><td><table border="1" cellpadding="5"><tr><td>Ваш текст в рамке</td></tr></table></td></tr></table></td></tr></table>

Ваш текст в рамке

 

Другой тип рамки.

<fieldset><legend>Легенда блока</legend>Ваш текст в рамке (во всю ширину страницы) </fieldset>

Результат:

Легенда блока

Ваш текст в рамке (во всю ширину страницы)

 

 

К данной рамке тоже можно применить различные стили, например так

<fieldset style="border:3px dotted green;"><legend>Легенда блока</legend>Ваш текст в рамке (во всю ширину страницы) </fieldset>

 

Легенда блока

Ваш текст в рамке (во всю ширину страницы)

 

 

Можно извращаться ещё больше:

<textarea style="border-right: black 2px solid; border-top: black 2px solid; background-color:dodgerblue; color:white; border-left: black 2px solid; border-bottom: black 2px solid; width: 450px; height: 20px;">Ваш код</textarea>

Ваш код

Разберём подробнее, для новичков этот пример сложен.

параметр border-right отвечает за правую границу рамки. В примере она чёрная (black), толщиной в 2 пиксела (2px), сплошная (solid).

параметр background-color отвечает за текст фона.

параметр color - цвет текста в рамке.

параметры width: 450px; height: 20px задают ширину и высоту соответсвенно.

 

В общем-то, язык не сложный, главное понять. А пост этот на заметку и в памятку, чтобы не терять информацию :)

Вопросы в комментарии ->