ALeX inSide (![[info]](http://l-stat.livejournal.com/img/userinfo.gif){kind=small} alex_inside) wrote,@ 2005-04-21 12:01:00 |
|
| Entry tags: | html, script, дизайн, жж, полезное, популярный пост в избранном |
HTML Тэги | Форматирование текста | Вставка картинок и ссылок | ЖЖ тэги | CSS
Для тех, кто забывает или не знает как пользоваться тэгами форматирования текста в своих постах, я написал эту напоминалку.
Всё это — простейшие тэги, но, думаю, вы найдёте для себя что-то новое :D Пост частенько обновляется для вашего удобства. Линкани на этот пост.
Если хотите сказать спасибо, поощрить, то автора можно порадовать смской, угостить пивом или чашечкой кофе.
|
На заметку: Как правильно оформлять посты и блоги. Советы. чтобы не искать:
ЖЖ кат, двойной ЖЖ кат, вставить картинку или ссылку или поместить картинку слева от текста. Алекс Инсайд?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">
<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>
» Как вместо ката сделать вертикальную перемотку большого текста?
<div style="overflow:auto; height:80px; width:500px; padding:8px; border:1px solid #ccc;">
Лорем ипсум долор сит амет, консектетур адиписицинг элит, сед до эиусмод темпор инцидидунт ут лаборе эт долоре магна аликуа. Ут эним ад миним вениам, кьюс ноструд эксерцитатьён ульламко лаборис ниси ут аликуип экс эа коммодо консекуат. Дьюс ауте ируре долор ин репрехендерит ин волуптате велит эссе киллум долоре эу фугиат нулла париатур. эксцептеур синт оккаекат купидатат alex_inside нон пройдент, сунт ин кульпа куй оффициа десерунт моллит аним ид эст лаборум.
</div >
alex_inside нон пройдент, сунт ин кульпа куй оффициа десерунт моллит аним ид эст лаборум.Если надо 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 ЖЖ теги ЖЖ тэги.
Общество![[info]](http://l-stat.livejournal.com/img/community.gif){kind=small}
alex_insight <lj comm=alex_insight>ЖЖ-Юзер
alex_inside <lj user=alex_inside>ЖЖ-Юзер
Алекс Инсайд <lj user=alex_inside title="Алекс Инсайд"> В ЖЖ возможна короткая запись: <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" — открывает ссылку в новом окне. Если это не нужно, удалите этот атрибут.)
Новое!
» ← ссылка на этот параграф. Как сделать ссылку на текст на странице, типа оглавления?
<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 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. Если всё же хотите чтобы тут что-то добавилось — пишите в комментарии. Это что-то должно быть не комплексное, а простое и что многим может понадобиться. На анонимные комменты не отвечу. От благодарственных речей не откажусь тоже =) В любом случае,Спасибо можно сказать тут!
Понравился пост? Добавь его на память в мемориз! ← Вставьте картинку в юзеринфо!
Узнай об обновлениях! Подпишись на комментарии к этому посту (в комментах я описываю что изменилось).
