HTML: Elementi per la gestione del testo 1

Transcript

1 Laboratorio di Tecnologie Web HTML: Elementi per la gestione del testo 1 Dott. Stefano Burigat

2 In questo capitolo, introdurremo diversi elementi HTML che possono essere utilizzati per aggiungere markup al testo presente in una pagina web. E' importante ricordare che questi elementi servono principalmente per strutturare e dare un significato al testo, non per definire come questo deve essere presentato. Scegliere gli elementi semanticamente più corretti per il testo è fondamentale per migliorare la disponibilità e l'accessibilità del contenuto (portabilità su dispositivi diversi, gestione da parte di motori di ricerca, etc.). Indipendentemente dal posizionamento del contenuto sullo schermo, questo dovrebbe sempre essere inserito all'interno dei documenti html in un ordine logico di importanza. In generale, distingueremo gli elementi tra elementi blocco ed elementi inline (come definito in precedenza), sebbene HTML5 utilizzi una categorizzazione più complessa e articolata. Elementi di tipo blocco Come detto in precedenza, gli elementi di tipo blocco iniziano su una nuova riga e vengono tipicamente visualizzati con dello spazio aggiuntivo sopra e sotto, come se fossero dei blocchi impilati uno sopra l'altro. Sono gli elementi principali che vengono utilizzati per dare struttura al contenuto. Paragrafi Per creare un paragrafo di testo, come abbiamo già visto, viene utilizzato l'elemento <p>. Di default, il browser inizia ogni paragrafo su una nuova riga e aggiunge un po' di

3 spazio tra un paragrafo e l'altro. <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> I paragrafi con contenuto vuoto (<p></p>) non vengono considerati dai browser e non permettono pertanto di inserire righe vuote. NOTA: è buona norma inserire tutto il testo di un documento in qualche elemento di tipo blocco. Se c'è del testo anonimo, il documento non viene considerato valido e i browser lo visualizzano secondo le loro regole. I paragrafi di testo, inoltre, non dovrebbero contenere al loro interno altri paragrafi di testo (ogni singolo pezzo verrebbe interpretato come un paragrafo diverso). Titoli I tag <h1>...<h6> servono per definire titoli. <h1> viene

4 tipicamente utilizzato per i link principali, <h2> per i sottotitoli e così via fino ad <h6>. I browser mostrano i diversi titoli con una grandezza diversa, <h1> con la grandezza maggiore e a scalare fino ad <h6>. La dimensione esatta viene decisa dal browser anche se l'utente può variarla (e, soprattutto, si può utilizzare CSS per modificarla). <h1>titolo di livello 1</h1> <h2>titolo di livello 2</h2> <h3>titolo di livello 3</h3> <h4>titolo di livello 4</h4> <h5>titolo di livello 5</h5> <h6>titolo di livello 6</h6> Poichè i titoli vengono utilizzati per dare una struttura logica al testo, è bene che questi tag NON vengano utilizzati in base al loro aspetto. In particolare, non si dovrebbe mai utilizzare uno specifico tag <h> solo perchè viene visualizzato con una dimensione che ci va bene. Citazioni lunghe Quando dovete inserire una lunga citazione, un testimonial o un pezzo tratto da qualche altra sorgente, soprattutto

5 quando questi sono su più righe, si dovrebbe utilizzare l'elemento <blockquote>. <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <blockquote><p>ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></blockquote> <blockquote><p>excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></blockquote> Di default, un elemento <blockquote> viene visualizzato con un'indentazione a destra e a sinistra rispetto al resto del testo (ma, come sempre, non si dovrebbe usare blockquote solo perché si vuole ottenere tale effetto). Un blockquote può contenere uno o più elementi di tipo blocco, come i paragrafi. <blockquote> può avere un attributo cite che fornisce un link alla sorgente da cui è stata tratta la citazione (ciò non porta a nessun cambiamento visibile). <blockquote cite=" sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></blockquote>

6 Testo preformattato In precedenza, abbiamo visto che un browser ignora i ritorni a capo e lo spazio bianco in eccesso all'interno di un documento. Ci sono però alcuni casi in cui lo spazio è importante per dare significato al testo, come nel caso dei frammenti di codice. In tali casi, si può utilizzare l'elemento <pre> che mostra ciò che viene inserito al suo interno esattamente come viene inserito, inclusi ritorni a capo e spazi. Di default, inoltre, il contenuto viene mostrato utilizzando un font a larghezza costante (come il Courier). <pre>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua.</pre> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua.</p>

7 Interruzione tematica Se si vuole inserire un'interruzione tematica tra due sezioni di un documento, ad esempio per separare due argomenti all'interno di una sezione, si può utilizzare l'elemento vuoto <hr>. I browser visualizzano l'elemento come una linea orizzontale (essendo un elemento blocco, inizia su una nuova riga e ha spazio sopra e sotto). Tipicamente la linea occupa l'intera larghezza della pagina ma potrebbe anche essere inserita all'interno di contenitori più piccoli come la cella di una tabella. <p>paragrafo 1.</p> <hr/> <p>paragrafo 2.</p> Contatti L'elemento <address> può essere utilizzato per indicare informazione di contatto relativa all'autore o gestore di un documento. Poco utilizzato, è normalmente posizionato all'inizio o alla fine del documento. Non dovrebbe essere utilizzato per indicare indirizzi postali.

8 <address> Realizzato da Mario Rossi, Università di Udine </address> Liste A volte è necessario inserire informazioni come liste piuttosto che come sequenza di paragrafi. L'HTML supporta tre tipi di liste: Liste non ordinate Liste ordinate Liste di definizioni Ogni elemento di tipo lista (sia la lista stessa che gli elementi al suo interno) è un elemento di tipo blocco che inizia su una nuova riga. La maggior parte delle liste ricade nella categoria delle liste non ordinate. Di default, gli elementi delle liste non ordinate vengono visualizzati con un pallino iniziale. Per identificare una lista non ordinata, si utilizza l'elemento <ul> (unordered list). All'interno di tale elemento vanno inseriti tanti elementi <li> (list item) quanti sono gli elementi della lista.

9 <p>una lista non ordinata di elementi:</p> <ul> <li>elemento 1</li> <li>elemento 2</li> <li>elemento 3</li> <li>elemento 4</li> </ul> All'interno dell'elemento <ul> non dovrebbero esserci elementi diversi da <li> mentre è possibile inserire altri elementi all'interno di un elemento <li> (anche se il risultato tipicamente non è ottimale, provare inserendo un paragrafo). Lo stile di una lista non ordinata può essere modificato via CSS fino ad ottenere risultati estremamente differenti (come utilizzare la lista per definire un menu orizzontale), senza modificare minimamente il markup html. Vedremo più avanti come si può ottenere tale risultato. Le liste ordinate vengono utilizzate laddove sia importante sottolineare l'ordine degli elementi, ad esempio per fornire delle istruzioni. Vengono definite esattamente come le liste non ordinate, utilizzando l'elemento <ol> (ordered list) al posto di <ul>. Gli elementi di una lista ordinata vengono

10 automaticamente numerati dal browser invece di essere evidenziati da un pallino. Risulta così semplice riordinare gli elementi senza doverli rinumerare. <p>una lista ordinata di elementi:</p> <ol> <li>elemento 1</li> <li>elemento 2</li> <li>elemento 3</li> <li>elemento 4</li> </ol> L'elemento <ol> supporta i seguenti attributi: reversed="reversed" (per invertire la numerazione, introdotto in HTML5) start="numero" (per partire da un numero specifico) type="1 a A i I" (per cambiare lo stile della numerazione, anche se è preferibile usare CSS) Le liste di definizioni sono utilizzate per definire liste di termini con la loro definizione. Si utilizza l'elemento <dl> (definition list) per identificare la lista ed al suo interno si inseriscono elementi <dt> (definition term) per indicare un termine e <dd> per indicare la relativa definizione.

11 <p>una lista di definizioni:</p> <dl> <dt>termine 1</dt> <dd>definizione 1</dd> <dt>termine 2</dt> <dd>definizione 2</dd> <dt>termine 3</dt> <dd>definizione 3</dd> </dl> L'elemento <dl> dovrebbe contenere solo elementi <dt> e <dd>. L'elemento <dt> non dovrebbe contenere elementi di tipo blocco. Si possono inserire anche più definizioni per lo stesso termine e viceversa. Qualunque lista può essere innestata all'interno di un'altra lista. E' sufficiente inserire la lista innestata in un elemento della lista esterna.

12 <p>liste innestate:</p> <ol> <li>elemento a</li> <li>elemento b <ul> <li>sottoelemento b1</li> <li>sottoelemento b2</li> </ul> </li> <li>elemento c</li> </ol> Il browser modifica automaticamente lo stile del pallino per le liste non ordinate in modo da distinguere le sottoliste. Per le liste ordinate, lo stile di numerazione non viene modificato ma ogni lista ha la propria numerazione. Elementi inline Come definito in precedenza gli elementi inline vengono inseriti nel flusso del testo e non vengono visualizzati su una nuova riga. Interruzioni di riga Tutti gli elementi che abbiamo visto finora iniziano automaticamente da una nuova riga ma a volte è necessario inserire un'interruzione di riga nel flusso del testo e questo può essere fatto con l'elemento vuoto <br> (di per sé l'elemento causa l'interruzione ma non è l'interruzione, da

13 cui il suo inserimento negli elementi inline). Un uso comune di questo elemento è per separare le diverse part di un indirizzo. <p>dipartimento di Matematica e Informatica<br/> Via delle Scienze, 206<br/> 33100, Udine</p> Non si dovrebbe abusare di interruzioni di riga laddove ci sia un altro elemento perfettamente adatto allo scopo, ad esempio per inserire una lista. Elementi inline semantici Alcuni degli elementi inline sono stati definiti fin dall'inizio per descrivere il significato o il contesto d'uso del testo che racchiudono. L'elemento <em> viene utilizzato per dare enfasi ad un testo mentre l'elemento <strong> serve per indicare testo importante che richiede attenzione extra. Di default, i browser utilizzano rispettivamente il corsivo ed il grassetto per visualizzare il contenuto dei due elementi. Uno screen reader potrebbe utilizzare un tono di voce differente per

14 leggere del testo enfatizzato. <em> e <strong> devono essere utilizzati solo quando ciò ha senso dal punto di vista semantico, non semplicemente per ottenere del testo in corsivo o grassetto. <p>e' importante che questi elementi <em>non</em> vengano utilizzati dove non è necessario.</p> <p>la consegna della documentazione deve essere fatta <strong>entro il 5 Aprile</strong>.</p> L'elemento <q> viene utilizzato per inserire citazioni brevi nel testo. Normalmente, il testo della citazione viene visualizzato dal browser tra virgolette. Come <blockquote>, anche <q> supporta l'attributo cite per definire la sorgente della citazione. <p><q>essere o non essere</q> è una frase tratta dall'amleto di William Shakespeare.</p>

15 L'elemento <abbr> viene utilizzato per segnalare abbreviazioni (riduzione di un parola o frase nella scrittura o nella pronuncia) e acronimi (nome formato con le lettere o le sillabe iniziali o finali di determinate parole di una frase o di una definizione). Usare tale elemento fornisce informazione utile ai motori di ricerca, agli screen reader e ad altre applicazioni, soprattutto quando viene specificata la versione completa tramite l'attributo title. In alcuni browser, se si passa con il mouse sopra un'abbreviazione o acronimo di cui è stato specificato l'attributo title, compare un tooltip con il valore di tale attributo. <p>secondo la tradizione, la fondazione di Roma è avvenuta nel 753 <abbr title="avanti Cristo">a.C.</abbr>.</p> <p>l'<abbr title="association for Computing Machinery">ACM</abbr> è la principale associazione scientifica ed accademica dedicata al calcolo automatico e all'informatica.</p> L'elemento <cite> viene utilizzato per identificare un riferimento ad un altro lavoro (libro, articolo, programma tv, etc.). Il riferimento viene normalmente visualizzato in corsivo.

16 <p><q>essere o non essere</q> è una frase tratta dall'<cite>amleto</cite> di William Shakespeare.</p> L'elemento <dfn> viene utilizzato per identificare la prima istanza di una parola o termine. Può anche essere utile per identificare parole straniere la cui traduzione viene inserita tramite l'attributo title. Il contenuto di questo elemento può essere evidenziato in corsivo dal browser. L'utilità di un elemento di questo tipo è quello di supportare i riferimenti incrociati (che vedremo più avanti). <p><dfn>internet</dfn> è una rete mondiale di reti di computer basata su TCP/IP.</p> Gli elementi <code>, <kbd>, <var> e <samp> vengono tipicamente utilizzati per descrivere parti di documenti

17 tecnici (di solito, di natura informatica). <code> viene usato per identificare del codice, <kbd> per identificare dell'input che deve essere inserito dall'utente, <var> per identificare delle variabili e <samp> per identificare dell'output di un programma. Il contenuto dell'elemento <var> viene normalmente visualizzato in corsivo, il contenuto degli altri tre elementi viene visualizzato in un font monospace come Courier. <p>nel codice seguente:</p> <pre><code> class HelloWorld { public static void main(string[] args) { mystring = "Hello world!"; System.out.print(myString); } } </code></pre> <p>la variabile <var>mystring</var> contiene il messaggio da stampare.</p> <p>dopo aver compilato il programma scrivendo <kbd>javac HelloWorld.java</kbd>, possiamo eseguirlo digitando <kbd>java HelloWorld</kbd> e vedremo in output il messaggio <samp>hello world!<samp>. Gli elementi <ins> e <del> vengono utilizzati per

18 identificare parti di un documento che sono state, rispettivamente, inserite o cancellate (e di cui è importante mantenere traccia). Spesso, si utilizzano anche gli attributi cite (il cui valore è un riferimento ad un documento che spiega la motivazione della modifica) e datetime (il cui valore consiste nella data e ora in cui è stata apportata la modifica, in formato standard). Normalmente il contenuto di <ins> viene visualizzato sottolineato e quello di <del> barrato. <p><del datetime=" t14:09:00+01:00">questo testo è stato cancellato</del><ins>questo testo è stato aggiunto</ins></p> Elementi inline ridefiniti Alcuni elementi inline sono stati originariamente definiti per ottenere un particolare risultato a livello di presentazione del contenuto. Nel linguaggio HTML5, tali elementi sono stati ridefiniti in modo da avere un significato semantico piuttosto che presentazionale. L'elemento <b> serve ad indicare parole e frasi che devono distinguersi dal testo circostante ma che non hanno

19 un'importanza o un'enfasi particolare (parole chiave in un abstract, nomi di prodotti all interno di una recensione, la riga iniziale di un capitolo di un libro, o altri casi simili). I browser visualizzano tali elementi in grassetto. L'elemento <i> indica che il testo è in una voce alternativa rispetto al resto. Viene utilizzato per indicare parole in un'altra lingua, termini tecnici, frasi idiomatiche, pensieri, etc. I browser visualizzano tipicamente tali elementi in corsivo. <p>la zanzara tigre (<i>aedes albopictus</i>) si è diffusa in Europa a partire dagli anni 90.</p> L'elemento <s> rappresenta contenuto che non è più accurato o rilevante. Viene tipicamente visualizzato come testo barrato.

20 <p>prezzo attuale: <s>25euro</s> 20euro.</p> L'elemento <small> identifica aggiunte o note a margine rispetto al testo principale (come le note legali al termine di un documento). Il contenuto viene tipicamente visualizzato con una dimensione inferiore a quella del testo normale. <p>note legali:</p> <p><small>copyright 2014, Università di Udine</small></p> Gli elementi <sub> e <sup> vengono utilizzati per inserire rispettivamente pedici e apici. <p>h₂o</p> <p>e=mc²</p>

21 L'elemento <u> racchiude testo che deve essere sottolineato per motivi semantici come parole chiave o parole sbagliate. Poichè si può confondere con i link, tale elemento dovrebbe essere utilizzato molto raramente. <p>il testo <u>sottolineato</u> si può confondere con i link.</p>