CORSO DI TECNOLOGIE E APPLICAZIONI WEB

Università degli Studi di Modena e Reggio Emilia
Facoltà di Ingegneria – Reggio Emilia
CORSO DI
TECNOLOGIE E APPLICAZIONI WEB
HTML
Ing. Marco Mamei
Anno Accademico 2004-2005
M. Mamei - Tecnologie e Applicazioni Web
1
Cos’e’ HTML?
HTML = Hyper Text Markup Language
Hyper Text = testo (o più in generale documento)
iper-dimensionale, con più di una dimensione.
I testi tradizionali sono mono-dimensionali, isomorfi a una
retta. Si leggono in una direzione unica.
I testi iper-dimensionali permettono dimensioni multiple di
lettura. Si parla quindi di “Navigazione”.
Pezzi di
documento si collegano a altri pezzi o a altri documenti.
Nel Web, questo si traduce nel creare ragnatele (“Webs”)
di documenti anche su siti diversi, e collegati tra loro
secondo il collegamento logico e di interesse tra loro.
MarkUp Language:
documenti.
linguaggio
di
strutturazione
Documento = Contenuto + Informazioni Strutturali
Contenuto = l’informazione pura del testo
Struttura = ciò che serve per rendere efficacemente
intelleggibile l’informazione (anche visualizzazione)
Esempio: un libro contiene testi e figure, e anche indice,
sommario, titoli, etc
Markup: un modo per associare informazione strutturale
a un testo.
M. Mamei - Tecnologie e Applicazioni Web
2
Marking Up a Document
Anche scrivendo documenti Word, dovrebbe essere
chiara la distinzione tra contenuto (ciò che noi scriviamo
da tastiera) e struttura (che noi diamo attraverso comandi
opportuni per impaginare, mettere in grassetto le parole,
etc. etc.).
Closed representations:
Il documento è rappresentato in forma binaria e
“proprietaria”…non facile vedere come è rappresentato
internamente il documento, e come si riesce ad associare
ciò che si scrive e la struttura associata a ciò che si
scrive.
Tipica scelta di ambienti “What You See Is What You
Get”. Si nasconde all’utente la parte descrittiva della
struttura, per fare “visualizzare” direttamente il risultato
della composizione “contenuto+struttura”.
Open Representations:
Il documento è rappresentato in forma testuale (ASCII o
.txt), e le informazioni di struttura sono inserite tramite
sequenze standardizzate e note di caratteri speciali.
Diventa molto chiara la distinzione tra informazione (puto
testo) e struttura (descritta da sequenza di caratteri
speciali).
I caratteri speciali sono appunto i “Marks”.
Chiaramente, si richiedono programmi appositi per
passare dalla open representation alla versione
“rendered” (visualizzabile o stampabile) del documento.
M. Mamei - Tecnologie e Applicazioni Web
3
Examples of Markup Languages
Il Linguaggio Tex.
Word processor utile per documenti matematici o chimici,
che contengono formule particolari che difficilmente si
riescono a scrivere usando una normale tastiera.
Ciao, la prossima parola e\egrave in \bf
{grassetto}
e
poi
adesso
scrivo
una
sommatoria per i da 1 a N eccola:
$\sum{i,1,N}(i+2)$.
Un programma speciale (“compilatore Tex”) può quindi
leggere il documento e, riconoscendo le informazioni
strutturali, trasformarlo, p.e., in un PDF.
Il linguaggio SGML
Deriva
da
uno
sforzo
di
organizzazioni
di
standardizzazione (ISO e ANSI) per stanrdadizzare il
mark up di documenti elettronici. Tra il 1970 e il 1980.
SGML definisce come si definiscono i markup
(tipicamente racchiudendoli tra i segno < e >) e come si
associano significati ai markup (attraverso il cosiddetto
“Document Type Definition”). Specifici gruppi di interesse,
poi, possono definire i loro specifici TAG e l’associato
significato. Sono istanze specializzate di SGML.
Esempio: i chimici definiscono TAG per rappresentare
struttura di composti chimici e il significato di questi TAG
definisce che tipo di legame chimico il TAG rappresenta e
come questo si deve visualizzare.
M. Mamei - Tecnologie e Applicazioni Web
4
Il Linguaggio HTML
Nasce verso il 1989. Progettato dal Gruppo di Ricerca di
Tim Berners Lee, colui che ha progettato la prima
architettura del Web.
C’era bisogno di un linguaggio per rappresentare in
forma aperta (leggibile da tutti i calcolatori e scrivibile
senza far ricorso a programmi particolari) gli ipertesti, le
loro informazioni di visualizzazione, e le informazioni per
il collegamento di ipertesti tra loro, oltre che per la
inclusione di immagini in ipertesti.
SI fece riferimento allo standard SGML.
Si definì HTML come una istanza specifica di HTML:
fissando un certo numero di TAG
associando a questi TAG uno specifico comportamento
del browser, rispetto alla loro visualizzazione e alla
navigazione (i.e., click su un link per trasferirsi su un’altra
pagine).
Nel corso degli anni, si sono estese le funzionalità
iniziali di HTML con l’aggiunta di altri TAG con
particolari funzionalità (p.e., tabelle, frames,
Applets, etc..)
M. Mamei - Tecnologie e Applicazioni Web
5
Perché imparare l’HTML???
Diversi programmi permettono di editare un documento in
modalità WYSIWYG e poi salvarlo in formato HTML. Ad
esempio, Word e tutti i programmi di Office permettono di
salvare in HTML. Inoltre esistono programmi specifici
(Front-page, Dreamweaver) per creare pagine web.
Quindi perché imparare l’HTML? È anacronistico???
Premesso che per applicazioni veramente professionali è
importante saper usare sia programmi avanzati sia
l’HTML per eventuali ritocchi finali.
Per i nostri scopi ci sono due motivazioni principali per
imparare l’HTML.
- Velocità: per creare pagine web semplici e fare
piccole modifiche, è più veloce scrivere direttamente
l’HTML che non utilizzare programmi sofisticati
- Copia-e-Incolla: un modo molto veloce per fare
pagine web carine è copiarle! Si trova un sito web
che vada bene si salva (anche tramite browser) il file
HTML corrispondente. Quindi si edita l’HTML
cambiando titoli e quant’altro per ottenere l’effetto
desiderato…
M. Mamei - Tecnologie e Applicazioni Web
6
Struttura pagina HTML
<HTML>
<!-- questo e’ un commento -->
<!—il tag HTML specifica il lunguaggio con
cui e’ scritto il file, tipicamente HTML
generico, ma si puo’ specificare anche una
versione particolare di HTML -->
<HEAD>
<!-- il tag HEAD deve include specifiche ->
<TITLE>
The title of your document goes here.
</TITLE>
<!—TITLE significa che va sulla sbarra
della finestra windows -->
</HEAD>
<BODY>
Tutto cio’ che e’ compreso tra i tag di
body rappresenta il testo del documento.
</BODY>
</HTML>
M. Mamei - Tecnologie e Applicazioni Web
7
Il Tag Body
Il tag <BODY> stabilsce l’aspetto generale del documento.
Default (come esempio di prima):
• testo nero
• sfondo bianco
• link in blu
• link visitati in viola
Si possono specificare attributi specifici per il body tag:
Esempio:
<BODY
BGCOLOR="black"
TEXT="#30ff3d"
LINK="#f89400" ALINK="purple"
VLINK="#FF8DDD">
Colori specificati
• Con notazione RGB
• Con nomi simbolici
NOTA: per quasi tutti i tag HTML si possono specificare
attributi che caratterizzano le proprieta’ di (parti del)
documento e del testo
M. Mamei - Tecnologie e Applicazioni Web
8
Il testo HTML
Paragrafi (Intesi come il testo compreso tra due punti e a
capo).
<p> Testo del paragrafo.</p>
<p ALIGN="CENTER">Testo di un paragrafo
allineato al centro, i.e., giustificato, Gli
altri allineamenti sono center e left</p>
Ritorno di Linea:
tag <br>
Bold (grassetto):
il testo che segue <b>va in grassetto</b> fino a qui
Italic (corsivo):
il testo che segue <i>corsivo</i> fino a qui
Underline (grassetto):
il testo che segue <u>sottolineato</u> fino a qui
FONT
Specificano il tipo e il formato del carattere da usare. Molti
attributi:
• SIZE: <FONT SIZE="-2">piccolo</FONT> (cambia
rispetto alla dimensione corrente) oppure <FONT
SIZE="4"> (dimensione assoluta)
• FACE: tipo di carattere (se esistente sul sistema) <FONT
FACE="Coronet, Times New Roman”>Ecco il
font Coronet</FONT> in ordine il primo trovato nella
lista
• COLOR
M. Mamei - Tecnologie e Applicazioni Web
9
Titoli (Headings)
Servono per formattare il testo con i titoli dei capitoli e
sottocapitoli …I vari livello hanno il testo che cala col
crescere del livello
<h1> Titolo di primo livello </h1>
<h2> Titolo di secondo livello </h2>
….
<h6> Titolo di sesto livello </h6>
Si puo’ ottenere la stessa cosa usando FONT SIZE, ma
e’piu’ scomodo.
M. Mamei - Tecnologie e Applicazioni Web
10
Elenchi puntati e Numerati
Per dare rilevanza a liste/insiemi di concetti frasi.
Il tag <ul> include i punti di un elenco puntato. Il tag <li>
indica i vari punti.
Ecco dei punti importanti:
<ul>
<li>Primo punto
<li>Secondo punto</li>
</ul>
Che significano che….
Ecco dei punti importanti:
• Primo punto
• Secondo punto
Che significano che…
Con il tag <ol> invece di <ul> si ottengono elenchi numerati:
Ecco dei punti importanti:
1. Primo punto
2. Secondo punto
Che significano che…
Si possono anche innestare tra loro.
Linea orizzontale <hr>
Inserisce una linea orizzontale nel testo
(si puo’ specificare la lunghezza <HR WIDTH=”50%”>
M. Mamei - Tecnologie e Applicazioni Web
11
LINK (collegamenti ipertestuali)
Il tag <A> serve per la strutturazione ipertestuale dei
documenti:
• attributo HREF per indicare un collegamento a un altro
punto del documento oppure a un’altra pagina HTML,
oppure a un indirizzo di mail
• attributo NAME per dare un nome a un punto del
documento a cui ci si vuole collegare
One excellent Web directory is
<A
HREF="http://www.yahoo.com/">Yahoo.</A>
Yahoo links to all sorts of pages such as
the
<A
HREF=
"http://www.unimo.it/">
University of Modena home page</A>. Franco
attends the University of Modena; you can
email Franco
(<A
HREF="mailto:[email protected]">
[email protected] </A>).
When loaded in a Web browser, the above text will look like
this:
One excellent Web directory is Yahoo. Yahoo links to all
sorts of pages such as the University of
Modena home page. Franco attend the University of
Modena; you can email Franco
([email protected]).
M. Mamei - Tecnologie e Applicazioni Web
12
LINK (collegamenti ipertestuali)
• attributo NAME per dare un nome a un punto del
documento a cui ci si vuole collegare
Questo e’ il mio documento PIPPO
<A NAME=”primo”>
<H1> Primo Capitolo <h1>
</A>
Bla Bla Bla
<H2> Secondo Capitolo </h2>
Bla2 Bla2 Bla2
Adesso metto un link
<A HREF=”#primo”> Clicckando qui si torna
all’inizio del primo capitolo di questo
documento</A>
….
Oppure in un altro documento HTML
<A HREF=”http://zambo.it/pippo.html#primo”>
Clicckando qui si torna all’inizio del primo
capitolo di questo documento del documento
pippo su zambo.it</A>
M. Mamei - Tecnologie e Applicazioni Web
13
INSERIMENTO DELLE IMMAGINI
E’ possibile inserire qualsiasi immagine, in qualsiasi punto
dello schermo. Le immagini devono essere in formato GIF o
in formato JPG.
Tag/Attribute
<IMG>
ALT=”…”
SRC=”…”
HEIGHT=n
WIDTH=n
BORDER=n
ALIGN=”…”
Use
evidenzia un’immagine all’interno di un documento
HTML
specifica testi alternativi che sono mostrati se
un’immagine non appare
indica un file di immagine da includere (URL)
specifica l’altezza finale di un immagine in pixel
specifica la larghezza finale di un’immagine in pixel
specifica la larghezza del bordo attorno a
un’immagine in pixel
Specifica allineamenti di immagine come TOP,
MIDDLE, BOTTOM, LEFT or RIGHT
Esempi:
<IMG src=”stella.jpg” height=300 width=180>
<IMG src=”http://www.mysite.com/p1.jpg”>
E una immagine puo’ essere un link:
<a href=”http://www.disney.com>
<IMG src=”myckeymouse.jpg”>
</a>
M. Mamei - Tecnologie e Applicazioni Web
14
IMMAGINI MAPPA
Non solo e’ possibile avere delle immagini che sono
link, ma e’ possibile definire collegamenti diversi a
punti diversi di una immagine.
Bisogna definire quali le aree di una immagine su cui
si puo’ clicckare e a cose si collegano questi aree.
<img src="pages.gif" width="384" height="245"
usemap=”#miamappa”>
<map name="miamappa">
<area shape="circle" coords="186,44,45"
href="Overview.html">
<area shape="circle" coords="42,171,45"
href="Style.html>
<area shape="circle" coords="186,171,45"
href=”MyFile.html”>
<area shape="circle" coords="318,173,45"
href="Advanced.html">
</map>
ALTERNATIVE:
<area shape=”rect”
coords=”left-x, top-y, right-x, bottom-y>
<area shape=”circle”
coords=”center-x, center-y, radius”>
M. Mamei - Tecnologie e Applicazioni Web
15
TABELLE
Le tabelle sono alla base di tutte le formattazioni di
paragrafi. Qualsiasi tipo di allineamento e di struttura
grafica/logica della pagina può essere realizzata attraverso
l’uso appropriato delle tabelle.
Le tabelle sono costruite per righe. E’ possibile inserire
un’intestazione alla colonna e una intestazione alla tabella
stessa.
Tag
<TABLE>
<TR>
<TD>
<TH>
Use
Inserisce una tabella dentro un documento
HTML
Evidenzia una linea dentro la tabella; il comando
di chiusura è opzionale
Evidenzia una cella (table data) all’interno di una
riga
Evidenzia una cella di intestazione dentro una
linea
M. Mamei - Tecnologie e Applicazioni Web
16
ESEMPIO DI TABELLA
<table>
<tr><th>Eta</th><th>Altezza</th></tr>
<tr><td>9</td><td>125</td></tr>
<tr><td>12</td><td>135</td></tr>
<tr><td>16</td><td>159</td></tr>
</table>
APPARE COSI’:
Eta
9
12
16
Altezza
125
135
159
M. Mamei - Tecnologie e Applicazioni Web
17
SPANNINGS ROWS AND COLUMNS
Spannings si riferisce alla possibilità di estendere una
cella su più linee o colonne.
Attribute
ROWSPAN=n
COLSPAN=n
Use
Usato nei comandi <TH> e <TD> indica
quante linee la cella dovrebbe contenere
Usato nei comandi <TH> e <TD> indica
quante colonne la cella dovrebbe ricoprire
AGGIUNGENDO CAPTIONS
Un caption è un testo di spiegazione o descrittivo che di
solito compare sopra la tabella.
TAG/ATTRIBUTE
<CAPTION>
ALIGN=”…”
USE
usato dentro una tabella per identificare il
testo del table caption
colloca il caption all’inizio o alla fine della
tabella
(rispettivamente
TOP
e
BOTTOM)
M. Mamei - Tecnologie e Applicazioni Web
18
FORMATTAZIONE DELLE TABELLE
Una volta che è stata predisposta una tabella, è possibile
aggiungere un certo numero di opzioni di formattazione
che migliorano il suo aspetto globale. In particolare è
possibile utilizzare le seguenti possibilità:
1. aggiungere bordi
2. includere colori di sfondo e immagini
3. aggiustare lo spazio e il margine interno delle celle
4. aggiustare l’allineamento delle celle
5. specificare la dimensione delle celle
6. specificare l’allineamento delle tabelle
M. Mamei - Tecnologie e Applicazioni Web
19
BORDI DI TABELLE
I bordi delle tabelle si specificano usando un attributo e
un numero, misurati in pixel, che comunicano al browser
l’ampiezza del bordo. Per fare questo bisogna agire sul
tag <TABLE> aggiungendo le opzioni di seguito elencate.
Attribute
BORDER=n
BORDERCOLOR=“
#rrggbb”
BGCOLOR=”…”
BACKGROUND=
“...”
Use
specifica la larghezza del bordo di una
tabella, che è misurato in pixel. A
numero elevato corrisponde un bordo
più spesso
serve a specificare un colore per il
bordo della tabella come numero o
come nome
uso di un colore di sfondo
uso di un’immagine di sfondo
Allineamento delle celle
Il contenuto di una cella può essere allineato rispetto al
bordo della cella sia orizzontalmente sia verticalmente.
Per fare questo è necessario introdurre come attributo del
tag <TD> le seguenti opzioni:
Attributi
ALIGN=n
VALIGN=n
Usi
Specifica l’allineamento orizzontale del
contenuto delle celle, come LEFT,
CENTER, o RIGHT
Specifica l’allineamento verticale del
contenuto delle celle, come TOP, MIDDLE,
BOTTOM, o BASELINE
M. Mamei - Tecnologie e Applicazioni Web
20
Ampiezza delle tabelle e del text
wrap
Le celle possono essere dimensionate secondo
dimensioni volute e si può forzare il browser a non
effettuare andate a capo su sezioni di testo indicate. Per
fare questo è necessario introdurre come attributo del tag
<TD> le seguenti opzioni:
Attributi
WIDTH=”n”
NOWRAP
Usi
Specifica l’ampiezza delle celle in pixel o
come percentuale dell’ampiezza della
tabella
Impedisce la sovrapposizione del testo
all’interno delle celle cosi’ richiede che tutto
il testo appaia in un’unica linea
E’ possibile modificare sia lo spazio tra una cella e l’altra
sia lo spazio tra la linea che separa le celle e il testo
stesso. Le spaziature scelte devono però essere uniformi
all’interno della stessa tabella. Si agisce sul comando
<TABLE> con i seguenti attributi:
Attributi
CELLSPACING=n
CELLPADDING=n
Usi
Specifica in pixel lo spazio esistente tra le
celle
Specifica in pixel lo spazio esistente tra il
contenuto e il bordo delle celle
M. Mamei - Tecnologie e Applicazioni Web
21
Allineamento
della tabella
e
dimensionamento
La tabella può essere opportunamente dimensionata e
opportunamente allineata all’interno del documento. Si
usano i seguenti attributi del comando <TABLE>
Attribute
WIDTH=n
ALIGN=”...
”
Use
Indica la dimensione della tabella o in numero
di pixel o in percentuale della dimensione della
finestra
Indica l’allineamento della tabella come LEFT,
RIGHT, CENTER
UN ALTRO ESEMPIO:
<TABLE CELLPADDING="5" CELLSPACING="10"
BORDER="2" WIDTH="100" HEIGHT="100">
<TR ALIGN ="CENTER">
<TD><STRONG>Item One</STRONG></TD>
<TD BGCOLOR="#888fff">Item Two</TD>
</TR>
<TR BGCOLOR="#ffaaff">
<TD
COLSPAN="2">Item
Three,
plus
description</TD>
</TR>
</TABLE>
M. Mamei - Tecnologie e Applicazioni Web
a
22
FRAMES
Per gestire riquadri multipli di pagine HTML.
In pratica, un sito a “frame” suddivide lo schermo del
browser in piu’ riquadri, su ognuno dei quali vi sara’ una
pagina HTML.
Nella pagina iniziale:
<FRAMESET> rimpiazza <BODY>
e con essa definisco l’insieme di “frame” nel quale saranno
inserite pagine HTML.
Attributi:
COLS, ROWS,
specificano il numero e la dimensione dei frame.LA
dimenzione puo’ essere in pixel o in percentuale sulla
dimensione totale della pagina. La wildcard (*) indica cio’
che rimane.
Il tag <FRAME>
Serve per:
attributo SRC: il nome del file HTML che dovrá apparire nel
frame
attributo NAME: specificare il nome dei vari frame
M. Mamei - Tecnologie e Applicazioni Web
23
ESEMPIO DI FRAMES
Il frameset crea tre colonne, una larga il 20% della pagina,
l’ultima larga duecento pixel, e quella in mezzo
dimensionata di conseguenza.
La colonna di sinistra e’ poi spezzata in due righe, quella
alta di altezza 250 pixel, quella bassa dimensionata di
conseguenza.
<FRAMESET COLS="20%,*,200">
<FRAMESET ROWS="250,*">
<FRAME SRC="a.html" NAME="A">
<FRAME SRC="b.html" NAME="B">
</FRAMESET>
<FRAME SRC="c.html" NAME="C">
<FRAME SRC="d.html" NAME="D">
</FRAMESET>
M. Mamei - Tecnologie e Applicazioni Web
24
NOME E TARGET
Il nome (attributo NAME) di un frame puó essere usato per
specificare il frame di destinazione di un link: serve
l’attributo TARGET per il link.
Esempio:
<A HREF="target.html" TARGET="body">Why don't you
click here?</A>
In una pagina a frame con un frame che si chiama “body”
facendo click su quel link si fa in modo che la nuova pagina
appaia sul frame di nome “body”.
ALTRI ATTRIBUTI PER I FRAME
SCROLLING
per mettere la sparra di scorrimento. Valori possibili:
YES, NO, o AUTO
NORESIZE
Serve per specificare se a un ridimensionamento della
finestra del browser deve seguire un ridimensionamento del
frame o meno. Valori possibili: YES o NO.
M. Mamei - Tecnologie e Applicazioni Web
25
Alcuni Link Interessanti
http://www.w3schools.com
http://www.htmlprimer.com/
http://scholar.lib.vt.edu/reports/soasis-slides/HTML-Intro.html
http://www.webtrainingonline.com/Training/HTML/default.htm
http://www.pageresource.com/jscript/
M. Mamei - Tecnologie e Applicazioni Web
26