Hyper Text Markup Language HTML HTML

Operatore informatico giuridico
A.A 2003/2004
I Semestre
Hyper Text Markup Language
HTML
Dr. Raffaella Brighi
HTML
• HTML è un linguaggio di marcatura (markup) per la creazione di ipertesti
• Le sezioni di testo e gli oggetti del
documento sono contrassegnate (marcate)
da codici (tag) che le identificano e
specificano come devono essere trattate
• I Web Browser interpretano le istruzioni
del linguaggio HTML e visualizzano il
contenuto del documento
© Brighi
1
HTML come standard
• HTML non è un linguaggio di
programmazione: non permette di compiere
calcoli, iterazioni e gestire strutture dati
• HTML è uno standard promosso dal W3C –
World Wide Web Consortium
• L’ultimo standard HTML è HTML 4.01 (W3C
Reccomendation del 24 dicembre 1999)
• Agosto 2002, XHTML 1.0 – riformulazione di
HTML in XML
© Brighi
Gli elementi
• Il linguaggio HTML prevede un insieme di elementi,
ognuno dei quali ha un preciso significato.
• Ogni elemento è composto da un tag iniziale, da un
contenuto e da un tag finale e da eventuali attributi
– Il tag è una stringa di caratteri (codice) delimitata dal segno <
>, che riporta il nome dell’elemento e i suoi attributi.
– Gli attributi sono informazioni sull’elemento che non fanno
parte del contenuto, sono scritti dentro al tag iniziale ed hanno
la forma attributo=“Valore”. Ci sono attributi obbligatori ed
attributi facoltativi
© Brighi
2
Gli elementi
Elemento TITLE
<TITLE>Curriculum Vitae</TITLE>
Tag iniziale
(apertura)
Contenuto
Tag finale
(chiusura)
Elemento FONT
<FONT size=“8”>testo testo testo</FONT>
Tag iniziale Attributo
(apertura)
Valore
Contenuto
Tag finale
(chiusura)
© Brighi
Gli elementi
• Gli elementi del documento hanno funzioni
diverse: dichiarazioni, formattare, inserire
oggetti, creare collegamenti, etc.
• Alcuni elementi non richiedono un tag di
chiusura poiché non contengono testo, ma
sono semplici istruzioni per il browser (es.
<BR> testo a capo)
• I tag non sono case sensitive
© Brighi
3
Editor testuali vs WYSIWYG
• Gli editor HTML sono strumenti per la creazione di
pagine HTML. Sono fondamentalmente di due tipi
Editor testuali ed Editor WYSIYG.
– Editor testuali: sono normali editor di testo, in cui
l’utilizzatore scrive direttamente il codice HTML. Alcuni di
essi possono agevolare la scrittura del codice fornendo
comandi per l’inserimento rapido degli elementi e
colorando i tag in modo da evidenziarli rispetto al
contenuto.
© Brighi
Editor testuali vs WYSIWYG
• Editor WYSIWYG (What You See Is What
You Get ).
– Questi editor visualizzano gli oggetti, le
immagini e il testo della pagina così come
verranno visualizzati dal browser.
– Lo sviluppatore può agire direttamente su tali
oggetti, componendo a suo piacimento la
pagina e l’editor genera dinamicamente il codice
HTML. Esempi sono Frontpage e Dreamwaver.
© Brighi
4
Documento HTML: creazione
• Un documento HTML è un file di testo, salvato con
estensione .htm oppure .html
• Un documento contenente testo, salvato in formato
.htm, senza alcun tag HTML viene comunque
visualizzato dal browser
• Esercizio
– Avviare Blocco Note, digitare la frase ‘Questo è il mio primo
documento HTML’ e salvare il file con nome prova.htm;
chiudere il file. Aprire il file con il Browser.
– Nota. Il codice HTML può essere modificato in due modi: (1)
aprendo nuovamente il file con Blocco Note, (2) da IE menu visualizza - voce HTML. Per vedere le modifiche è
necessario fare il refresh della pagina
© Brighi
Documento HTML: struttura
• Un documento HTML si compone di due parti:
l'intestazione e il corpo del documento.
• Il corpo del documento contiene tutti gli elementi
della pagina visualizzati dal browser. Sono elementi
del corpo il testo, le immagini, le applet Java ecc..
• L'intestazione contiene le informazioni necessarie al
browser per una corretta interpretazione del
documento, ma non visualizzate nella pagina. Sono
elementi dell’intestazione il titolo della pagina, i
termini chiave per i motori di ricerca, le informazioni
sull’autore del documento ecc.
© Brighi
5
Elementi dell’intestazione
• Gli elementi dell'intestazione che trattiamo in
questo corso sono:
–
–
–
–
–
DOCTYPE
HTML
HEAD
TITLE
META
© Brighi
Elemento DOCTYPE
• DOCTYPE, secondo le indicazioni del W3C, deve essere
il primo elemento ad aprire il documento.
• E’ un elemento che non prevede un tag di chiusura e
fornisce informazioni al server Web che ospita la
pagina.
• DOCTYPE viene scritto in una forma standard e
fornisce alcune informazioni sul tipo di HTML utilizzato
nel documento:
– <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.1//EN">
• L'uso di DOCTYPE non è obbligatorio e può essere
omesso.
© Brighi
6
Elemento HTML
• L’elemento HTML apre e chiude il documento
HTML. Tutto il contenuto del file HTML è
racchiuso tra i tag <HTML> e</HTML>
• Questo elemento indica al browser che il
documento è in formato HTML.
• Esempio:
<!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.1//EN">
<HTML>
….
</HTML>
© Brighi
Elemento HEAD
• L’elemento HEAD, composto da un tag di apertura
<HEAD> e da un tag di chiusura </HEAD>, è posto subito
dopo l'apertura del tag <HTML>.
• HEAD racchiude l'intestazione vera e propria del
documento; al suo interno viene inserito il titolo del
documento (elemento TITLE), le informazioni necessarie
ai browser, ai motori di ricerca o al server web (elementi
META), blocchi di funzioni di linguaggi di script (elemento
SCRIPT) e blocchi di stili (elemento STYLE) oppure link
a risorse esterne di script o di stili (elemento LINK)
© Brighi
7
Elemento TITLE
• I tag <TITLE></TITLE> racchiudono il titolo della
pagina.
• Il titolo viene solitamente visualizzato dai browser nella
barra del titolo oppure, in caso di salvataggio dell'URL
con "Aggiungi a preferiti" (per MsIe), il tag TITLE dà il
nome al collegamento. Il titolo è anche utilizzato da
alcuni motori di ricerca per indicizzare la pagina e
trovare parole chiave.
• Esempio
<TITLE>Curriculum vitae di Mario Rossi</TITLE>
© Brighi
Elemento META
• L’elemento META consente di specificare
informazioni, che non vengono direttamente
presentate sulla pagina, per i motori di ricerca o
per una qualsiasi applicazione che elabori il
documento.
• L’elemento META non necessita di tag di
chiusura e segue la sintassi:
<META name=“nome dell’elemento” content=“valore” >
• Possiamo quindi definire elementi META, in
base al nostro scopo. Ne esistono però alcuni
predefiniti utilizzati da quasi tutti i motori di
ricerca.
© Brighi
8
Elemento META
I META elementi utilizzati generalmente sono i
seguenti.
• Keywords: il cui contenuto riporta un elenco di termini
che descrivono il contenuto della pagina.
es. <META name="keywords" Content="curriculum vitae, consulente
del lavoro">
• Author: il cui contenuto riporta l’autore del documento
es. <META name="author" content="Mario Rossi">
• Description: il cui contenuto riporta una descrizione breve
della pagina
es. <META name="description" content="Il mio curriculum in
HTML">
• Generator: il cui contenuto riporta informazioni relative al
sw utilizzato per creare la pagina
es. <meta name="GENERATOR" content="Blocco note di win2000">
© Brighi
Esercizio - Step 1
File di esempio: home0.html
<!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.1//EN">
<HTML>
<HEAD>
<META name="keywords" Content="curriculum vitae, consulente del
lavoro">
<META name="description" content="Il mio curriculum in HTML">
<META name="GENERATOR" content="Blocco note di Win2000">
<META name="author" content="Mario Rossi">
<TITLE>Curriculum vitae di Mario Rossi</TITLE>
</HEAD>
</HTML>
© Brighi
9
Il corpo del documento: BODY
• L'elemento BODY è posto immediatamente dopo la
chiusura del tag </HEAD>; prevede necessariamente un
tag di apertura e uno di chiusura ed al suo interno si
sviluppa il corpo del documento.
• La sintassi corretta per l'elemento <BODY> è la
seguente:
<BODY>
Contenuto del documento
</BODY>
• Il tag <BODY> è utilizzato anche per impostare alcuni
attributi di visualizzazione per il documento, quali lo
sfondo o le proprietà dei link.
© Brighi
Lo sfondo: attributi BGCOLOR e
BACKGROUND
• L’attributo BGCOLOR imposta un colore di sfondo alla
pagina. La sintassi è la seguente:
<BODY BGCOLOR=”red">
• E' possibile sostituire al nome in inglese valori
esadecimali che indicano le parti di rosso, di verde e di
blu da cui il colore finale è composto.
<BODY BGCOLOR="#ff0000">
• L’attributo BACKGROUND visualizza un’immagine come
sfondo della pagina. La sintassi è la seguente:
<BODY BACKGROUND="sfondo.gif">
© Brighi
10
Altri attributi di BODY
• text: imposta il colore del testo del documento. Il
valore predefinito è nero.
• link: imposta il colore dei link non ancora visitati.
Il valore predefinito è blu.
• alink:imposta il colore dei link attivi (link che si
stanno visitando).
• vlink: imposta il colore dei link visitati
© Brighi
Esercizio - Step 2
• Aggiungere nell’esempio home0.htm la
definizione del corpo del documento:
<!-- impostazione del colore di sfondo-->
<BODY BGCOLOR="#FFCC33">
….
</BODY>
• Nota. L’elemento <!-- xxxxxx --> è un
elemento commento e non viene interpretato
dal browser
© Brighi
11
Formattare il testo
• FONT: l’elemento FONT specifica alcune caratteristiche di
formattazione del carattere che, in fase di visualizzazione,
verranno applicate dal browser al testo racchiuso.
<FONT face=“arial” size=3 color=“red”> testo testo testo </FONT>
• B: il testo racchiuso viene visualizzato in grassetto (bold)
<B> testo in grassetto </B>
• I: il testo racchiuso viene visualizzato in corsivo (italic)
<I> testo in corsivo </I>
• U: il testo racchiuso viene visualizzato sottolineato
(underline)
<U> testo sottolineato </U>
© Brighi
Formattare titoli: da H1 ad H6
• Gli elementi Hn (n è un numero da 1 a 6)
vengono utilizzati per indicare i titoli delle
diverse sezioni in cui la pagina può essere
strutturata. Sono previsti 6 livelli gerarchici e
H1 corrisponde al livello più alto.
• Questi elementi possono essere poi utilizzati
da agenti sw per l’elaborazione della pagina,
ad esempio per creare un indice automatico.
• Gli elementi Hn forniscono comunque una
formattazione al testo che racchiudono,
evidenziando il diverso livello di importanza.
© Brighi
12
Creare paragrafi: elemento P
• L’elemento P identifica un nuovo paragrafo del testo. Il
testo racchiuso tra i tag <P> e </P> viene visualizzato
su una nuova riga e posizionato a destra, a sinistra o al
centro. Se non specificato il tag <P> allinea il testo di
default sulla sinistra.
• <P ALIGN=left> definisce l’inzio di un paragrafo e
allinea sulla sinistra.
• <P ALIGN=right> definisce l’inizio di un paragrafo e
allinea sulla destra.
• <P ALIGN=center> definisce l’inizio di un paragrafo ed
allinea al centro.
© Brighi
Andare a capo: elemento BR
• L’elemento BR inserisce una interruzione di
riga, il testo viene mandato a capo ma non
cambiano le caratteristiche di allineamento.
• L’elemento BR non prevede un tag di chiusura
© Brighi
13
Linee orizzontali: elemento HR
• L’elemento HR inserisce una linea orizzontale
nella pagina. Non prevede un tag di chiusura.
esempio
<HR align="CENTER" size="2" width="400" color="Red" >
© Brighi
Esercizio - Step 3.1
File home1.htm, uso dei tag <P>,<H1>, <BR>, <FONT>, <B>, <I>
<!-- paragrafo centrato-->
<P align=center>
<FONT face="courier new" size=10> Mario Rossi</FONT>
</P>
<!--linea orizzontale -->
<HR color=brown>
<!-- paragrafo allineato a sx, testo formattato in grassetto, uso del tag BR-->
<P align=left>
<FONT face="courier" size=4><B>
Studente del corso di laurea per Consulente del lavoro<BR>
Facoltà di Giurisprudenza <BR>
Università degli Studi di Bologna.
</B>
</FONT>
</P>
© Brighi
14
Esercizio- Step 3.2
<H2>Dati personali</H2>
<!-- paragrafo allineato a sx, testo in corsivo-->
<P align=left>
<FONT face="courier" size=4>
<I>Address </I>Via Roma, 45 - 40100 Bologna - Italy<BR>
<I>Tel </I>+39-051-123456<BR>
<I>Fax </I>+39-051-654321<BR>
<I>e-mail </I>[email protected]<BR>
</FONT></P>
© Brighi
Elemento DIV
• L'elemento DIV viene utilizzato per allineare
tutti gli elementi racchiusi (testo, immagini,
ecc.) a sinistra, destra e centro della pagina.
L’allineamento viene specificato con l'attributo
ALIGN.
© Brighi
15
Immagini: elemento IMG
• Le immagini vengono inserite in una pagina specificando
un elemento IMG. L’elemento IMG non ha bisogno di un
tag chiusura e segue la seguente sintassi:
<IMG SRC=“imagine.gif” WIDTH=“200” HEIGHT=“300” BORDER=2
VSPACE=3 HSPACE=3 ALT=“Descrizione dell’immagine”>
SRC: indica il nome del file ed il suo percorso (relativo o assoluto)
ALT: riporta una descrizione che in visualizzazione viene mostrata
quando ci si sofferma col puntatore del mouse sull’immagine
WIDTH: larghezza espressa in pixel
HIGHT: altezza espressa in pixel
BORDER: assegna un bordo all’immagine, il valore predefinito è zero
VSPACE, HSPACE: impostano le distanze del lati dell’immagine
(verticali ed orizzontali) dagli oggetti più vicini.
© Brighi
Esercizio - Step 4
File home1.htm
<!-- uso del tag DIV, inserimento di un'immagine-->
<DIV align=center>
<IMG SRC="foto.bmp" ALT="Foto di Mario Rossi"></IMG><BR>
<FONT face="courier" size=2>
<I>La mia foto </I></FONT>
</DIV>
© Brighi
16
Creare link a risorse esterne
• L’elemento specifico per creare nella propria pagina link
(collegamenti ipertestuali) a risorse esterne o interne è l’elemento
A.
• L’elemento A prevede necessariamente un tag di apertura e un tag
di chiusura. Può racchiudere testo, immagini o elementi
multimediali.
<A HREF ="http://www.unibo.it" target ="new"> Università degli Studi di
Bologna</A>
• L’attributo HREF contiene l’URL della pagina da raggiungere. Il testo
o gli oggetti racchiusi dai tag diventano navigabili, vale a dire
cliccando sopra di essi il browser apre l’URL indicato da HREF. L’URL
può essere assoluto o relativo.
• L’attributo target si utilizza solitamente nelle pagine divise in frame
(aree) ed indica in quale frame deve essere caricata la pagina a cui
si rimanda. Nell’esempio riportato il valore “new” significa che la
pagina deve essere mostrata in una nuova finestra del browser.
© Brighi
Creare link a risorse esterne
• E' possibile inserire collegamenti che
aprono automaticamente il programma di
posta predefinito con il campo TO già
impostato.
Esempio
<A HREF="mailto:[email protected]">[email protected]</A>
© Brighi
17
Esercizio - Step 5
File di esempio home2.html
<!--linea orizzontale -->
<HR color="brown">
<!-- paragrafo allineato a sx, testo formattato in grassetto, uso del
tag BR-->
<P align=left>
<FONT face="courier" size=4><B>
Studente del corso di laurea per Consulente del lavoro<BR>Facoltà di
Giurisprudenza<BR>
<A HREF="http://www.unibo.it" target="new">
Università degli Studi di Bologna</A></B>
</FONT></P>
….
<I>e-mail </I><A
HREF="mailto:[email protected]">[email protected]</A><BR>
© Brighi
Creare link interni al documento
• Per creare link a punti interni al documento
stesso occorre:
– inserire il tag <A name=“nome_ancora”> nel punto
del documento da raggiungere
– impostare il link, seguendo la sintassi <A
href=“#nome_ancora”> testo </A>
© Brighi
18
Gli elenchi: elementi OL e UL
• L’elemento OL consente di inserire nella pagina un
elenco ordinato di voci. Sintassi:
<OL type=“..”>
<LI>prima voce
<LI> seconda voce
</OL>
type=a lettere minuscole
type=A lettere maiuscole
type=i numeri romani minuscoli
type=I numeri romani maiuscoli
valore predefinito: numeri arabi
© Brighi
Gli elenchi: elementi OL e UL
• L’elemento UL consente di inserire nella pagina un
elenco non ordinato di voci. Sintassi:
<UL type=“..”>
<LI>prima voce</LI>
<LI> seconda voce </LI>
</UL>
type=circle, pallini vuoti
type=disc, pallini pieni
type=square, quadratini pieni
© Brighi
19
Esercizio - Step 6
File di esempio home3.html
<!-- esempio di liste-->
<FONT face="courier new" size=4>
<UL type=square>
<LI><I>1998</I> - Corso di francese presso ...</LI>
<LI><I>1999</I> - Corso di ingelse presso ...</LI>
<LI><I>2000</I> - Corso di informatica presso ...</LI>
<LI><I>2001</I> - Diploma di maturità scientifica, conseguita
presso il liceo ..., con votazione 98/100 </LI>
<LI><I>2002</I> - Iscritto al primo anno del cdl Consulente del
Lavoro presso l'Univeristà degli Studi di Bologna, Facoltà di
Giurisprudenza </LI>
</FONT>
© Brighi
Le tabelle
• Per inserire una tabella in una pagina HTML si
utilizza l’elemento TABLE
• La sintassi del tag di apertura è la seguente:
<TABLE width=200 height=300 border=1>
l’attributo width ed height, non obbligatorie, indicano la larghezza
e l’altezza della tabella e possono essere espresse in pixel (come
nell’esempio) o come percentuale della pagina
l’attributo border permette di indicare lo spessore del bordo della
tabella
• All’interno dell’elemento TABLE devono essere specificati inizio e
chiusura di righe e colonne. A questo scopo si utilizzano gli
elementi TR e TD
© Brighi
20
Le tabelle
• L’elemento TR delimita le righe della tabella. Ogni riga inizia quindi
con il tag <TR> e termina con il tag </TR>. All’interno della riga,
l’elemento TD delimita le singole celle, ogni cella inizia con <TD>
e termina con </TD>
• Esempio:
<TABLE>
<TR>
<TD>cella 1</TD>
PRIMA RIGA
<TD>cella 2</TD>
</TR>
<TR>
<TD>cella 1</TD>
SECONDA RIGA
<TD>cella 2</TD>
</TR>
</TABLE>
© Brighi
Esercizio – Step 7
File di esempio home3.html
<!-- esempio di tabelle -->
<DIV align=center>
<TABLE>
<!-- prima riga-->
<TR BGCOLOR="gray">
<TD><FONT face="arial" size=3><B>Periodo</B></FONT></TD>
<TD><FONT face="arial" size=3><B>Descrizione</FONT></TD>
</TR>
<TR BGCOLOR="white">
<TD><FONT face="arial" size=3><B>estate 1997</B></FONT></TD>
<TD><FONT face="arial" size=3>Barista presso Caffè de Paris di Rimini</FONT></TD>
</TR>
<TR BGCOLOR="white">
<TD><FONT face="arial" size=3><B>estate 1998</B></FONT></TD>
<TD><FONT face="arial" size=3>Cameriere presso pizzeria Bella Napoli di
Rimini</FONT></TD>
</TR>
... …
</TABLE>
</DIV>
© Brighi
21
Riferimenti
Alcune risorse in rete:
• Guide di base: Guida HTML su HTML.it
http://www.html.it/guida/index.html
• HTML 4.01 Specification W3C
Recommendation 24 December 1999
http://www.w3c.org/TR/html4/
• http://www.w3schools.com/html/default.asp
© Brighi
22