Выпуск №5 

Здравствуйте! С Вами Павел Любимов и это пятый выпуск рассылки "Разработка и оптимизация сайтов". В этом выпуске речь пойдет о группе тегов, отвечающих за оформление текста.

В качестве предисловия: я выпуски пишу почему-то исключительно ночью и иногда начинаю клевать носом. Поэтому регулярно что-то не замечаю и получаются недоделки. Ко всему прочему, я еще не до конца освоился с сервисом Subscribe. Прошу меня извинить за допущенные неточности в оформлении выпусков. Постараюсь быть впредь более внимательным. По поводу прошлого выпуска: в примере html-файла не закрыт тег заголовка и неверно указан стиль документа в файле css. Правильно будет так:

<H1>Моя первая страница.</H1>

левый тег открывает, правый закрывает. В закрывающем теге всегда присутствует обратный слеш «/», который я и забыл указать. Кто заметил — возьмите с полки пирожок!

В css-файле свойство «color» стиля BODY следует заменить на «background-color».

BODY { color:

BODY { background-color:

На этом все, переходим к выпуску.

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

С тегом абзаца <P></P> и группой тегов заголовка <H1></H1> Вы уже познакомились. Также я уже упоминал про тег переноса строки <BR>. Перед тем, как мы перейдем непосредственно к теме выпуска, хочется обратить Ваше внимание на одну очень важную деталь. При работе с текстом очень важно помнить о кодировке. Я уже говорил об этом в прошлом выпуске рассылки. Тут могут возникнуть некоторые проблемы с отображением шрифтов. Сейчас объясню, что следует делать, чтобы проблем не возникало.

Для начала в настройках текстового редактора указываем кодировку создаваемого документа:

Затем следует указать кодировку html-страницы при помощи мета-тега (в технической части документа):

<meta http-equiv="Content-type" content="text/html; charset=UTF-8">

И третьим шагом будет установка кодировки в обозревателе:

Ну вот, теперь можно начинать практиковаться. Вернемся к списку тегов, отвечающих за текст:

1. <H1></H1> - <H6></H6> - заголовки;
2. <P></P> - абзац;
3. <BR> - перенос строки;
4. <EM></EM> - курсив в абзаце;
5. <I></I> - курсив;
6. <CITE></CITE> - цитата в абзаце;
7. <DFN></DFN> - термин в абзаце;
8. <VAR></VAR> - аргумент переменной в абзаце;
9. <STRONG></STRONG> - полужирный шрифт в абзаце;
10. <B></B> - полужирный шрифт;
11. <Q></Q> - кавычки;
12. <CODE></CODE> - код в абзаце;
13. <SAMP></SAMP> - программный вывод в абзаце;
14. <KBD></KBD> - введенный текст в абзаце;
15. <TT></TT> - моноширинный текст;
16. <ABBR></ABBR> - аббревиатура в абзаце;
17. <ACRONYM></ACRONYM> - акроним в абзаце;
18. <INS></INS> - изменения документа;
19. <DEL></DEL> - изменения документа;
20. <PRE></PRE> - Форматированный текст;
21. <SMALL></SMALL> - малый шрифт;
22. <BIG></BIG> - большой шрифт;
23. <SUB></SUB> - подиндекс;
24. <SUP></SUP> - надиндекс;
25. <A></A> - гиперссылка.

Список получился достаточно внушительный. Давайте по порядку разбираться, что к чему. Начнем с уже знакомого тега заголовка - <H1></H1> - <H6></H6>. Я уже говорил, что их всего шесть, однако на практике используются три. Потому что размер второй тройки заголовков меньше самого текста. Их можно в принципе увеличить при помощи CSS, но обычно это не применяют.

Далее идет еще один знакомый, тег абзаца <P></P>. Вообще в спецификации он зовется параграфом, но это что-то школьное из учебника по истории. Поэтому я позволил себе вольность называть его абзацем. Следует обратить внимание на тот факт, что этот тег не имеет собственных атрибутов. К нему можно применить только общие атрибуты или css-свойства. Это очень важно, так как в интернете много умников, которые без тени сомнения посоветуют, например, покрасить тег абзаца при помощи атрибута «color». Он работать-то может и будет, но только до тех пор, пока в какой-нибудь из следующих версий обозревателей его не запретят. Поэтому следует внимательно просматривать спецификацию перед тем, как применять атрибуты к тегам.

Покрасить абзац можно только при помощи css-свойства «color»:

css-таблица:

P.red {color:red;}

Это относится и ко многим другим тегам.

Третий тег списка - <BR>. Как я уже неоднократно упоминал, переносит строку. Имеет атрибут «clear», который позволяет управлять строками при переносе. О том, как именно — поговорим потом.

Четвертый тег списка - <EM></EM>. Определяет курсивное начертание шрифтов внутри абзацев, по спецификации является элементом абзаца. Пятый  - <I></I>. Определяет курсивное начертание текста вообще, к тегу абзаца не привязан.

Шестой тег - <CITE></CITE>. Этот тег обозначает цитаты в тексте. Является элементом абзаца. Визуально выделяет текст как курсив. Седьмой тег - <DFN></DFN>. Определяет термины в тексте, является элементом абзаца. Визуальное оформление — курсив. Еще один элемент, оформляющий текст как курсив - <VAR></VAR>. Определяет аргумент переменной в абзаце.

Девятый тег - <STRONG></STRONG>. Определяет полужирный текст в абзаце, являясь его структурным элементом. Десятый тег - <B></B>. Определяет полужирный текст вообще, к тегу абзаца не привязан.

Одиннадцатый тег - <Q></Q>. Эта команда заключает текст в кавычки.

Двенадцатый - <CODE></CODE>. Форматирует текст как фрагмент кода. Следующий тег <SAMP></SAMP> определяет текст как машинный вывод в абзаце, а  тег <KBD></KBD> определяет текст как «введенный пользователем». Все три тега оформляют текст моноширным шрифтом и являются структурными частями абзаца.

Пятнадцатый тег - <TT></TT>. Оформляет любой текст моноширным шрифтом там, где это необходимо. Привязки к абзацу не имеет.

Шестнадцатый и семнадцатый теги (<ABBR></ABBR>) (<ACRONYM></ACRONYM>) определяют текст как аббревиатуры и акронимы соответственно. Являются структурными элементами абзаца.

Далее идет пара тегов, определяющих  обновленные и устаревшие участки текста (например, статьи) -(<INS></INS> и <DEL></DEL>). Первый оформляет текст как подчеркнутый, акцентируя на нем внимание, а второй тег текст зачеркивает. У этой пары тегов есть пара атрибутов. Первый атрибут «cite» указывает на документ, ставший причиной изменений, а второй «datetime» сообщает дату внесения изменений.

Двадцатым в списке идет <PRE></PRE>. Этот тег форматирует текст как есть. То есть как Вы его внутри страницы написали, так и отображается. Нет необходимости в дополнительном форматировании, например, в употреблении тега переноса строки.

Следующие четыре тега оформляют текст как малый (<SMALL></SMALL>), большой (<BIG></BIG>), надиндекс (<SUP></SUP>) и подиндекс (<SUB></SUB>). Надиндекс — это четверка в выражении два в четвертой степени. Подиндекс  дает обратный результат.

И последним в списке идет тег - <A></A>. Текст оформляется как гиперссылка. Этот тег имеет аж восемь  атрибутов. Это и понятно, ссылки употребляются часто и много, поэтому и дополнительных возможностей настройки у этого тега, соответственно, больше. Но абсолютно всегда употребляется лишь один - «href». В этом атрибуте прописывается адрес, на который будет указывать ссылка.

<A href=”http://www.nevor.ru”>ссылка</A>

Вот список и закончился. Я даже утомился малость. Смотрите дополнение. Там намного нагляднее представлен материал сегодняшнего выпуска. Дополнение к выпуску выполнено в виде архива формата 7z. Rar - штука платная, а в Zip часто попадают вирусы. Программу для работы с архивами, включая формат .7z, можно скачать тут. Хотя современные архиваторы знакомы с этим форматом и если Вы используете тот же WinRAR, проблем возникнуть не должно.

Не забудьте проверить скачанные файлы антивирусом. На всякий пожарный, как говорится. И когда будете смотреть приложение - не забудьте установить кодировку ПА (обозревателя) UTF-8, чтобы не было всяких каракулей.   

В завершение выпуска ссылка на скачивание приложений: Приложение №1

                              До следующей встречи! 

 Что дальше? 

В следующей рассылке я буду разбирать css-свойства, связанные с текстом. Будем учиться применять их к тем тегам, о которых говорили сегодня, используя приложения из этой рассылки (файлы example1.html и style1.css). Тогда станет понятно — почему вроде бы одинаковые (одинаково форматирующие текст) теги на самом деле абсолютно разные.