HTML e creazione di pagine Web
Giuseppe MORELLI
Agenda
• Il World Wide Web Architettura
• Principi di HTML
• Il linguaggio e le istruzioni principali
• I collegamenti
• Script
• Fogli di stile CSS (Cascade Style Sheet)
• HTML dinamico
• Introduzione a Frontpage di Microsoft
WWW: Architettura
• Si tratta di un sistema di strutturazione ed
organizzazione di informazioni in rete.
• Q u e s t o t i p o d i o r g a n i z z a z i o n e m i ra a d
accelerare lo scambio di informazioni attraverso
protocolli standardizzati, semplificando le
attività di fruizione dell’informazione.
• L’architettura WWW è di tipo Client/Server
ovvero siamo in presenza di un sistema in cui
un calcolatore, il Server, offre un servizio
mentre un altro, il Client, vi accede secondo una
serie di regole.
.. In pratica
• Il programma Server è invece quel programma
preposto alla trasmissione dei dati in rete, cioè
distribuisce i documenti richiesti dai vari utenti
(tramite client).
• Fisicamente deve essere installato sulla
macchina che ospita i documenti (es. Microsoft
Internet Information Server per sistemi
Windows, Apache per sistemi Unix).
Pagine Web
• Assieme al WWW è nato il linguaggio HTML.
Questo permette la scrittura di documenti da
pubblicare sui server per il successivo
reperimento e la relativa fruizione da parte dei
client.
• Utilizzando l’HTML puro un documento (una
pagina web) “incapsula” al suo interno sia i
contenuti informativi del documento sia la
codifica dell’interfaccia con cui questi verranno
presentati (pagina web statica).
Linguaggio HTML: definizioni
• L’HTML é il linguaggio del web.
• Esistono molti editor che permettono di
generare pagine web senza conoscere HTML. E’
tuttavia utile conoscere la struttura dei
documenti scritti in tale linguaggio poiché:
– Evoluzione del linguaggio piú rapida di quella degli
editor
– per ottenere risultati specifici talvolta é necessario
apportare delle modifiche al codice generato dagli
editor
– Anche glil editor migliori non sono privi di errore
• HTML é un linguaggio a tag
• TAG: un tag é una istruzione fatta da una serie
di caratteri maiuscoli o minuscoli, senza spazi,
racchiusi fra I simboli < e >.
• Esistono due tipi di TAG:
– comando di markup:sono quelli che possono essere
usati singolarmente; (<tag>)
– tag contenitori: sono quelli utilizzati incoppia
ovvero:esiste un tag iniziale ed un tag finale che si
differenziano slo nel fatto che nel tag finale il simbolo
< é seguito dal simbolo /;
il comando esplicitato ha effetto sul testo contenuto
fra il tag iniziale e il tag finale(<tag1> …… </
tag1>)
• Attributo:é un elemento che si trova all’interno
di un tag per specificare informazioni al
comando HTML in questione.
• Per specificare un attributo di un tag é
necessario inserire nel tag (tag iniziale) il nome
dell’attributo, il simbolo =, il valore
dell’attributo.
(<tag attributo=“valore”> ……)
• Un tag puó includere diversi attributi alcuni dei
quali possono essere obbligatori altri facoltativi
• Caratteri e separatori:In una pagina web,
tutto ció che non é riconosciuto come tag,
costituisce testo normale e viene visualizzato
come tale.
• I normali caratteri usati come separatori (spazi,
tabulazioni, ritorno a capo)all’interno di codice
HTML sono interpretati come singoli spazi,
indipendentemente dal numero di ripetizione
degli stessi.
• Se fosse necessario inserire caratteri separatori
aggiuntivi e/o altri caratteri speciali (es. <, >
é…) é possibile utilizzare il carattere speciale &
(spazio=&nbsp; - < = &lt; - > = &gt; )
• Se si commette qualche errore nell’inserimento
di un comando HTML, il browser non fará alcuna
diagnosi e non visualizzerá alcun messaggio di
errore. Il comando in questione verrá
semplicemente ignorato.
• Sebbene non sia necessario che I comandi
HTML rispettino un allineamento particolare, per
maggiore leggibilitá e per rendere piú semplice
la manutenzione del codice scritto é bene
“indentare” il codice.
Le due parti di un file HTML
• Tutti le istruzioni di un file HTML sono all’interno
del tag contenitore <HTML>
• Il contenuto del tag HTML é suddiviso in due
parti:
– Intestazione che si trova in un tag contenitore
<HEAD>; questa sezione contiene di solito pochi Tag
che servono per l’identificazione della pagina web
(titolo, meta..)
– Corpo contenuto nel tag contenitore <BODY>;
questa sezione contiene tutte le istruzioni per la
visualizzazione degli elementi nelle pagine (testo,
immagini…..)
I TAG in dettaglio
• <HEAD> .. </HEAD>: di solito al suo interno si
trovano pochi comandi tra cui:
– <TITLE> Titolo </TITLE>: Questo é il titolo che
appare nella barra del titolo del browser. Nessuna
altra parte dell’intestazione verrá visualizzata sullo
schermo
– É possibile trovare anche dei comandi <META>. Si
tratta di comandi particolari che sono utilizzati dai
robot di ricerca per la catalogazione delle pagine nei
morori di ricerca:
<META Name=“Nome” CONTENT= “valore”>
…
• <BODY>…</BODY>:il tag body accetta diversi
attributi alcuni dei quali sono particolarmente
utili:
– BACKGROUND = Nome di file : permette di
specificare il file immagine che si vuole utilizzare
come sfondo della pagina web che si sta descrivendo
(opzionale)
– BGCOLOR=colore: consente di assegnare allo
sfondo della pagina un colore unico (opzionale)
– TEXT=colore: consente di assegnare un colore al
testo dell’intera pagina web (opzionale)
A proposito di colori..
• HTML utilizza due metodi per fare riferimento ai
colori
– Tramite il loro nome: Esiste un elenco di 216 colori
conosciuti dai browser; tra questi esistono
sicuramente quelli pú comuni quali white, yellow,
black ….
– Tramite un codice a 3 numeri: Il codice RGB (red,
green, blue) é un codice esadecimale formato da tre
numeri da 00 a FF che indicano rispettivamente la
quantitá di rosso , verde e blue che il colore
desiderato possiede.
Comandi relativi a paragrafi
• Abbiamo giá detto che i separatori (cosí anche il
ritorno a capo) vengono interpretati come
singolo spazio dal browser.
– Esistono dei comandi di formattazione che permettono
di produrre delle interruzioni nella continuitá del testo.
– <BR>: equivale esattamente ad un ritorno a capo
– <P>: accettato sia come comando di markup che
come tag contenitore, sul paragrafo cui si riferisce
agisce come il tag precedente ma aggiunge una
interlinea.
• Attributo interessante del tag <P> é ALIGN = left/center/
right che permette di specificare l’allineamento del paragrafo
cui si riferisce rispetto alla pagina.
• Se non specificato altrimenti il paragrafo risulterá allineato a
sinistra (left)
…
– <DIV> :Questo tag contenitore é utilizzato per
raggruppare vari elementi della pagina web ai quali si
vuole applicare una unica formattazione
• Anche questo tag accetta l’attributo ALIGN con la stessa
sintassi vista per il tag <P>
– <HR> : permette di separare due paragrafi
attraverso una linea orizzontale con ombra. Accetta
diversi attribuit:
• WIDTH = larghezza attraverso questo attributo si specifica
la larghezza in pixel o in % (rispetto alla finestra) della linea
• SIZE = numero specifica lo spessore della linea
• NOSHADE elimina l’ombreggaitura
Comandi per la formattazione del testo
• Funzioni di formattazione piú comuni:
Grassetto, Corsivo, Sottolineato.
• Questo tipo di formatatzione puó essere
applicata a qualunque testo e di qualsiasi
lunghezza (dal singolo carattere a diversi
paragrafi).
Basta racchiudere il testo da modificare fra
inizio e fine dell’appropriato tag contenitore:
– Grassetto: <STRONG>…</STRONG> o <B>…</B>
– Corsivo: <EM>…</EM> o <I>…</I>
– Sottolineato: <U>…</U>
• <Hn>: si tratta di un tag contenitore che
permette di ottenere una visualizzazione a 6
livelli di titolo (n=1..6) in ordine di importanza
descrescente (titoli, sottotitoli).
Ogni livello é preceduto e seguito da una
interlinea.
• <PRE>: il tag contenitore PRE permette di
inserire nella pagina da visualizzare del testo
preformattato. Ovvero il browser utilizzerá
caratteri monospazio per la rappresentazione
del testo specificato e iseparastori contenuti nel
testo verranno mantenuti tali.
…
• In HTML la dimensione di un carattere si
esprime in punti 1..7 (7=Massima; default = 3)
• Tag per la modifica della dimensione dei
caratteri
– <BIG>: tag contenitore che permette di aumentare
la dimensione dei caratteri di un punto
– <SMALL>: tag contenitore che permette di Diminuire
la dimensione dei caratteri di un punto
– <FONT> : Il tag contenitore permette di specificare
piú attributi per il testo contenuto fra il suo inizio e la
fine:
• SIZE = num : dimensione dei caratteri
• COLOR = colore: colore del testo
Inserimento di commenti
• All’interno del Codice HTML è Possibile inserire
dei commenti ovvero del testo che non viene
visualizzato/interpretato dal browser.
• Il tag da utilizzate è :
– <!--> e <-->
HTML ed elenchi
• Per visualizzare una serie di elementi o elenchi
di oggetti esistono delle istruzioni particolari.
Ovvero siamo in presenza di tre tipi di
formattazione in grado di far risaltare una serie
di oggetti correlati fra i paragrafi di un testo
– Elenchi Puntati: vengono utilizzati per visualizzare
una serie di elementi in cui non è importatne l’ordine;
I rientri sono segnati da segni tipografici (punti
elenco); il tag contenitore per un elenco puntato è
<UL>…</UL> (unordered list). Ogni elemento
dell’elenco deve essere preceduto dal tag <LI>.
– Il tag <UL> accetta l’attributo TYPE per specificare il
punto elenco preferito
– Elenco Numerato: questo tipo di elenco è utilizzato
per numerare o specificare l’ordine esatto di una serie
di oggetti e/o operazioni. In questo caso i rientri
dell’elenco vengono segnati da numeri posti in ordine
crescente. Il tag contenitore per un elenco numerato
è <OL>…</OL> (ordered list). Anche in questo caso
ogni elemento deve essere preceduto dal tag <LI>.
– Gli attributi TYPE e START del tag UL possono essere
utilizzati per impostare rispettivamente il tipo di
numerazione da utilizzare (numeri arabi, romani …) e
l’inizio del conteggio.
– Elenco di definizioni: questo tipo di elenco è
utilizzato quando si vogliono visualizzare degli
elementi a coppie (Es: termine, definizione;
capitolo,contenuti …). Inquesto caso il tag
contenitore è <DL>…</DL>(definition list). Ogni
termine è preceduto dal tag <DT>, ogni definizione
dal tag <DD>
– Elenchi nidificati: E’ possibile unire stili di elenchi
diversi per ottenere elenchi misti es:
1. OL
• Ul1
• Ul1
2. OL
• Ul2
• Ul2
Immagini e HTML
• Nelle pagine HTML si possono inserire
attualmente solo due tipi di immagini .GIF
e .JPG o .JPEG.
• I due formati sono caratterizzati dal fatto che
offrono un alto livello di compressione a scapito
della qualità.
– E’ conveniente utilizzare i file .GIF (256 colori) per la
memorizzazione di disegni e/o diagrammi creati con il
pc.
– Per le foto, al fine di garantire la visualizzazione del
massimo livello di dettaglio, e’ conveniente utilizzare il
formato .JPG
Inserimento di immagini
• <IMG>: è il tag da utilizzare per inserire
immagini in una pagina HTML.
– E’ necessario specificare l’attributo SRC = nomefile.
– Altri attributi sono accettati (ma non sono
obbligatori) dal tag IMG:
• ALIGN=valore che consente di disporre il testo intorno
all’immagine
• ALT=valore: contiene la scritta che viene visualizzata al posto
di una immagine fino a che questa non è caricata del tutto o
quando ci si posiziona con il mouse sull’immagine stessa.
• WIDTH & HEIGHT = valore: consentono di modificare le
dimensioni di visualizzazione della immagine specificata
nell’attributo SRC
– Immagini Trasparenti: Molte volte se lo sfondo
utilizzato per la pagina web non é uniforme, quando
nella pagina viene inserita una immagine viene a
mancare la continuitá di questo sofndo che é
interrotto dallo sfondo dell’immagine inserita.
Soluzione a questo problema é utilizzare le immagini
in formato GIF. Tale formato infatti consente, in fase
di creazionn dell’immagine, di rendere un colore
trasparente. Ovvero quando si sovrappone ad un’altra
immagine, questo colore viene ignorato e viene invece
mostrato il colore di sfondo della immagine di fondo.
Utilizzo di immagini negli elenchi
• Per rendere piú attraenti gli elenchi puntati é
possibile utilizzare un trucco che permette di
sostituire I segni tipografici (bullet) con delle
immagini.
• In questo caso basta utilizzare anziché iltag
proprio degli elenchi puntati <UL>…</UL> il
tag degli elenchi di definizioni <DL>…</DL> e
come tag di livello solo il <DD> ed inserire I
comandi IMG a questo livello
• Nota Path assoluti e relativi
I collegamenti
• Fino ad ora ci siamo occupati di tage e comandi
relativi ad una singola pagina. Ma la forza del
World Wide Web (grande ragnatela mondiale) é
che all’interno di una pagina si possono trovare,
in qualunque punto, collegamenti ad altre
pagine, ad altri siti.
• Questi collegamenti, indicati con testo e/o
immagini, fanno riferimento ad indirizzi nella
rete (Uniform Resource Locator)
• NOTA: Indirizzi IP e DNS
• <A> é il tag contenitore che consente di
inserire un collegamento ad una risors ain una
pagina web. Esso accetta come attributi:
– HREF=nome_risorsa : attraverso questo attributo si
specifica URL del file collegato.
• Es. <A HREF=“nomefile.htm”>Vai al file</A>
visualizzerá nella pagina web la scritta Vai al file. L’utente
inoltre potrá cliccare su tale scritta e il browser aprirá il file
nomefile.htm
• Esistono tre tipi di collegamento; il tag da
utilizzare é sempre lo stesso, essi si
differenziano per il modo di specificare la risorsa
da collegare.
• Collegamenti esterni:sono quei collegamenti
che fanno riferimento a pagine contenute su alri
siti o addirittura su altri server. In questo caso il
nome della risorsa é rappresentato dal suo URL
completo di protocollo.
– Se ad esempio volessi inserire in una pagina un
collegamento al sito del giornale la repubblica dovrei
scrivere:
– <A HREF=“http:\\www.larepubblica.it”>Vai</a>
• Pagina di default……
• Collegamenti interni: sono i collegamenti che
fanno riferimento a pagine contenute nello
stesso server. In questo caso il nome della
risorsa che viene specificato nell’attributo HREF
del tag <A> é il path del file HTML della pagina
da collegare.
– <A HREF=“nomefile.htm”>Collegamento</a>
• ATTENZIONE AI PATH RELATIVI E ASSOLUTI
• Collegamenti all’interno dello stesso file:
quando siamo in presenza di una pagina molto
lunga é possibile suddividerla in sezioni
ponendo le cosiddette ancore (segnalibri,
bookmarks).
– <A NAME=“nome_sezione”>
• Tali ancore sono indirizzabili direttamente
attraverso collegamenti ottenuti sempre con il
tag <A>ma con l’attributo HREF impostato
come nel seguente esempio:
• <A HREF=“#nome_sezione”>Vai a nome_sezione</a>
Si premette cioé al nome dell’ancora definita il
simbolo #
• É possibile effettuare collegamenti anche da
immagini es:
• <A HREF=“animalideldeserto.htm”>
<IMG SRC=“cammello.gif”>
</A>
In questo caso cliccando sull’immagine
raffigurante il cammello si accede alla pagina
indicata nell’attributo HREF del tag A.
• Quando si effettua un collegamento con una
immagine essa viene racchiusa in una cornice di
colore blue. Per eliminare tale cornice basta
impostare l’attributo di IMG BORDER = 0
• Quando si ha la necessitá di inserire nella
pagina web un indirizzo email ed
“automatizzare” l’invio della posta elettronica
ll’indirizzo desideratii si usa un collegamento
simile al seguente:
– <A HREF=“mailto:Indirizzo di posta”>
Contattaci
</A>
Le tabelle
• Una tabella in HTML é definita attraverso il tag
contenitore <TABLE>…</TABLE>.
• All’internop del tag table si devono specificare
tutte le righe e lo si fa attraveerso il tag <TR>…
</TR>.
• Per ogni riga della tabella si devono specificare
poi le celle (una per ogni colonna) e lo si fa
attraverso il tag contenitore <TD>…</TD>
• Le celle (intersezioni fra righe e colonne di una
tabella) possono contenere elementi di
qualunque tipo: testo immagni e perfino altre
tabelle
– Es:
<TABLE BORDER= 1>
<TR>
<TD>
<TD>
</TR>
<TR>
<TD>
<TD>
</TR>
Mattina</TD>
Pomeriggio </TD>
9.00 – 13.00 </TD>
14.00 – 18.00</TD>
<TABLE>
– Genera una tabella di una riga e di due colonne
che sarebbe del tutto invisibile (testo a parte) se
non si specifcasse l’attributo di TABLE BORDER =
size
• <CAPTION>…<CAPTION>: permette di
specificare un titolo per la tabella; esso accetta
l’attributo ALIGN che puó assumere I valori
– TOP: permette di visualizzare titolo della tabella sopra
la stessa
– BOTTOM: permette di visualizzare titolo al di sotto
della tabella stessa
• <TH>…</TH>:questo tag si puó utilizzare al
posto del tag <TD> quando si vogliono
evidenziare le intestazioni delle colonne
Attributi di TABLE
• BORDER: permette di specificare lo spessore
del bordo della tabella
• WIDTH: permette di impostare la larghezza
della tabella (in pixel o in %)
• CELLPADDING: permette di impostare lo
spazio fra il bordo ed il contenuto di una cella
• CELLSPACING: permette di impostare lo
spazio fra le celle
• BGCOLOR: permette di impostare il colore di
sfondo della intera tabella
Attributi di TR/TD/TH
• ALIGN: per impostare l’allineamento
orizzontale degli elementi di una riga (LEFT,
RIGHT, CENTER)
• VALIGN: per impostare l’allineamento
verticaale degli elementi di una riga (TOP,
MIDDLE, BOTTOM)
• BGCOLOR: per impostare il colore di sfondo di
una riga
• HEIGHT: permette di impostare l’altezza di
una riga
• BORDERCOLOR: per impostare il colore del
bordo delle celle appartenti ad una riga
Attributi di TD/TH
• COLSPAN: permette di fare l’unione di due celle vicine
(la cella e quella alla sua destra)
• ROWSPAN: permette di fare l’unione di due celle (la
cella e quella sotto)
<TABLE VALIGN=TOP BORDER= 2>
<TR>
<TD>
Mattina
</TD>
<TD>
Pomeriggio
</TD>
</TR>
<TR>
<TD COLSPAN=2>
9.00 – 13.00
14.00 – 18.00
</TD>
</TR>
<TABLE>
ROWSPAN = 2
Mappe Immagini
• Fare una mappa immagine significa suddividere
l’immagine in aree facilmente riconoscibili e
creare per ogni area un collegamento interno o
esterno.
• Prima cosa da fare é stabilire le coordinate
espresse in pixel delle aree sensibili.
• Tali coordinate vengono poi inserite nei tag
come mostato nella prossima slide.
• Si possono definire aree sensibili di tre forme
geometriche:
cerchio, rettangolo poligono
• Una mappa si definisce con il tag <MAP>…</
MAP> specificando l’attributo obbligatorio
NAME
• All’interno questo tag conterrá tanti tag
<AREA> quante sono le aree sensibili definite.
Ciascun tag <AREA> dovrá avere I seguenti
attributi impostati:
– SHAPE: indica la forma dell’area (rect,circle,polygon)
– COORDS: coordinate che individuano l’area tutte
separate da virgola (rect:estremitá diag. Maggiore;
circle:coordinate centroe+ raggio; polygon:coordinate
dei punti in ordine)
• <MAP NAME=“mappa1”>
<AREA shape=“rect” coords=1,1,10,10
href=“link1.htm”>
<AREA shape=“polygon”
coords=1,1,10,10,15,15,1,1
…..
</MAP>
Un immagine userá la mappa attraverso l’attributo
USEMAP di IMG.
<IMG SRC=“name.gif” USEMAP=“#mappa1”>
Moduli
• Vengono utilizzati dai proprietari dei siti web per
il reperimento di informazioni da parte
dell’utente.
– L’utente fornisce delle informazioni attraverso I
controlli di testo, le caselle combinate, pulsanti …
– Queste informazioni vengono inviate al server per
l’elaborazione e/o archiviazione.
– Assieme alle informazioni, il server riceve delle
indicazioni sul modo di trattare le informazioni
ricevute.
• Un modulo é specificato attraverso il TAG
contenitore <FORM>…</FORM>.
Accetta i seguenti attributi:
– NAME: questo attributo permette di assegnare un
nome al modulo.
– METHOD: puó assumere i valori “POST” e “GET”
– ACTION: specifica il programma che il server deve
lanciare quando gli vengono inviate le informazioni
raccolte attraverso questo modulo.
• Un modulo oltre ai normali Tag html contiene I
tag che permetto raccogliere informazioni
(controlli) che vengono specificati attraverso il
tag <INPUT>.
• Il tag <INPUT> accetta i seguenti attributi:
– NAME: permette di assegnare un nome al controllo
(importante per uso con ASP)
– TYPE: a seconda di questo valore nella pagina HTML
verrá visualizzato un controllo diverso. I valori che
puó assumere sono:
• Button, reset, Submit
• text, password
file
radio
checkbox
– SIZE: lunghezza del controllo
– VALUE:valore assegnato (testo contenuto)
Frame
• I frame permettono di visualizzare sullo schermo diverse
finestre contemporaneamente.
• Prima cosa da fare é quindi decidere il layouts della
pagina da visualizzare.
• Per poter impostare I frame vengono utilizzati due Tag
<FRAMESET> e <FRAME>
– <FRAMESET> </FRAMESET>: accetta come
attributi
• COLS =“dim1%,dim2%,dim3%…”
• ROWS =“dim1%,dim2%,dim3%…”
– <FRAME>: accetta come attributi:
• • • • NAME =: nome per identificare il frame
SRC= Pagina da visualizzare
NORESIZE per rendere il frame non ridimensionabile
SCROLLLING = NO (elimina le barre di scorrimento)
• In un sito che si basa su frame per ogni
collegamento si dovrebbe specificare il frame su
cui la nuova pagina va caricata.
• Questo si puó fare utilizzando l’attributo
TARGET del tag A.
• Il valore da attribuire a tale paramettro é il
nome del frame target appunto.
