Hur man använder HTML-redigeraren

HTML-redigerare

Översikt

Den inbyggda HTML-redigeraren låter instruktörer, lärare och administratörer skapa och redigera innehåll direkt i kurser, meddelanden, widgetar med mera.

Den här artikeln lär dig hur du kommer åt och använder redigerarens olika element för att skapa engagerande och estetiskt innehåll.

Info
Observera att affärsplattformen som standard använder termen *course* och att den akademiska plattformen som standard använder termen *class* . Termerna *course* och *class* är utbytbara i den här artikeln.

Verktygsfältsmenyn

HTML-redigeraren visas när du redigerar innehåll i kurser, meddelanden, widgetar med mera. Verktygsfältet består av en menyrad och ikoner som låter dig redigera innehåll i sektionen.

Info
Observera att skärmdumparna i den här artikeln visas inom ett kursavsnitt, men verktygsfältet fungerar på samma sätt inom kurser, meddelanden och widgetar. Innehållsbyggaren till vänster om verktygsfältet är endast tillgänglig när du redigerar kurser.

Kurs, modul, sidavsnitt i redigeringsläge med verktygsfältet markerat

Den översta menyraden består av sju menyer, vilka behandlas mer i detalj nedan.

Kurs, Modul, Redigera-sektion med de översta menyerna i verktygsfältet markerade

Fil

Arkivmenyn innehåller följande åtgärder:

Titel
Beskrivning
Nytt dokument
Rensar textfönstret på all text/bilder/länkar.
Förhandsvisning
Öppna ett popup-fönster för att se en förhandsgranskning av det publicerade innehållet.
Skriva ut
Skriv ut innehållet i textfönstret.

Redigera

Redigera- menyn innehåller följande åtgärder.

Titel
Beskrivning
Ångra
Ångra din senaste åtgärd.
Göra om
Gör om din senaste åtgärd.
Skära
Ta bort den markerade texten/bilden och lagra den i urklipp.
Kopiera
Kopiera den markerade texten/bilden och lagra den i urklipp.
Klistra
Klistra in text/bild från urklipp.
Klistra in som text
Klistra in innehåll från urklipp endast som text, ingen formatering.
Markera alla
Markera/markera allt innehåll i textfönstret.
Hitta och ersätt
Hitta ett ord eller en fras och ersätt med ett nytt ord/fras (om tillämpligt).

Se

Visa-menyn innehåller följande åtgärder för att visa text och tecken i textfönstret.

Titel
Beskrivning
Källkod
Visa/redigera källkoden i textfönstret.
Visa osynliga tecken
Visar osynliga tecken som mellanslag och mjuka returer.
Visa block
Visar styckeblock i textfönstret.
Förhandsvisning
Öppna ett popup-fönster för att se en förhandsgranskning av det publicerade innehållet.

Infoga

Infoga-menyn innehåller följande åtgärder för att infoga bilder, videor, tabeller, länkar med mera.

Titel
Beskrivning
Länk
Infoga en hyperlänk till en URL.
Media
Infoga/bädda in ett medieinnehåll.
Tabell Infoga och bygg en tabell.
Specialkaraktär Infoga ett specialtecken.
Emojier Infoga en emoji.
Horisontell linje
Infoga en horisontell linje.
Sidbrytning
Infoga en paus för att starta en ny sida.
Obrytande utrymme
Infoga ett mellanslag som inte bryter sidan.
Förankra
Infoga ett ankare/bokmärke på en position/plats.
Infoga mall
Infoga en sparad mall.
Spara som mall
Spara den markerade texten som en mall.
Datum/tid
Infoga datum- eller tidsalternativ från rullgardinsmenyn.
Redigera ekvation
Klicka för att redigera en markerad ekvation.
Ladda upp bild
Klicka för att ladda upp en bild.
Ladda upp fil
Klicka för att ladda upp en fil.
Skapa webbkonferens
Klicka för att lägga till webbkonferens i texten*.
Spela in ljud
Klicka för att spela in ljud direkt i textfönstret.
Spela in video
Klicka för att spela in video direkt i textfönstret.
Info
* För att alternativen för att skapa webbkonferens ska visas måste webbkonferensappen/apparna först installeras från App Center.

Formatera

Formatmenyn innehåller följande åtgärder för att formatera text.

Titel
Beskrivning
Djärv
Fetmarkera den markerade texten.
Kursiv
Kursivera den markerade texten.
Betona
Stryk under den markerade texten.
Genomstruken
Stryk över den markerade texten.
Exponent
Formatera den markerade texten som upphöjd skrift.
Index
Formatera den markerade texten som en nedsänkning.
Koda
Formatera den markerade texten som kod.
Block
Infoga lämplig blockformatering från rullgardinsmenyn.
Typsnitt
Välj ett annat teckensnitt från rullgardinsmenyn.
Teckenstorlekar
Välj en teckenstorlek från rullgardinsmenyn.
Justera
Välj en textjusteringsstil från rullgardinsmenyn.
Linjehöjd
Välj linjehöjden från rullgardinsmenyn.
Öka indraget
Dra in texten eller stycket åt höger.
Minska indrag
Flytta texten eller stycket åt vänster.
Textfärg
Välj önskad textfärg från rullgardinsmenyn.
Bakgrundsfärg
Välj en bakgrundsfärg från rullgardinsmenyn.
Rensa formatering
Rensa formateringen från den markerade texten.

Verktyg

Verktygsmenyn innehåller följande åtgärder.

Titel
Beskrivning
Källkod
Visa/redigera källkoden.
Ordantal Visa ord- och teckenantal.

Tabell

Tabellmenyn innehåller följande åtgärder för att infoga en tabell och ändra tabellstrukturen.

Titel
Beskrivning
Tabell
Infoga en tabell.
Cell Ändringsalternativ för de markerade cellerna från rullgardinsmenyn.
Rad
Ändra, ta bort och/eller infoga alternativ för den/de valda raden/raderna från rullgardinsmenyn.
Kolumn
Ändra, ta bort och/eller infoga alternativ för den/de valda kolumnerna från rullgardinsmenyn.
Tabellegenskaper
Visa och ändra tabellegenskaper som bredd, höjd, kantlinjer etc.
Ta bort tabell
Ta bort den markerade tabellen.

Verktygsfältets sekundära meny

Under huvudmenyn består verktygsfältet av lättillgängliga rullgardinsmenyer och ikoner för ytterligare formatering.

Kurs, Modul, Redigera-sektion med ikonerna i verktygsfältets sekundära meny markerade

Ångra och Gör om

  1. Klicka på Ångra-ikonen för att ångra föregående åtgärd.
  2. Klicka på ikonen Gör om för att göra om föregående ikon.
Ikoner för att ångra och göra om

Stycke- och rubrikformat

  1. Klicka på rullgardinsmenyn för rubrikformat för att tillämpa format och stilar på text.

Kurs, Modul, Redigera-sektion med menyn Rubrikformat aktiv och markerad

Typsnittsstil

  1. Klicka på rullgardinsmenyn för teckensnitt för att ändra teckensnittet på din text.
Kurs, Modul, Redigera-sektion med menyn Teckensnitt aktiv och markerad

Fontstorlek

    1. Klicka på rullgardinsmenyn för teckenstorlek för att ändra textstorleken.
    Kurs, Modul, Redigera-sektion med menyn Teckenstorlek aktiv och markerad

    Teckensnittsformat

    1. Klicka på ikonen med fetstil för att skriva ut texten i fetstil.
    2. Klicka på ikonen för kursiv stil för att kursivera text.
    3. Klicka på understrykningsikonen för att stryka under text.
    Ikoner för fetstil, kursiv stil och understrykning

    Textfärg

      1. Klicka på ikonen för textfärg för att välja/ändra teckensnittsfärg.
      Kurs, Modul, Redigera-sektion med textfärgsmenyn aktiv och markerad

      Textjustering

      1. Klicka på justeringsikonen för att justera text.

      Kurs, Modul, Redigera-sektion med justeringsmenyn aktiv och markerad

      Punktlista

      1. Klicka på ikonen för punktlistan för att skapa och formatera en punktlista.
      Kurs, Modul, Redigera-sektion med punktlista-menyn aktiv och markerad

      Numrerad lista

      1. Klicka på ikonen för den numrerade listan för att skapa och formatera en punktlista eller en numrerad lista.
      Kurs, Modul, Redigera-sektion med menyn Numrerad lista aktiv och markerad

      Ladda upp bild och ladda upp fil

      1. Klicka på ikonen för att ladda upp en bild.
      2. Klicka på ikonen för att ladda upp filer för att ladda upp valfria filer.
      Ikoner för uppladdning av bild och uppladdning av fil

      Rensa formatering

      1. Klicka på ikonen Rensa formatering för att rensa formateringar som kan ha uppstått vid kopiering och inklistring av innehåll.
      Ikon för rensa formatering

      Bakgrundsfärg

      1. Klicka på ikonen Bakgrundsfärg för att lägga till markeringar i text/bilder.
      Kurs, Modul, Redigera-sektion med menyn Bakgrundsfärg aktiv och markerad

      Avancerad verktygsfält

      För ytterligare funktionalitet:

      1. Klicka på mer ikonen för att visa det avancerade verktygsfältet.

      Kurs, Modul, Redigera-sektion med mer-ikonen markerad

      Det avancerade verktygsfältet visas under det sekundära verktygsfältet och innehåller ytterligare alternativ som beskrivs nedan.

      Kurs, Modul, Redigera-sektion med ikonerna i det avancerade verktygsfältet markerade

      Indrag och horisontell linje

      1. Klicka på ikonen Minska indrag för att minska textens indrag.
      2. Klicka på ikonen Öka indrag för att dra in texten.
      3. Klicka på ikonen Horisontell linje för att infoga en horisontell linje.
      Ikoner för att minska indrag, öka indrag och horisontella linjer

      Emojier

      1. Klicka på emojin Emoji-ikon ikonen för att öppna emojitangentbordet.
      2. Klicka på en emoji för att infoga den.
      Kurs, Modul, Redigera-sektion med popup-skärmen för emojis

      Specialtecken

      1. Klicka på specialtecknet Specialteckenikon ikonen för att öppna popup-fönstret för specialtecken.
      2. Klicka på ett specialtecken för att infoga det.

      Kurs, Modul, Redigera-sektion med popup-skärmen för specialtecken

      Avancerade ikoner

      1. Klicka på ikonen Infoga/redigera länk för att infoga en länk till valfri URL.
      2. Klicka på ikonen Infoga/Redigera media att infoga/bädda in en länk till valfri URL.
      3. Klicka på ikonen Infoga/redigera ekvation att infoga/bädda in en länk till valfri URL.
      4. Klicka på ikonen Infoga mall Infoga mallikon för att infoga en mall.
      5. Klicka på källkodsikonen Källkodsikon för att visa den aktuella sidans källkod.
      6. Klicka på ikonen Spela in ljud Ikon för inspelning av ljud för att spela in ljud direkt på kurssidan.
      7. Klicka på ikonen Spela in video Ikon för inspelning av video för att spela in video direkt på kurssidan.
      1. Klicka på ikonen Skapa webbkonferens Ikon för att skapa webbkonferenser för att skapa en webbkonferenslänk med hjälp av ett av alternativen i rullgardinsmenyn.
        1. Obs! Endast webbkonferensappar som du har installerat på din plattform visas.

      Kurs, Modul, Redigera-sektion med menyn Skapa webbkonferens aktiv och markerad

      Bästa praxis

      Använd dessa bästa metoder för att få ut det mesta av redigeraren.

      • För att infoga en radbrytning istället för ett nytt stycke, tryck på Skift + Enter.
      • När du bäddar in HTML-widgetar, titta först på textfönstret i källkoden.
        • Klicka på rullgardinsmenyn Visa .
        • Klicka på < > Källkod .
      • Klistra in innehåll från tredje part som vanlig text för att undvika formateringsfel.
      • För att göra tabellens kanter osynliga:
        • Markera tabellen.
        • Klicka på Tabellegenskaper .
        • I fliken Allmänt i popup-fönstret ställer du in kantbredden till "0".
        • På fliken Avancerat väljer du om kantstilen ska vara "Dold" eller "Ingen".

      Kurs, Modul, Redigera-sektion med en tabell vald och ikonen för tabellegenskaper markerad

      Stavningskontroll

      Redigeraren innehåller en stavningskontroll som markerar ord som inte är korrekt stavade med en röd linje. Så här åtgärdar du ett stavfel:

      1. Tryck CTRL + Höger musklick .
      2. Välj rätt stavning från listan med förslag.
      Kurs, Modul, Redigera-sektion med en aktiv och markerad stavningsmeny

      Bädda in variabler

      Du kan bädda in variabler i lektionssidor med hjälp av formatet {{variabelnamn}}. Detta gör att du kan anpassa innehåll för användare och kurser.

      Följande variabler kan användas på innehållssidan:
      • {{class_custom_field_1}}
      • {{class_custom_field_2}}
      • {{class_finish_date}}
      • {{klass_id}}
      • {{klassplats}}
      • {{klassnamn}}
      • {{klassnamn_med_länk}}
      • {{klassstartdatum}}
      • {{completed_at_utc}}
      • {{kurskod}}
      • {{krediter}}
      • {{dagar_i_klassen}}
      • {{dagar_vänster}}
      • {{deactivate_students_after}}
      • {{organisations-id}}
      • {{organisationsnamn}}
      • {{section_code}}
      • {{webbplatsnamn}}
      • {{site_name_with_url}}
      • {{lärarnamn}}
      • {{teacher_name_with_link}}
      • {{användares e-postadress}}
      • {{användarens_förnamn}}
      • {{användarens fullständiga_namn}}
      • {{användarens_full_namn_med_länk}}
      • {{användar-id}}
      • {{användarens_efternamn}}
      • {{user_preferred_contact_method}}
      • {{användarens_personnummer}}
      • {{användar-ID}}
      • {{varför}}

      Kurs, Modul, Redigera-sektion med variabler som exempel markerade

      Storleksanpassningsvideor

      Om du lägger till en video som en länk i HTML-redigeraren kan du ange dess storlek med hjälp av denna HTML-kod:
      <a width='100' height='700'>länk</a>.
      1. Om du vill att videon ska storleksjusteras automatiskt kan du utelämna ett av värdena (bredd eller höjd).
      2. Du kan också använda procentvärden för att ange storleken på en video, till exempel <width='100%' >.

      Redigera bilder

      Redigeraren erbjuder olika alternativ för att redigera bilder när de har laddats upp. Så här redigerar du en bild:

      1. Klicka på bilden.
      2. En meny med alternativ visas.
      Ikon
      Beskrivning
      Rotera moturs-ikonen
      		 Rotera bilden moturs
      Rotera medurs-ikonen
      		 Rotera bilden medurs
      Ikonen för att vända bilden horisontellt
      		 Vänd bilden horisontellt
      Ikonen för att vända bilden vertikalt Vänd bilden vertikalt
      Beskär bildikon
      		 Beskär bilden
      Redigera bildikon
      		 Redigera bildegenskaper

      Kurs, Modul, Redigera-sektion med en bild markerad och verktygsfältet för bildredigering aktivt

      Om du väljer ikonen Redigera bildegenskaper visas popup-fönstret Infoga/Redigera bild.
      1. Källa : Visar bildkällan.
      2. Alternativ beskrivning : Denna beskrivning läses av skärmläsare för att hjälpa synskadade användare.
      3. Bredd och höjd : Justera bildens storlek.
        1. Obs: Använd låsikonen för att säkerställa att bilden behåller sitt bredd/höjd-förhållande.


      När du lägger till en ny bild kan du även lägga till en beskrivning för skärmläsare:
      1. Ange en beskrivning i fältet Bildbeskrivning .

      Popup-fönster för uppladdning av bild

      Innehållsmallar

      Med innehållsmallar kan du spara HTML-fragment i resurskatalogen och sedan enkelt infoga dem i innehållsområden i framtiden. Du kan använda den här funktionen för att skapa ett bibliotek med vanliga innehållselement som du ofta använder i dina innehållsområden.

      Så här lägger du till ett HTML-fragment i en innehållsmall:

      1. Markera texten och/eller bilderna i HTML-redigeraren.
      2. Höger musklick.
      3. Välj Spara som mall .

      Kurs, Modul, Redigera-sektion med text och bild markerad, med Spara som mall markerad i högerklicksmenyn med musen

      1. Ange en titel för mallen.
      2. Klicka på Ok .
      3. Innehållsmallen sparas i ditt personliga bibliotek.

      Spara som mall-popup

      Så här kommer du åt dina sparade innehållsmallar:

      1. Klicka på Resurser i den vänstra navigeringsfältet.
      2. Klicka på Katalog i den utfällbara menyn.
      3. Filtrera efter Resurstyp > Innehållsmall i sökpanelen.
      4. Klicka på din innehållsmall.

      Resurser, katalogsida med avsnittet Resurstyp markerat i sökpanelen

      Innehållsmallen visas. Så här ser du mer information om en innehållsmall:
      1. Klicka på Detaljer .

      Resurser, popup-meny för innehållsmall


      Du kan nu uppdatera innehållsavsnittet:
      1. Klicka på Redigera för att redigera innehållet .
      2. Klicka på Ta bort för att ta bort mallen.

      Resurser, Innehållsmall med ikonerna Redigera och Ta bort markerade

      Om du klickar på redigera kan du uppdatera innehållet och dela det med andra användare.
      1. Välj Personligt bibliotek, Organisationsbibliotek eller Företagsbibliotek om du vill att innehållsmallen ska vara tillgänglig för andra användare.
      2. När du har redigerat innehållet klickar du på Spara .

      Resurser, skärmbilden Redigera innehållsmall

      Så här infogar du en kopia av innehållsmallen i ett avsnitt:
      1. Åtkomst till avsnittet.
      2. Höger musklick.
      3. Välj Infoga mall .
      4. Välj mallen från rullgardinsmenyn.
      5. Klicka på Spara .
      Kurs, Modul, Redigera-sektion med Infoga mall markerad i högerklicksmenyn