Tag di base

Ho definito tag di base quelli che servono per le banali operazioni di inserimento di Testo, liste, link e immagini. Mi sembrano proprio alla base di tutto il discorso…

Paragrafi e titoli

Il testo di una pagina si organizza in paragrafi (<p>) e titoli su 6 livelli di importanza (<h1> il più importante, <h6> il meno importante):

testo.html

<h1>Il mio blog</h1>
<h2>Ultimo articolo</h2>
<p>Oggi ho scoperto quanto è comodo scrivere pagine web.</p>
<p>Questo è un secondo paragrafo, separato dal primo.</p>

Ogni pagina dovrebbe avere un solo <h1> (di solito il titolo principale), poi <h2> per le sezioni, <h3> per le sottosezioni, e così via — è la stessa logica gerarchica di un indice di un libro.

Formattazione del testo

<p>Questo testo è <strong>molto importante</strong>, questo invece è <em>enfatizzato</em>.</p>
<p>Puoi anche andare a capo<br>senza iniziare un nuovo paragrafo.</p>

<strong> (importante, grassetto) e <em> (enfatizzato, corsivo) comunicano non sono solo una modalità grafica di resa del testo, ma anche una evidenziazione semantica: uno screen reader, ad esempio, li legge con un tono diverso.

Tip

Per il solo effetto grafico, senza significato, esistono <b> (bold, grassetto) e <i> (italic, corsivo), ma ormai sono sempre da preferire le loro versioni semantiche <strong> e <em>.

Liste

Esistono due tipi di lista:

liste.html

<h2>Lista puntata</h2>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<h2>Lista numerata</h2>
<ol>
    <li>Scrivi l'HTML</li>
    <li>Aggiungi lo stile con CSS</li>
    <li>Aggiungi il comportamento con JS</li>
</ol>

<ul> (unordered list) per elenchi senza ordine, <ol> (ordered list) quando l’ordine conta (es. istruzioni passo-passo). In entrambi i casi ogni voce è un <li> (list item).

Le liste si possono anche annidare:

<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </li>
    <li>Backend</li>
</ul>

Link

Un link si crea col tag <a> (anchor) e l’attributo href:

<a href="https://www.adjam.org">Vai al sito del prof!</a>
<a href="pagina2.html">Vai alla pagina 2</a>
<a href="#sezione3">Vai alla sezione 3 di questa pagina</a>

Tre casi diversi:

un URL completo (link esterno, a un altro sito)
un percorso relativo tipo pagina2.html (link interno, a un altro file dello stesso sito)
#sezione3 (link a un ancora dentro la stessa pagina — richiede un elemento con id="sezione3" da qualche parte)

Immagini

<img src="logo.png" alt="Logo della scuola" width="200">

src è il percorso del file immagine (relativo o assoluto, come per i link)
alt è il testo alternativo, mostrato se l’immagine non si carica e letto dagli screen reader — non è opzionale, va sempre messo
width (e height) impostano le dimensioni; è meglio farlo con il CSS (lo vedremo), ma è utile saperlo fare anche qui

Note

<img> è un tag vuoto, come <br>: non si chiude con </img>.

Esercizi

Esercizio w111

Crea una pagina con un <h1> col titolo “I miei linguaggi preferiti” e una lista puntata con almeno 3 linguaggi di programmazione.

Esercizio w112

Trasforma la lista dell’esercizio precedente in una lista numerata, ordinata dal linguaggio che conosci meglio a quello che conosci meno.

Esercizio w113

Crea una pagina con due paragrafi. Nel primo paragrafo inserisci un link esterno (a un sito a tua scelta) e un link interno a un file pagina2.html (non serve che esista davvero). Nel secondo paragrafo inserisci un’immagine con alt descrittivo (anche se il file non esiste).

Esercizio w114

Nel seguente codice manca l’attributo alt su un’immagine e una lista usa <ol> al posto di <ul> per un elenco che non ha un ordine logico. Correggi entrambi i problemi:

da_correggere.html

<h2>I miei hobby</h2>
<ol>
    <li>Lettura</li>
    <li>Fotografia</li>
    <li>Escursionismo</li>
</ol>
<img src="foto_montagna.jpg">

Keyboard shortcuts