Как настроить смартфоны и ПК. Информационный портал

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

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

Буду перечислять..

Тег

Выделяет в тексте аббревиатуру. Браузерами обычно подчеркивается пунктирной линией.

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 забудьте и выкиньте из головы тег и все его атрибуты!! Им уже давно никто не пользуется, ну за редким исключением конечно..

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

Говоря о логической разметке текста, можно выделить две основные части:

Выделение заголовков в документе; логическое выделение элементов текста.

Название документа, задаваемое с помощью тега , не выводится на экран как часть документа. Чтобы отобразить название используется один из тегов заголовка. Заголовки в типичном документе разделяются по уровням. Язык HTML позволяет задать шесть уровней заголовков: H1 (заголовок первого уровня), Н2, Н3, H4, Н5 и H6. Заголовок первого уровня имеет обычно больший размер и насыщенность по сравнению с заголовком второго уровня.</p> <p>Если вы посмотрите на эту главу, то "Логическое форматирование" -- заголовок третьего уровня, "Форматирование гипертекста" -- второго, а "Основы языка HTML" -- первого. На практике заголовки четвертого и далее уровней встречаются лишь в очень больших документах.</p> <p><b>Пример </b></p> <p><HTML> <HEAD> <TITLE> Заголовки

Заголовок 1 уровня

Заголовок 2 уровня

Заголовок 3 уровня

Заголовок 4 уровня

Заголовок 5 уровня
Заголовок 6 уровня

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

Теги заголовков поддерживают атрибут ALIGN, действие которого аналогично действию такого же атрибута тега выделения абзаца.

Элементы логического выделения фрагментов текста, а также возможное оформление каждого из них приведены в таблице.

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

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

Для выделения длинных цитат из основного текста в HTML существует тег

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

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

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

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

Для форматирования текста 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 - меняет цвет линии

Тег

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

Прежде всего, определим, что такое логическое форматирование документа. Под логическим форматированием подразумевается использование специальных тегов 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 .

Лучшие статьи по теме