| Tag logici | Indice | Link |
All'interno del tag 'body' è possibile individuare blocchi di testo per i quali si vuole imporre una formattazione particolare per poter evidenziare una parte del testo che si ritiene importante. A tal fine esistono anche i tag di formattazione.
Abbiamo già visto nel capitolo precedente che è già possibile imporre dei vincoli sulla formattazione utilizzando l'attributo 'style' dei tag logici. Sembra quindi che vi sia una ridondanza di meccanismi per svolgere la stessa cosa. Per spiegare questa apparente ridondanza, si deve ricordare che il linguaggio HTML è in continua evoluzione. Inizialmente esistevano solo i tag di tipo logico e quelli di tipo formattazione. Da qualche anno l'orientamento del W3C è di semplificare l'uso dei tag in modo tale da separare completamente la definizione logica del documento dalla definizione di formattazione dello stesso, eliminando i tag di tipo formattazione in favore dei fogli di stile. Questa direzione però richiede tempo per essere realizzata, nel frattempo quindi è possibile ancora utilizzare i tag di formattazione, soprattutto per quelle piccole parti di testo (poche parole) per le quali definire e utilizzare uno stile potrebbe risultare un eccesso di lavoro.
Alcuni tag di formattazione sono stati già dichiarati deprecati. Per questi quindi è raccomandabile utilizzare l'alternativa data dai fogli di stile.
In questo capitolo si presentano i principali tag di formattazione, omettendo volutamente tutti quei tag che sono stati deprecati in favore dei fogli di stile. Per la lista completa dei tag di formattazione, si rimanda il lettore all specifica del linguaggio HTML 4.01 che è disponibile all'indirizzo http://www.w3.org/TR/html4
A completamento dei tag di formattazione, alla fine del capitolo si introducono anche i tag di entità html che permettono di inserire all'interno di un documento HTML quei simboli o caratteri che non possono essere inseriti direttamente da tastiera o perché considerati speciali (vedi <) o perché non disponibili.
| Descrizione | determina un'interruzione di riga. |
| Tipo | tag vuoto. |
| Attributi | align, clear, id, style, title. |
Ogni qual volta un browser incontra un tag 'br' esegue un a capo. Viene utilizzato per formattare i testi o per inserire delle righe vuote in un documento.
| Descrizione | visualizza una linea orizzontale. |
| Tipo | tag vuoto. |
| Attributi | align, class, dir, id, noshade, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, size, style, title e width. |
Visualizza una linea orizzontale (filetto). Ha quattro attributi che servono per modificare il modo in cui la riga è disegnata.
L'attributo 'align' determina la posizione orizzontale (allineamento) della linea all'interno della pagina. L'attributo 'size' determina lo spessore della linea. Per default, la linea occupa tutta la larghezza dello schermo, ha uno spessore di 3 pixel (Netscape) o di 2 pixel (Internet Explorer e Mosaic) ed è posta al centro della pagina.
Il termine pixel (che sta per picture element) identifica uno dei tanti piccolissimi punti che formano le immagini sullo schermo di un monitor. Di solito un pixel ha la dimensione di un punto tipografico rappresentato su uno schermo con risoluzione standard di 75 dpi (dots per inch o punti per pollice). Tipicamente, i caratteri hanno una dimensione di 12 punti, ovvero sono alti 12 pixel. Il pixel è l'unità più piccola che può essere controllata sullo schermo.
L'attributo 'width' determina la lunghezza della linea. Il valore può essere espresso sia in numero di pixel sia come percentuale della larghezza dello schermo.
La misura percentuale è migliore perché così la lunghezza della linea si adatterà automaticamente alla larghezza dello schermo.
Molti browser rappresentano le linee orizzontali con un effetto tridimensionale. Questo effetto è più evidente nelle linee di un certo spessore (5 o 6 pixel). L'attributo 'noshade' permette di eliminare questo effetto speciale. 'noshade' non richiede un segno uguale per cambiare il valore di default. La sua presenza elimina automaticamente l'effetto tridimensionale. Gli attributi (come 'noshade') che attivano o disattivano un'impostazione di default si chiamano commutatori (toggle).
Sono i tag di formattazione che indicano parti di testo da formattare secondo un certo stile. Solitamente si utilizzano per individuare poche parole all'interno di un paragrafo o lista. Da notare che se una certa formattazione si ripete al'interno del documento, forse è meglio impostare uno stile come spiegato nel capitolo 7. Questi tag sono da usare il meno possibile. Nella tabella sono riportati i tag più comuni e il loro effetto:
| tag | effetto | note |
|---|---|---|
| <b> grassetto </b> | il testo è viene scritto in grassetto | |
| <i> corsivo </i> | il testo viene scritto in italico | |
| <sup> esponente </sup> | scrive i caratteri mezza riga sopra: x2 | |
| <sub> pedice </b> | scrive i caratteri mezza riga sotto x2 | |
| <code> codice </code> | scrive con un font a spaziatura fissa |
Lo stesso effetto si può ottenere con 'tt' e 'kbd' |
| <big> testo grande </big> | scrive con un font più grande | |
| <small> testo piccolo </small> | scrive con un font più piccolo |
Sono i tag di formattazione che indicano parti di testo da formattare in modo da rispecchiare il contenuto. Solitamente si utilizzano per individuare poche parole all'interno di un paragrafo o lista. Nella tabella sono riportati i tag più comuni e il loro effetto:
| tag | Esempio | note |
|---|---|---|
| <abbr> x le abbreviazioni </abbr> | WWW, URL, W3C | Un tag simile è 'acronym' |
| <address> indirizzo </address> | Strada le Grazie, 15 - 37134 Verona | Questo tag è molto usato per indicare l'autore e il suo recapito in fondo al un documento html. Aggiunge sempre un 'br' alla fine |
| <blockquote> citazione lunga </blockquote> |
Eppur si muove! |
|
| <del> testo cancellato </del> |
|
|
| <em> testo enfatizzato </em> | Accorrete! Accorrete! | |
| <strong> testo in evidenza </strong> | Accorrete! Accorrete! | |
| <dfn> definizione </dfn> | Un pixel è... | |
| <var> variabile </var> | pixel=30px |
Come si può notare dagli esempi precedenti, non tutti i caratteri sono disponibili direttamente all'interno di un documento HTML: ad esempio, i caratteri speciali che vengono utilizzati per individuare l'inizio (%lt;), la fine (>) dei tag non possono essere scritti direttamente, altrimenti sarebbero interpretati come inizio o fine di un tag. Esistono poi altri caratteri speciali come ©, &, ® che non sono sempre disponibili direttamente dalla tastiera.
La specifica del linguaggio HTML prevede che per i caratteri riservati al linguaggio (come <) e per tutti quei caratteri non direttamente disponibili da tastiera sia possibile specificare il loro valore (ovvero inserirli all'interno del documento) mediante due modi: o con un nome (entità html) o con un numero che rappresenta la posizione che il simbolo occupa nel set di caratteri standard Latin-1>.
Questo set di caratteri è un elenco di lettere, numeri e simboli di interpunzione utilizzato da tutti i paesi occidentali. Ogni simbolo ha un valore numerico associato e, qualcuno, anche un nome. Per esempio, il simbolo & ha valore numerico 38 e ha nome standard &: può essere quindi inserito all'interno di un documento specificando il tag speciale & o &.
In tabella sono riportati i codici e le codifiche dei caratteri maggiormente utilizzati. Si ricorda che se la tastiera non contiene un carattere accentato (è), è sempre possibile scrivere il carattere utilizzando il suo nome html: è! Per cui non è più ammissibile scrivere documenti html in cui le lettere accentate sono rese utilizzando l'apostrofo!
| nome html | Carattere | note |
|---|---|---|
| & o & | & | e commerciale o ampersand |
| © o © | © | copyright |
| < o < | < | minore |
| > o > | > | maggiore |
| ® o ® | ® | marchio registrato o trade mark |
| " | " | doppie virgolette |
| à | à | accento grave su 'a'. Per tutte le altre vocali è sufficiente sostituire la lettera 'a' prima di 'grave'. |
| À | À | accento grave su A (anche le maiuscole hanno l'accento!) |
| é | é | accento acuto su 'e'. Per tutte le altre vocali è sufficiente sostituire la lettera 'e' prima di 'acute' |
| Tag logici | Indice | Link |