I documenti HTML sono composti da elementi identificati tramite i cosiddetti tag. I tag si riconoscono dalla presenza di parentesi angolari. La maggior parte degli elementi HTML è contraddistinta da un tag di apertura e da un tag di chiusura. Ciò che si trova tra di essi è chiamato ambito di validità.
Un esempio:
<h1>PSD-Tutorials.de – il tuo portale grafico, web e didattico</h1>
Attraverso questa sintassi viene scritto un'intestazione di primo livello nel documento. Il tag di apertura <h1> comunica al browser che si tratta di un'intestazione di quel tipo. Il tag di chiusura </h1> conclude l'intestazione. I tag di chiusura si riconoscono da una parentesi angolare di apertura seguita da una barra </.
Sorge una domanda riguardo alla scrittura dei nomi degli elementi: cosa succede con le maiuscole e le minuscole? Come già descritto, il focus di questa serie è su HTML5. Qui è possibile decidere tra maiuscole e minuscole. Personalmente, preferisco utilizzare sempre minuscole e lo farò anche in questa serie. In linea di principio, con HTML5 sarebbero corrette le seguenti cose:
<h1>PSD-Tutorials.de – il tuo portale grafico, web e didattico</h1> <H1>PSD-Tutorials.de – il tuo portale grafico, web e didattico</H1> <h1>PSD-Tutorials.de – il tuo portale grafico, web e didattico</H1>
Gli elementi che vengono aperti devono anche essere chiusi. Se scrivete un <h1>, dovrete chiuderlo alla fine della definizione dell'intestazione con </h1>. Anche se in HTML5 ci sono eccezioni come ad esempio voci di lista e paragrafi, di questo parleremo più avanti.
Nell'HTML ci sono anche i cosiddetti tag autonomi. Questi sono costituiti solo da un tag, non da un tag di apertura e chiusura. Un esempio tipico di questo è <br />.
Questa è una riga.<br /> Questa è un'altra riga.
Questo <br /> definisce un'interruzione di riga.
I tag vuoti di solito si chiudono con una barra, anche se in HTML5 non è strettamente necessario. In questo caso sarebbe possibile anche quanto segue:
<br>
Nel corso di questa serie, imparerete ad conoscere ulteriori di questi tag autonomi.
Elementi nidificati
Gli elementi HTML possono anche essere nidificati. Immaginate di voler rendere corsivo un passaggio all'interno di un'intestazione. Per la formattazione in corsivo si utilizza l'elemento i.
<h1>PSD-Tutorials.de – <i>il tuo portale grafico, web e didattico</i></h1>
Aprite sempre e chiudete nell'ordine corretto quando fate il nesting degli elementi. Si chiude per ultimo l'elemento che è stato aperto per primo. In questo caso, quindi, l'elemento h1.
Utilizzo degli attributi
All'interno dei tag di apertura o dei tag autonomi è possibile definire i cosiddetti attributi. Questi attributi possono assegnare proprietà aggiuntive agli elementi. In passato, nei tempi precedenti di HTML, si assegnavano relativamente molti attributi agli elementi. Questo era dovuto principalmente alla confusione tra struttura e design. Ad esempio, le definizioni di colore venivano passate direttamente all'elemento HTML tramite un attributo corrispondente. Attualmente, grazie anche a CSS, è possibile una rigorosa separazione tra design e struttura, che va rispettata. Dunque, vengono usati solo pochi attributi.
<h1 id="head">PSD-Tutorials.de – il tuo portale grafico, web e didattico</h1>
Per assegnare un attributo, inserite uno spazio dopo l'elemento h1. Segue il nome dell'attributo, di solito in minuscolo. Dopo il nome dell'attributo c'è il segno uguale. Tra virgolette viene indicato il valore dell'attributo.
È possibile assegnare più attributi a un elemento. Ad esempio, è comune definire un'ID e una classe per un elemento. Un esempio: con id si identifica univocamente l'intestazione. La classe, invece, serve per classificare l'intestazione in una determinata categoria. È possibile quindi decidere che tutti gli elementi a cui è stata assegnata la classe blu vengano visualizzati in colore blu. (Naturalmente parleremo in seguito in dettaglio della questione dell'SSC e dei colori).
<h1 id="head" class="blue">PSD-Tutorials.de – il tuo portale per grafica, web e apprendimento</h1>
Gli attributi vengono separati da uno spazio in questo caso.
Validare il codice
Avete già imparato alcune regole di base di sintassi. Specialmente all'inizio, quando si impara HTML, è importante rispettare queste regole. Infatti, una volta acquisito un cattivo abitudine, è difficile liberarsene. Dovreste quindi sempre controllare o far validare il vostro codice HTML per correttezza. Naturalmente, non dovete farlo voi stessi. Ci sono appositi strumenti online per questo. Ad esempio, potete trovare un validatore su http://validator.w3.org/.
Meglio passare direttamente alla scheda Validate by direct Input. Qui potete incollare direttamente il codice HTML da controllare tramite copia e incolla. Fate attenzione a inserire l'intero codice del file, compresa la dichiarazione DOCTYPE.
Per testare il validatore, inserite il seguente testo nel campo di testo e fate clic sul pulsante Validate.
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de – il tuo portale per grafica, web e apprendimento</h1> </body> </html>
Il risultato dovrebbe apparire come segue:
Tutto a posto qui. (In questo caso, non preoccupatevi dei due avvisi). Se appare il messaggio This document was successfully checked as HTML5!, è tutto a posto. Ma come appare il tutto in caso di errore? Provate ad introdurre intenzionalmente un errore di sintassi.
<h1 id=head">PSD-Tutorials.de – il tuo portale per grafica, web e apprendimento</h1>
In questo caso è stato dimenticato il carattere virgolette all'inizio di head. Se ora fate validare di nuovo la sintassi, l'errore sarà rilevato.
Il validatore emetterà quindi un messaggio appropriato. Si può leggere esattamente cosa è andato storto nell'area della finestra inferiore.
In questo modo è descritto molto bene qual è l'errore in realtà.
Line 8, Column 12: " in an unquoted attribute value. Probable causes: Attributes running together or a URL query string in an unquoted attribute value.
<h1 id=head" >PSD-Tutorials.de</h1>
Vedrete direttamente in quale riga è avvenuto un input errato e potrete correggerlo. Pertanto, il validatore vi aiuta a creare codice HTML pulito. Dovreste sempre far validare il vostro codice. Infatti, i browser spesso visualizzano correttamente il codice HTML, anche se la sintassi è errata. In altri browser, però, dove non testate le vostre pagine, le cose potrebbero essere molto diverse.
