{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Форматирование текста в HTML","type":"header-two","key":"6gm56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В HTML текст форматируется с помощью тегов . Чтобы задать ему определённый стиль, надо поместить текст в соответствующий контейнер.","type":"unstyled","key":"9p7q0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все теги форматирования можно разделить на три группы:","type":"unstyled","key":"umta"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":20,"style":"BOLD"}],"text":"1. Теги заголовков (h1-h6 ).","type":"unstyled","key":"7gaev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":37,"style":"BOLD"},{"length":5,"offset":48,"style":"BOLD"},{"length":6,"offset":56,"style":"BOLD"},{"length":5,"offset":65,"style":"BOLD"},{"length":6,"offset":73,"style":"BOLD"}],"text":"2. Теги оформления основного текста ( , _{, , , и т. д.).","type":"unstyled","key":"s8vg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":21,"style":"BOLD"},{"length":4,"offset":27,"style":"BOLD"},{"length":4,"offset":34,"style":"BOLD"}],"text":"3. Теги группировки ( ,
,
)","type":"unstyled","key":"79u70"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теги заголовков","type":"header-two","key":"iusq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":63,"style":"BOLD"},{"length":4,"offset":166,"style":"BOLD"},{"length":4,"offset":402,"style":"BOLD"},{"length":4,"offset":420,"style":"BOLD"}],"text":"Превращают обычный текст в заголовок определённого уровня. Тег создаёт заголовок первого уровня — самый большой и главный (обычно название статьи на странице),
отвечает за заголовок шестого уровня — самый маленький и незаметный. Эти теги важны как для пользователей, так и для поисковиков — заголовки с подзаголовками любят и те, и другие. Иерархию уровней необходимо соблюдать, то есть за
должен идти
, и никак не наоборот.","type":"unstyled","key":"4m3ds"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы понять, как это работает, впишите в html-файл следующий код:","type":"unstyled","key":"b164n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Заголовок первого уровня
\nЗаголовок второго уровня
\nЗаголовок третьего уровня
\nЗаголовок четвёртого уровня
\nЗаголовок пятого уровня
\nЗаголовок шестого уровня
","type":"unstyled","key":"7sl3n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выглядеть в браузере это будет вот так:","type":"unstyled","key":"1agct"},{"data":{"image":{"id":"606573cee1bc535b106abe65"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"eva4r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теги оформления основного текста","type":"header-two","key":"9iria"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Позволяют форматировать на уровне символов. Рассмотрим, что с помощью них можно делать.","type":"unstyled","key":"c6rss"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Жирный шрифт","type":"header-three","key":"8tp4h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нужен, чтобы акцентировать внимание на тексте. Для поисковиков тоже важен, им можно выделять ключевые слова.","type":"unstyled","key":"2n8oi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":35,"style":"BOLD"},{"length":3,"offset":47,"style":"BOLD"}],"text":"Отвечают за жирное начертание теги и .","type":"unstyled","key":"emb4o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это жирный текст. И это жирный текст.","type":"unstyled","key":"f9c22"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Верхний и нижний индексы","type":"header-three","key":"bj3pt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Могут использоваться в формулах, уравнениях, обозначении некоторых величин.","type":"unstyled","key":"edger"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":41,"style":"BOLD"},{"length":5,"offset":78,"style":"BOLD"}],"text":"За создание нижних индексов отвечает тег _{, для верхних используется тег ^{.","type":"unstyled","key":"crapp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"x₁=32 м²","type":"unstyled","key":"fd20v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Уменьшение размера","type":"header-three","key":"6g8dc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":102,"style":"BOLD"}],"text":"Если нужно сделать текст на единицу меньше установленного по всей странице, то нужно использовать тег ","type":"unstyled","key":"fcrh2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обычный текст. Уменьшенный текст.","type":"unstyled","key":"31n4n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подчёркивание","type":"header-three","key":"bg1hq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот тип выделения можно использовать для обозначения внесённых в документ изменений или просто чтобы акцентировать на тексте внимание.","type":"unstyled","key":"bntfc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обычный текст. Подчёркнутый текст.","type":"unstyled","key":"3emog"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зачёркивание","type":"header-three","key":"40vkf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":97,"style":"BOLD"}],"text":"Зачеркнуть информацию можно, если она уже потеряла свою актуальность. Предназначен для этого тег .","type":"unstyled","key":"8910r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это новая информация, а это текст, который уже не нужен.","type":"unstyled","key":"10ntn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Курсив","type":"header-three","key":"unv7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":73,"style":"BOLD"},{"length":4,"offset":82,"style":"BOLD"}],"text":"Нужен, чтобы акцентировать на тексте внимание, и может создаваться тегом или .","type":"unstyled","key":"1gu14"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первый пример курсивного текста, второй пример курсивного текста.","type":"unstyled","key":"80iqt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ввод компьютерного текста","type":"header-three","key":"bltjm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Бывает, что на веб-страницу нужно добавить исходный код программы и результаты её работы. Чтобы визуально разные части текста было легко друг от друга отличить, разработчики HTML и внедрили теги этой группы.","type":"unstyled","key":"beug4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":12,"style":"BOLD"},{"length":5,"offset":87,"style":"BOLD"},{"length":6,"offset":120,"style":"BOLD"},{"length":5,"offset":139,"style":"BOLD"},{"length":5,"offset":264,"style":"BOLD"}],"text":"В контейнер заключается код программы, при этом её переменные выделяются тегом , а результат выполнения — . Контейнер содержит текст, который при работе с программой должен с клавиатуры вводить пользователь, а всё, что заключено в теги , сохраняет исходный формат, включая лишние пробелы и переносы строк.","type":"unstyled","key":"4h341"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Программный код будет выглядеть таким образом , переменные обозначаются так: a, b, c, вот результат выполнения \nпрограммы , а это – введённый пользователем текст. Сохранение исходного форматирования отображается примерно так
.","type":"unstyled","key":"ajp2o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Цитаты и определения","type":"header-three","key":"632o5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":32,"style":"BOLD"},{"length":7,"offset":53,"style":"BOLD"},{"length":5,"offset":92,"style":"BOLD"},{"length":6,"offset":105,"style":"BOLD"},{"length":6,"offset":118,"style":"BOLD"},{"length":6,"offset":155,"style":"BOLD"},{"length":5,"offset":172,"style":"BOLD"},{"length":6,"offset":207,"style":"BOLD"},{"length":6,"offset":252,"style":"BOLD"},{"length":6,"offset":284,"style":"BOLD"}],"text":"Программный код будет выглядеть таким образом , переменные обозначаются так: a, b, c , вот результат выполнения программы , а это – введённый пользователем текст . Сохранение исходного форматирования отображается примерно так
.","type":"unstyled","key":"7ta3n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Цитата в теге blockquote.
Цитата внутри контейнера cite.Короткая цитата с тегом q.Выделенное \nопределение.Аббревиатура (НПО, ИП).","type":"unstyled","key":"fbnjl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Общий пример","type":"header-three","key":"4rc4b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы лучше понять, за что какой тег отвечает и как работает, посмотрите нижеследующий код и результат его выполнения.","type":"unstyled","key":"56u83"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Жирный текст можно сделать тегами strong и b. За курсив отвечают em и \ni. \n
Теги _sub и ^sup используются для создания _нижних (x₁…x_n) и \n^{верхних} (4²=16) индексов. Del зачёркивает, ins — подчёркивает.
\nТеги code, kbd, var и samp используются редко и нужны для отображения листинга \nпрограмм
\n abbr нужен для обозначения аббревиатур (HTML). Теги blockquote, cite и q используются для оформления цитат \n(Уж небо осенью дышало)
\nТег pre сохраняет изначальное форматирование текста, не удаляя пробелы и переносы строк.
","type":"unstyled","key":"7ktq6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Браузер интерпретирует этот код так:","type":"unstyled","key":"46gro"},{"data":{"image":{"id":"606573e364e4fc5247ca4820"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1f60"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теги группировки","type":"header-two","key":"3tnms"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нужны, чтобы текст не шёл одной сплошной строкой, а был разбит на логические составляющие.","type":"unstyled","key":"9548s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":13,"style":"BOLD"}],"text":"Внутри тегов
заключается абзац.","type":"unordered-list-item","key":"8q7q1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первый абзац
\nВторой абзац
","type":"unstyled","key":"aftbt"},{"data":{"image":{"id":"60657400b85b906036b8d009"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"f0d7n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":4,"style":"BOLD"}],"text":"Тег
осуществляет переход на следующую строку внутри абзаца (отступа перед строкой не будет).","type":"unordered-list-item","key":"1ndqd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"},{"length":5,"offset":121,"style":"BOLD"},{"length":4,"offset":129,"style":"BOLD"},{"length":5,"offset":136,"style":"BOLD"},{"length":5,"offset":144,"style":"BOLD"},{"length":7,"offset":153,"style":"BOLD"}],"text":"
позволяет нарисовать горизонтальную линию. Использовать его можно для более наглядного разделения текста. Атрибуты width , size , color , align и noshade задают ширину, толщину, цвет, выравнивание и отсутствие 3D-эффекта линии соответственно.","type":"unordered-list-item","key":"bplap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка над линией.
Строка под линией.
","type":"unstyled","key":"6g52s"},{"data":{"image":{"id":"6065740d6bdb585a61112078"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4as61"},{"data":{"image":{"id":"6065741394673832dc902f14"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bpaug"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fvrsb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"doa8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"9hvoj4LtaMkcoRtFqmff"}],"entityMap":{}},"mentions":[]}}}}