Всё это простейшие тэги, но, думаю, вы найдёте для себя что-то новое :D Пост частенько обновляется для вашего удобства.
Обновление: 4 февраля. Пролайкайте пост в фейсбуке! :) →
Обновление: 16 апреля. На заметку: Как правильно оформлять посты и блоги. Советы. чтобы не искать:
ЖЖ кат, двойной ЖЖ кат, вставить картинку или ссылку или поместить картинку слева от текста. HTML Тэги. Форматирование шрифта.<b>Полужирный текст</b><i>Выделение текста курсивом</i> <u>Подчёркнутый текст</u> <s> <small>Маленький шрифт</small> <big>Большой шрифт</big> Знак сноски<sup>сверху</sup> или индекс<sub>снизу</sub> от текста <font style="font-size:16pt;">Шрифт размером 16 пикселей</font> Предопределённые размеры шрифта (могут быть от 1-го до 7-го): <font size="3">Шрифт 3-го размера</font> <font size="+1">Шрифт на 1 размер больше обычного</font> <h2> Заголовок 2-го размера</h2><font style="font-family:Comic Sans Ms;">Шрифт Comic Sans Ms</font> <font style="font-family:Monotype Corsiva;">Шрифт Monotype Corsiva</font> <font style="font-family:Tahoma; font-size:15pt;">Tahoma, 15 пикселей</font> |
Последние посты автора:Заходите, не стесняйтесь откомментить.
|
Цифра 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">
Я врезаный, обтекающий другим текстом, текст с правого краю с выравниванием слева, с серой рамкой и отступом от рамки снаружи в 8 пикселей
</div>
2. Если блок внутри lj-raw, то переносы строк нужно указывать тэгом <br>
style="width:300px; float:right;"
тогда он ещё и будет висеть справа. Смотрите пример чуть ниже.</div><pre>Преформатированый текст сохраняет отступы слева и между словами и устанавливает те что вы укажите пробелами. NB! тэг не делает переноса строки автоматом! </pre>
текст с правого краю
в две строчки с выравниванием справа
</div>
текст с правого краю
в две строчки с выравниванием слева
</div><br clear=all>
<marquee direction="up" scrollamount="1" scrolldelay="0" height="32"> </marquee>
<marquee direction="down" scrollamount="1" scrolldelay="0" height="32"> </marquee>
» Как вместо ката сделать вертикальную перемотку большого текста?
<div style="overflow:auto; height:80px; width:500px; padding:8px; border:1px solid #ccc;">
Если надо HTML-код вставить, показать кому-то, то то же самое можно сделать
<textarea cols="80" rows="5">
</textarea>
Специальные тэги HTML теги
Чтобы ширина окна браузера не влияла на переносы текста:<nobr>этот текст будет всегда в одну строку</nobr>
<blink>мигающий текст</blink> — не используйте этот тэг :)
Чтобы между двумя словами не было переноса, можно поставить между ними неразрывный пробел.
<br> — перенос строки.
<hr> — линия на всю ширину экрана, вот такая:
HTML Тэги. Форматирование списков.
Добавляем тэг ol по краям и список становится сортированым автоматически:
- <ol>
- <li>Один из пунктов несортированого списка
- <li>Другой такой пункт
</ol>
HTML Спец. Символы.
Код | Символ | Для набора на клавиатуре нажмите* |
« | « | ALT+0171 |
» | » | ALT+0187 |
— | — | ALT+0151 |
© | © | ALT+0169 |
® | ® | ALT+0174 |
™ | ™ | ALT+0153 |
/ | / | |
< | < | |
> | > | |
| ALT+0160 — неразрывный пробел** |
HTML entities:
|
** - Вставьте вподряд несколько таких пробелов чтобы они не сливались в один:
— теперь слева отступ в семь пробелов!
Кстати, чтобы HTML код был как обычный текст, перед тем как писать, откройте Windows Notepad,
вставьте ваш HTML-код, выберите автозамену
А чтобы ссылка на какую-то страницу не была активной, например http://alex-inside.ru , нужно писать http://alex-inside.ru
HTML Тэги LiveJournal.com ЖЖ теги ЖЖ тэги.
Общество
ЖЖ-Юзер
ЖЖ-Юзер
В ЖЖ возможна короткая запись: <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>
» Новое: Двойной ЖЖ кат! С помощью такого ката можно показывать одно снаружи и другое внутри:
Обратите внимание: переносы строки не будут работать, нужно использовать тэг <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" — открывает ссылку в новом окне. Если это не нужно, удалите этот атрибут.)
Новое!
» ← ссылка на этот параграф. Как сделать ссылку на текст на странице, типа оглавления?
<a name="oglavlenie"></a> Демо-Оглавление (Нажмите на название, чтобы проскроллить вниз к главе:)
↓ <a href="#vstuplenie">Вступление</a> — (тут мы ставим ссылку # на якорь «vstuplenie»)
↓ <a href="#interes">Интересная глава</a>
↓ <a href="#ssylki">Заключение и ссылки</a>
<a name="vstuplenie"></a> Наше клёвое вступление. — (тут якорь «vstuplenie» перед нужным текстом)
<a name="interes"></a> Текст интересной главы.
↑ <a name="ssylki" href="#oglavlenie">Перейти в оглавление</a> — (тут ссылка является одновременно и якорем)
Если нужно дать ссылку на другой сайт, то # идёт в конце строки линка URL.
HTML Тэги. Картинки.
<img src="http://img241.echo.cx/img241/5329/n<img src="http://img241.echo.cx/img241/5329/n
<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>
» Картинка с прокруткой (скроллящаяся):
<div style="overflow: scroll; width:400px;"><img src="http://images28.fotki.com/v976/phot
(Отображаемую ширину указываем внешнему div-контейнеру в атрибуте width в пикселях. Для вертикальной прокрутки, указываем высоту height. Ширина и высота должна быть меньше чем у картинки.)
FAQ: Коротенький список часто задаваемых вопросов
Послесловие
Частые ошибки при написании тэгов:
Ставьте пробел после закрывающей кавычки в атрибутах: <a href="http://www.abc.com"target=_blank>link</a> не будет работать! | Ссылки по теме: Подготовил © Запомнить эту страницу в мемориз |
Информация о тэгах иногда обновляется. Постоянный линк на этот пост:
Поддержка
Если вы не нашли что искали, то ищите ответы в интернете, например в yandex.ru или google.com. Если всё же хотите чтобы тут что-то добавилось — пишите в комментарии. Это что-то должно быть не комплексное, а простое и что многим может понадобиться. На анонимные комменты не отвечу. От благодарственных речей не откажусь тоже =) В любом случае,Donate: Обычно никто никогда не делает никакие донэйшены, но вдруг вы не как все: Если хотите сказать спасибо, поощрить, то автора можно порадовать смской, угостить пивом или чашечкой кофе. На крайняк, можете платный жж-аккаунт задарить. Правда, так ещё никто не делал. Хыхы.


← Ctrl ← Alt
Ctrl → Alt →
← Ctrl ← Alt
Ctrl → Alt →