Логическое форматирование html. Теги логического форматирования HTML текста

Таблицы достаточно широко применяются в электронной документации, причем для 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 не предусмотрено. Однако если мы хотим ориентировать таблицу по центру, можно пойти другим путем: заключить контейнер

n
, который описывает всю таблицу целиком, в контейнер
и
. Напомним, что последний имеет уровень блока, т. е. форматирует любое количество данных, размещенных внутри его (см. § 2.2).

Отметим, что параметр ALIGN может использоваться и для форматирования данных внутри каждой ячейки таблицы, например:

Пример отображения браузером документа, включающего в себя приведенный выше фрагмент, показан на рис. 2.8. На рисунке хорошо видна рамка вокругтаблицы и то, что таблица выровнена влево, а справа обтекается текстом. В качестве текста использован фрагмент второго абзаца, начинающегося на данной странице. Следует обратить внимание на то, что хотя вся таблица выровнена влево, данные в каждой строке выравниваются вправо. Формально можно было бы в каждой ячейке выравнивать текст по-своему. Однако визуально это выглядело бы очень неприглядно.

Для качественного дизайна полосы данные во всех ячейках столбца таблицы должны выравниваться одинаково, т. е. в примере на рис. 2.8возможно было бы оставить первый столбец неизменным, а данные во втором выровнять влево (или даже по центру).

Параметр BACKGROUND, который уже был показан в примере, приведенном выше, также может использоваться как в теге <ТАВLЕ>, так и в тегах <ТН> и

Фамилия Оценка
Иванов A.H.

Сергеев И.Д. 5
Лавров В.В. 3, определяющих характеристики отдельных ячеек таблицы. Во всех случаях он определяет фоновый рисунок с помощью параметра 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-документов подразумевает использование тегов для разметки в соответствии со смысловым значением элементов страницы, а не с желаемым внешним видом.

К элементам и приемам, нарушающим этот принцип, относятся:

  • использование тегов физического, или визуального, форматирования текста (начиная с привычного и заканчивая динозаврами наподобие ); а также указание дополнительных параметров визуального форматирования в валидных тегах (таких, как BGCOLOR в теге ),
  • искажение смысла тегов (например, использование
      и вместо
      и ),
    • использование невидимых таблиц с целью создания «каркаса» страницы и позиционирования блоков.

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

    Логическое форматирование

    На сегодняший день предложены методы форматирования HTML-документов, альтернативные визуальному. А именно:

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

    Зачем?

    Возникает закономерный вопрос: зачем ради «чистоты языка» менять привычные способы верстки и усложнять себе работу? На самом деле работать с «чистым» унифицированным кодом становится проще и удобнее. Кроме того, концепция CSS предоставляет веб-строителю дополнительные степени свободы за счет создания единого центра управления стилями.

    Реальность и частности

    Некоторые из тегов физического форматирования (скажем, ) сегодня, действительно, выходят из моды, а каскадные таблицы стилей овладевают все большим числом умов. Однако, думаю, что использование таблиц для создания пространственной структуры веб-документов в ближайшем будущем сохранит свою актуальность. Этот, как и некоторые другие вопросы, я намеренно не затрагиваю, чтобы вернуться к ним в одной из следующих статей.

    Подведем итоги

    1. Логическое форматирование HTML позволяет разделить структуру и оформление документа и упрощает работу веб-строителя.
    2. В настоящее время существуют реальные альтернативы использованию визуального форматирования в HTML-коде.
    3. Требуется уточнение возможностей применения логического форматирования, исходя из принципа целесообразности.

    Литература

    1. Бандурина Л. Каскадные таблицы стилей, или CSS для начинающих. Мир Internet. 2000; 10: 66-70.
    2. Бандурина Л. Каскадные таблицы стилей, или CSS для начинающих. Мир Internet. 2000; 11: 70-73.
    3. Матросов А.В., Сергеев А.О., Чаунин М.П. HTML 4.0. — СПб.: БХВ-Петербург, 2000.

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

    Ниже перечислены элементы логического форматирования.

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

      - Применяется для вывода небольшого куска программного кода шрифтом фиксированной ширины.

      - используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст курсивом.

      - элемент, выделяющий шрифтом фиксированной ширины текст, вводимый пользователем с клавиатуры.

      - используется для выделения нескольких символов шрифтом фиксированной ширины.

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

      - используется для отметки имен переменных, обычно такой текст отображается курсивом.

    Все перечисленные тэги являются контейнерами, то есть требуют закрывающего тэга.

    Можно заметить, что некоторые контейнеры дают одинаковый результат. Возникает законный вопрос: зачем это сделано

    ?

    Ответ - в названии этой группы элементов. Они предназначены для расстановки логических ударений, выделения логических частей и подчеркивания сути высказываний. Их использование весьма актуально, поскольку, вероятно, в ближайшем будущем станет возможен, например, поиск цитат в Web - пространстве.

    Иногда возникает необходимость включения в документ какой-либо цитаты. Для ее выделения из основного текста существует тэг

    . Этот элемент является контейнером и может содержать любые форматирующие тэги.

    Современные браузеры реагируют на элемент

    смещением текста цитаты вправо.

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

      - выделяет текст полужирным шрифтом.

      - выделяет текст курсивом.

      - выводит текст шрифтом фиксированной ширины.

      - элемент подчеркивания.

      - элемент зачеркивания.

      - выводит текст шрифтом большего размера.

      - выводит текст шрифтом меньшего размера.

      - сдвигает текст ниже уровня строки и выводит (если возможно) шрифтом меньшего размера.

      - сдвигает текст выше уровня строки и выводит (если возможно) шрифтом меньшего размера.

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

    Одной из важных особенностей, воплощенных в

    HTML, начиная с версии 3.2, является полный контроль облика создаваемого документа. Такая возможность отсутствовала в предыдущих версиях языка. Можно сказать, что единственной существенной проблемой осталось отсутствие на машине пользователя каких-либо шрифтов, которые используются в документе. FONT впервые появился в HTML версии 3.2 и представляет собой контейнер. После стартового тэга обязательно указание атрибутов, без которых элемент не имеет никакого влияния на текст, помещенный в контейнер. Элемент FONT может находиться внутри любого другого текстового контейнера. служит для указания размеров, типа и цвета шрифта, стандартных для данного документа. Эти величины обязательны для всего документа, если только не переназначаются при помощи элемента FONT . После закрытия элемента FONT значения тэга восстанавливаются. Значения атрибутов BASEFONT могут быть изменены другим тэгом в любом месте документа. Тэг не является контейнером и использует те же атрибуты, что и элемент .

    Тег < code >

    Данный тег рекомендуется использовать для выделения фрагментов программных кодов в HTML-документе. Как правило, такой текст отображается моноширинным шрифтом. Следует отметить, что в отличие от тега

    Данный тег не является тегом уровня блока и
    может включаться в строки обычного текста. Пример:

    Задание целочисленной переменной на языке C++: int a = 0;

    Теги < del > и < ins >

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

    cite – URL-адрес документа, поясняющего причину удаления текста;
    datetime – дата редактирования в формате YYYY-MM-DDThh:mm:ssTZD.

    Это текст помечен как удаленный

    Аналогично используется тег-контейнер , который отмечает текст как добавленный (вставленный). Обычно такой текст помечается браузерами как подчеркнутый. Данный тег имеет те же необязательные параметры, что и тег :

    Это добавленный текст

    Тег < em >

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

    Выделенный фрагмент текста

    Тег < kbd >

    Тег-контейнер служит для выделения текста, введенного с клавиатуры. Такой текст обычно отображается моноширинным шрифтом:

    Для загрузки яндекс-поиска введите yandex.ru

    Тег < samp >

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

    Моя первая программа на C++ выводит текст Hello World!

    Тег < strong >

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

    Пример текста, помеченный как важный

    Тег < var >

    Данный тег предназначен для выделения переменных программ и, как правило, отображается браузерами курсивом:

    Переменная a имеет значение 5

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

    Тег

    Тег отмечает свой текст как аббревиатуру (ABBReviation). Несмотря на то, что этот тег включен в спецификацию HTML 4.0, он до настоящего времени не поддерживается ни одним браузером.

    Тег

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

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

    Заметим, что тег распознается только браузером Microsoft Internet Explorer. Пример:

    СПбГИТМО - один из ведущих технических вузов Санкт-Петербурга

    Тег

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

    Невское время является одной из наиболее популярных городских газет Санкт-Петербурга

    Тег

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

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

    Например:

    Пример простейшего оператора языка программирования C:

    puts("Hello, World!");

    Есть еще одно различие в использовании тегов и

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

    Тэг

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

    Тег имеет два необязательных параметра: CITE и DATETIME. Значение параметра CITE должно представлять собой URL-адрес документа, поясняющего причины удаления данного фрагмента.

    Параметр DATETIME указывает дату удаления в формате: YYYY-MM-DDThh:mm:ssTZD, определяющем год, месяц, число, часы, минуты и секунды удаления, а также часовой пояс (Time Zone). Например:

    Последней принятой спецификацией языка разметки HTML является версия 3.2 4.0

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

    Тег

    Тег отмечает свой текстовый фрагмент как определение (DeFinitioN). Например, этим тегом можно отметить какой-либо термин, когда он встречается в тексте в первый раз. Пример:

    Internet Explorer - это популярный Web-браузер

    Тег поддерживается только браузером Microsoft Internet Explorer. Отображается по умолчанию курсивом.

    Тег

    Тег отмечает свой текст как вставку (INSertion). Этот элемент полезно использовать для отметки изменений, вносимых в документ от версии к версии. Тег может использоваться как элемент уровня текста и как элемент уровня блока.

    Тег имеет два необязательных параметра: CITE и DATETIME. Значение параметра CITE должно представлять собой URL-адрес документа, поясняющего подробности внесенных дополнений.

    Параметр DATETIME указывает дату вставки в формате: YYYY-MM-DDThh:mm:ssTZD, определяющем год, месяц, число, часы, минуты и секунды вставки, а также часовой пояс (Time Zone).

    Текст, помеченный тегом , обычно отображается подчеркнутым текстом. Тег в настоящее время распознается только браузером Microsoft Internet Explorer.

    Тег

    Тег (EMphasis - выделение, подчеркивание) используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст курсивом. Пример:

    Пример выделения отдельных слов текста

    .

    Тег

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

    Чтобы запустить текстовый редактор, напечатайте: notepad

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

    Тег

    Тег отмечает короткие цитаты в строке текста. В отличие от тега уровня блока

    при отображении не выполняется отделение размеченного текста пустыми строками. Обычно отображается курсивом. Тег (в отличие от
    ) в настоящее время распознается только браузером Microsoft Internet Explorer.

    Тег имеет параметр CITE, в качестве значения которого можно указать источник цитаты.

    Тег

    Тег отмечает текст как образец (SAMPle). Обычное использование этого тега - отметка текста, выдаваемого программами (sample output). Используется также для выделения нескольких символов моноширинным шрифтом.

    Применение данного тега предпочтительнее применения тега физического форматирования . Например:

    В результате работы программы будет напечатано: Hello, World!.

    Тег

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

    Санкт-Петербург расположен в самой восточной оконечности Финского залива в устье реки Невы

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

    Тег

    Тег отмечает имена переменных программ. Обычно такой текст отображается курсивом. Пример:

    Задайте значение переменной N

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

    Рис. 1.1. Примеры форматирования текста

    Вы, наверное, обратили внимание на то, что некоторые элементы дают одинаковый результат. Более того, часть элементов может никак не изменять представление фрагмента текста на экране. Может возникнуть законный вопрос: для чего создано такое разнообразие элементов форматирования?

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



    Есть вопросы?

    Сообщить об опечатке

    Текст, который будет отправлен нашим редакторам: