Учебник по программированию.

§4. Тэги для форматирования текста.

h1, h2, h3, h4, h5, h6.

Все эти тэги создают заголовки различного размера шрифта. h1 – самый большой заголовок, h6 – самый маленький. У них у всех есть единственный атрибут align, который отвечает за выравнивание текста. Может принимать следующие значения:

• right – выравнивание по правому краю;
• center – выравнивание по центру;
• left – выравнивание по левому краю.

Пример:

p.

Тэг p создаёт абзац. Абзац, созданный этим тэгом, отделяется от других элементов межстрочным пространством. Так же как и у заголовков у него есть атрибут align, который может принимать такие же значения и плюс ещё одно justify – выравнивание по ширине.

Пример:

Примечание: использование закрывающего тэга необязательно. Новый параграф начнётся при появлении нового тэга p. Для эксперимента удалите все закрывающие тэги, кроме последнего из предыдущего примера, результат при этом не измениться. Если удалите и последний закрывающий тэг, то последний параграф соединиться с «Текстом после параграфов».

br.

Тэг br переводит текст на новую строчку. Закрывающий тэг не нужен. В отличии от тэга p расстояние между старой и новой строками не увеличивается.

Пример:

Результат:

nobr.

Тэг nobr запрещает переносить строки, если они не входят по ширине окна. При этом в окне браузера появляется полоса прокрутки по ширине, позволяющая просмотреть всю строку. Действие тэгов br и p не отменяет.

Пояснение: Весь текст в html документе воспринимается браузером как одна строка. Обычно если она не входит по ширине в окно браузера, то она автоматически разрывается. При изменении ширины окна браузера место разрыва строки будет изменено автоматически. Таким образом, при отсутствии тэгов p и br весь текст будет показан как один абзац.

Теги br и p разделяют текст на строки, и при их использовании браузер будет воспринимать весь текст уже как несколько строк.

Иногда возникает необходимость, что бы строка автоматически не разрывалась, в таком случае нужно использовать тэг nobr.

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

Далее пример:

hr.

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

Для настройки различных вариантов линии у тэга hr существуют следующие атрибуты:

• color – цвет линии;
• width – ширина линии;
• align (left; center; right) – выравнивание линии (в скобочках указаны значения, которые может принимать атрибут). В случае если атрибут width не настроен, то линия будет отображена на всю ширину окна, соответственно и атрибут align работать не будет;
• size – толщина линии;
• noshade – отменяет трёх-мерное отображение линии. Если браузер по умолчанию отображает линию трёх-мерной, а вам нужна – одно-мерная, то используйте этот атрибут. Значений у атрибута нет, просто включите его в тэг.

Примечание, значения атрибутов width и size задаются в пикселях, однако сочетание букв px использовать не обязательно. При их отсутствии размеры автоматически будут восприниматься браузером в пикселях.

Пример:

i, tt, b, big, small.

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

Пример:

Примечания:

Моноширинный шрифт – это шрифт, в котором ширина каждого символа одинаковая, в том числе пробела, точки, двоеточия и других символов, не являющихся буквами. Другими словами пространство, отводимое под каждый символ в моноширинном шрифте одинаково.

Размер шрифта в языке html измеряется в условных единицах от 1 до 7. По умолчанию установлен шрифт размера 3. Тэг big увеличивает шрифт на единицу относительно того, какой установлен в том месте, где тэг встретился. Тэг small соответственно уменьшает на единицу.

Далее пример, в котором с помощью тэга big шрифт увеличен до размера 7, после чего снова встречается тэг big, который уже не может увеличить шрифт более 7:

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

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

Далее в таблице приведён пример, который демонстрирует использование этих принципов при формировании кода предыдущего примера:

Pre, xmp, plaintext.

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

Для того, что бы отобразить текст в том виде, какой он есть на самом деле, существует тэг pre. Всё, что будет содержаться в этом тэге, сохранит при отображении все пробелы и переходы строк. Как правило, этот тэг применяется для отображения кода программ, поэтому его содержимое отображается моноширинным и на один пункт меньшим шрифтом.

Далее пример, в котором один и тот же текст приведён дважды. В первом случае без использования тэга pre, а во втором  с использованием:

Как было уже сказано, тэг pre используется, как правило, для отображения кода программ. Тем не менее он не годится для отображения кода html документов. Если внутри тэга pre встретится другой тэг, то он не будет отображён и изменит своё содержимое в соответствии со своим назначением. Для того, что бы все тэги отображались в виде текста, существует тэг xmp. Всё, что в нём содержится, будет отображено так же как и в коде html документа.

Так же существует тэг plaintext, его действие аналогично тэгу xmp. Однако в отличии от него он действует до конца html документа и закрыть его ни как нельзя.

Далее пример, демонстрирующий вышесказанное:

sub, sup.

Тэги sub и sup служат для создания нижнего и верхнего индексов соответственно. Атрибутов у них нет. Закрывающий тэг нужен обязательно. Далее пример, в котором с помощью этих тэгов создана математическая формула:

bdo, bdi.

Тэг bdo управляет направлением вывода текста. У него есть атрибут dir, который может принимать значения ltr (left to right) – слева направо; и rtl (right to left) – справа налево. Всё что содержится в этом тэге будет выведено в соответствии со значением этого атрибута.

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

Если необходимо, что бы текст был выведен справа налево, то, скорее всего, необходимо будет и выровнять его по правому краю. Это можно сделать, воспользовавшись атрибутом align тэга p, которому нужно присвоить значение right.

Далее пример использования этих тэгов:

font.

Тэг font устанавливает цвет, размер и шрифт текста, который в него заключён. Для этого у него есть соответствующие атрибуты:

• color – цвет. О том, как задаётся цвет, речь шла в 3 параграфе. В данном случае он задаётся точно так же;
• size – размер шрифта. Как было сказано при рассмотрении тэгов big и small, размер шрифта задаётся в условных единицах от 1 до 7;
• face – название шрифта. В случае, если вы не уверены, что какой-либо шрифт есть у пользователя, можно указать несколько через запятую. В таком случае браузер выберет из указанных существующий. Более приоритетным при выборе будет шрифт, находящийся левее в списке.

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

В таком виде ярлыка «Шрифты» нет. Вам необходимо переключить «Просмотр» на «Мелкие значки» или «Крупные значки» как показано на следующем рисунке:

После нажатия на ярлык «Шрифты» у вас появится окно со шрифтами, которые установлены на ваш компьютер. Не все шрифты устанавливаются вместе с операционной системой Windows. Некоторые могут быть установлены либо самим пользователем, либо во время установки какой-либо программы, которая будет этими шрифтами пользоваться. Например, программа для черчения может установить свой – чертёжный. Поэтому при выборе шрифтом будьте внимательны.

Следующий пример демонстрирует использование тэга font. В нём для того, что бы показать, что браузер выбирает существующий шрифт из списка, во второй строчке html документа атрибуту face присвоен список из трёх шрифтов. Название первого состоит из двух произвольных букв. Вероятней всего такого шрифта нет ни на одном компьютере. Поэтому браузер выберет второй или третий. Пример:

Center.

С тэгом center мы уже познакомились во втором параграфе. Всё, что содержится в этом тэге, будет выровнено по центру.

Задачи.

1. В параграфе приведён пример использования тэга big. Создать подобный пример использования тэга small.

2. Создать свои примеры использования тэгов basefont и center.

3. Изучить шрифты, установленные на вашем компьютере и создать html документ, в котором будут представлены некоторые из них.

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