КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Теги логического форматирования текста
|
|
|
|
Разобравшись с сутью и предназначением логической разметки текста настало время познакомить Вас с тегами которые способны разбавить сухой текст неким смыслом.
Буду перечислять..
Тег <abbr>
Выделяет в тексте аббревиатуру. Браузерами обычно подчеркивается пунктирной линией.
<abbr> CSS </abbr>
Практически ко всем тегам применим атрибут title - всплывающая подсказка, так вот если Вы в тексте выделяете некую аббревиатуру, старайтесь давать к ней расшифровку, используя данный атрибут.
<abbr title="Cascading Style Sheets">CSS </abbr> позволит Вам без труда изменить стиль любого тега логического форматирования текста!
Тег <acronym>
Данный тег выделяет в тексте акроним. Акроним это почти то же самое что и аббревиатура, только образованная из начальных букв, слов или словосочетаний, произносимая как единое слово, а не побуквенно.
Вступай в <acronym title="коммунистический союз молодёжи">комсомол </acronym>!!
Так же как и с аббревиатурой для расшифровки текста желательно использовать атрибут title.
Тег <address>
Указывает автора документа и его адрес. Обычно отображается курсивом. Предназначен для поисковых систем для сбора информации об авторе его адресе и прочей информации владельца/цев сайта.
<address> Вася Пупкин г. Урюпинск Макаронная фабрика 2010г. </address>
Тег <cite>
Выделяет в тексте цитату или сноску на другой документ. Обычно браузеры отображают её курсивом.
Как сказал Остап Бендер <cite> Лед тронулся! господа присяжные заседатели! </cite>
Тег <code>
Отмечает текст как некий программный код. Обычно отображается моноширинным шрифтом.
<code> function() </code> - так обозначается функция в PHP
Тег <del>
Выделяет удалённый текст в новой версии документа. Выделенный текст станет перечёркнутым.
Напоминает теги физического форматирования <strike> и сокращённый <s> - перечёркнутый текст.
Использование тега <del>, более предпочтительно, так как помимо того, что он разбавляет текст логикой еще и заменяет собой теги <strike> и <s>, которые помечены спецификацией 4.01 как нежелательные.
<del> Старая цена 1000р. </del> - Новая 999 р.!!!
Тег <dfn>
Выделяет текст как определение. Как правило, когда в тексте встречается новый термин, авторы выделяют его курсивом и дают его определение, собственно для этого и нужен тег <dfn>
<dfn> Акроним </dfn> - аббревиатура, образованная из начальных букв, слов или словосочетаний, произносимая как единое слово, а не побуквенно.
Тег <ins>
Выделяет новый текст в новой версии документа. Выделенный текст в большинстве браузеров станет подчёркнутым.
Противоположен по значению тегу <del> с ним же в паре обычно он и используется.
<del>Старая цена 1000р.</del> - <ins> Новая 999 р. </ins>!!!
Тег <em>
Выделяет особенно важный фрагмент текста. Обычно отображается курсивом.
<em> Как создать сайт? </em> - узнай на Вебремесло.ру!!
Тег <kbd>
От английского keyboard - клавиатура. Указывает текст вводимый с клавиатуры, или для названия клавиш. Обычно отображается моноширинным шрифтом.
Нажмите <kbd> Ctrl + Z </kbd> для того чтобы отменить последнее действие.
Тег <q>
Выделяет в тексте цитату. В отличие от тега <cite> цитата обозначенная тегом <q> автоматически берётся браузерами в кавычки.
Как сказал Остап Бендер <q> Лед тронулся! господа присяжные заседатели! </q>
Кстати, есть еще и тег физического форматирования текста <blockquote> данный тег тоже помечает текст как цитату и при этом выделяет его отступами и переносами строк от остального текста.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Цитаты</title>
</head>
<body>
<p>Эта цитата создана с помощью тега <strong>логического</strong> форматирования текста <code><b><q></b></code>: <q>Лед тронулся! господа присяжные заседатели..</q> - браузеры автоматически берут такую цитату в кавычки. Кстати выходя за рамки темы, видом кавычек легко управлять с помощью <abbr title="Cascading Style Sheets">CSS</abbr> псевдокласса <code>lang</code> и его значения <code>quotes</code> - кавычки.</p>
<p>Эта цитата создана с помощью тега <strong>логического</strong> форматирования текста <code><b><cite></b></code>: <cite>Лед тронулся! господа присяжные заседатели.. <a href="#">Остап Бендер. 12 стульев.</a></cite> - обычно браузерами она отображается курсивом. Второе призвание такого вида цитаты это выполнение роли сноски на другой документ.</p>
<p>А эта цитата создана с помощью тега <strong>физического</strong> форматирования текста <code><b><blockquote></b></code>: <blockquote>Лед тронулся! господа присяжные заседатели..</blockquote> - в основном тексте она выделяется отступами и переносами строк, как правило, такой цитатой помечают длинные куски текста взятые из других источников.</p>
</body>
</html>
Такие вот различия..
Тег <samp>
Обозначает текст, который выводится на экран в результате работы какой-либо программы. Обычно браузерами отображается моноширинным шрифтом.
В процессе решения задачи 2+2 программа выдаст ответ: <samp> 4 </samp>
Тег <strong>
Выделяет особенно важный фрагмент текста. Обычно отображается полужирным.
<strong> Как создать сайт? </strong> - узнай на Вебремесло.ру!!
Тег <var>
Выделяет текст, как переменную в работе какой либо программы. Обычно браузерами отображается курсивом.
Данная функция использует переменную <var> $count </var>
Ну вот собственно и все теги созданные для логической разметки текста. Примеры показывать не стану, думаю и так всё понятно, а вот несколько полезных советов по разметке текста в документе дам.
Полезные советы:
· Стиль всех тегов как логического, так и физического форматирования текста, великолепно настраивается с помощью средств CSS! Мой Вам совет учите CSS: (http://www.webremeslo.ru/css/glava0.html), если до этого момента ещё незнакомы с ним. При использовании свойств CSS в работе с текстом Вы забудете про проблему кроссбраузерности т. е. Ваш текст будет отображаться во всех браузерах именно так как нужно Вам, а не так как вздумается браузеру. Кроме того СSS открывает куда более широкие возможности связанные как со стилем текста, так и с дизайном сайта в целом.
· Старайтесь правильно размечать текст на страницах Вашего сайта.. а именно:
Для начала, разбейте весь Ваш текст на параграфы с помощью тега <p> - это облегчит чтение текста как для людей так и для программ, кроме того, позволит Вам в дальнейшем, легко управлять текстом с помощью CSS. Вообще старайтесь не оставлять "голые" слова и предложения, не взятые в какой либо тег форматирования текста.
Соблюдайте значимость заголовков <h1> - <h6> т. е. допустим заголовок страницы берите в тег <h1> подзаголовки в тег <h2> еще менее значимые подзаголовочки в тег <h3> и т. д. В идеале на странице должен быть всего один заголовок <h1>, потом текст разбивается несколькими <h2> и далее по значимости заголовков.
Используйте теги логической разметки лишь там где они действительно необходимы т. е. не стоет например выделять аббревиатуру с помощью цитаты и наоборот.. на то она и логика что бы всё было логично!!
Используйте <em> и <strong> в тех случаях, если Вы хотите акцентировать внимание на тексте не только людей, но поисковых систем, в иных ситуациях используйте <b> и <i>.
· Когда выучите CSS забудьте и выкиньте из головы тег <font> и все его атрибуты!! Им уже давно никто не пользуется, ну за редким исключением конечно..
|
|
|
|
|
Дата добавления: 2014-10-31; Просмотров: 429; Нарушение авторских прав?; Мы поможем в написании вашей работы!