HTML/Versione stampabile

Alcune premesse si rendono necessarie per poter consultare e capire nel modo migliore questo wikibook. Molti degli elementi cui si farà cenno potranno essere compresi solamente leggendo i prossimi due paragrafi.

Prima di incominciare, è bene prendere famigliarità con alcuni termini, che verranno usati spesso nel corso del libro:

il browser (o web browser o anche interprete) è il programma che si occupa di visualizzare il contenuto delle pagine web (come Google Chrome, Mozilla Firefox, Internet Explorer, Opera o Safari).
il W3C (World Wide Web Consortium) o W3 è un'organizzazione, nata con l'avvento del Web, che si occupa tra le altre cose di uniformare gli standard web.

Tag, attributi e valori

La struttura di un documento HTML si basa su tre importanti concetti: il tag, l'attributo, e il valore.

Il tag è l'unità fondamentale, potremmo definirla l'istruzione che fa capire al browser come interpretare il codice e visualizzarlo sul monitor. Attraverso i tag possiamo definire molti elementi di un documento: paragrafi, colore del testo, collegamenti ipertestuali e quant'altro. Ogni tag è caratterizzato da tre componenti:

<, il segno di minore
il suo nome
>, il segno di maggiore

I tag normalmente prevedono anche una chiusura, che serve per delimitare dove finisce il codice interessato da quel particolare tag:

<, il segno di minore
/, una slash
il suo nome
>, il segno di maggiore

La slash (/) comunica al browser che si tratta, per l'appunto, di un tag di chiusura.

All'interno dei tag vi è quindi il contenuto, ossia quello che verrà formattato secondo le regole del tag in cui è compreso. Per fare il punto della situazione, la sintassi comune alla maggior parte dei tag è la seguente: <nome tag>contenuto che verrà formattato</nome tag>

Ad esempio il tag <h1> serve per determinare i titoli e quindi rendere il testo al suo interno più grande rispetto al resto della pagina. Ecco ad esempio un codice che visualizzerà sul nostro browser un titolo (non vi preoccupate del resto del codice, verrà analizzato in seguito).

<html>
  <head>
  </head>
  <body>
    <h1>Wikibooks</h1>
  </body>
</html>

In realtà non tutti i tag necessitano di essere chiusi e altri sono addirittura proprio privi del relativo tag di chiusura e verranno affrontati nel corso del libro.

Tutti i tag supportano degli attributi, cioè dei parametri opzionali che servono a definire alcune proprietà specifiche. Ogni attributo è costituito da un nome che indica di che attributo si tratta e di un valore che determinerà. Un attributo permette ad esempio di visualizzare il testo allineato a destra o a sinistra, o del colore rosso piuttosto che nero.
Gli attributi relativi ad un tag devono essere inseriti nel tag di apertura, in questo modo: <nometag attributo="valore" altro_attributo="valore"> contenuto </nometag>

Ora che abbiamo capito com'è strutturato un tag possiamo passare ad analizzare la struttura di una pagina.

Struttura generale di una pagina HTML

Tutte le pagine web hanno la seguente struttura a livello di codice HTML:

<html>

 <head>
   codice
 </head>

 <body>
   codice
 </body>

</html>

Il tag <html> (che si chiude in fondo) indica al browser che il documento è stato formattato in HTML e pertanto il suo contenuto dovrà essere interpretato secondo le specifiche del linguaggio.

Il tag <head> (che si chiude con </head>) serve a delimitare l'intestazione del documento, che conterrà informazioni opzionali come il titolo della pagina, l'autore, la data di creazione, il set di caratteri utilizzato, molto spesso informazioni per i motori di ricerca, ecc... In poche parole, il codice scritto fra i due tag non andrà a influenzare l'aspetto grafico della pagina.

Tra i tag <body> e </body> è presente invece il corpo vero e proprio del documento e della pagina web, ciò che effettivamente poi verrà visualizzato sul browser.

L'HTML è un linguaggio no case-sensitive (cioè non sensibile alle maiuscole), pertanto scrivere i tag tutti in maiuscolo o in minuscolo è indifferente, anche alternandoli non cambia nulla.
I seguenti esempi codificano una pagina identica, sia dal punto di vista sintattico sia da quello dell'interpretazione del browser:

<html> 
 <head></head>
  <body>
  </body>
</html>

<HTML> 
 <HEAD></HEAD>
  <BODY>
  </BODY>
</HTML>

<htMl> 
 <HeAd></hEAD>
  <bODY>
  </BOdy>
</HTml>

Queste tre pagine mostreranno lo stesso risultato sul browser dell'utente.

Convenzioni di questo libro

I tag non saranno scritti in modo particolare ma nel contesto di una frase saranno scritti su sfondo grigio. Quando è necessario per riconoscere le loro parti costituenti si seguiranno le convenzioni qui sotto:

Gli attributi dei tag verranno scritti in grassetto.
I valori saranno scritti in corsivo.

Ogni argomento affrontato verrà accompagnato da un esempio di codice, che si potrà copiare e incollare sul proprio editor di testo preferito. La struttura di una pagina rimane, come abbiamo visto, sempre la seguente:

<html> 
 <head></head>
  <body>
  </body>
</html>

Qualora tutti questi elementi non fossero presenti ma un esempio fosse costituito solo dal seguente codice:

<body>codice</body>

è perché l'intestazione e il resto del documento HTML possono essere ritenuti irrilevanti ai fini dell'esempio. Quindi il codice di cui sopra dovrà essere inserito nella struttura generale della pagina.

Elementi block e in-line

Una distinzione importante da fare tra gli elementi di una pagina HTML è quella tra i cosiddetti block-elements (elementi blocco) e gli in-line elements (elementi in linea) chiamati anche text-elements (elementi testo).

Le diversità tra questi due tipi di elementi potrebbero sembrare non importanti ma è molto utile capire la loro differenza; il concetto di elementi block e in-line è molto importante inoltre nei CSS o, come li abbiamo anche definiti nell'introduzione, Fogli di stile.

generalmente, gli elementi block possono contenere elementi in-line e altri elementi block e, quando vengono inseriti, incominciano una nuova riga o lasciano dei margini sopra e sotto di essi.
generalmente, gli elementi in-line possono contenere solo testo e altri elementi in-line. Gli elementi in-line, come suggerisce la parola stessa, vengono visualizzati sulla riga corrente e non vanno perciò a capo.

Inserire dei commenti

Come ogni buon programmatore sa, è molto importante inserire dei commenti all'interno del codice, così facendo infatti il codice sarà comprensibile anche a distanza di tempo, ma non solo. Se per qualsiasi ragione, il sito dovrà essere sottoposto ad una manutenzione da parte di esterni, il commento faciliterà il compito. I commenti sono molto utili e non verranno letti dal browser, di conseguenza la pagina non verrà influenzata dalla presenza o meno dei commenti. Questi potranno però essere visualizzati da chiunque attraverso il codice sorgente del sito.

Nell' HTML inserire commenti è molto semplice infatti basta usare la seguente sintassi: 

Ecco un esempio:

<html>

 <head>
  <!-- Qui ci va il titolo -->
 </head>

 <body>
  <!-- qui ci va il contenuto della pagina -->
 </body>

</html>

Consigli sulla scrittura

Indentazione

L'indentazione è la tecnica attraverso cui il codice viene rientrato a mano a mano che si entra in sotto-tag. Nel seguente wikibook si cercherà di adottare questa tecnica nel miglior modo possibile e si invita chiunque ad utilizzarla in quanto rende il codice più leggibile che non se si trovasse tutto su una riga, o suddiviso senza criterio. Ecco due esempi:

<html>
<head></head><body><div>testo testo</div><a href="http://it.wikibooks.org/">Wikibooks</a>
<a href="http://it.wikipedia.org/">Wikipedia</a>
</body>
</html>

<html>
  <head></head>
    <body>
     <div>testo testo</div>
     <a href="http://it.wikibooks.org/">Wikibooks</a>
     <a href="http://it.wikipedia.org/">Wikipedia</a>
    </body>
</html>

Il fatto che l'HTML sia un linguaggio non sensibile alle maiuscole è molto utile nel momento in cui bisogna scrivere molto codice e ognuno potrà utilizzare lo stile che preferisce. Tra gli stili più usati ne elenchiamo alcuni:

Tutto maiuscolo: si scrivono tutti i tag indiscriminatamente in maiuscolo e gli attributi e i valori in minuscolo, ciò aumenta la leggibilità del testo se correttamente indentato
Maiuscoli alcuni tag: si scrivono in maiuscolo solamente i tag principali come <html>, <head> e <body>.
Tutto minuscolo: tutti i tag vengono scritti in minuscolo, con il rischio di confondersi con gli attributi, una corretta indentazione tuttavia risolve il problema. Quest'ultimo stile è inoltre consigliato se si vuole mantenere la compatibilità con l'XHTML.

Intestazione

HTML

In questo modulo tratteremo i tag utilizzabili all'interno dei tag <head> </head>, che servono per definire importanti proprietà del documento.

Il titolo della pagina

Per far sì che venga visualizzato un titolo del documento nella barra del titolo del browser è sufficiente inserire all'interno dell'intestazione il tag <title>seguito dal titolo della pagina e successivamente dal tag di chiusura </title>.

Ecco un esempio:

 <html>
   <head>
     '''<title>Inserire qui il titolo della pagina</title>'''
   </head>
   <body>
     codice
   </body>
 </html>

I meta tag

I meta tag sono dei tag speciali che posti nell'intestazione permettono di definire proprietà del documento in modo, ad esempio, da rendere l'indicizzazione da parte dei motori di ricerca più rapida ed efficace. I meta tag non producono alcun tipo di effetto grafico nella visualizzazione della pagina. Essi sono costituiti da due attributi:

nome del meta tag
valore del meta tag

Ecco quindi la loro sintassi generale: <meta name="nome_meta_tag" content="valore_del_meta_tag">.

Ecco una tabella riassuntiva dei meta tag utilizzabili:

Nome	Valore	Funzione
DC.Title	Titolo del documento	Serve a definire il titolo del documento
description	Descrizione del sito	Serve per descrivere il contenuto del sito o della pagina
creation_date	Data --> 13/07/2006	Indica la data di creazione della pagina o quando essa verrà aggiornata
keywords	Ogni parola chiave separata da ; --> Wikibooks; Wiki;	Serve a dichiarare le parole chiave del sito o della pagina
robots	Vedi in fondo alla tabella	Serve a dare indicazione ai motori di ricerca per l'indicizzazione
revisit-after	n° di giorni seguito da days --> 15 days	Serve a dire al motore di ricerca dopo quanti giorni dovrà rivisitare la pagina
generator	L'editor usato per scrivere il codice --> Amaya	Indica il nome dell'editor che si è usato per scrivere il codice della pagina
copyright	Il proprietario del contenuto del sito --> Wikimedia foundation	Indica a chi spetta il copyright del contenuto del sito
author	L'autore della pagina --> Wikibooksiani	Indica l'autore della pagina ed eventualmente il suo indirizzo e-mail
owner	Proprietario del sito --> Wikimedia foundation	Indica il proprietario del sito
language	Una o più lingue --> it, eng	Indica la lingua o le lingue del sito
DC.Language	Una o più lingue --> it, eng	Indica al motore di ricerca di indicizzare le pagine in base alla lingua

Il meta tag robots come si è detto in precedenza serve a dare alcune indicazioni ai programmi dei motori di ricerca (i cosiddetti spider); più nello specifico, serve a comunicare allo spider del motore di ricerca come si deve comportare durante l'indicizzazione di una pagina. I suoi possibili valori sono:

none: non viene indicizzata la pagina e tutto ciò che è al suo interno
index: indicizza solo la pagina che il motore di ricerca sta visitando
noindex: non indicizza la pagina che il motore di ricerca sta visitando
follow: non indicizza la pagina che sta visitando prosegue attraverso i link della pagina
nofollow: indicizza la pagina che sta visitando ma salta i link della pagina
all: è l'insieme tra follow e index, indicizza la pagina che sta visitando e prosegue attraverso i links.

Ci sono altri meta tag un po' particolari detti HTTP-EQUIV meta tag perché il server web nella sua risposta HTTP al browser conterrà questi meta tag nella parte iniziale, il cui nome è HTTP header block. La loro sintassi, in linea generale, è la seguente: <meta http-equiv="nome_meta_tag" content="valore_del_meta_tag">.

Nome Tag	Valore	Funzione
expires	Ora nel formato GMT --> Tue, 13 Jul 2006 10:30:00 GMT	Indica la data di scadenza della validità della pagina.
reply-to	Indirizzo mail --> wiki@wikibooks.it	Definisce un indirizzo e-mail a cui gli utenti possono fare riferimento
Set-Cookie	Vedi in fondo alla tabella	Salva un cookie sul computer del visitatore
refresh	Vedi in fondo alla tabella	Serve per ricaricare la pagina dopo un determinato tempo
content-Type	Vedi in fondo alla tabella	Indica il set di caratteri in uso nella pagina
Pragma	no-cache, costringe il browser a svuotare la cache e ricaricarla	Solo per NetScape. Forza il browser a non leggere il sito della cache
imagetoolbar	yes abilita la visualizzazione della toolbar, no la disabilita	Da IE 6.0 in su, abilita/disabilita la toolbar che appare sulle immagini.
distribution	global se è un contenuto di interesse generale, in caso contrario, usare local	Indica se il contenuto della pagina è di interesse generale o specifico

Il meta tag Set-Cookie serve, come suggerisce il suo nome, a salvare un cookie sul computer di chi sta visitando la pagina. La sua sintassi è la seguente: <meta http-equiv="Set-Cookie" content="cookievalue=nome cookie; expires=data di scadenza; path=percorso nella cache">

cookievalue: attraverso questo parametro impostiamo il nome che prenderà il cookie sul computer dell'utente.
expires: impostando una data in formato GMT si può determinare la data dopo la quale il cookie non avrà più effetto.
path: dove verrà salvato all'interno della cache

Esempio di settaggio di un cookie:

<head>
<meta http-equiv="Set-Cookie" 
content="cookievalue=xxx; 
expires=Tuesday, 13-Jul-06 23:00:00 GMT; 
path=/">
</head>

Il meta tag refresh ricarica il contenuto della pagina dopo un determinato intervallo di tempo, si può aggiungere anche un parametro mediante il quale il ricaricamento porterà ad un'altra pagina (reindirizzamento). La sua sintassi è: <meta http-equiv="REFRESH" content="intervallo di tempo per ricaricare; url=pagina a cui porterà il ricaricamente, opzionale">

Esempio di reindirizzamento:

<meta http-equiv="refresh" content="4; url=http://it.wikibooks.org">

Il meta tag content-Type serve per dichiarare il set di caratteri usati all'interno della pagina. La sua sintassi è la seguente: <meta http-equiv="content-Type" content="tipo di documento; charset=set di caratteri">.
Il tipo di documento nel nostro caso è text/html con l'avvento dell'xml potrebbe esserci qualche nuovo valore.

Esempio di come utilizzare il meta tag content-Type: <meta http-equiv="content-Type" content="text/html; charset=iso-8859-1">

Il DocType

Approfondimento

Non è di fatto sempre obbligatorio specificare il DocType di una pagina; infatti la maggior parte dei browser la visualizzeranno correttamente.
Consigliamo tuttavia caldamente l'uso di questo tag, perché così facendo la pagina sarà in armonia con gli standard minimi di validità

La prima riga di ogni pagina web (quindi ancora prima di qualsiasi tag, nel caso dell'HTML prima del tag <html>), che tenga conto delle specifiche, è il DocType. Questa riga fornisce al browser tutte le informazioni per capire le caratteristiche della pagina che interpreterà. Il DocType, nella sua forma più estesa, ha bisogno di diverse informazioni:

una dichiarazione in cui si determina se il documento è di dominio pubblico o meno;
una nota che veicoli a quali specifiche del W3C si sta facendo riferimento;
la lingua del documento.

La maggior parte delle pagine web, attualmente, utilizza questo DocType:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT"
http://www.w3.org/TR/html4/loose.dtd>

Il linguaggio usato all'interno della pagina è l'html, il documento è di dominio pubblico e rispetta le specifiche del W3C del tipo HTML Transitional definiti nel DTD (Document Type Definition) loose.dtd, la lingua impostata è l'italiano.

È ora di approfondire a quali specifiche del W3C si può fare riferimento:

Frameset: questa DTD è utilizzata dai siti che al loro interno contengono i frames.
Strict: è una DTD che applica rigide regole ed applica quindi i nuovissimi standard del web. Ad esempio i tag deprecati non sono ammessi e gli elementi grafici di una pagina web devono essere definiti tramite i fogli di stile.
Transitional: come è facilmente intuibile dal nome questo è documento che contiene delle specifiche di transizione da uno standard all'altro, è il tipo maggiormente utilizzato ora sul web. Il documento non applica rigide regole ed è quindi possibile utilizzare tag deprecati.

Esempio di DocType per un sito con i frames:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
http://www.w3.org/TR/html4/frameset.dtd>

Esempio di DocType per un sito che applica rigidamente le ultime direttive del W3C:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
http://www.w3.org/TR/html4/strict.dtd>

Possiamo ora passare ad analizzare i tag più semplici per la formattazione del testo.

Formattare il testo

HTML

In questo capitolo vedremo i tag disponibili per formattare il testo, impostandone carattere, colore, dimensioni, ed eventualmente impostare grassetti o corsivi.

Il tag <font>

Il principale tag HTML per la formattazione del testo è il tag <font> che permette di definire diversi aspetti della visualizzazione del testo, quali il carattere da utilizzare, la dimensione e il colore.

Ad eccezione dei tag di stile, l'insieme dei tag che stiamo per esaminare è stata sostituita dall'uso dei fogli di stile che consentono di scrivere una mole di codice decisamente inferiore e hanno molte altre caratteristiche che li fanno preferire all'uso di questi tag.
Se è realmente necessario mantenere una totale compatibilità verso i browser più vecchi (quali Explorer 3, Netscape 4.7 etc.) che praticamente non supportavano i fogli di stile se non in maniera molto approssimata, occorre però continuare ad usare i tag ed i loro attributi. Oramai comunque questi browser non sono più utilizzati, la maggioranza degli utenti utilizza Internet Explorer 6+ oppure Firefox.

Carattere

È possibile scegliere l'aspetto che assumerà il testo (quale font utilizzerà) attraverso l'attributo face del tag <font>, i cui valori sono tutti i nomi di font esistenti.
Per definire face è sufficiente specificare come valore il nome di un carattere (come potrebbe essere Arial, Verdana, Helvetica o Times); è però possibile anche specificare più font, separandoli con una virgola: se il primo font non è installato sul pc dell'utente, verrà usato il secondo, e così via; per questo, alla fine della lista di font è sempre preferibile scegliere anche una famiglia generica di font (ogni font appartiene a una famiglia) in maniera tale da garantire la massima compatibilità con tutta l'utenza:

Famiglia di font	Caratteristiche	Esempi di font
serif	Sono proporzionati e hanno le grazie	Times, Georgia
sans-serif	Sono proporzionati e non hanno le grazie	Helvetica, Geneva, Verdana, Arial
monospace	Non sono proporzionati, con o senza grazie	Courier, Courier New
cursive	Hanno le grazie	Vivaldi, Comic Sans
fantasy	Non sono classificabili	Woodblock

Per avere una lista completa dei font su Wikipedia, vedi la voce lista di font.

Colore

Il colore si può impostare attraverso l'attributo color i cui valori possono essere tutti i colori disponibili sia in forma nominale che in forma esadecimale.

Esempio:

  <body>
    <span style="color:red">Questo testo sarà di colore rosso</span>
    <span style="color:#FF0000">Questo testo sarà di colore rosso</span>
  </body>

Per avere una lista completa dei colori con i rispettivi codici esadecimali con anche i nome su Wikipedia, vedi la voce lista dei colori.

In riguardo ai problemi di compatibilità, ricordiamo che:

i nomi nominali di colori sono preferibili, almeno fintanto che si usano i 16 colori definiti dal W3C (qui l'elenco completo)
usando la notazione esadecimale usando 6 cifre (ad esempio "#ABCDEF") si rischia di definire colori non visualizzabili da utenti che usano una profondità di colori non elevata. Per essere definire un colore più accessibile, si può usare la notazione a 3 cifre: "#F4C" equivale a #FF44CC.

Dimensioni

Le dimensioni sono determinate, su una scala arbitraria, dal valore dell'attributo size, che può essere compreso tra 1 e 7. Il valore predefinito è 3. Qualora si inserisse un valore minore di uno o maggiore di sette, verranno interpretati dal browser come dimensione 1 o 7.

È possibile anche determinare una dimensione base del font attraverso il tag <basefont> e il suo attributo size e lo si può ingrandire come si desidera semplicemente inserendo gli operatori + e - seguiti dal valore per cui si desidera incrementare o decrementare la dimensione base. Se non viene determinato il valore base di basefont size="valore" è di 3.

Ecco un esempio:

 <body>
  <font size="3">Questo testo sarà di dimensione 3</font>
 </body>

Ecco un esempio con basefont:

 <body>
  <basefont size="4">
  <font size="+2">Questo testo sarà di dimensione 6</font>
  <font size="-2">Questo testo sarà di dimensione 2</font>
  </basefont>
</body>

Ecco un altro esempio senza il tag basefont che quindi assumerà valore 3:

 <body>
  <font size="+2">Questo testo sarà di dimensione 5</font>
  <font size="-2">Questo testo sarà di dimensione 1</font>
 </body>

Stile

Nell'HTML vi sono due stili utilizzabili per determinare il modo in cui sarà visualizzato il testo:

Stile fisico: non si preoccupa della funzione che ha il testo all'interno del contesto pagina e si limita a definire solo gli attributi del testo
Stile logico: gli stili logici al contrario si preoccupano anche di veicolare all'interprete la funzione del blocco di testo che è presente al loro interno.

Gli stili logici sono quelli maggiormente supportati anche dai vecchi browser in quanto presenti sin dalle prime versioni dell'HTML.

Da un punto di vista concettuale è grandemente preferibile usare gli stili logici, specialmente in vista di un utilizzo esteso dei fogli di stile.

Ad esempio, marcando col il tag <code> una porzione di testo che racchiude del codice sorgente, tale testo sarà normalmente visualizzato con caratteri non-proporzionali.
Se in un secondo tempo si desidera che tutti i testi marcati <code> siano visualizzati diversamente (per esempio, su uno sfondo colorato e delimitato da un bordo), sarà sufficiente ridefinire il tag <code> in un foglio di stile, con gli attributi necessari.
Per fare un altro esempio, il tag <cite> graficamente ha lo stesso effetto di <en> o <i>, ma definisce logicamente una citazione, e quindi vale il discorso fatto prima per <code>.

Ci sono diversi valori per impostare lo stile di un testo, di seguito una tabella riassuntiva^[1].

Stile logico	Stile fisico	Effetto
`<strong>`	`<b> (bold)`	<b> rende il testo in grassetto; <strong> è usualmente (ma non sempre) visualizzato in grassetto
`<em> (emphasis)`	`<i> (italic)`	Rende il testo in corsivo
`-`	`<u> (underline)`	Rende il testo sottolineato (è sconsigliato usare il sottolineato in una pagina web, quindi non esiste uno stile logico corrispondente)
`<code>`	`<tt>`	Rende il testo monospaziato
`<pre>`	`<tt>`	Indica che il testo contenuto in questo tag è una o più linee di codice. Il testo viene monospaziato
`<kbd> (keyboard)`	`<tt>`	Rende il testo monospaziato come `<code>`
`<abbr> (abbreviation)`		Indica che il testo contenuto in questo tag è un'abbreviazione (nessun effetto di rendering)
-	`<strike>`	Visualizza una porzione di testo barrato
-	`<sup>(superscript)`	Visualizza una porzione di testo in apice
-	`<sub>(subscript)`	Visualizza una porzione di testo in pedice
`<acronym>`	-	Indica che il testo contenuto in questo tag è un acronimo (nessun effetto di rendering)
`<address>`	`<i>`	Indica che il testo contenuto in questo tag è un indirizzo fisico o e-mail. Il testo viene visualizzato in conrsivo
`<blockquote>`	-	Indica che il testo contenuto in questo tag è una citazione. Il testo viene rientrato verso destra
`<cite>`	`<i>`	Indica che il testo contenuto in questo tag è una citazione. Il testo viene visualizzato in corsivo
`<dfn>(definition)`	`<i>`	Indica che il testo contenuto in questo tag è una definizione. Il testo viene visualizzato in corsivo.
`<q>(quote)`	-	Indica che il testo contenuto in questo tag è una citazione all'interno di un testo (nessun rendering del testo)
`<samp>(sample)`	-	Indica che il testo contenuto in questo tag è un esempio (nessun rendering del testo)
`<var>(variable)`	`<i>`	Indica che il testo contenuto in questo tag è una variabile. Il testo viene visualizzato in corsivo

Note

↑ gli stili logici sul sito del W3C

Organizzare il testo

HTML

Titoli

I titoli sono molto utili nelle pagine per dare maggior visibilità a un elemento che, solitamente, racchiude ciò che sarà possibile leggere nei paragrafi che seguono. Vi sono 6 livelli di titoli, il primo è quello più grande e man mano che si va verso il sesto il titolo risulterà più piccolo.

I titoli sono automaticamente visualizzati dall'interprete in grassetto e lasciano prima e dopo di sé, un margine considerevole (in modo che risulti più leggibile). La sintassi per definire un titolo è la seguente: <h1>Inseriamo il titolo del paragrafo</h1>.
Al posto del numero uno ovviamente si possono inserire i numeri: 2,3,4,5,6 a seconda della grandezza che si desidera visualizzare.

Paragrafi

Vi sono essenzialmente tre tag che svolgono la funzione di suddivisione del testo: <p>, <div> e <span>. Le differenze tra questi tag sono minime ma abbastanza determinati, nel contesto della pagina, per ciò che verrà visualizzato dal browser.

Tag	Significato
`<p>`	Elemento block, di default ha dei margini superiori e inferiori che lo separano dal resto dei contenuti.
`<div>`	Elemento block. Di default il testo non ha margini.
`<span>`	Elemento in-line, serve a raggruppare il testo concettualmente

<p> sta per paragraph ed è infatti l'elemento che rappresenta la nostra concezione di paragrafo con dei margini inferiori e superiori.
<div> sta per division e definisce un blocco di testo al suo interno. In realtà il tag <div> è, prima che un separatore di testo, un contenitore di elementi HTML. Il suo utilizzo è spesso associato ai fogli di stile.
<span> fa da contenitore al testo presente al suo interno. La sua utilità è evidente quando si usano i fogli di stile.

Ecco un esempio:

 <body>
  <p>Questo è un paragrafo</p><br>
  <div>A cui seguono due blocchi di testo, questo è il primo.</div><br>
  <div>Questo è il secondo</div><br>
  <span>Questo è un contenitore, niente di più</span>
 </body>

Approfondimento

I tag <p>, <div> e <span> supportano sia l'attributo class sia id, essenziali per l'interazione con i fogli di stile.

Linee divisorie

Per impaginare meglio un testo si potrebbe rendere necessaria una linea che divida ad esempio un articolo dall'altro. Il tag che svolge questa funzione è <hr>. I suoi principali attributi sono:

width che ne indica la larghezza e richiede un valore in pixel o in percentuale,
size che ne regola le dimensioni ed il cui valore viene espresso in pixel (default 2 pixel),
align che ne permette l'allineamento rispettivamente a destra, al centro o a sinistra.

Ecco un esempio:

  <body>
    <h1>Wikibooks</h1>
    <hr width="100%" size="3">ciao</hr>
    <div>Questa è una guida a contenuto aperto</div>
  </body>

Nota

Il tag <hr> non prevede un tag di chiusura

Andare a capo

Il tag che svolge la funzione per andare a capo è <br>. Alcuni webmaster gli preferiscono dei tag <p> senza il tag di chiusura perché sono più veloci da scrivere però così facendo lasciano il paragrafo aperto incorrendo ad un errore sintattico.

Esempio di codice sintatticamente sbagliato:

  <body>
    <h1>Wikibooks</h1>
    <p>
    <p>
    <p>
    <div>Questa è una guida a contenuto aperto</div>
  </body>

Ecco la versione corretta:

  <body>
    <h1>Wikibooks</h1>
    <br>
    <br>
    <br>
    <div>Questa è una guida a contenuto aperto</div>
  </body>

Nota

Il tag <br> non prevede un tag di chiusura

Testo preformattato

Indica del testo che verrà visualizzato così come è scritto all'interno del documento HTML, rispettando rigorosamente gli spazi. Questo tag è molto usato ad esempio nei forum per rappresentare il sorgente delle applicazioni.
La sua sintassi è la seguente:

   <pre>Inserite del testo con diversi spazi di separazione tra le parole e il browser lo riporterà così come l'avete scritto</pre>

Testo informativo

Come le immagini, anche il testo può avere l'attributo title, che permette di visualizzare un testo informativo posizionando il cursore su di esso (il testo a cui si riferisce il commento sarà sottilineato con una serie di piccoli puntini).
La sua sintassi è la seguente:

   <acronym title="testo informativo, visualizzato solo se vi si posiziona sopra il puntatore">Testo</acronym>

Elenchi

Per definire un elenco o lista nell'HTML abbiamo a disposizione diversi tag che ci permettono di creare tre tipi di elenchi: elenco ordinato, elenco non ordinato e, infine, elenco di definizione.

Elenchi ordinati

Gli elenchi ordinati vengono definiti attraverso il tag <ol> che sta per Ordered List. Gli elementi dell'elenco, devono essere inclusi all'interno dei tag <li></li> ossia List Item. Ogni elemento verrà automaticamente preceduto da un numero.
È utile l'uso dell'attributo start, il quale specifica il numero da cui partirà la numerazione dell'elenco.

Esempio di elenco ordinato:

 <body>
 <ol>
   <li>1° Elemento in ordine numerico</li>
   <li>2° Elemento in ordine numerico</li>
   <li>3° Elemento in ordine numerico</li>
 </ol>
 </body>

Elenchi non ordinati

Gli elenchi non ordinati, le cui voci sono precedute da un pallino, vengono definiti attraverso il tag <ul> che sta per Unordered List. Gli elementi dell'elenco, devono sempre essere inclusi all'interno dei tag <li></li>.

Esempio di elenco non ordinato:

 <body>
 <ul>
   <li>Elemento uno</li>
   <li>Elemento due</li>
   <li>Elemento tre</li>
 </ul>
 </body>

È possibile anche cambiare l'immagine del pallino attraverso l'attributo type i cui possibili valori sono:

circle: visualizzarà un pallino vuoto dentro (bianco al suo interno).
disc: visualizzerà un pallino pieno (nero al suo interno) è il valore di default.
square: visualizzerà un quadratino pieno (nero al suo interno).

I browser che non supportano questo attributo lo ignoreranno.

Esempio di elenchi con diversi stili:

 <body>
   <ul type="disc">
      <li>Elemento con pallino</li>
      <li>Elemento con pallino 2</li>
   </ul>
   <ul type="circle">
      <li>Elemento con pallino vuoto</li>
      <li>Elemento con pallino vuoto due</li>
    </ul>
    <ul type="square">
      <li>Elemento con quadratino pieno</li>
      <li>Elemento con quadratino pieno 2</li>
    </ul>
 </body>

Elenchi di definizioni

Gli elenchi di definizioni sono degli elenchi un po' particolari che prevedono due parti:

Un elemento di testo
Una spiegazione dell'elemento

Questa caratteristica renderà questo tipo di elenchi utili per piccoli glossari, o anche per la gestione delle FAQ sul proprio sito.

Per poterle usare sono necessari tre tag: <dl>, Definition List; <dt>, Definition Term; e <dd>, Definition Defined. Il primo tag serve per contenere l'elenco ed indicare di che tipo è, in questo caso di definizione. Il secondo tag serve per specificare la parola che verrà spiegata o meglio definita. Il terzo tag serve per contenere la spiegazione che verrà rientrata rispetto alla parola da definire.

Vediamo un esempio che chiarirà meglio le idee:

 <body>
  <dl>
    <dt>Wikibooks</dt>
      <dd>Stiamo sviluppando e distribuendo libri di testo, 
   manuali e altri testi   educativi, tutti gratis e a contenuto aperto.</dd>
    <dt>Wikipedia</dt> 
      <dd>Wikipedia è un'enciclopedia libera</dd>
  </dl>
 </body>

Testo dinamico

Testo lampeggiante

Un modo molto semplice per far apparire e scomparire rapidamente il testo, ottenendo un lampeggiamento, è l'uso del tag <blink>.

Ecco un esempio:

 <body>
   <blink>Testo lampeggiante</blink>
 </body>

Nota

Il tag <blink> non rientra nelle specifiche del W3C, pertanto ve ne sconsigliamo l'uso

Testo scorrevole

Per inserire un testo scorrevole è necessario far uso del tag <marquee> i cui principali attributi sono direction, i cui valori possono essere left e right; height e width, i cui valori possono essere espressi o in pixel o in percentuale e determinano l'area di sfondo su cui si muoverà il testo; loop, il cui valore può essere un numero e determina quante volte dovrà essere visualizzata la scritta (-1 o infinite per far sì che venga mostrata all'infinito).

Ecco un esempio:

 <body>
   <marquee direction="left" width="100%" height="10%" loop="-1">Testo scorrevole</marquee>
 </body>

Il testo si muoverà all'infinito da sinistra a destra.

Nota

Il tag <marquee> è proprietario di Microsoft, non rientra quindi nelle specifiche del W3C, pertanto ve ne sconsigliamo l'uso

Links

HTML

I links o àncore sono l'elemento principale di un sito web. I link permettono di passare da un documento ad un altro in maniera molto semplice: cliccando su un collegamento ipertestuale. I link sono costituiti da due componenti: il contenuto e la risorsa.

Il contenuto può essere definito come la parola che risulta cliccabile o, come vedremo più avanti, un'immagine.
La risorsa è la pagina, il file, a cui punta l'url del contenuto.

Collegamenti esterni

Il tag da usare per i link è <a> ... </a> ma da solo non serve a nulla; è fondamentale l'attributo HREF (acronimo che sta per Hypertext REFerence) La sintassi per creare un collegamento ipertestuale è molto semplice ed è la seguente: <a href="qui va inserito l'url">e qui la parola che risulterà cliccabile</a>.

Ecco un esempio:

<body>
   <a href="http://it.wikibooks.org">Homepage di Wikibooks</a>
</body>

Segnalibri o etichette

I segnalibri o etichette sono collegamenti che non rimandano a una pagina esterna come abbiamo visto in precedenza, bensì a un contenuto disponibile nella stessa pagina. La loro sintassi è leggermente più complicata dei collegamenti esterni. Per prima cosa, si deve creare un collegamento simile a quello appena visto, ma solamente con l'attributo name, il quale farà sì che il collegamento non venga visto come un reale link ma, al contrario, come un'àncora che useremo per definire un collegamento a quel determinato testo della pagina.

Ecco l'esempio:

<body>
  <a href="#wiki">Vai al paragrafo su Wikibooks</a>
  <a name="wiki">Questo non è un link ma il testo a cui siamo stati rimandati</a>
</body>

Ricapitolando: per poter realizzare un collegamento interno bisogna eseguire le seguenti operazioni:

Definire l'àncora attraverso l'attributo name.
Richiamarla da un altro link inserendo come valore dell'attributo href il valore dell'attibuto name preceduto dal segno #.

È possibile anche creare in questo modo link vuoti richiamando un'àncora senza valore (ad esempio per creare un link in fondo alla pagina che vi faccia tornare automaticamente all'inizio della stessa) in questo modo:

<body>
  <a href="#">Questo link è vuoto</a>
</body>

Posta elettronica

Attraverso un link è possibile anche far aprire il client di posta dell'utente affinché questo possa inviare una e-mail con il campo A: precompilato. Ovviamente l'indirizzo di posta elettronica che comparirà in tale campo sarà quello che andremo a specificare nel codice HTML. Ecco la sintassi: <a href="mailto:indirizzo mail">Parola da visualizzare</a>

ed ecco un esempio pratico:

<body>
   <a href="mailto:prova@prova.it">Inviami una e-mail!</a>
</body>

Volendo è possibile stabilire anche l'oggetto e il testo del messaggio di posta. Sarà sufficiente seguire quest'altro esempio:

<body>
   <a href="mailto:prova@prova.it?subject=Oggetto&body=Corpo del Messaggio">Prova ad inviarmi una e-mail da qui</a>
</body>

Attributi dei link

Di seguito trovate una tabella riassuntiva degli attributi associabili al tag <a>

Attributo	Valori	Significato
`target`	Qualsiasi parola/codice riservato	Specifica dove visualizzare la risorsa del link. Può essere uno dei seguenti: il nome assegnato ad un frame (vedi capitolo sui Frames), il codice riservato _self che si riferisce allo stesso frame in cui è contenuto il link, il codice riservato _parent che si riferisce al frameset genitore, il codice riservato _top per aprirlo nella pagina originale, senza frame il codice riservato _blank per aprirlo in una nuova finestra del browser
`title`	Qualsiasi lettera/parola	Il valore di questo attributo sarà mostrato quando il cursore si fermerà sopra il link. Utile per offrire informazioni aggiuntive sul link.
`accesskey`	Una singola lettera	Determina le scorciatoie da tastiera. La combinazione di tasti da premere dipende dal browser. Usando la famiglia Mozilla/Firefox bisogna premere ALT+SHIFT+valore, con Internet Explorer diventa, ALT+valore, mentre col Mac CTRL+valore. Gli altri browser utilizzeranno, solitamente, una di queste soluzioni.
`hreflang`	Diversi valori, ad es.: ita, eng, ecc.	Indica la lingua del documento, utile se si ha un sito multilingua. Facilita anche l'indicizzazione da parte dei motori di ricerca.

I seguenti attributi possono essere specificati nel tag <body> della pagina e permettono di personalizzare il colore dei link nella pagina. Il loro uso è però sconsigliato in favore dei CSS

Attributo	Valori	Significato
`link`	Qualsiasi colore	Definisce il colore di tutti i link presenti nella pagina; il tipo di colore può essere specificato sia col nome inglese, sia col relativo codice esadecimale.
`alink`	Qualsiasi colore	Definisce il colore dei link attivi (si intendono attivi i collegamenti al momento del click); come il precedente, può essere espresso sia col nome in inglese che col relativo valore esadecimale.
`vlink`	Qualsiasi colore	Definisce il colore dei link già visitati dall'utente; può essere espresso anche qui sia col nome in inglese che tramite valore esadecimale.

Immagini

HTML

Inserire un'immagine

La sintassi di base per inserire un'immagine all'interno di una pagina web è la seguente <img src="url dell'immagine" alt="testo alternativo">

Attributo	Significato
`border`	identifica il bordo che a 0 non è presente, salendo con i numeri aumenta di spessore
`title`	testo informativo, visualizzato posizionando il cursore sopra l'immagine
`width`	forza la dimensione della foto in larghezza
`height`	forza la dimensione della foto in altezza
`alt`	permette di specificare un testo alternativo, descrittivo dell'immagine

È fortemente consigliato inserire testo alternativo per ogni immagine, in modo da migliorare l'accessibilità del sito per i non vedenti in quanto il suo contenuto può essere 'letto' da browser adatti.
Il testo alternativo verrà inoltre visualizzato in automatico se il browser non riesce a visualizzare l'immagine.

I valori di width e height possono essere espressi in pixel o come percentuale della larghezza della pagina.

Esempio di inserimento di un'immagine:

<body>
  <img src="http://it.wikibooks.org/skins-1.5/monobook/user.gif" alt="immagine utente" 
  height="30" width="20" title="Immagine Utente" />
</body>

Nota

Il tag <img> non prevede un tag di chiusura, quindi richiede la barra prima del > finale, per la validazione da parte del WWW Consortium per l'XHTML

Definire l'allineamento

L'HTML permette di definire l'allineamento delle immagini rispetto al testo tramite l'attributo align che può assumere i seguenti valori:

bottom (default): il bordo inferiore dell'immagine risulta allineato verticalmente con la prima linea del testo.
middle: la prima riga del testo è allineato con il centro dell'immagine. Dopo la prima riga, il testo scorre sotto l'immagine.
top: la prima riga del testo è allineata con il bordo superiore dell'immagine.
left: l'immagine risulta allineata a sinistra del testo
right: l'immagine risulta allineata a destra del testo

Immagine come link

Se si vuole creare un collegamento ipertestuale su di un'immagine bisogna inserire il tag <img> incluso tra i tag <a href="url"> e </a>.

Ecco un esempio:

<body>
 <a href="http://wikimediafoundation.org">
  <img src="http://it.wikibooks.org/images/wikimedia-button.png" alt="immagine di wikimedia" 
  height="50" width="50" title="Wikimedia" />
 </a> 
</body>

Mappa d'immagine

Le mappe d'immagine sono delle mappe costituite da un'immagine sulla cui area sono disposti diversi link. L'esempio più eclatante è la penisola italiana: cliccando, ad esempio, sull'immagine del Lazio si verrà indirizzati verso le pagine inerenti al Lazio; al contrario, cliccando sull'immagine della Sardegna si verrà indirizzati verso le pagine inerenti alla Sardegna. Per ottenere ciò si usa il tag area.

Area è un oggetto XML DOM utilizzato per creare una mappa immagine ovvero per rendere attiva^[1] una (o una o più porzioni di) immagine in un documento HTML.

Proprietà

Proprietà	Funzione
accessKey	Imposta o restituisce un tasto per l'accesso all'area attiva da tastiera
alt	Imposta o restituisce un testo alternativo per i browser che non supportano l'oggetto Area
coords	Imposta o restituisce una sequenza di lunghezze (separate da virgole) che costituiscono le coordinate dell'area interattiva.
hash	Imposta o restituisce la parte dell'URL costituita dal link (preceduto da #) impostato all'interno dell'oggetto.
host	Imposta o restituisce il nome dell'host e la porta dell'URL.
hostname	Imposta o restituisce il nome dell'host e l'Indirizzo IP dello stesso.
href	Imposta o restituisce l'intero URL.
id	Imposta o restituisce l'id associato all'oggetto.
noHref	Imposta o restituisce lo stato di inattività dell'area
pathname	Imposta o restituisce il pathname dell'URL
port	Imposta o restituisce la porta dell'URL.
protocol	Imposta o restituisce il protocollo dell'URL (ad esempio: "http:" o "https:").
search	Imposta o restituisce la query-string dell'URL, preceduta dal carattere '?'.
shape	Imposta o restituisce la forma (rect, circle, poly) dell'area attiva.
tabIndex	Imposta o restituisce un indice sequenziale delle aree attive dell'immagine per spostarsi dall'una all'altra con il tasto tab.
target	Imposta o restituisce il nome di destinazione del link dell'URL.

Eventi

Evento	Funzione
onClick	Esegue una porzione di codice dopo un singolo click del mouse sull'area attiva.
onDblClick	Esegue una porzione di codice dopo un doppio click del mouse sull'area attiva.
onMouseOut	Esegue una porzione di codice all'uscita del puntatore del mouse dall'area attiva.
onMouseOver	Esegue una porzione di codice all'ingresso del puntatore del mouse dall'area attiva.

Ecco un esempio (è stata definita l'area dell'immagine da mappare e inserita la mappa da usare, map1, all'interno del tag immagine):

<map name="map1">
<area href="pagina.html" alt="Pagina" title="Pagina" shape="rect" coords="6,116,97,184">
</map>
<img src="esempio.jpg" usemap="#map1">

Immagine nella barra degli indirizzi

L'HTML ci permette attraverso il tag <link> di inserire un'immagine nella barra degli indirizzi accanto all'url del sito che si sta visitando (in Mozilla Firefox l'immagine verrà visualizzata anche accanto al titolo della pagina nei tab). L'immagine che vorremmo usare a tale scopo dovrà avere necessariamente il nome di favicon, dovrà essere grande 16x16px o maggiore e potrà essere dei seguenti formati: .gif, .ico o .jpg.

Ecco un esempio su come utilizzare favicon:

<head>  
  <link rel="icon" href="http://<percorso>/favicon.ico">
</head>

Precedemente favicon era un elemento supportato solamente da Internet Explorer e per poterlo utilizzare era necessaria la seguente sintassi: <link rel="icon" href="http://<percorso>/favicon.ico">. Tuttavia come già detto, questa sintassi è stata dichiarata deprecata dal W3C e il primo esempio che vi abbiamo mostrato è quello definito negli standard.

Note

↑ L'area attiva dell'immagine produce un evento quando il puntatore del mouse viene posizionato sopra o viene cliccato, dopo aver posizionato il puntatore, un pulsante del mouse (o un tasto della tastiera se impostato).

Tabelle

HTML

Il tag usato per la creazione delle tabelle è <table> in coppia con il suo tag di chiusura </table>. È tra questi due tag che si devono inserire colonne e righe, le prime si creano attraverso il tag <tr> (Table Row); le seconde, attraverso il tag <td> (Table Data). È importante notare come è sempre una riga ad includere una colonna: cioè il tag <td> è sempre incluso in un tag <tr>.

Se si vuole indicare al browser di creare una cella che faccia da intestazione ad una colonna (solitamente renderizzata con il contenuto in neretto e centrato) si può usare il tag <th> (Table Header), ideato appositamente per questo tipo di funzione.

Anche se essi sono attualmente deprecati in quanto contengono informazioni di stile, è possibile aggiungere a colonne e righe attributi quali align (alignment) e valign (Vertical alignment); per modificare la dimensione semantica di una colonna si utilizza l'attributo colspan (Column span), mentre rowspan è l'equivalente per le righe.

align: allinea il testo della cella a destra (right), sinistra (left) e centrato (center).
valign: allinea il testo della cella sul margine superiore (top), sul margine inferiore (bottom), e in mezzo (middle)
colspan: quante colonne pesa una singola <td>
rowspan: quante righe pesa una singola <td>

Le celle e le colonne supportano anche gli attributi height e width.

Vi è un tag interessante che è <caption> che permette di aggiungere una descrizione alla tabella (una sorta di didascalia) che supporta l'attributo align pertanto si posizionerà o sopra o sotto la tabella secondo il valore specificato in tale attributo.

Attributi delle tabelle

Attributo	Significato
`border`	Stabilisce la dimensione del bordo esterno alla tabella. Il valore di default è 0 (ossia assente).
`width`	Stabilisce la larghezza della tabella
`height`	Stabilisce la lunghezza della tabella
`cellspacing`	Stabilisce la spaziatura tra le celle
`cellpadding`	Stabilisce la spaziatura tra il testo e la cella che lo contiene

Esempio di tabella:

 <table width="100%" height="30%" cellspacing="4" cellpadding="2" border="1">
    <caption align="bottom">Questa è una tabella di esempio</caption>
   <tr>
     <th>Intestazione 1</th>
     <th>Intestazione 2</th>
   </tr>
   <tr>
     <td align="center">Cella 1 colonna 1 testo centrato</td>
     <td valign="top">Cella 1 colonna 2 allineata sopra</td>
   </tr>
   <tr>
     <td>Cella 2 colonna 1</td>
     <td width="70%">Cella 2 colonna 2</td>
   </tr>
  </table>

Il risultato sarà:

Questa è una tabella di esempio
Intestazione 1	Intestazione 2
Cella 1 colonna 1 testo centrato	Cella 1 colonna 2 allineata sopra
Cella 2 colonna 1	Cella 2 colonna 2

Tabelle preformattate

È possibile creare delle tabelle anche attraverso spazi e senza l'ausilio del tag <table>: ci si può servire infatti del tag <pre> che, come abbiamo detto in precedenza, dirà all'interprete di visualizzare il testo così com'è stato scritto all'interno del documento HTML, pertanto con i medesimi spazi e a capo.
L'inconveniente è che il testo all'interno del tag <pre> verrà visualizzato monospaziato, scelta esteticamente non ottimale, e sarà inoltre meno gestibile in termini di modifiche successive. Ecco un esempio di tabella preformattata:

<pre>
        +------------------+-----------------+------------------+
        | prima colonna    | <b>seconda colonna</b> | terza colonna    |
        +------------------+-----------------+------------------+
        | primo elemento   | primo elemento  | primo elemento   |
        | secondo elemento | secondo elemento| secondo elemento |
        +------------------+-----------------+------------------+
</pre>

Il risultato sarà:

       +------------------+-----------------+------------------+
       | prima colonna    | seconda colonna | terza colonna    |
       +------------------+-----------------+------------------+
       | primo elemento   | primo elemento  | primo elemento   |
       | secondo elemento | secondo elemento| secondo elemento |
       +------------------+-----------------+------------------+

Sfondo

HTML

Per poter settare un colore come sfondo di una pagina è sufficiente servirsi dell'attributo bgcolor che va inserito all'interno del tag <body>. L'attributo bgcolor sta per background color che com'è facile intuire corrisponde all'italiano: colore di sfondo. Come valore dell'attributo bgcolor si può impostare qualsiasi colore, sia attraverso il suo valore nominale che attraverso il suo valore esadecimale.

La sintassi per l'uso di bgcolor:

 <body bgcolor="#FFFF00">
   La pagina avrà uno sfondo di colore giallo (valore esadecimale)
 </body>

 <body bgcolor="black">
   La pagina avrà uno sfondo di colore nero (valore nominale)
 </body>

Immagine di sfondo

Una volta settata un'immagine come sfondo di una pagina essa verrà ripetuta sia orizzontalmente che verticalmente, bisognerà quindi stare attenti alla colorazione del testo in modo che questo sia in ogni caso leggibile. È possibile anche combinare un'immagine di sfondo con una colorazione di modo che nell'attesa del caricamento dell'immagine l'utente possa comunque leggere il testo. L'attributo per poter inserire un'immagine di sfondo è background che va inserito sempre all'interno di <body>, il suo valore ovviamente sarà l'url che porterà all'immagine in questione.

Ecco un esempio:

 <body bgcolor="#FFFF00" background="immagine.jpg">
   Questa pagina contiene un'immagine come sfondo, tuttavia mentre essa verrà caricata
   vedrai uno sfondo di colore giallo
 </body>

Multimedia

HTML

Attraverso l'HTML si possono anche inserire contenuti multimediali all'interno delle proprie pagine. Per permettere di scaricare un file è sufficiente creare un link che come risorsa ha il file che vorreste far scaricare.

Ecco un esempio:

<body>
   <a href="http://www.url.it/file.mpg">Scarica il video!</a>
</body>

Si può usare la stessa sintassi per qualsiasi altro tipo di file: audio, archivi e così via.

Suoni

Se si desidera far ascoltare ai propri utenti un suono di sottofondo alla pagina è sufficiente inserire il tag <bgsound> in cui attributi sono src e loop. La sintassi è la seguente: <bgsound src="url del file audio" loop="numero di volte da riprodurre">. L'attributo loop serve a comunicare all'interprete quante volte dovrà ripetere il file audio specificato nell'attributo src. Per poter riprodurre il file audio all'infinito si può usare il valore infinite o -1, anche se ciò è sconsigliabile perché può dar fastidio all'utente.

Ecco un esempio di integrazione del suono

<body>
   <bgsound src="prova.mid" loop="2">
   <div>Questa pagina contiene un file audio che verrà ripetuto per due volte consecutive</div>
</body>

Nota

Il tag <bgsound> è di proprietà della Microsoft, non rientra quindi nelle specifiche del W3C, pertanto ve ne sconsigliamo l'uso

Moduli

HTML

Il tag <form> si occupa di definire il modulo, tutto ciò che è tra il suo tag d'apertura e quello di chiusura è parte del modulo stesso. Possiamo definire diversi tipi di elementi: campi di testo, checkbox, area di testo e box di selezione. Gli attributi del tag <form> sono action e method.

action: serve per specificare a quale file verranno inviati i dati; solitamente si tratta di uno script lato server, come PHP, ASP o CGI, tanto per citarne alcuni
method: serve a indicare il metodo attraverso il quale saranno inviati i dati alla pagina che li elaborerà. Può assumere i valori get e post:
- con get le informazioni vengono concatenate all'indirizzo del file specificato da action, in questo modo:
  action.php?nome_campo1=valore_campo1&nome_campo2=valore_campo2
- con post le informazioni vengono inviate solo tramite la richiesta HTTP e non sono visibili in maniera evidente all'utente (con appositi programmi è possibile leggere la richiesta HTTP per scovare questi valori, quindi non considerate questo sistema assolutamente sicuro).

La sostanziale differenza tra i due risiede nel fatto che get supporta al massimo 255 caratteri mentre la capacità post è sostanzialmente illimitata.

Tipi di campo

Per poter creare un campo di testo, o una casella ci serviremmo del tag <input>. I principali attributi di <input> sono type (che determina il tipo di elemento), name (che determinano un nome per ogni campo in modo da far comprendere a uno script quali opzioni sono state scelte) e value (per inserire del testo precompilato nei campi).

All'interno dei form è possibile inserire uno o più campi e di vario tipo, facendo uso del tag <input> i cui attributi per definire i tipi di campi sono i seguenti:

Valore	Tipo di campo
text	Campo di testo
radio	Voci da selezionare, mutuamente esclusive
checkbox	Voci per selezione multipla

Il valore text creerà una finestra in cui sarà possibile scrivere ciò che si desidera. Vi sono altri due attributi del tag <input></input> che possono essere molto utili e sono:

size: stabilisce la lunghezza del campo da compilare
maxlength: stabilisce il numero massimo di caratteri che il campo accetterà

Se si vuole oscurare il contenuto di un campo (ad esempio per permettere di inserire una password senza che essa venga visualizzata da altri) è sufficiente inserire password come valore dell'attributo type.

Ecco un esempio di ciò che si è visto finora:

 <body>
  <form action="prova.php" method="post">
   Inserire un nome:
    <input type="text" name="nome" size="20" maxlenght="15"><br />
   Inserire un cognome:
    <input type="text" name="cognome" size="40"><br />
   Inserire una password:
    <input type="password" name="pass" size="40">
  </form>
 </body>

Menu a scelta

È possibile creare dei menù a discesa all'interno dei moduli; questo permetterà all'utente di scegliere tra voci predefinite. Per creare un menù a discesa si usa il tag <select>, </select> al cui interno verrà definita ogni voce attraverso il tag <option>, </option>.

La sintassi per creare un menù a discesa è la seguente: <select name="nome del menù"><option>Testo che si vedrà nel menù</option></select>

Esempio di menù a discesa:

 <body> 
  <form action="prova.php" method="post">
   <select name="menu">
    <option>Wikibooks</option>
    <option>Wikipedia</option>
    <option>Wikisource</option>
   </select>
  </form>
 </body>

Si può anche creare un altro tipo di menù in cui non vi è un menù a cascata ma si scorre semplicemente un elenco. La sintassi per creare questo tipo di menù prevede l'uso dell'attributo size, all'interno del tag <select>, che conterrà come valore il numero delle opzioni del menù.

Esempio di elenco da cui scegliere:

 <body>
  <form action="prova.php" method="post">
   <select name="menu" size="3">
    <option>Wikibooks</option>
    <option>Wikipedia</option>
    <option>Wikisource</option>
   </select>
  </form>
 </body>

Area di testo

Le aree di testo si possono creare utilizzando il tag <textarea> che, a differenza del tag <input>, deve essere chiuso dal suo tag di chiusura </textarea>. Gli attributi del tag <textarea> sono principalmente due:

rows: indica il numero di righe che conterrà l'area di testo
cols: indica il numero di colonne che conterrà l'area di testo

Ovviamente il valore di questi due attributi sarà un numero a nostra discrezione.

Altri due attributi sono name che dà un nome all'area di testo e wrap (un attributo senza valore) che manderà automaticamente a capo il testo che verrà scritto all'interno della textarea.

Ecco un esempio di textarea:

 <body>
  Commenti su wikibooks?
  <form action="prova.php" method="post">
   <textarea name="messaggio" rows="10" cols="50" wrap>Inviaci la tua opinione!</textarea>
  </form>
 </body>

Pulsanti

Esistono due pulsanti che si possono definire tramite l'HTML uno per inviare i dati a un'altra pagina e un altro per resettare i campi di un modulo per poterli ricompilare, il primo è contraddistinto dal valore submit nell'attributo type; il secondo dal valore reset sempre nell'attributo type.

Esempio di pulsante che invia i dati:

 <body>
  <form action="prova.php" method="post">
   <input type="submit" value="Invia!">
  </form>
 </body>

Esempio di pulsante che cancella i dati:

 <body>
  <form action="prova.php" method="post">
   <input type="reset" value="Cancella Tutto">
  </form>
 </body>

Frames

HTML

A cosa servono i frame?

I frames che si possono rendere in italiano con il termine riquadri sono dei porzioni di pagina indipendenti l'una dell'altra. Ad esempio si può dividere la pagina in 3 frame: uno a sinistra, per il menù; una a destra, per i links; e infine la parte centrale per il contenuto della pagina. L'obiettivo dei frame è quello di evitare di dover riscrivere interamente ogni pagina in tutte le sue componenti ma ad esempio, suddividendo la pagina come suggerito prima, per lasciare intatti i frame menù e links, si potrà ricaricare solamente il contenuto del frame centrale, permettendo così di gestire una mole di codice nettamente minore. L'uso dei frame per quanto possa sembrare vantaggioso, è sconsigliabile per i seguenti motivi:

Per mantenere una parte di pagina invariata si può usare un linguaggio lato server come PHP, e con veramente poco codice avrete lo stesso risultato dei frame.
Inoltre le diverse pagine che compongono il frame sono analizzate singolarmente dai motori di ricerca e quindi c'è il rischio che come risultato un motore di ricerca dia ad esempio solo un menu che dovrebbe fare parte del frameset
Per riuscire a disegnare dei frame graficamente accattivanti è necessario saper utilizzare i fogli di stile.

Creare una pagina

Per poter creare una pagina con i frame utilizzeremo il tag <frameset> che inizializza la struttura di una pagina con i frame. All' interno del tag <frameset> useremo il tag <frame> i cui attributi principali sono id, per dare un nome al frame; e src, per indicare la pagina che verrà caricata all'interno del frame stesso. Gli attributi del tag <frameset> ci permettono invece di dare delle dimensioni ai frame essi sono due:

cols: specifica la dimensione delle colonne di ogni frame. Se viene omesso la struttura della pagina sarà a righe.
rows: specifica la dimensione delle righe di ogni frame. Se viene omesso la struttura della pagina sarà a colonne.

Il codice dei seguenti esempio e in generale la struttura dei frame non necessita di trovarsi all'interno del tag <body>. Lo si deve inserire dopo il tag di chiusura </head>

Ecco un esempio con la struttura a colonne:

  <frameset cols="20%,60%,20%">
   <frame src="pagina.htm">
   <frame src="pagina2.htm">
   <frame src="pagina3.htm">
  </frameset>

Ecco un esempio con la struttura a righe:

  <frameset rows="20%,60%,20%">
   <frame src="pagina.htm">
   <frame src="pagina2.htm">
   <frame src="pagina3.htm">
  </frameset>

I valori di questi due attributi possono essere espressi in percentuale (rispetto alla pagina) o in pixel. C'è un elemento complementare * (asterisco) che si può usare ad esempio per riempire tutta la porzione di pagina non compresa dagli altri frame.

Ecco un esempio:

  <frameset cols="30%,50%,*">
   <frame src="pagina.htm">
   <frame src="pagina2.htm">
   <frame src="pagina3.htm">
  </frameset>

Il terzo frame sarà equivalente al 20% della pagina, ossia la porzione restante di pagina non occupata dagli altri due frame.

Fuori dai frame

Per poter scrivere al di fuori della struttura dei frame è necessario servirsi del tag <noframes> seguito da tutta la formattazione html necessaria ai vostri scopi </noframes>

Ecco un esempio di uso del tag <noframes>:

<frameset cols="30%,50%,*">
   <frame src="pagina.htm">
   <frame src="pagina2.htm">
    <noframes>
    Se non ti piacciono i frame usa questo menù: 
      <a href="pagina.htm">Pagina 1</a>
      

      <a href="pagina2.htm">Pagina 2</a>
      

       <a href="pagina3.htm">Pagina 3</a>
    </noframes>
   <frame src="pagina3.htm">
  </frameset>

Attributi del frameset

Ecco una tabella riassuntiva degli attributi del tag <frameset>

Attributo	Significato
`framespacing`	Specifica lo spazio tra un frame e un altro (solo IE)
`bordercolor`	Specifica il colore dei bordi del frameset
`border`	Specifica lo spazio tra un frame e un altro, espresso in pixel

Attributi dei frame

Ecco una tabella riassuntiva degli attributi del tag <frame>

Attributo	Significato
`scrolling`	Specifica se si desiderano i bordi, yes (opzione di default), o meno no
`noresize`	Impedisce il ridimensionamento di un frame (no necessita di valori)
`marginheight`	Specifica la distanza in verticale tra il bordo del frame e il suo contenuto
`marginwidth`	Specifica la distanza in orizzontale tra il bordo del frame e il suo contenuto
`frameborder`	Specifica se i bordi sono visibili o meno, rispettivamente i valori 1 e 0

Caricare una pagina

Attraverso l'attributo target del tag <a> è possibile caricare i contenuti di un link in un frame specifico o in nuova finestra. Questa è la sintassi: <a href="url alla pagina da inserire nel frame" target="nome del frame">Testo del link</a>

Ecco un esempio:

<body>
 <a href="pagina.htm" target="centro">Il link verrà caricato all'interno del frame 'centro'</a>
</body>

L'attributo target può avere, oltre al nome del frame dichiarato negli attributi name o id, i seguenti valori:

_blank: carica il contenuto in una nuova finestra.
_top: carica il contenuto sovrastando la struttura del frameset.
_self: carica il contenuto nello stesso frame del link.
_parent: carica il contenuto nel frameset genitore.

Ecco un esempio:

<body>
 <a href="pagina.htm" target="_blank">Il link verrà caricato in una nuova finestra</a>
</body>

È possibile anche dare un valore di default all'attributo target mediante il tag <base>.

Ecco un esempio:

<head>
 <base target=”nomeframe”>
</head>

Questo farà si che i link si aprano all'interno del frame che si è indicato, a meno che nell'attributo target di un link non sia specificato un altro valore.

Iframe

Iframe sta per Inline frame e permette di inserire un frame anche in una pagina non strutturata in frame. È sufficiente servirsi del tag <iframe> i cui attributi sono width, che ne specifica la larghezza; height, che ne specifica l'altezza; e src che specifica il documento da caricare al suo interno (anche un url esterno se necessario). Per la sua comodità questo tag è stato subito incluso nelle specifiche dal W3C.

Ecco un esempio di iframe:

 <body>
  <iframe width="50%" height="30%" src="http://it.wikipedia.org">
  Se il vostro browser non supporta i frame verrà mostrato questo testo
  </iframe>
 </body>

Il tag <iframe> supporta inoltre tutti gli attributi del tag <frame>.
Con un adeguato script JavaScript, inoltre, è possibile creare un testo scorrevole in verticale.

Entità

HTML

Le entità sono dei particolari codici che servono per rappresentare caratteri speciali, i quali potrebbero avere problemi di visualizzazioni su computer e sistemi operativi differenti. Il codice per inserire una entità nella pagina è: &entità;.

Mentre i caratteri alfabetici e di punteggiatura usati più frequentemente non hanno problemi di visualizzazione, alcuni caratteri più "esoterici" (anche semplicemente le parole accentate) sono letti in modo differente a seconda che il browser o il sistema operativo in uso utilizzi un set di caratteri (charset) differente. Inoltre le entità servono per rappresentare quei caratteri che non si trovano abitualmente sulla tastiera (simboli matematici, lettere greche...)

Ogni entità è identificata dalla "e commerciale" (&) seguita da un codice e dal punto e virgola (;). Il codice può essere di due tipi:

numerico (numerical reference), basato sul relativo codice nel set di caratteri ASCII;
nominale (entity name), .

A loro volta i codici numerici possono essere di due tipi:

decimale, precedute dal "cancelletto" (#);
esadecimali, precedute dal cancelletto più la lettera x (#x).

Le entità decimali da 0 a 31 codificano i cosiddetti "caratteri non stampabili" (tabulazione, rimando a capo, ecc.)

Tabelle dei caratteri speciali

Lettere accentate e segni diacritici

Carattere	Codice nominale	Codice numerico decimale	Codice numerico esadecimale
À à	&Agrave`;` &agrave`;`	&#192`;` &#224`;`	&#x00C0`;` &#x00E0`;`
Á á	&Aacute`;` &aacute`;`	&#193`;` &#225`;`	&#x00C1`;` &#x00E1`;`
Â â	&Acirc`;` &acirc`;`	&#194`;` &#226`;`	&#x00C2`;` &#x00E2`;`
Ã ã	&Atilde`;` &atilde`;`	&#195`;` &#227`;`	&#x00C3`;` &#x00E3`;`
ä Ä	&Auml`;` &auml`;`	&#196`;` &#228`;`	&#x00C4`;` &#x00E4`;`
Å å	&Aring`;` &aring`;`	&#197`;` &#229`;`	&#x00C5`;` &#x00E5`;`
Æ æ	&AElig`;` &aelig`;`	&#198`;` &#230`;`	&#x00C6`;` &#x00E6`;`
Ç ç	&Ccedil`;` &ccedil`;`	&#199`;` &#231`;`	&#x00C7`;` &#x00E7`;`
È è	&Egrave`;` &egrave`;`	&#200`;` &#232`;`	&#x00C8`;` &#x00E8`;`
É é	&Eacute`;` &eacute`;`	&#201`;` &#233`;`	&#x00C9`;` &#x00E9`;`
Ê ê	&Ecirc`;` &ecirc`;`	&#202`;` &#234`;`	&#x00CA`;` &#x00EA`;`
Ë ë	&Euml`;` &euml`;`	&#203`;` &#235`;`	&#x00CB`;` &#x00EB`;`
Ì ì	&Igrave`;` &igrave`;`	&#204`;` &#236`;`	&#x00CC`;` &#x00EC`;`
Í í	&Iacute`;` &iacute`;`	&#205`;` &#237`;`	&#x00CD`;` &#x00ED`;`
Î î	&Icirc`;` &icirc`;`	&#206`;` &#238`;`	&#x00CE`;` &#x00EE`;`
Ï ï	&Iuml`;` &iuml`;`	&#207`;` &#239`;`	&#x00CF`;` &#x00EF`;`
Ð ð	&ETH`;` &eth`;`	&#208`;` &#240`;`	&#x00D0`;` &#x00F0`;`
Ñ ñ	&Ntilde`;` &ntilde`;`	&#209`;` &#241`;`	&#x00D1`;` &#x00F1`;`
Ò ò	&Ograve`;` &ograve`;`	&#210`;` &#242`;`	&#x00D2`;` &#x00F2`;`
Ó ó	&Oacute`;` &oacute`;`	&#211`;` &#243`;`	&#x00D3`;` &#x00F3`;`
Ô ô	&Ocirc`;` &ocirc`;`	&#212`;` &#244`;`	&#x00D4`;` &#x00F4`;`
Õ õ	&Otilde`;` &otilde`;`	&#213`;` &#245`;`	&#x00D5`;` &#x00F5`;`
Ö ö	&Ouml`;` &ouml`;`	&#214`;` &#246`;`	&#x00D6`;` &#x00F6`;`
Ø ø	&Oslash`;` &oslash`;`	&#216`;` &#248`;`	&#x00D8`;` &#x00F8`;`
Ù ù	&Ugrave`;` &ugrave`;`	&#217`;` &#249`;`	&#x00D9`;` &#x00F9`;`
Ú ú	&Uacute`;` &uacute`;`	&#218`;` &#250`;`	&#x00DA`;` &#x00FA`;`
Û û	&Ucirc`;` &ucirc`;`	&#219`;` &#251`;`	&#x00DB`;` &#x00FB`;`
Ü ü	&Uuml`;` &uuml`;`	&#220`;` &#252`;`	&#x00DC`;` &#x00FC`;`
Ý ý	&Yacute`;` &yacute`;`	&#221`;` &#253`;`	&#x00DD`;` &#x00FD`;`
Þ þ	&THORN`;` &thorn`;`	&#222`;` &#254`;`	&#x00DE`;` &#x00FE`;`
ß	&szlig`;`	&#223`;`	&#x00DF`;`
ÿ Ÿ	&yuml`;` &Yuml`;`	&#255`;` &#376`;`	&#x00FF`;` &#x0178`;`
Œ œ	&Oelig`;` &oelig`;`	&#338`;` &#339`;`	&#x0152`;` &#x00153`;`
Š š	&Scaron`;` &scaron`;`	&#352`;` &#353`;`	&#x0160`;` &#x00161`;`

Alfabetico greco

Carattere	Codice nominale	Codice numerico decimale	Codice numerico esadecimale
Α α	&Alpha`;` &alpha`;`	&#913`;` &#945`;`	&#x0391`;` &#x03B1`;`
Β β	&Beta`;` &beta`;`	&#914`;` &#946`;`	&#x0392`;` &#x03B2`;`
Γ γ	&Gamma`;` &gamma`;`	&#915`;` &#947`;`	&#x0393`;` &#x03B3`;`
Δ δ	&Delta`;` &delta`;`	&#916`;` &#948`;`	&#x0394`;` &#x03B4`;`
Ε ε	&Epsilon`;` &epsilon`;`	&#917`;` &#949`;`	&#x0395`;` &#x03B5`;`
Ζ ζ	&Zeta`;` &zeta`;`	&#918`;` &#950`;`	&#x0396`;` &#x03B6`;`
Η η	&Eta`;` &eta`;`	&#919`;` &#951`;`	&#x0397`;` &#x03B7`;`
Θ θ ϑ	&Theta`;` &theta`;` &thetasym`;`	&#920`;` &#952`;` &#977`;`	&#x0398`;` &#x03B8`;` &#x03D1`;`
Ι ι	&Iota`;` &iota`;`	&#921`;` &#953`;`	&#x0399`;` &#x03B9`;`
Κ κ	&Kappa`;` &kappa`;`	&#922`;` &#954`;`	&#x039A`;` &#x03BA`;`
Λ λ	&Lambda`;` &lambda`;`	&#923`;` &#955`;`	&#x039B`;` &#x03BB`;`
Μ μ	&Mu`;` &mu`;`	&#924`;` &#956`;`	&#x039C`;` &#x03BC`;`
Ν ν	&Nu`;` &nu`;`	&#925`;` &#957`;`	&#x039D`;` &#x03BD`;`
Ξ ξ	&Xi`;` &xi`;`	&#926`;` &#958`;`	&#x039E`;` &#x03BE`;`
Ο ο	&Omicron`;` &omicron`;`	&#927`;` &#959`;`	&#x039F`;` &#x03BF`;`
Π π	&Pi`;` &pi`;`	&#928`;` &#960`;`	&#x03A0`;` &#x03C0`;`
Ρ ρ	&Rho`;` &rho`;`	&#929`;` &#961`;`	&#x03A1`;` &#x03C1`;`
Σ ς σ	&Sigma`;` &sigmaf`;` sigma`;`	&#930`;` &#962`;` &#963`;`	&#x03A3`;` &#x03C2`;` &#x03C3`;`
Τ τ	&Tau`;` &tau`;`	&#932`;` &#964`;`	&#x03A4`;` &#x03C4`;`
Υ υ	&Upsilon`;` &upsilon`;`	&#933`;` &#965`;`	&#x03A5`;` &#x03C5`;`
Φ φ	&Phi`;` &phi`;`	&#934`;` &#966`;`	&#x03A6`;` &#x03C6`;`
Χ χ	&Chi`;` &chi`;`	&#935`;` &#967`;`	&#x03A7`;` &#x03C7`;`
Ψ ψ	&Psi`;` &psi`;`	&#936`;` &#968`;`	&#x03A8`;` &#x03C8`;`
Ω ω	&Omega`;` &omega`;`	&#937`;` &#969`;`	&#x03A9`;` &#x03C9`;`

Altri simboli

Carattere	Codice nominale	Codice numerico decimale	Codice numerico esadecimale	Eventuali annotazioni
"	&quot`;`	&#34`;`	&#x0022`;`	Doppio apice
&	&amp`;`	&#38`;`	&#x0026`;`	E commerciale
'	&apos`;`	&#39`;`	&#x0027`;`	Apostrofo
<	&lt`;`	&#60`;`	&#x003C`;`	Minore
>	&gt`;`	&#62`;`	&#x003E`;`	Maggiore
`	–	&#96`;`	&#x0060`;`	Accento grave
	&nbsp`;`	&#160`;`	&#x00A0`;`	Carattere di spaziatura
¡	&iexcl`;`	&#161`;`	&#x00A1`;`
¢	&cent`;`	&#162`;`	&#x00A2`;`	Simbolo del centesimo
£	&pound`;`	&#163`;`	&#x00A3`;`	Simbolo della Sterlina
¤	&curren`;`	&#164`;`	&#x00A4`;`	Simbolo generico di valuta
¥	&yen`;`	&#165`;`	&#x00A5`;`	Yen
¦	&brvbar`;`	&#166`;`	&#x00A6`;`	Barra verticale (chiamata anche pipe)
§	&sect`;`	&#167`;`	&#x00A7`;`	Simbolo del paragrafo
¨	&uml`;`	&#168`;`	&#x00A8`;`
©	&copy`;`	&#169`;`	&#x00A9`;`	Simbolo del copyright
ª	&ordf`;`	&#170`;`	&#x00AA`;`	Lettera a in apice (indicatore d'ordine femminile)
«	&laquo`;`	&#171`;`	&#x00AB`;`
¬	&not`;`	&#172`;`	&#x00AC`;`	Simbolo della negazione
	&shy`;`	&#173`;`	&#x00AD`;`
®	&reg`;`	&#174`;`	&#x00AE`;`	Simbolo del marchio registrato
¯	&macr`;`	&#175`;`	&#x00AF`;`	Macron (chiamato anche "trattino alto" o overline)
°	&deg`;`	&#176`;`	&#x00B0`;`	Simbolo del grado
±	&plusmn`;`	&#177`;`	&#x00B1`;`	Simbolo del più o meno
²	&sup2`;`	&#178`;`	&#x00B2`;`	Esponente alla seconda
³	&sup3`;`	&#179`;`	&#x00B3`;`	Esponente alla terza
´	&acute`;`	&#180`;`	&#x00B4`;`	Accento acuto
µ	&micro`;`	&#181`;`	&#x00B5`;`
¶	&para`;`	&#182`;`	&#x00B6`;`	Piede di mosca
·	&middot`;`	&#183`;`	&#x00B7`;`	Punto mediano
¸	&cedil`;`	&#184`;`	&#x00B8`;`	Cediglia
¹	&sup1`;`	&#185`;`	&#x00B9`;`	Esponente alla prima
º	&ordm`;`	&#186`;`	&#x00BA`;`	Lettera o in apice (indicatore d'ordine maschile)
»	&raquo`;`	&#187`;`	&#x00BB`;`
¼	&frac14`;`	&#188`;`	&#x00BC`;`
½	&frac12`;`	&#189`;`	&#x00BD`;`
¾	&frac34`;`	&#190`;`	&#x00BE`;`
¿	&iquest`;`	&#191`;`	&#x00BF`;`	Punto interrogativo spagnolo
×	&times`;`	&#215`;`	&#x00D7`;`	Segno di moltiplicazione
÷	&divide`;`	&#247`;`	&#x00F7`;`	Obelo (segno di divisione)
ˆ	&circ`;`	&#710`;`	&#x02C6`;`	Accento circonflesso
˜	&tilde`;`	&#732`;`	&#x02DC`;`	Tilde
‎	&lrm`;`	&#8206`;`	&#x200E`;`	Molti dei seguenti non sono visti da Internet Explorer
‏	&rlm`;`	&#8207`;`	&#x200F`;`
–	&ndash`;`	&#8211`;`	&#x2013`;`	Lineeta enne
—	&mdash`;`	&#8212`;`	&#x2014`;`	Lineetta emme
‘	&lsquo`;`	&#8216`;`	&#x2018`;`
’	&rsquo`;`	&#8217`;`	&#x2019`;`
‚	&sbquo`;`	&#8218`;`	&#x201A`;`
“	&ldquo`;`	&#8220`;`	&#x201C`;`
”	&rdquo`;`	&#8221`;`	&#x201D`;`
„	&bdquo`;`	&#8222`;`	&#x201E`;`
†	&dagger`;`	&#8224`;`	&#x2020`;`	Obelisco semplice (chiamato anche pugnale o spada)
‡	&Dagger`;`	&#8225`;`	&#x2021`;`	Obelisco doppio (chiamato anche pugnale o spada)
•	&bull`;`	&#8226`;`	&#x2022`;`	Punto elenco
…	&hellip`;`	&#8230`;`	&#x2026`;`	Punti di sospensione (chiamati anche "tre punti")
→		&#8594`;`	&#x2190`;`	Freccia a destra
←		&#8592`;`	&#x2192`;`	Freccia a sinistra
↑		&#8593`;`	&#x2191`;`	Freccia in alto
↓		&#8595`;`	&#x2193`;`	Freccia in basso
↔		&#8596`;`	&#x2194`;`	Doppia freccia orizzontale
↕		&#8597`;`	&#x2195`;`	Doppia freccia verticale
‰	&permil`;`	&#8240`;`	&#x2030`;`	Per mille
′	&prime`;`	&#8242`;`	&#x2032`;`	Simbolo del Primo
″	&Prime`;`	&#8243`;`	&#x2033`;`	Simbolo del doppio Primo
‹	&lsaquo`;`	&#8249`;`	&#x2039`;`
›	&rsaquo`;`	&#8250`;`	&#x203A`;`
‾	&oline`;`	&#8254`;`	&#x203E`;`	Quasi simile all'overline (leggermente più basso)
⁄	&frasl`;`	&#8260`;`	&#x2044`;`	Barra di frazione
€	&euro`;`	&#8364`;`	&#x20AC`;`	Simbolo dell'Euro
ℂ		&#8450`;`	&#x2102`;`	Campo dei numeri complessi
ℚ		&#8474`;`	&#x211A`;`	Campo dei numeri razionali
ℝ		&#8477`;`	&#x211D`;`	Campo dei numeri reali
ℤ		&#8484`;`	&#x2124`;`	Anello dei numeri interi
☼			&#x263c`;`	Sole
☾			&#x263e`;`	Luna calante
☽			&#x263d`;`	Luna crescente
☮			&#x262e`;`	Simbolo della pace
☯			&#x262f`;`	Tao (o Yang e Yin)

Scacchi

Carattere	Codice numerico esadecimale	Eventuali annotazioni
♔	&#x2654`;`	Re bianco
♚	&#x265a`;`	Re nero
♕	&#x2655`;`	Regina bianca
♛	&#x265b`;`	Regina nera
♖	&#x2656`;`	Torre bianca
♜	&#x265c`;`	Torre nera
♗	&#x2657`;`	Alfiere bianco
♝	&#x265d`;`	Alfiere nero
♘	&#x2658`;`	Cavallo bianco
♞	&#x265e`;`	Cavallo nero
♙	&#x2659`;`	Pedone bianco
♟	&#x265f`;`	Pedone nero

Includere altri linguaggi

HTML

Fogli di stile

Per approfondire, vedi CSS/Regole e sintassi.

Il tag <style>

È possibile scrivere direttamente nell'header della pagina (quindi bisogna includerle tra i tag <head> e </head>) le dichiarazioni di fogli di stile che desideriamo grazie al tag <style> la cui sintassi è: <style type="tipo">Istruzioni di stile </style>

Ecco un esempio:

 <head>
   <style type="text/css">
     DIV {FONT-FAMILY: Verdana,Helvetica;FONT-SIZE:11px}
   </style>
 </head>

Questo renderà tutto il testo contenuto tra i tag <div>,</div>, del font Verdana o in caso di sua assenza di Helvetica, famiglia generica. Il testo sarà grande 11px.

Nota

ll tipo di foglio di stile non deve essere necessariamente text/css ma dipende da foglio di stile che si desidera utilizzare, ad oggi i CSS sono sicuramente i più usati ma verranno presto soppiantati o comunque affiancati dagli XSLT

Inclusione da file esterno

È possibile creare dei veri e propri fogli di stile che contengono solamente istruzioni di stile con totale assenza di HTML (nel caso in cui fosse presente, il foglio di stile non funzionerà). Per poter includere i fogli di stile all'interno dell'HTML è necessario il tag <link>, la cui sintassi è la seguente <link rel="parola" href="url del foglio di stile" type="tipo">. Il tag deve essere necessariamente incluso tra i tag <head></head>.

Ecco un esempio:

 <head>
  <link rel="stylesheet" href="http://www.prova.it/fogliodistile.css" type="text/css">
 </head>

Inclusione inline

La maggior parte dei tag supportano l'attributo style i cui valori possono essere istruzioni di stile CSS di qualsiasi tipo. In questo caso sarà necessario omettere le parentesi graffe per far sì che il codice venga interpretato nella maniera corretta dal browser. Gli elementi inline solitamente prevalgono sugli altri metodi di inclusione di istruzioni di stile, quindi se in un foglio di stile esterno scriviamo di voler avere tutto il testo della pagina in blu, possiamo modificare il colore dei soli titoli attraverso una dichiarazione inline, rendendoli ad esempio, neri.

La sintassi è: <nometag style="istruzioni di stile"></nometag>

Ecco un esempio:

<body>
   <div style="color: red;">questo testo sarà rosso</div>
</body>

Flash

Per inlcudere un'animazione in flash è necessario usare il tag <object> al cui interno è necessario inserire il tag <param>.

Ecco un esempio:

<body>
  <object type="application/x-shockwave-flash" data="animazione.swf" width="10%" height="10%">
   <param name="movie" value="animazione.swf">
   </object>
</body>

JavaScript, VBScript e linguaggi di scripting

Per approfondire, vedi JavaScript/Il nostro primo programma#Inserire un JavaScript in una pagina HTML.

Per includere un linguaggio di scripting si può usare il tag script, con il quale si può, o aprirne uno indipendente con l'attributo src, oppure scrivere direttamente nel file html lo script. Esempio:

<body>
   <script src="percorso"></script>
</body>

Per richiamare lo script conoscendone il percorso. Questo può essere di tre tipi:

percorso di rete (è un percorso assoluto): src="http://www.sitodiprova.org/cartella/script.js";
percorso relativo (prende come cartella di riferimento quella del file html): src="script.js";
percorso assoluto nel computer: src="/home/utente/script.js" ovviamente con linux e src="C:\Users\utente\documenti\script.js" per Windows.

<body>
   <script language="vbscript">MsgBox "Sei su wikibooks",0,"Wikibooks"</script>
</body>

Questo codice stamperà a video una finestra di dialogo; all'interno dei tag ovviamente è possibile inserire qualsiasi istruzione del linguaggio in questione. Per inserire un JavaScript si usa la medesima procedura:

<body>
   <script language="javascript">
 function stampa()
  {
   if (window.print)
   {
     window.print();
   }
 }</script>
</body>

Questo codice permette, una volta richiamata la funzione, di stampare il testo della pagina. Se javascript non è supportato dal browser non si otterrà alcun risultato.

Verificatori

HTML

I verificatori o validatori sono dei programmi che verificano la correttezza della sintassi dell'HTML facendo così risaltare eventuali errori.

Verificatore W3C

Il verificatore o validatore messo a disposizione sia online che offline dal W3C è un programma che si preoccupa di verificare che la sintassi dell'HTML di un documento rispetti gli standard definiti dal W3C stesso.

Per verificare una pagina, è possibile accedere al validatore a questo indirizzo; tramite questa pagina è possibile verificare un file salvato sul proprio disco, una pagina pubblicata on-line oppure del codice immesso direttamente in una apposita casella di testo.

Dal momento che esistono specifiche più nuove rispetto a quelle dell'HTML, come ad esempio quelle dell'XHTML, il validatore fornisce la possibilità di verificare le pagine secondo diverse direttive; tuttavia, se non viene specificata la specifica in uso della pagine in questione, il validatore è in grado di selezionarne una automaticamente.

Una volta ottenuto il seguente messaggio "This Page Is Valid HTML 4.01 Transitional!" (che apparirà ovviamente solo se la pagina ha un doctype impostato su transitional) è possibile pubblicare sul proprio sito quest'immagine che attesta la validità del documento:

Il seguente codice permette di cliccare sull'immagine e verificare la validità del sito (codice preso dal sito del W3C).

 <body>
   <a href="http://validator.w3.org/check?uri=URL DEL SITO">
   <img src="http://www.w3.org/Icons/valid-html401"
   alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
 </body>

Ovviamente a URL DEL SITO bisognerà sostituire l'indirizzo del proprio sito.

Evoluzione del markup

HTML

Le specifiche HTML più recenti, quelle della versione 4.01, furono rilasciate dal W3C il 24 dicembre 1999.
Da quel momento il linguaggio di markup per la progettazione delle pagine web si è notevolmente evoluto, tanto da rendere obsolete alcune funzionalità dell'HTML. In questo modulo verrà fornita una breve panoramica dell'evoluzione dei linguaggio per la creazione di pagine web, che si basano comunque sull'HTML.

XHTML

Per approfondire, vedi XML.

La parola XHTML è l'acronimo per Extensible HyperText Markup Language ed è una fusione tra i nomi di due linguaggi, l'HTML e l'XML.

L'idea dell'XHTML è quella di rimappare le regole dell'HTML secondo le regole dell'XML; il vantaggio è quello di ottenere documenti XML per il web e leggibili da tutti i browser che possono quindi usufruire di particolari funzionalità di XML (come l'uso degli XSLT) e di creare documenti ben strutturati (questo ha anche lo scopo, ad esempio, di una migliore lettura della pagina da parte del DOM JavaScript).

Dall'HTML all'XHTML

Il primo passo per impostare il documento con XHTML consiste nell'intestazione XML:

<?xml version="1.0" encoding="UTF-8" ?>

Successivamente dobbiamo fare uso di DocType specifici; come per l'HTML, esistono tre possibilità:

Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

L'elemento radice del documento deve essere, in base alla grammatica, l'elemento html associato obbligatoriamente ad un attributo particolare:

<html xmlns="http://www.w3.org/1999/xhtml">
...
</html>

Dentro all'elemento HTML devono essere obbligatoriamente presenti l'intestazione (tag <head>) e la sezione body della pagina, e non altro.

Ecco di seguito alcune delle principali regole da rispettare per la composizione della pagina XHTML:

XHTML è case-sensitive (sensibile alle maiuscole) e i nomi dei tag e degli attributi vanno scritti quindi tutti minuscoli
il valore degli attributo deve essere sempre posto tra virgolette
i valori degli attributi vanno sempre esplicitati
i tag vanno sempre chiusi (ad esempio non va bene <input type="checkbox" checked >, che va sostituito con <input type="checkbox" checked="checked" />

Tag vuoti ed XHTML

Per definizione, alcuni tag non possono contenere nemmeno marcare porzioni di testo: non hanno quindi il tag di chiusura e pertanto sono detti tag vuoti.

I seguenti sono alcuni esempi di tag vuoti:

<img src = 'images/fiore.png'>
<hr>
<p>Questo è un paragrafo<br>che continua sulla riga seguente</p>

Sempre per motivi di compatibilità verso l'XML, che non ammette tag vuoti e privi dell'informazione di fine-tag, è buona norma terminare ogni tag vuoto inserendo una barra prima del simbolo > terminale.
Per garantire la piena compatibilità con i browser attuali (che nella maggioranza dei casi supportano intrinsecamente l'HTML e non l'XML), nella codifica XHTML la barra finale dev'essere preceduta da uno spazio.
In XHTML, i precedenti esempi di tag vuoti si scriveranno quindi:

<img src = 'images/fiore.png' />
<hr />
<p>Questo è un paragrafo<br />che continua sulla riga seguente</p>

CSS

Per approfondire, vedi Linguaggio CSS.

Un linguaggio che ha reso obsoleto gran parte dei tag di formattazione HTML è stato il CSS, acronimo di Cascading Style Sheet (fogli di stile a cascata).

L'idea che sta alla base di questo linguaggio è la separazione concettuale e pratica del contenuto della pagina dalla sua struttura (X)HTML. Il CSS permette infatti di definire per ogni elemento o gruppo di elementi della pagina determinati stili, ad esempio la formattazione del testo grassetto o sottolineato. Facendo un piccolo esempio, quello che con HTML puro sarebbe:

<b>testo grassetto</b>

potrebbe diventare

<span style="font-weight:bolder;">testo grassetto</span>

Proprio a seguito della nascita dei fogli di stile il W3C ha deprecato (cioè indicato come obsoleti) molti tag HTML (anche font, ad esempio) in favore del CSS, che è più potente e più flessibile.

Esercizi

HTML