Форматирование гипертекста

Язык HTML поддерживает как логический (logical), так и физический (physical) стили форматирования содержимого документа. Использование логического форматирования указывает на назначение данного фрагмента текста, а при физическом форматировании досконально задается его внешний вид. По возможности стоит использовать логические стили, так как они позволяют браузеру выбрать наиболее подходящий документу вид. Использование логических стилей также поможет читателю разобраться в структуре документа. Физический стиль используется в основном программами, конвертирующими текстовые файлы, содержащие физическое форматирование, в HTML, так как логическое форматирование документа невозможно выполнить автоматически.

Логическое форматирование

• выделение заголовков в документе;
• логическое выделение элементов текста.

Название документа, задаваемое с помощью тега , не выводится на экран как часть документа. Чтобы отобразить название используется один из тегов заголовка. Заголовки в типичном документе разделяются по уровням. Язык HTML позволяет задать шесть уровней заголовков: H1 (заголовок первого уровня), Н2, Н3, H4, Н5 и H6. Заголовок первого уровня имеет обычно больший размер и насыщенность по сравнению с заголовком второго уровня.

Если вы посмотрите на эту главу, то «Логическое форматирование» — заголовок третьего уровня, «Форматирование гипертекста» — второго, а «Основы языка HTML» — первого. На практике заголовки четвертого и далее уровней встречаются лишь в очень больших документах.

Заголовок 1 уровня

Заголовок 2 уровня

Заголовок 3 уровня

Заголовок 4 уровня

Заголовок 5 уровня

Заголовок 6 уровня

Помните, что если вы забудете поставить закрывающий тег заголовка, вид страницы будет искажен: любой из тегов заголовка автоматически вставляет пустую строку до и после себя.

Теги заголовков поддерживают атрибут ALIGN, действие которого аналогично действию такого же атрибута тега выделения абзаца.

Элементы логического выделения фрагментов текста, а также возможное оформление каждого из них приведены в таблице.

Используется для выделения цитат или названий книг и статей

Используется для выделения цитат или названий книг и статей

Применяется для вывода небольшого куска программного кода

Применяется для вывода небольшого куска программного кода

Используется для выделения важных фрагментов текста

Используется для выделения важных фрагментов текста

Выделяет текст, вводимый пользователем с клавиатуры

Выделяет текст, вводимый пользователем с клавиатуры

Используется для выделения текста примера

Используется для выделения текста примера

Используется для выделения очень важных фрагментов текста

Используется для выделения очень важных фрагментов текста

Используется для отметки имен переменных

Используется для отметки имен переменных

Используется для отметки удаленного текста

Используется для отметки удаленного текста

Вы, наверное, обратили внимание на то, что некоторые элементы логической разметки текста дают одинаковый результат. Зачем же тогда нужно такое их разнообразие? Ответ на этот вопрос содержится в названии этой группы тегов. Они предназначены для расстановки логических ударений, выделения логических частей и подчеркивания сути высказываний. Их использование весьма актуально, поскольку, вероятно, в ближайшем будущем станет возможен, например, поиск цитат в Web-пространстве, а, может быть, следующее поколение браузеров научится читать документы вслух. Программы, умеющие распознавать логические ударения, заменят монотонные речевые процессоры сегодняшнего дня.

Для выделения длинных цитат из основного текста в HTML существует тег . Этот элемент является контейнером и может содержать любые форматирующие теги.

Современные браузеры реагируют на элемент смещением текста цитаты вправо. Некоторые текстовые программы просмотра обозначают цитату символами >, располагающимися в крайнем левом столбце экрана. Так как сегодня большинство браузеров являются графическими программами, элемент позволяет авторам внести в текст некоторое визуальное разнообразие.

Теги форматирования текста в HTML

К тегам форматирования текста в HTML можно отнести теги изменяющие отображение выделенного фрагмента.

Список тегов форматирования текста

— важный фрагмент текста, жирный;
— акцентирование внимания, курсив;
— подсвеченный участок текста;
— жирный шрифт;
— курсив, наклонный шрифт;
— зачеркнутый текст;
— текст меньшего размера;
— верхний индекс;
— нижний индекс;
— предварительно отформатированный текст;
— термин;
— — заголовки;
— короткая внутристрочная цитата;
— цитата;
— сноска на название материала;
— программный код;
— результат вывода компьютерной программы;
— клавиатурный ввод;
— переменная компьютерной программы.;
— дата и/или время.

Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете нажав по названию тега.

Теги выделения фрагментов текста

Важный фрагмент текста

Акцентированный фрагмент

Подсвеченный фрагмент

Текст жирным шрифтом

Текст курсивом

Перечеркнутый текст

Текст меньшего размера

Текст нижнего индекса

Текст верхнего индекса

Предварительно отформатированный текст

Теги устанавливающие суть содержимого
Теги  — указывают, что содержимое является заголовком (подзаголовком). — заголовок наиболее высокого уровня, — наименьшего. Заголовки определяют структуру текста HTML документа. Браузера обычно выделяют заголовки размером шрифта, в зависимости от уровня заголовка.
Заголовок
Термин
Короткая цитата
Цитата
Задание стилей форматирования html-документов
 Определение. Основным понятием CSS является стиль – т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (цвет, размер, положение, и т. п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке много таких элементов, не отличающихся один от другого. В CSS для присвоения какому-либо элементу определенных характеристик вы должны один раз описать этот элемент, как стиль, а в дальнейшем просто указывать этот стиль для нужных элементов.
Описание стиля можно хранить в отдельном файле и использовать на любом количестве Web-страниц, при этом оформление страниц можно изменять, изменяя описание стиля в этом файле. Существует четыре способа связывания html-документа и таблиц стилей:
 Связывание — использование одной таблицы стилей для форматирования многих страниц. Для этого нужно в обычном текстовом файле описать с помощью языка CSS необходимые стили, разместить этот файл на Web-сервере, а в кодах Web-страниц сделать на него ссылку с помощью тега LINK внутри тега HEAD ваших страниц:
 Внедрение — задание таблицы стилей непосредственно в документе. Описание стилей располагается в коде Web-странички, внутри тега HEAD в теге
 Встраивание в теги. Описание стиля располагается непосредственно внутри тега описываемого элемента с помощью параметра STYLE.
 Импортирование. В теге в начале стилевого блока перед заданием остальных правил можно импортировать внешнюю таблицу стилей с сервера с помощью свойства @import таблицы стилей:
 @import: url(mystyles.css); 
 Группирование. Правила каскадных таблиц состоят из селектора и определения. Для уменьшения размеров таблиц стилей можно группировать разные селекторы в виде списка элементов страницы HTML, разделённых запятыми, если для них задаётся одно правило. Например, следующие правила
можно сгруппировать и задать в виде одного правила со списком селекторов
Аналогично группируются определения, только в списке они разделяются точками с запятой. Следующие правила форматирования заголовка первого уровня
можно сгруппировать в виде одного правила, сгруппировав определения:
 H2 (font-weight: bold; font-size: 14pt; font-family: Verdana;> 
Некоторые свойства имеют собственный синтаксис группирования, связанный с заданием значений нескольких свойств в одном. Например, предыдущий пример при использовании свойства font запишется так:
 H2 (font: bold 14pt Verdana> 
 Наследование. В HTML некоторые элементы могут содержать другие. Например, пусть цвет шрифта абзаца определён как синий(P ). Как будет отображаться выделенный тэгом элемент текста, если для него не определено правило форматирования? В подобных случаях вложенный элемент наследует правила форматирования элемента-родителя, и выделенный элемент также будет отображаться синим цветом.
Наследование полезно при задании значений свойств, применяемых к документу по умолчанию. Для этого достаточно задать все свойства для элемента, порождающего все остальные элементы страницы HTML. Таким элементом является тело документа, определяемое тегом BODY:
Приведённые правила задают форматирование документа по умолчанию: чёрным шрифтом гарнитуры Times New Roman с фоном, задаваемым графическим файлом picture.gif, или на белом фоне, если файл недоступен.
 Селекторы. Правила каскадных таблиц стилей, в которых в качестве селектора используются теги HTML, влияют на отображение всех элементов заданного типа в документе. Следующее правило отображает без подчёркивания все ссылки в документе.
 Классы. Класс позволяет задать разные правила форматирования для одного элемента определённого типа или всех элементов документа. Для этого используется параметр класса» или идентификатор элемента», присваивающиеся любому элементу страницы. Имя класса указывается в селекторе правила после имени тега и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента. Например, можно определить два класса для отображения заголовка первого уровня:
В тексте документа ссылка на соответствующий класс задаётся в параметре CLASS:
 Красный шрифт
 


Если класс должен применяться ко всем элементам документа, то в селекторе задаётся имя класса с лидирующей точкой без указания конкретного элемента:
Теперь два класса red и blue можно применять к любым элементам документа:
 
Красный шрифт
 
Красный шрифт на синем фоне
 

 Идентификаторы. Параметр ID можно применять к любому элементу документа. Правила таблиц стилей регламентируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом #:
  

 
 
В этом примере абзац идентифицирован именем myID в параметре ID, поэтому к нему применимо правило с селектором #myID. Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3. Такого элемента в нашем фрагменте нет, и поэтому заголовок form2 отображается по умолчанию.
 Простейший пример. Давайте рассмотрим механизм, с помощью которого стили присваиваются элементам Web-страниц. Самый простой случай присвоения какому-либо элементу определенного стиля выглядит так:
где НАЗВАНИЕ ЭЛЕМЕНТА – имя html-тега (H1, P, TD, A и т. д.), а параметры в фигурных скобках – список свойств элемента и присвоенных им значений. Пример:
В этом примере всем заголовкам на странице, оформленным тегом Н1, присваивается размер шрифта 30 пунктов и синий цвет.
СВОЙСТВА ЭЛЕМЕНТОВ, УПРАВЛЯЕМЫХ С ПОМОЩЬЮ CSS
В настоящее время язык CSS насчитывает довольно большое количество свойств элементов, которыми он может управлять. Наиболее употребительное свойство – размеры элементов, для которых могут использоваться следующие единицы измерений:
 px – пиксели, cm – сантиметры, mm – миллиметры, pt — пункты (типограф.), % — проценты. 
Описание свойств элементов состоит из названия свойства с последующим присвоением ему определенного значения. Название свойства и его значение разделены двоеточием. Использование абсолютных размеров шрифтов рекомендуется только при определенном художественном замысле.
Для устаревших браузеров, не распознающих CSS, необходимо заключить описания стилей в тег комментариев внутри тегов …:
Свойства текста
 text-decoration 
 text-transform 
Задает преобразование регистра текста при отображении. 
H4 — Первая буква каждого слова преобразуется в заглавную 
A — Все буквы преобразуются в заглавные 
I — Все буквы преобразуются в строчные 
B — Отменяет установленные преобразования
Определяет выравнивание элемента. Возможные значения : left, right, center, justify 
P , H5
Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой: P
Управляет интервалами между строками текста: P
Границы
Описывает атрибут стиля border, который позволяет задать вид линий границ вокруг объектов, например, таблиц. Атрибут border может быть применен к любым объектам.
 Border-width 
Ширина линии границы. Может быть задана значением в пикселях или с помощью зарезервированных слов thin (тонкая), medium (средняя), thick (толстая): table
 Border-color 
Цвет границы. Может принимать значение transparent для задания невидимой, но имеющей ширину, границы, что иногда полезно: table
 border-style 
Задает стиль рисования границы. Может принимать следующие значения: none (по умолчанию), hidden, dotted, dashed, solid, double,groove, ridge, inset, outset 
table
Можно задать стили для каждой из сторон границы. Например: border-сторона[-атрибут]. Где сторона может принимать следующие значения: top (верхняя граница), bottom (нижняя граница), left (левая граница) и right (правая граница). Таким образом < border-bottom-width: 1px >будет означать, что ширина нижней границы равна 1 пикселу.
Курсоры
Internet Explorer позволяет задавать стили для курсоров. Некоторые доступны только для IE 6.
Курсор со стрелками во все четыре стороны и точкой в центре, показывающий на возможность скроллинга страницы в любом направлении: I
По умолчанию. Браузер определяет самостоятельно: I
Курсор со стрелками влево-вправо и вертикальной разделяющей полоской. Используется для индикации возможности изменения размеров по горизонтали: H4
Курсор -крест : H4
Стандартный курсор, используемый системой: H4
Рука с вытянутым указательным пальцем (для гиперссылок): H4
Стрелка с вопросительным знаком: H3
Курсор со 4 стрелками, показывающий возможность перемещения: H2
Рука с перечеркнутым кружочком. Нельзя сбросить объект в текущую позицию курсора: TD
Перечеркнутый круг. Данная операция не поддерживается: TD
Идентична стилю hand: TD
Песочные часы, показывающие на продолжение операции: TD
Курсор со стрелками вверх-вниз и вертикальной разделяющей полоской. Используется для индикации возможности изменения размеров по вертикали: TD
Текстовый курсор-каретка: TD
Ваш собственный курсор. Поддерживаются файлы .cur и .ani: TD
 vertical-text 
Горизонтальная текстовая каретка для вертикального текста: TD
Курсор, показывающий, что система занята и требуется подождать: TD
Курсоры, показывающие возможность потянуть за край окна. Вместо символа * используйте N, NE, NW, S, SE, SW, E, или W, определяющие направление стрелок: TD
Свойства шрифта
Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент: P . Можно указать до трех семейств шрифта (браузер находит имеющийся у него).
Задает способ начертания шрифта: normal — Нормальный (по умолчанию), italic — Курсив, oblique — Наклонный. P
 font-variant 
Задает варианты начертания шрифта: normal — Нормальный (по умолчанию), small-caps — Все буквы заглавные): P
Определяет степень жирности шрифта с помощью параметров: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900: B
Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры). H1 , H2 , H3
Полоса прокрутки
Данные настройки применимы ко всем элементам, имеющим полосы прокрутки: сама страница (элемент BODY), текстовый блок (TEXTAREA) и т.д.
Определяет или устанавливает цвет верха и левой части ползунка и кнопок со стрелками на полосе прокрутки: body
Устанавливает или определяет цвет стрелок на кнопке со стрелками 
body
Устанавливает или определяет цвет основных элементов ползунка: ползунка, кнопок со стрелками, дорожки для ползунка, если не определены параметры в scrollbar-face-color: body
Устанавливает или определяет цвет тени для ползунка и кнопок со стрелками: body
Устанавливает или определяет цвет ползунка и кнопок со стрелками. Также, если вы не задали параметр SCROLLBAR-TRACK-COLOR, у вас изменится цвет дорожки: body
Устанавливает или получает цвет подсветки, создающий эффект объёмности. Это цвет, который окаймляет освещённую часть кнопочки. Когда кнопка не нажата, то цвет заливает левый верхний угол и стороны между ним, когда нажата — нижний правый угол: body
Схоже с scrollbar-darkshadow-color: body
Устанавливает или получает цвет дорожки для ползунка: body
Цвет элемента и цвет фона
Определяет цвет элемента: I
Устанавливает цвет фона для элемента (не для странички). IE отводит под фон элемента всю ширину страницы, Netscape Navigator – ширину, занимаемую элементом: H4
Продвинутое форматирование текста
В HTML для форматирования текста есть много других элементов, не рассмотренных в статье Основы редактирования текста в HTML. Элементы, описанные в этой статье, не так часто используются, но всё же полезны для понимания (и это всё ещё будет не полный список элементов). Здесь вы узнаете о цитатах, списках описания, компьютерном коде и другом виде текстовых элементов, подстрочном и надстрочном тексте, контактной информации и других типах текста.


Предварительные требования:
Базовое знакомство с HTML, раскрытое в Начало работы с HTML. Форматирование текста с помощью HTML, описанное в статье Основы редактирования текста в HTML.




Задача:
Научиться использовать менее известные HTML-элементы для продвинутой семантической разметки текста.



Списки описания
В основах HTML-текста мы рассмотрели, как пометить привычные типы списков в HTML, но мы не упоминали о третьем типе списка, с которым вы иногда сталкиваетесь, — списке описания. Цель этих списков состоит в том, чтобы пометить набор элементов и их связанных описаний, таких как термины и определения или вопросы и ответы.
Давайте рассмотрим пример набора терминов и определений:
Солилоквий Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам). Монолог Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам. Ремарка В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.
Закончим разметку нашего примера:
dl> dt>Солилоквийdt> dd> Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам). dd> dt>Монологdt> dd> Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам. dd> dt>Ремаркаdt> dd> В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо. dd> dl> 
В стилях браузера по умолчанию будут отображаться списки описания с некоторыми отступами от терминов. Стили, определённые на MDN, довольно близки к этому соглашению, но также вносят некоторые изменения:
Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).
Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам.
В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.
Заметьте, что разрешено давать одному элементу несколько описаний:
В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.
В письменности: отметка, примечание (устар.).
Активное обучение: разметка набора определений
Пришло время попробовать свои силы в списках описания: добавьте элементы в исходный текст в поле Ввод, чтобы он отображался как список описания в поле Вывод. Вы можете попробовать использовать свои собственные термины и описания, если хотите.
Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.
h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 100px; width: 95%"> Бекон Скрепляет мир вокруг. Яйца Скрепляют пироги вокруг. Кофе Рычаг, движущий планетами. Светло-коричневого цвета.textarea > div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 
html  font-family: sans-serif; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > body  margin: 10px; background: #f5f9fa; > 
var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var output = document.querySelector(".output"); var code = textarea.value; var userEntry = textarea.value; function updateCode()  output.innerHTML = textarea.value; > reset.addEventListener("click", function ()  textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "Показать решение"; updateCode(); >); solution.addEventListener("click", function ()  if (solution.value === "Показать решение")  textarea.value = solutionEntry; solution.value = "Спрятать решение"; > else  textarea.value = userEntry; solution.value = "Показать решение"; > updateCode(); >); var htmlSolution = "
\n 
Бекон
\n 
Скрепляет мир вокруг.
\n 
Яйца
\n 
Скрепляют пироги вокруг.
\n 
Кофе
\n 
Рычаг, движущий планетами.
\n 
Светло-коричневого цвета.
\n
"; var solutionEntry = htmlSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function (e)  if (e.keyCode === 9)  e.preventDefault(); insertAtCaret("\t"); > if (e.keyCode === 27)  textarea.blur(); > >; function insertAtCaret(text)  var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = textarea.value.substring(0, caretPos); var back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > // Update the saved userCode every time the user updates the text area code textarea.onkeyup = function ()  // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Показать решение")  userEntry = textarea.value; > else  solutionEntry = textarea.value; > updateCode(); >; 
Цитаты
HTML также имеет функции, доступные для маркировки цитат; какой элемент вы используете, зависит от того, маркируете ли вы блочную или строчную цитату.
Блочные цитаты
Если часть содержимого уровня блока (будь то абзац, несколько абзацев, список и т. д.) цитируется из другого источника, вы должны обернуть её внутри элемента , чтобы обозначить это, и указать URL-адрес, указывающий на источник цитаты, внутри атрибута cite .
Например, следующая разметка берётся из страницы элемента MDN :
p> strong>HTML-элементcode><blockquote>code>strong> (от англ. em>HTML Block Quotation Elementem>) указывает на то, что заключённый в нём текст является развёрнутой цитатой. p> 
Чтобы превратить её в блочную цитату, мы просто делаем следующее:
blockquote cite="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote"> p> strong>HTML-элементcode><blockquote>code>strong> (от англ. em>HTML Block Quotation Elementem>) указывает на то, что заключённый в нём текст является развёрнутой цитатой. p> blockquote> 
Стиль браузера по умолчанию будет отображать это как абзац с отступом, как индикатор того, что это цитата; абзац над цитатой призван продемонстрировать это. MDN делает это, но также добавляет некоторый дополнительный стиль:

HTML-элемент (от англ. Block Quotation) указывает на то, что заключённый в нём текст является развёрнутой цитатой.

Строчные цитаты
Строчные цитаты работают точно так же, за исключением того, что они используют элемент  (en-US). Например, следующий кусочек разметки содержит цитату из страницы MDN:
p> Элемент цитирования — code><q>code> — q cite="https://developer.mozilla.org/ru/docs/Web/HTML/Element/q" >предназначен для коротких цитат, не требующих прерывания абзацаq >. p> 
Стиль браузера по умолчанию будет отображать это как обычный текст, заключённый в кавычки для обозначения цитаты, например:
Элемент цитирования — — «предназначен для коротких цитат, не требующих прерывания абзаца».
Цитирование
Содержание атрибута cite выглядит полезным, но, к сожалению, браузерам, программам чтения с экрана и т. д. оно на самом деле мало чем помогает. Невозможно заставить браузер отображать содержимое атрибута cite без написания собственного решения с использованием JavaScript или CSS. Если вы хотите, чтобы источник цитирования был доступен на странице, лучший способ его разметки — поместить элемент рядом с элементом цитаты (или внутри него). Это действительно будет означать то, что имя источника цитаты — то есть имя книги или имя человека, которое произвело цитату, — будет включено в текст. Нет причин, по которым вы не могли бы связать текст внутри с источником цитаты:
p> Как указано в статье о a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote"> cite>блочных цитатахcite>a >: p> blockquote cite="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote"> p> strong>HTML-элементcode><blockquote>code>strong> (от англ. em>HTML Block Quotation Elementem>) указывает на то, что заключённый в нем текст является развёрнутой цитатой. p> blockquote> p> Элемент цитирования — code><q>code> — q cite="https://developer.mozilla.org/ru/docs/Web/HTML/Element/q" >предназначен для коротких цитат, не требующих прерывания абзацаq >. -- a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/q"> cite>Строчные цитатыcite>a >. p> 
По умолчанию цитаты стилизованы курсивом. Этот код можно увидеть в нашем примере quotations.html
Активное обучение: кто это сказал?
Время для другого примера активного обучения! В этом примере мы хотели бы, чтобы вы совершили следующие действия:

Преобразуйте средний абзац в блочную цитату ( ), который включает атрибут cite .
Заверните часть третьего абзаца в строчную цитату, которая включает атрибут cite .
Включите элемент для каждой ссылки.

Источники цитирования, которые вам потребуются:

http://www.brainyquote.com/quotes/authors/c/confucius — HTML-страница с цитатами Конфуция
https://www.affirmationsforpositivethinking — HTML-страница The Need To Eliminate Negative Self Talk.

Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.
h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 150px; width: 95%"> p>Здравствуйте и добро пожаловать на мою страницу мотивации! Конфуций как-то сказал:p> p>Не важно, с какой скоростью ты движешься к своей цели, — главное не останавливаться.p> p>Мне также нравится концепция позитивного мышления, и я считаю, каждый ощущает Необходимость избавления от негативного внутреннего разговора (как сказано в зарубежной статье Affirmations for Positive Thinking.)p> textarea> div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 
html  font-family: sans-serif; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > body  margin: 10px; background: #f5f9fa; > 
var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var output = document.querySelector(".output"); var code = textarea.value; var userEntry = textarea.value; function updateCode()  output.innerHTML = textarea.value; > reset.addEventListener("click", function ()  textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "Показать решение"; updateCode(); >); solution.addEventListener("click", function ()  if (solution.value === "Показать решение")  textarea.value = solutionEntry; solution.value = "Спрятать решение"; > else  textarea.value = userEntry; solution.value = "Показать решение"; > updateCode(); >); var htmlSolution = '
Здравствуйте и добро пожаловать на мою страницу мотивации! Конфуций как-то сказал:
\n\n
\n 
Не важно, с какой скоростью ты движешься к своей цели, — главное не останавливаться.
\n
\n\n
Мне также нравится концепция позитивного мышления, и я считаю, каждый ощущает Необходимость избавления от негативного внутреннего разговора (как сказано в зарубежной статье Affirmations for Positive Thinking.)
'; var solutionEntry = htmlSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function (e)  if (e.keyCode === 9)  e.preventDefault(); insertAtCaret("\t"); > if (e.keyCode === 27)  textarea.blur(); > >; function insertAtCaret(text)  var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = textarea.value.substring(0, caretPos); var back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > // Update the saved userCode every time the user updates the text area code textarea.onkeyup = function ()  // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Показать решение")  userEntry = textarea.value; > else  solutionEntry = textarea.value; > updateCode(); >; 
Аббревиатуры
Давайте рассмотрим несколько примеров:
Мы используем HTML для структурирования наших веб-документов.
 
Я думаю, Почт. Грин сделал это на кухне с бензопилой.
 
Они будут выглядеть примерно так (расшифровка появится в подсказке при наведении курсора мыши на сокращение):
Мы используем HTML для структурирования наших веб-документов.
Я думаю, Почт. Грин сделал это на кухне с бензопилой.
Активное обучение: выделение аббревиатуры
В рамках этого простого упражнения мы хотели бы, чтобы вы просто указали аббревиатуру. Вы можете использовать наш образец ниже или заменить его на свой собственный.
h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 50px; width: 95%"> p>Безусловно, NASA занимается классными вещами.p> textarea> div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 
html  font-family: sans-serif; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > body  margin: 10px; background: #f5f9fa; > 
var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var output = document.querySelector(".output"); var code = textarea.value; var userEntry = textarea.value; function updateCode()  output.innerHTML = textarea.value; > reset.addEventListener("click", function ()  textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "Показать решение"; updateCode(); >); solution.addEventListener("click", function ()  if (solution.value === "Показать решение")  textarea.value = solutionEntry; solution.value = "Спрятать решение"; > else  textarea.value = userEntry; solution.value = "Показать решение"; > updateCode(); >); var htmlSolution = '
Безусловно, NASA занимается классными вещами.
'; var solutionEntry = htmlSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function (e)  if (e.keyCode === 9)  e.preventDefault(); insertAtCaret("\t"); > if (e.keyCode === 27)  textarea.blur(); > >; function insertAtCaret(text)  var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = textarea.value.substring(0, caretPos); var back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > // Update the saved userCode every time the user updates the text area code textarea.onkeyup = function ()  // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Показать решение")  userEntry = textarea.value; > else  solutionEntry = textarea.value; > updateCode(); >; 
Разметка контактных данных
address> p>Крис Миллс, Манчестер, Жестокий Север, РФp> address> 
Читать:
как поставить визуальные закладки в mozilla firefox