
- •Лекция 2. Ввод и оформление текста
- •Создание заголовков
- •Создание абзацев
- •Создание обрывов строк
- •Создание обрывов строк. Атрибут clear
- •Создание списков
- •Маркированный список
- •Маркированный список. Атрибут type
- •Нумерованный список
- •Нумерованный список. Атрибут type
- •Список определений
- •Ссылки
- •Абсолютные и относительные ссылки
- •Ссылки относительно текущего документа
- •Ссылки относительно текущего документа
- •Ссылки относительно корня сайта
- •Якоря (внутренние ссылки)
- •Якоря (внутренние ссылки)
- •Ссылка на адрес электронной почты
- •Атрибуты ссылок. Атрибут target
- •Атрибуты ссылок. Атрибут title
- •Атрибуты ссылок. Атрибут accesskey
- •Форматирование текста

Ссылка на адрес электронной почты
Создание ссылки на адрес электронной почты делается почти также как и ссылка на веб-страницу. Только вместо URL указывается mailto:адрес электронной почты

Правила вложений для тега <a>
Любая ссылка является встроенным элементом, поэтому для нее действуют те же правила, что и для встроенных элементов. А именно, нельзя размещать внутри тега <a> блочные элементы, но допустимо делать наоборот, и вкладывать ссылку в блочный контейнер

Атрибуты ссылок. Атрибут target
По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега <a>. Атрибут target корректно использовать только при переходном <! DOCTYPE>, при строгом <!DOCTYPE> будет сообщение об ошибке, поскольку в этой версии HTML target уже не поддерживается
Синтаксис следующий <a target="имя окна">...</a>
В качестве значения используется имя окна или фрейма, заданное атрибутом name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен применяются следующие.
_blank - загружает страницу в новое окно браузера.
_self - загружает страницу в текущее окно (это значение задается по умолчанию). _parent - загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top - отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

Атрибуты ссылок. Атрибут title
Добавляет поясняющий текст к ссылке в виде всплывающей подсказки. Такая подсказка отображается, когда курсор мыши задерживается на ссылке, после чего подсказка через некоторое время пропадает.
Синтаксис следующий
<a title="текст">...</a>
В качестве значения указывается любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки. Цвета и оформления всплывающей подсказки зависят от настроек операционной системы и браузера, и меняться разработчиком не могут.

Атрибуты ссылок. Атрибут accesskey
Атрибут accesskey позволяет активировать ссылку с помощью некоторого сочетания клавиш с заданной в коде ссылки буквой или цифрой. Браузеры при этом используют различные комбинации клавиш. Например, для accesskey="s" работают следующие сочетания.
<a accesskey="c">...</a>

Форматирование текста
Есть много тегов для форматирования текста, и все они делятся на две группы: логические и физические. Друг от друга группы отличаются принципиально.
Логические теги сообщают браузеру о том, какой тип информации в них содержится, например важный текст или цитата. Браузер сам решает, как отобразить такой текст. Конечно, есть принятые стандарты для отображения определенных элементов, но в таких элементах главное - смысл. По сути они разбивают документ на логические части и при этом не обязывают браузер отображать текст, расположенный внутри элемента, каким-либо конкретным образом.
Физические теги просто говорят браузеру, как должен выглядеть тот или иной блок текста, не уточняя никак смысл и значимость его содержимого. Другими словами, такой элемент заставляет браузер нарисовать букву красной, полужирной или курсивом, не уточняя, почему буква должна выглядеть именно так.

Логические теги. Тег <abbr>
Тег <abbr> указывает, что последовательность символов является аббревиатурой. С помощью атрибута title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга документа.
Браузеры никак не выделяют текст внутри <abbr>, за исключением Opera до версии 15, которая добавляет к тексту пунктирное подчёркивание.

Логические теги. Тег <acronym>
Тег <acronym> указывает на то, что текст является акронимом. В отличие от аббревиатуры, акроним — это устоявшееся сокращение, которое применяется как самостоятельное слово. К акронимам, например, можно отнести следующие слова: СПИД, ликбез, замполит, США, DOS и др.
По умолчанию, текст заключенный в контейнере <acronym> подчеркивается пунктирной линией. Не поддерживается в html5

Логические теги. Тег <address>
Тег <address> предназначен для хранения информации об авторе и может включать в себя любые элементы HTML вроде ссылок, текста, выделений и т.д. Планируется, что поисковые системы будут анализировать содержимое этого тега для сбора информации об авторах сайтов.
По умолчанию текст внутри контейнера <address> отображается курсивным начертанием. Если эта особенность не требуется, используйте стили для изменения начертания шрифта.

Логические теги. Тег <cite>
Тег <cite> помечает текст как цитату или сноску на другой материал. Такое выделение удобно для изменения стиля текста через CSS, а также применяется для разделения кода HTML на структурные элементы. Браузеры обычно устанавливают текст внутри контейнера <cite> курсивом.
Логические теги. Тег <code>
Тег <code> предназначен для отображения одной или нескольких строк текста, который представляет собой программный код. Сюда относятся имена переменных, ключевые слова, тексты функции и т.д. Браузеры обычно отображают содержимое контейнера <code> как моноширинный текст уменьшенного размера.
В отличие от тега <pre> дополнительные пробелы внутри контейнера <code> не учитываются, так же, как и переносы текста. Поэтому используйте тег <br> или <p> для создания переносов.

Логические теги. Тег <dfn>
Как правило, в документе, когда упоминается новый термин, он выделяется курсивом и дается его определение. При использовании этого термина в дальнейшем, он считается уже известным читателю. Тег <dfn> применяется для выделения таких терминов при их первом появлении в тексте. Браузеры отображают содержимое контейнера <dfn> с помощью курсивного начертания.
Логические теги. Тег <kbd>
Тег <kbd> используется для обозначения текста, который набирается на клавиатуре или для названия клавиш. Браузеры обычно помечают текст в контейнере <kbd> моноширинным шрифтом.

Логические теги. Тег <del>
Тег <del> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст в контейнере <del> как перечеркнутый.
Атрибуты
cite - Указывает ссылку на документ, где приведена причина редактирования текста и другие подробности.
datetime - Дата и время редактирования текста.

Логические теги. Тег <ins>
Тег <ins> предназначен для выделения текста, который был добавлен в новую версию документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны.
Браузеры обычно помечают текст в контейнере <ins> как подчеркнутый.
Атрибуты
cite - Указывает ссылку на документ, где приведена причина редактирования текста и другие подробности.
datetime - Дата и время редактирования текста.

Логические теги. Тег <em>
Тег <em> предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
Следует отметить, что теги <i> и <em>, также как <b> и <strong>, несмотря на сходство результата, являются не совсем эквивалентными и заменяемыми. Первый тег <i> — является тегом физической разметки и устанавливает курсивный текст, а тег <em> — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <i> и <em>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.

Логические теги. Тег <q>
Тег <q> используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках.
Атрибуты
cite - Адрес, который указывает на источник цитаты.
Логические теги. Тег <samp>
Элемент <samp> используется для отображения текста, который является результатом вывода компьютерной программы или скрипта. Браузеры обычно отображают текст в контейнере <samp> с помощью моноширинного шрифта. С помощью стилей можно задать свое собственное оформление.

Логические теги. Тег <strong>
Тег <strong> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
Логические теги. Тег <var>
Тег <var> используется для выделения переменных компьютерных программ. Браузеры обычно помечают текст в контейнере <var> курсивным начертанием.
Логические теги. Тег < blockquote >
Тег <blockquote> предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу.

Физические теги. Тег <b>
Устанавливает жирное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.
Физические теги. Тег <i>
Устанавливает курсивное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.
Физические теги. Тег <u>
Добавляет подчеркивание к тексту. Этот тег осуждается спецификацией HTML, взамен рекомендуется использовать стили.

Физические теги. Тег < tt >
Контейнер <tt> отображает текст моноширинным текстом. Запрещен в HTML5
Физические теги. Тег <s>
Тег <s> отображает текст как перечеркнутый. Этот тег аналогичен тегу <strike>, но в отличие от него имеет сокращенную форму записи подобно тегам <b>, <i> и <u>. Взамен этого тега рекомендуется использовать стили.
Физические теги. Тег <strike>
Тег <strike> отображает текст как перечеркнутый

Физические теги. Тег < small >
Тег <small> уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега <small> уменьшает текст на одну условную единицу. Допускается применение вложенных тегов <small>, при этом размер шрифта будет меньше с каждым вложенным уровнем, но не может быть меньше, чем 1.
Физические теги. Тег <big>
Тег <big> увеличивает размер шрифта на единицу по сравнению с обычным текстом

Физические теги. Тег < sub >
Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.
Физические теги. Тег < sup >
Отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.

Физические теги. Тег <span>
Тег <span> предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.
Физические теги. Тег < font>
Тег <font> представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.

Физические теги. Тег <div>
Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.
Физические теги. Тег < pre >
Элемент <pre> определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег <pre> позволяет обойти эту особенность и отображать текст как требуется разработчику. В отличие от тега <plaintext>, использование которого осуждается в HTML 4, внутри контейнера <pre> допустимо применять любые теги кроме следующих: <big>, <img>, <object>, <small>, <sub> и <sup>.