Questo post magari non ti servirà subito, ma è uno di quelli da salvare nei preferiti e che potrà tornarti utile in caso di emergenza.
Faccio tutti gli scongiuri del caso, ma potrebbe succedere (a me è capitato più volte) che per ragioni misteriose il tuo bell’editor di WordPress collassi e tu possa modificare solo questa pagina di codice:
Un po’ di ansia, non è vero? Sembrano tante stringhe incomprensibili e sulle quali sembra difficilissimo intervenire. Ti assicuro che non è così, ed è proprio questo di cui voglio parlarti oggi: impareremo insieme a leggere l’html e riconoscere le porzioni di codice di base, quelle che ti servono per formattare ed intervenire in piccole cose senza telefonare disperata a chi ti ha realizzato il sito.
Imparare a leggere il codice html
Il codice html si scrive con i tag, che aiutano il browser ad interpretare il contenuto di una pagina web e a farlo visualizzare in modo corretto.
Un esempio di tag è questo: <strong>. Si tratta di parentesi angolari che racchiudono istruzioni preziose per definire tabelle, titoli, paragrafi, form contatti etc.
I tag, a parte piccolissime eccezioni, devono essere aperti e chiusi. Questo significa che se scorri una pagina di codice html funzionante, vedrai sempre un tag di apertura, come quello che ti ho fatto vedere sopra, seguito da uno di chiusura: </strong>.
Ogni tag può avere poi degli attributi, che non sono altro che ulteriori istruzioni specifiche per quel relativo tag. Il testo compreso tra i tag di apertura e chiusura si comporterà dunque di conseguenza.
Bene, adesso che sai cosa sono i tag e come si leggono, ti mostro quelli che servono per sapertela cavare da sola.
Formattazione del testo
In questa sezione trovi tutti i tag che ti aiutano ad organizzare meglio il tuo testo, a dividerlo in blocchi, dare gerarchia ai titoli, rilevanza ai concetti chiave con i grassetti, usare il corsivo.
- paragrafo: <p>blocco di testo</p>
- titoli: <h1>titolo</h1>. All’interno di un sito puoi avere dei titoli che vanno dall’h1 all’h6, L’h1 corrisponde al titolo principale di quella pagina, se c’è bisogno di aggiungere dei titoli ad altre sezioni puoi usare l’h2, per inserire delle sottosezioni vai di h3 e così via.
- grassetto: <strong> termini da mettere in grassetto</strong>
- corsivo: <em>parole che vuoi formattare in corsivo</em>
- citazione: <blockquote> Dipingo i fiori per non farli morire. F. Kahlo</blockquote>
I link
<a href=”url”> nome che viene visualizzato </a>
I link possono puntare a:
- un’altra pagina dello stesso sito;
- un altro sito;
- un diverso punto della stessa pagina;
- un indirizzo di posta elettronica.
Gli attributi che ti consiglio di controllare o aggiungere sono questi:
- title=”contenuto che vuoi venga visualizzato al passaggio del mouse”;
- target=”_blank “, se vuoi che il contenuto venga aperto in un’altra finestra, se non lo inserisci, di default la nuova pagina si aprirà nella stessa finestra.
Un esempio completo:
- < a href=”https://www.retealfemminilebiella.com/mi-metto-in-proprio-inizio/” title=”Mi metto in proprio”> Leggi il nostro ultimo post</a>
Elenchi puntati e numerati
Abbiamo visto che gli elenchi puntati e numerati aiutano le persone nella lettura del testo, rendendo più chiare spiegazioni e passaggi complicati. Il tag che corrisponde all’elenco puntato è <ul> </ul> che contiene al suo interno le varie voci che compongono l’elenco.
<ul>
<li>prima voce dell’elenco</li>
<li>seconda voce dell’elenco</li>
<li>terza voce dell’elenco</li>
</ul>
Se si vuole gestire un elenco numerato il concetto è lo stesso, ma il tag corrispondente è <ol> </ol>:
<ol>
<li>prima voce dell’elenco</li>
<li>seconda voce dell’elenco</li>
<li>terza voce dell’elenco</li>
</ol>
Le immagini
<img src=”percorso-immagine” />
È uno dei pochissimi tag che non prevede una chiusura corrispondente </img>. Il “percorso immagine” indica il luogo in cui risiede l’immagine sul tuo sito che, per quanto riguarda WordPress, è nella Libreria Media.
Puoi cambiare le dimensioni dell’immagine attraverso i parametri “width” e “height” e decidere quale posizione avrà all’interno della pagina, specificandolo nell’align. I valori ammessi sono:
- align=”left” (allineamento a sinistra)
- align=”right” (allineamento a destra)
- align=”top” (allineamento in alto a sinistra)
- align=”middle” (allineamento in centro verso sinistra)
- align=”bottom” (allineamento in basso verso sinistra)
- align=”baseline” (l’immagine viene posizionata alla linea di base dell’elemento accanto, ad esempio un testo)
Una volta aggiunta l’immagine, presta particolare attenzione a questi attributi che raccolgono informazioni preziose per i lettori (e i motori di ricerca):
- alt=”descrizione”. È super consigliato inserire una piccola descrizione in questo campo: le persone potranno capire cosa c’è rappresentato in quell’immagine se, per qualche motivo, dovessero avere problemi di visualizzazione; se la parola chiave è coerente con l’immagine puoi aggiungerla per dare più valore da un punto di vista SEO.
- title=”descrizione”. Anche questo è un testo che descrive l’immagine e compare ogni volta che si porta il cursore del mouse sull’immagine.
Un esempio completo:
- <img align=”left” src=”https://www.retealfemminile.com/wp-content/uploads/2018/03/donna-si-prepara-a-partire-1.jpg” alt=”donna-si-prepara-a-partire” title=”Donna che si mette in propio ” width=”1189″ height=”589″ />
Prova senza paure
Ora hai le idee un po’ più chiare? Per fare qualche prova, puoi aprire una pagina o un articolo nuovo sul tuo sito, salvarlo come bozza e poi sperimentare! Il codice html non è nostro nemico, è solo un altro linguaggio, con un po’ di pratica imparerai ad intervenire dove serve senza fare pasticci.
E, se dovessi farli, tranquilla: tutto si risolve, sempre 🙂
