Логическое форматирование текста. Логическое форматирование
Логическое и физическое форматирование
Для форматирования текста HTML-документов предусмотрена целая группа тэгов, которую можно условно разделить на тэги логического
и физического
форматирования.
Тэги логического форматирования обозначают (своими именами) структурные типы своих текстовых фрагментов, такие, например, как программный код
(тэг
), цитата
(тэг <СIТЕ>
), аббревиатура
(тэг < ABBR
>
) И Т. П.
С помощью тэгов <ЕМ>
и
можно, например, отметить отдельные фрагменты как выделенные
,или сильно выделенные
.Заметим, что речь идет о структурной разметке
,которая не влияет на конкретное экранное представление фрагмента браузером. Поэтому такая разметка и называется логической
.
Фрагменты с логическим форматированием браузеры отображают на экране определенным образом, заданным по умолчанию. Вид отображения никак не связан со структурным типом фрагмента (т. е. именем тэга логического форматирования), но может быть легко переопределен.
Тэги физического форматирования определяют формат отображения
указанного в них фрагмента текста в окне браузера.
Например, для отображения фрагмента курсивом
можно использовать тэг курсива
.
Между разработчиками HTML-документов долгое время шли споры о преимуществах и недостатках того или иного подхода. С выходом спецификации HTML 4.0 эти споры завершились в пользу применения логического форматирования, поскольку был провозглашен принцип отделения структуры документа от его представления. Действительно, только на базе логического форматирования можно гибко управлять представлением документа, используя современные методы (основанные на таблицах стилей, динамически изменяющихся документах и т. д.).
Тем не менее, на настоящий момент может свободно использоваться и физическое форматирование. В спецификации HTML 4.0 некоторые тэги физического форматирования не рекомендуются для применения, однако, пока они все еще поддерживаются всеми браузерами. Заметим, что некоторые тэги логического форматирования, призванные заменить отдельные тэги физического форматирования, распознаются не всеми браузерами, что делает их применение крайне неудобным.
Тэги логического форматирования текста
Тэг
Тэг < ABBR
>
отмечает свой текст как аббревиатуру
( ABBReviation
).
Язык
HTML
был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1991-1992 годах
в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария).
HTML создавался как язык для обмена научной и технической документацией,
пригодный для использования людьми, не являющимися специалистами в области вёрстки.
Тэг
Тэг < ACRONYM
>
. Так же, как и тэг < ABBR
>
, используется для отметки аббревиатур. Этим тэгом рекомендуется отмечать так называемые акронимы
,т. е. произносимые слова, состоящие из аббревиатур. Тэг < ACRONYM
>
возможно в будущем станет использоваться для невизуального отображения элементов, например при речевом синтезе.
Данный тэг удобно использовать в сочетании с параметром TITLE
, в качестве
значения которого можно указать полную версию аббревиатуры. Тогда визуальные браузеры при наведении курсора на текст, размеченный тэгом < ACRONYM
>
, будут выдавать полное наименование в виде появляющейся подсказки.
ТПУ .
Тег H1...H6
HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег
представляет собой наиболее важный заголовок первого уровня, а тег
служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги
...
относятся к блочным элементам
, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Видом заголовком легко можно управлять с помощью стилей.
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
В браузере это будет выглядеть так:
Тэг <СIТЕ>
Тэг
используется для отметки цитат или названий книг и статей, ссылок на другие источники и т. д. Браузерами такой текст обычно выводится курсивом.
Нельзя сказать человеку: "Ты можешь творить.
Так давай, твори". Гораздо вернее подождать, пока он
сам не скажет: "Я могу творить, и я буду творить, хотите
вы этого или нет".
Айзек Азимов
Тэг
Тэг
отмечает свой текст как небольшой фрагмент программного кода
.Как правило, отображается моноширинным шрифтом. Этот тэг не следует путать с тэгом Являющимся элементом уровня блока, который следует использовать для отметки больших фрагментов (листингов) кода
.
Код программы
function checkParent (src, dest) {
while (src != null) {
if (src.tagName == dest) return src
src = src.parentElement
}
return null
}
Тэг
Тэг
отмечает свой текст как удаленный
.Этот элемент полезно использовать для отметки изменений, вносимых в документ от версии к версии. Тэг
может использоваться как элемент уровня текста и как элемент уровня блока.
Тэг имеет два необязательных параметра: CITE
и DATETIME
. Значение параметра CITE
должно представлять собой URL-адрес документа, поясняющего причины удаления данного фрагмента.
Параметр DATETIME
указывает дату удаления в формате: YYYY-MM-DDThh:mm:ssTZD
, определяющем год, месяц, число, часы, минуты и секунды удаления, а также часовой пояс
( Time Zone
).
Тэги физического форматирования текста
Тег
Заключенные между этими тег имеет свойства жирного текста. Имеет атрибут title
- позывает текст в виде всплывающей подсказки.
Тег
Данный тег увеличивает размер отображения текста.Имеет атрибут title
- позывает текст в виде всплывающей подсказки.
Пример физического форматирования
Тег
Служит для выбора шрифта для текста. Атрибуты:
- size
- размер текста от 1 до 7
- color
- цвет текста
Пример физического форматирования
Тег
Данный тег вставляет в страницу горизонтальную линию. Атрибуты:
- size
- высота и толщина линии
- width
- ширина линии
- noshade
- создание линии без тени
- color
- меняет цвет линии
Таблицы
достаточно широко применяются в
электронной документации, причем для
Web-страниц они используются не только
в традиционном смысле, как метод
упорядоченного представления данных,
но и для форматирования самих этих
страниц. Описание таблицы на языке
HTML размещается внутри тела документа,
т. е. в контейнере и .
Внутри документа допускается любое
число таблиц, причем некоторые из них
могут быть вложенными. Каждая таблица
создается в пределах контейнера
<ТАВLЕ> и , где размещается
описание структуры самой таблицы и
ее содержимое.Каждая строка
таблицы размещается после тега |
(Table Row). Каждая ячейка таблицы в пределах
строки оформляется тегом <ТН>
(Table Header) - для заголовочной части
таблицы или | (Table Data) - для ячеек,
в которых размещаются данные. В
заголовочной части по умолчанию
применяется полужирный шрифт и
выравнивание по центру. Для отображения
данных по умолчанию используется
нормальное (светлое) начертание и
выравнивание влево. Можно отметить,
что для всех тегов, перечисленных в
этом абзаце, закрывающий тег не
обязателен, т. е. он может быть опущен. Количество
строк в таблице определяется количеством
строчных тегов |
, а число столбцов
- максимальным количество тегов <ТН>
или | в одной из строк. Строкой
считается все то, что следует после
очередного тега |
и до следующего
такого тега. Для ячейки таблицы, не
содержащей данных, надо использовать
пустой контейнер | и | . Если
пустые ячейки расположены в конце
строки, то их описание может быть
опущено - браузер самостоятельно
оставит необходимое число ячеек
пустыми.Таблица может
иметь название - то, что в редакционной
практике называется тематическим
заголовком (в отличие от нумерационного),
причем если в печатном издании
заголовок обязательно расположен
над таблицей, то в электронном он
может быть расположен как сверху, так
и снизу. Заголовок расположен внутри
контейнера
и .
Указанный контейнер должен быть
помещен внутрь тега-контейнера
<ТАВLЕ>, но вне области описания
тегов
, | или В теге
первоначально был предусмотрен
один необязательный параметр ALIGN,
который предназначался для вертикального
выравнивания и мог принимать одно из
двух значений ТОР (по умолчанию) или
BOTTOM. Затем выяснилась необходимость
и горизонтального выравнивания стремя
стандартными параметрами LEFT, RIGHT и
CENTER. Однако нельзя в одном теге дважды
использовать один и тот же параметр.
Поэтому в современных версиях языка
HTML параметр ALIGN (по умолчанию ALIGN=LEFT)
оставлен для выравнивания по
горизонтали, а вертикальное выравнивание
(точнее - размещение заголовка над
или под таблицей) осуществляется с
помощью параметра VALIGN.В теге
могут использоваться следующие
параметры: BORDER, CELLSPACING, CELLPADDING, WIDTH,
ALIGN, HEIGHT и BACKGROUND. Параметр BORDER управляет
отображением рамки вокруг каждой
ячейки таблицы (т. е. задает вертикальные
и горизонтальные линии сетки) и вокруг
всей таблицы, причем его значение
задаеттолщину рамки в пикселах вокруг
всей таблицы, а само наличие этого
параметра задает линии сетки. Значение
параметра BORDER появилось лишь в версии
3.2 спецификации HTML, до это го тол щи
на рамки вокруг таблицы не регулировалась.Параметр
CELLSPACING задает расстояние между смежными
по горизонтали и вертикали ячейками,
причем это расстояние задается в
пикселах, т. е. внутри каждой ячейки
создается нечто вроде рамки и лишь
при CELLSPACING=0 эти рамки отдельных ячеек
сливаются в единую сетку. Параметр
CELLPADDING определяет расстояние между
рамкой вокруг ячейки и данными внутри
ее, т. е. величину отступа символов от
рамки. При значении CELLPADDING=0 текст
может касаться рамки, что в плане
дизайна едва ли можно приветствовать.
По умолчанию значение CELLSPACING=2, a
CELLPADDING=1, в этом случае расстояние
между данными в соседних ячейках
будет равно б пикселам. Параметры
WIDTH и HEIGHT позволяют задать ширину и
высоту таблицы как в абсолютных
единицах - пикселах, так и в относительных
- процентах относительно размера окна
браузера. В большинстве случаев эти
размеры не требуются браузеру, так
как он автоматически вычисляет размеры
таблицы, учитывая множество факторов,
включая параметры документа в целом,
количество ячеек в таблице и их
заполнение. Браузер стремится
установить такую ширину таблицы,
чтобы она помещалась в окне просмотра
браузера и не было необходимости в
прокрутке таблицы по горизонтали, т.
е. чтобы горизонтальный слайдер
отсутствовал. Надо отметить,
что и при задании значений параметров
WIDTH и HEIGHT нет гарантии в том, что они
будут выдержаны браузером. Если ширина
таблицы больше ширины окна просмотра,
браузер сделает попытку уменьшить
ширину до требуемой, пропорционально
уменьшая размеры колонок, и только
если это не удастся, установит заданную
ширину таблицы, снабдив окно слайдером. Параметр
ALIGN задает горизонтальное выравнивание
таблицы в окне просмотра браузера.
Возможны два значения этого параметра:
LEFT и RIGHT, каждый из которых обеспечивает
обтекание таблицы текстом документа
с противоположной стороны. Это
соответствует оборочной таблице в
печатном издании. По умолчанию параметр
ALIGN принимает значение LEFT. Если параметр
ALIGN опущен, то текста рядом с таблицей
не будет вообще, т. е. таблица будет
форматной или полосной (когда она
занимает всю страницу по вертикали),
если использовать термины, принятые
в печатных изданиях. Значение параметра
ALIGN=CENTER не предусмотрено. Однако если
мы хотим ориентировать таблицу по
центру, можно пойти другим путем:
заключить контейнер ,
который описывает всю таблицу целиком,
в контейнер и .
Напомним, что последний имеет уровень
блока, т. е. форматирует любое количество
данных, размещенных внутри его (см. §
2.2).Отметим, что
параметр ALIGN может использоваться и
для форматирования данных внутри
каждой ячейки таблицы, например: | Фамилия |
Оценка |
|---|
| Иванов A.H. | | | Сергеев И.Д. | 5 | | Лавров В.В. | 3 | Пример
отображения браузером документа,
включающего в себя приведенный выше
фрагмент, показан на рис. 2.8.
На рисунке хорошо видна рамка
вокругтаблицы и то, что таблица
выровнена влево, а справа обтекается
текстом. В качестве текста использован
фрагмент второго абзаца, начинающегося
на данной странице. Следует обратить
внимание на то, что хотя вся таблица
выровнена влево, данные в каждой
строке выравниваются вправо. Формально
можно было бы в каждой ячейке выравнивать
текст по-своему. Однако визуально это
выглядело бы очень неприглядно. Для качественного
дизайна полосы данные во всех ячейках
столбца таблицы должны выравниваться
одинаково, т. е. в примере на рис. 2.8возможно было бы оставить первый
столбец неизменным, а данные во втором
выровнять влево (или даже по центру). Параметр
BACKGROUND, который уже был показан в
примере, приведенном выше, также может
использоваться как в теге <ТАВLЕ>,
так и в тегах <ТН> и , определяющих
характеристики отдельных ячеек
таблицы. Во всех случаях он определяет
фоновый рисунок с помощью параметра
HREF. В последней версии спецификации
HTML в теге <ТАВLЕ> появился параметр
COLS, задающий общее число колонок в
таблице. Эта дополнительная информация
ускоряет процесс построения таблицы
браузером. При создании
заголовочной части таблицы, реже
боковика и прографки (основной части
таблицы, где размещаются данные),
возникает потребность в объединении
нескольких ячеек по горизонтали (в
строке) или по вертикали в единое
целое. Для этого используются параметры
ROWSPAN и COLSPAN, первый из которых объединяет
несколько строк, а второй - столбцов
в одну ячейку. Пример описания такой
таблицы приводится ниже.
Объединение ячеек в заголовочной
части| 3aголовок |
Заголовок 2 |
|---|
| Заголовок
2-1<ТН>Заголовок 2-2 |
|---|
| 1 | 2 | 3 Показанный ниже рис. 2.9построен на основании HTML-документа,
в теле которого содержится приведенный
выше контейнер со
всем его содержимым. По сравнению с
таблицей, показанной на рис. 2.8,
здесь с помощью тега добавлен
тематический заголовок, выровненный
по центру таблицы. В таблице хорошо
видны рамки ячеек и рамка вокруг
таблицы в целом. В ячейке «Заголовок
1» объединены две строки, а в ячейке
«Заголовок 2» - два столбца, что
соответствует исходному HTML-коду. В
третьей строке, как это часто делают
для длинных узких таблиц, указаны
номера колонок, что позволяет при
переносе на следующую полосу не
повторять заголовка целиком. Отметим,
что используя параметры ROWSPAN и COLSPAN
можно составить многоуровневые
заголовки таблиц любой степени
сложности
|
Прежде всего, определим, что такое логическое форматирование документа.
Под логическим форматированием подразумевается использование специальных тегов HTML
для слов и групп слов в соответствии с их значением. Например,
цитаты оформляются с помощью тега CITE
,
выделение с помощью тега EM
и т.д.
Зачем это нужно? Почему нельзя обойтись только тегами физического форматирования?
Все очень просто, теги логического форматирования можно переопределить с
использованием CSS . При этом достигается высокая
гибкость в оформлении сайта и простота в его написании.
В следующей таблице рассмотрим теги
логического форматирования документа с параметрами оформления по умолчанию:
| Тег
| Описание
|
|---|
| ABBR
|
Используется для описания аббревиатуры
(сокращенное название, которое читается по буквам). Закрывающийся тег обязателен.
Пример: HTML
|
| ACRONYM
|
Используется для описания акронима
(сокращенное название, которое читается как слово). Закрывающийся тег обязателен.
Пример: ВУЗ
|
| CITE
|
Используется для цитат (по умолчанию наклонный текст).
Необязательное свойство TITLE
задает текст всплывающей
подсказки. Закрывающийся тег обязателен. Пример: И это пройдет...
|
| CODE
|
Используется для отображения фрагментов программного кода
(по умолчанию моноширинной шрифт).
Необязательное свойство TITLE
задает текст всплывающей подсказки.
Закрывающийся тег обязателен.
Пример: var a = new Array(); .
|
| DFN
|
Используется для определений, например для термина,
встречающегося в тексте впервые
(по умолчанию наклонный шрифт для первой строки, и обычный для остальных).
Необязательное свойство TITLE
задает текст всплывающей подсказки.
Закрывающийся тег обязателен.
Пример: HTML is a hypertext markup language.
|
| EM
|
Используется для выделения текста (по умолчанию наклонный шрифт,
происходит от английского emphasis - ударение). Необязательное свойство TITLE
задает текст всплывающей подсказки.
Закрывающийся тег обязателен. Пример: EM используется для выделения
текста.
|
| KBD
|
Выделения текста, вводимого пользователем с клавиатуры
(по умолчанию моноширинной шрифт). Закрывающийся тег обязателен.
Пример: введено: have a nice day:) .
|
| SAMP
|
Используется для выделения примеров
(по умолчанию моноширинной шрифт). Закрывающийся тег обязателен.
Пример: Пример.
|
| STRONG
|
Используется для выделения текста (по умолчанию жирный шрифт).
Закрывающийся тег обязателен. Является альтернативой тега физического форматирования
B
.
Пример: Текст выделен жирным
.
|
| VAR
|
Используется для выделения переменных в фрагменте кода программы
(по умолчанию курсив). Закрывающийся тег обязателен.
Пример: double precision delta .
|
Хотя язык HTML включает теги для достижения различных шрифтовых эффектов (полужирный шрифт, курсив, подчеркнутый шрифт), не все браузеры их поддерживают. Однако все браузеры поддерживают тот или иной способ выделения текста. Поэтому использование логического форматирования текста в любом случае приведет к выделению программой просмотра различных частей текста и выявит структуру документа.
Говоря о логической разметке текста, можно выделить две основные части: Выделение заголовков в документе;
логическое выделение элементов текста.
Название документа, задаваемое с помощью тега , не выводится на экран как часть документа. Чтобы отобразить название используется один из тегов заголовка. Заголовки в типичном документе разделяются по уровням. Язык HTML позволяет задать шесть уровней заголовков: H1 (заголовок первого уровня), Н2, Н3, H4, Н5 и H6. Заголовок первого уровня имеет обычно <a href="/bank-fotografii-vysokogo-razresheniya-bolshih-razmerov-besplatnye.html">больший размер</a> и насыщенность по сравнению с заголовком второго уровня.</p>
<p>Если вы посмотрите на эту главу, то "<a href="/logicheskoe-formatirovanie.html">Логическое форматирование</a>" -- заголовок третьего уровня, "Форматирование гипертекста" -- второго, а "Основы <a href="/html-yazyk-razmetki-giperteksta-osnovy-html-yazyk-razmetki-giperteksta-hyper-text-markup.html">языка HTML</a>" -- первого. На практике заголовки четвертого и далее уровней встречаются лишь в очень больших документах.</p>
<p><b>Пример
</b></p>
<p><HTML>
<HEAD>
<TITLE> Заголовки
Заголовок 1 уровня
Заголовок 2 уровня
Заголовок 3 уровня
Заголовок 4 уровня
Заголовок 5 уровня
Заголовок 6 уровня
|
|
