Jak korzystać z edytora HTML

Edytor HTML

Przegląd

Wbudowany edytor HTML umożliwia instruktorom, nauczycielom i administratorom tworzenie i edytowanie treści bezpośrednio w kursach, wiadomościach, widżetach i nie tylko.

W tym artykule dowiesz się, jak uzyskać dostęp do różnych elementów edytora i jak z nich korzystać, aby tworzyć angażujące i estetyczne treści.

Informacje
Należy pamiętać, że platforma biznesowa domyślnie używa terminu „ kurs” , a platforma akademicka domyślnie używa terminu „klasa” . Terminy „kurs” i „klasa” są w tym artykule stosowane zamiennie.

Menu paska narzędzi

Edytor HTML wyświetla się podczas edycji treści w kursach, wiadomościach, widżetach i innych elementach. Pasek narzędzi składa się z paska menu i ikon, które umożliwiają edycję treści w danej sekcji.

Informacje
Należy pamiętać, że zrzuty ekranu w tym artykule wyświetlają się w sekcji kursu, ale pasek narzędzi działa tak samo w kursach, wiadomościach i widżetach. Kreator treści po lewej stronie paska narzędzi jest dostępny tylko podczas edycji kursów.

Kurs, moduł, sekcja strony w trybie edycji z wyróżnionym paskiem narzędzi

Górny pasek menu składa się z siedmiu menu, które omówimy bardziej szczegółowo poniżej.

Sekcja Kurs, Moduł, Edycja z wyróżnionymi górnymi menu paska narzędzi

Plik

Menu Plik zawiera następujące akcje:

Tytuł
Opis
Nowy dokument
Czyści okno tekstowe ze wszystkich tekstów/obrazów/linków.
Zapowiedź
Otwórz okno pop-up, aby zobaczyć podgląd opublikowanej treści.
Wydrukować
Wydrukuj treść w oknie tekstowym.

Redagować

Menu Edycja zawiera następujące czynności.

Tytuł
Opis
Anulować
Cofnij ostatnią czynność.
Przerobić
Powtórz ostatnią czynność.
Cięcie
Usuń zaznaczony tekst/obraz i zapisz go w schowku.
Kopia
Skopiuj zaznaczony tekst/obraz i zapisz go w schowku.
Pasta
Wklej tekst/obraz ze schowka.
Wklej jako tekst
Wklej zawartość schowka jako zwykły tekst, bez formatowania.
Zaznacz wszystko
Zaznacz/zaznacz całą zawartość okna tekstowego.
Znajdź i zamień
Znajdź słowo lub frazę i zastąp je nowym słowem/frazą (jeśli dotyczy).

Pogląd

Menu Widok zawiera następujące akcje umożliwiające przeglądanie tekstu i znaków w oknie tekstowym.

Tytuł
Opis
Kod źródłowy
Przeglądaj/edytuj kod źródłowy w oknie tekstowym.
Pokaż niewidoczne znaki
Wyświetla niewidoczne znaki, takie jak spacje i miękkie znaki powrotu.
Pokaż bloki
Pokazuje bloki akapitów w oknie tekstowym.
Zapowiedź
Otwórz okno podręczne, aby zobaczyć podgląd opublikowanej treści.

Wstawić

Menu Wstaw zawiera następujące czynności umożliwiające wstawianie obrazów, filmów, tabel, łączy i innych.

Tytuł
Opis
Połączyć
Wstaw hiperłącze do adresu URL.
Głoska bezdźwięczna
Wstaw/osadź element multimedialny.
Tabela Wstaw i zbuduj tabelę.
Znak specjalny Wstaw znak specjalny.
Emoji Wstaw emoji.
Linia pozioma
Wstaw linię poziomą.
Podział strony
Wstaw podział, aby rozpocząć nową stronę.
Nierozdzielana spacja
Wstaw spację, która nie spowoduje podziału strony.
Kotwica
Wstaw kotwicę/zakładkę w danym miejscu/lokalizacji.
Wstaw szablon
Wstaw zapisany szablon.
Zapisz jako szablon
Zapisz zaznaczony tekst jako szablon.
Data/godzina
Wprowadź datę i godzinę z menu rozwijanego.
Edytuj równanie
Kliknij, aby edytować podświetlone równanie.
Prześlij obraz
Kliknij, aby przesłać obraz.
Prześlij plik
Kliknij, aby przesłać plik.
Utwórz konferencję internetową
Kliknij, aby dodać konferencję internetową do tekstu*.
Nagraj dźwięk
Kliknij, aby nagrać dźwięk bezpośrednio w oknie tekstowym.
Nagraj wideo
Kliknij, aby nagrać wideo bezpośrednio w oknie tekstowym.
Informacje
* Aby wyświetlić opcje tworzenia konferencji internetowych, należy najpierw zainstalować aplikację(y) do konferencji internetowych z Centrum aplikacji.

Format

Menu Format zawiera następujące czynności umożliwiające formatowanie tekstu.

Tytuł
Opis
Pogrubiony
Pogrub zaznaczony tekst.
italski
Zmień pisownię zaznaczonego tekstu na kursywę.
Podkreślać
Podkreśl zaznaczony tekst.
Przekreślenie
Przekreśl zaznaczony tekst.
Napisany u góry
Sformatuj zaznaczony tekst jako indeks górny.
Indeks dolny
Sformatuj zaznaczony tekst jako indeks dolny.
Kod
Sformatuj zaznaczony tekst jako kod.
Bloki
Wstaw odpowiedni format bloku z menu rozwijanego.
Czcionki
Wybierz inną czcionkę z menu rozwijanego.
Rozmiary czcionek
Wybierz rozmiar czcionki z menu rozwijanego.
Wyrównywać
Wybierz styl wyrównania tekstu z menu rozwijanego.
Wysokość linii
Wybierz wysokość linii z menu rozwijanego.
Zwiększ wcięcie
Wcięcie tekstu lub akapitu w prawo.
Zmniejsz wcięcie
Przesuń tekst lub akapit w lewo.
Kolor tekstu
Wybierz żądany kolor tekstu z menu rozwijanego.
Kolor tła
Wybierz kolor tła z menu rozwijanego.
Wyczyść formatowanie
Wyczyść formatowanie zaznaczonego tekstu.​

Narzędzia

W menu Narzędzia znajdują się następujące czynności.

Tytuł
Opis
Kod źródłowy
Przeglądaj/edytuj kod źródłowy.
Liczba słów Wyświetl liczbę słów i znaków.

Tabela

Menu Tabela zawiera następujące akcje umożliwiające wstawienie tabeli i modyfikację jej struktury.

Tytuł
Opis
Tabela
Wstaw tabelę.
Komórka Opcje modyfikacji dla wybranych komórek z menu rozwijanego.
Wiersz
Z menu rozwijanego możesz modyfikować, usuwać i/lub wstawiać opcje dla wybranych wierszy.
Kolumna
Z menu rozwijanego możesz modyfikować, usuwać i/lub wstawiać opcje dla wybranych kolumn.
Właściwości tabeli
Przeglądaj i modyfikuj właściwości tabeli, takie jak szerokość, wysokość, obramowanie itp.
Usuń tabelę
Usuń wybraną tabelę.

Menu podrzędne paska narzędzi

Poniżej menu głównego znajduje się pasek narzędzi, na którym znajdują się łatwo dostępne opcje rozwijane i ikony umożliwiające dodatkowe formatowanie.

Sekcja Kurs, Moduł, Edytuj z wyróżnionymi ikonami menu podrzędnego paska narzędzi

Cofnij i ponów

  1. Kliknij ikonę Cofnij , aby cofnąć poprzednią czynność.
  2. Kliknij ikonę Powtórz , aby przywrócić poprzednią ikonę.
Ikony cofania i ponawiania

Style akapitów i nagłówków

  1. Kliknij menu rozwijane stylu nagłówka , aby zastosować formaty i style do tekstu.

Kurs, Moduł, Sekcja Edytuj z aktywnym i wyróżnionym menu Styl nagłówka

Styl czcionki

  1. Kliknij menu rozwijane czcionek , aby zmienić czcionkę tekstu.
Sekcja Kurs, Moduł, Edytuj z aktywnym i wyróżnionym menu Styl czcionki

Rozmiar czcionki

    1. Kliknij menu rozwijane rozmiaru czcionki , aby zmienić rozmiar tekstu.
    Sekcja Kurs, Moduł, Edytuj z aktywnym i wyróżnionym menu Rozmiar czcionki

    Format czcionki

    1. Kliknij ikonę pogrubienia , aby pogrubić tekst.
    2. Kliknij ikonę kursywy , aby zastosować kursywę do tekstu.
    3. Kliknij ikonę podkreślenia , aby podkreślić tekst.
    Ikony pogrubienia, kursywy i podkreślenia

    Kolor tekstu

      1. Kliknij ikonę koloru tekstu , aby wybrać/zmienić kolor czcionki.
      Sekcja Kurs, Moduł, Edytuj z aktywnym i wyróżnionym menu koloru tekstu

      Wyrównanie tekstu

      1. Kliknij ikonę wyrównania , aby wyrównać tekst.

      Kurs, Moduł, Sekcja Edytuj z aktywnym i wyróżnionym menu Wyrównanie

      Lista wypunktowana

      1. Kliknij ikonę listy wypunktowanej, aby utworzyć i sformatować listę wypunktowaną.
      Sekcja Kurs, Moduł, Edytuj z aktywnym i wyróżnionym menu listy wypunktowanej

      Lista numerowana

      1. Kliknij ikonę listy numerowanej, aby utworzyć i sformatować listę wypunktowaną lub numerowaną.
      Sekcja Kurs, Moduł, Edytuj z aktywnym i wyróżnionym menu Lista numerowana

      Prześlij obraz i plik

      1. Kliknij ikonę przesyłania obrazu , aby przesłać obraz.
      2. Kliknij ikonę przesyłania plików , aby przesłać dowolny plik.
      Prześlij obraz i prześlij ikony plików

      Wyczyść formatowanie

      1. Kliknij ikonę Wyczyść formatowanie , aby wyczyścić style, które mogły zostać przeniesione w wyniku kopiowania i wklejania treści.
      Wyczyść ikonę formatowania

      Kolor tła

      1. Kliknij ikonę Kolor tła , aby wyróżnić tekst/obrazy.
      Sekcja Kurs, Moduł, Edytuj z aktywnym i wyróżnionym menu Kolor tła

      Zaawansowany pasek narzędzi

      Aby uzyskać dodatkowe funkcjonalności:

      1. Kliknij więcej ikona służąca do wyświetlania paska narzędzi zaawansowanych.

      Sekcja Kurs, Moduł, Edytuj z podświetloną ikoną Więcej

      Zaawansowany pasek narzędzi jest wyświetlany pod paskiem narzędzi pomocniczych i zawiera dodatkowe opcje opisane poniżej.

      Sekcja Kurs, Moduł, Edytuj z wyróżnionymi ikonami paska narzędzi Zaawansowane

      Wcięcia i linia pozioma

      1. Kliknij ikonę Zmniejsz wcięcie , aby zmniejszyć wcięcie tekstu.
      2. Kliknij ikonę Zwiększ wcięcie , aby wciąć tekst.
      3. Kliknij ikonę linii poziomej , aby wstawić linię poziomą.
      Zmniejsz wcięcie, zwiększ wcięcie i ikony linii poziomej

      Emoji

      1. Kliknij Emoji Ikona emoji ikona otwierająca klawiaturę Emoji.
      2. Kliknij emoji, aby ją wstawić.
      Kurs, moduł, sekcja edycji z wyskakującym ekranem Emoji

      Znaki specjalne

      1. Kliknij znak specjalny Ikona znaku specjalnego ikonę, aby otworzyć wyskakujące okienko Znak specjalny.
      2. Kliknij znak specjalny, aby go wstawić.

      Kurs, Moduł, Sekcja Edytuj z wyskakującym ekranem Znaków specjalnych

      Zaawansowane ikony

      1. Kliknij ikonę Wstaw/edytuj łącze aby wstawić link do dowolnego adresu URL.
      2. Kliknij ikonę Wstaw/Edytuj multimedia aby wstawić/osadzić link do dowolnego adresu URL.
      3. Kliknij ikonę Wstaw/edytuj równanie aby wstawić/osadzić link do dowolnego adresu URL.
      4. Kliknij ikonę Wstaw szablon Wstaw ikonę szablonu Aby wstawić szablon.
      5. Kliknij ikonę kodu źródłowego Ikona kodu źródłowego aby wyświetlić kod źródłowy bieżącej strony.
      6. Kliknij ikonę Nagraj dźwięk Ikona nagrywania dźwięku aby nagrywać dźwięk bezpośrednio na stronę kursu.
      7. Kliknij ikonę Nagraj wideo Ikona nagrywania wideo aby nagrywać wideo bezpośrednio na stronę kursu.
      1. Kliknij ikonę Utwórz konferencję internetową Utwórz ikonę konferencji internetowej Aby utworzyć łącze do konferencji internetowej, użyj jednej z opcji rozwijanych.
        1. Uwaga - wyświetlane będą tylko aplikacje do konferencji internetowych zainstalowane na Twojej platformie.

      Sekcja Kurs, Moduł, Edytuj z aktywnym i wyróżnionym menu Utwórz konferencję internetową

      Najlepsze praktyki

      Skorzystaj z tych najlepszych praktyk, aby w pełni wykorzystać możliwości edytora.

      • Aby wstawić podział wiersza zamiast nowego akapitu, naciśnij klawisze Shift + Enter.
      • Podczas osadzania widżetów HTML należy najpierw wyświetlić okno tekstowe w kodzie źródłowym.
        • Kliknij menu rozwijane Widok .
        • Kliknij < > Kod źródłowy .
      • Wklejaj treści stron trzecich jako zwykły tekst, aby uniknąć błędów formatowania.
      • Aby uczynić granice tabeli niewidocznymi:
        • Wybierz tabelę.
        • Kliknij Właściwości tabeli .
        • Na karcie Ogólne okna podręcznego ustaw szerokość obramowania na „0”.
        • Na karcie Zaawansowane wybierz styl obramowania „Ukryty” lub „Brak”.

      Kurs, Moduł, Sekcja Edytuj z wybraną tabelą i podświetloną ikoną Właściwości tabeli

      Sprawdzanie pisowni

      Edytor zawiera moduł sprawdzania pisowni, który oznacza niepoprawnie napisane słowa czerwoną linią. Aby poprawić błąd ortograficzny:

      1. Naciśnij CTRL + Kliknij prawym przyciskiem myszy .
      2. Wybierz poprawną pisownię z listy sugestii.
      Kurs, Moduł, Sekcja Edytuj z aktywnym i wyróżnionym menu pisowni

      Osadzanie zmiennych

      Możesz osadzać zmienne na stronach lekcji, używając formatu {{nazwa zmiennej}}. Pozwala to na dostosowywanie treści do użytkowników i kursów.

      Na stronie z treścią można używać następujących zmiennych:
      • {{class_custom_field_1}}
      • {{class_custom_field_2}}
      • {{data_zakończenia_klasy}}
      • {{id_klasy}}
      • {{lokalizacja_klasy}}
      • {{nazwa_klasy}}
      • {{nazwa_klasy_z_linkiem}}
      • {{data rozpoczęcia zajęć}}
      • {{completed_at_utc}}
      • {{kod_kursu}}
      • {{kredyty}}
      • {{dni_w_klasie}}
      • {{pozostało_dni}}
      • {{deactivate_students_after}}
      • {{id_organizacji}}
      • {{nazwa_organizacji}}
      • {{kod_sekcji}}
      • {{nazwa_strony}}
      • {{nazwa_witryny_z_adresem_url}}
      • {{nazwa_nauczyciela}}
      • {{nazwa_nauczyciela_z_linkiem}}
      • {{adres e-mail użytkownika}}
      • {{imię_użytkownika}}
      • {{pełna_nazwa_użytkownika}}
      • {{pełna_nazwa_użytkownika_z_linkiem}}
      • {{identyfikator_użytkownika}}
      • {{nazwisko_użytkownika}}
      • {{user_prefered_contact_method}}
      • {{user_ssn}}
      • {{identyfikator użytkownika}}
      • {{Dlaczego}}

      Kurs, Moduł, Sekcja edycji z wyróżnionymi przykładami zmiennych

      Filmy o dobieraniu rozmiarów

      Jeśli dodasz film jako link w edytorze HTML, możesz ustawić jego rozmiar za pomocą tego kodu HTML:
      <a width='100' height='700'>łącze</a>.
      1. Jeśli chcesz, aby rozmiar filmu został dostosowany automatycznie, możesz pominąć jedną z wartości (szerokość lub wysokość).
      2. Możesz również użyć wartości procentowych, aby ustawić rozmiar filmu, na przykład <width='100%' >.

      Edycja obrazów

      Edytor oferuje różne opcje edycji obrazów po ich przesłaniu. Aby edytować obraz:

      1. Kliknij obraz.
      2. Pojawia się menu opcji.
      Ikona
      Opis
      Ikona obrotu przeciwnie do ruchu wskazówek zegara
      Obróć obraz przeciwnie do ruchu wskazówek zegara
      Ikona obrotu zgodnie z ruchem wskazówek zegara
      Obróć obraz zgodnie z ruchem wskazówek zegara
      Ikona odbicia obrazu w poziomie
      Odwróć obraz poziomo
      Ikona odbicia obrazu w pionie Odwróć obraz w pionie
      Ikona przycięcia obrazu
      Przytnij obraz
      Edytuj ikonę obrazu
      Edytuj właściwości obrazu

      Kurs, Moduł, Sekcja edycji z wyróżnionym obrazem i aktywnym paskiem narzędzi edycji obrazu

      Jeśli wybierzesz ikonę Edytuj właściwości obrazu , wyświetli się okno podręczne Wstaw/Edytuj obraz.
      1. Źródło : Wyświetla źródło obrazu.
      2. Opis alternatywny : Ten opis jest odczytywany przez czytniki ekranu w celu ułatwienia korzystania użytkownikom z wadami wzroku.
      3. Szerokość i wysokość : Dostosuj rozmiar obrazu.
        1. Uwaga: Użyj ikony kłódki, aby mieć pewność, że obraz zachowa proporcje szerokości i wysokości.


      Dodając nowy obraz, możesz również dodać opis dla czytników ekranu:
      1. Wprowadź opis w polu Opis obrazu .

      Wyskakujące okienko przesyłania obrazu

      Szablony treści

      Szablony treści pozwalają na zapisywanie fragmentów kodu HTML w katalogu zasobów, a następnie łatwe wstawianie ich do obszarów treści w przyszłości. Funkcja ta umożliwia utworzenie biblioteki popularnych elementów treści, z których często korzystasz w swoich obszarach treści.

      Aby dodać fragment kodu HTML do szablonu treści:

      1. Zaznacz tekst i/lub obrazy w edytorze HTML.
      2. Kliknij prawym przyciskiem myszy.
      3. Wybierz opcję Zapisz jako szablon .

      Kurs, Moduł, Sekcja edycji z wybranym tekstem i obrazem, z zaznaczoną opcją Zapisz jako szablon w menu po kliknięciu prawym przyciskiem myszy

      1. Wprowadź tytuł szablonu.
      2. Kliknij OK .
      3. Szablon treści zostanie zapisany w Twojej osobistej bibliotece.


      Aby uzyskać dostęp do zapisanych szablonów treści:

      1. Kliknij Zasoby na pasku nawigacyjnym po lewej stronie.
      2. Kliknij Katalog w menu podręcznym.
      3. Filtruj według Typu zasobu > Szablonu zawartości w panelu Szukaj.
      4. Kliknij szablon treści.

      Zasoby, strona katalogu z wyróżnioną sekcją Typ zasobu w panelu wyszukiwania

      Wyświetla się szablon treści. Aby zobaczyć więcej szczegółów na temat szablonu treści:
      1. Kliknij Szczegóły .

      Zasoby, wyskakujące okienko szablonu treści


      Możesz teraz zaktualizować sekcję treści:
      1. Kliknij Edytuj , aby edytować treść .
      2. Kliknij Usuń , aby usunąć szablon.

      Zasoby, szablon zawartości z wyróżnionymi ikonami edycji i usuwania

      Jeśli klikniesz edytuj, możesz zaktualizować treść i udostępnić ją innym użytkownikom.
      1. Wybierz bibliotekę Osobiste , Organizacyjne lub Firmowe , jeśli chcesz, aby szablon treści był dostępny dla innych użytkowników.
      2. Po edytowaniu treści kliknij Zapisz .

      Zasoby, Edytuj ekran szablonu zawartości

      Aby wstawić kopię szablonu treści do sekcji:
      1. Uzyskaj dostęp do sekcji.
      2. Kliknij prawym przyciskiem myszy.
      3. Wybierz opcję Wstaw szablon .
      4. Wybierz szablon z listy rozwijanej.
      5. Kliknij Zapisz .
      Sekcja Kurs, Moduł, Edytuj z wyróżnionym szablonem Wstaw w menu po kliknięciu prawym przyciskiem myszy