Текст с заголовками: Как оформить текст на сайте чтобы его читали

Содержание

Как оформить текст на сайте чтобы его читали

Взгляните на текст:

Ужас, правда?

Такую «простыню» читать невозможно. Да и не хочется, если честно. Любой текст на сайте — будь то карточка товара, ответы на вопросы, описание услуги или статья в блоге — нужно делать максимально удобным для чтения.

Чтобы на сайте статья выглядела как надо, ее нужно подготовить. С этой целью мы используем Google Docs. Расскажем, как правильно оформить текст для публикации на сайте и проиллюстрируем наглядными примерами нашего блога.

NB! Как писать сами тексты, в этой статье говорить не будем. У нас уже есть отличный материал на эту тему: «Что такое SEO-статья и как правильно писать SEO-тексты». Сегодня на повестке дня его величество Оформление. И только оно.

Выделите заголовки и подзаголовки

В одном тексте должен быть только один заголовок первого уровня (Н1) и произвольное количество подзаголовков второго (h3), третьего (h4) и последующего уровней.

Количество их вы определяете сами: обычно подзаголовков столько, сколько нужно для раскрытия темы. В коротком материале достаточно нескольких заголовков h3. В лонгриде со множеством вложений могут потребовать заголовки четвертого уровня (h5). А вот заголовки нижних уровней — начиная с Н5 и далее — мы не рекомендуем использовать, потому что это сильно усложняет навигацию по тексту и его структуру.

Подзаголовки должны быть грамматически согласованными с заголовком статьи. В Google Docs это можно проверить, если выполнить команду «Вид» → «Показать структуру документа» (Ctrl + Alt + H).

В этой структуре хорошо видно подчинение заголовков h2–h5

Размечать заголовки всех уровней можно в «Google Документах» в панели инструментов через всплывающий список со стилями форматирования:

Пример того, как сделать заголовок первого уровня

Теперь посмотрим, как это будем выглядеть при публикации на сайте:

Вот как заголовок первого уровня выглядит в блоге «Кокоса»

Также можно наложить заголовки в главном меню сервиса при выполнении команды «Формат» → «Стили абзацев»:

Пример того, как сделать заголовок второго уровня

Теперь посмотрим, как заголовки h3 и h4 будут выглядеть на сайте:

Заголовки 2 и 3 уровней в статье блога

Сделайте оглавление

Если у вас написано длинное руководство, с помощью оглавления будет проще в нем ориентироваться и переходить к нужным разделам. Оно создается в Google Docs через команду «Вставка» → «Оглавление» в двух вариантах: с номерами страниц или синими ссылками.

Мы выбрали вариант с синими ссылками

В обоих случаях ссылки на каждый раздел будут кликабельными:

Вариант оформления синими ссылками в Google Docs

При публикации оглавление из «Google Документов» не переносится, но вы всегда можете показать верстальщику, как оно примерно должно выглядеть в опубликованном виде.

Во многих CMS оглавление формируется автоматически при верстке:

Так выглядит содержание статьи в нашем блоге

Разделите текст на абзацы

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

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

Теперь представьте этот не самый простой для понимания текст одной «портянкой»

Не делайте абзацы слишком длинными: в среднем в каждом из них должно быть 3-4 предложения средней длины. Обычно в каждом абзаце содержится один тезис и предложения, раскрывающие его.

Добавьте списки

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

  1. Нумерованный.
  2. Маркированный.
  3. Список определений.

Нумерованный список делается тогда, когда важна строгая последовательность элементов:

Чтобы перейти на Google Analytics 4, сделайте следующее:

  1. Подключите основные настройки.
  2. Соберите данные.
  3. Настройте цели.

Маркированный список создается для перечисления элементов в произвольном порядке:

Агентство Кокос оказывает услуги по направлениям:

  • SEO.
  • Контекстная реклама.
  • Создание сайтов.
  • SERM.
  • и другие.

Список определений собирается, когда каждый элемент списка нуждается в подробном описании:

«Список определений» — название типа списка, это не обязательно определения

В Google Docs списки форматируются через панель инструментов:

Можно выбрать вид списка: маркированный или нумерованный, а также варианты расположения их пунктов

На сайте списки смотрятся примерно так же. Их внешний вид зависит от настроек CMS:

Такой маркированный список облегчает восприятие текста

Пункты списка можно также оформлять ссылками, например, при перечислении опубликованных материалов:

В последнее время в блоге появились следующие статьи:

Выделите фрагменты текста

Слова и фразы, на которые важно обратить особое внимание читателя, можно выделить полужирным шрифтом или курсивом. Иногда фрагменты текста выделяют цветом — например, у нас в блоге так оформляются цитаты:

Комментарий эксперта, выделенный цветом

NB! Когда вы заказываете материал у копирайтера или агентства, исполнители часто выделяют полужирным ключевые слова, которые нужно вставить в текст. Это делается для удобства заказчика, чтобы вы сразу увидели, что автор выполнил ТЗ и вставил все ключи. При публикации не забудьте убрать полужирное начертание.

Добавьте цитаты и врезки

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

  1. Цитата — слова эксперта, руководителя или сотрудника компании, клиента — то есть любого человека, чья прямая речь уместна в тексте. Она используется, чтобы усилить экспертность текста, выделить основную мысль, передать эмоции и мнения. Пример цитаты вы уже увидели выше.
  2. «Читайте также…» — ссылка на другой материал на сайте, подходящий по смыслу к определенному фрагменту текста. Эта врезка используется, чтобы показать читателям статьи, которые тематически связаны с текущей, увеличить время их пребывания на сайте и в итоге улучшить поведенческие факторы сайта.

Читайте также:

Внутренняя оптимизация сайтов

  1. Форма СТА, лид-магнит — активная форма, которую заполняет читатель, также подходящая по смыслу. Используется, чтобы повысить количество обращений на сайт.

Пример формы заказа на сайте

Для создания врезок придется прибегнуть к помощи верстальщика, который вставит их на сайт, или сделать это самостоятельно. А в «Google Документах» просто выделить места для врезок цветом и дать указание верстальщику, чтобы не пропустил.

Проставьте ссылки

Ссылки в теле текста могут быть анкорными и безанкорными. Вы читаете статью блога «Кокос» — анкорная ссылка. Вы читаете статью блога «Кокос» (https://kokoc.com/blog/) — безанкорная ссылка. Анкорные ссылки смотрятся намного органичнее, согласитесь!

Чтобы вставить ссылку в «Google Документах», выделите левой кнопкой мыши нужные слова, затем нажмите правую кнопку и кликните по слову «Ссылка» (или нажмите сочетание клавиш Ctrl +K). В открывшемся окошке вставьте нужную ссылку и нажмите «Применить»:

Ссылка появится в документе

При публикации на сайте ссылка перенесется автоматически:

Тот же фрагмент текста, опубликованный в блоге

Как правильно ставить ссылки? Приведем ряд основных правил:

  1. Не используйте в тексте ссылок слова «здесь», «тут», «сюда», «эта» и т. д. Читатели должны однозначно понимать, куда они перейдут по ссылке. Старайтесь делать ссылки, которые максимально релевантны страницам, на которые они ведут.
  2. Не ставьте ссылки в подрисуночных надписях и подписям к видео, заголовках и подзаголовках.
  3. Ссылки на исследования, документы, информационные материалы сайтов ставьте так, чтобы они вели на страницу-источник, а не сайт в целом.
  4. Не ставьте слишком длинные анкоры: обычно вполне хватает 2-3 слов, чтобы обозначить, на что мы ссылаемся.
  5. Не ставьте ссылку, если слова в ней фактически дублируют сказанное в тексте перед ссылкой: «Чтобы узнать о новых способах продвижения, читайте нашу статью о новых способах продвижения».
  6. Если речь идет о внешних ссылках, не ставьте их на страницы 404, редиректы, сомнительные некачественные и заспамленные сайты. Иначе в гости может прилететь «Гугл Пингвин».

Читайте также:

Алгоритм Google Penguin: как выйти из-под фильтра и не попасть под санкции

Добавьте иллюстрации

Это картинки, фотографии, скриншоты, мемы, которые должны проиллюстрировать текст. Вставляются прямо в документ нажатием сочетания клавиш Ctrl+V или через команду меню «Вставка» → «Изображение» → «Загрузить с компьютера»:

Изображение можно не только загрузить с компьютера, но и найти в интернете, добавить с «Google Диска», Google Фото, вставить ссылку и сделать снимок

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

Расскажем, как подбирать иллюстрации к тексту:

  • Выбирайте качественные изображения достаточного размера: в среднем 1000х1000 пикселей.

Этот молодой человек немного заквадратился… Источник: commig.blogspot.com

  • Изображения — за исключением скриншотов и мемов — не должны иметь надписей, водяных знаков и т. д.
  • Также они должны быть релевантны тексту. Пишете о продаже хлебобулочных изделий — не ставьте фото велосипедов. Утрирую, конечно, но суть ясна.
  • Никогда, никогда, никогда не используйте шаблонные стоковые картинки! Они мертвы, они безжизненны, они устарели сто тысяч лет назад. Лучше сделать собственное фото — пусть не идеальное, но живое.

Ставить такие картинки на сайт просто дурной тон. Источник: chainimage.com

  • Впрочем, брать фото из стоков можно — но максимально нешаблонное. Загляните на Pixabay, FreeStockImages, Unsplash, Gratisography и другие сервисы.
  • Если берете картинки не из стоков, а с просторов интернета, позаботьтесь об авторском праве, чтобы не нарваться на штраф. Укажите автора или источник, откуда взяли картинку.
  • Под картинками должны быть подрисуночные надписи. Еще раз: ПОД картинками. Обычно они выделяются курсивом.
  • Ничего страшного, если вы будете использовать смешные и грустные мемы, демотиваторы карикатуры — читателям тоже хочется улыбнуться. Главное — быть уместными.

А точнее, об их оформлении!

  • Когда делаете скриншоты, оставляйте по бокам достаточно «воздуха», то есть свободного пространства. Так картинка воспринимается легче. Сравните два скриншота одного и того же текстового фрагмента:

Скриншот без «воздуха» плюс еще и обрезанным текстом, что вообще недопустимо

Теперь тот же фрагмент, только с «воздухом»:

Теперь текст скриншота легко читается по края и будет хорошо смотреться не только на белом фоне

Вставьте видео

Требования к видео по большому счету такие же: релевантные, интересные, качественные. Вставить видео в текст тоже несложно: все популярные CMS хорошо понимают и автоматически преобразуют ссылки в видео — достаточно лишь указать их в тексте статьи.

Вот как мы вставили в текст видео на примере статьи «7 книг по SEO в 2021 — учебники по продвижению и оптимизации сайта». Нашему главреду захотелось показать автора книги, что называется, «лицом». Для этого он ввел в поисковой строке YouTube имя и фамилию автора, а также название книги. На появившемся ролике нажал правую кнопку мыши и в контекстном меню выполнил команду «Копировать URL видео»:

Если вам нужно показать какой-то отрезок в видео, выполните команду «Копировать URL видео с привязкой ко времени»

Затем с помощью сочетания клавиш Ctrl+V вставил ссылку на видео в текст:

И выделил лиловым цветом, чтобы верстальщик заметил ссылку и знал, что это видеоролик

При публикации статьи на сайте видео можно смотреть, не покидая страницу:

Видео можно посмотреть как на сайте, так и перейти на YouTube — как удобно пользователю

Сделайте таблицы

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

Так не надо

Так надо

В таблице, в отличие от обычного текста, должно быть минимум текста: только основные тезисы

Минимум текста: самое основное

Меньше заливки. Таблица — не радуга

Меньше заливки. Таблица — не радуга

Текст выравнивается по левому краю

Текст выравнивается по левому краю

А цифры — по правому

А цифры — по правому

Все таблицы в тексте сделаны разными способами

Все таблицы в тексте единообразны

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

Таблицу на сайт можно сделать в Google Docs с помощью команды «Вставка» → «Таблица» и выбрать ее размер, т. е. число строк и столбцов:

Пример, как сделать таблицу в Google Docs

Вот как выглядит таблица на сайте «Кокоса»:

Таблица соответствует правилам, приведенным выше

Разработайте инфографику

Инфографика – еще один вариант простого и понятного визуала. Обычно она используется, когда надо показать сравнительные данные, объяснить схемы и процессы, доступно донести важную информацию.

Вот пример инфографики от «Почты России»:

Разберется и запомнит даже старенькая бабушка (мы надеемся)

Ту же самую информацию можно было написать и текстом, и сделать таблицу, но с картинками намного нагляднее.

Основной принцип создания инфографики похож на правило таблиц:

  1. Пишите самое главное, четко формулируйте тезисы, не лейте воду.
  2. Используйте цифры, выделяйте их цветом или крупным шрифтом.

Ну и, разумеется, инфографика должна быть хорошо читаемой, чтобы внимательный читатель не побежал за лупой (или, вероятнее всего, просто закрыл страницу). Сделать инфографику самостоятельно можно с помощью сервисов Google Docs, Infogr.am, Piktochart.com и других.

В Google Docs для ее создания выполните команду «Вставка» → «Диаграмма» и выберите вид — линейную, круговую, график и другие:

Диаграммы в Google Docs — это изображения, которые легко переносятся на сайт

И последнее: поддерживайте единообразие текста

Чтобы тексты лучше читались, следуйте принципу единообразия.

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

Поэтому советуем придерживаться единого стиля. Например:

  • Пользуйтесь одинаковыми сервисами, программами, плагинами. Например, если речь идет о таблицах, делайте их только в «Google Документах» или Microsoft Word, но не так, чтобы одни были в одной программе, другие в другой. Потом наверняка замучаетесь, чистя код от их «офисного» форматирования.
  • Используйте длинное тире (—), а не дефис (-), там, где нужно писать именно тире. «То», «либо», «нибудь» мы по-прежнему пишем через дефис и никак иначе.
  • Ставьте кавычки-елочки («»), кроме двух случаев. Первый из них (по крайней мере, у нас в блоге), когда говорим о запросах и ключевых фразах: По запросу “купить окна москва” мы с помощью чуда и работы на износ смогли выйти на первое место в топе «Яндекса». Второй — когда словосочетание в кавычках стоит внутри цитаты. «В блоге агентства “Кокос”тщательно следят за оформлением текста», — говорит главный редактор.
  • Определитесь с написанием некоторых слов. Например, мы придерживаемся официального стиля: пишем Stories или «Сторис», но не «сторисы». Google Analytics, или GA, или Analytics, но не «гуглоаналитика» или «аналитикс».
  • Определитесь с tone of voice, или голосом бренда. Мы обращаемся к читателю исключительно на «вы», а не на «ты», не используем сленговые выражения. Правда, есть исключение: статья, где мы намеренно нарушаем все свои правила.

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

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

Перемещение текста с помощью области навигации

При использовании заголовков можно быстро упорядочивать содержимое документа. Перетаскивайте разделы вместо использования привычных команд «Вырезать» и «Вставить».

Область навигации

  • Чтобы включить область навигации, выберите Вид > Область навигации. В этой области отображаются только заголовки. Если перетащить заголовок в другое место, также переместится весь текст под ним.

Мгновенное создание оглавления

  • Чтобы быстро создать оглавление на основе заголовков, выберите Ссылки > Оглавление. Дополнительные способы форматирования оглавлений описываются в приведенных ниже учебных курсах.

Вам нужны дополнительные возможности?

Перемещение по документу с помощью области навигации

Общие сведения об оглавлениях

Расширенные возможности оглавления

Что еще можно сделать — это использовать область навигации, которая стала доступна после Word 2010. Сейчас я вам покажу ее.

Перейдите на вкладку «Вид» и установите флажок «Область навигации». В левой части документа появятся все заголовки.

Только заголовки.

Весь текст, где вы использовали иной тип стиля, не будет отображаться.

Фактически, это — схема вашего документа.

Теперь предположим, что ваш преподаватель астрономии, который еще и английский язык преподает,

хочет увидеть планеты в алфавитном порядке.

Во-первых, нужно у него спросить, зачем. Во-вторых, ну ладно, сделаем.

Если бы мне пришлось делать это привычным для многих образом, мне нужно было бы щелкнуть заголовок Mercury,

выделить весь этот текст, проверить ничего ли я не упустил…

Далее мне нужно вырезать его и затем подумать, куда его вставить.

Для этого я пролистаю документ, найду нужное место и вставлю свой текст.

В объемных документах можно захватить лишние пробелы или символы, вставить в ненужное место и т. д.

Изменение расположения текста может стать утомительной процедурой довольно-таки быстро со всеми этими вырезаниями и вставками в документе.

Давайте посмотрим на область навигации. Что можно здесь делать, так это перетягивать разделы.

Итак, давайте расставим их в алфавитном порядке (на английском языке). Earth будет в начале, затем — Jupiter.

Я буду просто перетягивать их, а затем отпускать, когда нужно.

Луны Юпитера расположены произвольно, их тоже можно сортировать.

Neptune, Saturn будут выше Venus. U, V, Venus будет в конце, но перед карликовыми планетами.

Таким образом я быстро расставил заголовки в алфавитном порядке, и весь документ теперь изменен здесь в главном окне.

Давайте еще поднимемся к содержанию. Содержание не обновляется автоматически, как динамический просмотр.

Необходимо обновить его вручную. Но это не сложно. Я просто щелкну содержание

и выберу команду «Обновить таблицу». Это можно сделать и на ленте. Вы можете обновить только номера страниц, оставив заголовки на месте. Давайте сделаем это.

Теперь вы видите Mercury на странице четыре, а Saturn на странице шесть.

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

Щелкнем команду «Обновить таблицу», «Обновить целиком»,

чтобы упорядочить планеты по алфавиту (на английском языке).

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

Вы можете быстро создать содержание, упорядочить данные в области навигации,

а также легко менять местами блоки текста.

Это три огромных преимущества использования стилей.

Текст и заголовки

Filmora позволяет легко создавать текст & и заголовки, соответствующие вашему стилю. Вы даже можете добавить анимированные текстовые эффекты, такие как диалоговые шары. Субтитры, нижние 3rds,субтитры, открыватели и конечные титры входят в число текстовых опций, доступных в Filmora.

В этом руководстве вы узнаете, как это сделать:

1. Добавьте текст, заголовки, открыватели и конечные титры к вашему видео 

В Filmora есть открыватели, титры, нижние 3rds, субтитры, конечный кредит, простые тексты, шаблоны выносков. Вы можете легко добавить заголовок или другой текстовый эффект к своему видео, используя один из настраиваемых готовых шаблонов..

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

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

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

Чтобы применить вступительные и конечные знаки

Чтобы добавить открывалку (также называемую вступлением), перейдите в меню открывалки под заголовкамии щелкните, правой кнопкой мыши открывалку, которую вы хотите добавить. Выберите применитьи открывалка будет добавлена в новую видеодорожку.

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

2. Редактирование Эффектов Заголовка

Продолжительность текстового эффекта по умолчанию составляет 5 секунд. Чтобы изменить длительность текстового эффекта, перетащите один из его краев. Или вы также можете выбрать текст на временной шкале и щелкнуть значок длительности  чтобы установить новую длительность.

Чтобы изменить длительность всех эффектов по умолчанию, перейдите в меню Файл-> Настройки -> Редактирование -> Длительность эффекта.

Чтобы отредактировать эффект заголовка, дважды щелкните по нему на временной шкале, чтобы открыть панель редактирования текста. Отсюда вы можете изменить стиль (шрифт, размер, цвет, выравнивание и т. д.) и анимация вашего текста.

Чтобы отредактировать заголовок с помощью контроллера группы заголовков

Теперь вы можете использовать контроллер группы заголовков для одновременной настройки всех элементов в шаблонах заголовков.

Дважды щелкните заголовок в треке, и появится контроллер группы заголовков.

Введите значения в поля X и Y, чтобы настроить положение;

Перетащите ползунок масштабирования, чтобы настроить размер шаблона заголовка;

Перетащите ползунок поворота, чтобы изменить ориентацию шаблона.

Чтобы изменить стиль (макет, шрифт, размер, цвет и т. д.) текстовых эффектов

На вкладке стиль вы можете изменить шрифт, ввести свои слова и настроить другие параметры.

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

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

Чтобы изменить ориентацию текста, нажмите на значок T ,а затем макет текста будет изменен с горизонтального на вертикальный. Вы можете печатать вертикально при добавлении текста и заголовков к вашим видео.

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

Чтобы изменить размер текстового поля, перетащите круги вокруг него или измените настройки масштаба в разделе преобразование.

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

Чтобы Применить Текстовую Анимацию

В Filmora доступно более 80 предустановок анимации. Перейдите на вкладку Анимацияна панели редактирования текста, дважды щелкните анимацию, которую вы хотите попробовать, и посмотрите окно предварительного просмотра, чтобы увидеть, как она выглядит. Нажмите OK чтобы применить анимацию к заголовку.

Расширенное Редактирование Заголовка

Чтобы отредактировать текст еще большим количеством способов, нажмите кнопку Дополнительно чтобы войти в панель расширенного редактирования текста.

На панели расширенного редактирования текста можно добавить дополнительные элементы к предварительно созданному эффекту заголовка, такие как новые текстовые поля, фигуры или изображения.

В левом верхнем углу окна предварительного просмотра на панели:

  • Щелкните значок, чтобы добавить новое текстовое поле.
  • Щелкните значок, чтобы добавить фигуру, например стрелку, лампочку, круг или треугольник.
  • Щелкните значок, чтобы добавить изображение.

Чтобы изменить длительность добавляемого элемента любого типа, перетащите его край на временную шкалу расширенного редактирования текста.

Вы можете настроить текстовые эффекты на панели расширенного редактирования текста следующими способами: шрифт, цвет, анимация, непрозрачность, заливка, граница (цвет и размер) и тень (стиль, цвет и размер).

3. Сохранение настроенных текстовых эффектов в качестве пресетов

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

  • На панели редактирования текста после настройки текста (изменение шрифта, размера, цвета, положения или анимации) нажмите кнопку Сохранить как предустановленный.
  • Во всплывающем диалоговом окне пресет введите имя нового пресета и нажмите кнопку ОК чтобы сохранить его.

  • Пресет будет сохранен в пользовательской папке под заголовками.

Находясь на панели расширенного редактирования текста, вы можете сохранять пресеты точно так же: нажав кнопку Сохранить как пресет.

4. Удалить заголовок

Чтобы удалить эффект заголовка, просто выделите его на временной шкале и нажмите клавишу Delete на клавиатуре. Вы также можете щелкнуть значок Удалить на панели инструментов или щелкнуть правой кнопкой мыши на заголовке и выбрать пункт Удалить.

Урок 3. Заголовки и подзаголовки

 

Здравствуйте, дорогие друзья!

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

Именно для управления вниманием были придуманы такие замечательные штуки, как заголовки и подзаголовки.

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

Давайте теперь разберемся, как правильно ими пользоваться.

Заголовки

Есть три способа придумать заголовок:

  1. Назвать тему. Это самый простой подход: если мы пишем про уход за кактусом, то называем статью «Уход за кактусом». А если, например, рассказываем про корм для котят, то и заголовок будет «Корм для котят».

Эти заголовки делаются для удобного поиска информации. Чаще всего их используют в SEO-статьях и на тех сайтах, где не нужно бороться за внимание читателя.

  1. Сообщить главную мысль. Такие заголовки любят газеты и новостные порталы:

Ученые нашли на луне земной кислород;

Lego создала социальную сеть для детей;

Джеймс Кэмерон начнет снимать второй «Аватар» уже в 2017 году.

Даже если читатель и не прочитает саму статью, он узнает все необходимое из ее названия.

  1. Заинтриговать. Задача таких заголовков — вызывать интерес и заставить прочитать статью. Например:

9 фактов из школьной программы, которые оказались неправдой;

15 откровений от мужчин, которые слишком долго молчали;

Как узнать, что за вами следят через смартфон.

Как вы заметили, это всё заголовки с развлекательных сайтов, на которых идет самая «кровопролитная борьба» за внимание.

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

В конце заголовка точка не ставится. С осторожностью нужно использовать и вопросительный знак. Дело в том, что «Где в Анкаре купить оливковое масло» и «Как пересадить кактус» — это на самом деле не вопросы, а ответы.

Подзаголовки

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

Чаще всего подзаголовки просто называют тему раздела. Например, в статье про Пекин они могут быть такими: «Транспорт в Пекине», «Музеи Пекина», «Рестораны и кафе». При необходимости подзаголовки, как и заголовки, могут интриговать читателя или сообщать ему главную мысль раздела.

В последние годы стало популярным согласовывать подзаголовки с заголовком. Например, если статья называется «Чем заняться зимой», то подзаголовки будут такими: «Кататься на лыжах», «Играть в снежки», «Лепить снеговиков». Это облегчает навигацию и понимание статьи, однако этот прием не всегда уместен.

Подзаголовки обычно ставятся через каждые 2–5 абзацев, но это, прежде всего, зависит от содержания. Если раздел получается слишком большим (свыше 7 абзацев), подумайте, как разбить его на два. После подзаголовков точка опять же не ставится.

На сегодня все. Следующий раз мы поговорим про абзацы.

Всем добра!

 

Предыдущий урок — Структура статьи
Следующий урок — Абзацы

Поделиться

Твитнуть

Поделиться

Отправить

Оценить статью

Загрузка…

Заголовки, абзацы и тексты

Автор admin Просмотров 1.1к. Обновлено

HTML был создан для создания гипертекстового содержимого, и естественно, что большинство тегов были созданы для организации текстов , поэтому для определения заголовков, разделов, статей и т. Д.

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

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

Абзацы <p>

Абзац <p>является контейнерным элементом, который содержит текст и другие теги. Вот пример:

<p>Первый абзаце. Благодаря простому примеру
мы можем увидеть работу тега p. </ p>
<p> По умолчанию браузер переносит содержимое второго абзаца </ p>

Это также элемент типа « Block» , например, это означает, что основное поведение браузера заключается в переходе к концу абзаца и что для текста установлены поля.

Как вы можете себе представить, этот элемент широко используется и используется также CMS, как WordPress, для использования текста.

Тег <br>

Тег <br> обозначает разрывную строку и используется для прерывания строки в середине текста. Как вы можете легко видеть, даже если мы перейдем в конец редактора, текст в браузере не будет перенесен, за исключением конца пространства, доступного для его контейнера.

Чтобы принудительно обернуть текст, мы вставляем <br>, например, так:

Первый абзаце. Благодаря простому примеру
мы можем увидеть работу тега br. <br>
Второго абзаца

Теперь, в отличие от того, что он говорит, текст будет заканчиваться словами «тега br.».

Если мы хотим оставить линию пробела между частью текста и другой частью текста, мы обычно используем два абзаца, но может случиться так, что будет использован двойной <br>.

Первый абзаце. Благодаря простому примеру
мы можем увидеть работу тега br. <br><br>
Второго абзаца

Заголовки, заголовки h2, h3, h4 и т. Д.

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

Иерархия заголовков

Как можно догадаться по номерам, названия являются иерархическими . Это означает, что h2 будет основным заголовком страницы. Если нам нужны другие заголовки, чтобы специализировать некоторые важные разделы текста («основные разделы»), рекомендуется сначала выбрать h3 , для подразделов, которые мы будем использовать, h4и т. Д. Со все более детализированным подразделением вплоть до использования h6 .

<h2>Первый заголовок</h2>
<h3>Второй заголовок</h3>
<h4>Третий заголовок</h4>
<h4>Третий заголовок</h4>
<h3>Второй заголовок</h3>
<h4>Третий заголовок</h4>
<h4>Третий заголовок</h4>

Иерархия также влияет на вес , это значит что заголовки имеют с точки зрения тематизации страницы . SEO, как правило, советуют вставлять h2 основные ключевые слова для определения содержания и h3 вспомогательных ключевых слов.

Иерархия заголовков на домашних страницах

Если мы говорим о домашней странице, более целесообразно использовать h2 для названия сайта, h3 для категорий и h4 для заголовков последнего опубликованного контента (или наиболее важных). h5 может быть полезен для заголовков другого связанного контента, а h5 — для менее важных вещей, менее тематизируемых или менее коррелирующих с темой страницы.

Занятие 6. Углубленное изучение стилей, и многоуровневых списков

В рамках данного занятия будут рассмотрены уровни стилей (абзацев) их применение, основные правила при построении стилей, а также отличия команд «Определение нового многоуровневого списка» и «Создание нового стиля списка» для многоуровневых списков

Из предыдущих занятий мы уже знаем, что стиль в MS Word представляет собой набор определенных форматов, которые применяются к части документа. Также, мы умеем создавать простые стили, их модифицировать и применять на участках документа.

В этом вопросе данного занятия мы рассмотрим уровни стилей, зачем они нужны и как ими пользоваться.

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

Здесь сделаем два небольших пояснения. Первое касается использование словосочетания «уровни стилей». На самом деле, более правильно говорить «уровень абзаца», поскольку настройка уровня относится к абзацу, да и выставляется она в диалоговом окне «Абзац», но использование данной настройки без использования стиля есть ОЧЕНЬ большая глупость, которая делает невозможным дальнейшее управление текстом. Поэтому, несмотря на то, что настройка относится к абзацу, мы ее будем называть как «уровень стилей».

Второе пояснение относится к слову «раздел». Синонимом для слова «раздел», в контексте рассматриваемого вопроса, будем употреблять слово «глава», хотя, возможно, это не совсем правильно. Также, в предыдущем занятии мы рассматривали разрывы разделов, но там разделы использовались для применения индивидуального форматирования к различным частям макета документа. Сейчас мы будем рассматривать разделы документа в контексте логического изложения материала, названия разделов будут вынесены в оглавление документа, соответственно, данные типы разделов никоем образом не соотносятся с разделами из предыдущего занятия. Таким образом, одна глава документа может содержать несколько разделов оформления макета страницы, так само как один раздел макета страницы может содержать несколько глав документа.

Перейдем непосредственно к уровням стилей

Уровень стиля выставляется в диалоговом окне «Абзац»

Выставляя стилю определенный уровень следует понимать следующее: во-первых, текст, оформленный таким стилем, будет отображаться в структуре документа, а, во-вторых — этот же текст будет использоваться для создания оглавления. Таким образом, выставление уровней применяется к таким стилям, как «Заголовок», а эти стили, в свою очередь, используются для создания разделов структурированного текста.

Максимально можно создать девять уровней вложенности, но, как показывает практика, такое количество уровней даже избыточно, т.к. в профессиональных текстах редко используются заголовки более трех уровней вложенности, а во-вторых, никто не запрещает создавать несколько стилей одного уровня. Более того, если нужно применить разное форматирование к названиям подразделов документа, создать несколько стилей одного уровня просто придется.

Создание структурированного документа

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

    1. Представление MS Word 2013
      1. Основные элементы интерфейса. Настройка панели быстрого доступа.
      2. Создание и сохранение документа.
      3. Работа с шаблонами, предпросмотр и отправка на печать.
    2. Базовые возможности по редактированию в MS Word 2013
      1. Настройка представления документа.
      2. Навигация и поиск по документу.
      3. Поиск, замена, вырезка, вставка текста. Удаление пустых абзацев.
      4. Изменение информации о документе.
    3. Базовые возможности форматирования текста в MS Word 2013
      1. Форматирование текста вручную и с помощью инструмента «Формат по образцу»
      2. Использование простых стилей при форматировании текста.
      3. Использование инструмента WordArt.
      4. Очистка текста от форматирования.
    4. Форматирование абзацев
      1. Форматирование абзацев.
      2. Работа с одноуровневыми списками.
      3. Работа с многоуровневыми списками.
      4. Табуляция.
    5. Управление потоком текста
      1. Работа с макетом страницы.
      2. Базовые навыки работы с разрывами.
      3. Разбивка текста на несколько колонок.

Для организации документа подобной структуры понадобится два уровня стилей. Лучшем решением, при создании заголовков, будет переопределение (при необходимости) настроек существующих стилей «Заголовок». Просто выделим необходимый текст и отформатируем его соответствующим образом.

Результат проделанной работы можно увидеть, если открыть область навигации на вкладке «Заголовки».

Вставим пустую страницу в начале документа и создадим там оглавление. Вкладка «Ссылки», группа «Оглавление», команда «Оглавление», «Настраиваемое оглавление…» в диалоговом окне «Оглавление» не будем менять параметры, а просто нажмем клавишу «Ок».

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

В этом занятии мы детально изучим иерархическое устройство стилей и выведем для себя основные правила построения стилей. Несмотря на то, что все сказанное в данном вопросе, в полной мере относится как к стилям абзаца или связанных стилей (абзац + знак), так и к стилям знака, рассматривать здесь будем только стили абзаца и связанного стиля.

Иерархию устройства стилей схематически можно представить следующим рисунком.

В свете предыдущего вопроса, в котором мы рассматривали уровни абзаца и называли их уровнями стилей, следует дать небольшое пояснение относительно уровней стилей.

Иерархия стилей в документе никак не соотносится со структурой самого документа, которая была рассмотрена в предыдущем вопросе.

Отдаленную аналогию можно провести с подрядчиком, который выполняет, к примеру, строительство спортивного комплекса. Для ясности: подрядчик – стили, которые используются для оформления текста; спорткомплекс – документ со своей структурой.

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

Более того, если говорить о стилях по умолчанию (стили, которые находятся в шаблоне normal.dotx), то их иерархия, следующая:

При этом стиль «Обычный» не имеет уровня абзаца, стиль «Заголовок 1» имеет первый уровень, стиль «Заголовок 2» имеет второй уровень, остальные стили, как правило, тоже без уровня.

Как узнать уровень стиля в иерархии стилей в документе?

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

Стиль «Обычный» находится на верхнем уровне иерархии, поскольку он не основан ни на одном из стилей. В тоже время, если открыть окно настройки абзаца для данного стиля, то можно видеть, что данный стиль уровня «Основной текст», другими словами, в структуре документе у него нет уровня. А теперь посмотрим на аналогичные настройки стиля «Заголовок 1» и «Заголовок 2».

Стиль «Заголовок 1»

Стиль «Заголовок 2»


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

Что означает иерархия стиля для документа?

Для содержимого документа ровным счетом НИЧЕГО! Читателю документа, просматривающего, допустим, рисунок 5, подраздела 3.1 абсолютно неважно, что подпись к этому рисунку выполнена стилем, который был основан на стиле «Обычный» и находится на втором уровне иерархии.

А вот для форматирования документа – ОЧЕНЬ МНОГОЕ. Сейчас самое время вернуться к первому рисунку в данном вопросе. Иерархия стилей в MS Word построена таким образом, что каждый нижний стиль в иерархии добавляет какие-то свои уникальные настройки к предыдущему.

Что это значит?

Это значит то, что если в стиле более высокого уровня сделать изменения, то они будут отображены в стилях более низкого уровня, но только если стиль более низкого уровня уже не включает в себя аналогичные изменения. Например, если создать пустой документе в Word и написать часть текста стилями Заголовок 1, Заголовок 2, добавить текст стилем «Основной текст», а потом построить оглавление, то изменив цвет шрифта стиля «Обычный» (заметьте этот стиль не использовался в оформлении документа) на красный, можно увидеть, что цвет изменился у основного текста и оглавления, а цвет стилей заголовков остался прежним. Это произошло потому, что хотя все стили, использованные в документе, и построены на стиле «Обычный», стили «Заголовок 1-2» уже включат в себя изменение цвета. Если в настройках стиля «Заголовок 1» изменить цвет шрифта на цвет по умолчанию (черный), то он будет наследовать цвет стиля «Обычный» и станет красным.

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

Правила построения стилей

Теперь, когда разобрались с иерархическим устройством стилей, самое время поговорить о правилах построения стилей и ограничениях. Часть правил пользователь просто не в силах нарушить, а часть дана в качестве рекомендации.

Первое правило – имена стилей уникальны. Здесь нельзя ничего поделать, если вы хотите создать стиль, а программа выдает предупреждение, что такой стиль уже есть, либо данное имя носит встроенный стиль, то есть два пути: первый просто изменить настройки существующего стиля и использовать его, а второй – создать стиль с несколько видоизмененным названием, например, вместо «Основной текст» создать «Основной_текст» (с нижним знаком подчеркивания), либо сильнее изменить, сохранив смысл стиля, например, «Обычный текст» и т.д.

Второе правило – стили устроены иерархически. Если вы беспорядочно использовали стили в документе, а потом, преднамеренно или нет, неважно, изменили цвет родительского стиля, например, стиля «Обычный», то не стоит удивляться, что весь текст перекрасился. Здесь тоже ничего поделать нельзя, можно только использовать это в свою пользу. Именно по умению пользоваться стилями в Word можно провести первую границу между пользователями, которые умеют работать в текстовом процессоре MS Word и пользователями, которые думают, что они умеют работать в MS Word.

Для пользователей, которые не полностью разобрались с иерархическим устройством стилей, есть два пути. Первый – это использовать схему, заложенную в Word изначально, а именно, иметь только один родительский стиль «Обычный», а все остальные стили делать на его основе. При этом очень ВАЖНО понимать, что сам стиль «Обычный» использовать в документе нельзя, для оформления простого текста есть зарезервированный стиль «Основной текст», который полностью повторяет родительский стиль. Но изменения в стиле «Основной текст» не повлекут за собой изменения в других стилях.

Более того, автор, профессионально оформив не один десяток текстов, очень редко пользовался вторым уровнем вложенности в иерархии стилей. В 99% случаев схема была такой: один родительский стиль «Обычный», который был раз настроен и нигде не использовался в документе.

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

Допустим вы соискатель, который настроил для себя стили и сохранил их в качестве шаблона. Всего, при оформлении стандартного научного текста, 20-40 стилей является далеко не заоблачным числом, но возьмем, к примеру, 30 стилей, которые будут использоваться при оформлении текста. В этом шаблоне есть стили на все случаи жизни: оформление текста, цитат, выделение, оформление таблиц, рисунков, текста в таблице и т.д. Но все эти стили объединяет одно – они используют один шрифт, да с разными размерами символов, с разным начертанием, но шрифт один, как правило, это Times New Roman, но не суть важно какой.

Если вы встретите издание, которое попросит оформить текст другим шрифтом?

Что нужно сделать, если пользоваться схемой стиль «Обычный» главный, но не используется в документе, а все остальные на основе стиля «Обычный»? Нужно просто изменить шрифт в одном единственном стиле, в стиле «Обычный» и шрифт измениться во всех стилях.

Что нужно будет сделать, если создавать все стили, как независимые? Придется изменить шрифт в каждом отдельно взятом стиле.

Если уж совсем на чистоту

На самом деле, можно быстро изменить шрифт, даже, если стили не связаны иерархией, делается это с использованием шрифтов темы. Объяснение шрифтам темы будет дано в следующих занятиях, здесь все сделаем небольшое упрощение.

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

Третье правило – если создается стиль, то он должен носить осмысленное название («Для рисунка», «Для подписи рисунка», «Основной текста», «Для таблицы», «Заголовки таблицы», «Название таблицы» и т.д.), это упрощает использование стилей в дальнейшем. Если создать стили с именами «Стиль 1, 2,3…», уже на следующий день вы начнете путаться, а через неделю проще будет создать новые стили.

Правило четвертое – не стоит создавать стили двойники, т.е. стили с одинаковыми настройками для одних и тех же целей. Если Word не дает создать стиль с одинаковым именем, то создать стиль с разными именами, но одинаковыми настройками можно. Два одинаковых стиля с разными названиями прозрачности оформлению текста точно не добавят. Естественно это не касается стилей, которые могут использоваться для оформления разных объектов документа. Например, можно и нужно создать стиль «Для текста в таблице», который может в точности повторять стиль «Основной текст», но вот создавать стили одинаковой функциональной направленности точно не стоит.

Правило пятое – не стоит скупиться на стили. Если есть необходимость создать стиль выделения текста, который будет отличаться от основного текста, только выделением, тогда создайте его. Каждое форматирование должно иметь свой стиль, этот основа в автоматизации оформления текста.

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

Итак, многоуровневый список, настройка основных параметров нам знакома, а вот такие команды выпадающего меню многоуровневого списка как: «Определить новый многоуровневый список…» и «Определить новый стиль списка…» мы пока не рассматривали.

Если провести аналогию со стилями абзацев, то команду «Определить новый многоуровневый список…» можно сравнить с ручным форматированием, а команда «Определить новый стиль списка…» позволит не только качественно настроить список, но и быстро модифицировать все экземпляры списков в документе. Также, используя команду «Определить новый стиль списка…», можно настроить несколько стилей списка, сохранить их в шаблоне документа, а потом использовать в новых документах, без необходимости повторных настроек.

Разницу легче всего увидеть на реальном примере. Создадим три одинаковых списка, однотипно отформатируем скопированные списки, используя команду «Определить новый многоуровневый список…». Для того, чтобы форматирование было применено ко всем спискам можно их выделить и произвести настройки, можно отформатировать один список и воспользоваться командой «Формат по образцу», а можно выделить список и применить соответствующие настройки списка из выпадающего меню многоуровневого списка.

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

Другое дело команда «Определить новый стиль списка…» первоначальная настройка отличается от варианта, рассмотренного ранее лишь тем, что нужно дать имя создаваемому стилю, а потом уже перейти к настройкам нумерации.

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

Самое интересное – это внесение изменений в уже созданные списки, если первоначальное форматирование было произведено правильно, и каждый список имеет свой стиль, то для внесения изменений не нужно ничего выделять, не нужно искать сами многоуровневые списки в документе, достаточно просто внести изменения в соответствующий стиль списка и удостоверится, что исправления коснулись необходимых экземпляров списка.

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

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

Задание 1. Создание стилей с уровнями.

Работа с основными HTML тегами

Давайте теперь изучим основные теги, которые используются на странице. В примерах далее я для простоты не буду приводить структуру всей страницы, считайте, что мы всегда работаем внутри тега body, если не указано иное.

Абзацы

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

Абзац создается с помощью тега <p> таким образом:

<p> Это абзац. </p> <p> Это еще один абзац. </p> <p> И еще один абзац. </p>

Создайте на вашей странице 5 абзацев с каким-нибудь текстом. Посмотрите, как эти абзацы будут выглядеть в браузере.

Заголовки страницы

Кроме абзацев важное значение на странице имеют заголовки. Их также можно сравнить с заголовками из книги — каждая глава имеет свой заголовок (название этой главы) и разбита на параграфы, которые тоже имеют свои заголовки. Ну, а основной текст страницы располагается в абзацах.

Заголовки создаются с помощью тегов <h2>, <h3>, <h4>, <h5>, <h5>, <h6>. Они имеют разную степень важности. В заголовке h2 следует располагать название всей HTML страницы, в h3 — название блоков страницы, в h4 — название подблоков и так далее.

Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS, но об этом позже). Для примера сделаем заголовки всех уровней:

<h2>Заголовок h2</h2> <h3>Заголовок h3</h3> <h4>Заголовок h4</h4> <h5>Заголовок h5</h5> <h5>Заголовок h5</h5> <h6>Заголовок h6</h6>

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

Сделайте заголовок h2. Ниже сделайте заголовок h3, а под ним — абзац с текстом. После абзацев сделайте еще один заголовок h3, а под ним — 2 абзаца с текстом.

Жирный

Вы уже знаете, что заголовки по умолчанию жирные. Однако, можно сделать жирным и обычный текст — достаточно взять его в тег <b>. Смотрите пример:

<p> Это обычный текст, а это <b>жирный</b> текст. </p>

Проверьте работу тега <b> на вашей странице.

Курсив

Кроме жирного можно сделать также и курсив с помощью тега <i>:

<p> Это обычный текст, а это <i>курсивный</i> текст. </p>

Проверьте работу тега <i> на вашей странице.

Замечания

Обратите внимание на то, что теги <b> и <i> следует использовать внутри какого-либо другого тега, например абзаца. В этом случае абзацы создают общую структуру страницы (абзацы и заголовки), а указанные теги делают жирным или курсивом отдельные кусочки текста.

4 проверки доступности, которые вы можете выполнить с помощью Yoast SEO и редактора блоков • Yoast

Наличие доступного веб-сайта означает, что больше людей могут использовать ваш веб-сайт и информацию, которой вы делитесь. Есть несколько проверок, которые вы можете сделать самостоятельно перед публикацией статьи, чтобы убедиться, что вашу статью может прочитать и понять как можно больше людей. Знаете ли вы, что Yoast SEO и редактор блоков, редактор контента по умолчанию в WordPress, имеют встроенные инструменты, которые могут предупредить вас о распространенных ошибках и помочь вам протестировать ваш контент? Вот список из четырех вещей, которые вы можете легко проверить!

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

Мы создали Yoast SEO, чтобы помочь вам оптимизировать и структурировать ваш контент и улучшить его читабельность. Инструменты в плагине помогают вам писать доступный контент, пока вы работаете над улучшением SEO своего сайта. Более того, редактор блоков WordPress позволяет вам выполнять несколько быстрых проверок, чтобы убедиться, что вы случайно не исключили посетителей из доступа к вашему контенту.Давайте углубимся.

Вы можете найти более технический пост с советами по специальным возможностям в нашем блоге разработчиков, если вы предпочитаете его читать!

1. Добавить текстовые альтернативы для медиа

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

Как проверить, доступны ли ваши изображения

Сначала следует проверить, есть ли в вашем контенте изображения текста, которые можно удалить и заменить обычным текстом.Изображения текста имеют ряд недостатков, которые делают их менее доступными по сравнению с обычным текстом. Вы не можете использовать настройки браузера для изменения размера или цвета фона текста или изображения. Таким образом, люди с проблемами зрения, дальтонизмом или нарушениями зрения могут испытывать трудности с его видением. Изображения также увеличивают время загрузки вашей страницы. И Руководство по доступности веб-контента, и Google не рекомендуют использовать изображения текста.

Далее вы должны убедиться, что все изображения имеют альтернативный текст (теги alt).SEO-анализ Yoast предупредит вас, если есть изображения, на которых отсутствует замещающий текст, а также если на изображении отсутствует ключевая фраза.

Альтернативный текст описывает назначение образа. Насколько длинным должен быть альтернативный текст, зависит от вашего языка, но рекомендуется использовать менее 125 слов.

Когда альтернативного текста недостаточно

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

Подробнее: Оптимизация изображений: как оптимизировать замещающий текст и текст заголовка »

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

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

Если в видео отображается важная информация, которую диктор не объясняет, или если в видео нет звука, то необходимо описание для людей с нарушениями зрения.

Как загружать подписи к видео

После того, как вы подготовили файл титров к видео, вы можете добавить его к своему видео прямо в блоке видео.

  1. Сначала добавьте блок видео и выберите свое видео.
  2. Далее выберите на панели инструментов блока опцию под названием Текстовые дорожки.
    Выбор этого параметра позволяет загрузить файл или выбрать его из медиатеки:

Продолжить чтение: Как добавлять подписи к видео »

2. Сделайте текст легко читаемым

Вы когда-нибудь быстро просматривали веб-страницу, а затем обнаруживали, что вам нужно вернуться и снова прочитать абзац, чтобы понять его? Вы можете сделать свой текст более читабельным, следуя советам анализа читабельности Yoast SEO.

Использование коротких предложений и описательных заголовков облегчает чтение текста тем, кто спешит.Но знаете ли вы, что это также может облегчить жизнь людям с нарушениями слуха? Для некоторых глухих чтение текста означает перевод его на второй язык, потому что их родной язык — язык жестов.

Если вы хотите, чтобы ваш текст был доступен для всех, вам нужно поддерживать высокую оценку легкости чтения Флеша и избегать использования сложных слов. Иногда, когда вы говорите на определенную тему, сложно сделать текст простым. Старайтесь изо всех сил — если вы сможете сделать свой текст более удобным для чтения, он будет доступен большему количеству людей.

Читайте дальше: Шкала легкости чтения Флеша: зачем и как ее использовать »

3. Найти и исправить проблемы с заголовками

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

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

Советы по использованию заголовков для обеспечения доступности

  • Заголовки имеют шесть различных уровней, которые указывают на важность вашего контента.
  • Вы должны использовать заголовок h2 только один раз на своей странице, и в большинстве случаев это будет заголовок вашей страницы.
  • За h2 должен следовать h3; за h3 следует h4 и так далее.
  • Вы можете использовать несколько заголовков h3 (или ниже), если у вас есть несколько разделов одинаковой важности.

Как проверить правильность порядка заголовков

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

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

Продолжайте читать: основы SEO Как использовать заголовки на вашем сайте »

4. Убедитесь, что цвета достаточно контрастны

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

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

Как проверить цветовой контраст с помощью палитры цветов

  1. Выберите текстовый блок, который вы хотите протестировать.
  2. Откройте цветовую панель на боковой панели настроек блока.

Если цветовой контраст слишком низкий, вы увидите предупреждение «Эта цветовая комбинация может быть трудночитаемой для людей».

Заключение

Внесение незначительных изменений в ваш контент может положительно повлиять на доступность вашего веб-сайта, и это не должно быть сложным. SEO и доступность идут рука об руку; когда вы улучшаете один, вы, скорее всего, улучшаете оба. Возможно, вы читали фразу «поисковики слепы», но вы всегда должны писать в первую очередь для людей.

Подробнее: Как улучшить доступность вашего сайта »

Каролина Наймарк

Каролина является членом основной команды WordPress. Ее внимание сосредоточено на доступности и темах, и ей нравится каждый аспект разработки тем.

В чем разница между заголовком h2 и SEO-заголовком? • Йост

Писатели, как правило, тщательно обдумывают свои заголовки. Для онлайн-контента заголовки важны как для читателей, так и для поисковых систем.Это делает их вдвойне важными! Если вы используете WordPress и наш плагин Yoast SEO, вы вставляете заголовок сообщения в поле ввода заголовка сообщения. Ваш заголовок будет отображаться в виде заголовка h2 в верхней части вашего сообщения. Но Yoast SEO также предлагает возможности редактировать и улучшать заголовок SEO отдельно. Почему это? Какая разница? И как его можно отредактировать? Я объясню в этом посте.

Два поля ввода

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

Вы можете найти поле ввода для SEO-заголовка в мета-поле Yoast SEO, которое появляется под полем ввода сообщения. Чтобы отредактировать этот заголовок, вам нужно нажать на кнопку редактирования фрагмента. Откроется предварительный просмотр Google. Предварительный просмотр Google предлагает вам три поля ввода. Первое — это поле ввода для редактирования вашего SEO-заголовка.Под полем ввода вы, надеюсь, увидите зеленую полосу. То есть он будет зеленым, если этот заголовок хорошо оптимизирован. Если он оранжевый или красный, вы должны приложить некоторые усилия для его улучшения. Как видите, в поле ввода показаны различные переменные (выделены фиолетовым цветом), которые будут использоваться для создания окончательного заголовка, который будет отображаться в поисковых системах.

Назначение заголовка поста и SEO-заголовка

Важно понимать, что ваш SEO-заголовок не имеет той же цели, что и заголовок вашего поста или страницы (ваш заголовок h2).Название вашего сообщения предназначено для людей, которые уже находятся на вашем сайте. Это говорит им, о чем ваш пост или страница. С другой стороны, ваш SEO-заголовок предназначен для людей, которые еще не зашли на ваш сайт. Он будет показан людям в поисковых системах. Это будет заголовок вашего сниппета в Google — поэтому он отображается в превью сниппета. Цель состоит в том, чтобы заставить людей нажать на фрагмент, перейти на ваш сайт и прочитать ваш пост или купить ваш продукт.

Что автоматически делает Yoast SEO?

Ничего не делая, Yoast SEO сгенерирует SEO-заголовок на основе заголовка вашего поста, заголовка h2.Это также поместит название вашего сайта в этот заголовок. Если вы этого не сделаете (или наш плагин этого не сделает), Google сделает это за вас. Yoast SEO позаботится о том, чтобы ваш заголовок не был слишком длинным — вы получите уведомление, если ваш заголовок слишком длинный. В Yoast мы используем небольшой маркер, чтобы отделить заголовок сообщения от названия сайта, но вы также можете использовать, например, тире.

В Yoast мы используем маркер, чтобы отделить заголовок от названия сайта.

Вы можете указать способ создания SEO-заголовка в разделе «Внешний вид в поиске» Yoast SEO.Если вы сделаете это, все заголовки ваших сообщений будут сгенерированы точно таким же образом. Но, как описано выше, вы также можете отредактировать этот заголовок отдельно для поста. В следующем абзаце мы объясним, в каких случаях вы хотели бы это сделать.

Нужно ли редактировать SEO-заголовок?

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

Если я хочу изменить свой заголовок, возможно, из-за того, что я забыл использовать ключевое слово focus в заголовке своего поста, я всегда меняю заголовок поста. Название SEO изменится вместе с этим. Для таких постов это работает нормально. Однако, если вы продаете продукт, заголовок поста или страницы может быть не лучшим заголовком. Возможно, вы хотели бы указать цену продукта в своем SEO-заголовке, но не в h2 своей страницы.В этих случаях необходимо отредактировать этот заголовок.

Как вы редактируете заголовок SEO?

Шаблон заголовка

Как описано выше, Yoast SEO автоматически генерирует для вас SEO-заголовки. Для этого используются переменные сниппета (фиолетового цвета). Вы можете адаптировать этот шаблон заголовка по своему вкусу в разделе «Внешний вид в поиске» Yoast SEO. Перейдите на вкладку «Типы контента» и прокрутите до типа контента, для которого вы хотите изменить шаблон заголовка, например, сообщения. Вы можете использовать плюс справа, чтобы выбрать, какие переменные вы хотели бы использовать:

Вы можете найти все о настройке этих переменных фрагмента в сообщении Эдвина.Обзор всех переменных сниппета можно найти в нашей базе знаний.

Для отдельного поста

Если вы работаете над публикацией и хотите изменить заголовок SEO, вы можете просто щелкнуть по нему в мета-поле Yoast SEO под своим сообщением. Вы можете написать для него эксклюзивный текст, использовать определенные переменные сниппета или их комбинацию. Например, если вы хотите просто изменить первую часть заголовка, но сохранить разделитель и название сайта, вы можете создать такой заголовок: «[настраиваемый заголовок сообщения] — Разделитель — Название сайта».

Заключение

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

Подробнее: Создание хорошего заголовка страницы для SEO »

Марике ван де Ракт

Марике ван де Ракт — директор по маркетингу в Yoast.Она любит писать о поисковой оптимизации контента, выступать на WordCamps и улучшать Yoast SEO и Yoast SEO Academy: платформу онлайн-курсов.

Обучающие заголовки и подзаголовки — Алисса учит

I. Любовь. Обучение функциям нехудожественного текста. Я люблю их, потому что они действительно помогают читателям понять смысл во время чтения. В Вирджинии одним из наших стандартов является обучение студентов эффективному использованию заголовков и подзаголовков при чтении информационного текста.Прочтите несколько советов, которые вы можете использовать, чтобы научить этому навыку!

Что такое заголовки и подзаголовки?

Заголовки — это короткие слова или фразы, которые обычно появляются вверху страницы. Они позволяют читателю узнать, о чем страница, глава или раздел текста. Заголовки помогают систематизировать информацию на странице. Обычно они набраны крупным или жирным шрифтом, поэтому они отделены от остальных слов. [Обязательно следите за детьми, которые пропускают чтение, особенно в младших классах!]

Подзаголовки дополнительно помогают разбить текст на более мелкие фрагменты.Они дают читателю представление о том, чего ожидать в каждом разделе страницы или части главы.

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

Упражнения для изучения заголовков и подзаголовков

Вот некоторые из моих любимых упражнений, чтобы научить студентов эффективно использовать заголовки и подзаголовки при чтении!

  • Найдите заголовки. Предложите учащимся просмотреть научно-популярные книги и журналы и отметить на стикерах примеры заголовков и подзаголовков. Мне нравится, когда студенты делятся, чтобы они видели множество примеров (особенно те, которые представлены в форме вопроса).
  • Попросите учащихся посмотреть на определенный заголовок или подзаголовок и провести мозговой штурм слов и фраз , которые они могут найти в тексте во время чтения.
  • Потренируйтесь превращать заголовки в вопросы. Это отличный способ для учащихся активировать свою схему и подумать о том, что они уже знают по этой теме, и что они могут найти при чтении.
  • Игра на совпадение! Дайте учащимся короткие предложения или абзацы научной литературы и попросите их подобрать правильный заголовок к каждому из них. Это отлично подходит для партнерской деятельности, чтобы поддержать их обучение!
  • Напишите сами! Дайте учащимся короткие абзацы научной литературы и попросите их написать свои собственные заголовки для соответствия.Это отличный способ поработать над каким-то научным или социальным содержанием, или вы можете сделать их глупыми и повеселиться! Это также хороший способ для студентов попрактиковаться в поиске темы и основной мысли текста.
  • Охота за сокровищами! Отобразите страницу текста, содержащую несколько подзаголовков, и предложите учащимся угадать, какой раздел будет содержать тот или иной факт.
  • И, наконец, поскольку мы любим соединять чтение и письмо, я также рекомендую учащимся использовать заголовки и подзаголовки при написании информационного текста!

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

Как я уже говорил, мне нравится обучать функциям текста, потому что я думаю, что они очень полезны для читателя. Все эти интерактивные занятия являются практическими и простыми способами изучения заголовков и подзаголовков в документальном тексте.

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

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

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

Этот ресурс был приведен в соответствие с Общими базовыми стандартами штатов для штатов, в которых они были приняты. Если состояние не отображается в раскрывающемся списке, ожидается выравнивание CCSS.

Этот урок был приведен в соответствие со стандартами в следующих штатах. Если состояние не отображается в раскрывающемся списке, стандартные выравнивания в настоящее время недоступны для этого состояния.

Национальные стандарты NCTE/IRA по английскому языку

  • 1. Учащиеся читают широкий спектр печатных и непечатных текстов, чтобы лучше понять тексты, самих себя и культуру Соединенных Штатов и всего мира; получать новую информацию; реагировать на потребности и требования общества и на рабочем месте; и для личной реализации. Среди этих текстов художественная и научно-популярная литература, классические и современные произведения.
  • 3. Учащиеся применяют широкий спектр стратегий для понимания, интерпретации, оценки и оценки текстов. Они опираются на свой предыдущий опыт, свое взаимодействие с другими читателями и писателями, свое знание значения слов и других текстов, свои стратегии идентификации слов и свое понимание текстовых особенностей (например, соответствие звука и буквы, структуру предложения, контекст, графику). ).

Найдите образцы текстов в онлайн-журналах, перечисленных в разделе Веб-сайты этого плана урока, или используйте учебники из вашего класса или другие печатные ресурсы из вашей библиотеки.Выберите три кратких и интересных описательных текста, чтобы использовать их в качестве образцов со своими учениками. Учитывайте уровень чтения ваших учеников, а также их интересы и учебную программу. Для примеров текстов 2 и 3 скопируйте заголовки разделов на каталожные карточки. Затем опустите заголовки разделов в текстах с корректирующей жидкостью и вставьте пустую строку, чтобы учащиеся могли заполнить заголовки позже. Распечатайте достаточно копий каждого образца текста, чтобы у всех учащихся была своя копия. Обязательно заранее внимательно прочитайте тексты, чтобы ознакомиться с их содержанием.

Студенты будут

  • Принять участие в мозговом штурме о целях заголовков разделов
  • Прочитайте образец текста и вставьте недостающие заголовки разделов с помощью учителя
  • Прочтите образец текста и самостоятельно вставьте недостающие заголовки разделов
  • Уметь излагать учителю цели заголовков разделов
1. Объясните учащимся, что сегодня они рассмотрят интересную статью и расскажут о стратегии, которую они могут использовать, чтобы лучше понять то, что они читают.
2. Раздайте статью или текст, который вы выбрали в качестве образца текста 1, и спросите учащихся, что они замечают, когда смотрят на текст. Студенты, вероятно, заметят различные детали, такие как изображения, подписи, название и так далее. После того, как кто-нибудь заметит заголовки разделов, скажите учащимся, что они называются заголовков разделов. Попросите учащихся обвести или выделить все заголовки разделов в образце текста. Затем скажите им, что вы собираетесь прочитать текст вслух. Во время чтения вы хотите, чтобы они думали о том, почему автор включил в текст заголовки разделов. Прочитайте весь текст всей группе с выражением или предложите учащимся принять участие в чтении текста вслух.
3. Пригласите класс к мозговому штурму, чтобы обсудить, почему автор поместил заголовки разделов в текст.Составьте список целей для заголовков разделов. Если учащиеся не генерируют следующие идеи, подскажите им также и заголовки разделов:
  • Расскажите читателю, чего ожидать от следующего раздела
  • Подсказка к основной идее предстоящего раздела
  • Помогите читателю упорядочить идеи статьи
  • Предварительный просмотр того, к чему приводит вся статья
  • Обеспечьте переход между последним разделом и следующим, который имеет новую основную идею
  • Позвольте читателю установить связь с понятиями, с которыми он или она уже знакомы, прежде чем читать всю статью

Занятие 2: практический урок

1. Просмотрите список целей для заголовков разделов и объясните, что сегодня они будут тренироваться вставлять заголовки разделов в другую статью.
2. Распространите статью или текст, который вы выбрали в качестве образца текста 2. Помните, что заголовки разделов в этом тексте заменены пустыми строками.
3. Напишите на доске заголовки разделов исходной статьи или текста. Скажите учащимся, что они будут действовать как детективы, чтобы выяснить, где эти заголовки относятся к тексту.Учащиеся могут работать в группах, чтобы прочитать текст и определить, где заголовки разделов, указанные на доске, лучше всего подходят к тексту. Вместе они должны отметить обоснование каждого своего выбора.
4. Прочитайте статью вслух вместе с учениками. Вовлеките учащихся в обсуждение в классе того, к чему относится заголовок каждого раздела и как они пришли к своим выводам.
1. Просмотрите список целей для заголовков разделов и объясните, что сегодня они будут работать независимо, чтобы вставить заголовки разделов в другую статью.
2. Распространите статью или текст, который вы выбрали в качестве образца текста 3. Помните, что заголовки разделов в этом тексте заменены пустыми строками.
3. Напишите на доске заголовки разделов исходной статьи или текста. Скажите учащимся, что они снова выступят в роли детективов, чтобы выяснить, где эти заголовки относятся к тексту.Учащиеся работают самостоятельно, заполняя пропущенные заголовки.
  • В небольших группах учащиеся просматривают свои учебники, другие примеры текстов, предоставленные учителем, или библиотечные ресурсы, чтобы изучить назначение заголовков разделов. Группы записывают свои выводы и отчитываются перед классом.
  • При наличии текста или статьи, в которой опущены заголовки разделов, учащиеся читают текст и дают свои собственные соответствующие заголовки.Позже они могут сравнить свои заголовки с заголовками оригинального автора.
  • Учащиеся пишут свой пояснительный текст, используя соответственно от трех до пяти заголовков разделов.
  • Учащиеся создают планы, используя заголовки разделов в учебниках по предметной области. Под каждым заголовком учащиеся делают краткие заметки или резюмируют то, что они узнали в каждом разделе.

Оценка учащихся / размышления

  • См. Занятие 3 для оценки
  • Попросите учащихся написать или рассказать вам, что они узнали о целях для заголовков разделов.В своем письме они должны перечислить как можно больше целей. Учитель может оценить понимание учащимся заголовков разделов по количеству перечисленных целей.
  • Попросите учащихся подумать над тем, что они узнали, отвечая на вопросы, например:
1. Что я сделал для этого урока?

2. Насколько хорошо мы использовали свое время?

3. Какой план использовала моя группа для сортировки заголовков?

Текст и заголовки | Руководство по веб-стилю

Дата и время

Даты и время, указанные на веб-сайтах, должны соответствовать стилю Associated Press (AP).При перечислении дат месяцы следует писать с большой буквы и не использовать st, nd, rd или th. При указании времени оставьте один пробел после указанного времени и укажите время дня как «утро». или «пополудни» с включенными периодами и не капитализированы.

  • Пример: 1 октября 2014 г., 12:30.

Заголовки

У вас может быть вводный текст перед добавлением первого заголовка. Семейство шрифтов основного текста и заголовков, размер и цвет предопределены таблицей стилей нашего веб-сайта.

h4 Заголовок

Создайте заголовок выше, нажав кнопку «H» в редакторе WYSIWYG. Это не должно быть жирным шрифтом или курсивом. Он также не должен включать двоеточие или многоточие. Используйте эти заголовки, чтобы разбить текст для удобства редактирования.

Не используйте жирный шрифт для заголовков.

h5 Заголовок

Если для вашего контента требуется несколько уровней заголовков, обратитесь в группу веб-контента.

Не используйте полужирный основной текст для заголовков более низкого уровня.

Акцент

Иногда вам нужно, чтобы определенный текст выделялся в вашем контенте.Способ сделать это — сделать его жирным. Это делается путем выделения текста и нажатия кнопки «B».

Не используйте эти механизмы для выделения текста:

  • Все заглавными буквами (это считается криком).
  • Подчеркнуто (зарезервировано для ссылок).
  • Курсив (это зарезервировано для названий книг и т. д.).

Голос и тон

Когда вы пишете для Интернета, учитывайте свою аудиторию . Вы общаетесь с будущими студентами или преподавателями? Используйте разговорный, но точный и авторитетный голос.Говорите так, как если бы вы говорили с другим человеком, а не так, как когда пишете статью. В общем, используйте более неформальный, более личный тон.

Меньше

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

Больше похоже на это

Хотите узнать больше о Колледже Лютера? Для начала зайдите на страницу «О Лютере», где вы найдете такую ​​информацию, как история колледжа, академические достижения и многое другое.Когда вы закончите, перейдите на страницу студенческой жизни, чтобы узнать о жизни в кампусе.

При написании контента для веб-сайта Лютера старайтесь быть:

  • Приветливый, но не нуждающийся/отчаянный (например, нам не нужно «Спасибо за проявленный интерес…»)
  • Интеллектуальный, но не душный (особенно для сайтов кафедр/факультетов)
  • Четко и по делу, но не резко
  • Современный, но не повседневный
  • Доступный (и временами юмористический), но не глупый

Узнайте больше из этой статьи о стиле, дикции, тоне и голосе.

Заказные списки

Если вам нужно пронумеровать шаги или что-то подобное, используйте функцию упорядоченного списка в Reason. Нажмите кнопку «Упорядоченный список», чтобы начать:

  1. Шаг 1: Сделайте это.
  2. Шаг 2: Сделайте это.
  3. Шаг 3: Сделайте что-нибудь еще.
  4. Шаг 4: Не делайте этого.
  5. Шаг 5: Категорически не делайте этого.

Нажмите кнопку еще раз, чтобы завершить упорядоченный список.

Ненумерованные списки

Если вам нужны маркеры, используйте функцию неупорядоченного списка в Reason.Нажмите кнопку «Ненумерованный список», чтобы начать:

  • Первая пуля
    • Подпункт 1
    • Подпункт 2
      • Подпункт 1
      • Под-под-пуля 2
    •  Подпункт 3
  • Вторая пуля
  • Третья пуля

Используйте кнопку с отступом, чтобы получить несколько уровней маркеров.

ПРИМЕЧАНИЕ. Первое слово всегда пишется с большой буквы. Используйте точку для полных предложений.Будьте последовательны в пределах заданного списка.

Форматы текста (заголовки) | San Joaquin Delta College

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

Заголовки

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

Заголовки должны применяться в иерархическом порядке (аналогично схеме).

  • Заголовок 1: Самый важный заголовок на странице. Будет только один Заголовок 1, и он всегда будет применяться к заголовку страницы. Вам не нужно добавлять элемент Заголовок 1.
  • Заголовок 2:  Первый подзаголовок страницы
  • Заголовки 3–5: Это дополнительные заголовки под Заголовком 2.
  • Обычный : «Обычный» формат — это обычный текст, также известный как текст «абзаца».Обычный текстовый формат используется для всего текста, кроме заголовков. Если вы не примените элемент форматирования к своему тексту, он автоматически станет обычным текстом.

Примеры заголовков:

Заголовок 2

Рубрика 3

Товарная позиция 4
Товарная позиция 5

Обычный текст

 


Применить формат к заголовкам

Чтобы применить формат к заголовку на вашей странице:

  1. Выберите текст, к которому вы хотите применить формат
  2. Щелкните раскрывающийся список форматов на панели инструментов
  3. Прокрутите, чтобы найти формат, и выберите его, чтобы применить формат.


Удаление или изменение применяемого формата  

  1. Поместите курсор в существующий блок текста или выберите текст.
  2. Щелкните раскрывающийся список форматов . Примененный формат будет выделен..
  3. Щелкните текущий примененный формат, чтобы отменить его выбор (это изменит текст на абзац.  Или выберите другой формат.

Освоение заголовков и иерархии текста

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

Текст и дизайн идут рука об руку. Вы не будете публиковать блог на веб-сайте со сплошной колонкой текста, и ваши читатели не будут его читать. Однако, когда большинство людей думает о графическом дизайне, они автоматически исключают текст. Ведь есть текст и есть картинки, верно? Не так!

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

Текстовая иерархия и заголовки

Так что же такое текстовая иерархия и как в нее вписываются заголовки? Иерархия — это все, что организовано сверху вниз.От короля к крепостному, от директора к помощнику по производству, от генерала к рядовому, от первого стула к последнему стулу; все это примеры иерархий. Текстовая иерархия точно такая же, ранжируя элементы страницы от наиболее заметных до наименее заметных. Однако внутри одной страницы может быть много более мелких иерархий, что создает интересный графический дизайн вниз по странице.

Кроме того, сканеры поисковых систем сканируют ваши заголовки точно так же, как читатель. Ключевые слова и полезная информация в ваших заголовках (и сразу после них) могут принести вам более высокий рейтинг, а иногда даже место в сниппете.Разберем элементы заголовка и иерархии:

  • h2 Название / Заголовок
    • Заголовок — это самый крупный текст, который часто используется в качестве заметного титульного баннера для современных блогов и страниц. Общая сумма обобщает страницу и обычно строится вокруг ключевых слов или целевых поисковых фраз (ключевых слов с длинным хвостом).
  • h3 Подзаголовки
    • Подзаголовки организуют страницу. Используйте их для заголовков абзацев и разделов. Они служат дорожной картой для страницы и часто являются первым, что читатели просматривают.Используйте ключевые слова в подзаголовках и, если вы профессионал, поработайте над несколькими шутками.
  • п Пункты
    • Абзацы составляют основу страницы. Они содержат подробное содержание и часто не требуют никаких обозначений. Абзацы часто разбиваются через каждые три-шесть предложений и/или строк текста. Группы абзацев могут быть организованы в подзаголовки разделов.
  • h4 Подзаголовки
    • Иногда используется, когда темы в разделе разнообразны и заслуживают дальнейшей организации.
  • * Пункты списка
    • Эти точки можно использовать между абзацами или вставлять их в них. Точки помогают суммировать информацию и служат визуальной динамической разницей в расположении текста.
  • ” Плавающие котировки
    • Цитаты блоками или во всю ширину столбца используются для разделения абзацев и выделения цитаты.

Взгляд дизайнера на дизайн страницы

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

Естественно, текст образует иерархию. У вас может быть несколько разделов h3 с подразделами h4 и маркерами. Вставьте плавающие кавычки для визуальной привлекательности и выделения контента.При этом вы, вероятно, решите, где разместить несколько изображений и как должен выглядеть контент при кадрировании этих изображений.

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

Дизайн текста без статьи

Заголовки и текстовая иерархия важны не только для текстовых страниц. Подумайте, как размер текста, шрифт и заголовок влияют на вашу домашнюю страницу. То, что может показаться подразделами на текстовой странице, в веб-дизайне может быть организовано в виде графики с помощью аннотаций. Затем заголовки могут иметь текст описания и несколько подробных информационных пузырей вместо обычной иерархии. Тем не менее, за кулисами h3 и h4 все еще используются и помогают организовать вашу страницу.

Оттачивание техники иерархии

Титулы, заслуживающие доверия

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

Написание мощных подзаголовков

Написание подзаголовков ведет за собой читателя. Помните, что они читают подзаголовок перед абзацем. Подзаголовок говорит им, чего ожидать, и обещает, что они найдут. Подзаголовки могут быть определяющими (например, «Молекулярная структура картофеля») или ведущими (например, «Когда план провалился»). Главное — знать своего читателя.

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

Как уточнить ваши данные

Абзацы предназначены для расстановки точек. Но иногда вы хотите использовать список, диаграмму, маркеры или цитаты. Эти элементы помогают разбивать текстовые блоки и выделять ключевую информацию. Ваша цель состоит в том, чтобы найти правильные факты, чтобы выделить.Маркеры могут помочь наметить процесс, который вы подробно изучите, или просто организовать краткий список различных утверждений. Списки иногда предлагают много информации или очень подробный пакет информации в удобном для просмотра виде.

Расставьте списки пунктов так, чтобы они разбивали страницу. Цитаты лучше всего работают в виде узких полос или боковых прожекторов ключевого содержания. Нумерованные списки лучше всего работают в верхней части контента или при обобщении большого объема информации для удобства читателя.

Повышение удобства чтения

Наконец, подумайте о читательском опыте посетителя вашего веб-сайта. Речь идет не только об их эстетическом восприятии страницы, но и об их потреблении контента. Многие бренды сосредотачивают свой лучший контент и сводку страницы вверху — до того, как страницы-вышибалки отскочат. Технологические и академические бренды иногда встраивают свой лучший контент «вниз», потому что они знают, что только преданные читатели хотят технических подробностей.

Это может повлиять на иерархию страниц. Если вы поместите краткое изложение «TLDR» (слишком длинное, не читал) вверху, ваши подзаголовки должны отражать это краткое изложение при прокрутке вниз. «Список» — это серия одинаковых подзаголовков, часто смешанных так, что список кажется приятной мешаниной. Это контрастирует с обратным отсчетом, который похож на список, но сами подзаголовки ранжируются.

Образовательные статьи и статьи с практическими рекомендациями, скорее всего, будут иметь динамичный дизайн. Чаще всего можно увидеть разделы h3, за которыми следуют маркированные списки и подзаголовки h4 ниже, с многоточечными разделами по всей странице.Это указывает на подробное содержание, где факты организованы так, как удобно читателю.

Правильная иерархия страниц для контента вашего веб-сайта

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

Leave a Reply