Capitolo 5:liste ed altri tag

Altri tag

Come avrete già capito, possiamo scrivere il testo direttamente senza utilizzare alcun tag.
Tuttavia la pagina risulterà più facilmente leggibile quando andremo a modificarla, e state certi che capiterà spesso, e sarà più facilmente raggiungibile con le regole CSS che serviranno a formattare, colorare ed in generale dare uno stile al testo.
I principali tag che contengono il testo che abbiamo già visto sono: div, p, h1, ..,h6
Aggiungiamone un molto semplice, ma di grande utilità, <span>, che vuole il tag di apertura e chiusura; a differenza dei primi, questo tag è uno di quelli che si chiamano 'online', significa che è un tag che si inserisce in mezzo ad altro testo e non va a capo. Può servire tra l'altro per evidenziare una parola o porzione del testo di un paragrafo. Lo vedremo meglio strada facendo.
Altro tag di uso quotidiano è quello che ci permette di andare a capo nell'ambito di un paragrafo: </br>, si dice 'tag vuoto' ovvero non ha il rispettivo tag di chiusura, per questo si scrive con quella slash.
Per separare porzioni di testo o parti di una pagina c'è ancora il tag <hr/> , horizzontal rule, raramente usato!.
Questi tag li rivedremo più avanti per abbellirli con le regole CSS.

Gli elenchi o Liste

Menù di navigazione:
Gli elenchi possono essere:
1. ordinati – <ol> ordered list;
2. non ordinati – <ul> unordered list.

Il numero o il puntino che è davanti ad ogni voce si chiama marcatore di lista.
Per ora lasciamo le liste così, aspettiamo i CSS per dagli l'aspetto da noi desiderato, compreso il marcatore delle singole voci.
Se non applichiamo nessuna regola CSS come stiamo facendo fino a questa lezione, è il browser stesso ad assegnare alle voci dell'elenco un aspetto di default.

Esempio aggiornato

Riprendiamo di sana pianta il codice dell'esempio della lezione precedente ed aggiungiamo nel blocco colonna sinistra o in quello centrale una lista qualsiasi giusto per applicare il codice. Se ve la sentite aggiungete anche in qualche parte il tag <span> per evidenziare una o più parole, e il tag <span> per andare a capo.

Il codice dell'esercizio non lo incollo qui, lo potete prendere nella copia che sicuramente avete sul vostro pc.
Per qualsiasi problema contattatermi. Qui potete vedere la mia pagina di esempio esempio completo Un suggerimento.
Quando per fare un nuovo esercizio copiate il codice dell'esercizio precedente per inserire una aggiunta, salvate sempre il nuovo file con un altro nome a vostra scelta, magari un nome mnemonico per voi.