Оглавление
- Введение
- От главы коллектива авторов
- От издательства
- Глава 1. Правила построения HTML-страниц
- 1.1. Общие понятия HTML
- Элемент
- Атрибут
- 1.2. Структура HTML-документа
- Объявление типа документа
- Элемент HTML
- Элемент HEAD
- Элемент TITLE
- Элемент META
- Элемент STYLE
- Элемент LINK
- Элемент SCRIPT
- Элемент BASE
- Элемент BODY
- Комментарии
- Резюме
- Глава 2. Ввод и оформление текста
- 2.1. Создание заголовков
- 2.2. Создание абзацев
- 2.3. Создание обрывов строк
- 2.4. Создание списков
- Маркированный список
- Нумерованный список
- Список определений
- Создание вложенных списков
- 2.5. Ссылки
- Внешние ссылки
- Внутренние ссылки
- Общие моменты
- 2.6. Форматирование текста
- Логические элементы для форматирования
- Физические элементы для форматирования
- Элементы для форматирования больших блоков текста
- Вложение элементов
- Резюме
- Глава 3. Создание таблиц
- 3.1. Что такое таблица
- 3.2. Создание тела таблицы
- 3.3. Ячейки таблицы
- 3.4. Граница таблицы
- 3.5. Ширина и высота таблицы и ячеек
- 3.6. Группировка строк и столбцов
- 3.7. Выравнивание таблицы и содержимого ячеек
- 3.8. Объединение ячеек таблицы
- 3.9. Установка фонового цвета или рисунка ячейки
- 3.10. Создание вложенных таблиц
- Резюме
- Глава 4. Добавление изображений и мультимедиа
- 4.1. Встраивание изображений
- Размер изображения
- Выравнивание изображения
- Конец ознакомительного фрагмента
- Главная
- Игорь Квинт
- 📚 Книги
- HTML, XHTML и CSS на 100%
- Читать фрагмент
- Логические элементы для форматированияЛогические элементы для форматирования
Логические элементы для форматирования
Как уже говорилось, логические элементы для форматирования определяют не внешний вид текста, а его тип, и в зависимости от которого браузер применяет тот или иной вид внешнего форматирования. Все элементы, рассматриваемые ниже, являются контейнерами и требуют наличия закрывающего тега.
Некоторые из этих элементов могут вообще не изменять отображение текста, поэтому при их рассмотрении будем делать упор на то, как они определяют значение текста, а не на то, как они его форматируют.
Элемент ABBR определяет текст как аббревиатуру. С помощью атрибута title можно задать всплывающую подсказку с расшифровкой аббревиатуры. При этом поисковые роботы индексируют именно полный вариант расшифровки, определенный в атрибуте title.
Пример:
<abbr title="Научно-исследовательский институт">НИИ</abbr>
Элемент ACRONYM указывает, что текст является акронимом.
Примечание
Акронимы – это некие устоявшиеся сокращения, например СНГ, США и т. п.
Атрибут title позволяет задать расшифровку акронима. Пример:
<acronym>СНГ</acronym>
Элемент CITE отмечает небольшую цитату или сноску, взятую из другого источника. Такой текст обычно отображается курсивом.
Пример:
<cite>Здесь указан источник информации</cite>
Этот элемент указывает на программный код, который может содержать, например, переменные, функции, небольшие куски программы. Такой текст обычно выводится моноширинным шрифтом.
Пример:
Зададим функцию <code> func(int a, char b);</code>
Элемент DEL помечает текст как удаленный и может использоваться при внесении изменений в документы. У этого элемента есть два атрибута: cite должен содержать URL документа, в котором описаны причины удаления фрагмента, а datetime – дату и время удаления фрагмента в формате ГГГГ-ММ-ДДTчч: мм: ccTZD (аббревиатура от Time Zone region with Daylight Saving Time – регион часового пояса с летним временем). Браузеры такой текст отображают как зачеркнутый.
Пример:
<del cite="whydel.html" datetime="2007-10-06T10:11:45+3.00"> Неактуальный фрагмент</del>
Этот элемент выделяет текст как определение. Элемент можно использовать, если новый термин встречается в тексте впервые и тут же дается его определение. Браузер отображает такой текст курсивом.
Пример:
<dfn>Определение</dfn>-описание
Элемент EM выделяет важные фрагменты текста. Браузер отображает такой текст курсивом.
Пример:
<em>Важно</em>
Элемент INS отмечает текст как вставку и применяется для выделения изменений, вносимых в документ. У этого элемента есть два атрибута: cite должен содержать URL документа, в котором описаны причины добавления фрагмента, а datetime должен содержать дату и время добавления в формате ГГГГ-ММ-ДДTчч: мм: ссTZD. Браузеры отображают такой текст как подчеркнутый.
Пример:
<ins cite="whyadd.html" datetime="2007-10-06T10:11:45+3.00">Новый фрагмент</ins>
Элементом KBD помечают текст, вводимый пользователем с клавиатуры. Браузеры отображают такой текст моноширинным шрифтом.
Пример:
Введите слово <kbd>дом</kbd>
Этот элемент обозначает текст как цитату и применяется для добавления коротких высказываний в текст. Обычно отображается как курсив, но некоторые браузеры берут в кавычки текст, отмеченный этим элементом.
Пример:
Цитата: <q>Как сказал поэт</q>
Элемент SAMP определяет текст как пример и обычно используется для выделения результатов работы программы. Браузер выделяет этот текст моноширинным шрифтом.
Пример:
<samp>Образец</samp>
Элемент STRONG предназначен для постановки акцента на тексте. Браузеры выделяют такой текст полужирным шрифтом.
Пример:
<strong>Очень важный фрагмент</strong>
Этот элемент применяется для выделения переменных из программ. Браузер отмечает такой текст курсивом.
Пример:
Введите переменную <var>X</var>
В листинге 2.16 показан код страницы с различным форматированием текста.
<html>
<head>
<title>Логические элементы для форматирования</title>
<body>
<abbr title="Научно-исследовательский институт">НИИ</abbr><br />
2.6. Форматирование текста
<acronym>СНГ</acronym><br />
<cite>Здесь указан источник информации</cite><br />
Зададим функцию <code>func(int a, char b);</code><br />
<del cite="whydel.html" datetime="2007-10-06T10:11:45+3.00">Неактуальный фрагмент</del><br />
<dfn>Определение</dfn>-описание<br />
<em>Важно</em><br />
<ins cite="whyadd.html" datetime="2007-10-06T10:11:45+3.00">Новый фрагмент</ins><br />
Введите слово <kbd>дом</kbd><br />
Цитата: <q>Как сказал поэт</q><br />
<samp>Образец</samp></br>
<strong>Очень важный фрагмент</strong><br />
Введите переменную <var>X</var><br />
</body>
</html>
Результат обработки браузером кода из листинга 2.16 показан на рис. 2.16.
Рис. 2.16. Логическое форматирование текста
На рис. 2.16 видно, что не все логические элементы для форматирования изменяют вид текста, потому что предназначены не для этого. Различные браузеры могут по-разному выводить различные элементы, поэтому перед тем как выложить сайт в Интернете, проверьте его вид в различных программах.