HTML
Federica Trombettoni
(SSIS IX ciclo)
Liceo Scientifico Marconi – Foligno
A.S. 2008/2009
HTML
• HTML è l'acronimo di Hypertext Markup Language
("Linguaggio di contrassegno per gli Ipertesti") e non è un
linguaggio di programmazione
• È un linguaggio di contrassegno (o 'di marcatura'), che
permette di indicare come disporre gli elementi all'interno
di una pagina
Federica Trombettoni
HTML
2
HTML
• L'organizzazione che si occupa di standardizzare la
sintassi del linguaggio HTML (il W3C: World Wide Web
Consortium) ha rilasciato diverse versioni di questo
linguaggio (HTML 2.0, HTML 3.2, HTML 4.0);
• La versione che esamineremo è HTML 4.01 del 24
dicembre 1999
Federica Trombettoni
HTML
3
HTML
• L'ideazione e nascita dell'HTML sono merito di due fisici
del CERN di Ginevra, Tim Berners-Lee e Robert Caillau,
che nel 1989 ebbero l'idea di creare un sistema di
informazioni collegate tra di loro accessibile attraverso la
rete in uso al centro stesso.
Federica Trombettoni
HTML
4
HTML
• Una pagina HTML è un documento di testo contenente
codice HTML ed avente le seguenti estensioni: .htm o
.html.
• Un documento html può essere scritto o con un normale
editor di testo (blocco note di windows) o con un editor
html (Frontpage o Dreamweaver)
Federica Trombettoni
HTML
5
Tag
• Ogni marcatore o tag è racchiuso dalle parentesi angolari:
<tag >
• Tag di apertura : <tag >
• Tag di chiusura: </tag>
• All'interno dei tag vi è poi il contenuto che è quello che
verrà formattato secondo le regole del tag che lo
comprende.
Federica Trombettoni
HTML
6
Attributo e valore
• Un tag può assumere una forma più complessa:
<tag attributo=“valore”…>
testo
</tag>
• Un tag può contenere più di un attributo
Federica Trombettoni
HTML
7
La sintassi dei tag
• I tag possono essere annidati l’uno dentro l’altro:
<tag1 attributo1=“valore” ..>
testo1
<tag2 attributo2=“valore” …>
testo2
</tag2>
</tag1>
Federica Trombettoni
HTML
8
Struttura di una pagina HTML
<html>
<head>
codice
</head>
<body>
codice
</body>
</html>
Federica Trombettoni
HTML
9
Struttura di una pagina HTML
• Il tag <html> indica al browser che il documento è stato
formattato in HTML.
• Il tag <head> serve a definire l'intestazione del documento,
ossia tutte quelle informazioni che servono a definire il
contenuto della pagina.
Federica Trombettoni
HTML
10
Struttura di una pagina HTML
• All'interno dei tag <body> e </body> è presente invece il
resto del documento, il corpo della pagina, ciò che
effettivamente poi verrà visualizzato sul browser.
• Il tag di chiusura </html> serve invece per comunicare
all'interprete che il codice HTML è terminato.
Federica Trombettoni
HTML
11
Il Titolo della pagina
• Per far sì che venga visualizzato un titolo del documento
nella barra del titolo del browser è sufficiente inserire
all'interno dei tag <head>..</head> il tag <title>seguito dal
titolo che si vuole dare alla pagina e successivamente il tag
di chiusura </title>.
Federica Trombettoni
HTML
12
Il Titolo della pagina
<html>
<head>
<title>
Inserire qui il titolo della pagina
</title>
</head>
<body>
codice
</body>
</html>
Federica Trombettoni
HTML
13
I meta tag
• I meta tag sono dei tag speciali che posti all'interno dei tag
<head></head> permettono di definire il contenuto della
pagina web, in modo, ad esempio, da rendere
l'indicizzazione da parte dei motori di ricerca più rapida ed
efficace.
Federica Trombettoni
HTML
14
I meta tag
• I meta tag non producono alcun tipo di effetto grafico nella
visualizzazione della pagina. I meta tag sono costituiti da
due parti:
Nome del meta tag
Valore del meta tag
• <meta name="nome meta tag“ content="valore del meta
tag">.
Federica Trombettoni
HTML
15
I meta tag
Nome Tag
Valore
Funzione
description
Descrizione del sito
Serve per descrivere il
contenuto del sito o
della pagina
keywords
Ogni parola chiave
separata da ;
Serve a dichiarare le
parole chiave del sito o
della pagina
author
L'autore della pagina
Indica l'autore della
pagina ed il suo
indirizzo e-mail
Federica Trombettoni
HTML
16
Attributi del body - BGCOLOR
• L'attributo BGCOLOR imposta un colore di sfondo:
<BODY BGCOLOR="black">
E' possibile sostituire al nome in inglese, valori
esadecimali:
<BODY BGCOLOR="#000000">
L'utilità dei colori esadecimali si ha quando non si vuole
un colore standard ma sfumato o con diversa tonalità.
Federica Trombettoni
HTML
17
Attributi del body - BACKGROUND
• BACKGROUND visualizza sullo sfondo un'immagine .gif
o .jpg.
Esempio:
prendiamo un'immagine chiamiamola ad esempio
sfondo.jpg e la mettiamo nella stessa directory del
documento(nella stessa cartella dove si trova la pagina web
in costruzione).
La sintassi è:
<BODY BACKGROUND="sfondo.gif">
• Esempio 1
Federica Trombettoni
HTML
18
Attributi del body - TEXT
• Il colore di default del testo del documento è nero. Grazie
all'attributo TEXT è possibile assegnare al testo un colore
diverso dal nero:
<BODY BACKGROUND="sfondo.jpg"
TEXT="white">
I colori possono esprimersi in nomi o valori esadecimali
cioè white (bianco) diventa " TEXT="#FFFFFF">
Federica Trombettoni
HTML
19
Attributi del body - BGPROPERTIES
• Se la pagina è tanto lunga da attivare lo scroller laterale,
l'immagine scorre insieme alla pagina per questo abbiamo
bisogno dell’attributo BGPROPERTIES che rende lo
sfondo immobile rispetto allo scroller di pagina e và così
impostato
<BODY BACKGROUND="sfondo.jpg"
BGPROPERTIES="fixed">
Federica Trombettoni
HTML
20
Attributi del body – LINK – ALINK -VLINK
• Il colore dei link, di default blue, si imposta con
LINK=“colore”.
• Il colore dei link cliccati si imposta con ALINK=“colore”.
• Il colore dei link visitati si imposta con VLINK=“colore”.
• Esempio 2
Federica Trombettoni
HTML
21
Formattazione Testo
•
•
•
•
<I></I> corsivo
<B></B> grassetto
<U></U> sottolineato
<Hn></Hn> grandezza carattere, n va da 1 a 6 (1 max, 6
min)
• <FONT></FONT> imposta il font, ha come attributi face,
size, color
• <MARQUEE></MARQUEE> per mettere del testo
scorrevole
Esempio 3
Federica Trombettoni
HTML
22
Paragrafi
• Il tag <P> definisce un nuovo paragrafo del testo
indicando al browser che lo stesso deve rimanere su una
nuova riga ed essere posizionato a destra, a sinistra o al
centro. Il tag <P> allinea il testo di default sulla sinistra.
Per indicare altri tipi di posizionamento si utilizza
l’attributo align con i valori:
<P ALIGN=“left”>
<P ALIGN=“right”>
<P ALIGN=“center”>
Federica Trombettoni
HTML
23
Paragrafi
• IL tag <DIV> viene utilizzato per allineare il testo in
posizione orizzontale a sinistra, destra e centro della
pagina.
<DIV ALIGN=“left”>Testo e immagini a sinistra</DIV>
<DIV ALIGN=“right”>Testo e immagini a destra</DIV>
<DIV ALIGN=“center”>Testo e immagini
Centrate</DIV>
Federica Trombettoni
HTML
24
<BR> <HR>
• Per andare a capo si utilizza il tag <BR>, tale tag non va
chiuso
• Le linee orizzontali sono ottime per dividere parti del
documento e rendere il testo più leggibile:
<HR align="CENTER" size="3" width="200"
color="Red" noshade>
• noshade: elimina l'effetto 3D della linea.
Federica Trombettoni
HTML
25
Elenchi numerati
• Gli elenchi numerati si aprono con il tag <OL></OL> poi
per ogni voce dell’elenco si mettono altrettanti tag <LI>:
<OL>
<LI>Prima
<LI>Seconda
<LI>Terza
</OL>
• Esempio 4
Federica Trombettoni
HTML
26
Elenchi numerati
• <OL type=“A”>
<LI>Prima
<LI>Seconda
<LI>Terza
</OL>
• <OL type=“a”>
• <OL type=“I”>
• <OL type=“i”>
• Esempio 5
Federica Trombettoni
HTML
27
Elenchi puntati
• Gli elenchi puntati sono simile agli altri elenchi di
indicizzazione solo che non seguono una struttura
gerarchica.
Gli elenchi puntati si aprono con il tag <UL></UL> poi
per ogni voce dell’elenco si mettono altrettanti tag <LI>:
<UL>
<LI> Prima
<LI> Seconda
<LI> Terza
</UL>
Federica Trombettoni
HTML
28
Elenchi puntati
• Se non stabilito diversamente l'elenco crea una serie di
pallini.
Come per gli elenchi numerati anche in questo caso è
possibile indicare diversi tipi di elenco:
<UL TYPE=disc> quello di default
<UL TYPE=circle>
<UL TYPE=square>
• Esempio 6
Federica Trombettoni
HTML
29
Collegamenti ipertestuali
• I collegamenti ipertestuali sono la base del web, un
ipertesto è un modo di formattare documenti in forma non
sequenziale.
• Internet è nato ed è diventato grande grazie alla teoria
ipertestuale, ovvero alla possibilità offerta agli utenti di
poter navigare comodamente tra le pagine di un sito e di
raggiungere altri siti con un semplice click su quello che
viene definito, appunto, collegamento ipertestuale o link.
• In HTML i link si generano col tag <a> che sta per
ancora, inteso come ancoraggio tra più pagine.
Federica Trombettoni
HTML
30
Link esterni
La sintassi per un link esterno cioè un collegamento con un
altro sito o con un’altra pagina dello stesso sito è la
seguente:
<A HREF="http://www.tuosito.it">Visita il mio sito</A>
In questo caso cliccando sul testo "Visita il mio sito"
(compreso tra i tag A in apertura e chiusura) si raggiunge
l'URL http://www.tuosito.it indicato dall'attributo HREF.
Federica Trombettoni
HTML
31
Link esterni
• HREF può puntare a un collegamento esterno (come
l'esempio sopra) o ad un collegamento ad un altro
documento dello stesso sito. Per esempio, se creiamo una
pagina Esempio7.html e vogliamo inserire un link alla
pagina Esempio6.html presente nella stessa cartella, il
codice corretto è:
<A HREF=" Esempio6.html ">Clicca qui per andare
all’Esempio6</A>
• Esempio 7
Federica Trombettoni
HTML
32
Link interni
• I collegamenti interni o àncore sono collegamenti che non
rimandano a una pagina esterna come abbiamo visto in
precedenza, bensì a un contenuto disponibile nella stessa
pagina. La sintassi è la seguente:
<a href="#paragrafo2">Vai al paragrafo 2</a>
<a name="paragrafo2">questo è il punto del documento
che hai raggiunto e cioè il paragrafo 2</a>
• Esempio 8
Federica Trombettoni
HTML
33
Posta Elettronica
• Attraverso un link è anche possibile aprire
automaticamente il programma di posta elettronica
predefinito con il campo A: già impostato sul destinatario.
Ecco la sintassi:
<a href="mailto:indirizzo mail">Parola da
visualizzare</a>
• Ecco un esempio:
<a href="mailto:[email protected]">Invia Mail</a>
• Esempio 9
Federica Trombettoni
HTML
34
Attributi dei link
Attributo
Valore
Significato
link
Qualsiasi colore
Indica il colore di tutti i link
presenti nella pagina
alink
Qualsiasi colore
Indica tutti i link attivi
vlink
Qualsiasi colore
Indica tutti i link già visitati
title
Qualsiasi lettera/parola
Il valore dell'attributo title
verrà mostrato quando il
cursore sarà sopra il link.
Serve per spiegare dove
porterà il link.
target
_blank (apre in una nuova
pagina) o _main (aperto
nella stessa pagina)
Determina come verrà
visualizzata la risorsa del
link: o nella stessa pagina o
in una nuova finestra
Federica Trombettoni
HTML
35
Attributi dei link
• Esempio riepilogativo sui link e sugli attributi:
Esempio 10
Federica Trombettoni
HTML
36
Immagini
• La sintassi di base per inserire un'immagine all'interno di
una pagina web è la seguente:
<img src="url dell'immagine" alt="testo alternativo">
Attributo
Significato
border
identifica il bordo che a 0 non è presente, salendo con i numeri
aumenta di spessore
title
testo informativo, visualizzato posizionando il cursore sopra
l'immagine
width
forza la dimensione della foto in larghezza, riducendo i tempi di
caricamento
height
forza la dimensione della foto in altezza, riducendo i tempi di
caricamento
Federica Trombettoni
HTML
37
Immagini
Attributo
Significato
hspace
definisce la distanza dai lati destro e sinistro dell'immagine degli
oggetti più vicini
vspace
definisce la distanza dai lati superiore e inferiore dell'immagine
degli oggetti più vicini
align
Definisce la posizione dell'immagine rispetto al testo
alt
permette di specificare un testo alternativo, descrittivo
dell'immagine
• Esempio 11
Federica Trombettoni
HTML
38
Suoni
• Per inserire un suono (.wav-.mp3-.mpeg-.mdi) si usa il tag
<BGSOUND> e con LOOP indichiamo il numero delle
volte che il file audio deve essere ripetuto.
Ecco la sintassi:
• <BGSOUND SRC="suono.mid" LOOP=INFINITE>
Per rendere possibile l'apertura automatica di un files audio
si deve usare il tag <EMBED>.
Ecco la sintassi:
<EMBED SRC="suono.mid“ >
Federica Trombettoni
HTML
39
Filmati
• Per inserire filmati (.avi) si utilizza il tag
<img>.
Ecco la sintassi:
<img dynsrc=“file_video.avi”>
Federica Trombettoni
HTML
40
Tabelle
• Il tag usato per la creazione delle tabelle è <table> in
coppia con il suo tag di chiusura </table>.
E' tra questi due tag che si devono inserire righe e celle, le
prime si creano attraverso il tag <tr> (Table Row); le
seconde, attraverso il tag <td> (Table Data). Se si vuole
creare una cella d'intestazione con il contenuto in neretto e
centrato si può usare il tag <th> (Table Header).
Il tag <caption> permette di aggiungere una descrizione
alla tabella (una sorta di didascalia) che supporta l'attributo
align.
Federica Trombettoni
HTML
41
Tabelle
• <table>
<tr>
<th>Nome</th>
<th>Cognome</th>
<th>Classe</th>
</tr>
<tr>
<td>Federica</td>
<td>Trombettoni</td>
<td>A042</td>
</tr>
</table>
Federica Trombettoni
HTML
42
Tabelle
Federica Trombettoni
HTML
43
Attributi delle tabelle
Attributo
Significato
border
Stabilisce la dimensione del bordo esterno alla tabella. Il valore
di default è 0 (ossia assente).
width
Stabilisce la larghezza della tabella
heigth
Stabilisce la lunghezza della tabella
cellspacing
Stabilisce la spaziatura tra le celle
cellpadding
Stabilisce la spaziatura tra il testo e la cella che lo contiene
Esempio 12
Federica Trombettoni
HTML
44
Attributi delle celle
Attributo
Significato
align
allinea il testo della cella a destra (right), sinistra (left) e centrato
(center).
valign
allinea il testo della cella sul margine superiore (top), sul
margine inferiore (bottom) e in mezzo (middle)
colspan
indica che la cella si espande su più colonne
rowspan
indica che la cella si espande su più righe
Federica Trombettoni
HTML
45
Attributi delle celle
Attributo
Significato
height
stabilisce l’altezza della cella
width
stabilisce la larghezza della cella
bgcolor
definisce il colore di sfondo di una cella
background
definisce un immagine come sfondo di una cella
Esempio 13
Federica Trombettoni
HTML
46
Scarica
