Html: separatori ed elenchi
- Maggio 12, 2011
- by
- Donatantonio
Il tag HR.
Per creare delle linee di separazione con un semplice tag HTML, senza dover ricorrere alla creazione di un’immagine è possibile utilizzare l’<hr>.
Per creare la linea basta inserire nel codice sorgente il solo tag <hr/> ed avremo la creazione di una linea con colorazione grigia, di uno spessore standard e larga quanto il “contenitore” nella quale è instanziata.
E’ possibile personalizzare l’aspetto grafico del tag <hr> con la definizione di alcuni attributi tra i quali ad esempio width, size, color e align.
Ad esempio scrivendo:
<hr width=”150px” size=”1″ color=”red” align=”center“ />
definiamo un separatore di colore rosso allineato al centro e di lunghezza 150px.
Di seguito ecco come verrà visualizzato nel browser l’<hr> appena definito.
Il tag <hr> risulta quindi molto utile nel momento in cui è necessario suddividere parti della pagina in maniera veloce ed efficiente.
Gli elenchi puntati e numerati.
Se abbiamo la necessità di inserire un elenco di termini, possiamo utilizzare le “liste”, che sono sostanzialmente di tre tipi:
-
elenchi ordinati;
-
elenchi non ordinati.
Tutti e due i tipi di elenchi funzionano nel medesimo modo: si apre il tag, si elencano i vari elementi della lista (ciascuno con il proprio tag), si chiude il tag dell’elenco. La sintassi ha quindi questa forma:
<elenco>
<elemento>nome del primo elemento</elemento>
<elemento>nome del secondo elemento</elemento>
</elenco>
Gli elenchi ordinati sono contraddistinti dall’enumerazione degli elementi che compongono la lista.
Il tag da utilizzare per aprire un elenco ordinato è <ol> (ordered list) e gli elementi sono individuati dal tag <li> (list item):
Elenco numerato: <ol> <li>Primo Elemento</li> <li>Secondo Elemento</li> <li>Terzo Elemento</li> </ol>
Il cui risultato è il seguente:
Gli elementi dell’elenco sono sempre rientrati di uno spazio verso destra: tutto questo serve a individuare in modo inequivocabile l’elenco. Lo stile di enumerazione visualizzata di default dal browser è quella numerica, ma è possibile indicare uno stile differente specificandolo per mezzo dell’attributo type.
-
type=“a” Elenco con alfabeto minuscolo
-
type=“A” Elenco con alfabeto maiuscolo
-
type=“i” Elenco con numeri romani in minuscolo
-
type=“I” Elenco con numeri romani in maiuscolo
Gli elenchi non ordinati (o puntati) sono individuati dal tag <ul> (unordered list), e gli elementi dell’elenco sono contraddistinti anch’essi dal tag <li>.
Elenco puntato: <ul> <li>Primo Elemento</li> <li>Secondo Elemento</li> <li>Terzo Elemento</li> </ul>
Il cui risultato è il seguente:
Anche per gli elementi puntati è possibile personalizzare il tipo di segno grafico utilizzato per individuare gli elementi.
-
type=“disc” Visualizza un pallino nero (default)
-
type=“circle” Visualizza un cerchio vuoto
-
type=“square” Visualizza un quadrato pieno