Категории

HTML-редактор

В процессе редактирования конкретного шага на Stepik можно перейти в HTML-редактор (кнопка "Source"):

mceclip0.png

При работе в HTML-редакторе разрешено использовать следующие теги и атрибуты:

Скрытый текст

Элементы <detаils> и <summаry> позволяют скрыть часть текста и отображать его только при нажатии на заголовок. Это может быть полезно при добавлении объёмного кода или подсказок к заданию.

Пример — кликните на слово "Заголовок":


Заголовок

Раскрывающийся текст


Для создания раскрывающегося текста добавьте в html-редактор: 

<details><summary>Заголовок</summary>
<p>Раскрывающийся текст</p>
</details>

Редактирование таблицы

Редактирование таблицы возможно через кнопки "Table" и "Source":

С помощью "Table", вы можете настроить размер, выравнивание таблицы, добавить заголовки, подпись и т. д.


Для настройки столбцов рекомендуем воспользоваться кнопкой "Source", в которой вы можете найти html-код таблицы и внести изменения: 

<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
    <thead>
        <tr>
            <th>ID курса</th>
            <th>Название</th>
            <th>Описание</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="text-align:center; width:20%">5207</td>
            <td style="width:30%">Создание курса на Stepik</td>
            <td>Курс для тех, кто хочет больше узнать о Stepik, о том, как создавать и запускать свой собственный открытый или платный курс.</td>
        </tr>
        <tr>
            <td style="text-align:center">1000</td>
            <td>Создание платного курса на Stepik</td>
            <td>В курсе вы узнаете о платформе Stepik и о том, как создать у нас платный курс. С помощью подробных инструкций и заданий по мере прохождения курса вы создадите собственный курс, получите его разбор и консультации от команды платформы.</td>
        </tr>
    </tbody>
</table>

Отображение таблицы в шаге:

Добавление аудиофайла

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

Для этого выполните следующие шаги::

  1. Добавьте аудиофайл в раздел "Файлы";
  2. Перейдите в html-редактор шага;
  3. Добавьте в нужное место:
    <audio controls=“controls” src=“ссылка_на_ваш_аудиофайл“>Your browser does not support the audio elementaudio>;
  4. Скопируйте ссылку на аудиофайл в разделе "Файлы" и вставьте ее вместо текста "ссылка_на_ваш_аудиофайл" в код выше;
  5. После этого сохраните шаг и проверьте отображение и проигрывание аудиофайла.

Отображение аудиофайла в курсе:

Дополнительно вы можете найти эту инструкцию в нашем материале по ссылке: https://stepik.org/lesson/94857/step/4.