Costruire un Sito Web
3a Lezione: Martedì 13 Febbraio –
HTML Comandi base – 2 parte
Ripasso Tag
I tags che formano la struttua di un
documento HTML:
<html></html>
<head></head>
<title></title>
<body></body>
Tags per la formattazione del testo
<br>
<font face=“TIPO_CARATTERE”
color=“COLORE_IN_INGLESE”
size=“VALORE_DA_1_A_7”></font>
Ripasso Tag - continua
Tags per la formattazione del testo (continua)
<h1></h1> TITOLO
<h2></h2> SOTTOTITOLO
<p></p>
PARAGRAFO (attenzione che
l’opzione SIZE del tag FONT influenza la
dimensione del testo di un PARAGRAFO mentre
non influenza la dimensione del testo di un
TITOLO o di un SOTTOTITOLO; le opzioni FACE e
COLOR invece hanno effetto su tutti e tre!)
Grassetto: <b></b>
Corsivo: <i></i>
Sottolineato: <u></u>
Esercizio 1
Creare una cartella con nome Lezione3 sul
desktop
Al suo interno si vogliono creare due
documenti HTML
Il primo documento HTML deve essere
chiamato A.htm e può essere creata a
piacere, con l’unica condizione che deve
contenere tutti i tags presentati nella scorsa
lezione
Il secondo documento HTML deve essere
chiamato B.htm e deve avere la seguente
struttura (continua)
B.htm
4, Arial, Rosso
4 spazi
titolo
1 spazio
grassetto
4 spazi
Grassetto e corsivo
4 spazi
Corsivo, 5, Verdana, Verde
B.Htm (continua)
4 spazi
sottolineato
4 spazi
Sottolineato, corsivo, grassetto
4 spazi
4 spazi
Comic Sans MS, Arancio
6, Helvetica, Blu
Altri tags: cambiamo lo
sfondo!
Ora concentriamoci su due attributi che
possiamo utilizzare con il tag <BODY>
Come si può notare lo sfondo di default è
bianco!
È importante imparare come cambiare il
colore dello sfondo (background) perché il
colore bianco non sempre è adeguato
<BODY BGCOLOR=“color">, dove color è un
qualsiasi colore scritto in lingua inglese
Esempio: cambiare il colore dello
sfondo di una pagina HTML
Inserire un’immagine come
sfondo!
Oltre a cambiare il colore di sfondo, possiamo decidere
di inserire un’immagine come sfondo!
Questa opzione è in alternativa a <BODY
BGCOLOR=“color">
ATTENZIONE: Dobbiamo introdurre un discorso molto
importante, anche per i tags che vedremo in seguito!
Per poter usare correttamente un’immagine come
sfondo dobbiamo specificare il percorso (dove si trova
"fisicamente" l'immagine)
<BODY BACKGROUND=“percorso_fisico_immagine">
<BODY BACKGROUND="swirlies.gif">
" swirlies.gif", significa che il browser cercerà
l'immagine swirlies.gif nella stessa cartella in cui si
trova il documento html
Esempio: inserire un’immagine
come sfondo di una pagina HTML
Tutto funziona se…
Perché questo comando funzioni dobbiamo
avere la pagina HTML immagine_sfondo.htm
e l’immagine swirlies.gif che si vuole utilizzare
come sfondo, contenuti NELLA STESSA
CARTELLA!
E se l’immagine si trova in
un’altra cartella?
Se l’immagine che vogliamo utilizzare si trova
in un’altra cartella dobbiamo specificare
l’indirizzo fisico esatto
Supponiamo che l’immagine swirlies.gif si
trovi all’interno di una cartella Immagini
contenuta all’interno della cartella MioSito
E se l’immagine si trova in
un’altra cartella? - continua
In questo caso dobbiamo specificare l’indirizzo esatto
La prima osservazione, importante, da fare è la
seguente: la cartella Immagini è una sottocartella di
MioSito (cioè contenuta dentro)
Per specificare l’indirizzo corretto di swirlies.gif il
ragionamento da seguire è il seguente
Indirizzo di un’immagine
Partiamo dalla cartella contenente la nostra pagina
HTML: MioSito
A questo punto dobbiamo inserire il percorso che
conduce al file desiderato
Come abbiamo detto la cartella Immagini (che
contiene l’immagine swirlies.gif ) è una sottocartella
(è contenuta dentro) la cartella MioSito
Quindi il percorso che dobbiamo seguire da MioSito
per raggiungere swirlies.gif è il seguente: aprire la
sottocartella Immagini
Questa operazione si indica, con il codice HTML, nel
seguente modo:
“immagini/swirlies.gif”
Il corrispondente codice HTML da inserire sarà:
<BODY BACKGROUND=" immagini/swirlies.gif” ">
Altri casi di indirizzo
Un’altra possibilità è la seguente: la
cartella MioSito è contenuta (è
sottocartella) della cartella Immagini
Altri casi di indirizzo - continua
Anche in questo caso il ragionamento deve sempre
partire dalla cartella MioSito, poiché è sempre in essa
che è contenuta la nostra pagina HTML
L’unica variante di questo esempio riguarda il fatto
che non dobbiamo aprire una sottocartella, bensì
andare indietro di uno
L’operazione di tornare indietro di uno, in HTML si
specifica con ../
Costruiamo l’indirizzo esatto passo passo
Noi siamo nella cartella MioSito
Dobbiamo tornare indietro di una cartella quindi
scriviamo ../
A questo punto ci troviamo nella cartella Immagini e
troviamo la nostra immagine per cui scriviamo:
../swirlies.gif
Riepilogando
Abbiamo tre possibilità:
L’immagine si trova nella stessa cartella della
pagine HTML: scriviamo semplicemente il nome
del file comprensivo di estensione (.gif, .jpg, .bmp
etc.)
L’immagine si trova in una sottocartella rispetto
alla cartella dove si trova la pagina HTML:
scriviamo il nome della sottocartella seguita dal
nome del file: immagini/swirlies.gif
L’immagine si trova in una cartella che si trova, nel
percorso, prima della cartella che contiene la
nostra pagina HTML: dobbiamo dire di tornare
indietro (..) fino al punto corretto: ../swirlies.gif
Altri esempi di percorsi
Supponiamo che la cartella Immagini e la
cartella MioSito siano entrambe contenute
all’interno di una cartella SitoWeb
Come fare?
Ragionamento..
Dobbiamo sempre partire dalla cartella MioSito, perché è li che è
contenuto il nostro documento HTML
Sicuramente è necessario tornare indietro di uno per
raggiungere la cartella Immagini ../
Ma tornando indietro di uno, ci troviamo all’interno della cartella
SitoWeb
Dalla cartella SitoWeb dobbiamo entrare dentro la sottocartella
Immagini
../Immagini
Ora siamo nella cartella immagini non ci rimane altro che
indicare il file da usare
../Immagini/swirlies.gif
Graficamente
Torniamo indietro di uno “../”
Entriamo nella cartella Immagini “../Immagini”
Graficamente - continua
Ora scegliamo l’immagine giusta
“../Immagini/swirlies.gif”
Il codice HTML da utilizzare sarà <BODY
BACKGROUND=“../Immagini/swirlies.gif” ">
Esempio con il codice HTML
Esercizio
Creare una pagina HTML con un’immagine di sfondo
La pagina HTML è contenuta all’interno della cartella
HTML
La cartella HTML è a sua volta contenuta nella
cartella SitoA
La cartella SitoA è contenuta nella cartella SitoWeb
L’immagine da utilizzare deve essere salvare nella
cartella Immagini, che è una sottocartella di Risorse a
sua volta sottocartella di SitoWeb
Per capire meglio…
SitoWeb
Risorse
SitoA
Immagini
HTML
Immagine da usare
Come sfondo
Pagina HTML
Questo è il
punto di partenza
Gli spazi
Proviamo a scrivere il seguente codice
HTML e vediamo cosa succede:
Come facciamo ad inserire gli
spazi??
Dobbiamo usare un piccolo trucco!
In HTML uno spazio si indica con la
seguente parola: &nbsp;
Quindi dobbiamo riscrivere il nostro
codice nel seguente modo
Altri caratteri speciali
&amp;
&copy;
&gt;
&lt;
&quot;
&reg;
&shy;
&nbsp;
&
Copyright
>
<
“
Marchio registrato
spazio
Centriamo il testo
Il prossimo è un utilissimo piccolo tag
ed è piuttosto intuitivo
<CENTER></CENTER>
Si può centrare una parola oppure tutta
la pagina
Tutto quello che si trova tra i tags
<CENTER> sarà centrato
Esempio
Inseriamo un’immagine nella
nostra pagina
Ora vediamo come inserire immagini in una pagina
web
Il tag specifico per inserire un'immagine è questo:
<IMG>
Questo tag non richiede la chiusura!
<IMG SRC="copper.gif" WIDTH=82 HEIGHT=68>
Come si può vedere oltre a specificare il percorso
dell’immagine, OPZIONI si possono specificare altre
due opzioni, che riguardano la grandezza della foto:
WIDTH = Larghezza in pixel
HEIGHT = Altezza in pixel
Se non specifichiamo queste due opzioni, il browser utilizza
le dimensioni originali della foto
Esempio
Inserire una foto che si trova
su Internet
E se volessi inserire nella mia pagina
Internet una foto che si trova su un
altro sito Internet?
1) Salvo la foto e la inserisco all’interno
del mio materiale, per poi pubblicarla
insieme alle pagine
2) Indico l’indirizzo completo
(INDIRIZZO ASSOLUTO) dell’immagine
Esempio immagini
Il codice da usare per inserire quest’immagine nella
nostra pagina HTML è
<IMG
SRC="http://www.ansa.it/site/images/logo_ansa.gif"
WIDTH=224 HEIGHT=49>
Esercizio
Creare una pagina HTML a piacere, con l’unico vincolo di utilizzare
almeno una volta, i seguenti tags:
<html></html>
<head></head>
<title></title>
<body></body>
<font></font>
<h1></h1>
<h2></h2>
<p></p>
<b></b>
<i></i>
<u></u>
<BODY BGCOLOR=“color">
&copy;
&gt;
&lt;
&nbsp;
<IMG SRC>
I links
Ora esaminiamo alcuni tags utili per
trasformare le nostre pagine Web, semplici e
solitarie, in un sito Web vero e proprio
Infatti, i TAGS per la creazione di pagine Web
descritti fino ad ora rendono facile aggiungere
delle pagine ad un sito, ma in quale modo si
collegano le pagine fra loro?
I links interni ed esterni
Come abbiamo detto nella precedente lezione
esistono due tipi di collegamenti
Interni: sono collegamenti che ci permettono di
spostarci da un punto ad un altro ALL’INTERNO
DELLO STESSO DOCUMENTO HTML per
funzionare hanno bisogno di un ancora, o meglio
di una destinazione precisa all’interno del
documento
Esterni: sono collegamenti che ci permettono di
spostarci dalla pagina HTML attuale verso un’altra
pagina HTML oppure verso un altro sito web o, in
generale, verso un’altra risorsa (pagina HTML,
immagine, video, ecc.) che si trova al di fuori del
documento HTML in uso
Vediamo degli esempi pratici!
B.Htm con links interni
I links: tag <a>
Per trasformare un normale testo in un
ipertesto occorre applicare il tag <a>
In questo modo creiamo un collegamento
(link)
I links sono testi speciali che, se cliccati, ci
collegano ad un altro indirizzo,
visualizzando il documento desiderato
Esistono links interni al documento o
collegati a un documento esterno
I collegamenti interni
I collegamenti interni ad una stessa pagina, devono
utilizzare un punto di ancoraggio, ad esempio in
prossimità del titolo, e quindi contenere il
collegamento vero e proprio
I collegamenti interni continua
Fare clic qui
Scorrendo verso il basso la pagina, vediamo che il
testo a cui è stato applicato il collegamento, ha
cambiato aspetto: è sottolineato e di colore blu
Cliccando sul collegamento il browser ci porterà in
corrispondenza del tag di ancoraggio, cioè Titolo 1
I collegamenti interni continua
Il punto di ancoraggio si definisce con il tag <a>
seguito dall’attributo name, ove inseriamo il nome,
ad esempio sopra
Esempio punto di ancoraggio: <a name = “sopra”>
Il collegamento, invece, utilizza lo stesso tag <a>,
ma deve contenere l’attributo href con il nome del
punto di ancoraggio preceduto dal simbolo
cancelletto (#)
Quindi applichiamo il tag <a href=“#sopra”>
all’ultimo testo presente nella pagina
Il simbolo cancelletto (#) indica che ci stiamo
riferimento ad un punto contenuto nel documento
corrente
Cosa succede?
Nello stesso modo possiamo creare links ad altre
pagine del sito, oppure ad altri siti, sia sulla nostra
macchina che situate su server distanti da noi occorre
solo specificare esattamente il percorso
Link esterni
All’interno della pagina default.htm abbiamo inserito un link ad un’altra
pagina
Come si può notare è sparito il cancelletto (#)
Ricordiamoci di non fare confusione:
<a href=“#qualcosa”>TESTO</a> collegamento interno al documento!
Deve esistere in qualche punto dello stesso documento la corrispondente ancora
che sarà <a name = “qualcosa”>TESTO </a>
<a href=“pagina.htm”>TESTO</a> collegamento esterno
Link di altre risorse
E’ possibile linkare alla pagina web file di ogni tipo
L’importante è specificare l’estensione corretta ricordando che solo
alcuni tipi di files possono essere visualizzati direttamente dal browser
In caso contrario viene avviato il programma predefinito per gestire
tali files
Il tag che realizza tutto questo è sempre:
<a href=“URL risorsa”>TESTO</a>
Dove URL sta per Universal Resource Locator. E' un termine un po'
altisonante, che significa: indirizzo
Ogni risorsa (pagina internet, immagine, video, suono ecc.) ha un URL
Esempi di URL:
http://www.ansa.it
http://www.ansa.it/site/images/logo_ansa.gif
B.htm
http://www.ansa.it/site/notizie/videonews/ansalive/playlist/g200702122100.asx
Esempio di collegamento ad
un’immagine
Collegamento ad altre pagine
sul web
Come eseguire collegamenti a pagine o siti
che si trovano in rete?
Il prefisso da utilizzare è http://
Questo prefisso deve essere inserito
all’interno dell’attributo href del tag <a> e
indica che il file che stiamo cercando si trova
all’indirizzo che segue, su un server diverso
dal nostro
Esempio: <a href =
http://www.libanore.it>Visitate il mio
sito</a>
E se volessi inserire un
collegamento ad un e-mail?
Un link ad un indirizzo email funziona nello
stesso modo
Possiamo usare un indirizzo email come se
fosse l'indirizzo di una pagina web
<A HREF="mailto:[email protected]
">Mail!</A>
Esempio
Oltre ai links alle parole, possiamo
mettere i links alle immagini
Possiamo inoltre usare un'immagine come link, se
vogliamo
Usando il link d'esempio 'Go to Falletto.it!' possiamo
semplicemente sostiture la parola Falletto.! con il tag
<IMG>
<BODY>
Go to <A HREF="http://www.falletto.it/"><IMG
SRC="copper.gif" WIDTH=82 HEIGHT=68></A>
</BODY>
Oltre ai links alle parole, possiamo
mettere i links alle immagini - continua
Una domanda frequente è questa: come posso
togliere il bordo attorno all'immagine quando è un
link?
<BODY>
Go to <A HREF="http://www.falletto.it/"><IMG
SRC="copper.gif" WIDTH=82 HEIGHT=68
BORDER=0></A>
</BODY>
Cambiare colore ai links
Il browser ha configurato di default i colori del testo, dei links, dei links
attivi e dei links visitati. Sono questi...
Il testo è nero
I links sono blu
I links attivi sono rossi
I links visitati sono viola
E' possibile cambiarli se è necessario
Si può cambiare la configurazione di default per l'intero documento nel
tag <BODY>
<BODY BGCOLOR="#00000" TEXT=“green" LINK=“red" VLINK=“cyan"
ALINK=“yellow">
Qualcosa di divertente
</BODY>
Con questo comando abbiamo che:
Il testo è verde
I links sono rossi
I links attivi sono celesti
I links visitati sono gialli
Altri tags di formattazione
Un altro utilissimo strumento è il tag LIST. Ci sono liste
ORDERED (liste ordinate di paragrafi, come ad esempio l'indice
di un libro, in cui le voci dell'elenco sono precedute da un
numero progressivo) e UNORDERED (liste di paragrafi in cui
l'ordine non ha importanza e in cui le voci dell'elenco sono
precedute da un simbolo).
Questa è una lista ORDERED
1.
2.
3.
4.
qualcosa
qualcosa
qualcosa
qualcosa
di
di
di
di
grande
piccolo
corto
alto
qualcosa
qualcosa
qualcosa
qualcosa
di
di
di
di
rosso
blu
vecchio
nuovo
Questa è una lista UNORDERED
•
•
•
•
Liste UNORDERED
Costruiamo una lista non ordinata
Come prima cosa scriviamo:
Aggiungiamo il tag da utilizzare per creare
lista UNORDERED <UL></UL>
E’ un TAG intuitivo: UL=UNORDERED LIST
Liste UNORDERED
Aggiungiamo, compresa tra i TAGS <UL>, la prima
voce dell’elenco utilizzando un altro TAG: <LI>
E’ un TAG che non richiede chiusura
Liste UNORDERED - continua
Aggiungiamo qualche altra voce:
Come si costruisce una lista ordered ? Facile!
Basta sostituire il tag <UL> con <OL>
D’altronde OL = ORDERED LIST
Esempio ORDERED LIST
La linea orizzontale
Un altro tag interessante da utilizzare è
la linea orizzontale
Linea orizzontale - continua
Si possono specificare linee orizzontali
di diverse lunghezze:
Linea orizzontale - continua
E' possibile anche definire lo spessore
E si può decidere di renderla più spessa
TAG per inserire un commento
Un commento può essere inserito in qualsiasi punto
del documento e il browser ignorerà qualsiasi cosa
dentro questo tag
Si possono inserire messaggi nascosti, note che
possono servire, o scrivere un messaggio che può
essere utile a chi legge il codice della tua pagina
Il commento deve cominciare con <!-- e terminare
con -->
Si possono inserire dei tag html dentro ad un
commento e verranno ignorati
Il browser ignorerà qualsiasi cosa fino a -->
Esempio di commento
Compito per “casa”
Creare un sito Internet a proprio piacimento
composto da 3 pagine
Vincoli:
Le tre pagine devono essere tra di loro collegate,
in modo tale che da una pagina posso sempre
accedere ad una delle altre due
Nella costruzione del sito (e NON di ogni pagina)
e’ necessario utilizzare tutti i TAGS visti durante il
corso (commento compreso)
E’ importante inserire una foto di Scarlett
Johansson ;-)
La prossima volta commenteremo insieme le
vostre soluzioni, valutando pregi e difetti (ed è per
questo che è importante inserire i commenti!)
