|
||||||||||||||||||||||||||||||||
![]()
![]() |
§4. Тэги для форматирования текста.h1, h2, h3, h4, h5, h6. Все эти тэги создают заголовки различного размера шрифта. h1 – самый большой заголовок, h6 – самый маленький. У них у всех есть единственный атрибут align, который отвечает за выравнивание текста. Может принимать следующие значения:
Пример: Заголовок h1 атрибут align не установлен.Заголовок h2 атрибут align = "right".Заголовок h3 атрибут align = "left".Заголовок h3 атрибут align = "center".
|
Тэг | Описание |
i | Делает текст наклонным. |
tt | Текст отображается моноширинным шрифтом. |
b | Текст отображается жирным шрифтом. |
big | Делает текст более крупным шрифтом, чем обычный, увеличивая его на единицу. Допускается вложение тэга. |
small | Делает текст более мелким шрифтом, чем обычный. |
Пример:
Жирный шрифт.
Шрифт чуть больше.
Шрифт чуть меньше.
Примечания:
Моноширинный шрифт – это шрифт, в котором ширина каждого символа одинаковая, в том числе пробела, точки, двоеточия и других символов, не являющихся буквами. Другими словами пространство, отводимое под каждый символ в моноширинном шрифте одинаково.
Размер шрифта в языке html измеряется в условных единицах от 1 до 7. По умолчанию установлен шрифт размера 3. Тэг big увеличивает шрифт на единицу относительно того, какой установлен в том месте, где тэг встретился. Тэг small соответственно уменьшает на единицу.
Далее пример, в котором с помощью тэга big шрифт увеличен до размера 7, после чего снова встречается тэг big, который уже не может увеличить шрифт более 7:
Шрифт чуть больше. Размер - 4.
Шрифт чуть больше. Размер - 5.
Шрифт чуть больше. Размер - 6.
Шрифт чуть больше. Размер - 7.
Шрифт снова размера 7.
Ещё одно примечание: если тэг находится внутри другого, то он называется вложенным. Предыдущий пример ярко демонстрирует использование таких тэгов. Здесь стоит заострить ваше внимание, на двух принципах оформления кода, которые помогут избежать ошибок и сделают код более «читабельным» если в нём встречаются вложенные тэги:
Далее в таблице приведён пример, который демонстрирует использование этих принципов при формировании кода предыдущего примера:
Шаг | Код |
1 | Шрифт чуть больше. Размер - 4.
|
2 | Шрифт чуть больше. Размер - 4. Шрифт чуть больше. Размер - 5.
|
3 | Шрифт чуть больше. Размер - 4. Шрифт чуть больше. Размер - 5. Шрифт чуть больше. Размер - 6.
|
4 | Шрифт чуть больше. Размер - 4. Шрифт чуть больше. Размер - 5. Шрифт чуть больше. Размер - 6. Шрифт чуть больше. Размер - 7.
|
5 | Шрифт чуть больше. Размер - 4. Шрифт чуть больше. Размер - 5. Шрифт чуть больше. Размер - 6. Шрифт чуть больше. Размер - 7. Шрифт снова размера 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 устанавливает цвет, размер и шрифт текста, который в него заключён. Для этого у него есть соответствующие атрибуты:
Примечание: о том, какие шрифты установлены у вас, можно узнать в «Панели управления», выбрав ярлык «Шрифты». Если у вас стоит операционная система Windows7, то «Панель управления» может выглядеть следующим образом:
В таком виде ярлыка «Шрифты» нет. Вам необходимо переключить «Просмотр» на «Мелкие значки» или «Крупные значки» как показано на следующем рисунке:
После нажатия на ярлык «Шрифты» у вас появится окно со шрифтами, которые установлены на ваш компьютер. Не все шрифты устанавливаются вместе с операционной системой Windows. Некоторые могут быть установлены либо самим пользователем, либо во время установки какой-либо программы, которая будет этими шрифтами пользоваться. Например, программа для черчения может установить свой – чертёжный. Поэтому при выборе шрифтом будьте внимательны.
Следующий пример демонстрирует использование тэга font. В нём для того, что бы показать, что браузер выбирает существующий шрифт из списка, во второй строчке html документа атрибуту face присвоен список из трёх шрифтов. Название первого состоит из двух произвольных букв. Вероятней всего такого шрифта нет ни на одном компьютере. Поэтому браузер выберет второй или третий. Пример:
Шрифт "sdf", либо "courier new", либо "times new roman"
Center.
С тэгом center мы уже познакомились во втором параграфе. Всё, что содержится в этом тэге, будет выровнено по центру.
Задачи.
1. В параграфе приведён пример использования тэга big. Создать подобный пример использования тэга small.
2. Создать свои примеры использования тэгов basefont и center.
3. Изучить шрифты, установленные на вашем компьютере и создать html документ, в котором будут представлены некоторые из них.
4. Используя изученные тэги отформатировать ваш текст, который вы должны были подготовить, выполняя третье задание из первого параграфа.
Предыдущий параграф | Назад в содержание | Следующий параграф |