Requisiti
Prima di procedere potrebbe essere utile la lettura di:
Introduzione, HTML, XHTML, differenze
XHTML e HTML sono linguaggi di markup utilizzati per descrivere il contenuto di un documento web, attraverso l'uso di elementi che ne marcano il contenuto dandone un significato. In altri termini gli elementi sono usati per dire: "questo è un titolo", "questo è un paragrafo", "questa è una citazione" etc.
XHTML e HTML pur avendo una sintassi molto simile hanno origini differenti: HTML deriva da SGML, XHTML da XML. In poche parole possiamo dire che XHTML è un documento HTML ben formato secondo le regole dei documenti XML. E' possibile trovare una descrizione più dettagliata delle differenze nella nota HTML/XHTML - differenze.
Struttura di un documento
Un documento HTML/XHTML ha sempre la struttura riportata di seguito:
<!DOCTYPE ... >
<html>
<head>
<title>Titolo del documento</title>
<!-- elementi intestazione -->
</head>
<body>
<!-- elementi a livello di blocco -->
</body>
</html>Di seguito analizzeremo le varie parti che lo costituiscono.
DOCTYPE - Document Type Definition
La prima riga <!DOCTYPE ... > è la dichiarazione del tipo di documento (DTD - Document Type Definition) ed indica su quale standard HTML o XHTML si basa il documento. Al posto di ... andrà l'indicazione della versione per la quale si intende scrivere il documento.
| Standard | DOCTYPE |
|---|---|
| HTML 4.01 Strict |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
|
| XHTML 1.0 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
| HTML 5 (ancora non standard) | <!DOCTYPE HTML> |
Per entrambi i linguaggi abbiamo 3 tipologie di "standard": strict, transitional e frameset. Noi consideremo solo la prima (strict) perchè orientata alla descrizione del documento. Le altre includono anche la presentazione e sono presenti solo per compatibilità verso vecchi standard.
Elementi
Le porzioni di testo che iniziano e finiscono con parentesi angolari (< e >) sono dette tag di apertura e tag di chiusura. I primi iniziano con < i secondi con </ e per entrambi segue sempre un nome.
I tag di apertura e di chiusura che hanno lo stesso nome individuano un elemento e il suo contenuto (testo o altri elementi).
Dalla struttura riportata sopra si possono individuare gli elementi html, head, title, body che, come già detto, sono sempre presenti e obbligatori in qualsiasi documento HTML/XHTML.
L'elemento html ha come tag di apertura <html> e come tag di chiusura </html>, lo stesso è per gli altri elementi. Tra il tag di apertura e di chiusura c'è il contenuto dell'elemento html: gli elementi head e body.
L'elemento head, a sua volta, contiene l'elemento obbligatorio title il quale contiene testo.
Come vedremo in seguito, alcuni elementi non hanno contenuto. In tal caso possiamo omettere il tag di chiusura terminando il tag di apertura con un />:
<tag ... />Attributi
Utilizzati per indicare informazioni aggiuntive per l'elemento. In alcuni casi sono obbligatori.
Sono inclusi solo nel tag di apertura ed hanno la forma:
nome_attributo="valore_attributo"
Ad esempio:
<a href="http://www.example.com/esempio.html">esempio</a>
In questo caso l'elemento a indica che il suo contenuto è un link ipertestuale che rimanda alla pagina indicata dal valore dell'attributo href.
Attributi comuni
A praticamente tutti gli elementi possiamo indicare questi attributi comuni:
- id: il valore di questo attributo deve essere univoco ed identifica l'elemento nel documento. Possiamo così individuare da strato presentazione o strato comportamento questo elemento per associargli un aspetto grafico o una funzione particolare.
- class: il valore di questo attributo è un elenco di classi separate da uno spazio cui l'elemento appartiene. Ad una stessa classe possono appartenere più elementi. La classe serve per applicare una presentazione o un particolare comportamento ad un insieme di elementi.
- lang: il valore specifica la lingua sia degli altri attributi dell'elemento che del suo contenuto
Commenti
Nel documento È possibile inserire commenti che agevolano la lettura del codice HTML/XHTML. Iniziano con <!-- e finiscono con --> . Ad esempio:
<!-- questo e' un commento -->
Caratteri speciali
Alcuni caratteri sono riservati perchè usati per il linguaggio (HTML o XHTML), pertanto ne è vietato l'uso sia nel contenuto dell'elemento che nei valori degli attributi. Per utilizzare questi caratteri c'è ovviamente un metodo alternativo.
I caratteri e i modi alternativi per utilizzarli sono:
- < e > : usati nei tag, devono essere scritti come < e >
- " : usate per racchiudere i valori degli attributi. Devono essere scritti con "
- & : usati per i caratteri speciali. Vanno scritti come &
Significato semantico degli elementi
Gli elementi attribuiscono un significato al loro contenuto.
Ad esempio:
<p>ciao mondo!</p>
In questo caso abbiamo l'elemento p che ha un tag di apertura <p> e un tag di chiusura </p>. L'elemento racchiude una stringa indicando che quella stringa è un paragrafo.
<h1>Titolo</h1>
In questo caso abbiamo l'elemento h1 che ha un tag di apertura <h1> e un tag di chiusura </h1>. L'elemento racchiude una stringa indicando che quella stringa è il titolo principale.
<img ... />
In questo caso l'elemento img è chiuso senza tag di chiusura. Indica che quell'elemento è un'immagine. Al posto dei ... vanno gli attributi, descritti di seguito, che definiscono le proprietà dell'immagine.
Per approfondire
Si può ora proseguire la lettura con:
0 commenti:
Posta un commento