10 Codici HTML di base che devi assolutamente conoscere
Durante il processo di creazione del vostro sito web, potreste aver incontrato su internet termini come editor HTML, codice HTML o tag HTML.
Mentre la maggior parte delle piattaforme per costruire siti web (come WordPress) sono abbastanza facili da usare e non richiedono molte conoscenze tecniche, imparare di più sui codici HMTL vi aiuterà a capire i concetti di programmazione e vi preparerà per quando sarà il momento di modificare o migliorare l’aspetto del vostro sito.
Ecco perché condivideremo con voi alcune nozioni di base sull’argomento, così come un elenco dei 10 codici HTML che dovreste conoscere e anche alcuni esempi, in modo da poter imparare ad usarli correttamente.
Cos’è l’HTML?
HTML sta per “Hyper Text Markup Language” o Hypertext Markup Language.
I codici HTML sono il linguaggio universale utilizzato per creare e dare forma ai siti web. Funzionano su qualsiasi sistema operativo (Windows, Mac, Linux, ecc.) e con qualsiasi browser (Chrome, Explorer o Mozilla).
Anche se non è un linguaggio di programmazione molto sofisticato, saper gestire l’HTML permette di inserire altri codici più potenti, come Javascript, per esempio. Ora guardiamo l’elemento base della sintassi HTML: i tag.
I tag HTML
Il linguaggio HTML è costituito da un sistema di tag, che includono istruzioni che i browser traducono come:
- Immagini
- Testo
- Collegamenti ipertestuali
- Elenchi di parole
- Tabelle, ecc.
Così, affinché un elemento di questo tipo sia leggibile, il tag deve avere due parti: un tag iniziale (<tag>) e un tag di chiusura (</tag>) tra parentesi angolate (< >).
Per esempio, i tag <strong> e </strong> definiscono il testo in grassetto. Se nel nostro documento HTML scriviamo una frase con il seguente codice:
<strong>Questo testo è in grassetto.</strong>
Il risultato sarà:
Questo testo è in grassetto.
Provate voi stessi! Inserite il codice di cui sopra in un visualizzatore HTML.
Come sono sicura che avete notato, il tag iniziale è usato per definire il comportamento del contenuto (per esempio, se un testo sarà in grassetto o se avrà una dimensione specifica), e il tag di chiusura dice al browser fino a che punto quel comportamento deve arrivare. Per costruire le “chiusure” basta aggiungere una barra obliqua o “slash” (/) all’inizio del tag.
Vale la pena notare che non tutti i tag hanno bisogno di un tag di “chiusura”. Per esempio, il codice <br> per inserire le interruzioni di riga è considerato un “elemento vuoto” e può stare da solo in qualsiasi punto del testo del corpo.
Per creare di siti web completi, l’utilizzo di documenti HTML vi permetterà di tenere organizzati in un unico posto tutti i codici che userete in ogni pagina. Potete creare questo documento nell’editor di testo che preferite (Microsoft Word o Notepad), e assicuratevi solo di salvarlo come .html o un altro formato web (è un documento per ogni pagina).
Elenco dei codici HTML di base
Prima di guardare i codici HTML di base, dovreste sapere che la prima riga del vostro documento HTML dovrebbe sempre contenere il tag <!DOCTYPE html>. Questo renderà il codice del vostro sito leggibile in qualsiasi browser.
Ora, un buon documento HTML deve avere quattro tag essenziali perché il contenuto sia distribuito correttamente. Questi sono:
1. HTML
<html> si trova all’inizio di un documento HTML e dice ai browser che la pagina ha del codice HTML in modo da poterla leggere in quel modo. Seguendo la sintassi di questo linguaggio, il tag di chiusura </html> sarà l’ultimo elemento del documento.
2. Intestazione
<head> è il tag utilizzato per l’intestazione della pagina. La sua funzione principale è quella di contenere tutte le informazioni sul funzionamento del sito. Per questo motivo è un codice criptato che le persone che entrano nella pagina non possono vedere.
3. Titolo del documento
<title> è il tag che dà un nome al vostro sito affinché gli utenti possano identificarlo. È il titolo che si vede nelle schede del browser.
4. Corpo
<body> è il tag che contiene tutti i singoli elementi del sito. In altre parole, contiene tutto il contenuto visibile. Qui potete inserire testo, immagini, video o qualsiasi altra funzionalità che volete visualizzare.
Facciamo un esempio dei quattro tag essenziali:
<html> <head> <title>La mia pagina di esempio</title> </head> <body> Qui ci va il contenuto </body> </html>
Con i quattro tag di cui abbiamo appena parlato avete già lo “scheletro” della vostra pagina web. Il prossimo compito sarebbe quello di inserire del testo (tra i tag <body> e </body>) e controllare i suoi tag. Vediamo i più elementari.
5. Intestazioni di pagina e di paragrafo
<h1> <h2>… <h6> sono tag che lavorano per aggiungere titoli e sottotitoli nel corpo del testo, il che aiuta a gerarchizzare le informazioni. A proposito, vi consigliamo di usare il tag H1 solo una volta all’interno del contenuto.
Esempio:
<h1>Questo è un tag H1. Usalo nel tuo titolo.</h1> <h2>Questo è un tag H2. Usalo nei titoli di sezione.</h2> <h3>Questo è un tag H3. Usalo nelle sottosezioni.</h3> <h4>Questo è un tag H4. Non sono usati molto spesso.</h4> <h5>Questo è un tag H5.</h5> <h6>Questo è un tag H6.</h6>.
Risultato:
6. Paragrafi
I tag <p> e <br> ti aiutano a organizzare il testo in paragrafi e interruzioni di riga.
Esempio:
<p>Il tuo primo paragrafo. <p>Il tuo secondo paragrafo.</p> <p>Un enunciato.<br> Un secondo enunciato (legato al precedente).</p>
Risultato:
Il tuo primo paragrafo.
Il tuo secondo paragrafo.
Un enunciato.
Un secondo enunciato (legato al precedente).
7. Immagini
Con il tag <img> potete aggiungere immagini al corpo della vostra pagina. Combinandolo con l’attributo src vi permetterà di specificare la posizione in cui si trova l’immagine, e l’attributo alt vi aiuterà a dare un titolo all’immagine per i motori di ricerca come Google.
La struttura degli attributi è la seguente: prima viene la parola o l’abbreviazione che lo definisce (in questo caso src è l’abbreviazione di “source”), poi il segno di uguale (=) e infine il modificatore dell’attributo tra apici doppi (“_”) o singoli (‘_’).
Esempio:
<img src="https://images.pexels.com/photos/1930421/pexels-photo-1930421.jpeg">
Risultato:
8. Collegamenti ipertestuali
Il tag <a> permette di inserire un collegamento ipertestuale alla pagina. Per esempio, il link ai vostri profili social o a un altro sito web con cui volete collegare la vostra pagina.
Esempio:
<a href="https://it.godaddy.com/blog">Visita il blog di GoDaddy</a>
Risultato:
Come avrete notato, l’attributo usato qui era href.
9. Liste e indici
Tra i codici HTML di base, <ol> è usato per aggiungere elenchi numerati e <ul> è usato per aggiungere punti elenco, che migliorano la leggibilità dei vostri testi.
Esempio:
<ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> <li>Elemento 4</li> </ul>
Risultato:
- Elemento 1
- Elemento 2
- Elemento 3
- Elemento 4
10. Stile
Anche se di solito si trova all’interno del tag <head>, con l’attributo <style> potete definire lo stile del vostro contenuto in termini di:
- Colore
- Dimensione del carattere
- Font tipografico, ecc.
Esempio:
<p style="color:red; font-size:100px">Ciao Mondo</p>.
Risultato:
Un suggerimento in più: affidarsi ai codici HTML di altri siti può aiutare a capire meglio il web design. Questi sono disponibili in qualsiasi momento cliccando con il tasto destro del mouse su un punto vuoto e selezionando “Visualizza sorgente pagina”.
Speriamo che questo articolo abbia stimolato la vostra curiosità sul funzionamento di questi codici, in modo da non perdere nessun dettaglio quando iniziate a formattare le vostre pagine web. Ricordate che la pratica rende perfetti.
Se il linguaggio informatico non è il vostro forte… non preoccupatevi! Per quello ci sono anche i costruttori di pagine web come GoDaddy, grazie al quale potete creare il vostro sito da zero anche se non avete alcuna conoscenza precedente di programmazione.