Это цитата сообщения Demonexe Оригинальное сообщение
Каты, блоки, рамки, бегущий текст и прочие плюшки HTML.
Итак, сегодня решил написать-таки пост про разные способы форматирования текста (и не только) в сообщениях блога. Информация, безусловно, полезная и нужная, однако как показывает практика, далеко не все блоггеры владеют данными знаниями. Благо самому мне придумывать ничего не нужно - всё уже разработано и внедрено. Я лишь расскажу о некоторых интересных вещах, скрытых от обычного пользователя.
Для начала обозначу, что я не стану писать о том, как сделать выравнивание текста, изменить его размер или цвет, сделать маркированный список или таблицу. Все эти вещи вы можете легко найти на панели инструментов в расширенном редакторе текста при написании поста. Для тех, кто не понимает, о чём идёт речь, приведу пару скриншотов:
Выбор редактора текста (выбран расширенный)
Панель инструментов расширенного редактора.
Это всё те вещи, которые используются большинством блоггеров. Однако записи в дневе позволяют использовать много больше возможностей языка 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 задают ширину и высоту соответсвенно.
В общем-то, язык не сложный, главное понять. А пост этот на заметку и в памятку, чтобы не терять информацию :)
Вопросы в комментарии ->