Tutorial per formattazione HTML

Formattazione HTML: liste puntate e collegamenti ipertestuali

La qualità dei testi aumenta sempre di più e con essa anche le richieste dei nostri clienti. In passato abbiamo già raccolto in un tutorial alcuni consigli pratici  sulla formattazione basilare dei testi in HTML, presentando i tag più comuni, dal grassetto al corsivo, all’inserimento di un paragrafo e titoli e sottotitoli.

Oggi invece scopriremo come formattare le liste puntate e l’inserimento di link nel testo.

Liste puntate

Ci sono diverse tipologie di liste puntate, quelle numerate, quelle alfabetiche e i semplici elenchi puntati. In base alla nostra esperienza i nostri clienti richiedono esclusivamente due tipologie di liste, che saranno quelle che andremo a presentare: liste non ordinate e liste ordinate.

Elenco non ordinato

Si tratta dell’elenco dove viene visualizzato il “pallino pieno”. È contraddistinto dal tag <ul> (che sta appunto per “unordered list”) e gli elementi dell’elenco vengono inseriti con il tag <li>

<ul>
  <li>primo punto
  <li>secondo punto
  <li>terzo punto
</ul>

Il risultato sarà:

  • primo punto
  • secondo punto
  • terzo punto

Elenco ordinato

Si tratta dell’elenco costituito da una serie progressiva di numeri o lettere. In questa occasione vi presentiamo la formattazione per la lista numerata che è contraddistinta dal tag <ol> (che sta per “ordered list”) e gli elementi della lista vengono inseriti con il tag <li>
<ol>
 <li>primo punto</li>
 <li>secondo punto</li>
 <li>terzo punto</li>
</ol>

Il risultato sarà:

  1. primo punto
  2. secondo punto
  3. terzo punto

Collegamenti ipertestuali

Grazie all’ipertestualità, gli utenti del web possono navigare da una pagina all’altra e raggiungere anche siti esterni alla pagina semplicemente con un click su quello che definiamo comunemente come link o collegamento ipertestuale. Come fare per inserirne uno in una determinata parola o insieme di parole? La formattazione HTML basilare per l’inserimento di un link è la seguente:

<a href="SITO DELLA PAGINA">PAROLA DA COLLEGARE AL LINK</a>

Esempio:

In precedenza abbiamo già pubblicato un tutorial sulla formattazione HTML.

Ecco come viene formattata la frase precedente:

In precedenza abbiamo già pubblicato un <a href=”https://www.textbroker.it/html-consigli-pratici”>tutorial</a> sulla formattazione HTML.

Con un po’ di pratica, sarà un gioco da ragazzi!

Ecco, infine, un link su cui esercitarsi.

Immagine: © alex-mit_istockphoto

Media: 5 (2 votes)
0 commenti

Oggi scopriremo come formattare le liste puntate e l’inserimento di link nel testo.