1. INTRODUZIONE
L’HTML (Hyper Text Markup Language, Linguaggio Ipertestuale a Marcatori) è un insieme di
comandi o marcatori, comunemente conosciuti come TAG, e relativi attributi, che applicati ad un
testo o ad un’immagine permettono di modificarne le caratteristiche di visualizzazione (per esempio
il colore di sfondo della pagina, il tipo di carattere da utilizzare per il testo, la dimensione del testo,
ecc.). Sono poi i browser, come Internet Explorer o Netscape, ad interpretare tali tag e a visualizzare
il documento.
Un documento html non è altro che un file di testo, e si crea attraverso programmi come il Blocco
Note di Windows, WordPad, e molti altri; è costituito da caratteri e nient’altro (niente colori
particolari associati al testo, niente immagini, niente formattazione, ecc.).
L’estensione associata ai file di testo è “.TXT”, tale formato gestisce unicamente i caratteri
tralasciando tutte le informazioni di formattazione. Il programma WordPad di Windows salva il file,
per default, con questo formato, ma non tutti i programmi di video scrittura lo fanno. Per esempio,
Word usa un suo particolare formato per il salvataggio dei documenti, e l’estensione usata è
“.DOC”.
Il file così ottenuto non è un semplice documento di testo, perché in esso sono memorizzate anche
le informazioni di formattazione, che non dovranno essere presenti in un file usato per descrivere
una pagina web.
Esempio.
A) Crea un documento html vuoto utilizzando il programma Blocco Note di Windows.
1) Apri Blocco Note: Start – Programmi – Accessori – Blocco Note.
2) Salva il documento di testo vuoto come documento html: File – Salva con nome.
3) Scrivi un nome al documento nella cella “Nome file”, per esempio index.htm: in questo
modo si associa immediatamente al file l’estensione dei documenti html, sostituendo
così l’estensione di default che era “.txt”.
4) Premi il pulsante “Salva”.
B) Vediamo come aprire il documento appena creato in Internet Explorer.
1) Apri Internet Explorer, richiama il comando “Apri” nel menu “File”.
2) Nella finestra di dialogo “Apri”, clic sul pulsante “Sfoglia”; nella nuova finestra, apri la
cartella contenente il documento html che si desidera richiamare, e seleziona il file
“index.htm”.
3) Premi il pulsante “Apri”.
4) Si ritornerà nella finestra precedente dove sarà sufficiente premere il pulsante “OK”. La
pagina sarà interpretata e visualizzata nel browser. Poiché nell’esempio il documento era
vuoto, la pagina sarà solo un foglio bianco.
2. GLI STANDARD
Qualche tempo fa il browser più utilizzato per interpretare il codice html era Netscape, questi
dettava le regole e definiva come l’html doveva essere e cosa poteva offrire, mentre i pochi altri
browser presenti si adeguavano a quanto la Netscape decideva. In tale situazione, dove vi era
un'
unica società dominante, la standardizzazione (un unico insieme di regole che tutti rispettano)
del linguaggio html era raggiunta di fatto. Dopo poco però le cose cambiarono drasticamente: la
Microsoft decise di entrare in questo nuovo e promettente mercato creando il proprio browser:
Internet Explorer. Inizialmente la qualità del browser di casa Netscape, grazie anche alla maggiore
esperienza maturata nel settore, era di molto superiore al nuovo arrivato, però Internet Explorer
ebbe il vantaggio di auto installarsi in tutte le macchine Windows e di essere distribuito
gratuitamente. A causa di ciò, col passare del tempo, Internet Explorer riuscì ad imporsi sulla
concorrenza, e da questo momento in poi la standardizzazione di fatto del linguaggio html, assieme
alla supremazia di casa Netscape, si perse. Gli sviluppatori di pagine web diventavano sempre più
esigenti, e i produttori di browser rispondevano con nuove versioni dei loro prodotti, alle quali
erano aggiunte nuove capacità, e questo significava modificare il linguaggio html espandendolo. La
cosa non sarebbe stata un problema se i realizzatori dei browser si fossero accordati su come
espandere il linguaggio, ma la cosa non avvenne e si ebbe un prolificare di nuovi tag incompatibili
tra loro: Internet Explorer inventava i suoi tag e Netscape i propri, magari permettevano di ottenere
la stessa cosa, ma erano diversi così che Netscape non riconosceva i tag di Internet Explorer e
Internet Explorer non riconosceva i tag di Netscape. Questa situazione si è trascinata fino ai giorni
nostri anche se fu dato vita ad un’organizzazione: il W3C, la quale doveva ricondurre l’html ad uno
standard; in realtà prima i browser propongono le nuove regole e i nuovi tag, poi questa
organizzazione raccoglie le idee dai vari contendenti e definisce il nuovo standard (HTML4,
DHTML), limitandosi a dare le direttive per implementare i marcatori e lasciando i dettagli ai
browser. E’ facile capire come questo sistema sia estremamente lento e porti solo complicazioni a
chi dovrà districarsi nel linguaggio.
3. GLI EDITOR
Esistono programmi che facilitano la creazione di documenti html, anche gratuiti, denominati editor
HTML. Ne esistono di due tipi:
− TESTUALI: Consentono di agire direttamente sul codice HTML. Solitamente possono
evidenziare comandi diversi con colori diversi, completare automaticamente l’inserimento di
specifici tag ed altro, allo scopo di agevolare la stesura e la gestione del documento. Strumenti
di questo tipo comunque richiedono la conoscenza, almeno parziale del linguaggio HTML.
− WYSIWYG (What You See Is What You Get): Non visualizzano il codice HTML, bensì la
pagina così come apparirà nel browser. Sarà come utilizzare un editor di testi tipo Word e simili.
Non sarà necessario conoscere l’HTML poiché, della stesura del codice, se ne occuperà il
programma. Questi strumenti rendono i tempi di apprendimento brevissimi, però limitano la
fantasia e creatività entro ciò che riescono a gestire: senza conoscere l’HTML non sarà possibile
personalizzare il codice e superare i limiti che il programma impone (Front Page,
Dreamweaver).
4. CONCETTI DI BASE
Alcuni concetti che si devono conoscere:
− Un sito Web (l’insieme delle pagine, immagini e oggetti che lo compongono) deve essere creato
in locale, cioè nel proprio PC: solo successivamente lo si copia nel server remoto che lo renderà
visibile sul Web. E’ buona cosa predisporre una nuova cartella dove copiare tutti i file e
sottocartelle che andranno a comporre il sito.
− L’indirizzo del sito Web è collegato ad una pagina ben definita, che solitamente deve avere il
nome index.htm o index.html (questa sarà l’Home Page o Pagina iniziale del sito).
− Per copiare i dati che compongono il sito sul server Web, si userà un qualsiasi programma FTP
(File Transfer Protocol); ne esistono diversi anche gratuiti o shareware. Con questo si accederà
allo spazio riservato usando nome utente, password e indirizzo FTP (questi ultimi sono dati che
dovranno essere forniti da coloro che concedono lo spazio fisico nei loro server per il
mantenimento del sito).
− I server Web spesso non usano Windows come sistema operativo, e la maggior parte di essi,
diversamente da Windows, distingue le maiuscole dalle minuscole. Ciò significa che i file
scuola.htm e Scuola.htm non sono la stessa cosa. Se il sito funziona correttamente in locale, ma
una volta in rete mancano immagini, le pagine non si caricano, ecc., forse l’errore sta proprio
nei nomi che si sono utilizzati. Per evitare problemi di questo genere, è consigliabile utilizzare
sempre i caratteri minuscoli, sia per i nomi sia per le estensioni dei file.
− Gli accessi alla rete sono lenti. Le pagine web devono essere prelevate da Internet, quindi
dovranno essere “leggere”: non dovranno cioè occupare troppa memoria. Quando si controlla il
peso di una pagina, si deve considerare non solo il file .htm, ma anche tutti quelli che in essa
vengono richiamati (immagini, suoni, ecc.).
5. I TAG
I Tag sono istruzioni delimitate e rese riconoscibili attraverso i simboli < e >. Tutte, tranne qualche
eccezione, devono essere aperte e chiuse; esistono quindi tag di apertura e tag di chiusura, che
servono per delimitare parti del documento.
Si usano i tag di apertura per indicare al browser dove deve iniziare ad applicare una determinata
formattazione, e i tag di chiusura per far sì che il browser termini di applicarla.
Per esempio, applicare il grassetto (Bold) ad un pezzo di testo, significa utilizzare il tag di apertura
<B> all’inizio del testo da formattare, e il tag di chiusura </B> alla fine dello stesso.
Tutti i tag di chiusura sono caratterizzati dalla barra “/”.
I tag possono essere scritti sia in maiuscolo sia in minuscolo (se si usa il maiuscolo è più facile
individuarli nel documento e le eventuali successive correzioni saranno facilitate).
E’ possibile usare contemporaneamente più tag su uno stesso pezzo di testo. Ad esempio, se si
desidera applicare sia il grassetto (<B>) che il corsivo (<I>) si deve scrivere:
<B><I>testo formattato</I></B>
testo formattato
Attenzione a come si chiudono i tag, si devono usare come le parentesi in matematica. Per questo è
scorretto scrivere:
<B><I>testo formattato</B></I>
Si può anche scrivere:
<B><I>testo formattato in grassetto corsivo</I> testo formattato solo in grassetto</B>
testo formattato in grassetto corsivo testo formattato solo in grassetto
è sufficiente che i tag non si sovrappongano in modo scorretto.
6. STRUTTURA LOGICA DI UNA PAGINA WEB
qui non ci deve essere nulla
<HTML>
qui non ci deve essere nulla
<HEAD>
intestazione
</HEAD>
qui non ci deve essere nulla
<BODY>
corpo
</BODY>
qui non ci deve essere nulla
</HTML>
qui non ci deve essere nulla
I tag <HTML> e </HTML> evidenziano l’inizio e la fine di un documento html, in pratica
avvertono il browser che il documento è scritto usando codice html.
Una pagina html si compone di due parti fondamentali: l’intestazione e il corpo.
L’intestazione è delimitata dai tag <HEAD> di apertura e </HEAD> di chiusura.
Contiene un insieme di informazioni utili al browser, e ad altri agenti come i motori di ricerca, per
una corretta interpretazione del documento. In ogni caso queste informazioni non sono rese visibili
nella pagina interpretata dal browser.
Il corpo è delimitato dai tag <BODY> di apertura e </BODY> di chiusura.
Contiene tutti gli oggetti che saranno effettivamente visibili nel browser (testo, immagini, applet
java, etc..).
Esercizio:
Aprire un nuovo documento vuoto e inserire il testo seguente:
<HTML>
<HEAD>
<H1> Istituto Scolastico </H1>
<H2> Potenza </H2>
</HEAD>
<BODY>
<HR>
Informazioni
</BODY>
</HTML>
Salvare il file con il nome “index.htm” e aggiornare il contenuto del browser.
7. INTESTAZIONE DOCUMENTO
Ecco come si presenta l’intestazione:
<HEAD>
informazioni volte a identificare il contenuto del documento
</HEAD>
Vediamo quali informazioni possiamo inserire tra questi due tag nel documento.
IDENTIFICAZIONE
<DOCTYPE>
Il W3C, (consorzio internazionale che si occupa di armonizzare l’utilizzo dell’HTML) prevede e
consiglia l’uso del tag <DOCTYPE> posto prima del tag che apre il documento, ovvero <HTML>.
Fornisce informazioni di tipo generale e non ha il tag di chiusura, in effetti, non serve, in quanto
non si sta delimitando nulla.
La sua forma completa è la seguente:
<!DOCTYPE HTML PUBLIC=”-//W3C//DTD HTML 4.0//IT”>
Evidenzia subito il tipo di documento:
− HTML PUBLIC: indica che il documento usa marcature html ed è pubblico
− W3C: indica che il documento segue le direttive proposte dal consorzio
− DTD HTML 4.0: è la versione di html usata nel documento
− IT: è la lingua usata nel documento, in pratica l’italiano (EN inglese).
Da questo momento si vedranno quali tag vanno inseriti nell’intestazione vera e propria del
documento, quindi tra <HEAD> e </HEAD>.
TITOLO
<TITLE>
Il tag TITLE consente di dare un titolo alla pagina web, che sarà visualizzato sulla barra del titolo
del browser.
I tag di delimitazione sono:
<TITLE>
“titolo”
</TITLE>
Esempio:
<TITLE> Adafor.com – MANUALE HTML </TITLE>
Il titolo è usato sia dai browser per indicizzare l’indirizzo della vostra pagina nei preferiti, sia dai
motori di ricerca per recuperare parole chiavi.
INFORMAZIONI
<META>
I tag META permettono di fornire ulteriori informazioni, spesso dedicate ad entità un po’ particolari
come i motori di ricerca, i quali le usano per indicizzare la pagina all’interno dei loro database.
Il tag META prevede due attributi: NAME e CONTENT, e non ha il tag di chiusura.
L’attributo NAME contiene il nome dell’oggetto, che viene descritto o sviluppato dall’attributo
CONTENT.
Seguono alcuni esempi di uso del tag meta:
1) Keywords (parole chiavi):
<META NAME=”keywords” CONTENT=”adafor, formazione, manuali, corsi, internet”>
Le parole chiavi, inserite nell’attributo CONTENT, sono dei suggerimenti che si possono dare ai
motori di ricerca in relazione al contenuto del sito, devono essere termini che rispecchiano e
riassumono caratteristiche e finalità della pagina che le contiene.
Devono:
− essere tra loro divise da una virgola;
− le frasi dovranno essere delimitate da apici per esempio: “manuale di html”;
− è consigliabile inserire in diverse forme la stessa parola, se si usa, per esempio, manuale come
parola chiave, è consigliabile usare anche il plurale: manuali, se il vostro sito contiene
informazioni tradotte in lingue diverse dall’italiano può tornare utile inserire anche parole chiavi
in tali lingue;
− non esagerare inserendo la stessa parola troppe volte: potrebbe portare all’immediata esclusione
della vostra pagina dal database del motore di ricerca.
2) Description (descrizione):
<META NAME=”description” CONTENT=”www.adafor.com - Corsi di formazione”>
Questo vi consente di descrivere brevemente le caratteristiche salienti della vostra pagina, non più
con singole parole, ma con frasi complete. Tale oggetto spesso viene utilizzato dai motori di ricerca
come descrizione del link (FIG 2).
3) Author (autore):
<META NAME=”author” CONTENT=”Nicola Bruno”>
Consente di evidenziare il nome di chi ha creato tale pagina.
4) Generator (generatore):
<META NAME=”generator” CONTENT=”Blocco Note Di Windows”>
Qui è possibile specificare il nome dell’editor utilizzato per la generazione della pagina.
5) Refresh (aggiorna):
<META HTTP-EQUIV=”refresh” CONTENT=”5; url=seconda.htm”>
Non si usa più l’attributo NAME ma HTTP-EQUIV.
Con questo tag è possibile, dopo un tempo prefissato, far caricare automaticamente al browser
un’altra pagina. In CONTENT, 5 è il numero di secondi che devono passare prima che il browser
carichi la pagina successiva; url=”seconda.htm” identifica il file che sarà richiamato, in questo caso
tale file ha il nome seconda.htm e si trova nella stessa cartella.
8. CORPO DEL DOCUMENTO
<BODY>
contenuto del documento: testo, immagini, etc…
</BODY>
Descriviamo alcuni tra i più utili attributi del tag BODY.
1) MARGINI
LEFTMARGIN
TOPMARGIN
per internet explorer
MARGINWIDTH MARGINHEIGHT per netscape
Tali attributi consentono di ridefinire i margini del documento (distanza del testo dal bordo della
finestra del browser).
I due browser più diffusi usano attributi diversi e per ottenere lo stesso risultato (la stessa pagina in
entrambi i browser) è necessario inserirli tutti contemporaneamente; internet explorer non
conoscendo gli attributi di netscape non li prenderà in considerazione, lo stesso farà netscape con gli
attributi di internet explorer.
Leftmargin e marginwidth modificano il margine sinistro del documento.
Topmargin e marginheight modificano il margine superiore del documento
Esempio: Margini ridotti a 0.
<BODY LEFTMARGIN=”0” TOPMARGIN=”0” MARGINWIDTH=”0”
MARGINHEIGHT=”0”>
2) COLORE DEL TESTO
TEXT=”colore”
Tale attributo permette di usare un colore diverso dal nero (di default) per il testo del documento.
Ovviamente all’interno del documento sarà ancora possibile marcare parte del testo con colori
diversi.
Esempio: Applicare il colore rosso a tutto il testo del documento.
<BODY TEXT=”red”>
3) COLORE DEI COLLEGAMENTI
LINK=”colore”
Tale attributo permette di usare un colore diverso dal default (solitamente blu) per i collegamenti
presenti nella pagina.
Esempio: Impostazioni di collegamento di colore rosso.
<BODY LINK=”red”>
4) COLORE DEI COLLEGAMENTI VISITATI
VLINK=”colore”
Tale attributo permette di usare un colore diverso dal default (solitamente viola) per i collegamenti
visitati presenti nella pagina.
5) COLORE DEI COLLEGAMENTI SELEZIONATI
ALINK=”colore”
Tale attributo permette di usare un colore diverso dal default (solitamente rosso) per i collegamenti
selezionati nella pagina. Questa caratteristica si nota con più facilità in Netscape, è sufficiente
mantenere schiacciato il tasto sinistro del mouse su un link.
6) COLORE DI SFONDO
BGCOLOR=”colore”
Tale attributo modifica il colore di sfondo della pagina. Di default nella maggioranza dei browser, il
colore usato è il bianco, ma come alcune caratteristiche del testo, può essere modificato a piacere
dall’utente, quindi per assicurarsi di avere come sfondo un particolare colore si consiglia di
utilizzare sempre questo attributo anche quando il colore desiderato è il bianco.
Esempio: Applicare come colore di sfondo per la pagina il rosso.
<BODY BGCOLOR=”red”>
7) IMMAGINE DI SFONDO
BACKGROUND=”percorso/nome_immagine”
Questo attributo consente di alterare lo sfondo della pagina; non si limita ad applicare una tinta
unita ma consente di riempire lo sfondo replicando un’immagine. In questo caso, spesso, si usano
TEXTURE: immagini di piccole dimensioni che, replicate, danno l’impressione di continuità.
Esempio: Applicare l’immagine sfondo.gif allo sfondo.
<BODY BACKGROUND=”sfondo.gif”>
Nello stesso documento di prima, con la stessa immagine di sfondo, si provi ad utilizzare anche
l’attributo BGCOLOR.
<BODY BGCOLOR=”yellow” BACKGROUND=”sfondo.gif”>
Un’immagine di sfondo non deve essere troppo grande (in termini di memoria occupata) perché
rallenta il download del documento, ma nemmeno troppo piccola perché ritarda la visualizzazione
del documento (aumenta il tempo necessario al browser per replicarla sullo sfondo).
8) ECCEZIONI
BGPROPERTIES=”fixed”
E’ un attributo che funziona solo con Internet Explorer, lo si è preso in considerazione solo come
esempio dimostrativo in grado di evidenziare chiaramente come alcuni tag non funzionino su tutti i
browser.
L’immagine di sfondo, quando la pagina è tanto lunga da attivare lo scroller laterale, scorre assieme
alla pagina. Attraverso l’uso di questo nuovo attributo si renderà lo sfondo fisso anche se la pagina
sarà scrollata. In Netscape non noteremo nulla, e le cose funzioneranno come se l’attributo non ci
fosse.
Esempio:
<BODY BACKGROUND=”sfondo.gif” BGPROPERTIES=”fixed”>
9) FORMATTAZIONE DEL TESTO
Per la formattazione del testo esistono due classi distinte di tag, i tag LOGICI e i tag FISICI.
I tag logici seguono la filosofia originaria del linguaggio concentrata sul significato del testo,
sottolineano la funzione comunicativa di ciò che evidenziano, per esempio marcano un indirizzo o
una citazione, dichiarando così la natura del blocco di testo e lasciando al browser il compito di
deciderne l'
aspetto: la formattazione. I tag fisici, al contrario, si preoccupano esclusivamente di
definire l’aspetto del testo che delimitano. Consentono di applicare il grassetto, il corsivo, di
cambiare carattere e via dicendo.
La differenza tra i due sta nel senso (nascosto nel codice stesso) che i primi riescono a dare al testo,
cosa che i tag fisici non possono fare.
TAG FISICI
RITORNO A CAPO
<BR>
BR sta per break, interruzione.
E’ già stato affermato che i ritorni a capo, nel codice che compone un documento html, non sono
presi in considerazione dai browser. Tutto il testo è disposto come se si trovasse su di una stessa
riga, e il browser si occupa autonomamente di riportarlo a capo alla fine della finestra. Il tag <BR>
risolve questo problema, infatti, sposta tutto quanto si trova dopo di sé all’inizio della riga
successiva, non delimita nulla quindi non prevede il tag di chiusura (non esiste </BR>).
PARAGRAFI
<P>
P sta per paragraph, paragrafo.
Segna l’inizio di un nuovo paragrafo e produce una spaziatura di riga maggiore per separarlo, in
modo evidente, dal precedente. E’ previsto anche il tag di chiusura </P>, solitamente però è
omesso, poiché i browser capiscono che un paragrafo è terminato non appena incontrano un nuovo
tag di apertura.
Il tag <P> allinea il testo per default a sinistra. E’ comunque possibile assegnare al paragrafo un
allineamento diverso, grazie all’attributo:
ALIGN=”allineamento”
Le possibilità previste sono:
<P ALIGN=”left”>
allinea il paragrafo a sinistra (di default)
<P ALIGN=”right”>
allinea il paragrafo a destra
<P ALIGN=”center”>
allinea il paragrafo al centro
<P ALIGN=”justify”>
giustifica il paragrafo
SEPARAZIONE
<DIV>
Prevede l’uso del tag di chiusura </DIV>.
Usato assieme all’attributo ALIGN consente di marcare una parte del documento e di gestirne
l’allineamento.
<DIV ALIGN=”allineamento”>
Un po’ come fa il tag <P>, ma a differenza di quest’ultimo, non utilizza spaziature di riga
maggiorate.
INTERVENIRE SUL TESTO
<FONT>
Prevede l’uso del tag di chiusura </FONT>.
Formatta il testo in base a quanto specificato negli attributi, infatti, da solo il tag <FONT> non serve
a nulla, deve utilizzare almeno uno dei tre attributi seguenti:
FACE
modifica il tipo di carattere applicato al testo.
Se il carattere specificato non è presente nella macchina dell’utente, il browser utilizza il carattere di
default, che solitamente è il “Times New Roman”. Per evitare il problema è necessario utilizzare
solo i caratteri più diffusi: quelli che sono comunemente installati da tutti i sistemi operativi, per
esempio l’”arial”, il “courier”, il “times new roman”, e il “verdana”.
Esempio:
<FONT FACE=”arial”>pokebook.it – arial</FONT>
<FONT FACE=”courier”>pokebook.it – courier</FONT>
<FONT FACE=”times new roman”>pokebook.it – times new roman</FONT>
<FONT FACE=”verdana”>pokebook.it – verdana</FONT>
SIZE
Modifica la dimensione del testo.
I valori che questo attributo supporta vanno dall’1 al 7.
Esempio:
<FONT SIZE=”valore”>pokebook.it</FONT>
COLOR
Modifica il colore del testo
Permette di usare per il testo colori diversi dal nero di default. I colori si esprimono attraverso i
nomi inglesi corrispondenti o attraverso valori esadecimali.
Esempio:
<FONT COLOR=”red”>pokebook.it</FONT>
<B>
Prevede il tag di chiusura </B>.
Il testo compreso tra questi tag è trasformato in grassetto.
<I>
Prevede il tag di chiusura </I>.
Il testo compreso tra questi tag è trasformato in corsivo.
<U>
Prevede il tag di chiusura </U>.
Il testo compreso tra questi tag è sottolineato.
<SUP>
Prevede il tag di chiusura </SUP>.
Il testo compreso tra questi tag è trasformato in apice.
Esempio: 32
3<SUP>2</SUP>
<SUB>
Prevede il tag di chiusura </SUB>.
Il testo compreso tra questi tag è trasformato in pedice.
Esempio: H2O
H<SUB>2</SUB>O
<TT>
Prevede il tag di chiusura </TT>.
Il testo compreso tra questi tag è visualizzato a spaziatura fissa, questo significa che una “m”
occuperà lo stesso spazio di una “i”.
<BLINK>
Prevede il tag di chiusura </BLINK>.
Il testo compreso tra questi tag, in Netscape, lampeggia.
<MARQUEE>
Prevede il tag di chiusura </MARQUEE>.
Il testo compreso tra questi tag, in Internet Explorer, scorre.
TAG LOGICI
Nella pratica i tag logici sono poco usati, per questo motivo non saranno approfonditi né trattati in
modo esaustivo, si vedranno solo alcuni esempi.
INDIRIZZO
<ADDRESS>
E’ composto dal tag di apertura <ADDRESS> e dal tag di chiusura </ADDRESS>.
Il suo scopo è marcare gli indirizzi all’interno del documento, di qualsiasi tipo: e-mail, civico, ecc.
Esempio:
<ADDRESS>[email protected]</ADDRESS>
TITOLI
<Hn>
H sta per Header ovvero titolo.
Prevede l’uso del tag di chiusura </Hn>.
Ha il compito di evidenziare i titoli nel documento.
N, il numero associato al tag, è il valore che definisce l’importanza e la dimensione del titolo, tale
valore può andare da 1 a 6. Il tag prevede anche spaziature di paragrafo rispetto agli elementi che
seguono e può supportare l’attributo ALIGN.
Esempio:
<H1>titolo 1</H1>
<H2>titolo 2</H2>
<H3>titolo 3</H3>
<H4>titolo 4</H4>
<H5>titolo 5</H5>
<H6>titolo 6</H6>
CITAZIONE
<BLOCKQUOTE>
Prevede il tag di chiusura </BLOCKQUOTE>.
Il testo compreso tra questi tag, in genere, è visualizzato come un blocco di testo rientrato.
10. ELENCHI
ELENCHI ORDINATI
<OL>
Un elenco ordinato si delimita dai tag <OL> di apertura e </OL> di chiusura, ogni elemento della
lista deve essere preceduto dal tag <LI>.
OL sta per Ordered List (Lista Ordinata),
LI sta per List Item (Oggetto della Lista).
Es (FIG 1):
<OL>
<LI>Primo
<LI>Secondo
<LI>Terzo
<LI>Etc…
</OL>
FIG. 1
Se non si specifica nulla l’elenco è di tipo numerato. Le ultime versioni di html prevedono la
possibilità di utilizzare sistemi di indicizzazione diversi, è sufficiente aggiungere nel tag di apertura
un attributo:
TYPE
Indicizzazione alfabetica maiuscola:
<OL TYPE=A>
<LI>Primo
<LI>Secondo
</OL>
FIG. 2
Indicizzazione alfabetica minuscola:
<OL TYPE=a>
<LI>Primo
<LI>Secondo
</OL>
FIG. 3
Indicizzazione con numeri romani maiuscoli:
<OL TYPE=I>
<LI>Primo
<LI>Secondo
</OL>
FIG. 4
Indicizzazione con numeri romani minuscoli:
<OL TYPE=i>
<LI>Primo
<LI>Secondo
</OL>
FIG. 5
START
Attraverso l’uso dell’attributo START è possibile far iniziare il conteggio da un numero diverso da
1.
START=valore
Es:
<OL START=5>
<LI>Primo
<LI>Secondo
</OL>
FIG. 6
ELENCHI NON ORDINATI
<UL>
Un elenco non ordinato si delimita dai tag <UL> di apertura e </UL> di chiusura, ogni elemento
della lista deve essere preceduto dal tag <LI>.
UL sta per Unordered List (Lista Non Ordinata),
LI sta per List Item (Oggetto della Lista).
Es (FIG 7):
<UL>
<LI>Primo
<LI>Secondo
<LI>Terzo
<LI>Etc…
</UL>
FIG. 7
Se non specificato l’elenco sarà composto da una serie di pallini, le alternative sono:
Pallini vuoti:
<UL TYPE=circle>
<LI>Primo
<LI>Secondo
</UL>
FIG. 8
Quadratini:
<UL TYPE=square>
<LI>Primo
<LI>Secondo
</UL>
FIG. 9
LISTA DI DEFINIZIONI
<DL>
Una lista di definizioni si delimita dai tag <DL> di apertura e </DL> di chiusura, ogni elemento
della lista è composto da un termine e da una definizione, il termine si introduce con il tag <DT>, la
definizione con <DD>.
DL sta per Definition List (Lista di Definizioni),
DT sta per Definition Term (Termine da definire),
DD sta per Definition Defined (Definizione del termine).
Es (FIG 10):
<DL>
<DT>Primo
<DD>Descrizione punto primo
<DT>Secondo
<DD>Descrizione punto secondo
</DL>
FIG. 10
ELENCHI STRUTTURATI
Un elenco strutturato non è altro che la combinazione di più elenchi semplici; è possibile chiarirsi le
idee osservando l’esempio sottostante.
<OL>
<LI>Primo punto
<br>
<UL>
<LI>secondo livello
<LI>secondo livello
</UL>
<LI>Secondo punto
<br>
<OL>
<LI>secondo livello
<br>
<UL>
<LI>terzo livello
<LI>terzo livello
</UL>
<LI>secondo livello
</OL>
<LI>Terzo punto
</OL>
FIG. 11
11. TABELLE (vedi)
12. IMMAGINI
L’aspetto grafico di una pagina web ad oggi è molto importante, non può più essere sottovalutato.
Una pagina convincente oltre ad un sostanzioso contenuto, necessita di elementi grafici capaci di
caratterizzarla e di distinguerla dalla massa. Tutto questo deve essere fatto con la consapevolezza
dei limiti imposti dalle attuali tecnologie: Internet, per come è conosciuta dalla maggioranza dei
suoi utenti, è ancora molto lenta, non consente rapidi trasferimenti di grosse quantità di dati e ciò
condiziona le scelte grafiche e stilistiche di una pagina.
I formati grafici più utilizzati sul web sono due:
GIF (Graphics Interchange Format)
JPEG (Joint Photographics Experts Group)
La scelta dei formati è limitata ai due citati, anche se i browser sono in grado di gestirne molti di
più, a causa delle loro capacità di compressione, molto efficaci per diminuire il peso delle immagini
e di conseguenza i tempi di trasferimento sulla rete (per maggiori informazioni si veda il capitolo
“Formati Grafici”).
Diversamente da ciò che accade nella maggior parte degli editor di testi stile Word, un documento
html non incorpora in se le immagini, bensì si limita a dichiarare lo spazio che queste occupano
nella pagina, i browser poi, le richiamano dall’esterno attraverso il percorso specificato nel codice, e
le visualizzano.
Per richiamare le immagini si usa il tag
<IMG SRC=”percorso/nome_file”>
Dove IMG sta per image: immagine, e SRC sta per search ed indica il percorso che il browser dovrà
compiere per raggiungere l’immagine. Non è previsto il tag di chiusura, in effetti, il tag non
delimita nulla quindi non né ha bisogno.
<IMG SRC=”logo.gif”>
DIMENSIONI
Nell’esempio precedente non si sono specificate le dimensioni dell’immagine tanto il browser le ha
ricavate autonomamente. Questo comporta però tempi di visualizzazione, per la pagina, più lunghi.
In effetti il browser non può ricavare le misure dell’immagine prima del completo download del
file. Solitamente il testo di una pagina web si scarica prima delle immagini, il browser lo impagina,
poi appena può disporre dell’immagine ne ricava le dimensioni e la inserisce nella pagina,
riorganizzando però tutto il documento qualora lo spazio lasciato di default per la stessa non
corrisponda alle sue effettive dimensioni. Per evitare quest’inconveniente il tag <IMG> prevede un
paio di utili attributi.
WIDTH
Consente di specificare la dimensione orizzontale dell’immagine. Dimensione che può essere
espressa sia in pixel sia in percentuale. E’ possibile applicare all’immagine dimensioni differenti da
quelle effettive, provocando riduzioni o ingrandimenti. Nel primo caso l’immagine sarà più pesante
del necessario, nel secondo perderà in qualità. Per questi motivi è consigliabile usare le effettive
dimensioni dell’immagine.
In Pixel.
Le dimensioni naturali dell’immagine utilizzata sono 242 pixel in orizzontale e 71 in verticale. In
questo esempio si noti come l’immagine venga rimpicciolita dal valore usato nell’attributo width.
<IMG SRC=”logo.gif” WIDTH=”150”>
In Percentuale.
In questo caso l’immagine si adatterà alle dimensioni della finestra del browser.
<IMG SRC=”logo.gif” WIDTH=”50%”>
HEIGHT
Consente di specificare la dimensione verticale dell’immagine. Dimensione che può essere espressa
sia in pixel sia in percentuale.
In Pixel.
<IMG SRC=”logo.gif” HEIGHT=”100”>
Uso combinato dei due attributi.
<IMG SRC=”logo.gif” WIDTH=”150” HEIGHT=”150”>
Come si è già detto, è preferibile usare le reali dimensioni dell’immagine per evitare i problemi di
stiramento e perdita di qualità visti negli esempi precedenti. Si ricorda, inoltre, che l’uso di tali
attributi favorisce l’impaginazione dell’eventuale testo presente nel documento. Per l’immagine
utilizzata nei precedenti test, il tag corretto deve essere:
<IMG SRC=”logo.gif” WIDTH=”242” HEIGHT=”71”>
ALLINEAMENTO
L’immagine che si trova posta all’interno di un testo, è considerata alla stregua di un qualsiasi
carattere, magari di dimensioni inconsuete ma pur sempre un carattere (FIG 6).
FIG. 6
Si osservi in figura 6 come l’immagine venga posta immediatamente dopo il testo e come questo
ricominci subito dopo. Lo spazio vuoto, evidenziato dalle frecce rosse, è dovuto alla dimensione
dell’immagine. Si noti in figura 7 come gli stessi effetti si presentino anche in documenti dove è lo
stesso testo ad avere dimensioni diverse rispetto a ciò che lo circonda.
FIG. 7
ALIGN
Per modificare l’allineamento del testo attorno all’immagine il tag <IMG> prevede l’attributo
ALIGN. Le opzioni disponibili sono:
TOP
BOTTOM
MIDDLE
LEFT
RIGHT
Es (FIG 8):
<IMG SRC=”logo.gif” ALIGN=”TOP”>
FIG. 8
L’opzione TOP allinea il testo con la parte superiore dell’immagine.
Es (FIG 9):
<IMG SRC=”logo.gif” ALIGN=”BOTTOM”>
FIG. 9
L’opzione BOTTOM allinea il testo con la base dell’immagine. Ed è l’impostazione di default, cioè
quello che si ottiene se non si specifica nulla nel tag <IMG>.
Es (FIG 10):
<IMG SRC=”logo.gif” ALIGN=”MIDDLE”>
FIG. 10
L’opzione MIDDLE allinea il testo centrandolo rispetto all’immagine.
Es (FIG 11):
<IMG SRC=”logo.gif” ALIGN=”LEFT”>
FIG. 11
L’opzione LEFT allinea il testo alla destra dell’immagine.
Es (FIG 12):
<IMG SRC=”logo.gif” ALIGN=”RIGHT”>
FIG. 12
L’opzione RIGHT allinea il testo alla sinistra dell’immagine.
SPAZIO PERIMETRALE
HSPACE
Questo attributo permette di stabilire la distanza tra i lati destro e sinistro dell’immagine e il testo.
HSPACE=”valore in pixel”
Es (FIG 13):
<IMG SRC=”logo.gif” HSPACE=”20”>
FIG. 13
VSPACE
Questo attributo permette di stabilire la distanza tra i lati superiore e inferiore dell’immagine e il
testo.
VSPACE=”valore in pixel”
Es (FIG 14):
<IMG SRC=”logo.gif” VSPACE=”20”>
FIG. 14
BORDI
BORDER
L’attributo BORDER permette di applicare all’immagine un bordo:
BORDER=”valore in pixel”
Se non specificato, il bordo non è applicato all’immagine, e ciò è sempre vero tranne nei casi in cui
si utilizza l’immagine anche come link, in queste situazioni i browser applicano il bordo
automaticamente, se ciò dovesse dar fastidio, per rimuovere il bordo, è sufficiente utilizzare
l’attributo BORDER con il valore settato a 0.
Es (FIG 15):
<IMG SRC=”logo.gif” BORDER=”2”>
FIG. 15
ALTERNATIVA
ALT
Quest’ultimo attributo consente di associare testo alle immagini. L’effetto visivo prodotto si rivela
quando il puntatore del mouse è fatto passare sopra l’immagine: il testo appare sotto forma di
palloncino (FIG 16).
Es:
<IMG SRC=”logo.gif” ALT=”pokebook.it”>
FIG. 16
E’ utile anche nei casi in cui l’utente abbia scelto di non richiamare le immagini, o stia utilizzando
un browser testuale (FIG 17), l’immagine non è visibile, ma la si può descrivere, avvisando l’utente
di ciò che si sta perdendo.
FIG. 17
13. COLLEGAMENTI IPERTESTUALI
I documenti html sono conosciuti anche con il nome di ipertesti, perché possono essere consultati in
modo non lineare (a differenza di quanto avviene con i testi cartacei), ciò significa che non
dovranno per forza essere letti pagina per pagina, capitolo per capitolo, dall’inizio alla fine, ma
consultati dinamicamente, passando dall’uno all’altro, abbandonandone alcuni per approfondirne
altri collegati, oppure inerenti, a volte anche casuali. Portando a percorsi inaspettati e imprevedibili.
Lo strumento che consente questo nuovo modo di fruire dell’informazione è l’HiperLink,
rappresentato dal tag
<A>
Dove la A sta per Anchor, in italiano Ancora, necessita sia del tag di apertura sia del tag di chiusura
e assieme delimitano l’oggetto (testo o immagine) che funzionerà da portale per la nuova risorsa
(diventerà l’oggetto su cui l’utente cliccherà).
Il tag <A> deve essere associato a qualche attributo, il più importante è, senza dubbio, HREF che
sta per Hypertext Reference, il quale definirà il collegamento alla pagina o risorsa in generale, da
richiamare.
Es:
<A HREF=”percorso_alla_risorsa”>(testo o immagine)</A>
COLLEGAMENTI A RISORSE INTERNE
E’ possibile creare link (link sta per collegamento) a risorse interne al proprio sito. Per esempio si
supponga di voler richiamare la pagina seconda.htm attraverso un link dalla pagina prima.htm, e
che entrambe siano presenti nella stessa cartella. Allora il codice che dovrà essere inserito nella
pagina prima.htm è:
<A HREF=”seconda.htm”>clicca qui</A>
Il risultato è visibile nella figura 1, e sottolinea come solo il testo tra i tag <A> e </A> funga da
sistema d’accesso alla risorsa collegata, evidenziato attraverso la sottolineatura e di colore blu (sono
le impostazioni standard nella maggior parte dei browser). L’utente cliccando sul link richiamerà la
pagina collegata che si sostituirà all’attuale nella stessa finestra del browser.
FIG. 1
COLLEGAMENTI A RISORSE ESTERNE
Nell’esempio seguente si definirà un link ad una risorsa esterna al proprio sito: si supponga di voler
inserire un collegamento al sito pokebook.it, il tag dovrà essere composto nel modo seguente
<A HREF=”http://www.pokebook.it”>entra in pokebook</A>
E’ possibile sostituire il testo con un’immagine, ecco come fare: si supponga di voler usare
l’immagine logo.gif posizionata nella stessa cartella della pagina che la utilizza
<A HREF=”http://www.pokebook.it”><IMG SRC=”logo.gif”></A>
FIG. 2
Ora è l’immagine il punto d’ingresso alla risorsa collegata, come si può notare dalla figura 2,
l’immagine è evidenziata da un bordo, se la cosa non fosse gradita basta inserire l’attributo
BORDER nel tag <IMG> e settarlo a zero (FIG 3):
<A HREF=”http://www.pokebook.it”><IMG SRC=”logo.gif” BORDER=”0”></A>
FIG. 3
Per avere ulteriori informazioni e chiarimenti sulle modalità di definizione del percorso ad una
risorsa, consultare il capitolo sui collegamenti (come definire un percorso).
Un altro attributo molto utile da associare al tag <A> è
TARGET=”_new”
L’opzione “_new” ordina al browser di aprire la risorsa collegata al link in una nuova finestra. Ecco
cosa succede: se il visitatore clicca su un link cui è stato applicato tale attributo, il bowser prima
lancia una nuova sessione di se stesso, in pratica apre una nuova finestra di sé e, in essa, richiama la
risorsa associata al link. Questo sistema consente di non perdere i propri visitatori nel caso in cui si
desideri inserire nelle proprie pagine link a risorse esterne, in altre parole a siti altrui.
Es:
<A HREF=”http://www.pokebook.it” TARGET=”_new”>entra in pokebook</A>
COLLEGAMENTI A E-MAIL
Modificando il contenuto dell’attributo HREF è possibile creare dei collegamenti ai programmi di
posta elettronica presenti nella macchina del visitatore, compilando in modo automatico anche
alcuni campi. Ecco come:
<A HREF=”mailto:e-mail”>scrivimi</A>
sostituendo a “e-mail” l’indirizzo di posta. Quando il visitatore cliccherà sul link, si aprirà il
programma di posta predefinito con il campo A: (in inglese TO:) già compilato.
Es:
<A HREF=”mailto:[email protected]”>scrivimi</A>
FIG. 4
È possibile anche predefinire il contenuto del campo oggetto (FIG 5).
Es:
<A HREF=”mailto:[email protected]?SUBJECT=prova oggetto”>scrivimi</A>
FIG. 5
COLLEGAMENTI INTERNI AL DOCUMENTO
Un collegamento interno ad un documento non è altro che un link all’interno di una pagina, che
permette di saltare velocemente da un punto all’altro dello stesso documento, ed è generato sempre
grazie all’uso del tag <A> con qualche piccola particolarità.
Es:
Si supponga di redigere un documento discretamente complesso diviso in capitoli e tutto in una
stessa pagina, per il visitatore sarà difficile trovare immediatamente ciò che più gli interessa, infatti,
sarà costretto ad usare esclusivamente le barre di scorrimento.
Ecco un esempio:
TITOLO 1
Bla bla bla bla …
TITOLO 2
Bla bla bla bla …
TITOLO 3
Bla bla bla bla …
Si desidera migliorare l’usabilità del documento, implementando un indice, capace di portare il
visitatore direttamente alla sezione desiderata:
INDICE
Titolo 1
Titolo 2
Titolo 3
DOCUMENTO
TITOLO 1
Bla bla bla …
Etc…
La cosa può essere ottenuta tramite l’uso dei riferimenti, paragonabili a delle etichette, che
consentono di identificare dei punti nel documento, ad ogni riferimento è associato un nome,
utilizzato successivamente per poterli richiamare nei collegamenti. Si applicano attraverso l’uso di
<A NAME=”nome_riferimento”>
Dove si sostituirà “nome_riferimento” con il nome che si vorrà associare a tale posizione.
Nell’esempio, tali tag vanno posti prima del titolo di ogni capitolo:
…
<A NAME=”t1”>
Bla bla bla …
<A NAME=”t2”>
<H1>TITOLO 1</H1>
<H1>TITOLO 2</H1>
Bla bla bla …
…
Come appare evidente dall’esempio ogni riferimento dovrà avere un nome diverso.
A questo punto non resta che completare l’indice nella parte superiore del documento aggiungendo i
link:
…
<H1>INDICE</H1>
<P>
<A HREF="#t1">Titolo 1</A><BR>
<A HREF="#t2">Titolo 2</A><BR>
<A HREF="#t3">Titolo 3</A><BR>
…
Attenzione, il nome del riferimento, nei collegamenti, deve essere preceduto dal simbolo #.
E’ possibile richiamare i riferimenti in un documento anche da pagine diverse. Riconsiderando
l’esempio, si potrebbe creare una pagina esclusivamente per mantenere l’indice, e richiamare i
riferimenti nell’altra. E’ sufficiente modificare i collegamenti nell’indice in questo modo:
<A HREF=”percorso/nome_pagina#nome_riferimento”>
14. IL COLORE
Vi sono due modi per definire un colore:
Il primo usa il nome del colore in inglese, qui di seguito sono elencati i più comuni.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
15.
yellow
Tale sistema è molto semplice e di facile comprensione, ma limitato nel numero di colori
disponibili: le sfumature, come un rosso tenue, non si possono ottenere.
Il secondo sistema usa una sequenza di valori esadecimali:
Es:
#000000 = nero
Tali sequenze sono definite come combinazioni dei tre colori:
ROSSO – VERDE – BLU
R–G–B
#RRGGBB
RR, GG e BB vanno sostituiti con un valore esadecimale di due cifre, più alto è questo valore più
importanza avrà quell’ingrediente nel colore risultante.
Le cifre esadecimali sono: 0123456789ABCDEF, quindi RR, GG e BB possono assumere un valore
compreso tra 00 (zero) e FF (255, il massimo). Questo significa che si hanno a disposizione 256 x
256 x 256 possibili combinazioni e quindi colori, per un totale che si aggira attorno ai 16 milioni di
colori. Ecco alcuni esempi:
#FFFFFF = bianco
#000000 = nero
#FF0000 = rosso
#00FF00 = verde
#0000FF = blu
#FFFF00 = giallo
#888888 = grigio
Questo metodo sembra più complesso, ed in effetti lo è, ma si svincola dai limiti del precedente
permettendo di ottenere qualsiasi tonalità di colore si desideri.
Il modo più semplice per conoscere il codice di un colore è quello di utilizzare un programma di
grafica capace di restituire tale informazione durante la selezione del colore.
Vediamo come si ottiene ciò in Photoshop 5.5 della Adobe:
Fare doppio clic sul colore di primo piano nella barra degli strumenti (FIG 1).
FIG. 1
Nella finestra “Selettore colore” (FIG 2) che si aprirà, selezionare il colore desiderato.
FIG. 2
Nella stessa finestra in basso a destra (FIG 3) vi è una cella preceduta dal simbolo: #, in essa si
trova il codice esadecimale che descrive il colore selezionato.
FIG. 3
A questo punto sarà sufficiente copiarlo e incollarlo nel proprio documento.
Non si possiede Photoshop? Allora ci si può appoggiare a programmi alternativi e non
necessariamente a pagamento, per esempio si potrebbe utilizzare il Composer di Netscape: l’editor
di pagine web fornito gratuitamente assieme al browser.
Vediamo come ottenere da questo programma il codice di un arancione:
Aprire Netscape (browser), in basso a destra vi saranno alcune icone, fare clic sull’ultima (foglietto
e penna): è il pulsante che lancia il Composer
FIG. 4
Fare un clic sulla freccia posta a lato della cella “font color”, nella barra degli strumenti di
Composer (FIG 5).
FIG. 5
Se la piccola lista di colori non dovesse essere sufficiente fare un clic sul pulsante “Other…”
(“Altri…”) nella parte bassa del menu. Selezionare il colore desiderato, ritornare nella finestra
principale e inserire del testo qualsiasi nel documento. Il testo apparirà del colore selezionato (FIG
6).
FIG. 6
Aprire il menu “view” e fare clic su “page source” (FIG 7).
FIG. 7
Il documento html creato dal Composer sarà visualizzato in una nuova finestra, dove si troverà
anche il codice del colore utilizzato per il testo (FIG 8).
FIG. 8
A questo punto sarà sufficiente copiarlo e incollarlo nel proprio documento.
15. COLLEGAMENTI ASSOLUTI E RELATIVI
I collegamenti possono essere di due tipi: assoluti o relativi.
Le cose appariranno più chiare con un esempio:
Si ipotizzi di utilizzare la cartella “documenti”, nell’hard disk “C:” del computer, come cartella
radice (principale) del sito web che si desidera creare.
La pagina iniziale del sito (l’home page) è in fase di costruzione e la si è chiamata “index.htm”. Si
desidera inserire in tale pagina l’immagine “pippo.gif”, anche questa memorizzata nella cartella
principale: “documenti” (FIG 1).
FIG. 1
Nel file index.htm sarà necessario usare il tag IMG per richiamare l’immagine specificandone il
percorso (la “strada” che il browser deve fare per raggiungere l’immagine) nell’attributo SRC:
<IMG SRC=”percorso/nome_file”>
Il problema dei collegamenti sta proprio nel sostituire “percorso/nome_file” con qualcosa di
concreto.
COLLEGAMENTI ASSOLUTI
I collegamenti assoluti specificano dettagliatamente la posizione del file all’interno della struttura di
cartelle (directory) di un computer.
Nell’esempio significa sostituire “percorso/nome_file” con
“file:///C|/documenti/pippo.gif”
Il tag da inserire nella pagina “index.htm” sarà:
<IMG SRC=“file:///C|/documenti/pippo.gif”>
Osserviamo meglio:
• file:///
rappresenta il protocollo (insieme di regole su come trattare un oggetto) che desideriamo
utilizzare per gestire il file.
• C|
rappresenta l’hard disk o disco rigido che conserva il file interessato, in questo esempio
“C:”, i “:” sono sostituiti dal simbolo “|”.
• /documenti/
rappresenta il percorso partendo dalla “radice” del disco rigido (in questo caso “C:”), fino
alla cartella che contiene il file “pippo.gif”. I caratteri “/” posti prima e dopo la cartella
servono per separare tra di loro i nomi delle cartelle che compongono il percorso.
• pippo.gif
è il nome del file che si desidera richiamare
A questo punto l’immagine sarà richiamata senza problemi dal browser in locale. Peccato che le
cose non funzionino più quando il lavoro è messo in rete (su internet). Questo è dovuto al
Collegamento Assoluto: infatti, in rete, nella macchina che ospita le pagine del sito i dati vengono
memorizzati in strutture di cartelle diverse dalla realtà locale, non esisterà più il percorso usato nel
tag IMG, sarà qualcosa di diverso, quindi il browser non riuscirà a rintracciare il file.
Un percorso assoluto può essere definito anche in questo modo:
“http://nomedelsito/pippo.gif”
Nell’esempio il tag IMG diventerebbe
<IMG SRC=“http://nomedelsito/pippo.gif”>
Dove
• http://
rappresenta il protocollo usato, e consente di prelevare dati tramite un indirizzo internet.
• nomedelsito
è l’indirizzo internet della pagina iniziale, per esempio: www.pokebook.it. Rappresenta la
cartella radice in locale, nell’esempio la cartella “documenti”.
• /
serve sempre per dividere tra loro i nomi delle cartelle che compongono il percorso.
• pippo.gif
nome del file che si desidera richiamare.
Tale sistema è usato per richiamare nelle proprie pagine risorse appartenenti ad altri siti, più spesso
per creare dei collegamenti ipertestuali a pagine altrui.
COLLEGAMENTI RELATIVI
I collegamenti relativi indicano il percorso a partire dalla posizione del file che contiene il
collegamento.
Nell’esempio significa sostituire “percorso/nome_file” con
“pippo.gif”
Il tag da inserire nella pagina “index.htm” sarà:
<IMG SRC=“pippo.gif”>
E’ stato sufficiente inserire il nome del file. Nell’esempio la pagina “index.htm” si trova nella stessa
cartella del file “pippo.gif”, quindi il browser quando leggerà la pagina sarà già posizionato nella
cartella “documenti” e preleverà tranquillamente il file “pippo.gif”.
Qui di seguito, attraverso esempi, sono trattati alcuni casi particolari.
La situazione generale rimane la stessa dell’esempio precedente, però si decide di utilizzare una
sottocartella “img” per contenere le immagini usate nel sito (FIG 2).
Nella cartella “documenti” ci sarà il file “index.htm” e nella sottocartella “img” il file “pippo.gif”.
FIG. 2
Si desidera sempre inserire l’immagine “pippo.gif” nella pagina “index.htm”.
Il tag IMG sarà così definito:
<IMG SRC=”img/pippo.gif”>
Il browser mentre visualizza il file “index.htm” si posiziona nella cartella che lo contiene, quindi
per richiamare il file “pippo.gif” è necessario specificare il nome della sottocartella: “img”, e il file
da prelevare: “pippo.gif”, separando le due cose con una “/”.
Se la situazione fosse diversa, come mostra la figura 3, con “index.htm” sempre in “documenti” e
“pippo.gif” nella cartella “img3”, si dovrebbe scrivere:
<IMG SRC=”img/img2/img3/pippo.gif”>
FIG. 3
Altra situazione (FIG 4): “index.htm” ancora in “documenti”, “pippo.gif” in “img”, una seconda
pagina html con il nome di “curriculum.htm” nella cartella “personale”. Si desidera utilizzare
“pippo.gif” nella pagina “curriculum.htm”.
FIG. 4
Nella pagina “curriculum.htm” il tag IMG deve essere così definito:
<IMG SRC=”../img/pippo.gif”>
In dettaglio:
• ../
indica al browser di indietreggiare nella struttura di cartelle, quindi nell’esempio si sposterà
•
dalla cartella personale, dove si trova a causa della lettura del file “curriculum.htm”, alla
cartella “documenti”.
img/pippo.gif
è il percorso dalla cartella “documenti” fino al file “pippo.gif”.
E’ facile notare che il nome della cartella radice, nell’esempio “documenti”, non è mai usato per
definire i percorsi ad un file, questo perché, in rete, a tale cartella non è possibile attribuire un nome
specifico.
Con questo sistema il sito funzionerà sia in locale sia trasportato in rete.
16. FORMATI GRAFICI
Nella realizzazione di un sito web è necessario tenere bene in mente che il contenuto ha più
importanza della forma. Ma con ciò non si vuole spingere nessuno ad abbandonare la forma, anzi, il
contenuto del sito deve essere trasmesso all’utente e per farlo nel migliore dei modi è necessario
prestare moltissima attenzione alla forma utilizzata. Lo strumento che consente di dare vivacità e
forma ai documenti web è per eccellenza l’immagine, qui cercheremo di capire che formato
utilizzare per memorizzare le immagini nel miglior modo possibile, e come ottenere il miglior
rapporto tra qualità e dimensioni. Più l’immagine “pesa” e più tempo impiegherà per scaricarsi. I
formati più utilizzati per comprimere le immagini (ridurne il peso) sono due: GIF e JPEG. Non ha
importanza il programma utilizzato per la creazione dell’immagine, né il formato usato dallo stesso
per memorizzarla, tanto per inserirla in una pagina web dovrà essere convertita in uno dei due
formati citati sopra. Per capire quando usare gif e quando jpeg è necessario conoscerne le
caratteristiche, di seguito trattate in dettaglio.
GIF
Graphics Interchange Format
Il numero di colori gestiti dal formato è limitato e può variare da un minimo di 2 colori (1 bit) a un
massimo di 256 (8 bit), indipendentemente dal numero di colori dell’immagine originale. Se
l’immagine da salvare non supera i 256 colori sarà identica all’originale, altrimenti subirà delle
perdite che ne influenzeranno la qualità.
Ecco come lavora il formato in questione:
FIG. 1
99 byte
FIG. 2
139 byte
FIG. 3
139 byte
Le tre immagini precedenti evidenziano il sistema adottato dal formato per la compressione dei dati:
si memorizza il colore e il numero di volte che dovrà essere ripetuto, tipo “i prossimi 10 pixel sono
bianchi, poi 10 gialli, poi 10 rossi, etcc…”, questo evita di memorizzare ogni pixel e riduce lo
spazio necessario alla memorizzazione dell’immagine. Più pixel uguali trova in successione
maggiore sarà la compressione. Se l’immagine non dispone di pixel dello stesso colore limitrofi, il
peso dell’immagine non otterrà benefici, anzi aumenterà.
Le immagini di figura 1, 2, 3 sottolineano come il sistema funzioni per righe, mentre la disposizione
dei pixel in verticale non ha nessuna influenza sulla compressione, in effetti le figure 2 e 3 variano
entrambe tre volte per ogni riga e il peso coincide.
JPEG
Joint Photographic Experts Group
Non ci sono limiti per il numero di colori nell’immagine, il jpeg lavora sempre alla profondità di 32
bit colore. Tale formato utilizza un sistema di compressione che prevede la necessaria perdita di
dati, tale tipo di algoritmo è solitamente definito di tipo distruttivo (lossy), l’immagine compressa
non avrà più la stessa qualità presente nell’originale, e non potrà più essere ripristinata.
E’ possibile decidere il rapporto di compressione da utilizzare, più alto sarà il valore di
compressione più dati verranno rimossi dall’immagine e di conseguenza più leggera sarà la stessa
(FIG 7), mentre più basso sarà tale valore meno dati verranno rimossi e più pesante resterà
l’immagine (FIG 5).
Il formato jpeg divide l’immagine in blocchi, per ognuno memorizza solo il colore ottenuto dalla
media dei colori presenti nel blocco, questo provoca, in caso di compressioni elevate, la presenza di
quadrati ben visibili e antiestetici, soprattutto nelle parti a tinta unita dell’immagine (FIG 6, FIG 7).
Quando usare GIF e quando JPEG?
La risposta è molto semplice: si utilizzerà il formato gif quando l’immagine è composta da pochi
colori, mentre jpeg in caso di immagini fotorealistiche e/o piene di sfumature.
Esempio:
Quale formato usare per comprimere un’immagine fotorealistica
L’immagine originale era in formato BMP e pesava 95 K.
Il formato GIF non è l’ideale poiché il numero di colori è elevato e questi non si ripetono spesso in
sequenza. In effetti, il peso dell’immagine rimane gravoso (FIG 4).
FIG. 4
Immagine GIF a 256 colori, peso 25,57 K
Ridurre il numero di colori riduce il peso dell’immagine ma la qualità ne risente pesantemente (FIG
5).
FIG. 5
Immagine GIF 16 colori, peso 8,195 K
Utilizzando il formato JPEG le cose migliorano (FIG 6): la qualità rimane buona e il peso si riduce
notevolmente. Tuttavia onestamente è ancora troppo pesante.
FIG. 6
Immagine JPEG qualità settata a 80% in photoshop, peso 19,55 K
Adottando una compressione più spinta, riduciamo la qualità e il peso (FIG 7). E’ possibile
cominciare a notare l’effetto indesiderato dei quadratini.
FIG. 7
Immagine JPEG qualità settata a 10% in photoshop, peso 4,116 k
Le cose peggiorano se riduciamo ancora la qualità dell’immagine a vantaggio del peso (FIG 8): i
quadrati sono ancora più evidenti e i dettagli si perdono e confondono.
FIG. 8
Immagine JPEG qualità settata a 2% in photoshop, peso 3,292 k
In questa situazione la soluzione migliore rimane l’uso del formato JPEG, poi saranno necessari
alcuni test di valutazione per determinare il livello di compressione più adatto, livello che può
variare a seconda dell’immagine e del programma utilizzato.
Esempio:
Quale formato usare per comprimere un’immagine con un limitato numero di colori
L’immagine originale era salvata in BMP e pesava 34,6 K.
Il formato JPEG non si comporta malissimo come si può facilmente notare dalla figura 9, però è
possibile fare di meglio: ottenere la stessa qualità con un peso inferiore.
FIG. 9
jpeg qualità 60%, peso 8,019 K
Proviamo con un’immagine sempre in JPEG ma con un livello di compressione più elevato. I
risultati visibili in figura 10 evidenziano la riduzione del peso ma anche una notevole perdita di
qualità.
FIG. 10
jpeg qualità 10%, peso 3,1 K
Utilizzando il formato GIF, figura 11, notiamo invece come l’immagine mantenga un buon aspetto
anche se il numero di colori usati viene ridotto (32 invece dei 256 permessi), il peso si è ridotto
notevolmente e il risultato globale è nettamente migliore rispetto a quanto ottenuto in figura 10.
FIG. 11
gif 32 colori, peso 2,919 K
Aumentando il numero di colori utilizzati per il salvataggio dell’immagine in formato GIF, figura
12, si ottengono pochi miglioramenti qualitativi non sufficienti per accettare l’aggravio conseguito
in termini di peso.
FIG. 12
gif 256 colori, peso 6,45 K
Concludendo in questo caso la soluzione migliore prevede l’uso del formato GIF. Qualche prova
deve essere fatta per testare il numero di colori necessari all’immagine, questo per ottenere il
miglior grado di compressione possibile.