|
Nella grafica cartacea con "stile di un testo" si intende la variante del "tondo", del "corsivo", o del "grassetto" di un carattere tipografico. Nel parlare di stili del testo in HTML solitamente si suddividono i tag in grado di attribuire lo stile al testo in stili fisici e stili logici: - vengono definiti come fisici quei tag che definiscono graficamente lo stile del carattere, indipendentemente dalla funzione del contenuto del tag
- vengono definiti come logici quei tag che forniscono anche informazioni sul ruolo svolto dal contenuto del tag, e in base a questo adottano uno stile grafico
Gli stili fisiciI principali stili fisici sono: Codice HTML | Visualizzazione | Descrizione | <b>testo in grassetto</b> Esempio: Questo <b>testo</b> è in grassetto | Questo testo è in grassetto | Formatta il testo in grassetto. | <i>testo in corsivo</i> Esempio: Questo <i>testo</i> è in corsivo | Questo testo è in corsivo | Formatta il testo in corsivo. Tuttavia bisogna evitare di evidenziare in corsivo dei blocchi di lunghezza considerevole, perché la leggibilità del corsivo nel web lascia a desiderare. Meglio limitarsi a poche parole. | <pre>testo preformattato</pre> Esempio: <pre> PHP_FUNCTION
{
zval **parameters;
zval *value;
char* str;
</pre> | PHP_FUNCTION { zval **parameters; zval *value; char* str; | Il motore di rendering del browser restituisce il testo così come è stato inserito nel file html dall’autore stesso (preformattato quindi), senza riformattarlo. È un tag che si usa soprattutto nella rappresentazione di codice di programmazione. | <u>testo sottolineato</u> Questo testo è sottolineato Esempio: Questo <u>testo</u> è sottolineato | Questo testo è sottolineato | Sottolinea il testo presente nel tag. Nel web le sottolineature del testo sono da evitare, per non confondere il lettore con i link. | <strike>testo barrato</strike> Esempio: Questo <strike>testo</strike> è barrato | Questo testo è barrato | Con il testo barrato, vengono indicate (ad esempio) le correzioni. | <sup>testo in apice</sup> Esempio: E=mc<sup>2</sup> | E=mc2 | "Superscript": indica al browser di portare il testo al di sopra della linea di scrittura. Utile per formule matematiche (ad esempio le potenze) | <sub>testo in pedice</sub> Esempio: H<sub>2</sub>O | H2O | "Subscript": indica al browser di portare il testo al di sotto della linea di scrittura (utile ad esempio per i simboli chimici) |
|
Di fatto i tag <b> e <i> sono molto utilizzati, perché consentono di cambiare lo stile del testo al volo. Gli stili logiciCome abbiamo visto gli stili logici forniscono anche informazioni sul contenuto e la loro formattazione è spesso lasciata al browser con risultati a volte deludenti. Proprio per questo gli stili logici sono entrati in disuso e sono poco usati. Riportiamo di eseguito i principali stili logici, per completezza, ma non sarà necessario ricordarseli. Codice HTML | Visualizzazione | Descrizione | <abbr>abbreviazione</<abbr> Esempio: <abbr>C/A</abbr> HTML.it | C/A HTML.it | Indica un abbreviazione. Nessun rendering del testo particolare. | <acronym>acronimo</acronym> Esempio: <acronym>HTML</acronym> | HTML | Indica un acronimo. Nessun rendering del testo particolare. | <address>indirizzo</address> Esempio: <address>HTML.it - via dei Castani 183/185 – 00172 Roma</address> | HTML.it - via dei Castani 183/185 - 00172 Roma | Serve per indicare gli indirizzi: siano essi e-mail, o indirizzi fisici. Il testo viene visualizzato in corsivo. | <blockquote>blocco di citazione</blockquote> Esempio: <blockquote> Nel mezzo del cammin di
nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita </blockquote> | Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita | Sono blocchi di citazione. Il testo viene rientrato verso destra. | <cite>citazione</cite> Esempio: <cite>Nel mezzo del cammin di
nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita</cite> | Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita | Per citazioni brevi: il testo è visualizzato in corsivo. | <code>codice</code> Esempio: <code>if (document.all) alert ("ciao");</code> | if (document.all) alert ("ciao"); | Indica un blocco di codice in linguaggio di programmazione. Nessun rendering del testo particolare. | <dfn>definizione</dfn> Esempio: <dfn>L’HTML è un linguaggio di contrassegno</dfn> | L'HTML è un linguaggio di contrassegno | Indica una definizione: il testo è visualizzato in corsivo. | <em>enfasi</em> Esempio: Ti ho detto <em>questo!</em> | Ti ho detto questo! | Serve per porre l’enfasi su un’espressione: il testo è visualizzato in corsivo. | <kbd>keyboard</kbd> Esempio: <kbd>digitazione da tastiera</kbd> | digitazione da tastiera | Indica una digitazione da tastiera: il testo viene visualizzato a spaziatura fissa. | <q>citazione all’interno della frase</q> Esempio: Come diceva Don Abbondio: <q>"Il coraggio, uno non se lo può dare"</q>. | Come diceva Don Abbondio: "Il coraggio, uno non se lo può dare" | Indica una citazione breve all’interno del testo. Nessun rendering del testo particolare. | <samp>esempio</samp> Esempio: <samp>ecco un esempio di "samp"</samp>. | ecco un esempio di "samp" | Indica un esempio. Il testo viene visualizzato a spaziatura fissa. | <strong>rafforzamento</strong> Esempio: Ecco un <strong>testo rafforzato</strong> | Ecco un testo rafforzato | Evidenzia una parola. Il testo viene reso in grassetto | <var>variabile</var> Esempio: Inseriamo i dati nella variabile temporanea <var>temp</var> … | Inseriamo i dati nella variabile temporanea temp ... | La variabile viene visualizzata in corsivo. |
|
Approfondimenti Come si può vedere molti tag (logici e fisici) tradiscono l’origine scientifica e informatica del Web (sono presenti tag per blocchi di codice di programmazione, per definizioni, per l’indicazione delle variabili…). Sorprendentemente nessuno dei tag fisici o logici è stato dichiarato "deprecato" dal W3C, ma anzi tutti questi tag sono passati dall’HTML 3.2 originario fino all’XHTML (passando illesi attraverso l’HTML 4). Per quel che riguarda i tag fisici: a rigor di logica lo stile "grassetto" dovrebbe essere ottenuto con i fogli di stile (così come tutte le formattazioni), ma evidentemente la possibilità di ottenere un testo in grassetto semplicemente scrivendo "<b>testo</b>" è troppo comoda per poter essere considerata obsoleta. Per quel che riguarda i tag logici: in realtà questo tipo di tag offrono un ulteriore aiuto al webmaster anche in un approccio a fogli di stile. Se infatti si ha l’accortezza di ridefinire i tag all’interno della definizione degli stili, si hanno molte occasioni di utilizzare una formattazione mirate a seconda della funzione del contenuto: in quest’ottica, il fatto che alcuni tag logici non restituiscano nessun rendering particolare è addirittura un invito a ri-definire lo stile del tag.
 |
RSS feed Comments
