Оформление текстов в WordPress

Выпуск 6. Основы HTML. Оформление текстов 

источник http://maxsite.org/page/ras06

Воскресенье, 9 июля 2006 г.
Рубрика: WordPress -> Архив рассылки
Просмотров: 7598

:врез:Продолжим изучать базовые понятия HTML. Приступим к практической части по оформлению текстов с помощью HTML.
:комментарий:
С предыдущими выпусками рассылки можно познакомиться в архиве.
Если у вас возникли проблемы при работе с WordPress, то свой вопрос вы можете задать на форуме: forum.maxsite.org
:/комментарий:

Стандарты HTML

Чтобы завершить нашу теоретическую часть знакомства с HTML, необходимо отметить, что существуют различные стандарты HTML. То есть когда вы будете создавать или редактировать HTML-документ вы должны знать в какой именно стандарт он использует.
Собственно на сегодняшний день мы можем говорить о трех наиболее используемых "стандартах":

• без стандарта (лишь бы как),
• HTML 4.01,
• XHTML.

Первым я специально отметил "без стандарта", поскольку такие документы изобилуют в Интернете. Даже учебники по HTML содержат массу вещей, которые не позволяют отнести документ к какому-либо стандарту.
Итак, первый признак документа "без стандарта" - отсутствие в заглавии файла типа документа, DOCTYPE. Отсутствие этого элемента заставляет браузер сразу же перейти в нестрогий режим, а это означает, что он будет "по своему разумению" стоить отображение страницы. Понятно, что браузеры разные и отображать различные HTML-элементы они могут по-разному.
Второй признак - несоблюдение синтаксиса. Например отсутствие кавычек в значениях. Браузеры, конечно же могут попытаться самостоятельно исправить такие огрехи, но в некоторых случаях в результате вы получите совсем не то, что задумывали.

HTML 4.01 и XHTML

Поскольку мы умные люди, то сразу же будем писать код правильный. Для этого мы будем придерживаться стандарта HTML 4.01 Transitional. Этот стандарт требует строгого соблюдения синтаксиса и использование тэгов. В отличие от XHTML, который требует еще более строгого соблюдения XML, в HTML 4.01 Transitional допускается использование "нерекомендованных" (отмененных) тэгов. Я думаю, что в WordPress'е нет особого смысла следовать XHTML, поскольку при оформлении текстов иногда проще и эффективней использовать, скажем отмененный тэг , чем строить сложные конструкции со span и описывать его стиль (style, class).
Для тех, кто хочет немного больше разобраться в вопросах стандартов, еще раз отсылаю к своей статье "Что нам стоит сайт построить?".

Спецификация HTML 4.01

Существуют т.н. спецификации, в которых описаны все возможные тэги и их параметры, условия использования. Русскую версию спецификации HTML 4.01 вы можете найти в Интернете, воспользовавшись любым поисковиком. Я например нашел вот такую: docs.luksian.com

Наши правила написания HTML-кода

Мы будем придерживаться следующих несложных правил:

• Все тэги должны быть набраны в нижнем регистре - это облегчит в дальнейшем переход к XHTML.
• Все значения параметров тэгов должны быть экранированы кавычками (обычными или одинарными).
• Все тэги должны быть иметь закрывающий элемент. Если тэг одиночный, то он должен быть вида <тэг >.
• Необходимо учитывать вложенность тэгов: первый закрывается последним.
• Необходимо учитывать вложенность тэгов по признаку "блочный/строчный".
(Блочный отличается тем, что после указания закрывающего элемента, дальнейший вывод на странице осуществляется с новой строки. Строчный элемент перевода строки не делает.)

Переходим к практике

Всё! C теорией закругляемся и переходим к практике. Я не буду приводить список всех тэгов, а только лишь покажу примеры их использования в оформлении ваших страниц.

WordPress позволяет автоматически исправлять некорректный HTML-код. В принципе это хорошая возможность, но иногда WordPress оказывается излишне строг, поскольку следует (пытается) стандарту XHTML. Поэтому иногда, после ввода сложного HTML-кода, WordPress "исправляет" его до неузнаваемости. Так, что я рекомендую отключить такую возможность: Опции -> Создание -> Исправлять некорректный XHTML автоматически.

Для того, чтобы воспользоваться в полной мере HTML-кодингом нужно отключить визуальный редактор. Для этого в настройках своего профиля нужно снять отметку "Использовать RTF-редактор"

Использование визуального редактора конечно облегчает оформление текстов, поскольку вы сразу же видите конечный результат. Но с другой стороны, если вы копируете текст из Word'a, то есть все шансы, что созданный таким образом HTML-код окажется сильно "замусоренным".

Выделения в тексте

Ваш текст будет хорошо читаться, если вы будете использовать выделения ключевых моментов, терминов и т.д. Для этого существуют тэги:

• и - полужирный
• и - курсив
• - подчеркнутый
• - зачеркнутый

В редакторе WordPress'а предусмотрена вставка тэгов полужирный и курсив с помощью панели быстрой вставки.

Строго говоря, и не совсем одно и тоже. Тэг всегда выделяет текст полужирным, а можно настроить по своему желанию, например это будет красный цвет. Тэг относится к нежелательным и не рекомендуется к применению. Поэтому, по возможности мы будем использовать . Аналогичная ситуация с и .

Выделения цветом с помощью

Иногда нужно в тексте сделать выделение цветом. Для этого можно воспользоваться тэгами и .
Тэг нужно использовать с параметром color, например:

текст <font color="red"><font color="red">текстfont>font> текст

В качестве значения "color" можно использовать предопределенные константы, например: "red", "blue", "gray", "silver", "yellow", "maroon" и т.д.
Также разрешается использование значения цвета в 16-ричном формате: #RRGGBB, где RR - значение красной составляющей, GG - зеленой, BB - голубой (всё как на экране монитора). Чтобы не загружать рассылку столь массивным списком значений, загрузите себе уже готовую таблицу: color-html.html

Не забывайте ставить # перед значением цвета!

Выделения цветом с помощью

Тэг более универсальный, однако для его использования нужно указывать стилевое оформление (параметр style).
Вот тот же пример, только со :

текст <span style="color: red;"><span style="color: red;">текстspan>span> текст

Параметр style позволяет указать не только цвет шрифта, но и фон, рамки, отступы и т.п. Для того, чтобы указать сразу несколько значений style нужно перечислить их через точку с запятой (. Вот еще пример:

текст <span style="color: red; background: yellow;"><span style="background: yellow; color: red;">текстspan>span> текст

Обратите внимание на формат записи стиля!

Выделения другим шрифтом

Иногда можно использовать выделение другим шрифтом в тексте. Делается это с помощью тэга и style.

текст <span style="font-family: Arial;"><span style="font-family: Arial;">текстspan>span> текст

Правда, при использовании шрифтового оформления вы дожны быть уверены, что этот шрифт установлен на компьютере пользователя. Если вдруг такового не окажется, то текст будет отображен основным шрифтом сайта. Поэтому для того, чтобы предотвратить такую ситуацию можно указывать сразу несклько шрифтов, например:

текст <span style="font-family: Micra, Pragmatica, Helvetica,
Arial, sans-serif;"><span style="font-family: Micra,Pragmatica,Helvetica,Arial,sans-serif;">текстspan>span> текст

То есть вначале браузер будет пытаться отобразить текст шрифтом "Micra", если его нет - "Pragmatica", если его нет, то "Helvetica", если и его нет, то "Arial", и если и этого нет, то любым шрифтом группы "sans-serif" (шрифты без засечек).
Как правило вебмастера не злоупотребляют такой возможностью, и стараются использовать "стандартные" шрифты:

• Arial
• Tahoma
• Verdana
• Impact
• Comic Sans MS
• Times New Roman
• Georgia

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

Для того, чтобы указать размер нужно знать в каких единицах это сделать. Самый простой вариант - это указать его в относительных единицах em или %.
Например, вам нужно сделать его больше основного в 2 раза:

текст <span style="font-size: 2.0em;"><span style="font-size: 2em;">текстspan>span> текст
или
текст <span style="font-size: 200%;"><span style="font-size: 200%;">текстspan>span> текст

Можно использовать размеры в пунктах (pt) - в этом случае текст будет всегда иметь фиксированный размер.

текст <span style="font-size: 8pt;"><span style="font-size: 8pt;">текстspan>span> текст
или
текст <span style="font-size: 24pt;"><span style="font-size: 24pt;">текстspan>span> текст

Думаю понятно .