Як користуватися HTML-редактором

HTML-редактор

Огляд

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

У цій статті ви дізнаєтесь, як отримати доступ до різних елементів редактора та використовувати їх для створення захопливого та естетичного контенту.

Інформація
Зверніть увагу, що бізнес-платформа за замовчуванням використовує термін « семестровий курс» , а академічна платформа — термін «семестрове заняття» . У цій статті терміни «курс» і «заняття» є взаємозамінними.

Меню панелі інструментів

Редактор HTML відображається під час редагування вмісту курсів, повідомлень, віджетів тощо. Панель інструментів складається з рядка меню та значків, які дозволяють редагувати вміст розділу.

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

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

Верхній рядок меню складається з семи меню, які детальніше розглянуті нижче.



Файл

Меню «Файл» містить такі дії:

Назва
Опис
Новий документ
Очищає текстове вікно від усього тексту/зображень/посилань.
Попередній перегляд
Відкрийте спливаюче вікно, щоб переглянути попередній перегляд опублікованого контенту.
Друк
Роздрукуйте вміст у текстовому вікні.

Редагувати

Меню «Редагувати» містить такі дії.

Назва
Опис
Скасувати
Скасувати вашу останню дію.
Повторити
Повторіть свою останню дію.
Вирізати
Видалити вибраний текст/зображення та зберегти його в буфері обміну.
Копіювати
Скопіюйте вибраний текст/зображення та збережіть його в буфері обміну.
Вставити
Вставити текст/зображення з буфера обміну.
Вставити як текст
Вставити вміст з буфера обміну лише як текст, без форматування.
Вибрати все
Виділити весь вміст у текстовому вікні.
Знайти та замінити
Знайдіть слово або фразу та замініть новим словом/фразою (якщо можливо).

Переглянути

Меню «Вид» містить такі дії для перегляду тексту та символів у текстовому вікні.

Назва
Опис
Вихідний код
Переглянути/відредагувати вихідний код у текстовому вікні.
Показати невидимі символи
Відображає невидимі символи, такі як пробіли та м’які перерви.
Показати блоки
Показує блоки абзаців у текстовому вікні.
Попередній перегляд
Відкрийте спливаюче вікно, щоб переглянути попередній перегляд опублікованого контенту.

Вставка

Меню «Вставити» містить такі дії для вставки зображень, відео, таблиць, посилань тощо.

Назва
Опис
Посилання
Вставити гіперпосилання на URL-адресу.
Медіа
Вставити/вбудувати медіафайл.
Стіл Вставити та побудувати таблицю.
Спеціальний символ Вставте спеціальний символ.
Емодзі Вставте емодзі.
Горизонтальна лінія
Вставте горизонтальну лінію.
Розрив сторінки
Вставте розрив, щоб розпочати нову сторінку.
Нерозривний пробіл
Вставте пробіл, який не розриває сторінку.
Якір
Вставити якір/закладку в позицію/розташування.
Вставити шаблон
Вставити збережений шаблон.
Зберегти як шаблон
Збережіть виділений текст як шаблон.
Дата/час
Вставте параметри дати або часу з випадаючого меню.
Редагувати рівняння
Натисніть, щоб редагувати виділене рівняння.
Завантажити зображення
Натисніть, щоб завантажити зображення.
Завантажити файл
Натисніть, щоб завантажити файл.
Створити веб-конференцію
Натисніть, щоб додати веб-конференцію до тексту*.
Запис аудіо
Натисніть, щоб записати аудіо безпосередньо у текстовому вікні.
Записати відео
Натисніть, щоб записати відео безпосередньо у текстовому вікні.
Інформація
* Щоб відобразилися параметри створення веб-конференцій, спочатку потрібно встановити програму(и) для веб-конференцій із центру програм.

Формат

Меню «Формат» містить такі дії для форматування тексту.

Назва
Опис
Жирний шрифт
Виділити виділений текст жирним шрифтом.
Курсив
Виділити виділений текст курсивом.
Підкреслення
Підкресліть виділений текст.
Закреслення
Закреслити виділений текст.
Надрядковий індекс
Відформатувати виділений текст як верхній індекс.
Підрядковий індекс
Відформатувати виділений текст як нижній індекс.
Код
Відформатуйте виділений текст як код.
Блоки
Вставте відповідне форматування блоку з випадаючого меню.
Шрифти
Виберіть інший шрифт у випадаючому меню.
Розміри шрифтів
Виберіть розмір шрифту з випадаючого меню.
Вирівняти
Виберіть стиль вирівнювання тексту з випадаючого меню.
Висота рядка
Виберіть висоту рядка з випадаючого меню.
Збільшити відступ
Зробіть відступ тексту або абзацу праворуч.
Зменшити відступ
Перемістити текст або абзац ліворуч.
Колір тексту
Виберіть потрібний колір тексту з випадаючого меню.
Колір фону
Виберіть колір фону з випадаючого меню.
Очистити форматування
Очистити форматування з вибраного тексту.

Інструменти

Меню «Інструменти» містить такі дії.

Назва
Опис
Вихідний код
Переглянути/відредагувати вихідний код.
Кількість слів Перегляньте кількість слів і символів.

Стіл

Меню «Таблиця» містить такі дії для вставки таблиці та зміни її структури.

Назва
Опис
Стіл
Вставити таблицю.
Клітина Параметри модифікації для вибраних комірок з випадаючого меню.
Рядок
Змінити, видалити та/або вставити параметри для вибраного(их) рядка(ів) у розкривному меню.
Колонка
Змінити, видалити та/або вставити параметри для вибраних стовпців у розкривному меню.
Властивості таблиці
Переглядати та змінювати властивості таблиці, такі як ширина, висота, межі тощо.
Видалити таблицю
Видалити вибрану таблицю.

Додаткове меню панелі інструментів

Під основним меню панель інструментів містить легкодоступні розкривні списки та значки для додаткового форматування.


Скасувати та повторити

  1. Натисніть значок «Скасувати» , щоб скасувати попередню дію.
  2. Натисніть значок «Повторити» , щоб повторити попередній значок.
Значки скасування та повторення

Стилі абзаців і заголовків

  1. Клацніть розкривне меню стилів заголовків , щоб застосувати формати та стилі до тексту.

Курс, Модуль, розділ Редагувати з активним та виділеним меню стилю заголовка

Стиль шрифту

  1. Клацніть спадне меню шрифтів , щоб змінити шрифт тексту.
Курс, Модуль, розділ Редагувати з активним та виділеним меню стилю шрифту

Розмір шрифту

    1. Клацніть спадне меню розміру шрифту , щоб змінити розмір тексту.

    Формат шрифту

    1. Натисніть значок жирного шрифту , щоб виділити текст жирним шрифтом.
    2. Клацніть значок курсиву , щоб зробити текст курсивом.
    3. Клацніть значок підкреслення , щоб підкреслити текст.
    Значки жирного шрифту, курсиву та підкреслення

    Колір тексту

      1. Натисніть значок кольору тексту , щоб вибрати/змінити колір шрифту.
      Курс, Модуль, розділ редагування з активним та виділеним меню кольору тексту

      Вирівнювання тексту

      1. Натисніть значок вирівнювання , щоб вирівняти текст.

      Курс, Модуль, розділ Редагувати з активним та виділеним меню Вирівнювання

      Маркований список

      1. Клацніть значок маркованого списку , щоб створити та відформатувати маркований список.
      Курс, Модуль, розділ Редагувати з активним та виділеним меню маркованого списку

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

      1. Клацніть значок нумерованого списку , щоб створити та відформатувати маркований або нумерований список.

      Завантажте зображення та завантажте файл

      1. Натисніть значок завантаження зображення , щоб завантажити зображення.
      2. Натисніть значок завантаження файлу , щоб завантажити будь-які файли.
      Завантаження зображення та значки завантаження файлу

      Очистити форматування

      1. Натисніть значок «Очистити форматування» , щоб очистити стилі, які могли бути перенесені внаслідок копіювання та вставки вмісту.
      Значок очищення форматування

      Колір фону

      1. Натисніть значок кольору фону , щоб додати виділення до тексту/зображень.

      Розширена панель інструментів

      Для додаткової функціональності:

      1. Натисніть кнопку « Більше» значок, щоб відобразити розширену панель інструментів.


      Розширена панель інструментів відображається під додатковою панеллю інструментів і містить додаткові параметри, описані нижче.



      Відступи та горизонтальна лінія

      1. Натисніть значок «Зменшити відступ» , щоб зменшити відступ тексту.
      2. Натисніть значок «Збільшити відступ», щоб збільшити відступ тексту.
      3. Клацніть значок «Горизонтальна лінія» , щоб вставити горизонтальну лінію.
      Значки зменшення відступу, збільшення відступу та горизонтальної лінії

      Емодзі

      1. Натисніть на емодзі Значок емодзі значок, щоб відкрити клавіатуру емодзі.
      2. Натисніть на емодзі, щоб вставити його.
      Курс, Модуль, Розділ редагування зі спливаючим екраном емодзі

      Спеціальні символи

      1. Натисніть на спеціальний символ Значок спеціального символу значок, щоб відкрити спливаюче вікно «Спеціальний символ».
      2. Клацніть спеціальний символ, щоб вставити його.

      Курс, модуль, розділ редагування зі спливаючим екраном спеціальних символів

      Розширені значки

      1. Натисніть значок «Вставити/редагувати посилання» щоб вставити посилання на будь-яку URL-адресу.
      2. Натисніть значок «Вставити/редагувати медіа» вставити/вбудувати посилання на будь-яку URL-адресу.
      3. Натисніть значок «Вставити/редагувати рівняння» вставити/вбудувати посилання на будь-яку URL-адресу.
      4. Натисніть значок «Вставити шаблон» Вставити значок шаблону щоб вставити шаблон.
      5. Натисніть значок вихідного коду Значок вихідного коду щоб переглянути вихідний код поточної сторінки.
      6. Натисніть значок «Записати аудіо» Значок запису аудіо записувати аудіо безпосередньо на сторінку курсу.
      7. Натисніть значок «Записати відео» Значок запису відео записувати відео безпосередньо на сторінку курсу.
      1. Натисніть значок «Створити веб-конференцію» Піктограма створення веб-конференцій щоб створити посилання на веб-конференцію, скориставшись одним із випадаючих варіантів.
        1. Примітка. Відображатимуться лише програми для веб-конференцій, встановлені на вашій платформі.


      Найкращі практики

      Скористайтеся цими рекомендаціями, щоб отримати максимальну віддачу від редактора.

      • Щоб вставити розрив рядка замість нового абзацу, натисніть Shift + Enter.
      • Під час вбудовування HTML-віджетів спочатку перегляньте текстове вікно у вихідному коді.
        • Натисніть розкривний список «Вигляд» .
        • Натисніть < > Вихідний код .
      • Вставляйте сторонній контент як звичайний текст, щоб уникнути помилок форматування.
      • Щоб зробити межі таблиці невидимими:
        • Виберіть таблицю.
        • Натисніть кнопку «Властивості таблиці» .
        • На вкладці «Загальні» спливаючого вікна встановіть для значення «Ширина межі» значення «0».
        • На вкладці «Додатково» виберіть стиль межі «Приховано» або «Немає».

      Курс, модуль, розділ редагування з вибраною таблицею та виділеним значком властивостей таблиці

      Перевірка орфографії

      Редактор містить перевірку орфографії, яка позначає слова з орфографічними помилками червоною лінією. Щоб виправити орфографічну помилку:

      1. Натисніть CTRL + Клацніть правою кнопкою миші .
      2. Виберіть правильне написання зі списку пропозицій.
      Курс, Модуль, розділ редагування з активним та виділеним меню правопису

      Вбудовування змінних

      Ви можете вбудовувати змінні на сторінки уроків, використовуючи формат {{variable name}}. Це дозволяє налаштовувати контент для користувачів та курсів.

      На сторінці вмісту можна використовувати такі змінні:
      • {{class_custom_field_1}}
      • {{class_custom_field_2}}
      • {{дата_завершення_класу}}
      • {{ідентифікатор_класу}}
      • {{location_class}}
      • {{назва_класу}}
      • {{назва_класу_з_посиланням}}
      • {{дата_початку_заняття}}
      • {{completed_at_utc}}
      • {{code_course}}
      • {{кредити}}
      • {{днів_у_заняттях}}
      • {{залишилося_днів}}
      • {{деактивувати_студентів_після}}
      • {{ідентифікатор_організації}}
      • {{назва_організації}}
      • {{section_code}}
      • {{назва_сайту}}
      • {{назва_сайту_з_url}}
      • {{ім'я_вчителя}}
      • {{ім'я_викладача_з_посиланням}}
      • {{електронна адреса_користувача}}
      • {{user_first_name}}
      • {{user_full_name}}
      • {{user_full_name_with_link}}
      • {{user_id}}
      • {{last_name_user}}
      • {{user_preferred_contact_method}}
      • {{user_ssn}}
      • {{ідентифікатор користувача}}
      • {{чому}}

      Курс, модуль, розділ редагування з виділеними прикладами змінних

      Відео про розміри

      Якщо ви додаєте відео як посилання в HTML-редакторі, ви можете встановити його розмір за допомогою цього HTML-коду:
      <a width='100' height='700'>посилання</a>.
      1. Якщо ви хочете, щоб розмір відео змінювався автоматично, ви можете пропустити одне зі значень (ширину або висоту).
      2. Ви також можете використовувати відсоткові значення, щоб встановити розмір відео, наприклад, <width='100%' >.

      Редагування зображень

      Редактор пропонує різні опції редагування зображень після їх завантаження. Щоб редагувати зображення:

      1. Натисніть на зображення.
      2. З'явиться меню опцій.
      Значок
      Опис
      Повернути значок проти годинникової стрілки
      		 Повернути зображення проти годинникової стрілки
      Повернути значок за годинниковою стрілкою
      		 Повернути зображення за годинниковою стрілкою
      Значок горизонтального відображення зображення
      		 Відобразити зображення по горизонталі
      Значок вертикального відображення зображення Відобразити зображення вертикально
      Значок обрізання зображення
      		 Обрізати зображення
      Значок редагування зображення
      		 Редагувати властивості зображення

      Курс, модуль, розділ редагування з виділеним зображенням та активною панеллю інструментів редагування зображення

      Якщо вибрати значок «Редагувати властивості зображення» , відобразиться спливаюче вікно «Вставити/редагувати зображення».
      1. Джерело : Відображає джерело зображення.
      2. Альтернативний опис : Цей опис зчитується програмами зчитування з екрана для допомоги користувачам із вадами зору.
      3. Ширина та висота : налаштуйте розмір зображення.
        1. Примітка: Використовуйте значок замка, щоб зображення зберегло співвідношення ширини та висоти.


      Додаючи нове зображення, ви також можете додати опис для програм зчитування з екрана:
      1. Введіть опис у поле «Опис зображення» .

      Спливаюче вікно завантаження зображення

      Шаблони контенту

      Шаблони контенту дозволяють зберігати фрагменти HTML у каталозі ресурсів, а потім легко вставляти їх у області контенту в майбутньому. Ви можете використовувати цю функцію для створення бібліотеки поширених елементів контенту, які ви часто використовуєте у своїх областях контенту.

      Щоб додати фрагмент HTML до шаблону контенту:

      1. Виділіть текст та/або зображення в редакторі HTML.
      2. Клацніть правою кнопкою миші.
      3. Виберіть Зберегти як шаблон .


      1. Введіть назву шаблону.
      2. Натисніть кнопку «ОК» .
      3. Шаблон контенту буде збережено у вашій особистій бібліотеці.


      Щоб отримати доступ до збережених шаблонів контенту:

      1. Натисніть «Ресурси» на лівій панелі навігації.
      2. У випадаючому меню натисніть «Каталог» .
      3. Фільтруйте за типом ресурсу > шаблоном контенту на панелі пошуку.
      4. Клацніть шаблон контенту.


      Відобразиться шаблон контенту. Щоб переглянути докладнішу інформацію про шаблон контенту:
      1. Натисніть «Деталі» .

      Ресурси, спливаюче вікно шаблону контенту


      Тепер ви можете оновити розділ вмісту:
      1. Натисніть «Редагувати» , щоб редагувати вміст .
      2. Натисніть кнопку «Видалити» , щоб видалити шаблон.

      Ресурси, шаблон контенту з виділеними значками редагування та видалення

      Якщо ви натиснете «Редагувати», ви зможете оновити вміст і поділитися ним з іншими користувачами.
      1. Виберіть Особиста , Організаційна або Бізнес -бібліотека, якщо ви хочете, щоб шаблон вмісту був доступним для інших користувачів.
      2. Після редагування вмісту натисніть кнопку «Зберегти» .

      Ресурси, екран редагування шаблону вмісту

      Щоб вставити копію шаблону вмісту в розділ:
      1. Доступ до розділу.
      2. Клацніть правою кнопкою миші.
      3. Виберіть «Вставити шаблон» .
      4. Виберіть шаблон зі спадного списку.
      5. Натисніть кнопку «Зберегти» .