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

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

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

Теги логического форматирования:

..-контейнер для цитат. При этом текст выделяется курсивом.

..- контейнер для программного кода

..- контейнер для определений терминов

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

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

..- контейнер для примеров чего-либо

.. контейнер для текста, который необходимо выделить.

.. контейнер для имён переменных

Тег предварительного форматирования

.

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

 
 

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

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

  

  

  

  

Научная статья.
 
 
 

 Если разбавить дистиллированную воду Н
 2
О сорока процентами этилового спирта С
 2
Н
 5
ОН то получится жидкость в 40
о
 более известную широкой публике под названием 
- водка.
 
 

 Впервые данную пропорцию 
придлажил
 предложил 
Дмитрий Иванович МЕНДЕЛЕЕВ.
 
 
 
 

Распитие спиртных напитков вредит вашему здоровью.
 

  

 

Основная задача тегов физического форматирования текста это выполнение сугубо декоративных функций.
Однако если Вы изучали , то наверняка обратили внимание что выше перечисленные теги это далеко не все инструменты для работы с текстом! А если Вы изучали справочник скрупулезно и пристально, то наверное заметили что некоторые теги выполняют одни и те же действия над текстом..
Например, чем отличается тег 
 от тега 
 ? или какая разница между  и 
 ? ведь результат и там и там одинаков!

Так да не так.. отличия есть.. и они достаточно существенные!!..
Логическая разметка текста.
Прежде чем рассказывать о новых тегах расскажу, о том, что следует подразумевать под фразой: "логическая разметка документа".
Под логической разметкой документа, прежде всего, принято понимать разметку текста тегами направленную на удобство работы поисковых систем и других программ, которые работают с данным документом, а так же придавать тексту в документе некий смысл. Так вот программам абсолютно по барабану как выглядит Ваш документ, красивый он или нет, какой стиль шрифта и текста используется и.т.д. программы в первую очередь пытаются найти логику на Вашей страничке, что бы в дальнейшем использовать её по своему усмотрению, например для более релевантной поисковой выдачи или для автоматического составления содержания Вашего документа...
Теперь давайте опять вернемся к вопросу выше: "Чем отличается тег 
 от тега 
 ?" - казалось бы какая разница ведь текст и там и там будет отображаться курсивом.. всё дело в том что тег 
 - (курсив) - является тегом физического форматирования текста и предназначен в первую очередь для людей, а тег 
 (особенно важный текст) - является тегом логического формирования текста и предназначен для машин! А то, что текст, взятый в тег 
 , обычно в браузерах отображается курсивом - это всего лишь, скажем так "мода" и придумка браузеров.

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

 - это облегчит чтение текста как для людей так и для программ, кроме того, позволит Вам в дальнейшем, легко управлять текстом с помощью CSS. Вообще старайтесь не оставлять "голые" слова и предложения, не взятые в какой либо тег форматирования текста.
Соблюдайте значимость заголовков 
-

 т. е. допустим заголовок страницы берите в тег 

 подзаголовки в тег 

 еще менее значимые подзаголовочки в тег 

 и т. д. В идеале на странице должен быть всего один заголовок 

 , потом текст разбивается несколькими 

 и далее по значимости заголовков.

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


Хотя язык HTML включает теги для достижения различных шрифтовых эффектов (полужирный шрифт, курсив, подчеркнутый шрифт), не все браузеры их поддерживают. Однако все браузеры поддерживают тот или иной способ выделения текста. Поэтому использование логического форматирования текста в любом случае приведет к выделению программой просмотра различных частей текста и выявит структуру документа.
Говоря о логической разметке текста, можно выделить две основные части:
Выделение заголовков в документе;
 логическое выделение элементов текста.
 
Название документа, задаваемое с помощью тега 
 
 
 
 Заголовок 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
 - меняет цвет линии

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

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

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