In questa lezione imparerai quali TAG HTML utilizzare per creare Liste e per definire i Links
Liste
La ordered list (lista ordinata) si usa quando gli elementi al suo interno devono avere una disposizione precisa, come per esempio i passaggi necessari a creare una ricetta:
<h2>Ricetta :</h2>
<ol>
<li>Passaggio 1</li>
<li>Passaggio 2</li>
<li>Passaggio 3</li>
</ol>
nel caso in cui l’ordine degli items non sia importante e/o funzionale allora usiamo la unordered List (lista non ordinata)
<h2>Lista spesa :</h2>
<ul>
<li>Prodotto 1</li>
<li>Prodotto 2</li>
<li>Prodotto 3</li>
</ul>
nel caso nella la nostra pagina web vogliamo mostrare un elenco di definizioni useremo la definition list
<h2>Lettera A :</h2>
<dl>
<dt>abaco</dt>
<dd>Tavoletta per calcoli in uso nell'antichità e nel Medioevo</dd>
<dt>abate</dt>
<dd>Superiore di un monastero, di un'abbazia o di un ordine monastico</dd>
</dl>
Links
Per collegare una pagina web interna al nostro sito basta specificare come valore dell’attributo href il percorso relativo del documento:
<a href="lists.html">Liste</a>
Quando si usano URL relativi per linkare una pagina che è in una Parent Folder (cartella sopra di un livello) devi anteporre due puntini, quindi :
<a href="../index.html">Home</a>
analogamente per una Grandparent Folder (cartella sopra di due livelli) ;
<a href="../../index.html">Home</a>
mentre per collegare dei siti esterni specificheremo l’indirizzo web del sito:
<a href="https://www.google.it/">Google</a>
in questi casi, ti consiglio, di aprire il sito esterno all’interno di un’altra tab del browser
<a href="https://www.apple.com" target="_blank"> Apple </a>
Vista la diffusione delle SPA (Single Page Application) ovvero dei siti che offrono tutte le funzionalità tramite una sola pagine è importante utilizzare i link interni per muoversi verticalmente attraverso la pagina stessa.
l’oggetto del DOM da linkare deve utilizzare l’attributo id e come valore un nome:
<h1 id="top">La nostra pagina</h1>
e nel tag a richiameremo il nome utilizzato come id e lo faremo precedere dal simbolo # :
<a href=”#top”>Torna all’inizio della pagina</a>
Per creare un link che permettono di scrivere direttamente una email (richiamando il client di default per la posta) useremo la parola chiave mailto
<a href="mailto:text@example.com">Contattaci</a>
se vogliamo aggiungere altre informazioni quali il campo Soggetto e corpo della mail:
<a href="mailto:text@example.com?subject=Richiesta preventivo&body=Test della email">Scrivimi una mail per richiedere un preventivo</a>
dopo l’indirizzo email si deve usare il simbolo ? e tra una copia chiave/valore e l’altra si utilizza il simbolo & , ecco il risultato
