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

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

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

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

искажение смысла тегов (например, использование

вместо
и ),
использование невидимых таблиц с целью создания «каркаса» страницы и позиционирования блоков.

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

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

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

Зачем?

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

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

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

Литература

Бандурина Л. Каскадные таблицы стилей, или CSS для начинающих. Мир Internet. 2000; 10: 66-70.
Бандурина Л. Каскадные таблицы стилей, или CSS для начинающих. Мир Internet. 2000; 11: 70-73.
Матросов А.В., Сергеев А.О., Чаунин М.П. 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-документов в будущем. Разобравшись с сутью и предназначением логической разметки текста настало время познакомить Вас с тегами которые способны разбавить сухой текст неким смыслом. Буду перечислять.. Тег Выделяет в тексте аббревиатуру. Браузерами обычно подчеркивается пунктирной линией. CSS Практически ко всем тегам применим атрибут title - всплывающая подсказка, так вот если Вы в тексте выделяете некую аббревиатуру, старайтесь давать к ней расшифровку, используя данный атрибут. title="Cascading Style Sheets">CSS позволит Вам без труда изменить стиль любого тега логического форматирования текста! Тег Данный тег выделяет в тексте акроним. Акроним это почти то же самое что и аббревиатура, только образованная из начальных букв, слов или словосочетаний, произносимая как единое слово, а не побуквенно. Вступай в title="коммунистический союз молодёжи">комсомол !! Так же как и с аббревиатурой для расшифровки текста желательно использовать атрибут title . Вася Пупкин г. Урюпинск Макаронная фабрика 2010г. Тег Выделяет в тексте цитату или сноску на другой документ. Обычно браузеры отображают её курсивом. Как сказал Остап Бендер Тег Отмечает текст как некий программный код. Обычно отображается моноширинным шрифтом. function() - так обозначается функция в PHP Тег Выделяет удалённый текст в новой версии документа. Выделенный текст станет перечёркнутым. Напоминает теги физического форматирования и сокращённый - перечёркнутый текст. Использование тега , более предпочтительно, так как помимо того, что он разбавляет текст логикой еще и заменяет собой теги и , которые помечены спецификацией 4.01 как нежелательные. Старая цена 1000р. - Новая 999 р.!!! Тег Выделяет текст как определение. Как правило, когда в тексте встречается новый термин, авторы выделяют его курсивом и дают его определение, собственно для этого и нужен тег Акроним - аббревиатура, образованная из начальных букв, слов или словосочетаний, произносимая как единое слово, а не побуквенно. Тег Выделяет новый текст в новой версии документа. Выделенный текст в большинстве браузеров станет подчёркнутым. Противоположен по значению тегу с ним же в паре обычно он и используется. Старая цена 1000р. - Новая 999 р. !!! Тег Выделяет особенно важный фрагмент текста. Обычно отображается курсивом. Как создать сайт? - узнай на Вебремесло.ру!! Тег От английского keyboard - клавиатура. Указывает текст вводимый с клавиатуры, или для названия клавиш. Обычно отображается моноширинным шрифтом. Нажмите Ctrl + Z для того чтобы отменить последнее действие. Тег Выделяет в тексте цитату. В отличие от тега цитата обозначенная тегом автоматически берётся браузерами в кавычки. Как сказал Остап Бендер Лед тронулся! господа присяжные заседатели! Кстати, есть еще и тег физического форматирования текста данный тег тоже помечает текст как цитату и при этом выделяет его отступами и переносами строк от остального текста. Цитаты логического форматирования текста : - браузеры автоматически берут такую цитату в кавычки. Кстати выходя за рамки темы, видом кавычек легко управлять с помощью CSS псевдокласса lang и его значения quotes - кавычки. Эта цитата создана с помощью тега логического форматирования текста : Лед тронулся! господа присяжные заседатели.. Остап Бендер. 12 стульев. - обычно браузерами она отображается курсивом. Второе призвание такого вида цитаты это выполнение роли сноски на другой документ. А эта цитата создана с помощью тега физического форматирования текста : Лед тронулся! господа присяжные заседатели.. - в основном тексте она выделяется отступами и переносами строк, как правило, такой цитатой помечают длинные куски текста взятые из других источников. Такие вот различия.. Тег Обозначает текст, который выводится на экран в результате работы какой-либо программы. Обычно браузерами отображается моноширинным шрифтом. В процессе решения задачи 2+2 программа выдаст ответ: 4 Тег Выделяет особенно важный фрагмент текста. Обычно отображается полужирным. Как создать сайт? - узнай на Вебремесло.ру!! Тег Выделяет текст, как переменную в работе какой либо программы. Обычно браузерами отображается курсивом. Данная функция использует переменную $count Ну вот собственно и все теги созданные для логической разметки текста. Примеры показывать не стану, думаю и так всё понятно, а вот несколько полезных советов по разметке текста в документе дам. Полезные советы: · Стиль всех тегов как логического, так и физического форматирования текста, великолепно настраивается с помощью средств CSS! Мой Вам совет учите CSS: (http://www.webremeslo.ru/css/glava0.html) , если до этого момента ещё незнакомы с ним. При использовании свойств CSS в работе с текстом Вы забудете про проблему кроссбраузерности т. е. Ваш текст будет отображаться во всех браузерах именно так как нужно Вам, а не так как вздумается браузеру. Кроме того СSS открывает куда более широкие возможности связанные как со стилем текста, так и с дизайном сайта в целом. · Старайтесь правильно размечать текст на страницах Вашего сайта.. а именно: Для начала, разбейте весь Ваш текст на параграфы с помощью тега - это облегчит чтение текста как для людей так и для программ, кроме того, позволит Вам в дальнейшем, легко управлять текстом с помощью CSS. Вообще старайтесь не оставлять "голые" слова и предложения, не взятые в какой либо тег форматирования текста. Соблюдайте значимость заголовков - т. е. допустим заголовок страницы берите в тег подзаголовки в тег еще менее значимые подзаголовочки в тег и т. д. В идеале на странице должен быть всего один заголовок , потом текст разбивается несколькими и далее по значимости заголовков. Используйте теги логической разметки лишь там где они действительно необходимы т. е. не стоет например выделять аббревиатуру с помощью цитаты и наоборот.. на то она и логика что бы всё было логично!! Используйте и в тех случаях, если Вы хотите акцентировать внимание на тексте не только людей, но поисковых систем, в иных ситуациях используйте и . · Когда выучите CSS забудьте и выкиньте из головы тег и все его атрибуты!! Им уже давно никто не пользуется, ну за редким исключением конечно.. Кроме рассмотренных способов форматирования, также имеется так называемое логическое форматирование текста. Логическое форматирование текста показывает намерение автора, а не сам вид текста. Другими словами, если автор хочет показать, что текст является цитатой, то он его выделяет одним стилем, а последующий текст другим стилем. Теги логического форматирования: ..-контейнер для цитат. При этом текст выделяется курсивом. ..- контейнер для программного кода ..- контейнер для определений терминов ..-текст, на который должен обратить внимание посетитель сайта, так называемый контейнер акцентирования. ..-указывает на то, что текст, заключённый между этими тегами должен быть введён с клавиатуры. ..- контейнер для примеров чего-либо .. контейнер для текста, который необходимо выделить. .. контейнер для имён переменных Тег предварительного форматирования . Данный тег отображает текст заключённый внутри него, так как он выглядит в исходном коде, т.е. в блокноте. этот текст будет отображен в окне броузера так, как он написан здесь обычно этот текст применяют в случаях, когда нужно показать текст программного кода, например написанного на языке Delphi. Самостоятельная работа Задание : 1. Перепишите способы форматирования в отчет. 2. Оформите сайт, используя атрибуты тега , проверьте, как работают атрибут тега И тег < CENTER> и запишите в отчет результаты. 3. Добавьте в сайт несколько заголовков разной величины и запишите в отчет их действие. 4. В окне сайта отобразите несколько раз формулу X 0 =y 2 +3. 5. Отредактируйте свою страницу используя тег и вставку специальных символов. 6. Проверьте работу тегов логического форматирования. 7. Приложите к отчету листинг готового html-документа. Лабораторная работа № 3 Использование объектов Цель: освоить теги html, синтаксис языка Результат обучения: Студент должен научиться использовать гиперссылки, вставлять разделители, бегущую строку, создавать списки. Ход работы Атрибуты тега О теге , обозначающем тело (основную часть) документа Html, мы уже говорили в предыдущих лабораторных работах. Необходимо добавить лишь то, что в общем виде синтаксис записи тега со семи допустимыми атрибутами выглядит так: тело документа Атрибут background позволяет поместить дизайнеру некий фоновый рисунок, записав в качестве URL его адрес. Допускается просто указывать имя графического файла, если он хранится в той же директории, что и использующий его Html файл. Данное изображение может иметь любой размер, поскольку при интерпретации кода оно многократно повторяется, заполняя все доступное пространство в окне броузера. Атрибут text позволяет задать цвет текста для всего документа в целом. Однако, Вы можете изменить цвет участка текста путем использования команды с атрибутом . Атрибут bgcolor используется для назначения фонового цвета всему документу. Атрибуты background и bgcolor не исключают друг друга, однако у первого имеется приоритет. Это означает, что в случае, когда заданы оба эти атрибуты, сначала выполняется заливка web-страницы цветом, поверх которого помещается изображение. Атрибут link дает мастеру возможность назначить цвет не посещенной гиперссылки, т.е. ссылки, к которой еще не обращались. По умолчанию ей присваивается значение "blue" Атрибут alink определяет цвет активной гиперссылки, который она принимает с момента нажатия на нее курсором до момента загрузки вызываемого ею ресурса. По умолчанию данный атрибут также имеет значение "purple". Списки Маркированные и нумерованные списки были разработаны для отображения упорядоченной информации в виде позиционированных по смыслу вхождений. Например, маркированный список: · Вхождение 1 · Вхождение 2 · Вхождение 3 На языке HTML подобный список можно представить при помощи команды : Вхождение 1 Вхождение 2 Вхождение 3 Атрибут type позволяет программисту управлять буллет-стилем (т.е.внешним видом) и формой обозначающих каждое вхождение меток. Параметр этого атрибута может принимать одно из трех значений: Disc - метки в виде окружностей, заполненных черным цветом Circle - в виде полых окружностей Square - в виде квадратов, заполненных черным цветом. По умолчанию type= "Disc" Нумерованный список можно представить с использованием тега : Вхождение 1 Вхождение 2 Вхождение 3 Атрибут type может принимать одно из следующих значений: "1" - обычные арабские цифры 1,2,3 и т.д. "I" - римские цифры в заглавном регистре I, II, III, IV и т.д. "i" - римские цифры в строчном регистре i, ii, iii и т.д. "А" - символьная маркировка в заглавном регистре А, В, С и т.д. "а" - символьная маркировка в строчном регистре a, b, c и т.д. Атрибут start позволяет задать позицию, с которой следует начать маркировку. Например, если ввести type= "1" start="5", то нумерация начнется с цифры 5. Если ввести type= "А" start="D", то маркировка начнется с символа D. По умолчанию значение атрибута type принимается как "1", нумерация начинается с первого элемента в каждом из типов маркировки. Возможно создание так называемых вложенных списков, реализуемых посредством размещения одной пары тегов в другой. Например, для создания списка: 1. Вхождение 1 · Вхождение 1-а · Вхождение 1-б 2. Вхождение 2 · Вхождение 2-а · Вхождение 2-б Введем следующий набор команд Вхождение 1 Вхождение 1-а Вхождение 1-б Вхождение 2 Вхождение 1-а Вхождение 1-б Следует отметить, что тег может включать те же атрибуты, что и теги самих списков и . То есть, если необходимо одно из вхождений пометить другим маркером, то для данного элемента можно записать тег: Вхождение Помимо нумерованных и маркированных списков язык HTML позволяет создавать списки определений, для чего применяются команды . Итак, для создания списка Заголовок группы вхождений 1 Вхождение 1-а Вхождение 1-б Заголовок группы вхождений 2 Вхождение 2-а Вхождение 2-б Введем следующее: Заголовок группы вхождений 1 Вхождение 1-а Вхождение 1-б Заголовок группы вхождений 2 Вхождение 2-а Вхождение 2-б Закрывающие теги и списка определений можно опустить. Разделители Для того, чтобы визуально отделить часть объектов html-документов от других, например горизонтальной чертой, применяется тег . Общий синтаксис тега выглядит следующим образом: Атрибут ALIGN определяет положение горизонтальной черты: center, left и right. Атрибут WIDTH определяет длину линии, причем его значение можно задавать либо в пикселях простым целым числом, либо в процентах от ширины экрана при помощи чисел от 1-100 с добавлением символа %. Атрибут SIZE задает толщину линии в пикселях, значение которого - целое число. Атрибут COLOR определяет цвет заливки линии. Например: Очевидно, что команда HR не имеет закрывающего тега. По умолчанию, без указаний атрибутов, броузер отобразит серо-белую вогнутую линию, толщиной в 3 пикселя, длиной во весь экран. Бегущая строка Для задания бегущей строки используется тег: текст бегущей строки с атрибутами: width=”…” – задаёт ширину бегущей строки в пикселях или в процентах от ширины экрана. height=”…” - задаёт высоту бегущей строки в пикселях или в процентах от ширины экрана. bgcolor=”…”- задаёт цвет фона бегущей строки. behavior=”…”-задаёт тип движения бегущей строки и может иметь следующие значения: scroll-циклическая прокрутка из одного конца в другой, slide-текст появляется с одного края и останавливается у другого, alternate-текст перемещается от одного края к другому (маятник). direction=”…”-задаёт направление движения бегущей строки и может иметь следующие значения: left, right, Up,down. scrollamout=”…”задаёт число пикселей, который отделяют один текст от последующего. scrolldelay=”…” – указывает задержку в миллисекундах перед появлением следующего текстового блока. loop=”…”-задаёт число повторений (любое положительное число. По умолчанию или при указании –1 или infinite, броузер будет прокручивать текст бесконечное количество раз. Гиперссылкой может быть текст, изображение, часть изображения. Текст, который является гиперссылкой, выделяется цветом и подчёркивается. Текстовые гиперссылки можно разделить на четыре условных категории: ссылки на документы, ссылки на разделы, ссылки на адрес электронной почты и на файловые объекты. Начнем по порядку. target=”параметр” title=”альтернативный текст”> текст_гиперссылки Атрибут href указывает на адрес страницы, с которой Вы планируете установить гиперсвязь. Этот адрес может быть представлен как в виде полного URL (например, http://www.server.ru/page.html), если целевой документ физически расположен на другом сервере, так и в виде сокращенного URL с указанием пути к искомой страницы в пределах локального сервера (например, “/folder/page.html”). Если искомый документ расположен в одной директории с текущим, в качестве параметра атрибута href достаточно записать его название. Атрибут target содержит директивы, описывающие правила открытия целевого документа в броузере, эти директивы выделяются в коде символом подчеркивания. Например, часто встречающееся значение атрибута target= «_blank» отображает открываемый по ссылке документ в новом окне броузера. Атрибут title предназначен для создания всплывающей подсказки, появляющейся в небольшом прямоугольнике, если пользователь задержит указатель мыши над гиперссылкой на несколько секунд. Иногда возникает необходимость разместить на web-странице гиперссылку не на другой документ, а на расположенный в пределах этой же страницы раздел или участок текста. При активизации подобной гиперссылки броузер «отматывает» таким образом, что искомый раздел или фраза оказываются в верхней его части. Процесс создания ссылки на раздел условно делится на два этапа. Первый – подготовка «закладки» - специальной метки с уникальным в пределах данного документа именем. Для этого, в том участке текста, где необходимо разместить метку, применяется следующая команда: ключевое слово или заголовок раздела Помните, что для задания имени закладки лучше использовать латинские символы. Если Вы хотите разместить ссылку на раздел другого документа, описанный выше алгоритм сохраняется, за исключением того, что в вызывающем теге перед именем закладки указывается URL документа. В этом случае рекомендуется использовать атрибут TARGET с параметром _BLANK. Подобная команда в обобщенном виде будет выглядеть следующим образом: