В этой главе мы снова будем работать с текстом, и в отличие от материала, изложенного во второй главе: посмотрим на некоторые вещи под другим углом, а так же поговорим о ранее не вошедших в этот учебник тегах, с помощью которых так же можно форматировать текст на страницах сайта.
О тегах физического форматирования текста речь в этом учебнике шла ранее, поэтому повторятся, не стану, а просто перечислю их:
, , , , , , , , , ,
, ,
…
Всё это теги физического форматирования текста.
Почему их так назвали? Да все просто.. потому что данные теги способны тем или иным способом физически воздействовать на текст.. делать его жирным, курсивом, маленьким, большим.. и т. д. Заключив текст, в какой либо тег из вышеперечисленных, мы получаем ожидаемый результат, который описан в спецификации 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
Тег
Выделяет особенно важный фрагмент текста. Обычно отображается полужирным.
Как создать сайт? - узнай на Вебремесло.ру!!
Тег
Выделяет текст, как переменную в работе какой либо программы. Обычно браузерами отображается курсивом.
Ну вот собственно и все теги созданные для логической разметки текста. Примеры показывать не стану, думаю и так всё понятно, а вот несколько полезных советов по разметке текста в документе дам.
Стиль всех тегов как логического, так и физического форматирования текста, великолепно настраивается с помощью средств CSS! Мой Вам совет , если до этого момента ещё незнакомы с ним. При использовании свойств CSS в работе с текстом Вы забудете про проблему кроссбраузерности т. е. Ваш текст будет отображаться во всех браузерах именно так как нужно Вам, а не так как вздумается браузеру. Кроме того СSS открывает куда более широкие возможности связанные как со стилем текста, так и с дизайном сайта в целом.
Старайтесь правильно размечать текст на страницах Вашего сайта.. а именно:
Для начала, разбейте весь Ваш текст на параграфы с помощью тега
- это облегчит чтение текста как для людей так и для программ, кроме того, позволит Вам в дальнейшем, легко управлять текстом с помощью CSS. Вообще старайтесь не оставлять "голые" слова и предложения, не взятые в какой либо тег форматирования текста.
Соблюдайте значимость заголовков
-
т. е. допустим заголовок страницы берите в тег
подзаголовки в тег
еще менее значимые подзаголовочки в тег
и т. д. В идеале на странице должен быть всего один заголовок
, потом текст разбивается несколькими
и далее по значимости заголовков.
Используйте теги логической разметки лишь там где они действительно необходимы т. е. не стоит например выделять аббревиатуру с помощью цитаты и наоборот.. на то она и логика что бы всё было логично!!
Используйте и в тех случаях, если Вы хотите акцентировать внимание на тексте не только людей, но поисковых систем, в иных ситуациях используйте и .
Когда выучите CSS забудьте и выкиньте из головы тег и все его атрибуты!! Им уже давно никто не пользуется, ну за редким исключением конечно..
Разобравшись с сутью и предназначением логической разметки текста настало время познакомить Вас с тегами которые способны разбавить сухой текст неким смыслом.
Буду перечислять..
Тег
Выделяет в тексте аббревиатуру. Браузерами обычно подчеркивается пунктирной линией.
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-документов предусмотрена целая группа тэгов, которую можно условно разделить на тэги логического
и физического
форматирования.
Тэги логического форматирования обозначают (своими именами) структурные типы своих текстовых фрагментов, такие, например, как программный код
(тэг
), цитата
(тэг <С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
- меняет цвет линии
Тег
<
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-документов в
будущем.
Таблицы
достаточно широко применяются в
электронной документации, причем для
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 может использоваться и
для форматирования данных внутри
каждой ячейки таблицы, например:
Фамилия
Оценка
Иванов A.H.
Сергеев И.Д.
5
Лавров В.В.
3
Пример
отображения браузером документа,
включающего в себя приведенный выше
фрагмент, показан на рис. 2.8.
На рисунке хорошо видна рамка
вокругтаблицы и то, что таблица
выровнена влево, а справа обтекается
текстом. В качестве текста использован
фрагмент второго абзаца, начинающегося
на данной странице. Следует обратить
внимание на то, что хотя вся таблица
выровнена влево, данные в каждой
строке выравниваются вправо. Формально
можно было бы в каждой ячейке выравнивать
текст по-своему. Однако визуально это
выглядело бы очень неприглядно.
Для качественного
дизайна полосы данные во всех ячейках
столбца таблицы должны выравниваться
одинаково, т. е. в примере на рис. 2.8возможно было бы оставить первый
столбец неизменным, а данные во втором
выровнять влево (или даже по центру).
Параметр
BACKGROUND, который уже был показан в
примере, приведенном выше, также может
использоваться как в теге <ТАВLЕ>,
так и в тегах <ТН> и
, определяющих
характеристики отдельных ячеек
таблицы. Во всех случаях он определяет
фоновый рисунок с помощью параметра
HREF. В последней версии спецификации
HTML в теге <ТАВLЕ> появился параметр
COLS, задающий общее число колонок в
таблице. Эта дополнительная информация
ускоряет процесс построения таблицы
браузером.
При создании
заголовочной части таблицы, реже
боковика и прографки (основной части
таблицы, где размещаются данные),
возникает потребность в объединении
нескольких ячеек по горизонтали (в
строке) или по вертикали в единое
целое. Для этого используются параметры
ROWSPAN и COLSPAN, первый из которых объединяет
несколько строк, а второй - столбцов
в одну ячейку. Пример описания такой
таблицы приводится ниже.
Объединение ячеек в заголовочной
части
3aголовок
Заголовок 2
Заголовок
2-1<ТН>Заголовок 2-2
1
2
3
Показанный ниже рис. 2.9построен на основании HTML-документа,
в теле которого содержится приведенный
выше контейнер
и
со
всем его содержимым. По сравнению с
таблицей, показанной на рис. 2.8,
здесь с помощью тега
добавлен
тематический заголовок, выровненный
по центру таблицы. В таблице хорошо
видны рамки ячеек и рамка вокруг
таблицы в целом. В ячейке «Заголовок
1» объединены две строки, а в ячейке
«Заголовок 2» - два столбца, что
соответствует исходному HTML-коду. В
третьей строке, как это часто делают
для длинных узких таблиц, указаны
номера колонок, что позволяет при
переносе на следующую полосу не
повторять заголовка целиком. Отметим,
что используя параметры ROWSPAN и COLSPAN
можно составить многоуровневые
заголовки таблиц любой степени
сложности
