Guida introduttiva al HTML per WordPress

Il post di oggi è intitolato “Guida introduttiva al HTML per WordPress”; non sai che cos’è l’ HTML? Non ti preoccupare! Alla fine della guida, conoscerai i concetti base di questo linguaggio di programmazione ed avrai tutti gli strumenti per iniziare a sperimentare con i codici.

Ti posso assicurare che l’HTML è un linguaggio piuttosto semplice. Può essere usato in modo molto avanzato, però per l’utilizzo che ne farai su WordPress una guida introduttiva dovrebbe esserti più che sufficiente.

Non aspettiamo oltre ed entriamo subito nel vivo.

Guida introduttiva al HTML per WordPress

Che cos’è l’ HTML?

HTML sta per Hyper Text Markup Language ed è un linguaggio di markup che serve principalmente a determinare layout e formattazione dei contenuti sulla pagina.

Ti faccio un esempio: hai presente come nei testi è possibile configurare paragrafi, titoli più grandi e sottotitoli più piccoli?

Queste caratteristiche vengono assegnate ai vari elementi testuali proprio attraverso i tag HTML.

Allo stesso modo, l’HTML serve ad indicare quando andare a capo con il testo o, per esempio, ad inserire link cliccabili nelle parole.

Come vedi, è molto utile ed è usato per configurare elementi presenti sul 99% delle pagine web!

Nei paragrafi successivi, vedremo come usare i tag HTML nella pratica, implementando tutte le cose che ho menzionato fino ad ora.

Perché imparare l’HTML quando usi WordPress?

Forse ti starai chiedendo: uso WordPress proprio per non usare linguaggi di programmazione, perché dovrei imparare l’HTML?

Di fatto, non devi necessariamente imparare l’HTML. Potresti infatti avere un sito funzionante al 100% senza toccare una riga di codice; questa è una delle cose che rende WordPress così accessibile e funzionale.

Però, se usi WordPress da un po’ di tempo, ti sarà forse capitato che l’Editore Visuale non faccia esattamente quello che gli dici di fare: per esempio, selezioni solo un paio di parole da formattare come titolo, e tutto il paragrafo successivo viene formattato allo stesso modo. Questo è molto fastidioso ed è talvolta difficile da risolvere usando l’Editore Visuale.

In casi come questo, l’HTML ti sarà un grande alleato. Lavorare direttamente sui codici ti offre infatti completo controllo. Come vedremo di seguito, posizionerai i tag intorno alle parole sulle quali vuoi che i codici siano effettivi.

In questo modo, sarai sicuro che i tag abbiano effetto solo ed esclusivamente sui contenuti selezionati.

Il funzionamento base dell’HTML

L’HTML funziona attraverso l’uso di tag. I tag sono racchiusi dai simboli “<” e “>” e, nella maggior parte dei casi, vengono aperti e chiusi. I tag di chiusura sono caratterizzati dal simbolo /

Ecco alcuni esempi:

• Tag di apertura <b>, tag di chiusura </b>
• Tag di apertura <i>, tag di chiusura </i>
• Tag di apertura <p>, tag di chiusura </p>

I contenuti a cui applicare i tag devono essere inseriti tra il tag di apertura e quello di chiusura, in questo modo:

• <b>Testo di prova</b>
• <i>Qui inserirai il testo</i>
• <p>Il tuo paragrafo</p>

Dove usare i codici HTML all’interno di WordPress

All’interno di WordPress, potrai usare i codici HTML nell’Editore di Testo. L’Editore di Testo si trova all’interno della schermata di creazione delle pagine e dei post.

Probabilmente, di solito usi l’Editore Visuale, che funziona in modo similare a Word. Per usare i codici HTML, dovrai invece selezionare la linguetta Editore di Testo.

Per fare una prova ed avere un’idea di come appare una pagina con codici HTML, apri la pagina di modifica di un post che hai già scritto.

Clicca, quindi, su “Editore di Testo”. Qui sarai in grado di riconoscere i tag HTML di cui abbiamo parlato prima.

Tag base nella barra degli strumenti

Iniziamo ora a vedere come usare i tag HTML nella pratica. I primi che andremo ad approfondire sono quelli già presenti nella barra degli strumenti dell’Editore di Testo.

Per inserire i tag attraverso l’Editore di Testo puoi procedere in due modi:

• selezionare il testo a cui vuoi che siano applicati, quindi cliccare il simbolo scelto nella barra degli strumenti. In questo modo, saranno aggiunti subito sia il tag di apertura che quello di chiusura attorno al testo selezionato.

• posizionare il cursore dove vuoi inserire il tag di apertura e selezionare il simbolo nella barra degli strumenti. Quindi, posizionare il cursore dove inserire il tag di chiusura e selezionare “Chiudi Tag”.

Procediamo in ordine:

Simbolo b

Il simbolo b serve ad inserire i tag <b></b>. Questo tag, serve a rendere grassetto il testo selezionato.

Simbolo i

Il simbolo b serve ad inserire i tag <i></i>. Questo tag, serve a rendere corsivo il testo selezionato.

Simbolo link

Il simbolo link serve ad inserire un url in corrispondenza del testo selezionato. I tag inseriti sono <a href=”il tuo url”></a>.

Come vedi, questo tag è un po’ diverso da quelli che abbiamo visto fino ad ora. Infatti, nel tag di apertura è presente la dicitura href= con le virgolette all’interno delle quali deve essere inserito l’url di destinazione.

Simbolo b-quote

b-quote sta per block quote. WordPress include sempre una formattazione speciale per le citazioni.

Quando selezioni questo simbolo, vengono inseriti i tag <blockquote></blockquote>.

Simbolo del

Il simbolo del serve ad aggiungere l’effetto barratto sul testo, inserendo i tag <del></del>.

Simbolo ins

Ins è il fratello di del. Solitamente, dopo un testo barrato (quindi effettivamente cancellato) ne viene inserito uno sostitutivo. I tag <ins></ins> servono proprio a questo.

Simbolo img

Il simbolo img serve ad inserire un’immagine all’interno del post. Quando hai caricato la tua immagine all’interno della libreria media, clicca “Modifica” e copia l’URL del file. Fatto questo, torna all’Editore di Testo e clicca img; a questo punto, ti sarà richiesto di incollare l’URL del file immagine.

Il tag img si dice “self-closing“, non ha cioè un tag di chiusura. Quando lo inserisci all’interno della pagina ha questo aspetto <img src=”URL file”/>

Simbolo ul

Qui le cose iniziano a farsi un po’ più complesse. Usando l’HTML, potrai creare due tipologie di liste puntate: ul (unordered list, cioè, con i bullet point) e ol (ordered list, cioè, una lista con i punti numerici).

Se vuoi creare una lista puntata, per prima cosa seleziona ul per inserire i tag <ul> ed </ul>. All’interno di questi tag, dovrai poi aggiungere i singoli elementi della lista con il tag li, di cui parleremo fra un paio di paragrafi.

Simbolo ol

Come abbiamo visto nella sezione precedente, il simbolo ol serve ad inserire i tag <ol> ed </ol> per creare liste numerate. Anche in questo caso, dovrai inserire al suo interno le singole voci della lista attraverso il tag li.

Simbolo li

Questo simbolo serve ad inserire elementi ad una lista, mediante i tag </li> e </li>. Puoi aggiungerne quanti desideri e, nel caso delle liste numerate, i numeri saranno assegnati automaticamente in ordine crescente.

Simbolo code

Se vuoi inserire codici all’interno dei tuoi testi, questo è il simbolo da selezionare. Serve infatti ad aggiungere i tag <code> </code> che formattano il testo con un font monospace.

In alternativa, puoi usare i tag <pre></pre> che servono a visualizzare in modo diverso i codici, inserendoli in una sorta di tabella.

Simbolo more

Questo è un tag estremamente utile, che però pochi conoscono. Nello specifico, serve ad interrompere l’anteprima dei post in un punto specifico, facendo apparire il link Read More.

Simbolo chiudi tag

Infine, il bottone chiudi tag non serve ad aggiungere specifici tag html, ma ad aggiungere un tag di chiusura dove ce ne è uno aperto.

Titoli e Paragrafi

Abbiamo visto i tag disponibili nella barra degli strumenti dell’Editore di Testo. Vediamo ora altri tag che probabilmente hai già usato spessissimo, senza però saperlo!

Paragrafo

Quando vuoi formattare un testo come paragrafo semplice, i tag da usare sono <p></p>. Noterai che, quando allinei il testo a sinistra, destra, al centro o in modo giustificato, WordPress inserisce automaticamente le informazioni relative all’allineamente all’interno del tag di apertura <p>.

Titoli e Sottotitoli

Come forse già sai, su WordPress puoi usare titoli di sei diverse dimensioni, dalla 1 alla 6 (la 1 è la più grande, mentre la 6 è la più piccola).

Come nel caso dei paragrafi, quando selezioni una voce dal menu a tendina all’interno dell’Editore Visuale, vengono inseriti dei tag nel codice HTML.

• <h1></h1> per il titolo 1
• <h2></h2> per il titolo 2
• <h3></h3> per il titolo 3
• <h4></h4> per il titolo 4
• <h5></h5> per il titolo 5
• <h6></h6> per il titolo 6

Ora che li conosci, puoi formattare titoli e sottotitoli manualmente usando i tag HTML.

Link

Come abbiamo già visto, il tag per inserire un link nel testo è <a href=”URL”></a>. Ora, ci sono degli attributi che puoi inserire nel tag di apertura per personalizzare ulteriormente il tuo link.

target=”_blank”

In questa guida base al HTML per WordPress, approfondiremo l’uso del tag target=”_blank”. Per default, i link WordPress hanno l’attributo target=”_self”, si aprono cioè sulla stessa scheda del broswer.

In diverse circostanze, è però utile che un link si apra su una nuova scheda (per esempio, quando linki ad una pagina esterna e non vuoi che l’utente abbandoni il tuo sito). In questo caso, dovrai inserire l’attributo target=”_blank” all’interno del tag di apertura <a href=”URL”>, in questo modo:

<a href=”URL” target=”_blank”>Il tuo testo da linkare</a>

rel=”nofollow”

Un altro attributo molto utile è rel=”nofollow”. Sempre da inserire all’interno del tag di apertura <a href=”URL”>, serve ad evitare che attraverso il link sia trasferito anche il link juice.

Il link juice è l’ “autorevolezza” su Google, che viene appunto trasferita da una pagina all’altra attraverso i link. Per approfondire l’argomento, ti consiglio di leggere questa guida.

Usando rel=”nofollow” chiedi a Google che non sia trasferito alcun link juice.

Come imparare ad usare i codici HTML?

Come abbiamo visto in questa guida, la sintassi dei codici HTML è abbastanza semplice. Si tratta più che altro di prendere familiarità con i tag disponibili ed imparare a riconoscerli all’interno del testo.

Il mio consiglio è di iniziare a lavorare anche sull’Editore di Testo, così da imparare a riconoscere i codici HTML e magari fare qualche modifica. Quindi, puoi provare ad integrare i tag presentati in questa guida.

Se vuoi andare oltre, una risorsa fenomenale è il sito W3School (in inglese) dove trovi tantissimi tutorial ed esempi su HTML ed altri linguaggi di programmazione.

Conclusione

Siamo arrivati alla fine di questa guida introduttiva al HTML per WordPress. Scommetto che il termine HTML ed i codici dell’Editore di Testo ti fanno già meno paura, ora non ti resta che iniziare a fare un po’ di esercizio.

Come sempre, se hai qualunque domanda, puoi lasciare un commento qui sotto. Ti risponderemo al più presto.

• Bio
• Latest Posts

Chiara Buzzi

Chiara è una blogger a tempo pieno. Esperta di content marketing, aiuta imprenditori e liberi professionisti a sfruttare la rete per promuovere online la loro attività. Quando non sta lavorando sul web, Chiara ama leggere riviste e cucinare, ed ha una strana ossessione per tutto ciò che riguarda il mondo del beauty.

Latest posts by Chiara Buzzi (see all)

• Come fare apparire al meglio i contenuti WordPress per Facebook, Twitter e G+ - 16 agosto 2017
• Vendi online con WordPress Simple PayPal Shopping Cart - 26 aprile 2017
• Aumentare le condivisioni con la funzionalità Pay with a Like - 30 marzo 2017