editor HTML
Panoramica
L'editor HTML integrato consente a docenti, insegnanti e amministratori di creare e modificare contenuti direttamente all'interno di corsi, messaggi, widget e altro ancora.
Questo articolo ti insegnerà come accedere e utilizzare i vari elementi dell'editor per creare contenuti accattivanti ed esteticamente gradevoli.
Si prega di notare che la piattaforma aziendale utilizza di default il termine "corso" e la piattaforma accademica utilizza di default il termine "classe" . I termini "corso" e "classe" sono intercambiabili in questo articolo.
Il menu della barra degli strumenti
L'editor HTML viene visualizzato durante la modifica dei contenuti di corsi, messaggi, widget e altro ancora. La barra degli strumenti è composta da una barra dei menu e da icone che consentono di modificare il contenuto nella sezione.
Si noti che le schermate in questo articolo vengono visualizzate all'interno di una sezione del corso, ma la barra degli strumenti funziona allo stesso modo all'interno di corsi, messaggi e widget. Il generatore di contenuti a sinistra della barra degli strumenti è disponibile solo durante la modifica dei corsi.
La barra dei menu superiore è composta da sette menu, che verranno descritti più dettagliatamente di seguito.
File
Il menu File include le seguenti azioni:
Titolo | Descrizione |
Nuovo documento | Cancella tutto il testo, le immagini e i collegamenti dalla finestra di testo. |
Anteprima | Apri una finestra a comparsa per visualizzare un'anteprima del contenuto pubblicato. |
Stampa | Stampa il contenuto della finestra di testo. |
Modificare
Il menu Modifica include le seguenti azioni.
Titolo | Descrizione |
Disfare | Annulla l'ultima azione. |
Rifare | Ripeti l'ultima azione eseguita. |
Taglio | Rimuovi il testo/l'immagine selezionata e copiala negli appunti. |
Copia | Copia il testo/l'immagine selezionata e memorizzala negli appunti. |
Impasto | Incolla il testo/l'immagine dagli appunti. |
Incolla come testo | Incolla il contenuto dagli appunti come solo testo, senza formattazione. |
Seleziona tutto | Seleziona/evidenzia tutto il contenuto nella finestra di testo. |
Trova e sostituisci | Trova una parola o una frase e sostituiscila con una nuova parola/frase (se applicabile). |
Visualizzazione
Il menu Visualizza include le seguenti azioni per visualizzare testo e caratteri all'interno della finestra di testo.
Titolo | Descrizione |
Codice sorgente | Visualizza/modifica il codice sorgente nella finestra di testo. |
Mostra i caratteri invisibili | Visualizza caratteri invisibili come spazi e ritorni a capo. |
Mostra blocchi | Mostra i blocchi di paragrafo all'interno della finestra di testo. |
Anteprima | Apri una finestra a comparsa per visualizzare un'anteprima del contenuto pubblicato. |
Inserire
Il menu Inserisci include le seguenti azioni per inserire immagini, video, tabelle, collegamenti e altro ancora.
Titolo | Descrizione |
Collegamento | Inserisci un collegamento ipertestuale a un URL. |
| Media | Inserisci/incorpora un contenuto multimediale. |
| Tavolo | Inserisci e crea una tabella. |
| Personaggio speciale | Inserisci un carattere speciale. |
| Emoji | Inserisci un'emoji. |
Linea orizzontale | Inserisci una linea orizzontale. |
interruzione di pagina | Inserisci un'interruzione per iniziare una nuova pagina. |
Spazio non di rottura | Inserisci uno spazio che non interrompa la pagina. |
Ancorare | Inserisci un'ancora/un segnalibro in una posizione/posizione. |
Inserisci modello | Inserisci un modello salvato. |
Salva come modello | Salva il testo evidenziato come modello. |
Data/ora | Inserisci le opzioni di data o ora dal menu a tendina. |
Modifica equazione | Fai clic per modificare un'equazione evidenziata. |
Carica immagine | Fai clic per caricare un'immagine. |
Carica il file | Fai clic per caricare un file. |
Creare videoconferenze | Fare clic per aggiungere la videoconferenza al testo*. |
Registra l'audio | Fai clic per registrare l'audio direttamente nella finestra di testo. |
Registra il video | Fai clic per registrare il video direttamente nella finestra di testo. |
* Affinché le opzioni per la creazione di videoconferenze web vengano visualizzate, è necessario installare prima l'app o le app per le videoconferenze web dall'App Center.
Formato
Il menu Formato include le seguenti azioni per la formattazione del testo.
Titolo | Descrizione |
Grassetto | Metti in grassetto il testo selezionato. |
Corsivo | Metti in corsivo il testo selezionato. |
Sottolineare | Sottolinea il testo selezionato. |
Barrato | Barrare il testo selezionato. |
Apice | Formatta il testo selezionato come apice. |
Abbonamento | Formatta il testo selezionato come pedice. |
Codice | Formatta il testo selezionato come codice. |
Blocchi | Inserisci la formattazione del blocco appropriata dal menu a tendina. |
Caratteri | Seleziona un carattere diverso dal menu a tendina. |
Dimensioni dei caratteri | Seleziona la dimensione del carattere dal menu a tendina. |
Allineare | Seleziona uno stile di allineamento del testo dal menu a tendina. |
Altezza della linea | Seleziona l'altezza della linea dal menu a tendina. |
Aumentare il rientro | Rientra il testo o il paragrafo a destra. |
Diminuire la rientranza | Sposta il testo o il paragrafo a sinistra. |
Colore del testo | Seleziona il colore del testo desiderato dal menu a tendina. |
Colore di sfondo | Seleziona un colore di sfondo dal menu a tendina. |
Formattazione chiara | Formattazione chiara del testo selezionato. |
Utensili
Il menu Strumenti include le seguenti azioni.
Titolo | Descrizione |
Codice sorgente | Visualizza/modifica il codice sorgente. |
| Conteggio delle parole | Visualizza il conteggio di parole e caratteri. |
Tavolo
Il menu Tabella include le seguenti azioni per inserire una tabella e modificarne la struttura.
Titolo | Descrizione |
Tavolo | Inserisci una tabella. |
| Cella | Opzioni di modifica per le celle selezionate dal menu a tendina. |
Riga | Modifica, elimina e/o inserisci opzioni per la/le riga/e selezionata/e dal menu a tendina. |
Colonna | Modifica, elimina e/o inserisci opzioni per la/le colonna/e selezionata/e dal menu a tendina. |
Proprietà della tabella | Visualizza e modifica le proprietà della tabella, come larghezza, altezza, bordi, ecc. |
Elimina tabella | Elimina la tabella selezionata. |
Il menu secondario della barra degli strumenti
Sotto il menu principale, la barra degli strumenti è composta da menu a tendina facilmente accessibili e icone per ulteriori opzioni di formattazione.
Annulla e Ripeti
- Fai clic sull'icona Annulla per annullare l'azione precedente.
- Fai clic sull'icona Ripeti per ripetere l'azione precedente.
Stili di paragrafo e di intestazione
- Fai clic sul menu a discesa Stile intestazione per applicare formati e stili al testo.
Stile del carattere
- Fai clic sul menu a tendina del carattere per cambiare il carattere del testo.
Dimensione del carattere
- Fai clic sul menu a tendina "Dimensione carattere" per modificare la dimensione del testo.
Formato del carattere
- Fai clic sull'icona del grassetto per visualizzare il testo in grassetto.
- Fai clic sull'icona del corsivo per visualizzare il testo in corsivo.
- Fai clic sull'icona sottolineata per sottolineare il testo.
Colore del testo
- Fai clic sull'icona del colore del testo per scegliere/modificare il colore del carattere.
Allineamento del testo
- Fai clic sull'icona di allineamento per allineare il testo.
Elenco puntato
- Fai clic sull'icona dell'elenco puntato per creare e formattare un elenco puntato.
Elenco numerato
- Fai clic sull'icona dell'elenco numerato per creare e formattare un elenco puntato o numerato.
Carica l'immagine e carica il file
- Fai clic sull'icona di caricamento immagine per caricare un'immagine.
- Fai clic sull'icona di caricamento file per caricare i file.
Formattazione chiara
- Fai clic sull'icona Cancella formattazione per rimuovere gli stili che potrebbero essere stati importati copiando e incollando il contenuto.
Colore di sfondo
- Fai clic sull'icona Colore di sfondo per evidenziare testo e immagini.
Barra degli strumenti avanzata
Per funzionalità aggiuntive:
- Clicca su altro
icona per visualizzare la barra degli strumenti avanzata.
La barra degli strumenti avanzata viene visualizzata sotto la barra degli strumenti secondaria e include opzioni aggiuntive descritte di seguito.
Rientri e linea orizzontale
- Fai clic sull'icona "Riduci rientro" per diminuire il rientro del testo.
- Fai clic sull'icona Aumenta rientro per rientrare il testo.
- Fai clic sull'icona della linea orizzontale per inserire una linea orizzontale.
Emoji
- Fai clic sull'emoji
icona per aprire la tastiera Emoji.
- Fai clic su un'emoji per inserirla.
Personaggi speciali
- Fai clic sul carattere speciale
icona per aprire il menu a comparsa dei caratteri speciali.
- Fai clic su un carattere speciale per inserirlo.
Icone avanzate
- Fai clic sull'icona Inserisci/modifica collegamento
per inserire un collegamento a qualsiasi URL.
- Fai clic sull'icona Inserisci/Modifica file multimediali
per inserire/incorporare un collegamento a qualsiasi URL.
- Fai clic sull'icona Inserisci/modifica equazione
per inserire/incorporare un collegamento a qualsiasi URL.
- Fai clic sull'icona Inserisci modello
per inserire un modello.
- Fai clic sull'icona del codice sorgente
per visualizzare il codice sorgente della pagina corrente.
- Fai clic sull'icona Registra audio
per registrare l'audio direttamente nella pagina del corso.
- Fai clic sull'icona Registra video
per registrare video direttamente nella pagina del corso.
- Fai clic sull'icona Crea videoconferenza
per creare un collegamento per una videoconferenza utilizzando una delle opzioni del menu a tendina.
- Nota: verranno visualizzate solo le applicazioni di videoconferenza installate sulla piattaforma.
migliori prassi
Segui queste best practice per sfruttare al meglio l'editor.
- Per inserire un'interruzione di riga anziché un nuovo paragrafo, premi Maiusc + Invio.
- Quando si incorporano widget HTML, visualizzare prima la finestra di testo nel codice sorgente.
- Fai clic sul menu a tendina Visualizza .
- Fai clic su < > Codice sorgente .
- Incolla i contenuti di terze parti come testo semplice per evitare errori di formattazione.
- Per rendere invisibili i bordi di una tabella:
- Seleziona il tavolo.
- Fai clic su Proprietà tabella .
- Nella scheda Generale della finestra a comparsa, impostare lo spessore del bordo su "0".
- Nella scheda Avanzate , seleziona lo stile del bordo come "Nascosto" o "Nessuno".
Correttore ortografico
L'editor include un correttore ortografico che segnala le parole scritte in modo errato con una linea rossa. Per correggere un errore di ortografia:
- Premi CTRL + Clic con il tasto destro del mouse .
- Seleziona l'ortografia corretta dall'elenco dei suggerimenti.
Incorporamento delle variabili
È possibile incorporare variabili nelle pagine delle lezioni utilizzando il formato {{nome variabile}}. Questo permette di personalizzare i contenuti per utenti e corsi.
Nella pagina dei contenuti è possibile utilizzare le seguenti variabili:
- {{class_custom_field_1}}
- {{class_custom_field_2}}
- {{class_finish_date}}
- {{class_id}}
- {{class_location}}
- {{class_name}}
- {{class_name_with_link}}
- {{class_start_date}}
- {{completato_alle_UTC}}
- {{course_code}}
- {{credits}}
- {{giorni_in_classe}}
- {{giorni_rimanenti}}
- {{disattiva_studenti_dopo}}
- {{organization_id}}
- {{organization_name}}
- {{section_code}}
- {{site_name}}
- {{site_name_with_url}}
- {{teacher_name}}
- {{nome_insegnante_con_link}}
- {{user_email}}
- {{nome_utente}}
- {{user_full_name}}
- {{nome_comple_utente_con_link}}
- {{user_id}}
- {{user_last_name}}
- {{user_prefered_contact_method}}
- {{user_ssn}}
- {{userid}}
- {{Perché}}
Video sulle taglie
Se aggiungi un video come link nell'editor HTML, puoi impostarne le dimensioni utilizzando questo codice HTML:
<a width='100' height='700'>link</a>.
- Se desideri che il video venga ridimensionato automaticamente, puoi omettere uno dei valori (larghezza o altezza).
- È possibile utilizzare anche valori percentuali per impostare le dimensioni di un video, ad esempio <width='100%' >.
Modifica delle immagini
L'editor offre diverse opzioni per modificare le immagini una volta caricate. Per modificare un'immagine:
- Clicca sull'immagine.
- Appare un menu di opzioni.
Icona | Descrizione |
| Ruota l'immagine in senso antiorario | |
| Ruota l'immagine in senso orario | |
| Capovolgi l'immagine orizzontalmente | |
| Capovolgi l'immagine verticalmente | |
| Ritagliare l'immagine | |
| Modifica le proprietà dell'immagine |
Selezionando l'icona Modifica proprietà immagine , viene visualizzata la finestra di dialogo Inserisci/Modifica immagine.
- Fonte : Mostra la sorgente dell'immagine.
- Descrizione alternativa : Questa descrizione viene letta dai lettori di schermo per aiutare gli utenti ipovedenti.
- Larghezza e altezza : regola le dimensioni dell'immagine.
- Nota: utilizzare l'icona del lucchetto per garantire che l'immagine mantenga il suo rapporto larghezza/altezza.
Quando aggiungi una nuova immagine, puoi anche aggiungere una descrizione per i lettori di schermo:
- Inserisci una descrizione nel campo Descrizione immagine .
modelli di contenuto
I modelli di contenuto consentono di salvare frammenti di HTML nel Catalogo risorse e di inserirli facilmente nelle aree di contenuto in un secondo momento. È possibile utilizzare questa funzione per creare una libreria di elementi di contenuto comuni che si utilizzano frequentemente nelle proprie aree di contenuto.
Per aggiungere un frammento HTML a un modello di contenuto:
- Seleziona il testo e/o le immagini nell'editor HTML.
- Clic con il tasto destro del mouse.
- Seleziona Salva come modello .
- Inserisci un titolo per il modello.
- Fai clic su OK .
- Il modello di contenuto verrà salvato nella tua libreria personale.
Per accedere ai modelli di contenuto salvati:
- Fai clic su Risorse nella barra di navigazione a sinistra.
- Fai clic su Catalogo nel menu a comparsa.
- Filtra per tipo di risorsa > Modello di contenuto nel pannello di ricerca.
- Fai clic sul tuo modello di contenuto.
Viene visualizzato il modello di contenuto. Per visualizzare maggiori dettagli su un modello di contenuto:
- Fai clic su Dettagli .
Ora puoi aggiornare la sezione dei contenuti:
- Fai clic su Modifica per modificare il contenuto .
- Fai clic su Elimina per rimuovere il modello.
Se fai clic su "Modifica", puoi aggiornare il contenuto e condividerlo con altri utenti.
- Seleziona "Libreria personale" , "Libreria dell'organizzazione " o "Libreria aziendale" se desideri che il modello di contenuto sia disponibile anche per altri utenti.
- Dopo aver modificato il contenuto, fai clic su Salva .
Per inserire una copia del modello di contenuto in una sezione:
- Accedere alla sezione.
- Clic con il tasto destro del mouse.
- Seleziona Inserisci modello .
- Seleziona il modello dall'elenco a discesa.
- Fai clic su Salva .