Всем привет! В предыдущих статьях мы узнали много нового о ссылках и картинках. Теперь пора переходить к тексту. В этой статье я расскажу про наиболее популярные теги html, которые используются для того, чтобы предать тексту определенный вид.
Итак, для начала создаем в блокноте пустой текстовый документ. После этого меняем его расширение с txt на html. Открываем его с одновременно с помощью браузера и текстового редактора, например, того же блокнота. Я советую использовать для этих целей программу Macromedia Dreamweaver или Notepad++ .
С помощью редактора мы будем наш документ редактировать, с помощью браузера просматривать, что у нас получилось.
Для того, чтобы изменения вступили в силу необходимо сначала сохранить изменения в редакторе, нажав на дискетку или комбинацию клавиш Ctr+S, а затем обновить этот же документ в браузере.
Заголовки текста разного уровня
Заголовки это не только важная часть оформления текста, но и один из инструментов внутренней оптимизации. В html тексте заголовки задают теги
Поместите здесь текст, который вы хотите сделать заголовком
Цифра 2 рядом с буквой h означает уровень заголовка. Всего уровней 6. Первый уровень – название статьи. Все остальные – заголовки разделов и подразделов.
Жирный, подчеркнутый текст, курсив
Теги , , легко решают эту проблему
Так в html можно задать жирный текст
Вот так задается курсив
Вот это будет подчеркнутый текст
Если нам нужно применить к тексту одновременно несколько свойств, просто вкладываем теги один в другой.
Жирный курсив
Изменяем размер шрифта
Размер шрифта текста задается в html с помощью тега , у которого есть атрибут «size».
Размер шрифта 5
Как поменять цвет текста
Цвет текста задается тем же самым тегом с помощью атрибута «color»
Текст красного цвета
Текст в таком виде как он был набран
У html есть довольно неприятная особенность. Если вы набрали текст, в котором есть несколько пробелов, идущих подряд, друг за другом, то браузер покажет только один пробел. В некоторых случаях необходимо отобразить текст именно в таком виде, как он был набран. Для этого используется тег
Этот текст будет выглядеть так как он набран
Ну вот, пожалуй, и все. Естественно, возможности для видоизменения текста с помощью тегов html довольно ограничены. В большинстве случаев этого не хватает. В этом случае, рекомендуется использовать css. CSS это аббревиатура, которая в переводе на русский означает каскадные таблицы стилей. Подробнее об этом мы поговорим в одном из следующих уроков.
Зачеркнутый текст
Вообще говоря в html можно задать зачеркнутый текст с помощью сразу трех разных тегов. Теги и вполне корректно отображаются во всех браузерах, тем не менее, они не рекомендуются к использованию. Они даже не включены в спецификации XHTML и HTML5. Поэтому для создания зачеркнутого текста я рекомендую использовать тег .
Зачеркнутый текст
Визуально результат использования этого тега ничем не будет отличаться от первых двух. Тем не менее, он несет в себе несколько иной смысл. Предполагается, что этот тег используется для вычеркивания устаревшей или неправильной информации. У данного тега есть 2 атрибута:
cite - предназначен для того, чтобы содержать ссылку на документ, в котором содержится причина удаления данной информации
datetime - предназначен для того, чтобы хранить время последнего редактирования информации.
До сих пор для зачеркивания текста в HTML-коде широко применяется тег
, который является сокращенным написанием
тега
. Среди множества значений
английского слова «strike» имеются «черкать» и «вычеркивать». Вот как выглядят
результаты использования этих двух тегов:
текст, зачеркнутый с помощью тега→ текст, зачеркнутый с помощью тега
Как видим, результат идентичен. Все современные браузеры понимают эти теги, но, тем не менее, оба они нерекомендованы для использования. В спецификациях XHTML и HTML5 они вообще отсутствуют. Да и в спецификации HTML 4.0 тоже описываются как нежелательные.
Причина этого состоит в том, что теги и
относятся к классу так называемых тегов физического
форматирования. То есть они не несут какой либо смысловой нагрузки и всего лишь
определяют стиль отображения текста. Однако сам по себе язык разметки HTML
предназначен именно для семантической разметки текста. А для визуального
форматирования предназначены таблицы стилей CSS.
И хотя вам могут быть безразличны такие академические подробности, но все же
не пользуйтесь этими устаревшими тегами. Если нужно зачеркнуть текст в HTML,
лучше использовать тег
. Вот результат
его применения:
текст, зачеркнутый с помощью тега→ текст, зачеркнутый с помощью тега
Как видим, визуально нет никакой разницы между ,
и , но по смыслу – очень
даже большая разница.
Тег предназначен для того, чтобы отмечать удаленные
строки текста. То есть он несет определенную логическую информацию о тексте и
относится к классу так называемых семантических тегов HTML. Форматирование
текста как зачеркнутого при применении – это не
назначение этого тега а всего лишь следствие его логической сути.
Еще раз повторюсь: если вам безразлична идеология языка разметки HTML и важен
только визуальный эффект, просто считайте, что для зачеркивания текста
предназначен тег а не или
. Хотя бы из таких же соображений, по которым пишете
«профеССионализм» а не «профеСионализм».
Кроме того, тег более функционален, чем
и . Он умеет передавать
дополнительную информацию о тексте с помощью атрибутов «cite» и «datetime»:
- Атрибут «cite » предназначен содержать ссылку на документ, в котором приведена причина удаления данного текста и, может быть, другие подробности о его редактировании.
- Атрибут «datetime » предназначен указывать дату и время редактирования данного текста.
Что же делать, если вам нужно вывести текст как зачеркнутый, но помечать его как удаленный не хотите? Как уже было упомянуто выше, вам поможет CSS. Более конкретно – свойство «text-decoration», которое имеет значение «line-through». Вот так, например, это можно сделать:
- текст, зачеркнутый средствами CSS → текст, зачеркнутый средствами CSS
Чересчур много кода? Согласен. Поэтому можно его уменьшить вынеся инструкции CSS в отдельный файл. В нем можно, например, следующим образом описать класс зачеркнутого текста:
S { text-decoration: line-through; } Это позволит писать в HTML-коде следующим образом:
- текст, зачеркнутый средствами CSS → текст, зачеркнутый средствами CSS
Этот код также длинее, чем в случае с , но если желаете
приобщиться к семантическому Вебу, с подобной избыточностью придется
примириться. Удачного вам зачеркивания!
Предыдущие публикации:
Описание
Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
Синтаксис
text-decoration: [ blink || line-through || overline || underline ] | none | inherit
Значения
blink Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию. line-through Создает перечеркнутый текст (пример ). overline Линия проходит над текстом (пример ). underline Устанавливает подчеркнутый текст (пример ). none Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию. inherit Значение наследуется у родителя.HTML5 CSS2.1 IE Cr Op Sa Fx
Стратегическое нападение
Объектная модель
document.getElementById("elementID ").style.textDecoration
document.getElementById("elementID ").style.textDecorationBlink
document.getElementById("elementID ").style.textDecorationLineThrough
document.getElementById("elementID ").style.textDecorationNone
document.getElementById("elementID ").style.textDecorationOverLine
document.getElementById("elementID ").style.textDecorationUnderline
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit . Линия полученная с помощью значения line-through в IE7 располагается выше, чем в других браузерах; в IE8 эта ошибка исправлена.
CSS позволяет производить самые разнообразные операции, связанные с декоративным украшением всей страницы. Особое внимание уделяется тексту, который в большинстве случаев заполняет большую часть всех сайтов. Сегодня мы с вами рассмотрим одно интересное свойство: надчеркнутый, подчеркнутый и зачеркнутый текст. Все эти эффекты устанавливаются с помощью одного правила CSS.
Присвоение
Подчеркнуть и зачеркнуть текст в CSS можно с помощью команды «text-decoration». Эффект будет зависеть от того, какое указано значение. CSS был придуман, чтобы разделить логическую и структурную часть веб-страницы. Но до появления каскадных таблиц стилей использовались HTML-теги, которые имели аналогичное значение. К примеру, такой элемент, как позволяет вывести зачеркнутый текст. Сейчас данный тег признан нежелательным, и его применение автоматически сделает ваш код страницы невалидным. Хотя при этом элемент до сих пор поддерживается всеми современными браузерами и используется некоторыми разработчиками. Но вернемся к CSS. Команда «text-decoration» может иметь следующие значения:
- Underline. Назначив данное значение, вы получите
- Overline. Линия будет проходить над определенным фрагментом страницы.
- Line-through. Создает перечеркнутый или зачеркнутый текст.
- Blink. Выделенный фрагмент документа будет периодически исчезать и снова появляться.
- Также есть значения «none» и «inherit». Первое отменяет все эффекты, а второе приказывает наследовать свойство у родительского элемента.
Предназначение
Казалось бы, что в CSS зачеркнутый текст и подобные эффекты служат только для украшения текста. В большинстве случаев это утверждение правдивое. Но иногда стоит задуматься над вопросом: для чего создавались такие элементы? К примеру, уже устаревший тег «strike» использовался для обозначения неверной или старой информации. Читатели, увидев перечеркнутый текст, понимают скрытое значение такого обозначения. Подчеркнутые слова всегда сразу же выделяются из общего потока. Поэтому такой эффект необходимо использовать для выделения важной информации. Значение «blink», которое делает текст мигающим, используется довольно редко, так как среди программистов принято считать такой эффект неприемлемым. Ведь мало кому из ваших читателей нравятся мелькающие символы, которые будут постоянно их отвлекать. Ну а значение «overline» используется только для украшения текста.
Особенности
Хотя все значения свойства «text-decoration» входят в спецификацию версий каскадных таблиц, все же некоторые значения не поддерживаются современными браузерами. Например, мигающий текст не будет виден в IE. Браузер Google Chrome не воспринимает некоторые значения. Мобильные платформы неполноценно поддерживают данное свойство.
Заключение
Такие эффекты, как зачеркнутый текст и другие схожие значения, применяются довольно часто на просторах Интернета. Их использование позволяет правильно выразить основную идею автора, помогая концентрировать внимание читателей на нужной части текста. Но не стоит слишком усердствовать и при любой возможности применять свойство «text-decoration». Ведь излишнее украшение текста может навредить вам и вашим читателям.