In questo articolo provo a spiegarti in 5 minuti (!) qualche concetto base del linguaggio HTMl e, soprattutto, consigliarti dei codici HTML già pronti che potranno tornarti utili in futuro.
Cos’è il linguaggio HTML?
Il linguaggio HTML è un linguaggio nato per creare le pagine web dei siti internet. Si tratta di una serie di istruzioni che “dicono” al browser come organizzare testi, immagini, video, tabelle, ecc. e presentarli all’utente finale che naviga in un sito.
Oggi in pochissimi progettano interi siti internet scrivendo direttamente il codice HTML, perché – per fortuna – ormai questi processi vengono svolti in maniera più immediata da piattaforme come WordPress, Joomla o Drupal, chiamati CMS (Content management system). Un po’ come succede con i più famosi programmi di videoscrittura, sono i CMS a scrivere per noi il codice HTML, per esempio inserendo la stringa di codice per ottenere un testo in grassetto quando clicchiamo sull’icona G.
A cosa serve?
A cosa serve oggi conoscere il linguaggio HTML se ormai ci sono le piattaforme di CMS che fanno praticamente tutto in automatico? Ebbene, diverse volte, nella mia carriera, conoscere il linguaggio HTML mi ha permesso di risolvere in pochi secondi un problema o un intoppo che avrebbe richiesto l’intervento di un ingegnere informatico o di un programmatore, facendomi risparmiare tempo prezioso e acquisire anche un po’ di autorevolezza in più tra i colleghi.
Ok, iniziamo! Cosa sono i tag HTML? Come funzionano?
La prima cosa che devi imparare a dare delle “istruzioni” al browser per mostrare “qualcosa” in un determinato modo (testo, immagini, tabelle, ecc.) sono, in particolare, i tag. Se voglio scrivere un testo in grassetto, per esempio, devo utilizzare il tag bold, e cioè <b>, prima del testo.
Un’altra cosa importante da sapere è che i tag, in genere, vanno aperti e richiusi. Un tag di apertura è formato da questi simboli <TAG>, mentre quello di chiusura presenta il simbolo dello slash (la barra obliqua) </TAG>.
Tornando all’esempio di prima, se vogliamo scrivere una parola in grassetto oppure rimarcarla, dovremo utilizzare uno di questi due codici:
<b>frase da scrivere in grassetto</b>
<strong>frase da scrivere in grassetto</strong>
e come risultato avremo questo:
frase da scrivere in grassetto
Allo stesso modo, si possono scrivere parole in corsivo, utilizzando il tag italic:
<i>frase da scrivere in corsivo</i>
oppure sottolineato, con il tag underline:
<u>frase da scrivere sottolineata</u>
Codici HTML già pronti da copiare
Adesso che hai capito il funzionamento, vediamo quali sono i tag HTML più utili. Se vuoi, puoi salvare questa pagina tra i preferiti, in modo da avere a disposizione i principali codici HTML già pronti da copiare, ma personalmente ti consiglio di impararli: sono sicuro che mi ringrazierai!
1. Codice HTML per inserire i link
Iniziamo con il tag anchor <a></a> che serve a dire al browser come inserire un link nella pagina web. Tra i due tag occorre inserire il testo che vogliamo visualizzare e su cui l’utente cliccherà. Per esempio:
<a>Clicca qui</a> per il sito di Fabio Brocceri
A questo punto occorrerà inserire l’URL della pagina a cui vogliamo rimandare. L’attributo da utilizzare è href=””, e l’URL andrà inserito all’interno delle virgolette. Vediamolo nell’esempio:
<a href=”https://www.fabiobrocceri.it”>Clicca qui</a> per il sito di Fabio Brocceri
Il risultato finale sarà questo:
Clicca qui per il sito di Fabio Brocceri
2. Codice HTML per i titoli
Il linguaggio HTML in genere “lavora” insieme ad un altro linguaggio, il CSS (sto semplificando molto, ma spero tu possa capire i concetti!). In questi casi, per dire al browser che stiamo scrivendo un titolo o un titoletto utilizzeremo i tag <H1></H1> oppure <H2></H2> o ancora <H3></H3> e così via, proprio come se fosse la formattazione di titoli, titoli di capitoli, titoli di paragrafi, ecc. Ecco anche qui un esempio:
<H1>Titolo</H1>
<H2>Titoletto</H2>
<H3>Paragrafo</H3>
che diventano rispettivamente:
Titolo
Titoletto
Paragrafo
3. Codice HTML per andare a capo
Se vogliamo semplicemente indicare al browser che il testo successivo deve ripartire da capo, il tag da utilizzare è molto semplice: <br>. Questa volta senza necessità di “chiuderlo”. Se vogliamo dare più spazio ripeteremo il tag diverse volte: <br><br><br>. In alternativa possiamo aprire e chiudere un paragrafo, in questo modo: <p></p>.
4. Codice HTML per gli elenchi
Per fare un elenco puntato con il linguaggio HTML occorre utilizzare: i tag <ul>/ul> per aprire l’elenco e <li></li>per ogni voce dell’elenco. In entrambi i casi i tag vanno aperti e chiusi, come in questo esempio:
<ul>
<li>Voce 1</li>
<li>Voce 2</li>
<li>Voce 3</li>
</ul>
e il risultato sarà questo:
- Voce 1
- Voce 2
- Voce 3
5. Codice HTML per inserire un’immagine
Se vogliamo inserire un’immagine nella nostra pagina web, il tag da utilizzare è <img>. All’interno del tag dobbiamo però indicare l’URL dove si trova la nostra immagine, utilizzando l’attributo src=”” . Per esempio:
<img src=”https://www.fabiobrocceri.it/immagini/foto1.jpg“>
Sarebbe opportuno anche inserire un testo alternativo, nel caso vi siano problemi di caricamento delle immagini ma anche per una fattore di accessibilità (ci sono dei software per i non vedenti che “leggono” lo schermo al posto loro e in assenza di un testo descrittivo dell’immagine non saprebbero cosa fare). L’attributo da utilizzare per il testo alternativo è alt.
<img src=”https://www.fabiobrocceri.it/immagini/foto1.jpg” alt=”Questa è una foto di Fabio Brocceri”>
6. Codice HTML per inserire una tabella
Il tag per inserire una tabella è <table>, con il relativo tag di chiusura </table>. Le righe della tabella si indicano con i tag <tr> e </tr>, mentre le colonne con i tag <td> e </td>.
Facciamo un esempio. Se volessimo creare una tabella con due righe e due colonne il codice da inserire sarebbe questo:
<table>
<tr><td>Testo cella 1</td><td>Testo cella 2</td></tr>
<tr><td>Testo cella 3</td><td>Testo cella 4</td></tr>
</table>
Il risultato sarà questo:
| Testo cella 1 | Testo cella 2 |
| Testo cella 3 | Testo cella 4 |
Quando ho iniziato a realizzare i primi siti internet io utilizzavo spesso le tabelle con bordo trasparente (<table border=”0″>) per suddividere le varie sezioni della pagina.
7 Come si indicano i colori in HTML
Nel linguaggio HTML ogni colore viene rappresentato da un codice alfanumerico esadecimale, cioè formato da 6 numeri e/o lettere, preceduti dal segno #. I primi due caratteri indicano il colore rosso, i secondi il verde e gli ultimi due il blu.
#000000
In base alla quantità di rosso, di verde e di blu (proprio come se stessimo mescolando i colori primari) si verranno a formare i colori desiderati. Facciamo qualche esempio. Il codice del bianco è #FFFFFF (tutti i colori sono al valore massimo, se ricordi il bianco è l’insieme di tutti i colori), mentre il nero è #000000 (assenza di tutti i colori). Il rosso è #FF0000, il verde #00FF00, il blu #0000FF. Se osservi bene, il valore minimo di ogni colore è 00, il massimo FF (non 99, perché il sistema è esadecimale, ricorda!). Qui trovi tutte le altre sfumature.
8 Mettere uno spazio
Per mettere uno spazio, che equivale ad una pressione della barra spaziatrice, il codice HTML da utilizzare è questo:
 
In questo caso non si usano i tag.
9. Altri attributi HTML da conoscere
Come abbiamo visto, i tag HTML possono essere “declinati” specificando degli attributi. Quelli che più frequentemente mi è capitato di incontrare sono questi:
- align=”center”, per allineare un’elemento al centro;
- border=”X”, per indicare le dimensioni dei bordi;
- width=”X” e height=”X” per specificare la larghezza e l’altezza di un elemento.
