27/9/2015

html

Hyper Text Markup Language

Pagine Web
Codici dei colori
caratteri speciali

torna a frapec

Un riferimento al linguaggio disponibile presso w3scool.

Una panoramica sul linguaggio HTML

Il World Wide Web un insieme di documenti e di risorse contenute in calcolatori sparsi nel mondo, collegati tramite
Internet.
Ciascun documento pu contenere collegamenti (link, in inglese) ad altri documenti e risorse disponibili su altri computer.
L'insieme di tutti i collegamenti forma una maglia che viene paragonata idealmente ad una ragnatela. Web significa appunto
ragnatela.
Il Web nacque per migliorare la distribuzione delle informazioni tra le universit e i centri di ricerca. L'esigenza dei
ricercatori era ostacolata dalla difficolt di distribuire risorse eterogenee. Ad esempio il trasferimento di file, la
partecipazione ad un Newsgroup, ad una discussione su forum, e cos via.
Il Web consente l'accesso a tutte queste risorse tramite un solo strumento: il browser, cio il programma utilizzato per
"sfogliare" i contenuti della rete.
I documenti che costituiscono il Web, denominati pagine Web, vengono scritti in HTML (Hyper Text Markup Language,
Linguaggio Ipertestuale a Marcatori), un linguaggio descrittivo basato sulla presenza nel documento di marcatori, questi
elementi svolgono la funzione di parentesi, nel senso che racchiudono parti che vengono interpretate dal programma, che
legge il documento, e vengono elaborate in modo appropriato.
La pagina HTML, a differenza delle pagine cartacee, non ha delle dimensioni fisiche prestabilite: si tratta di una entit
contenente informazioni. Quindi, una pagina HTML pu corrispondere a svariate pagine cartacee.
Un computer della rete identificato da un nome (o anche da un indirizzo). Il computer ospita (Host in inglese) documenti
e risorse, che nel loro insieme costituiscono un sito Web. La pagina principale, predefinita dall'autore, viene chiamata Home
Page e rappresenta il punto di partenza per l'esplorazione del sito.

Breve storia
La prima versione dell'HTML si rivolgeva prevalentemente ad un ristretto numero di utenti, tutti con conoscenza e cultura
scientifica. Il linguaggio serviva unicamente per formattare le relazioni ed i documenti della comunit scientifica.
Era fortemente limitativo, e permetteva di descrivere la pagina "a grandi linee", senza scendere effettivamente nei
"particolari". Tramite il ristretto set di tag disponibili era possibile indicare il titolo, formattare i paragrafi e realizzare delle
liste puntate e numerate. Era anche possibile evidenziare porzioni di testo, introdurre delle immagini, e soprattutto
introdurre dei collegamenti ipertestuali, detti "link", in modo che una pagina che parlasse - ad esempio - di "botanica", desse
la possibilit di "saltare" verso altri siti che trattavano lo stesso argomento (o altri argomenti correlati).
Nonostante queste limitazioni e la ridottissima banda passante che caratterizzava la Rete ai primi anni '90, il Web ebbe un
successo strepitoso. Il successo presso il grande pubblico di utenti non tecnici fece sorgere nuove necessit, mentre il Web
iniziava ad assumere una nuova natura commerciale.
Per rispondere alle nuove esigenze, furono introdotti nuovi tag per la formattazione delle immagini e del testo e, soprattutto,
le tabelle, impiegate anche per posizionare gli elementi sulla pagina. Furono inoltre introdotte le texture di sfondo che
vivacizzano l'aspetto.
Nonostante i grandi cambiamenti, per, si era ancora lontani dal completo controllo dell'aspetto, ancora fortemente
dipendente dal browser.
La competitivit tra i produttori di browser cominci a manifestarsi con le incompatibilit delle pagine. Infatti, elementi
innovativi come i Frame (letteralmente "cornici") tramite i quali era possibile visualizzare ed organizzare
contemporaneamente pi pagine HTML in una stessa finestra non erano riconosciuti da tutti i browser. La mancanza di
compatibilit per un tag ha come conseguenza che un documento diventa accessibile ad un pi ristretto bacino di utenza.

I Marcatori
Il concetto di Marcatore nasce nelle tipografie e si riferisce alle note scritte dall'impaginatore intorno al documento per
descrivere l'impaginazione finale del documento stesso. Un linguaggio basato su marcatori un insieme di istruzioni che
definiscono come debbono essere elaborati ed organizzati i dati del documento.
I marcatori vengono anche chiamati tag. In generale si utilizza un tag per indicare l'inizio del testo da trattare ed un tag per
definirne la fine. Il linguaggio a marcatori si occupa di definire la struttura ed il contenuto del documento stesso. Tramite i
tag si procede nella definizione delle parti del documento.
Per dare un esempio di elemento si pensi a dei numeri di telefono contenuti nel documento. Tramite i tag

<telefono>.... </telefono>
sar possibile riconoscere immediatamente il tipo delle informazioni e procedere ad una rappresentazione che le metta in
evidenza.
Ovviamente, per poter utilizzare e leggere una pagina scritta in HTML serve un browser che ne consenta la lettura.
In definitiva, l'HTML un linguaggio ideato per organizzare ed archiviare informazioni di natura scientifica consentendone
il reperimento facilmente e velocemente. Un'altra caratteristica che ha influenzato la stesura dell'HTML l'indipendenza
dalla piattaforma su cui si legge il documento.
Tra gli elementi che l'HTML consente di definire all'interno di un documento vi sono: titolo, intestazione, corpo del testo,
elenchi numerati e puntati e collegamenti ipertestuali;
Ciascun elemento viene individuato tramite un tag iniziale, racchiuso tra i segni di minore e maggiore (< e >), ed un tag
finale, racchiuso tra i caratteri (</ e >). Il tag case insensitive, cio pu essere scritto sia maiuscolo che minuscolo, ma in
genere buona norma scriverli tutti nella stessa maniera per facilitare la lettura e la manutenzione del documento. I tag
possono essere raggruppati per tipologia:

formattazione della struttura documento,

formattazione del testo,
inserimento di elementi ipertestuali,
inserimento di immagini,
http://www.giordanicaserta.it/frapec/vba/notaHtml.html

1/6

27/9/2015

html

inserimento di elementi multimediali,

formattazione di caratteri,
form e moduli,
tabelle,
documenti attivi e dinamici,
frame.

Dichiarazione DOCTYPE
La stesura di un documento prevede prima di tutto l'identificazione del documento tramite il tag speciale <!DOCTYPE
...>
La dichiarazione DOCTYPEdeve essere la prima riga di ogni documento HTML e deve precedere qualsiasi altro tag.
La dichiarazione DOCTYPEnon un tag HTML, un'informazione rivolta al browser relativa alla versione del linguaggio
usato per scrivere la pagina.
La dichiarazione DOCTYPEfa riferimento ad un Document Type Definition (DTD)che specifica le regole del
linguaggio, affinch i browser possano rappresentare correttamente la pagina. Per gli esempi qui proposti la dichiarazione
pu essere omessa, oppure si pu adottare la seguente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
Per una comprensione del significato dei vari campi (peraltro inutile perch la linea non consente modifiche) consultare la
tabella: W3C
Dopo la dichiarazione DOCTYPEseguono i tag <html> ... </html>, all'interno di questi viene riportata l'intestazione
<HEAD>...</HEAD>, comprendente il titolo del documento e le informazioni sull'autore e sul contenuto della pagina. e il
corpo del documento delimitato dai tag <BODY>...</BODY>. All'interno di quest'ultimo risiederanno le informazioni che
dovranno essere rappresentate. Un documento di base quindi:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<P>
</BODY>
</HTML>

La regola di rispettare una corretta indentazione e l'aggiunta di commenti esaustivi facilitano la manutenzione dei documenti
stessi.
La dichiarazione DOCTYPEdenota il fatto che l'HTML si evolve, e nella sua trasformazione molti attributi e tag sono stati
dichiarati deprecated, intendendo che si presume che essi saranno aboliti in una versione finale dell'HTML.

L'indirizzo di una pagina web

indirizzo: Un URL (acronimo di Uniform Resource Locator) il metodo usato nei file HTML per indicare la posizione di
una risorsa a cui si vuole accedere.
Spesso questa risorsa il nome di un file ottenibile comunicando con un server mediante un protocollo, cio un insieme di
convenzioni che permettono di capirsi durante un colloquio. Un URL ha la seguenti parti:
protocollo://server.dominio[:porta]/path/nomefile[#sezione]

dove Protocollo vale spesso httpper indicare che nomefileva prelevato da server.dominio.
Altri protocolli sono ftp, news, mailtooppure telnet.
Il numero della porta va specificato solo se diverso da quello che per default gestisce il protocollo indicato.
Se il documento HTML, il suo nome potrebbe essere seguito dal carattere # e dal nome di una sezione all'interno del file
richiesto.
Negli URL obbligatorio separare le varie componenti con il carattere "/", indipendentemente da quello che si fa nel
proprio sistema operativo.
Se un URL termina con "/" significa che si sta specificando una directory. bene considerare l'URL sempre case sensitive,
anche se il sistema operativo che si sta usando non fa differenza tra maiuscole e minuscole nei nomi dei file. Quindi,
bisogna sempre scrivere i nomi con le lettere maiuscole e minuscole in esatta corrispondenza a quanto memorizzato sul
server.
Nella maggior parte dei sistemi operativi esiste il concetto di directory corrente; lo stesso avviene per gli URL che possono
essere assoluti o relativi all'URL corrente, cio la pagina che mostra il browser al momento.
Un URL assoluto contiene sempre tutte le informazioni necessarie alla sua localizzazione: protocollo, server, path assoluto e
nome del documento. In un URL relativo invece si specifica solo un path relativo per individuare il documento, partendo
dal path del documento corrente.
I Commenti sono delimitati da <!-- e -->. Possono apparire in qualsiasi punto, all'esterno dei tag.
L'HTML trasforma in spazio le tabulazioni, i vai a capo e pi spazi consecutivi.
I nomi dei tag e degli attributi sono case insensitive, quindi possono essere scritti indifferentemente in maiuscolo o in
minuscolo. Il valore degli attributi invece non sempre case insensitive.

Caratteri speciali
http://www.giordanicaserta.it/frapec/vba/notaHtml.html

2/6

27/9/2015

html
Consulta la tabella di codifica dei caratteri

speciali

I caratteri "<" e">" non possono essere usati in un file HTML, perch sono riservati a individuare i tag del linguaggio. Al
loro posto di usano "&lt;" e "&gt;" che sono le abbreviazioni di "less than" e "greater than". Per questo motivo, anche "&"
un carattere speciale: serve a introdurre i caratteri riservati.
Per scrivere "&" nel proprio documento HTML, necessario digitare la sequenza "&amp;" (abbreviazione di ampersand).
La Tabella mostra i nomi di altri caratteri riservati. Questi nomi sono case sensitive.
Per forzare pi spazi consecutivi si usa la sequenza &nbsp; (non breakeble space).
l'apice, codificato con &quot; serve quando bisogna inserire delle virgolette dentro il valore di un attributo, che gi
delimitato da virgolette. ad esempio:

value="ITI &quot;F. Giordani&quot"

I colori
Black Green
Silver Lime
Gray Olive
White Yellow
Maroon Navy Red
Blue
Purple
Teal
Fuchsia
Aqua
Consulta la tabella dei colori.
Alcuni tag permettono di specificare un colore come attributo.
In HTML i colori si possono esprimere in due modi:

usando dei nomi mnemonici standard, alcuni dei quali sono Black, Green, Silver, Lime, Gray, Olive,
White, Yellow, Maroon, Navy Red, Blue, Purple, Teal, Fuchsia e Aqua;
scrivendo la stringa "#RRGGBB", dove RR, GG e BB sono tre numeri esadecimali da 0 a FF che
indicano rispettivamente le componenti di rosso, verde e blu che si vogliono dare al colore.

Struttura di una pagina Web

La pagina Web viene scritta usando il linguaggio HTML (HyperText Markup Language), che consiste in una descrizione
dell'aspetto che si vuole dare alla pagina. Il linguaggio Html non un linguaggio di programmazione.
Il codice HTML pu essere scritto tramite il Blocco Note di Windows oppure tramite un editor specifico.
Gli elementi di HTML sono chiamati TAG, o marcatori, e sono racchiusi tra i simboli minore di (<) e maggiore di (>).
Normalmente indifferente scrivere i tag in maiuscolo o in minuscolo. Quasi tutti i tag hanno un corrispondente tag di
chiusura, per indicare il punto in cui deve terminare l'applicazione di una caratteristica del testo. Il tag di chiusura ha lo stesso
nome del tag di apertura con l'aggiunta del carattere slash:
Esempio:
<body>
...
</body>
Un tag pu specificare anche degli attributi (o propriet).
Esempio:
<font size="2">

font il tag,
size una propriet del tag font,
2 il valore da assegnare alla propriet size
Gli attributi sono contenuti solo nel tag di apertura. Il valore all'attributo viene assegnato specificandolo tra le virgolette
dopo il segno di =.
La struttura di un documento HTML composta da due sezioni: Intestazione e area del documento:

<html>
<head>
informazioni varie (titolo del documento, autore,
argomenti trattati, stili, ecc..)
</head>
<body>
In questa sezione viene inserito tutto quello
che
deve apparire nell'area principale della finestra
del browser.
</body>
http://www.giordanicaserta.it/frapec/vba/notaHtml.html

3/6

27/9/2015

html

</html>

Commenti
un commento inizia con la sequenza di caratteri

<!-ed terminato con la sequenza:

-->
I commenti servono all'autore della pagina per inserire dei promemoria che non devono essere mostrati nel browser

il documento
Il tag <body> descrive il documento, cio il contenuto della pagina web.
attributi del tag body:

background="indirizzo": specifica un'immagine di sfondo della pagina

bgcolor="RGB": specifica il colore di sfondo della pagina,
text="RGB": specifica il colore del testo.
link="RGB": specifica il colore dei link non visitati
alink="RGB": (accessed link) specifica il colore che il link assume tra il clic e l'apertura del link
vlink="RGB": (visited link) specifica il colore dei link visitati.
L'uso di questi attributi stato dichiarato deprecato, cio si suggerisce di ricorrere ai fogli di stile e di non usare gli attributi.

intestazione del documento

il tag <head>viene collocato nella parte iniziale del codice html del documento
contiene la descrizione del documento, quale ad esempio, l'autore, i riferimenti agli script e ai fogli di stili esterni, ecc.
il contenuto della sezione head non viene mostrato dal browser

Attributi del carattere

grassetto
Il tag <b>(Bold) applica il <b>grassetto</b>al testo compreso tra i tag b.
applicare il corsivo
Il testo da mostrare in corsivo viene racchiuso tra i tag <i> (italic)
il seguente esempio mostra un testo in <i>corsivo</i>
Il browser mostra un testo in corsivo
ingrandire il carattere
il tag <big>aumenta l'altezza del font.
il testo compreso tra i tag <big>viene mostrato ingrandito </big>
Il tag bigapplica la dimensione del font immediatamente superiore a quella in uso. I tag bigpossono essere nidificati.
ridurre l'altezza del testo
Esempio:
Il testo racchiuso tra i tag small <small> viene mostrato con un'altezza minore </small>
il browser mostra:
Il testo racchiuso tra i tag small viene mostrato con un'altezza minore
Tipo del carattere Il tag <font>permette di cambiare il tipo del carattere ad esempio il tag

<font face="Courier New">

mostra la parte di testo che segue, fino alla chiusura del tag, con il carattere Courier New
Altri attributi del tag font: sizee color

Titoli
Per assegnare uno dei titoli predefiniti ad un paragrafo si usa il tag <hn> ... </hn>, dove n un
numero compreso tra 1 e 6.
Ci sono 6 stili per i titoli: da h1 ad h6.
L'ordine della numerazione si riferisce alla gerarchia degli argomenti. Ad esempio si sceglie il titolo H1
per il titolo del capitolo, si sceglie il titolo H2 per i titoli dei paragrafi contenuti nel capitolo, e cos via.

stile H1
stile H2
...
stile H6

Esercizio
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Lezioni di HTML</title>
</head>
<body bgcolor="#80A055">
<h6>introduzione al linguaggio HTML</h6>
<h1>Pagina Web di prova</h1>
<h6>Provare i tag</h6>

http://www.giordanicaserta.it/frapec/vba/notaHtml.html

4/6

27/9/2015

html
<p>
i tag <p> ... </p> delimitano un <i>paragrafo</i>, ovvero una sezione
compresa tra due caratteri <i>vai a capo</i>
</p>
<p>
i tag <b> ... </b> delimitano una <b>parte di testo che viene mostrata in grassetto.</b>
La b del tag l'iniziale della parola bold, che significa grassetto.
</p>;
i tag <i> ... </i> delimitano una <i>parte di testo che viene mostrata in corsivo.</i>
La i del tag l'iniziale della parola italic, che significa corsivo.
</p>
<p>
i tag <big> ... </big> delimitano una <big>parte di testo che viene
mostrata in una dimensione ingrandita.</big> I tag possono essere nidificati.
</p>
<p>
i tag <small> ... </small> delimitano una <small>parte di testo che viene
mostrata in una dimensione ridotta.</small> I tag possono essere nidificati.
</p>
</body>
</html>

Problemi:
Modificare il colore di sfondo usando altre combinazioni di colori RGB, oppure usare i nomi mnemonici (ad esempio
"gray")
Creare un'immagine (gif o jpg) di dimensione 80x80 pixel (ad esempio un quadrato) e salvarla nella stessa cartella della
pagina web. Usarla poi come immagine di sfondo.
Inserire un tag font per modificare il colore di una parte del testo.

CDEFG

Utilizzare i tag big nidificati per ottenere un effetto del tipo: A B

Musica, Video, ...

Il tag <embed> inserisce un oggetto.
ad esempio inserendo il tag:

<embed src="musica.mid" autostart="true" hidden="false" loop="false">

Quando la pagina viene aperta inizia un brano audio e compare una barra che permette di fermare la riproduzione del
brano.

il tag img
Inserimento di immagini nella pagina Web.
sintassi:

<img src="indirizzo" alt="messaggio" title="descrizione">

mostra un'immagine.
Il tag imgnon possiede il tag di chiusura.
Attributi del tag img:

src: l'indirizzo del file,

alt: un testo alternativo da mostrare nel caso che l'immagine non venga trovata,
title: un suggerimento che compare accanto al puntatore del mouse quando questo si trova sopra
l'immagine.

Attributi di paragrafo
inserire una linea
Il tag: <hr>(Horizontal Rule) inserisce una linea orizzontale, il cui scopo potrebbe essere quello di evidenziare una
separazione tra sezioni del documento.
Il tag hrnon possiede il tag di chiusura.
Attributi del tag hr sono:

Align=
"CENTER"(default) la linea appare al centro
"LEFT"la linea si appoggia al margine sinistro della pagina
"RIGHT"la linea si appoggia al margine destro della pagina
width(larghezza in %)
size(spessore in punti)
color.
Allineamento a centro
Il tag <center> ... </center>
mostra il testo al centro della riga successiva.

<center>testo centrato</center>
http://www.giordanicaserta.it/frapec/vba/notaHtml.html

5/6

27/9/2015

html
alcuni tag riconoscono l'attributo ALIGNche specifica l'allineamento. Il tag <CENTER>consente di allineare a centro un
blocco di contenuto, evitando di specificare l'allineamento di ciascun elemento.
Il valore dell'attributo ALIGNdi un tag ha la priorit sull'allineamento specificato con il tag <CENTER>.
Passare alla riga successiva
il tag <br>(line break) Inserisce un vai a capo, senza aggiungere spazi.
Il tag BR Non richiede il tag di chiusura.
Incorniciare l'immagine:

Dopo il tag IMGc' il testo di questo paragrafo. Solo la prima linea del paragrafo si trova allineata con l'immagine. Se si
inserisce un tag BR l'immagine e il testo occupano righe separate. Ci sono situazioni in cui si desidera che il testo si trovi
accanto all'immagine.
Ad esempio, in questo paragrafo l'immagine allineata a sinistra.
Le linee del testo vengono scritte sul lato destro dell'immagine e continuano al di sotto dell'immagine. Per ottenere
questo effetto, stato assegnato il valore LEFTalla propriet ALIGNdel tag IMG.
Questa una linea separata dal paragrafo precedente.
In questo paragrafo l'immagine allineata a destra (con l'attributo ALIGN="RIGHT"), segue il testo
Questo testo inizia su una nuova linea.

SPAN
Il tag SPANdelimita un testo a cui si vogliono modificare le propriet attualmente applicate al testo.
Esempio:
Questo un normale paragrafo. Sembra scritto bene, ma potrebbe essere migliorato se fosse in grassetto, corsivo, blu.
Esempio:
<P>Questo un normale paragrafo. Sembra scritto bene, ma potrebbe essere migliorato se fosse <SPAN
STYLE="color:blue; font-weight:bold; font-style:italic"> in grassetto, corsivo, blu </SPAN></p>

Problemi
Riferendosi al testo di esempio del problema precedente:
Allineare al centro tutti i titoli della pagina (tag h1 e h6)
Dopo l'ultimo titolo inserire una linea che occupi la terza parte della finestra, abbia uno spessore di 3 pixel e sia di colore
rosso.
Inserire un'immagine e fare in modo che il testo compaia su uno dei lati, destro o sinistro, dell'immagine.

http://www.giordanicaserta.it/frapec/vba/notaHtml.html

6/6