Как форматировать текст в html

HTML — Урок 3. Форматирование текста

Для форматирования текста существует много тегов. Одни их них используются часто (и их вы быстро запомните), другие — редко (их и не надо запоминать).

Здесь мы рассмотрим те, которые используются часто.

Теги, делающие текст заголовками

Эти теги выделяют текст в виде заголовков. Т.е. каждый заголовок начинается с новой строки, выделен полужирным шрифтом и имеет свой размер (заголовок первого уровня самый большой, шестого — самый маленький).

Эти теги могут использоваться с параметром горизонтального выравнивания align. Возможные значения этого параметра:

Форматирование html

Это заголовок первого уровня

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теги устанавливающие суть содержимого
Теги  — указывают, что содержимое является заголовком (подзаголовком). — заголовок наиболее высокого уровня, — наименьшего. Заголовки определяют структуру текста HTML документа. Браузера обычно выделяют заголовки размером шрифта, в зависимости от уровня заголовка.






Заголовок
Термин
Короткая цитата
Цитата
Продвинутое форматирование текста
В 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> 
HTML: Форматированный текст
Иногда возникает потребность вставить текст, сохраняя его оригинальное форматирование. Взглянем на знаменитую «лесенку Маяковского» из стихотворения «Сергею Есенину».
Вы ушли, как говорится, в мир в иной. Пустота. Летите, в звезды врезываясь. Ни тебе аванса, ни пивной. Трезвость.
Владимир Маяковский считал, что именно в таком виде лучше всего оформляется ритм стиха.
Оформить такой текст с помощью спецсимволов в HTML очень сложно. Придётся «жонглировать» пробельными спецсимволами. Из-за этого такую разметку будет очень сложно поддерживать в будущем:
Вы ушли,





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






 
Вы ушли, как говорится, в мир в иной. Пустота. Летите, в звезды врезываясь. Ни тебе аванса, ни пивной. Трезвость.
 
Внутри тега pre можно использовать теги для оформления текста: , , , .
Задание
Добавьте любой текст в тег и вставьте его в редактор. Попробуйте различные варианты текстов.
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.


Похожие публикации:

Rsca что это такое
Shape 0 python что это
Отношение находится в третьей нормальной форме тогда и только тогда когда
Узнать кто старше всех в семье sql