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

Раздел Информатика
Класс 11 класс
Тип Конспекты
Автор
Дата
Формат docx
Изображения Нет
For-Teacher.ru - все для учителя
Поделитесь с коллегами:

Форматирование документа


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

  2. Форматирование отдельных элементов текста

  3. Форматирования блоков текста

Вопрос 1: "Форматирование текста - введение"


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

• Теги форматирования отдельных элементов текста

• Теги форматирования блоков текста

Вопрос 2: "Форматирование отдельных элементов текста"


Все описанные здесь теги форматирования текста требуют открывающего и закрывающего тега. Это означает что область действия того или иного тега будет продолжаться до закрывающего тега или до конца документа в случае если вы не закроете тег. Все теги пишутся по следующей схеме <ТЕГ1><ТЕГ2>Некоторый текстТЕГ2>ТЕГ1> Помните о том, что нужно закрывать сначала тег, открытый последним (см. правила написания тегов "Правило закрытия тегов"). Итак, рассмотрим теги форматирования отдельных элементов текста и их основные параметры:

некоторый текст

Тег жирного начертания текста. Все что заключено между открывающим и закрывающим тегом будет напечатано жирным шрифтом.

некоторый текст

Цитирование. Текст печатается некоторым выделенным шрифтом, установленным в броузере, для указания на то, что этот текст является цитатой. Например, Netscape Navigator выделяет цитаты наклонным шрифтом.

некоторый текст

Отображение текста шрифтом фиксированного размера, указанного по умолчанию в настройках броузера как шрифт фиксированного размера.

некоторый текст

Особое значение. Текст печатается некоторым выделенным шрифтом, установленным в броузере, для указания на то, что этот текст имеет особое значение, на этом тексте автор делает ударение. В разных броузерах выделение особого ударения осуществляется по разному.

некоторый текст

Наклонное начертание текста.

некоторый текст

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

некоторый текст

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

некоторый текст

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

некоторый текст

Особая сила текста. Отображение текста шрифтом определенным броузером для отображения особо выраженной силы текста или высказывания.

некоторыйтекст

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

некоторыйтекст

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

некоторый текст

Подчеркнутый текст. Пробелы между словами тоже подчеркиваются.

некоторый текст

Текст обозначающий переменную. Отображение текста шрифтом определенным броузером для отображения текста обозначающего переменную.

некоторый текст

Выравнивание текста по центру. До и после тега

вставляется перенос строки. Если текст находится внутри таблицы, то выравнивание осуществляется относительно ячейки таблицы. Подробнее о таблицах читайте в разделе "Таблицы"

Перенос строки. Все что делает этот тег, переносит строку. Этот тег имеет один полезный параметр CLEAR. В этом руководстве не обсуждаются все возможные варианты использования этого парамерта. Единственный важный для вас на данный момент вариант - это

Используйте тег
с этим параметром когда хотите чтобы текст перестал огибать картинку (при использовании параметраALIGN тега ) и продолжался после картинки. Смотрите пример HTML кода с комментарием на этой странице.

некоторый текст

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

SIZE

Числовое значение, обозначающее размер шрифта, которым будет напечатан текст. Значение может быть от 1 до бесконечности.

Пример:
Привет! Это моя домашняя страничка. (комментарии)


Результат:

Привет! Это моя домашняя страничка. (комментарии)

Кроме того, вы можете указать значение параметра SIZE со знаком плюс или минус. В этом случае текст будет отображаться размером большим или меньшим на указанную величину, чем размер используемого в данный момент шрифта. Например, если в данный момент используется размер шрифта 3, то укзаниеSIZE=+2 будет равнозначно SIZE=5, а SIZE=-1 равнозначно SIZE=2.

COLOR

Название или алфавитно цифровой код в шестнадцатиричной системе исчисления для цвета используемого шрифта. Разные броузеры поддерживают разные названия цветов. Здесь приводятся названия цветов, которые поддерживаются двумя наиболее распространенными броузерами Netscape Navigator и Internet Explorer:

Black-черный

Blue-синий

Gray-серый

Green-зеленый

Maroon-коричневый

Navy-морской

Purple-фиолетовый

Red-красный

Yellow-желтый

White-белый

Алфавитно цифровой код, обозначающий цвет, состоит из символа '#' и щести цифр от 1 до 9 или латинских букв от A до F. Код цвета определяется по системе RGB (RED - красный, GREEN - зеленый, BLUE - синий) исходя из трех составляющих цвета. Для определния цвета нужно указать значение каждой из составляющих красного, зеленого и синего цветов от 0 до 255 в шестнадцатиричном эквиваленте. Например, чисто красный цвет определяется как 255 (максимум) для красного и 0 (минимум) для зеленого и синего и будет записан как
. Определение цветов в шестнадцатиричной системе исчисления достаточно сложное занятие, поэтому вы можете воспользоваться нашей таблицей шестнадцатиричных кодов цветов.

FACE

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

Пример:
Привет!
Это моя домашняя страничка.

Результат:

Привет! Это моя домашняя страничка.

Для того, чтобы быть уверенным в результате действия параметра FACE тега лучше использовать только несколько стандартных шрифтов, которые имеются у большинства пользователей, так как они устанавливаются на компьютер при установке операционной системы:

Windows 3.x / 95 / 98 :

Arial
Arial Black
Arial Narrow
Courier
Courier New
Garamond
Helvetica
Times
Times New Roman

Если какое либо из названий, кроме Times и Times New Roman написано абсолютно тем же шрифтом, что и этот текст, то этого шрифта скорее всего нет на вашем компьютере. По умолчанию в Windows 3.x / 95 / 98 системах установлен шрифт Times New Roman.

некоторый текст

Тег, предназначенный для определения параметров шрифта, таких как размер, цвет и конкретный шрифт, используемые для написания текста по умолчанию. Во всей области действия этого тега текст будет напечатан с теми параметрами, которые вы укажите в этом теге. Можно вставлять несколько тегов в разных частях вашего HTML документа. Параметры тега - SIZE, COLOR и FACEабсолютно идентичны параметрам тега

Область действия:

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

Вопрос 3: "Форматирования блоков текста"

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

Игнорирование любых HTML тегов и печатание текста документа как обычного текстового файла. Все что стоит после этого тега, включая HTML теги будет напечатано на экране. Этот тег описан первым, потому что он отличается от других тегов этой группы тем, что не имеет закрывающего тега. Область его действия идет от открывающего тега до конца документа. Даже если вы вставите закрывающий тег это не сработает. Таким образом единтсвенное применение этого тега - печать HTML тегов как обычного текста для. Параметров у этого тега нет.

Подсказка:

Если вы хотите напечатать какой-либо тег как обычный текст без использования тега (как сделано в этом руководстве), достаточно напечатать этот тег и заменить первую треугольную скобку '<' на комбинацию из 4-х символов &LT;

некоторый текст

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

некоторый текст

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

Эти шесть тегов обозначают заголовки и пердназначены для выделения заголовков и подзаголовков. Заголовки выделяются жирным шрифтом, до и после заголовка вставляется перенос строки. Отличие этих шести тегов друг от друга заключается только в размере шрифта, которым будет печататься заголовок. Вот шесть цифр от 1 до 6, которые отображают размер заголовков, печатаемых соответсвующими тегами.

Заголовок H1

Заголовок H2

Заголовок H3

Заголовок H4

Заголовок H5

Заголовок H6

некоторый текст

Тег предназначен для выделения параграфов текста. Перед параграфом и после параграфа вставляется пустая строка.

ALIGN

Этот параметр тега

предназначен для выравнивания текста внутри параграфа. Допустимые значения параметра ALIGN - LEFT (выравнивание текста по левому краю), RIGHT (выравнивание по правому краю), CENTER (выравнивание по центру) и JUSTIFY (выравнивание текста по ширине). Что значит выравнивание по ширине (JUSTIFY)? Там где это возможно броузер будет равномерно изменять расстояние между словами так, чтобы текст выравнивался по вертикальной линии как справа, так и слева. Точно так же как выравнен текст в книгах и так же как выровнен текст в этом руководстве.

некоторый текст

Печатание блока текста шрифтом фиксированной ширины (fixe-width font), заданным в настройках броузера и всех символов, включаю пробелы и переносы, такими как они есть в тексте. Вне тега

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


© 2010-2022