Справочник по HTML

Самое популярное сообщение на лиру, которое набрало больше 10 тысяч цитат, посвящено кодам html. Всё в нем хорошо, да вот только объяснений мало. А ведь с сопроводительной информацией объем можно было бы уменьшить, рассказав какие параметры за что отвечают.
Писать про абсолютно все теги, которые можно использовать - бессмысленно: не хватит места, времени и желания. И, главное, мало кому нужно абсолютно всё.
Ну что же, поехали.

---

 

Оглавление
Прячем текст под кат
Начертание текста
Размер шрифта
Цвет текста
Гарнитура шрифта
Цитаты
Списки
Форматирование
Бегущая строка
Вставка изображений
Ссылки, баннеры
Рамки для текста
Форма для кода

Прежде чем начать изучение материала, кое-что поясню. Чтобы зайти с улицы в комнату, сначала надо зайти в квартиру, а потом уже в комнату. Также, чтобы выйти на улицу из комнаты, сначала мы выходим из нее, потом из квартиры.
К чему это я? К тому, что первым делом надо закрывать тот тег, который открыли последним. (исключение составляет тег ката).
И еще: не бойтесь экспереминтировать. Html не может убить ваш компьютер и стереть информацию)

Кат.
(Прячем текст, как это сделано с большей частью сообщения)

текст1 [more=далее]текст, который прячем[/more] текст2 текст1 далее текст2

Даже если текста 2 нет, закрывающий тег лучше ставить.

К оглавлению.

Начертание текста.

<b>Ваш текст</b> Ваш текст

<strong>Ваш текст</strong> Ваш текст

Как видите, результат не отличается, но только внешне. А так, это две разных логических структуры.
b(bold) - визуальное выделение текста, Strong - логическое выделение.
Логическое выделение нужно для того, чтобы указывать машинам (поисковым системам), что является главным
в тексте. Собственно, принцип расставления strong и em (о котором на абзац ниже) схож с разбиением текста на абзацы при написании работ.
То есть, каждый сам решает, что следует выделить. Использовать оба тега сразу конечно же не надо.

<i>Ваш текст</i> Ваш текст

<em>Ваш текст</em> Ваш текст

Как видите, результат снова не отличается. Но как и в случае с b/strong, i(italic) - визуальное выделение, em(emphasis) - логическое.
Также для обозначения терминов, которые первый раз используются в тексте можно использовать тег <dfn>Ваш текст</dfn>

<u>Ваш текст</u> Ваш текст

<s>Ваш текст</s> Ваш текст

u(underline) - подчекрнутый, s(strike) - зачеркнутый текст. Можно использовать и <strike>Ваш текст</strike>
Иногда для наглядности версий текста используют тег <del>Ваш текст</del> для обозначения текста, который был удален. Отображается перечернкутым.
Для добавленного текста используется <ins>Ваш текст</ins>. Отображается подчеркнутым.

<abbr title="Unified Model Language">UML</abbr> UML

<acronym title="Unified Model Language, Универсальный язык моделирования">UML</acronym> UML

abbr(аббревиатура) - сокращенное написание слова или группы слов. acronym(акроним) - устоявшееся сокращение, которое применяется как самостоятельное слово. Но это не запрещает использовать acronym (но не abbr) для описания расшифровки термина.

<sub>Ваш текст</sub> Ваш текст | обычный текст

<sup>Ваш текст</sup> Ваш текст | обычный текст

sub(subscript) и sup(superscript) - верхний и нижний индекс.
Можно использовать для написания формул (sub) и для обозначения сносок (sup).

К оглавлению.

Размер шрифта.

<big>Ваш текст</big> Ваш текст | обычный размер

<small>Ваш текст</small> Ваш текст | обычный размер

big - увеличивает размер шрифта на 1 пункт относительно размера текста документа по умолчанию, small - уменьшает на единицу.

<font size="+1">Ваш текст</font> Ваш текст | обычный размер

<font size="-1">Ваш текст</font> Ваш текст | обычный размер

Параметр size отвечает за размер шрифта. Значение может быть как относительным ( сколько-то пунктов), так и абсолютным.
Допустимый диапазон: от 1 до 7. По умолчанию размер равен 3. Одинаковые размеры разных шрифтов визуально могут отличаться.

<font size="4">Ваш текст</font> Ваш текст | обычный размер

<font size="2">Ваш текст</font> Ваш текст | обычный размер

Как видим, 4 в данном случае эквивалентно +1, а 2 - -1. Как я уже говорил, это связано с стандартным размером равным 3.

К оглавлению.

Цвет текста.

<font color="cyan">Ваш текст</font> Ваш текст

<font color="#00FFFF">Ваш текст</font> Ваш текст

Цвет текста можно задать двумя способами: по названию, либо по шестнадцатеричному коду.
Стандартные цвета: black, white, red, green, blue, yellow, magenta, cyan, purple, lime, maroon, auqa, navy, fuchsia.
Вот некоторые коды распространенных цветов.

#000000

#993300

#333300

#003300

#003366

#000080

#333399

#333333

#800000

#FF6600

#808000

#008000

#008080

#0000FF

#666699

#808080

#FF0000

#FF9900

#99CC00

#339966

#33CCCC

#3366FF

#800080

#969696

#FF00FF

#FFCC00

#FFFF00

#00FF00

#00FFFF

#00CCFF

#993366

#C0C0C0

#FF99CC

#FFCC99

#FFFF99

#CCFFCC

#CCFFFF

#99CCFF

#CC99FF

#FFFFFF

#9999FF

#993366

#FFFFCC

#CCFFFF

#660066

#FF8080

#0066CC

#CCCCFF

#000080

#FF00FF

#FFFF00

#00FFFF

#800080

#800000

#008080

#0000FF

К оглавлению.

Гарнитура шрифта.

<font face="Arial">Ваш текст</font> Ваш текст

<font face="MS Mincho, Verdana">Ваш текст</font> Ваш текст

Некоторые часто используемые шрифты: Arial, Comic Sans MS, Courier New, Georgia, Tahoma, Times New Roman, Verdana.
Как видите, в параметре face можно указать несколько шрифтов через запятую.
Если первый шрифт не найдет браузером, будет использован следующий из списка.

Цитаты.

<cite>Ваш текст</cite> Ваш текст

<q>Ваш текст</q> Ваш текст

<blockquote>Ваш текст</blockquote> Ваш текст

cite используется для логического выделения цитат. Текст браузером внутри тега выделяется курсивом.
q выделяет текст кавычками. Все браузеры (кроме некоторых версий IE) подставляют кавычки корректно.
blockquote: текст отображается как выровненный блок с отступами слева и справа (около 40 пикселей), а также с отбивкой сверху и снизу.

К оглавлению.

Списки.

<ul><li>пункт 1</li><li>пункт 2</li></ul> пункт 1 пункт 2

<ol><li>пункт 1</li><li>пункт 2</li></ol> пункт 1 пункт 2

Для конструирования списков сначала определяется их тип: нумерованный(тег ol) или маркированный(тег ul), а потом описываются элементы (тег li).
Вложенные списки имеют место быть, но на лиру не поддерживаются. Но есть небольшая хитрость)

К оглавлению.

Форматирование.
span и div.
тег span можно использовать внутри других тегов для задания элементам стилей, отличных от общего.
тег div является блочным элементом и предназначен для выделения фрагмента с целью изменения вида содержимого.

Текст1<span style="padding-left: 10px;">Текст2</span> Текст1Текст2

Текст1<div style="padding-left: 10px;">Текст2</div> Текст1 Текст2

Для задания отступов используется свойство css style и некоторые его параметры:
margin - отступы блока относительно остальных элементов. padding - отступы внутри блока для текста, чтобы он не прилипал к границам
Так как CSS для написания постов изучать смысла нет, можно ограничиться заданием отдельных границ:
margin-top, margin-right, margin-bottom, margin-left и padding-top, padding-right, padding-bottom, padding-left
Как раз левое поле и задано в приведенном коде. Значение - в пикселах.

<br> Новая строка

<hr> Горизонтальная линия

Когда вы работаете в расширенном редакторе, по нажатию Enter происходит не переход на новую строку, а в новый абзац. В связи с этим возникают
проблемы с, например, картинками в тексте. Выравнивание действует только внутри абзаца. Поэтому, следует делать переходы на новые строки,
а не создавать абзацы. Новая строка в расширенном редакторе - Shift+Enter или же просто <br> в коде.

<p>Ваш текст</p> Ваш текст

<pre>Ваш текст</pre> Ваш текст

p - задание абзацев, pre - блок предварительно форматированного текста.
Внутри pre запрещено использование изображение и тегов для изменения шрифта.
Важным свойстров абзаца (p) является выравнивание - align. <p align="left | center | right | justify">...</p> - соответсвенно используем 1 из параметров.
justify - выравнивание по ширине.

  текст внутри обоих этих тегов можно выравнять. Делается это при помощи свойства CSS - text-align.
Также есть параметр text-indent, задающий отсуп первой строки текста в блоке.

<p style="text-align: center;">Ваш текст</p> Ваш текст

<p style="text-indent: 20;">Ваш текст</p> Ваш текст

Теги h1 .. h6.
задают заголовки 6 разных уровней (1 - самый большой). Являются блочными элементами. Есть свойство align.
<h1>Ваш текст</h1>

К оглавлению.

Бегущая строка - marquee.
<marquee hspace="3" height="50" bgcolor="#ffff99" width="300" vspace="3" style="text-align: center; color: magenta;" behavior="alternate" direction="down" loop="2" scrollamount="10" scrolldelay="100" truespeed=""> а я бегу 1 раз вниз и 1 раз вверх</marquee>

а я бегу 1 раз вниз и 1 раз вверх
(вы могли не видеть, как она пробежала лишь 1 раз)

Параметры:
(конечно же необязательно
behavior - Задает тип движения содержимого контейнера. Значения: behavior="alternate | scroll | slide"
alternate - содержимое перемещается между правым и левым краем элемента.
scroll - перемещается в направлении, заданным параметром direction, затем скрывается за пределами области, после чего начинает движение с начала.
slide - содержимое перемещается в направлении, заданным параметром direction, доходит до края области и останавливается.
bgcolor - Цвет фона. Подробнее о цветах было выше.
direction - Указывает направление движения содержимого контейнера. Значения: direction="down | left | right | up"
height и width - высота и ширина области прокрутки.
hspace и vspace - горизонтальные и вертикальные поля вокруг содержимого.
loop - задает, сколько раз будет прокручиваться содержимое (натуральное число). -1 - бесконечное повторение.
scrollamount - скорость движения содержимого (в пикселах).
scrolldelay - величина задержки в миллисекундах между движениями.
truespeed - отменяет встроенный ограничитель скорости при низких значениях параметра scrolldelay.

К оглавлению.

Вставка изображений.
<img height="62" border="0" align="center" width="100" alt="текст, который виден без картинки" title="Текст при наведении на картинку" src="//img-fotki.yandex.ru/get/3310/lexincorp.be/0_1e172_a5664669_XS.jpg" />

Естесвенно основной частью является <img src="//img-fotki.yandex.ru/get/3310/lexincorp.be/0_1e172_a5664669_XS.jpg">
Собственно, чтобы показать картинку нам хватит и этого кода.

src (source) - адрес, где расположено изображение.
height и width - размеры показываемого изображения. Никто не запрещает растянуть или уменьшить изображение. В оригинальном размере картинку всегда можно увидеть, нажав "открыть изображение". Ну и пользователю она будет загружаться вся, т.е. сделав кодом из картинки 1000*800 маленькую 100*80 вы ничего не улучшите - грузиться она будет так же долго и съест столько же трафика.
alt (alternative) - альтернативный текст изображения, который виден при просмотре без отображения картинок (когда экономят трафик).
title - текст, видимый при наведении мышкой на картинку.
align - знакомый нам параметр выравнивания. Как я уже говорил в разделе про абзацы и строки, выравнивание будет действовать только внутри абзаца. Представьте, что каждый абзац - это строка в таблице. Ну так вот если вставить картинку в первую строку, та станет высотой не меньше картинки, но не залезет на вторую. Поэтому следите за тем, куда вставляете их)
hspace и vspace - задают отступ от изображения до окружающего контента
border - толщина рамки вокруг изображения.

К оглавлению.

Ссылки.
<a target="_blank" title="Это ссылка на картинку из примера про картинки, откроется она в новом окне" href="//img-fotki.yandex.ru/get/3310/lexincorp.be/0_1e172_a5664669_XS.jpg">анкор</a>
анкор

href - адрес, куда нужно перейти
title - текст, появляющийся в качестве подсказки при наведении на ссылку
target - параметр отвечающий за то, где открывать ссылку - в том же окне или новом.
Если target не задан, то открывается в том же окне (эквивалент _self). Из возможных значений нас интересует еще и _blank - открытие в новом окне/вкладке.
анкор - анкором называют текстовую часть ссылки.
На самом деле, вместо этого слова мы могли бы туда поставить код картинки из предыдущего примера и ... получить баннер - кликабельную картинку.
Ну а также, мы теперь можем сделать из баннера просто картинку, убрав код, отвечающий за ссылку.

К оглавлению.

Рамки для обрамления текста.

<div style="border:1px dashed black;">Ваш текст</div> Ваш текст

Для задания вида рамки используется атрибут border, который задается для стиля блока div.
Сначала задается толщина рамки, затем тип, потом цвет. Таблица цветов и стандартные имена уже приводились.
Возможные типы рамок:

dotted	dashed	solid	double
groove	ridge	inset	outset

И конечно же никто не запрещает использовать в стиле div другие атрибуты.
Например, padding и margin, речь о которых шла выше.

К оглавлению.

Форма для текста.
Они-то и использовались везде)

<textarea style="text-align: center;" readonly="readonly" cols="45" rows="2">Ваш текст</textarea> Ваш текст

textarea - область с текстом. rows - количество строк, cols - кол-во столбцов (символов в строке)
readonly - чтобы случайно пользователь не изменил код и не перезагружал страничку.
также есть параметр disabled, запрещающий выделять и копировать код из textarea.

Наверх

 

Рассмотрим причины, по которым люди вообще остаются одни: 

 

Первая причина – страх первого шага.

 

Действительно, страшно написать письмо в личку примерно такого содержания: «Привет, Вася Пупкин! Я хочу с тобой дружить!» Кто-то даже скажет: «Да не то что страшно, а вообще нереально!» Отчего… вы же не укусили этим, да и сам Вася Пупкин не кусается! Не ответит, значит, это не ваш друг. Смею вас уверить, что на десять посланных вами писем один ответ будет все же положительным!

 

Вторая причина – неумение делиться.

 

К сожалению, есть люди, которые не умеют отдавать. Им помогли, а они быстро все забывают, как только получили просимое. Им оказали знак внимания, а они восприняли это как должное и не ответили взаимностью.

 

Третья причина – неумение общаться.

 

Последите за своей речью или письмом. Если вы отвечаете на письмо оппонента, который вам желает помощи и предлагает прочесть материал, который будет полезен для вас, так как вы именно на эту тему задавали вопрос – «Спасибо большое, я обязательно прочитаю позже…», то вы, скорее всего, отбросили шанс подружиться с этим человеком.

 

Далее я позволю себе описать моменты, на которые следует обратить внимание при наличии желания подружиться.

 

Спецкоды – слова, заключенные в квадратные или угловые скобки, которые помогают менять вид текста и делают разные другие полезные вещи. Спецкоды в угловых скобках <> называются HTML -кодами. Их можно вводить «от руки» только в простом редакторе, в расширенном редакторе вместо них нужно можно пользоваться кнопками над текстом (как в Word). Если очень нужно использовать еще и в расширенном — нажимайте кнопку Источник в левом верхнем углу.

Коды, заключенные в квадратные скобки, не являются универсальными, иногда называются BB-кодами, так как происходят из форумов. Их можно использовать и в простом, и в расширенном редакторе. Если в BB-коде используется ссылка (код FLASH, например), то надо следить, чтобы расширенный редактор не «подчеркнул» ее, а у простого редактора убрать внизу галочку «Автоматическое распознавание ссылок», иначе код может не сработать правильно. Для удобства использования некоторых BB-кодов в простом редакторе можно активизировать панель спецкодов.

 

Перечислим сначала спецкоды, которые уникальны для нашего сайта (вызывают больше всего вопросов), затем BB-коды, которые могут заменять HTML-коды.

---

ВВ-коды Лиру

Коды, используемые не на всех сайтах

[user=bravedefender] — позволяет поставить красивую ссылку на пользователя сайта (вместо пробелов в имени нужно указывать нижнее_подчеркивание)

bravedefender

[user=bravedefender]Саша[/user] — позволяет назвать при этом пользователя по-особенному

Саша

---

[more] — если вставить такой тег в сообщение, то на этом месте оно оборвется, и появится ссылка «Читать далее», которая будет вести на комментарии к сообщению и полному тексту записи. Очень нужно ставить такой тег перед видео, флеш-роликами, большими картинками или серией картинок, экономя трафик и ускоряя загрузку страницы своего дневника

 

[more=Нажмите, чтобы увидеть картинки] — так можно заменить текст «Читать далее» на свой

[/more] — а вот так можно обозначить окончание «тяжелой» части страницы и продолжить текст

---

[img=ссылка_на_картинку align=left] — так в текст можно вставить картинку, зная ее адрес. align=left означает, что картинка будет прижата к левому краю записи и текст будет ее обтекать. Можно заменить на align=right (вправо) или align=center (по центру) или вообще не использовать

---

[quote]ваш текст, цитата[/quote] — выделение какой-либо цитаты (отдельный блок со сдвигом вправо)

 

ваш текст, цитата

 

---

[flash=ссылка_на_flash_ролик] — так можно вставить в страничку flash-ролик, если известен его адрес (ссылка на него). Кстати, кто еще знает о существовании на Лиру вот этой страницы с флешками? - http://www.liveinternet.ru/flash.html

[flash=600,400,ссылка_на_flash_ролик] — ролик будет вставлен в поле с размерами 600х400(или любыми другими, заданными вами)

---

[mp3=ссылка_на_mp3] — так можно вставить в страничку кнопки «слушать» и «скачать» для mp3-файла, который расположен по заданному ссылкой адресу

 

 

---

[poll=номер_голосования] — вставляет в сообщение вопросы, а в комментарии результаты голосования, которое вы выбрали. Создать свое голосование можно по ссылке внизу страницы создания новой записи в дневнике (или сразу по этой ссылке)

 

Понравился пост?

Всего проголосовало 22 человек

Понравился пост?

Да (100,0 %)

Нет (0 %)

Пох (0 %)

Перейти к вопросам   Отчет о голосовании [Все новые голосования]

 

---

Стандартные ВВ-коды

Стандартные «форумные» BB-коды, используемые на многих сайтах

[url]ссылка_на_сайт[/url] — простая ссылка

http://bravedefender.ru

[url=ссылка_на_сайт]Интернет. В порядке бреда[/url] — ссылка с произвольным текстом (анкором)

Интернет. В порядке бреда

---

[b]ваш текст[/b] — жирный текст

ваш текст

[i]ваш текст[/i] — наклонный текст

ваш текст

[u]ваш текст[/u] — подчеркнутый текст

ваш текст

[s]ваш текст[/s] — зачеркнутый текст

ваш текст  

---

[color=цвет]ваш текст[/color] — текст заданного цвета (цвета — blue, red, green и т.д.)

ваш текст

---

[size=размер]ваш текст[/size] — текст заданного размера (-3, +1, 10 — числа или операции изменения)

ваш текст

---

[list] [*]Элемент списка [*]Еще элемент списка [/list] — список чего-либо

 

• Элемент списка
• Еще элемент списка

 

[list=А] [*]Элемент списка [*]Еще элемент списка [/list] — список, маркированный буквами (латинские)

 

1. Элемент списка
2. Еще элемент списка

 

[list=1] [*]Элемент списка [*]Еще элемент списка [/list] — пронумерованный список

 

1. Элемент списка
2. Еще элемент списка

 

---

Дополнительно

Некоторые ВВ-коды, которые понимает Лиру

[email][email protected][/email] — ссылка-адрес E-mail, при нажатии на которую запустится почтовая программа "по умолчанию", для отправки письма на указанный адрес

[email protected]

[[email protected]]Нажмите для отправки письма[/email] —ссылка-адрес E-mail с произвольным текстом

Нажмите для отправки письма

---

[code]$this_var = "Лирушники всех стран, объединяйтесь!";[/code] — ВВ-код для оформления произвольного кода, который вы хотите показать в сообщении

 

code:

---

$this_var = "Лирушники всех стран, объединяйтесь!";

---

 

---

Основная информация по ВВ-кодам представлена на странице справки Ли.ру.

Приложение. Названия цветов для использования в ВВ-кодах:

 

аква— aqua

белый — white

желтый — yellow

зеленый — green

известь — lime

красный — red

оливковый — olive

серебряный — silver

серый — gray

синий — blue

темно-бордовый — maroon

темно-синий — navy

фиолетовый — purple

фуксия — fuchsia

черный — black

чирок — teal

Интернет. В порядке бреда (с)

Серия сообщений "Коды. HTML и ВВ [Codes. HTML&BB]":
Часть 1 - Использование спецкодов (ВВ-кодов) на Лиру
Часть 2 - Как скачать сразу все фотографии по ссылкам-превью с помощью плагина DownThemAll! для Firefox
Часть 3 - Как вставить HTML-код в сообщение, эпиграф, комментарий
Часть 4 - Как добавить голосование на видео
Часть 5 - Как разместить аудио в посте или комментарии с помощью ВВ-кода
Часть 6 - Как вставить картинку в комментарий. Даже если не вставляется
Часть 7 - Простой способ вставить картинку
Часть 8 - Как вставить открытку (картинку) в личное сообщение на ЛиРу
Часть 9 - Как скопировать со страницы некопируемый текст

 

 

вам никто не рассказал.

Скажу сразу и честно: решил собрать у себя, чтобы потом на все подобные вопросы отвечать ссылкой на этот пост (или из этого поста). Пользуясь случаем, хочу поблагодарить сообщество Сама_овца. Оно не только меня вдохновило на создание этого сообщения, но и поделилось первыми ссылками.

Итак, здесь будет что-то типа самый полный FAQ по ЛиРу



Вот и всё...