HTML e WordPress

W3C HTML icona di certificazione w3c HTML sta per Hyper Text Markup Language ed è un linguaggio di markup utilizzato per determinare la struttura di una pagina web. La quasi totalità delle milioni di pagine in Internet si basa su questo linguaggio.

Nelle pagine web l’HTML non serve solo per formattare i testi o assegnare il neretto o il corsivo, ma è indispensabile soprattutto per definire la struttura della pagina, i paragrafi, i titoli, si definiscono blocchi, si inserirscono immagini, e altre forme multimediali come audio e video; è un elemento HTML anche il tag principe del web che crea i link ipertestuali.

Il markup HTML è applicato alle pagine attraverso etichette che si chiamano tag, utilizzando normali editor di testo. In wordpress il markup è scritto con l’editor di sistema TinyMCE in modalità Testo.

Ma HTML è utile in WordPress?

L’editor visuale di WordPress, è facile da usare, posso scrivere un’intera enciclopedia senza la necessità di conoscere una riga di codice; e allora perché dovrei sforzarmi ad imparare qualche principio di questo linguaggio? Intanto, semplifichiamo; L’HTML nella versione 5, si compone di circa un centinaio di tag, ma quelli utili per la formattazione del testo in WordPress, sono poco più di una decina e il tag <p>testo del paragrafo</p>, usato per definire inizio e fine di un paragrafo, che tanto impegna nella pubblicazione corretta delle pagine web, in WordPress non è neanche necessario definirlo, perché il sistema lo inserisce automaticamente tutte le volte che si preme il tasto invio e si va a capo.

Lo scopo per cui potrebbe essere utile conoscere alcuni tag HTML, è il desiderio di avere più controllo sul testo di quanto lo consenta l’editor visuale. Avere più controllo significa decidere come deve essere formattato un testo, dove comincia e dove finisce la formattazione di un paragrafo, quale gerarchia di titolo adottare, come descritto nell’articolo titoli, indici e sommari.

Spesso diventa utile lavorare in entrambi i modi, e alternare la vista Testo per applicare il markup, al modo Visuale dove scrivere rapidamente il testo e avere un’idea più precisa dell’aspetto dell’articolo. Come il navigatore di Google Maps. Ci si può affidare completamente a questo e sicuramente arrivi a destinazione, a volte però, se si conosce in parte il percorso, si può viaggiare in autonomia (editor Testo) per le strade che si conoscono, e affidarsi al navigatore (editor Visuale) per quel tratto di percorso che non si conosce.

Come si applica l’HTML

Marcare un testo con l’HTML è piuttosto semplice. Questo linguaggio si basa sull’uso di marcatori chiamati tag e vengono rappresentati dai simboli “<” e “>” all’interno dei quali si trova l’elemento necessario per indicare al browser cosa si vuole fare e su quale elemento si vuole applicare la formattazione.

Ecco alcuni esempi:

  • Tag di apertura, <b>tag di chiusura</b>
  • Tag di apertura, <em>tag di chiusura</em>
  • Tag di aperura, <p>paragrafo</p>

Il testo a cui applicare la formattazione con i tag deve essere inserito tra il tag di apertura e quello di chiusura, in questo modo:

<strong>Testo di prova</strong>
<em>Qui inserirai il testo</em>

In HTML, per elemento si intende la stringa completa che comincia con il tag di apertura <tag>il suo contenuto e il tag di chiusura</tag>.

struttura di un elemento html

I tag sono sempre due, uno di apertura e uno di chiusura riconoscibile dal simbolo / (barra o slash) che precede il nome del tag.

Alcuni tag si dicono vuoti perché non hanno un tag di chisura specifico ma si scrivono così:

  • <br /> impone al browser un’interruzione di riga;
  • <hr />impone al browser una linea orizzontale;
  • <img />il tag che indica al browser il caricamento di un’immagine.

L’HTML 5 consente di scrivere markup in modo abbastanza libero e non rende obbligatorio il tag di chiusura, così come non fa distinzione tra scrivere in minuscolo o maiuscolo.

Per una formattazione formalmente corretta, è consigliabile usare entrambi, i tag di apertura e di chiusura e usare il minuscolo.
È caldamente consigliato creare un’uniformità di scrittura, darsi delle regole, ed evitare forme miste, qualcosa in maiuscolo, altre in minuscolo, dimenticare di chiudere gli elementi. Perciò è necessario definire a priori il proprio stile di markup. Più si è precisi e uniformi, meno tempo si perde nella ricerca degli errori, e si creano pagine HTML corrette e rispondenti alle linee dettate dal W3C, il W3C o Word Wide Web Consortium è l’organismo che stabilisce e approva gli standard WEB.

Dove usare i codici HTML all’interno di WordPress

In WordPress i simboli utilizzati come markup per il testo sono un po’ personalizzati per l’uso con il CMS (Content Management System), nell’HTML usato per il markup delle pagine web, l’etichetta di alcuni tag è scritta diversamente, ma questo non è un limite.

In WordPress, il markup HTML si trova nell’editor normalmente usato per scrivere articoli o contenuti delle pagine e lo si avvia quando si fa click sul pulsante Testo se si sta utilizzando l’editor in modalità Visuale.

La modalità Testo è da usare tutte le volte che si vuole inserire del markup all’interno della pagina o di un articolo, perché il modo Visuale, incolla il codice come stringa di testo e non la interpreta come codice che dice al browser di fare qualcosa.

Probabilmente quando scrivi usi l’editore Visuale, che ricorda moltissimo gli elaboratori di testo più diffusi e usati da tutti noi. Per usare i codici HTML, dovrai invece passare alla vista Testo facendo click sul pulsante Testo.

Passare alla vista testo
Passare alla vista testo

Per fare una prova e vedere com’è l’editor con il markup HTML, apri un articolo che hai già pubblicato o fai click su articoli e seleziona la voce crea nuovo, ora fai click su Testo.
La barra superiore che si presenta mostra alcuni dei tag più usati per la formattazione del testo.

Modalità testo
Modalità testo e i tag HTML

Come si usano i tag

Per applicare i tag e formattare il testo, ci sono due sistemi:

  • fai click con il mouse all’inizio della stringa di testo in modo da posizionare il cursore dove vuoi inserire il tag di apertura; fai click sul simbolo del tag che vuoi applicare. Il sistema inserisce il tag selezionato; fai click alla fine del testo che devi formattare per posizionare il cursore e fai click sul tag di chiusura, simile a quello di apertura ma preceduto dal simbolo /. Il sistema fa apparire l’uno o l’altro tag a seconda dell’azione svolta precedentemente;
  • Si seleziona con il mouse tutta la frase che si vuole formattare e si clicca sul simbolo necessario. Il sistema applica in automatico il tag di apertura e quello di chiusura.

Tipi di Tag

I tag HTML che possiamo usare con l’editor sono:

b:
sta per bold, rende in grassetto il testo selezionato;
i:
sta per italic, rende in corsivo il testo selezionato;
link:
Il simbolo link serve ad inserire un URL tra il testo selezionato che sarà il testo su cui fare click. Questo tag è diverso da quelli che abbiamo visto fino ad ora. Infatti, nel tag di apertura è presente l’attributo href=”” all’interno delle virgolette deve essere inserito l’url di destinazione. Nell’HTML  questo è rappresentato dal tag <a href=”indirizzo della risorsa o URL”>testo del link</a>, mentre link manda ad altre risorse.
b-quote;
sta per blockquote indica le citazioni lunghe. WordPress applica una formattazione particolare alle citazioni. Anche questo nell’HTML “vero” è scritto <blockquote>testo</blockquote>.
Per citare autori o titoli di libri o altre fonti il tag è  <cite>nome della fonte</cite>. Per citazioni brevi, di solito di testo il tag è <q>testo breve</q>.
del:
Il tag crea testo barrato, con significato di cancellato.
ins:
di solito, dopo un testo barrato (quindi cancellato) ne viene inserito uno sostitutivo.
img:
inserisce un’immagine all’interno dell’articolo. Quando hai caricato la tua immagine ottimizzata per il web all’interno della libreria media, clicca “Modifica” e copia l’URL del file. Torna all’Editor di Testo e clicca img, infine, incolla l’URL del file immagine.
In questo caso è forse più rapido e intuitivo usare il pulsante Aggiungi media
ul:
con il tag ul si creano liste non ordinate (unordered list) dove l’ordine delle voci che compone l’elenco non ha importanza.
es:

  • una voce
  • un’altra voce
  • ancora un voce

Per creare un elenco come questo, si seleziona il tag ul facendo click sul suo pulsante, fatto click, sulla barra dell’editor ul viene rimpiazzato da /ul e fai click anche su questo.  Selezionando questi due tag, hai definito l’inizio (ul) e la fine dell’elenco (/ul).

Ora si devono inserire le voci dell’elenco, queste sono precedute dal tag <li>  (list item) e si chiudono con il tag </li>.

Per inserire le voci dell’elenco procedi in questo modo:

  1. fai click tra <ul> e </ul> così da inserire il cursore;
  2. scrivi le voci;
  3. con il mouse seleziona una voce;
  4. fai click sul tag li. In questo modo, come descritto prima, il sistema inserisce in automatico, i tag di inizio e di fine markup, volendo si può procedere a definire singolarmente l’inizio e la fine della voce;
  5. procedi a selezionare ogni voce e fai click sul tag li;
ol:
per creare le liste ordinate (ordered list), dove l’ordine delle voci è importante, e sono precedute da un numero o lettera, si procede nello stesso modo di ul, ma il tag iniziale da cliccare non è ul, ma ol e il suo tag di chiusura sarà /ol.
code:
utilizzato per inserire codici all’interno dei testi. Serve infatti ad aggiungere i tag che formattano il testo con un font monospace.
more:
serve ad interrompere l’anteprima degli articoli in un punto specifico definito dall’autore, facendo apparire il link Read More;
chiudi tag:
il pulsante chiudi tag non aggiunge un tag html, ma inserisce un tag di chiusura dove ce ne è uno aperto.

Liste di definizione

La descrizione dei tag definita sopra, è formattata come lista di definizione, vale a dire, un nome seguito dalla sua spiegazione, come nel caso dei dizionari, ed è fatta in modalità Testo utilizzando i tag

<dl>definition list</dl>

<dt>defintion term</dt>

<dd>definition data</dd>

Purtroppo questo tag non è presenta tra quelli dell’editor TinyMCE, ma è molto utile e può essere simpatico conoscerlo e sapere come usarlo.

Una lista di definizione si formatta in questo mdo:

  1. Passa all’editor Testo
  2. Inserisi il tag di apertura <dl> che dice al browser “attento qui comincia una lista di definizione”
  3. Inserisci il tag <dt>scrivi il primo termine da definire e scrivi il tag di chiusura</dt>
  4. Inserisci il tag <dd>scrivi la definizione del termine 1 e scrivi il tag di chiusura</dd>
  5. Inserisci il tag <dt>scrivi il secondo termine di definizione e il tag di chiusura</dt>
  6. Inserisci il tag <dd> scrivi la definizione del termine 2 </dd>
  7. Inserire tutti gli altri termini e loro definizioni. Fai attenzione ad aprire e chiudere tutti i tag.
  8. Inserire il tag che chiude la lista di definizione </dl> che dice al browser “guarda che qui finisce la lista didefinizione”.

Il markup dovrebbe essere simile a questo:

<dl>

<dt>termine di definizione 1</dt>

<dd>spiegazione del termine 1</dd>

<dt>termine di definizione 2</dt>

<dd>spiegazione del termine 2</dd>

<dt>termine di definizione 3</dt>

<dd>spiegazione del termine 3</dd>

</dl>

Con Html si possono fare moltissime altre cose, se poi riusciamo a collegare l’HTML con le regole CSS (Cascading Style Sheets), allora potremmo personalizzare profondamente qualsiasi pagina Web.

HTML e CSS: saperne di più

HTML è utile per creare pagine Web da zero, e se viene unito all’uso delle regole di presentazione e layout CSS o fogli di stile a cascata, può dare grandi risultati con piccoli sforzi.

Se vuoi saperne di più su HTML e CSS puoi leggere la guida HTML e CSS pubblicata su Spazioprever.

2 Risposte

  1. Roberto Siano
    | Rispondi

    Grazie per tutto quello che fai per combattere il nostro analfabetismo digitale!

  2. Roberto Bianchi
    | Rispondi

    Faccio quello che posso per quel poco che so. Peccato che i corsi seguiti come animatore digitale siano serviti a poco o nulla. Solo tante parole ma con ricadute quasi nulle. Invito tutti ad indicarmi qualche aspetto che vorreste approfondire.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *