Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
web_1 / lect2 - Форматирование текста.pptx
Скачиваний:
107
Добавлен:
17.03.2016
Размер:
365.46 Кб
Скачать

Ссылка на адрес электронной почты

Создание ссылки на адрес электронной почты делается почти также как и ссылка на веб-страницу. Только вместо 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>.