ФДуЧ штЫшву в журнале ALeX inSide (![[info]](http://p-stat.livejournal.com/img/userinfo.gif){kind=small} alex_inside) wrote,@ 2005-04-21 12:01:00 |
|
| Entry tags: | html, lj, script, полезное, популярный пост в избранном |
HTML Тэги | Форматирование текста | Вставка картинок и ссылок | ЖЖ тэги | CSS
 Для тех, кто забывает или не знает как пользоваться тэгами форматирования текста в своих постах, я написал эту напоминалку. Всё это — простейшие тэги, но, думаю, вы найдёте для себя что-то новое =) Пост будет всё время обновляться в будущем.Обновление 19 сентября
<b>Полужирный текст</b> |
|
Цифра 0000ff означает синий цвет в RGB палитре.
Также можно пользоваться стандартными словесными обозначениями цветов вот так:
<font color="red">Красный текст</font>
У фона тоже можно менять цвет, вот так:
<div style="background-color:#eeeeff;">голубой фон</div>
<div style="background-color:lightgray; color:#0000ff;">синий текст, серый фон</div>
Обратите внимание на синтаксис. Аттрибут style использует синтаксис CSS.
Вот некоторые предопределённые цвета:Black White Red Green Blue Purple Firebrick Maroon OrangeRed MidnightBlue CornflowerBlueВ шестнадцатиричном коде указывающем интенсивность красного, зелёного и синего (RRGGBB): #000000 #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FF4444 #FF9999 #FFCCCC #9999FF #FF99FF #DDDDDD #FFE4C4 #CCCC99 #FF8DC #FA8072 #990000 #FF3030 #000080 #000066 #0000CD #AFEEEE #006400 #66FF00 #00B800 #DAA520 #FFCC33 #FFA500 #C71585 #8B008B #CC33FF | Выбрать подходящие цвета: |
HTML Тэги. Форматирование параграфов.
Оформить отступы абзацев, легко:<blockquote>
Процитированый в отдельном блоке текст
у которого будет
небольшой отступ слева.
</blockquote>
<p style="text-indent: 40px">
<div style="float:right; margin:8px; padding:6px; border:1px solid #bbbbbb; width:400px;">
Я врезаный, обтекающий другим текстом, текст с правого краю с выравниванием слева, с серой рамкой и отступом от рамки снаружи в 8 пикселей
</div>
1. Этот блок вставлен в текст слева перед (!) словом «Привет!»
Я врезаный, обтекающий другим текстом, текст с правого краю с выравниванием слева, с серой рамкой и отступом от рамки снаружи в 8 пикселей
</div>
2. Если блок внутри lj-raw, то переносы строк нужно указывать тэгом <br>
Привет! В этом абзаце первое предложение будет с красной строки, т.е. с отступом. Прямо как в книгопечати. Правда, в интернете это редкая практика. Абзацы должны разделяться просто пустым промежутком.
</p>
<div style="width:300px;">Опачки! Этот абзац будет написан с фиксированой шириной в 300 пикселей. Узенько так типа. А если добавить
style="width:300px; float:right;" тогда он ещё и будет висеть справа. Смотрите пример чуть ниже.</div><pre>Преформатированый текст
сохраняет отступы слева и между словами
и устанавливает те что вы укажите пробелами.
NB! тэг не делает переноса строки автоматом!
</pre>
<div align=right>
текст с правого краю
в две строчки с выравниванием справа
</div>
текст с правого краю
в две строчки с выравниванием справа
</div>
<div style="float:right;">
текст с правого краю
в две строчки с выравниванием слева
</div><br clear=all>
текст с правого краю
в две строчки с выравниванием слева
</div><br clear=all>
<marquee direction="up" scrollamount="1" scrolldelay="0" height="32"> </marquee>
<marquee direction="down" scrollamount="1" scrolldelay="0" height="32"> </marquee>
Специальные тэги HTML теги
Чтобы ширина окна браузера не влияла на переносы текста:<nobr>этот текст будет всегда в одну строку</nobr>
Чтобы между двумя словами не было переноса, можно поставить между ними неразрывный пробел.
<br> — перенос строки.
<hr> — линия на всю ширину экрана, вот такая:
HTML Тэги. Форматирование списков.
Добавляем тэг ol по краям и список становится сортированым автоматически:
- <ol>
- <li>Один из пунктов несортированого списка
- <li>Другой такой пункт
</ol>
HTML Спец. Символы.
| Код | Символ | Для набора на клавиатуре нажмите* |
| « | « | ALT+0171 |
| » | » | ALT+0187 |
| — | — | ALT+0151 |
| © | © | ALT+0169 |
| ® | ® | ALT+0174 |
| ™ | ™ | ALT+0153 |
| / | / | |
| < | < | |
| > | > | |
| | неразрывный пробел** | |
| HTML entities:
|
** - Вставьте вподряд несколько таких пробелов чтобы они не сливались в один:
— теперь слева отступ в семь пробелов!
HTML Тэги LiveJournal.com ЖЖ теги ЖЖ тэги.
Общество![[info]](http://p-stat.livejournal.com/img/community.gif){kind=small}
alex_insight <lj comm=alex_insight>ЖЖ-Юзер
alex_inside <lj user=alex_inside>Запись ЖЖ юзернейма типа «
ФДуЧ штЫшву» (скрипт-генератор)В ЖЖ возможна короткая запись: <a href=lj://user/alex_inside>ФДуЧ штЫшву</a>
» ЖЖ кат! Этот текст увидят в френдленте. <lj-cut>А этот текст будет под катом</lj-cut>
Этот текст увидят в френдленте. <lj-cut text="Загляни под кат, чувак!">Этот текст будет под катом</lj-cut>
<lj-raw>Этот текст не будет автоматически форматироваться<br>А это уже новая строка.</lj-raw>
Вот так нужно вставлять видео, flash, разные онлайн плееры и так далее:
<lj-embed> тут код на object и/или embed </lj-embed>
» Новое: Двойной ЖЖ кат! С помощью такого ката можно показывать одно снаружи и другое внутри:
<lj-raw><span style='display:none'><lj-cut><span style='display:none'></lj-cut></span> снаружи <span style='display:none'><lj-cut></span></sp
Обратите внимание: переносы строки не будут работать, нужно использовать тэг <br> или убрать все <lj-raw> тэги. Чтобы добавить традиционный кат, нужно добавить тэг <lj-cut> после слова «снаружи».
Кстати, если вы просто не хотите чтобы внутри поста была видна мини-превью вашей фотографии, есть скрипт «Zoom Cut: Улучшенное превью для фоток под ЖЖ-катом» (тут описание).
HTML Тэги. Ссылки. Линки.
<a href="http://www.fotki.com">Линк на сайт куда можно залить фотки!</a>Открыть ссылку в новом окне:
<a href="http://www.fotki.com" target="_blank">Линк на сайт куда можно залить фотки!</a>
Всплывающая подсказка при наведении курсора на ссылку:
<a href="http://www.fotki.com" title="Сайт куда можно залить фотки!">Залить фотки</a>
Картинка-ссылка (баннер):
<a href="http://www.fotki.com" title="Сайт куда можно залить фотки!"><img src=http://images.fotki.com/pixel.gif></a>
Кнопка-ссылка (форма):
<form action="http://alex-inside.ru/" target="_blank"><input type=submit value="Зайти на alex-inside.ru"></form>
(target="_blank" — открывает ссылку в новом окне. Если это не нужно, удалите этот атрибут.)
HTML Тэги. Картинки.
<img src="http://img241.echo.cx/img241/5329/n» Изображение со всплывающим текстом при наведении на него курсора:
<img src="http://img241.echo.cx/img241/5329/n
» Изображаение придвинутое влево, текст обтекает картинку справа и имеет горизонтальный отступ от неё в 6 пикселей:
<img src="http://img241.echo.cx/img241/5329/n
<div style="background: url(http://images18.fotki.com/v331/photos/4/4
Пишем текст поверх картинки.
Старайтесь это никогда не использовать,
потому что данный способ часто затрудняет
читаемость текста, в зависимости от картинки.
</div>
Пишем текст поверх картинки.
Старайтесь это никогда не использовать,
потому что данный способ часто затрудняет
читаемость текста, в зависимости от картинки.
</div>
» Картинка с прокруткой (скроллящаяся):
<div style="overflow: scroll; width:400px;"><img src="http://images28.fotki.com/v976/phot
(Отображаемую ширину указываем внешнему div-контейнеру в атрибуте width в пикселях. Для вертикальной прокрутки, указываем высоту height. Ширина и высота должна быть меньше чем у картинки.)
|
Частые ошибки при написании тэгов:
Ставьте пробел после закрывающей кавычки в атрибутах: <a href="http://www.abc.com"target=_blank>link</a> не будет работать! | Ссылки по теме: Подготовил © alex_inside
Запомнить эту страницу в мемориз |
Информация о тэгах иногда обновляется. Постоянный линк на этот пост:
Если вы не нашли что искали, то ищите ответы в интернете, например в yandex.ru или google.com. Если всё же хотите чтобы тут что-то добавилось — пишите в комментарии. Это что-то должно быть не комплексное, а простое и что многим может понадобиться. На анонимные комменты не отвечу. От благодарственных речей не откажусь тоже =) В любом случае,
Спасибо можно сказать сдесь!
Понравился пост? Добавь его на память в мемориз! 
Узнай об обновлениях! Подпишись на комментарии к этому посту (в комментах я описываю что изменилось).