Редактирование текста

Немного слов о браузере

Поскольку формально XHTML - язык программирования, то такие вещи, как перенос строки, дополнительные пробелы в нем считаются за удобство для программиста и в конечном результате не видны. Если сейчас открыть документ, созданный Вами на 1 уроке, и написав на второй строке текст, то открыв документ в браузере, текст не будет смещен на вторую строку. Вывод: такие вещи, как перенос строки, дополнительные (т.н. неразрывные) пробелы нужно программировать.

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

Разделяем текст

В письменной речи текст должен разделяться на параграфы для лучшей своей усвояемости читателем. Каждый параграф всегда содержит микротему текста. Создать параграфы в XHTML помогает тег 

 и  содержат внутри себя текст, изображения. Тег отображает содержимое, поэтому должен ставиться между тегами <body> и </body>. Тег ставит на странице до и после себя пустую строку, разделяя текст для удобочитаемости.

Вы можете выравнивать абзац по левому, правому, обоим краям и по центру. Для этого используется атрибут align, который можно использовать со всеми тегами разметки.

Атрибут может принимать значения: left(по левому краю), right(по правому краю), center(по центру) и justify(по обоим краям).

Пример:

текст выровнен по левому краю

Для выравнивания текста по центру можно также использовать теги <center> и </center>.

Чтобы просто перенести текст на следующую строку, используйте тег . Внимание! Тег - первый тег, изученный нами, который не имеет закрывающего аналога, и он в конце должен иметь пробел и прямой слэш( /). (К тегу <!doctype> это не относится).

  - тег переноса строки.

Частично проблему с редактированием текста решает тег <pre>(иногда, например при написании цитат, где моноширинный текст уместен).

<pre> и </pre> содержат внутри себя текст, который на экране отображается точно также, как в текстовом редакторе. Однако этот тег почти не используется, в основном потому, что сейчас есть много различных графических расширений на мониторах, и "предварительно отформатированный текст будет плохо смотреться на разных экранах. Кроме того, тег отображает весь текст внутри себя моноширинным шрифтом.

На следующих уроках мы изучим "таблицы стилей", которые могут помочь исправить шрифт тега <pre>, однако он все равно считается устаревшим. Как правило его используют в цитатах, иногда в эпиграфах, оставляя для выделения моноширинный шрифт.

Заголовки

Заголовки в XHTML создаются тегами <h1>-<h7> и разделяют документ как и теги . Все заголовки имеют закрывающийся тег. Текст заголовка вставляется между открывающим и закрывающим тегом.

Всего есть 7 уровней заголовков. Чем больше заголовок, тем меньше цифра, стоящая после буквы "h".

Заголовок 1 уровня

Заголовок 2 уровня

Заголовок 3 уровня

Заголовок 4 уровня

Заголовок 5 уровня

Заголовок 6 уровня

Заголовок 7 уровня

(<h1> и </h1>)-(<h7> и </h7>) содержат внутри себя внутритекстовые заголовки. Эти теги являются тегами разметки и их не нужно отдельно помещать в тег .

Простейшее оформление

Чтобы раскрасить, выделить текст, в современных XHTML сайтах используют выше упомянутые таблицы стилей. Однако это большая тема, и она будет рассмотренна позднее. Сейчас мы изучим простейшие теги, позволяющие выделять текст. Кстати, эти теги тоже претерпели изменения в связи с новыми форматами. Мы изучим только новые теги, т.к. они поддерживаются всеми браузерами, а старые не будут поддерживаться новыми браузерами.

 и  - выделяет текст жирным шрифтом.

 и  - выделяет текст курсивом.

 и  - подчеркивает текст. Этот тег не изменился на новый..

<s> и </s> - перечеркивает текст.

	<code> и </code> - выделяет текст моноширинным шрифтом.
	<sub> и </sub> - пишет текст подстрочным шрифтом.
	<sup> и </sup> - пишет текст надстрочным шрифтом.
	<acronym> и </acronym> - очень интересный и не часто используемый тег. Этот тег применяется с атрибутом title, значение которого - произвольный текст, набранный вами. Если выделить участок текста этим тегом, а в атрибут title вписать другой текст, то он будет появляться при наведении мышью на выделенный текст в браузере. Пример: <acronym title="это сообщение">это текст</acronym>. В браузере(наведите мышь над текстом ниже): этот текст

Теги могут быть вставлены один в один. Однако они не должны перекрывать друг друга. Нельзя, например, писать так:
<code>текст, который </code>здесь.
Если нужно написать что-то подобное, один из тегов нужно продублировать:
<code>текст, который </code>здесь

Вставка дополнительных символов

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

Символы вставляются при помощи такого кода: &#код-символа;. Точка с запятой в конце обязательна. Некоторые символы имеют текстовый аналог, например "неразрывный пробел", вставляемый  , может быть вставлен также  . Вот некоторые специальные символы. Более полный список вы найдете на странице Специальные символы.

Некоторые специальные символы
Описание символа	Обозначение	10-ный код	16-ный код	Вид
неразрывный пробел
вертикальная черта	¦	¦	¦	¦
параграф	§	§	§	§
знак авторского права	©	©	©	©
надчеркивание	¯	¯	¯	¯

Отделение тем линиями

XHTML поддерживает вставку линий в документ. Линии вставляются тегом <hr />

<hr /> - создает линию.

Тег <hr /> может иметь такие атрибуты:
width="X px(%)" - ширина линии - Х пикселей(%).
size="X px" - делает толщину линии равной Х пикселей.
align="left | right | center" - выравнивает линию.
color="#rrggbb" - цвет линии в 16-ричном формате.

Обычная линия <hr />:

Линия с дополнительными атрибутами <hr width="80%" size="3" align="center" color="#00ffff" />:

В качестве тренировки создайте страницу с каким-либо справочным материалом, который Вы можете найти в Интернете. Специальными символами злоупотреблять не стоит, особенно если они не нужны. Сохраните свою страницу. Впоследствии мы будем добавлять к ней материалы.

А когда вы закончите, мы создадим списки в наших документах. Вперед!

uroki.webservis.ru