Lezione 14
INFORMATICA GENERALE
Prof. Luciano Costa
Ottimizzazione grafica di Orfeo Magnanimo
Html
Oggi inizieremo quella serie di lezioni specifiche su come
costruire un nostro sito web (oppure il sito web di qualcun altro:).
Ciò che potremo offrirvi sarà soltanto un input rispetto al vasto
mondo del ragno (leggi rete): nozioni per come iniziare a
CREARE
pagine web e “uploadarle” sul vostro server.
Per il resto starà al vostro desiderio di apprendere ed alla vostra
volontà di approfondire o meno il discorso.
“Io posso solo insegnarti la soglia, dopo sta a te attraversarla.”
disse un giorno Morpheus a Neo.
Cercheremo di essere il più chiari possibile.
Firmato il sottoscritto Gatto e la qui presente Volpe
Prima di tutto vediamo come
concepire il nostro sito
Esistono diversi modi di concepire il nostro sito web.
 Organizzazione sequenziale
 Organizzazione centralizzata
 Organizzazione gerarchica
 Organizzazione a tentacoli (o ad albero)
Organizzazione sequenziale
HP
2
3
4
5
Questa modalità di organizzazione del sito imita lo stile della
stampa. E’ un metodo di progettazione semplice e veloce, ma
risulta essere estremamente riduttivo per quel che riguarda la
navigazione: obbliga l’utente a seguire una strada univoca,
azzerando così la personalizzazione della navigazione.
E’ consigliabile solo per siti estremamente ridotti, cioè con
un ristretto numero di pagine.
Organizzazione centralizzata
HP
Si può accedere a tutte le pagine dalla Home Page. In questo
caso si può visitare immediatamente la pag. a cui siamo interessati.
L’inconveniente sta nel fatto che, per navigare tra le pag. interne,
bisogna sempre passare per la Home Page. (logicamente si possono
creare sempre dei link alle altre pagine :] )
Organizzazione gerarchica
HP
Questo tipo di struttura permette di organizzare il nostro sito in
modo “scalare”: permette cioè di suddividerlo in sezioni e sottosezioni. Non che non sia possibile farlo anche con altri tipi di
strutturazione, ma organizzando gerarchicamente il nostro sito
ci guadagneremo soprattutto in precisione, ordine e facilità di
gestione. Logicamente se il sito contiene un numero di pagine
estremamente ridotto, il discorso della gerarchia a più livelli cade.
Organizzazione a tentacoli (o ad albero)
HP
Tale organizzazione permette di progettare il sito mediante una
strutturazione logica delle pagine. Es: la HP si lega bene con pag.
2, 3 e 4, ma non con la 5 e la 6, che sono invece dipendenti o
correlate alle altre pag. E’ un altro modo di strutturare siti…
Certo si perde un po’ in ordine assoluto, anche se si guadagna in
logicità.
…poi fate come credete meglio. (sistemi misti)
Tali metodi di strutturazione non sono necessariamente
“statici”: si possono mischiare un po’ le carte in tavola.
Possiamo adottare un metodo gerarchico, ma utilizzare
anche “sfumature” a tentacoli; oppure un’organizzazione
centralizzata, ma con le pagine interne tutte linkate tra
loro (organizzazione Circolare”)… etc. etc.
“Consigli per l’uso”
Per avere un’idea di come costruire una pagina web è utile
richiamarsi sempre ai criteri di impaginazione della carta stampata
(GGGGGHHHH!!! Direbbe il Prof.)
Quindi, anche se nella costruzione di pagine web non esistono
regole grafiche a cui attenersi, è sempre meglio seguire i 5
Comandamenti che individuano gli aspetti fondamentali
di una web-impaginazione.
I cinque comandamenti
 Piacevolezza grafica
 Impatto sulla memoria visiva dell’utente
 Volontà di evidenziare certi aspetti
 Necessità di catturare l’attenzione e non di annoiare l’utente
 Correttezza nel fornire gli elementi atti al riconoscimento
del tipo di sito da parte dell’utente.
Nella costruzione del nostro sito sarà difficile riuscire a coprire
tutti questi aspetti, è perciò consigliabile valutare se farà più al
nostro caso un aspetto grafico accattivante, oppure una
strutturazione mirata alla praticità ed alla facilità di utilizzo.
La Home Page ideale
Logo o img
Nome o identificativo
Obiettivo del sito
Argomento 1
Argomento 2
Collegamenti
E-mail
Prima meglio farsi un’idea
Prima di iniziare a lavorare con il computer, è meglio chiarirsi
un po’ le idee su come vogliamo che il nostro sito risulti.
Magari facciamo qualche prova
su carta.
…”qualche”…
Poi iniziamo a lavorare davanti al monitor
Un po’ di HTML
I doc. HTML necessitano, per funzionare, di almeno 4 <TAG> :
 <HTML> fornisce al browser le informazioni sulla natura del
documento
 <HEAD> relativo alle informazioni sulle intestazioni
 <TITLE> il titolo che identifica il documento
 <BODY> fornisce le informazioni sul punto in cui comincia
il corpo del documento, cioè il contenuto della
pagina da visualizzare.
!!! Questi non sono comandi di markup ma tag contenitori, quindi
necessitano dei relativi tag di chiusura: </HTML> </HEAD>
</TITLE> </BODY>
Un esempio
<HTML>
<HEAD>
<TITLE>La mia prima Home Page</TITLE>
</HEAD>
<BODY>
Questa è la mia prima Home Page.
Per ora è ancora scarna, ma presto la renderò più attraente.
</BODY>
</HTML>
Ora salviamo in formato HTML
Occhio all’estensione
Ecco il risultato
La formattazione del testo:
intestazioni
I tag <h1>, <h2>, <h3>, … <h6>, sono utilizzati per
creare intestazioni (h=heading=intestazione) nel doc.
Il linguaggio HTML prevede 6 livelli di importanza
progressivamente minore, da <h1> a <h6>. Più il numero
che segue la lettera “h” è alto, più il livello è basso:
<h1> = testo grandissimo
<h6> = testo piccolissimo
Delimitare i paragrafi: il tag <p>
Per delimitare i paragrafi all’interno di un testo
vengono utilizzati il tag di apertura <p> e quello
di chiusura </p> che inseriscono una interruzione
di riga (ritorno a capo) ed una riga vuota tra i paragrafi.
Il tag <br />
Per far si che il browser distribuisca il testo su più righe
si fa uso del tag specifico <br /> (tra br e / c’è lo spazio).
Questo tag inserisce una interruzione di riga, cioè un
ritorno a capo e comanda al browser di visualizzare il
testo secondo la disposizione da noi desiderata.
Non avendo il tag di chiusura </br>, per
uniformità ai nuovi standard xhtml e xml,
prevede l’inserimento di uno slash (/) finale.
Un esempio
<html>
<head>
<title>La mia prima pagina web</title>
</head>
<body>
<h1>Informatica Generale</h1>
<p>Questa è una delle lezioni<br />
in cui parleremo di<br />
<b>costruzione di siti web</b></p>
<p>Speriamo siano di<br />
vostro interesse e gradimento</p>
</body>
</html>
Il risultato
Gli attributi dei tag <p> e <h1>
Il testo visualizzato dal browser è allineato per default
a sinistra, ma è possibile allinearlo anche al centro e a
destra grazie ad un attributo del tag <p> e del tag <h1>.
<p align=“valore”>TESTO</p>
oppure
<h1 align=“valore”>TESTO</h1>
Valore = “left” , “center” , “right”
Riprendiamo l’esempio di prima
e aggiungiamo i tag che ci interessano
<html>
<head>
<title>Prova uno</title>
</head>
<body>
<h1 align="center">Informatica Generale</h1>
<p>Questa è una delle lezioni<br />
in cui parleremo di<br />
<b>costruzione di siti web</b></p>
<p align="right">Speriamo sia di<br />
vostro interesse e gradimento</p>
</body>
</html>
Ed ecco il nuovo risultato
Collegamenti ipertestuali
Il tag utilizzato per i collegamenti ipertestuali è
<a> … </a> (a=ancoraggio).
Tale tag delimita il testo che costituirà il link.
Poi bisogna immettere l’attributo del tag, per creare
il vero e proprio riferimento ad un altro documento html.
Tale attributo è href (hypertext reference).
La sintassi da digitare quindi è:
<a href=“documentoX.html”>Clicca qui</a>
Quindi…
<html>
<head>
<title>Prova uno</title>
</head>
Indirizzo assoluto
o
Indirizzo relativo
<body>
<h1 align="center">Informatica Generale</h1>
<p>Questa è una delle lezioni<br />
in cui parleremo di<br />
<b>costruzione di siti web</b></p>
<p align="right">Speriamo sia di<br />
vostro interesse e gradimento</p>
<h6 align=“center”><a href=“documentoX.html”>Clicca qui</a></h6>
</body>
</html>
Ecco il link
Un po’ di colore
<html>
<head>
<title>La mia prima pagina web</title>
</head>
<body bgcolor="yellow">
<h1 align="center"><font color="red">Informatica Generale</font></h1>
<p>Questa è una delle lezioni<br />
in cui parleremo di<br />
<b>costruzione di siti web</b></p>
<p align="right">Speriamo sia di<br />
vostro interesse e gradimento</p>
<h6 align="center"><a href="DocumentoX.html">CLICCA QUI</a></h6>
</body>
</html>
Ora va meglio
Ora inseriamo le immagini
Per inserire le immagini nella nostra pagine utilizzeremo
il tag <img /> ed il suo attributo “src” (=sorgente).
Il tag <img /> stabilisce il punto di inserimento della
immagine da visualizzare, mentre l’attributo “src” ne
indica il percorso ed il nome.
La sintassi è quindi: <img src=“percorso/nomefile” />
Es:
<img src=“immagini/lorenzo.gif” />
(siccome sono uno ordinato, ho raccolto tutte le img in
una directory (cartella).
Inseriamo il tag nel documento
<html>
<head>
<title>La mia prima pagina web</title>
</head>
<body bgcolor="yellow">
<h1 align="center"><font color="red">Informatica Generale</font></h1>
<p>Questa è una delle lezioni<br />
in cui parleremo di<br />
<b>costruzione di siti web</b></p>
<p align="right">Speriamo sia di<br />
vostro interesse e gradimento</p>
<img src=“immagini/lorenzo.gif" /><br />
<h6 align="center"><a href="DocumentoX.html">CLICCA QUI</a></h6>
</body>
</html>
Ed ecco la nostra pagina
Fine