Заправка картриджей. Купить картридж. Ремонт оргтехники. Ремонт компьютеров и ноутбуков. Запчасти для принтера. Радиодетали
Интернет магазин Агос 24 в новосибирске, расходные материалы к ортгтехнике
г Новосибирск

Режим работы:
Пн-Чт: 10-19, Пт до 17:00;
Обед с 13-14
тел.+7 (383) 381-97-86
тел.+7 (951) 376-20-91
E-mail: info@agos24.ru
Самовывоз пр.К.Маркса 24 оф.408(М Студенческая)
Где еще получить
Отправка в регионы СДЭК, Почта,ТК
Печать

HTML: Популярный самоучитель - Глава 3

Posted in Создание сайтов

Глава 3

Текст

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

Чтобы чтение информации, содержащейся в HTML‑документе, стало приятным занятием, применяется форматирование и разбиение документа на логически цельные части (структурирование) с визуальным отделением этих частей друг от друга. Далее будут рассмотрены основные возможности HTML, позволяющие сделать содержимое документа легко читаемым и воспринимаемым. Однако перед описанием форматирования и структурирования текста нужно рассмотреть особенности, которые необходимо учитывать при добавлении непечатных и зарезервированных для языка HTML символов в текст документа.

3.1. Особенности ввода текста

При вводе текста в документ часто возникает вопрос: как заставить браузер отобразить зарезервированные символы языка HTML (например, > или &) или символы, которые невозможно ввести с клавиатуры. Для ввода в документ таких символов в HTML предусмотрен механизм ссылок на символы. Таким образом, когда необходимо ввести в документ, например, символ &, то в текст на его место подставляется специальная последовательность – ссылка на данный символ.

Ссылки на символы могут быть представлены любым из указанных ниже способов:

• &#D; – позволяет задать символ, код которого имеет значение D (в десятичной системе счисления);

• &#xH; – позволяет задать символ, код которого имеет значение H (в шестнадцатеричной системе счисления);

• &имя_символа; – позволяет использовать именованную ссылку на символ.

Как можно увидеть, ссылка на символ в тексте HTML‑документа начинается символом & и заканчивается точкой с запятой (;). Особо стоит рассмотреть использование именованных ссылок на символы. Дело в том, что использование первых двух вариантов предполагает, что автору известны численные коды символов, которые он собирается добавить в документ. Однако согласитесь, что постоянно искать в таблицах численные коды нужных символов по меньшей мере неудобно. По этой причине в HTML предусмотрены имена для наиболее часто используемых символов. Эти имена и записываются вместо кода в тексте ссылок на символы. Имена некоторых часто используемых символов приведены в табл. 3.1. Полный список именованных ссылок на символы приведен в приложении 1.

Таблица 3.1. Имена символов
HTML: Популярный самоучитель - i_008.png

В качестве примера использования ссылок на символы в HTML‑документе можно рассмотреть следующий HTML‑код (пример 3.1).

Пример 3.1. Использование ссылок на символы

<TITLE> Именованные ссылки на символы </

TITLE>

<BODY color = " yellow "

bgcolor = " yellow " >

Текст HTML-документа

</BODY>

При обработке данного кода браузером Internet Explorer получится документ, который показан на рис. 3.1.

HTML: Популярный самоучитель - i_009.png

Рис. 3.1. Использование ссылок на символы

Конечно, возможности использования ссылок на символы приведенным примером не ограничены. Ссылки на символы очень часто применяются для записи математических формул. Кроме того, их можно использовать для записи текста на иностранном языке, но с использованием символов другого языка (например, для ввода символа в при использовании символов только английского языка).

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

Для изменения вида текста, отображаемого браузером, применяется форматирование с использованием специальных HTML‑тегов. Форматирование текста HTML‑документа сходно с форматированием в любом текстовом редакторе (например, Microsoft Word). Оно позволяет выделить цветом, начертанием, изменением шрифта некоторый текст, подчеркнуть его значимость или просто украсить.

Задание начертания текста

Задание начертания текста является, возможно, самым простым средством форматирования содержимого документа, которое доступно в HTML. Для изменения начертания текста в HTML‑код добавляются элементы, приведенные в табл. 3.2.

Таблица 3.2. Элементы задания начертания текста
HTML: Популярный самоучитель - i_010.png

Для наглядности можно рассмотреть пример HTML‑документа, в котором используются различные элементы задания начертания текста (пример 3.2).

Пример 3.2. Задание начертания текста

Полужирный текст

Курсив

Подчеркнутый текст

Зачеркнутый текст

Текст увеличенного размера

Текст уменьшенного размера

Верхний индексТекстНижний индекс

Текст, записанный моноширинным шрифтом

В приведенном коде задействованы все элементы задания начертания текста из табл. 3.2, кроме BLINK.

При обработке HTML‑кода браузером получится документ, показанный на рис. 3.2.

HTML: Популярный самоучитель - i_011.png

Рис. 3.2. Задание начертания текста

Рассматриваемые HTML‑элементы могут быть вложены друг в друга. При этом на начертание текста влияют все элементы, внутри которых находится текст. Например, чтобы одновременно зачеркнуть и подчеркнуть курсивный полужирный текст, можно использовать следующий код:

Текст непонятного начертания

Задание шрифта текста

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

Параметры шрифта для элемента FONT устанавливаются заданием значений следующих его атрибутов:

• face – задает название шрифта, например Arial или System;

• size – задает размер шрифта (значение от 1 до 7, по умолчанию используется значение 3);

• color – задает цвет шрифта.

Третий из указанных атрибутов уже был рассмотрен при изучении элемента BODY. Возможные значения для атрибута face можно посмотреть в списке шрифтов в любом текстовом редакторе. Однако следует помнить, что если на компьютере, где будет просматриваться ваш HTML‑документ, не установлен нужный шрифт, то браузер будет использовать шрифт по умолчанию. Таким образом, если очень важно сохранить оригинальное оформление документа при просмотре его на других компьютерах, не следует злоупотреблять экзотическими и редкими шрифтами.

Для атрибута size могут использоваться только семь значений. Именно столько различных размеров шрифта (или менее) поддерживаются браузерами. При этом значение, которое присваивается параметру size, – это не высота шрифта в каких‑либо единицах, а просто порядковый номер, который воспринимается браузером и преобразуется в предусмотренный разработчиками размер шрифта.

Размер шрифта для атрибута size можно также задавать в виде +число или –число. Здесь число задает, на сколько единиц больше или меньше будет размер шрифта относительно текущего размера шрифта. Например, если используется размер шрифта по умолчанию (3), то +3 означает размер 6, а –2 означает размер 1.

Далее рассмотрен пример задания различных шрифтов и различных размеров этих шрифтов (обратите внимание на вложенные элементы FONT) (пример 3.3).

Пример 3.3. Задание шрифта текста

Самый маленький текст шрифта Arial

Обычный текст шрифта Arial

Самый большой текст шрифта Arial

Самый маленький текст шрифта Times New Roman

Обычный текст шрифта Times New Roman

Самый большой текст шрифта Times New Roman

В примере используются стандартные шрифты Times New Roman и Arial. На рис. 3.3 показан результат обработки браузером HTML‑кода из примера 3.3.

HTML: Популярный самоучитель - i_012.png

Рис. 3.3. Задание шрифта текста

Задание выравнивания текста

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

и
. Текст, записанный между этими тегами, отображается в середине окна браузера.

Сохранение авторского форматирования

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

Что же делать, если нужно вставить в HTML‑документ текст, в котором важно сохранить хотя бы разрывы строк в определенных автором местах, например текст какой‑то программы? Рассмотрим пример 3.4.

Пример 3.4. Страница с текстом программы (оригинал)

function fact(int num):int

if (num>0)

return fact(num–1)*num;

else

return 1;

end if

end function

При обработке приведенного кода браузер покажет весь текст, расположенный в элементе BODY, в одну строку так, как показано на рис. 3.4.

HTML: Популярный самоучитель - i_013.png

Рис. 3.4. Страница с текстом программы (оригинал)

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

Для принудительного перехода на следующую строку в нужных местах текста можно использовать элемент BR, который задается одиночным тегом
. Именно этот тег и использовался для повышения наглядности предыдущих примеров. Тег
можно вставлять в любом месте текста, в данном случае (пример 3.5) этот тег логично вставить в конце каждой строки программы.

Пример 3.5. Использование разрывов строк

function fact(int num):int

if (num>0)

return fact(num–1)*num;

else

return 1;

end if

end function

Результат обработки этого варианта HTML‑кода приведен на рис. 3.5.

HTML: Популярный самоучитель - i_014.png

Рис. 3.5. Использование разрывов строк

а в указанном месте.

Ниже приведен небольшой пример использования простого и мягкого переноса в тексте HTML‑документа (пример 3.7).

Пример 3.7. Использование переносов

Это длинное-длинное слово отображается браузером с дефисом и переносится в месте дефиса.

Слова этого текста могут раз­рывать­ся в указан­ных местах.

 

А этот текст не разрывает­ся несмотря на нали­чие в нем символов пере­носа.

Обратите внимание: внутри элементов NOBR (как в примере 3.7) и PRE переносы браузером игнорируются. Однако внутри элемента NOBR можно указать место возможного переноса текста. Делается это при помощи одиночного тега(элемента WBR соответственно).

Например:

 

Этот текст будет разорван браузером в указанном месте при

необходимости (когда текст не поместится в окне).

Обтекание текстом нетекстовых элементов

Далее рассмотрена еще одна возможность элемента BR, которая используется при вставке в текст документа различных изображений, таблиц и прочих нетекстовых элементов (сами эти элементы будут рассмотрены позже). Таким объектам можно задать выравнивание по правому или левому краю окна браузера (объекты с таким выравниванием называются плавающими).

Текст может обтекать плавающие объекты справа или слева. При необходимости принудительного разрыва строки с использованием элемента BR можно указать, где должна появиться следующая строка, задавая значения left, right, all или none атрибуту clear этого HTML‑элемента. Расшифровка этих значений следующая:

• none – используется по умолчанию, означает, что новая строка начнется нормально, то есть с минимальным промежутком по вертикали и выравниванием по нужному краю;

• left – следующая строка начнется под плавающим объектом, выровненным по левому краю (если объект выровнен по правому краю, то действует аналогично none);

• right – аналогично значению left, только наоборот;

• all – следующая строка начнется под плавающим объектом независимо от края, по которому выровнен объект.

3.3. Структурирование текста

Все, что рассматривалось ранее, – это простое физическое форматирование текста. Теперь пришло время заняться разбиением текста HTML‑документа на логически цельные, но различные между собой части, – сформировать структуру документа. В этом разделе будут рассмотрены основные возможности структурирования документа с использованием соответствующих HTML‑элементов, а также то, как роль текста в структуре документа влияет на его отображение.

Xарактеристики, комплект поставки и внешний вид данного товара могут отличаться от указанных или могут быть изменены производителем без отражения в каталоге. Приведенные на нашем сайте цены, характеристики, количество товаров, а так же информация об их наличии на складе носят ознакомительный характер и не являются публичной офертой, определенной пунктом 2 статьи 437 ГК РФ. Для получения информации о характеристиках товаров, их наличии и стоимости необходимо связаться с менеджерами нашей компании. Оплата производится только после подтверждения резерва.