Pagine web e HTML - manuale Donatella PDF

HTML è acronimo di Hyper Text Mark-Up Language e indica il linguaggio usato per descrivere i documenti ipertestuali disponibili nel Web.\ Tutti i siti web presenti su Internet sono scritti in codice HTML. HTML non è un linguaggio di programmazione, ma un sistema di markup, poiché si basa su codi...

HTML è acronimo di Hyper Text Mark-Up Language e indica il linguaggio usato per descrivere i documenti ipertestuali disponibili nel Web.\ Tutti i siti web presenti su Internet sono scritti in codice HTML. HTML non è un linguaggio di programmazione, ma un sistema di markup, poiché si basa su codici di marcatura, detti tag che, inseriti in un testo, ne determinano le caratteristiche di formattazione.\ Il browser legge ed elabora il testo in base ai tag, generando la pagina web come noi la vediamo. Un tag è un carattere o una breve parola racchiusa tra due parentesi angolari, cioè i segni \< e \>. Sono tag, ad esempio, \, \, \, ecc.. Generalmente le informazioni su cui agisce il tag devono essere racchiuse fra un tag di apertura ed uno di chiusura, quest\'ultimo indicato apponendo il carattere slash (/) dopo la parentesi angolare aperta.\ Ad esempio, il testo tra i tag \ \... \ appare in grassetto. I tag possono essere scritti sia in maiuscolo sia in minuscolo, anche se è consigliabile mantenere la coerenza (usare solo i caratteri in maiuscolo o solo in minuscolo). L\'HTML è un linguaggio di pubblico dominio, la cui sintassi è stabilita dal World Wide Web Consortium (W3C), che ha rilasciato diverse versioni di questo linguaggio: HTML 2.0, HTML 3.2, HTML 4.01 e l'ultimissima HTML 5.\ La versione 4.01 (24 dicembre 1999), per anni lo standard più diffuso, sta lentamente lasciando posto alla versione 5. Le notevoli novità introdotte da HTML 5 mirano essenzialmente al disaccoppiamento tra struttura e contenuti della pagina. Il World Wide Web Consortium ha annunciato che per il 2016 è prevista l\'uscita di HTML 5.1.\ Nella presente trattazione si farà riferimento alla versione 4.01, precisando eventuali novità introdotte da HTML 5. Struttura di una pagina Una pagina HTML è costituita da solo testo, pertanto può essere scritta usando un semplice elaboratore di testi come **il Blocco note.**\ Molti preferiscono però usare speciali editor, in grado di evidenziare il risultato visivo piuttosto che i codici; tali editor sono indicati con il nome di **WYSIWYG** (What You See Is What You Get - Quello che vedi è quello che ottieni). La struttura di una semplice pagina. Un documento HTML comincia con l\'indicazione della definizione del tipo di documento (Document Type Definition o DTD), la quale segnala al browser le specifiche del documento, indicando a quale versione di HTML si fa riferimento. Non è indispensabile, ma il W3C consiglia fortemente di inserirla. A questo scopo si usa il tag **\** La riga di codice assume un aspetto di questo genere: **\** Questa riga di codice (che, per comodità, ometteremo nel seguito della trattazione) fornisce alcune informazioni sul documento: **Elemento** **Descrizione** **HTML** il tipo di linguaggio utilizzato è l'HTML **PUBLIC** il documento è pubblico **W3C** il documento fa riferimento alle specifiche rilasciate dal W3C **-** (segno "meno") le specifiche non sono registrate all'ISO (organizzazione di standardizzazione internazionale). Se lo fossero state, ci sarebbe stato un "+" **DTD HTML 4.01 Transitional** il documento fa riferimento a una DTD ("Document Type Definition" cioè "Definizione del tipo di documento"); la versione di HTML supportata è la 4.01 "transitional" **EN** la lingua con cui è scritta la DTD è l'inglese (IT se è scritta in Italiano) **http://www.w3.org/TR/html4/loose.dtd** indirizzo di riferimento a cui è possibile trovare la DTD. Non è un parametro necessrio, anzi per l'HTML non lo si fa quasi mai, perché gli URL a cui trovare la La riga DTD può comunque essere anche scritta semplicemente così: **\** Dopo la riga DTD, inizia la pagina html vera e propria, racchiusa tra il tag \ e la sua chiusura \.\ All'interno ci sono due sezioni: l'intestazione (head) e il corpo della pagina (body). L'intestazione, racchiusa fra i tag \ e \, contiene altri tag che forniscono informazioni supplementari, quali il titolo e indicazioni per rendere la pagina reperibile dai motori di ricerca.\ Un tag importante presente nell'intestazione è \, che serve per specificare il testo che deve comparire nella barra del titolo della finestra del browser; la chiusura \ serve per indicare la fine di questa porzione di testo. Il corpo della pagina, racchiuso fra i tag \ e \, contiene tutto ciò che viene poi visualizzato dal browser. **Esempio**: \ \  Compare una pagina con un\'intestazione al centro della prima riga (BENVENUTI). Il titolo viene inserito all'interno dei tag \ e \, che impostano un'intestazione di dimensione 1, che è quella più grande. L'HTML dispone di sei livelli, da h1 a h6, di intestazione, caratterizzati, oltre che da una differente dimensione del carattere, anche da un diverso utilizzo del grassetto, per cui il tag \ è quello che fornisce l'effetto di maggiore impatto, mentre il tag \ ha la rilevanza minore I tag possono contenere uno o più **attributi**, che definiscono ulteriori caratteristiche e formattazioni da applicare al testo. Un attributo viene posto dopo il nome del tag, seguito dal segno = e, tra virgolette, dal valore da assegnare all'attributo. Nell'esempio è stato usato l'attributo **align**, cui è stato dato il valore **center**, per visualizzare il titolo al centro della riga. L'indentazione (incolonnamento) delle righe di codice non è obbligatoria, ma può essere utile per migliorare la leggibilità. Oltre ai tag di base, per poter creare una pagina **HTML** riconosciuta come valida nella **versione 5**, è necessario inserire nel codice alcune informazioni aggiuntive:  - - I colori in HTML I colori in HTML si possono esprimere in due modi: - - Il primo si basa sulla combinazione dei tre colori fondamentali Rosso, Verde e Blu per ottenere un qualsiasi colore nella gamma di quelli disponibili. L'intensità di ogni componente cromatico è rappresentata da un numero compreso tra 0 e 255 (in esadecimale tra 00 e FF). Si ottengono in questo modo codici di sei cifre esadecimali, che vanno sempre preceduti dal simbolo \# e compresi tra apici. La seconda possibilità, non compatibile con tutti i browser, permette di indicare direttamente il nome del colore desiderato (in inglese).  Oltre a questi colori fondamentali è possibile ottenere tantissime altre combinazioni. Ad esempio, per le diverse tonalità del blu si possono usare: tutte le combinazioni possibili sono supportate solo da schede grafiche con 16M di colori. Attributi del tag \ Oltre all'attributo lang, il tag \ dispone di diversi attributi. I principali sono: - - - - - - - - Riassumendo, quella che segue è la definizione del corpo di una pagina con un'immagine di sfondo che resta fissa durante le operazioni di spostamento (scrolling), testo di colore nero, link di colore rosso, link visitati di colore verde e distanza dai quattro margini di 50 pixel. \  Le entità carattere A volte in un documento HTML è necessario usare caratteri speciali, come lettere accentate, simboli monetari (quelli sulla tastiera non sempre sono comprensibili a tutti i browser), caratteri non disponibili sulla tastiera. Tra i caratteri speciali sono presenti anche quelli riservati all'HTML, quali i simboli "\", "&" e le virgolette. Anche lo spazio è un carattere speciale: il browser ignora più di uno spazio tra due parole. In HTML esistono le cosiddette entità, ossia costrutti sintattici che permettono ai browser di far visualizzare correttamente questi caratteri. Così come i tag, anche le entità sono delimitate da due caratteri: "&" e ";". Tra delimitatori vengono inseriti i codici numerici (codici ISO) o i nomi simbolici (appositamente definiti per l\'HTML) che corrispondono ai caratteri speciali. Le prime (anche dette entità HTML) sono rappresentate mediante la sintassi &\[stringa\], mentre le seconde (anche dette entità Unicode rappresentate mediante la sintassi &\#\[numero\];) sono rappresentate mediante la sintassi &\#\[numero\]. Per dovere di completezza ricordiamo che esiste anche un terzo tipo di notazione per le entità (cd. entità esadecimali) il quale, tuttavia, è scarsamente utilizzato.  Si osservi che, per inserire più di uno spazio tra due parole, è necessario ripetere più volte l\'entità che rappresenta lo spazio, **&nbsp;**. Il percorso dei file - path Il percorso di un file a cui far riferimento in una pagina web può essere specificato in due modi: - - Il **path assoluto** fa riferimento alla posizione che occupa un file all'interno del disco che contiene il sito. Per esempio, il file sfondo.gif, che si trova nella cartella di nome Immagini contenuta a sua volta nella cartella di nome Sito contenuta nella root del sistema ha come percorso assoluto: c:/Sito/Immagini/sfondo.gif Utilizzare questo tipo di path non è consigliabile per i file di un sito, perché li lega alla posizione che essi occupano all'interno del disco. Spostando la cartella Sito su un'altra macchina, in una posizione diversa dalla root (per esempio sul server che fornisce il servizio di hosting) i file non saranno più raggiungibili. Conviene usare **il path relativo**, che, come dice la parola, rappresenta il percorso da seguire partendo dalla posizione in cui ci si trova. La posizione di partenza è indicata dal simbolo "./". Stabilita la posizione di partenza, per indicare di salire di un livello si usa il simbolo "../", per scendere di un livello è sufficiente specificare il nome della cartella seguito dal simbolo "/". **Esempi**: **./../index.php** partendo dalla posizione corrente, si sale di un livello e si trova il file "index.asp"; **./immagini/sfondo.gif** partendo dalla posizione corrente, si scende nella cartella immagini, dove si trova il file "sfondo.gif"; **./../../immagini/sfondo.gif** partendo dalla posizione corrente, si sale di due livelli per poi scendere di un livello attraverso la cartella immagini, dove si trova il file "sfondo.gif". Come già detto, se non si specifica un path ma solo il nome del file, quest'ultimo viene cercato nella stessa directory del documento HTML. Il tag font Il tag \ consente di cambiare il font dei caratteri racchiusi fra **\** e **\.** Tramite l'attributo **face**, si specifica il carattere con il quale il testo deve essere visualizzato. Si possono elencare diversi nomi di caratteri separati da virgole; se il primo non è disponibile, il browser proverà uno alla volta i successivi, fino a trovare quello che può utilizzare. Se nessuno dei caratteri indicati è disponibile, è usato un carattere predefinito. *Esempio: \* La dimensione del font è impostata tramite l'attributo **size**; la misura è rappresentata da un numero compreso fra 1 e 7. *Esempio: \* È possibile specificare una dimensione relativa. Per default, la misura di un carattere è 3; se, come valore dell'attributo size, si usa uno dei valori negativi -1, -2 e -3, il carattere viene ridotto di 1,2 o 3 rispetto alla dimensione di default, mentre, se si usa uno dei numeri positivi +1, +2, +3 e +4, il carattere viene ingrandito di 1, 2, 3 o 4 rispetto al valore di default. *Esempio: \* Il colore del testo può essere impostato tramite l'attributo color. Esempio: \ Il tag br Il tag \ (break) inserisce un **ritorno a capo** (carriage return). In assenza di questo tag, il testo viene scritto di seguito, fino a raggiungere il lato destro della finestra del browser, anche se nel file html si è usato il tasto Invio per andare a capo. Questo tag non ammette chiusura e, come tutti i tag di questo tipo, si può scrivere anche nel seguente modo: **\ Esempio: Questo testo \ va a capo →** Questo testo\ va a capo Il tag p Il tag **\** consente di indicare l'inizio di un paragrafo. Ogni paragrafo è individuato graficamente da una riga vuota che lo precede e da una che lo segue. Il tag \ individua la chiusura del paragrafo; in realtà esso non è necessario, perché la fine di un paragrafo è individuata dall'inizio del successivo. In ogni caso è buona norma includere tutti i tag di chiusura. È possibile impostare l'allineamento del testo di un paragrafo rispetto ai margini tramite l'attributo align. Le opzioni consentite sono: - - - - *Esempio:* *\questo è un esempio di paragrafo\* *\questo è un altro paragrafo\* Il tag div Il tag \ è un contenitore generico usato per racchiudere una parte di testo cui attribuire caratteristiche comuni. Ha funzioni analoghe a quelle di \, producendo un "a capo" prima e dopo la parte di testo tra \ e \, ma senza lasciare una riga vuota come \. Un attributo importante del tag \ è id, il cui valore è un identificatore univoco che individua la parte della pagina delimitata da \ e \. Il tag center Il tag **\** (chiusura **\**) consente di posizionare il testo al centro della pagina.\ Non è molto usato; al suo posto si preferisce utilizzare il tag \ (chiusura **\**) con attributo align. Esempio \testo\ \testo\ entrambi posizionano il testo al centro della pagina. I tag per le liste Si possono usare tre tipi di liste: puntate (o non ordinate), numerate (o ordinate) e di definizione. Il tag **\** indica l'inizio di una lista puntata; ogni elemento della lista viene preceduto dal tag **\** e chiuso con **\** (la chiusura non è obbligatoria). Esempio: \ \\ \Prima voce\ \Seconda voce\ \Terza voce\ \ Normalmente ogni voce comparire preceduta da un cerchietto nero. È possibile usare altri simboli attrvarso l'attributo **type** di \; i valori possibili sono: - - - Per creare una lista numerata si usano i tag **\**\...**\** invece dei tag **\**\...**\**. *Esempio:\ \\ \prima voce\ \seconda voce\ \terza voce\ \* Per cambiare il tipo di numerazione, si può usare l'attributo **type**, che assume i seguenti valori: **1** - numerazione normale\ **I** - numeri romani\ **i** - numeri romani minuscoli\ **a** - lettere minuscole\ **A** - lettere maiuscole In alcuni casi potrebbe essere necessario iniziare la numerazione di una lista con un numero diverso dal primo.\ A tal fine si può usare l\'attributo **start**, che permette di impostare il numero di partenza. Il valore di start è il numero d'ordine nella sequenza di lista da cui si intende far partire elencazione (non il simbolo). Esempio:\ \\ produce un elenco individuato dalle lettere minuscole da 4 in poi. \\ produce un elenco individuato dalle lettere minuscole da c in poi.  La **lista di definizione** si differenzia dalle precedenti in quanto ogni elemento della lista è formato da due parti: \- un termine\ - la definizione di tale termine. Normalmente la definizione è visualizzata in una riga differente rispetto al termine ed è rientrata rispetto al margine sinistro del testo. I tag per l\'apertura e la chiusura della lista sono: **\** e **\**, i tag per l\'inserimento del termine sono **\** e **\** e quelli per la definizione sono **\** e **\**. Si possono creare anche **liste nidificate**: basta inserire l\'intera struttura di una lista come elemento di un\'altra lista. Si consiglia in questo caso di chiudere i tag \ che contengono altre liste.  Tag stilistici e tag di contesto Tag stilistici (o fisici) Tag di contesto (o logici) I primi conferiscono al testo solo un'importanza tipografica; sono visualizzati sempre nello stesso modo da tutti i browser. I secondi, oltre a enfatizzare in qualche modo il testo, segnalano al browser anche un'importanza semantica individuata dal tag stesso. Possono essere visualizzati in modo diverso a seconda del browser utilizzato. Ve ne sono molti altri rispetto a quelli indicati, vista l'importanza che il web semantico sta assumendo. Altri tag che influenzano il formato sono: **\\...\** apici **Esempio: 3\3\ 3^3^** **\\...\** pedici **Esempio: H\2\O H~2~O** Commenti A volte può essere utile commentare il codice HTML.\ I commenti non sono visualizzati dal browser, ma saranno sicuramente utili quando si dovrà \"rimettere mano al codice\", per cambiarlo o semplicemente per usarlo in altre occasioni. I commenti HTML iniziano con **\**.\ Tutto ciò che è compreso tra questi due marcatori non viene interpretato come codice HTML. Inserimento di immagini Il tag per inserire le immagini è **\** e non ammette chiusura. L\'attributo **src** specifica il percorso del file che contiene l\'immagine, che può essere un file di un qualsiasi formato grafico (.jpg, bmp,.png,.gif; l'immagine gif può anche essere animata).\ La sintassi è dunque: **\** Se non si specifica alcun percorso, il file viene prelevato dalla directory corrente; nel caso in cui il file si trovi altrove, si deve specificare l'URL o il path completo. **Esempio:** *\ Il file foto1.gif è nella directory corrente.* *\