выводит текст шрифтом большего чем непомеченная часть текста размера
Выводит текст шрифтом большего чем непомеченная часть текста размера
Урок №2. Форматирование текста.
Цели работы:
1.Знакомство с физическими и логическими стилями форматирования текста.
2.Закрепление изученного материала на примерах.
3.Повторение ранее изученного материала.
Для форматирования текста HTML-документов предусмотрена целая группа тэгов, которые условно можно разделить на тэги физического и логического форматирования.
Под физическим стилем принято понимать прямое указание браузеру на модификацию текущего текста. Рассмотрим некоторые тэги физического форматирования.
— отображает текст полужирным шрифтом;
— отображает текст курсивом;
— отображает текст моноширинным шрифтом;
— отображает текст подчёркнутым;
или — отображает перечёркнутый текст;
— выводит текст шрифтом большего (чем непомеченная часть текста) размера;
— выводит текст шрифтом меньшего размера;
— сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для математических индексов.
— сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера.
— указывает параметры шрифта. Он относится к тэгам физического форматирования уровня текста. Различные параметры шрифта в одном документе нарушают его эстетический вид, поэтому данный тэг в версии HTML 4.0 отнесён к отмененным. Для тэга могут задаваться следующие параметры: face, size и color.
Параметр face служит для указания типа шрифта, например, Times New Roman, Arial, Courier и т.д. Программа будет выводить текст указанным типом только в том случае, если он имеется на компьютере. Можно указать как одно, так и несколько названий шрифтов, разделяя их запятыми. Список шрифтов просматривается слева на право. Если на компьютере пользователя нет шрифта, указанного в списке первым, то делается попытка найти следующий шрифт и т.д. Если не найден ни один из указанных шрифтов, то браузер по умолчанию отображает текст шрифтом Times New Roman.
Параметр size служит для указания размера шрифта в условных единицах от 1 до 7. Размер нормального шрифта считается равным 3.
Параметр color служит для задания цвета шрифта, например, color=blue означает, что заданный текст отобразится синим.
Приведем пример html–кода, обобщающего параметры тэга :
С выходом спецификации HTML 4.0 был провозглашён принцип отделения структуры документа от его представления, благодаря которому логическое форматирование стало более предпочтительным, чем физическое. Разные браузеры толкуют одни и те же метки логических стилей по-разному. Рассмотрим самые распространённые логические стили.
— (от английского emphasis – акцент) используется для выделения важных фрагментов текста. Обычно браузеры отображают такой текст курсивом.
— используется для выделения важных фрагментов текста, отображается полужирным шрифтом.
— как правило, отображается моноширинным шрифтом. Рекомендуется использовать для фрагментов исходных текстов.
— отмечет текст как образец. Используется также для выделения нескольких символов моноширинным шрифтом.
— рекомендуется использовать для указания того, что надо ввести с клавиатуры. Обычно отображается моноширинным шрифтом.
— рекомендуется использовать для написания имён переменных, отображается курсивом.
— используется для отметки цитат или названий книг и статей, ссылок на другие источники. Текст, заключенный в этот контейнер, выводится курсивом.
— этот тэг отмечает свой текст как удаленный (перечеркнутый). Полезно этот тэг использовать для отметки изменений, вносимых в документ от версии к версии.
Подытожим новый материал обобщающим примером 2.2.
Сохраните данный документ как “xxx.htm”.
Задание 2.1: По заданному виду HTML-страницы восстановите HTML-код. Подсказка: В данном документе применены тэги:
заголовка первого уровня;
абзаца (с различным выравниванием);
определяющие горизонтальную линию шириной во весь экран, толщиной 3;
определяющие полужирный, курсивный, подчеркнутый, перечеркнутый, приподнятый, опущенный шрифты; комбинацию полужирного и курсивного шрифта;
тэг для выделения первой буквы заголовка красным цветом (color=red), текста стиха красным цветом, шрифтом Monotype Corsiva, размером 5;
тэг прерывания строки
.
В конце страницы использован спецсимвол определяющий знак Copyright.
Для обращения к следующему занятию Вам необходимо пройти тест
Выводит текст шрифтом большего чем непомеченная часть текста размера
Для форматирования текста HTML-документа предусмотрена целая группа элементов, которую условно можно разделить на элементы логического и физического форматирования.
Элементы физического форматирования определяют формат отображения указанного в них фрагмента текста в окне браузера (согласно предпочтениям автора документа). Например, для отображения фрагмента курсивом можно использовать тэг курсива .
Между разработчиками НТМL-документов долгое время шли споры о преимуществах и недостатках того или иного подхода. С выходом спецификации НТМL 4.0 эти споры завершились в пользу применения логического форматирования, поскольку был провозглашен принцип отделения структуры документа от его представления. Действительно, только на базе логического форматирования можно гибко управлять представлением документа, используя современные методы (основанные на таблицах стилей, динамически изменяющихся документах и т. д.)
5.1. Элементы логического форматирования.
Элемент используется для отметки цитат или названий книг и статей, ссылок на другие источники и т. д. Браузерами такой текст обычно выводится курсивом. Пример:
Элемент отмечает свой текст как небольшой фрагмент программного кода. Как правило, отображается моноширинным шрифтом. Этот элемент не следует путать с элементом
Элемент отмечает свой текст как удаленный. Этот элемент полезно использовать для отметки изменений, вносимых в документ от версии к версии. Элемент может использоваться как элемент уровня текста и как элемент уровня блока.
Текст, помеченный элементом обычно отображается перечеркнутым текстом. В спецификации HTML 4.0 этому элементу отдается предпочтение перед элементом физического форматирования или , обозначающих перечеркнутый текст.
Элемент отмечает свой текстовый фрагмент как определение (definition). Например, этим элементом можно отметить какой-либо термин, когда он встречается в тексте в первый раз. Пример:
Элемент отмечает свой текст как вставку (insertion). Этот элемент полезно использовать для отметки изменений, вносимых в документ от версии к версии. Элемент может использоваться как элемент уровня текста и как элемент уровня блока.
5.1.8. Элемент .
Применение данного элемента предпочтительнее применения элемента физического форматирования .
Элемент отмечает текст как вводимый пользователем с клавиатуры. Обычно отображается моношириггым шрифтом, например:
Применение данного элемента предпочтительнее применения элемента физического форматирования .
Элемент отмечает короткие цитаты в строке текста. В отличие от элемента уровня блока
при отображении не выполняется отделение размеченного текста пустыми строками. Обычно отображается курсивом.
Элемент отмечает текст как образец (sample). Обычное использование этого элемента — отметка текста, выдаваемого программой (sample output). Используется также для выделения нескольких символов моноширинным шрифтом.
Применение данного элемента предпочтительнее применения элемента физического форматирования . Например:
5.1.12. Элемент .
Элемент , как правило, используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст полужирным шрифтом. Пример:
Применение данного элемента предпочтительнее применения элемента физического форматарования . Элементом обычно размечают более важные фрагменты текста, чем те, что размечены элементом .
Элемент отмечает имена переменных программ. Обычно такой текст отображается курсивом. Пример:
5.2. Элементы физического форматирования.
Приведем описание элементов физического форматирования. Часть из них не рекомендуется к использованию спецификацией HTML 4.0 по приведеннным выше причинам. Некоторые элементы отменены (deprecate) спецификацией HTML 4.0, однако они продолжают поддерживаться браузерами.
5.2.1. Элемент .
Элемент отобоажает текст полужирным шрифтом. В большинстве случаев рекомендуется вместо элемента использовать элемент логического форматирования . Пример:
5.2.2. Элемент .
5.2.3. Элемент .
5.2.4. Элемент .
5.2.5. Элементы и .
5.2.6. Элемент .
Элемент выводит текст шрифтом большего (чем непомеченная часть текста) размера. Вместо этого элемента лучше использовать элемент . Например:
5.2.7. Элемент .
Элемент выводит текст шрифтом меньшего размера. Поскольку в HTML нет элемента, противоположного по действию элементу , то для этих целей можно применять элемент . Например:
5.2.8. Элемент .
Элемент сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для математических индексов. Например:
Элемент сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для задания степеней чисел в математике. Например:
Элемент задает параметры шрифта. Он относится к элементам физического форматирования уровня текста.
Назначение параметров шрифта непосредственно в тексте документа нарушает основную идею разделения содержательной части документа и описания формы представления документа. Поэтому в спецификации HTML 4.0 данный элемент, а также элемент отнесены к отмененным. Их дальнейшее применение не рекомендуется.
Также как и элемент — не рекомендуемый — и имеет те же атрибуты.
Основные теги для создания и форматирования абзацев в HTML-документе.
не обязателен. Текст в абзаце может быть выровнен по левому краю, по правому краю, по ширине и по центру. Для этого применяют атрибут ALIGN:
абзац выровнен по левому краю.
абзац выровнен по правому краю.
абзац выровнен по центру.
абзац выровнен по ширине.
Каждый следующий тег абзаца отменяет форматирование предыдущего. При просмотре в браузере новый абзац будет отделен от предыдущего пустой строкой. Если нужно, чтобы абзацы шли без пустой строки и чтобы выравнивание распространялось и на следующий абзац, вместо нового абзаца используют тег обрыва строки (break)
.
Для форматирования абзацев можно пользаваться так же тегом создания раздела (division)
. Текст, таблицы, изображения. Выравнивание по центру.
Шесть стандартных тегов предусмотрено для оформления заголовков:
Заголовок 1 уровня
Заголовок 2 уровня
Заголовок 3 уровня
Заголовок 4 уровня
Заголовок 5 уровня
Заголовок 6 уровня
. Все что расположено между открывающим и закрывающим тегом, будет сдвинуто по правому краю и отделено от предыдущего и последующего текста пустой строкой.
Тема 3: «Теги заголовков в HTML документах»
Основные теги для создания свойств шрифтов и заголовков в HTML-документе.
Тег отображает текст полужирным шрифтом. Например: Это полужирный шрифт.
Тег отображает текст моноширинным шрифтом. Например: Это моноширинный шрифт.
Тег отображает текст подчеркнутым. Например: Пример подчеркивания текста.
Теги и отображают текст, перечеркнутый горизонтальной линией. Например: Пример зачеркнутого текста.
Тег выводит текст шрифтом большего (чем непомеченная часть текста) размера. Например: Шрифт большего размера.
Тег выводит текст шрифтом меньшего размера. Например: Шрифт меньшего размера.
Тег сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Например: Пример шрифта для нижнего индекса.
Тег сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера. Например: Пример шрифта для верхнего индекса.
Тег указывает параметры шрифта. Для тега могут задаваться следующие параметры: FACE (указывает тип шрифта, которым программа просмотра пользователя будет выводить текст), SIZE (указывает размер шрифта в условных единицах от 1 до 7) и COLOR (указывает цвет шрифта).
Для форматирования текста HTML-документов предусмотрена целая группа тегов, которую можно условно разделить на тэги логического и физического форматирования.
Тэги логического форматирования обозначают (своими именами) структурные типы текстовых фрагментов, такие, например, как программный код (тэг ), цитата (тэг ) и т.д. С помощью тэгов и можно, например, отметить отдельные фрагменты как выделенные или сильно выделенные. Речь идет о структурной разметке, которая не влияет на конкретное экранное представление фрагмента браузером. Поэтому такая разметка называется логической. Фрагменты с логическим форматированием браузера отображают на экране определенным образом, заданным по умолчанию, однако вид отображения может быть легко переопределен.
На базе логического форматирования можно гибко управлять представлением документа, используя современные методы, основанные на таблицах стилей динамически изменяющихся документов.
Таблица 2. Тэги логического форматирования текста.
| Тэг | Описание |
| отличает свой текст как аббревиатуру (Abbreviation) (До настоящего времени не поддерживается ни одним браузером) | |
| используется для отметки аббревиатур | |
| используется для отметки цитат или названий книг и статей, ссылок на другие источники и т.д. Текст обычно выводится курсивом | |
| отмечает текст как небольшой фрагмент программного кода. Как правило, отображается моноширенным шрифтом. | |
| отмечает текст как удаленный. Полезно использовать для отметки изменений. Текст обычно отображается перечеркнутым текстом. Имеет 2 необязательных параметра CITE и DATATIME | |
| отмечает текстовый фрагмент как определение. Подчеркивается только IE. Отображается по умолчанию курсивом | |
| отмечает свой текст как вставку. Полезен для отметки изменений, вносимых в документ | |
| используется для выделения важных фрагментов текста. Отображается по умолчанию курсивом | |
| отмечает текст как вводимый пользователем с клавиатуры. Как правило, отображается моноширенным шрифтом. | |
| отмечает короткие цитаты в строке текста (только для IE). Имеет параметр CITE, в качестве значения которого можно указать источник цитаты | |
| отмечает текст как образец. Используется также для выделения нескольких символов моноширенным шрифтом. | |
| используется для выделения важных фрагментов текста. Отображается обычно текст полужирным шрифтом | |
| отмечает имена переменных программ. Отображается курсивом |
Таблица 3. Тэги физического форматирования текста.
| Тэг | Описание | отображается текст полужирным шрифтом. Вместо тэга рекомендуется использовать | отображает текст курсивом |
| отображает текст моноширенным шрифтом | |
| отображает текст, перечеркнутый горизонтальной линией | |
| вместо них надо использовать тэг | |
| выводит текст шрифтом большего размера (чем непомеченная часть текста) | |
| выводит текст шрифтом меньшего размера | |
| сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера | |
| сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера | |
| отображает мигающий текст (только Netscape) | |
| указывает параметр шрифта. Параметр FACE служит для указания типа шрифта. Параметр SIZE служит для указания размеров шрифта в условных единицах от 1 до 7 | |
| используется для указания размера, типа и цвета шрифта, используемого в документе по умолчанию |
Разделение на абзацы
Разбиение текста HTML- документа на абзацы выполняется с использованием тэга абзаца
, помещаемого перед началом каждого абзаца. Закрывающий тэг
может задаваться с параметром горизонтального выравнивания ALIGN.
ALIGN=LEFT выравнивание текста по левой границе окна браузера
ALIGN=CENTER выравнивание по центру окна браузера
ALIGN=RIGHT выравнивание по правой границе окна браузера
ALIGN=JUSTIFY выравнивание по ширине (по двум сторонам)
Перевод строки
Тэг
служит для размещения последующего текста с начала новой строки.
Тэги и выполняют операцию противоположного плана – запретить перевод строки. Текст размеченный тэгом будет гарантированно располагаться в одной строке.
Организация стока поверхностных вод: Наибольшее количество влаги на земном шаре испаряется с поверхности морей и океанов (88‰).
Механическое удерживание земляных масс: Механическое удерживание земляных масс на склоне обеспечивают контрфорсными сооружениями различных конструкций.
Общие условия выбора системы дренажа: Система дренажа выбирается в зависимости от характера защищаемого.
Разметка текста в HTML
Изменения в документах: элементы DEL и INS
Изменения, возникшие в документе с момента, когда он стал доступен в первый раз, можно пометить, чтобы посетители могли сразу определить, что и когда изменилось.
Программный код: элемент CODE
Определения: элемент DFN
Вывод взаимодействия с компьютером: элементы SAMP и KBD
Элемент KBD используется для обозначения текста, который набирается на клавиатуре, или для названия клавиш. Браузеры, по умолчанию, помечают текст в контейнере KBD и SAMP моноширинным шрифтом.
Выделение важных фрагментов текста: элементы STRONG и EM
Переменные: элемент VAR
Элемент VAR используется для указания переменных в текстовом контенте. Он может включать алгебраические математические выражения или находиться в программном коде. Браузеры обычно помечают такой текст курсивом. Например, элемент VAR можно использовать следующим образом:
Элементы физического форматирования
В данном разделе приведено краткое описание некоторых элементов физического форматирования. Часть из них не рекомендуется к использованию спецификацией HTML 4.01 и заменена более новыми методами достижения аналогичного результата, однако они продолжают поддерживаться браузерами и поэтому представляют определенный интерес.
Элементы стиля шрифта: TT, I, B, BIG, SMALL, U, STRIKE и S
Элементы STRIKE и S отображают текст, перечеркнутый горизонтальной линией. Оба элемента отменены, и вместо них рекомендуется использовать элемент DEL.
Верхние и нижние индексы: элементы SUB и SUP
Элементы модификатора шрифта: FONT и BASEFONT
Базовые контейнеры: элементы DIV и SPAN
Элемент DIV является базовым контейнером блочного уровня. Он используется для объединения различных частей контента в логически цельную единицу или логический блок. Этот элемент, эффективно взаимодействуя с таблицами стилей, позволяет форматировать разделы отдельной страницы или даже целого сайта. Текстовый блок, отделенный логически, легко потом выделить при отображении любым способом, например, шрифтом, цветом, межстрочным интервалом, центрированием и т.п. Содержимое элемента DIV может быть расположено произвольным образом, выделено другим фоном и т.д. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора.
Различие между двумя этими элементами состоит в типе контента, а также в его представлении при записи без какого-либо стилевого оформления. Элемент DIV помещается вокруг группы элементов блочного уровня (например, создать оболочку вокруг заголовка и списка ссылок, чтобы создать навигационное меню ). Элемент SPAN создает оболочку вокруг группы строковых элементов или (чаще всего) обычного текста.
Следующий фрагмент кода демонстрирует применение элементов DIV и SPAN :