Базовые навыки HTML

Эксперты со статусом 3-ий класс и выше получают возможность использовать в своих сообщениях html-теги для форматирования текста. На данной странице приведены основные и наиболее часто используемые html-теги. Словом, даже если Вы не знакомы с HTML, данное руководство Вам поможет.

Стили текста

Как и во всех текстовых редакторах, в HTML существуют стили форматирования текста:

Жирный (bold) - оформляется с помощью тега <STRONG> и соответствующего закрывающего тега </STRONG>.

Курсив (italic) - оформляется с помощью тега <EM> ... </EM>.

Пример: "<EM>Стоит обратить внимание на <STRONG>этот</STRONG> факт</EM>" будет отображено так: "Стоит обратить внимание на этот факт".

Существует возможность сделать текст зачёркнутым (пример) - это делается тегом <S> ... </S>, хотя используется довольно редко.

Гиперссылки

Очень часто даются ссылки на какие-либо сайты, файлы или e-mail адреса. Все они являются гиперссылками и выделяются с помощью тега <A HREF> ... </A>. В параметр HREF помещается адрес для перехода в тот момент, когда пользователь щёлкнет по ссылке. Дополнительный параметр - TARGET позволяет указать браузеру, в каком окне нужно открыть данную ссылку. Внутри тега (т.е. между <A> и </A> может быть всё, что угодно - текст, изображение и т.п. - и всё это примет стиль гиперссылки). Вот простые примеры:

Обычная ссылка: <a href="http://www.delphi.int.ru">Сайт www.delphi.int.ru</a> : Сайт www.delphi.int.ru

Ссылка, которая откроется в новом окне: <a href="http://expert.delphi.int.ru" target="_blank">Delphi.int.ru Expert </a> : Delphi.int.ru Expert

Ссылка для e-mail сообщения: <a href="mailto:support@yourdomain.com">Служба поддержки</a> : Служба поддержки

Обратите внимание, что для указания ссылки на e-mail слово mailto: является обязательным, иначе ссылка не сработает.

Изображения

Для вставки изображений на страницу существует html-тег <IMG>. В параметре SRC этого тега следует прописать абсолютный или относительный путь к файлу изображения. Дополнительные параметры WIDTH и HEIGHT позволяют задать соответственно ширину и высоту изображения. Указывать их вовсе не обязательно — если эти параметры отсутствуют, то изображение будет отображено в истинных размерах (1 : 1). Параметр ALT позволяет задать текст всплывающей подсказки для изображения. Этот текст пользователь также увидит в случае, если изображение не будет загружено (или если в браузере выключен показ изображений). Пример:

<img src="http://expert.delphi.int.ru/images/logo.png" alt="Логотип" /> :

Закрывать тег <img> не требуется, т.е. писать </img> не нужно, такого тега в HTML нет. Наиболее верный вариант - указать, что тег является самозакрывающимся - для этого его нужно закончить комбинацией />, т.к. в стандартах последних версий HTML принят такой способ (см. пример выше).

Цвет текста

Иногда полезно выделить участок текста другим цветом. Сделать это можно с помощью тега SPAN, указав в стиле параметр COLOR. Параметр COLOR задаётся в формате #RRGGBB, т.е. формируется тремя составляющими цвета. Эти значения задаются в шестнадцатеричном формате (символы 0-9 и буквы A-F). Тег обязательно должен быть закрыт! Пример:

<span style="color:#FF0000;">Внимание!</span> : Внимание!

Блоки программного кода

Для особого выделения участков программного кода в сообщениях можно использовать специальный тег <code> (оформление текста будет немного отличаться). Пример:

<code>A:=True;</code>: A:=True;

Используя этот тег, нежелательно оставлять его на отдельной строке, иначе может получиться большой разрыв между блоком и текстом. Т.е. не лучше писать так:
<code>
B:=False;
</code>

Рекомендуется так: <code>B:=False;</code>

Более подробная информация об этом теге находится в разделе Функции и приёмы работы.

Цитаты

Для указания того, что часть текста является цитатой (сообщение другого участника или текст из другого источника), можно использовать тег <quote>. Следует просто обрамить текст цитаты этим тегом и текст будет выделен соответствующим образом. Пример:

Альтернативный вариант выделения цитат - способ, применяемый в электронной почте - подстановка в начало строк символа ">". Однако такой способ системой не распознаётся и цитата останется обычным текстом, в то время как использование специального тега, описанного чуть выше, выделяет цитату в специальную рамку.

У тега <quote> есть дополнительные параметры, которые конкретизируют автора или источник цитаты:

• Параметр user позволяет указать участника сайта, которому принадлежит цитируемый текст. Формат: <quote user=12345>цитируемый текст<quote>. Здесь 12345 - уникальный идентификационный номер участника (ID). Этот номер можно "подсмотреть" на странице личной информации об участнике.
• Параметр name позволяет просто указать имя человека или название источника, которому принадлежит цитата. Формат: <quote name=Андрей>цитируемый текст</quote>.

При наличии одного из этих параметров в блок с цитатой добавляется соответствующая информация. В случае, если указаны оба параметра, будет обработан параметр user - он считается более приоритетным, так как помимо имени человека содержит ещё и ссылку на его профиль.

Дополнения

Регистр написания тегов не имеет значения, т. е. и <strong> и </STRONG> будет воспринято одинаково. Естественно, теги можно комбинировать, например текст может быть одновременно написан и курсивным шрифтом и полужирным (см. пример выше). Не забывайте закрывать теги! Незакрытые теги в большинстве случаев применяются ко всему тексту, следующему далее, поэтому страница может сильно исказиться.

Поскольку символы "<" и ">" используются для обозначения самих тегов, то их вставка в текст не приводит к реальному отображению самих символов в тексте (за исключением случая, когда вставлен символ ">", но никакой тег не был открыт). У этих символов есть специальное обозначение в html: "<" - это "&lt;", а ">" - это "&gt;". Таким образом, чтобы написать "2 > 1", нужно написать "2 &gt; 1". То же самое касается и знака "&" - он вставляется с помощью "&amp;". Также рекомендуется заменять и кавычки (хотя в большинстве случаев они хорошо распознаются и без этого). Эквивалент двойных кавычек - "&quot;"