IL LINGUAGGIO HTML

Materie:	Appunti
Categoria:	Informatica
Voto:	1.5 (2)
Download:	134
Data:	29.05.2006
Numero di pagine:	26
Formato di file:	.doc (Microsoft Word)

Guida all’uso del linguaggio HTML
Corso di HTML
HTML E' una sigla che deriva dalle parole HyperText Markup
Language Innanzitutto, l'HTML è un "metalinguaggio", nel senso che
non è un linguaggio di programmazione vero e proprio, non si preoccupa
di fornire script (al massimo quelli dovrete inserirli voi, se volete programmare in Java o con ActiveX), ma si basa solo e unicamente su indicazioni, dette "tag", atte a visualizzare del testo o a delimitare dei
campi. E' incredibile come queste poche istruzioni, rigorosamente
delimitate da apici < e > , possano generare veri e propri capolavori d'impaginazione, roba che per farlo su alcune riviste hanno bisogno di programmi costosi tipo Quark-Xpress e di un grafico professionista
pagato apposta!
Con l'HTML invece il grafico potrete farlo voi, comodamente a casa vostra, e senza pagare una lira (a parte quelle che, naturalmente,
dovrete sborsare per la connessione). Le istruzioni vanno solitamente "aperte" e "chiuse" al bisogno, cioè la porzione di testo interessata da questo o da quell'effetto, va delimitata tra e ,
dove la barra / serve appunto a dire al browser "smetti di visualizzare in quel modo".
Questi comandi (tag) consentono al computer di visualizzare dei
documenti ipertestuali e multimediali. Un documento ipertestuale è
un testo che non si deve obbligatoriamente leggere dall'inizio alla fine
(come un romanzo) ma che può essere consultato direttamente in
qualsiasi punto, e che contiene all'interno dei rimandi (links) ad altre
parti del documento che generalmente approfondiscono un determinato argomento.
Un documento multimediale è invece un insieme di informazioni che possono assumere diverse forme integrate fra loro: testo, immagini,
filmati, suoni, ... L'HTML dunque è quel linguaggio che permette a chiunque la scrittura di documenti ipertestuali e multimediali con estrema facilità, essendo stato ottimizzato per tale scopo.
L'HTML è divenuto famoso con il WorldWide Web (WWW),
che rappresenta uno degli aspetti più affascinanti della rete Internet, mettendo a disposizione di milioni di persone in tutto il mondo
informazioni e documenti di ogni genere, contenenti immagini, suoni
e collegamenti ad altri documenti, come in un'enorme ragnatela nella
quale in ogni nodo si trova un'informazione.
Il Server HTTP
Il server http (Hyper Text Transfer Protocol) è una applicazione
attiva sulla macchina che contiene le pagine costituenti il sito.
Agisce da intermediario tra voi ed il disco comportandosi come
uno "juke box", ovvero "facendovi ascoltare a richiesta" la lettura
di un file senza che fisicamente possiate toccarlo. Questa è
ovviamente una garanzia di integrità delle informazioni contenute.
Può funzionare con qualsiasi tipo di file, ma la sua specialità è il trasferimento monodirezionale di files di testo:
I browser richiedono un documento ed il server lo distribuisce.
Lo stesso server, nell'eventualità di una connessione senza
indicazione del documento richiesto ovvero contenente il solo
indirizzo
(Es. http://digiland.libero.it/ ) provvede a fornire comunque una
pagina detta "default page" che può assumere nomi diversi quali Default.htm, Default.asp, index.html, index.htm ... secondo volontà
del provider.
Nel caso di Digiland i nomi preposti sono index.html ed index.htm
(in ordine di priorità). Qualora nessun file tra quelli all'indirizzo
richiesto portasse questo nome apparirebbe una ulteriore pagina
(questa volta generata dal server) contenente l'indice dei files.
Notare che questa opzione è abilitata da Digiland per semplice
cortesia: altri semplicemente avvisano che non vi sono documenti
validi da servire, o addirittura rifiutano la connessione,
facendo apparire il fatidico "Errore 404"
La struttura dello spazio web
Nel vostro disco fisso le cartelle sono organizzate ad albero
partendo da C:\ (radice) ed è possibile accedere ai files solo
digitando il nome. Qualora il file richiesto si trovasse in una
cartella sareste costretti a digitare \NomeCartella\NomeFile
con la barra (backslash) "\" secondo lo stile DOS.
Lo spazio Web A VOI riservato ha la stessa identica struttura:
è un disco a vostra disposizione. Non si chiamerà [C:] o [Z:]
ma bensì http://digilander.iol.it/VostroUserName . Per questo
motivo, se dovrete richiamare in una pagina una immagine che
si trova nella stessa cartella bastera creare un
collegamento ipertestuale senza alcun percorso
(solo il nome del file),
altrimenti sarà necessario indicare anche il nome della cartella
Es: /NomeCartella/NomeFile con la
barra (slash) "/" secondo lo stile URL.
(Uniform Resource Location). Un documento posto in una
cartella potrà accedere ad una immagine sita in radice
semplicemente richiamando /NomeFile.
Vi è concesso aprire tante nuove cartelle quante riteniate
necessarie sul vostro sito; anche se un normale impiego ne
richiede al massimo 3 o 4.
I files possono essere raccolti in cartelle per tipo (pagine,
immagini, suoni) o per argomenti... a piacere. Personalmente
trovo più facile aggiornare il sito sapendo che tutte le immagini
si trovano in un solo posto, senza quindi doverle cercare.
È ammesso che ognuna di queste contenga una pagina index.html,
e ciò diventa raccomandabile qualora ogni cartella contenga una
sezione tematica del sito. È del tutto inutile infatti mettere una
pagina index in una cartella che contiene sole immagini, anche se
in tal modo volendo strafare, si potrebbe avvisare il visitatore dell'errato indirizzo... e mandarlo all'URL voluto.
Il visitatore invece.... dovrà fornire al server l'indirizzo URL
completo, visto che il server ha a che fare con molti altri siti
oltre al vostro.
Il Server FTP
Il server FTP (File Transfer Protocol) è una applicazione attiva
sulla macchina che contiene i files costituenti il sito. Agisce da
intermediario tra voi ed il disco comportandosi come un guardiano: verifica la vostra identità per mezzo dell'UserName e password,
quindi scrive personalmente sul disco ciò che gli viene comunicato. Anche qui
l'accesso ai files è indiretto, oltre che controllato. Può funzionare
in entrambi i sensi con ogni tipo di file, anche se la sua specialità
è il trasferimento di files NON di testo quali files musicali,
immagini ecc.
Il Client FTP
Una piccola descrizione anche se non ha nulla a che fare con il sito... direttamente. Si tratta di una applicazione (un programma per il
vostro PC) studiata appositamente per connettersi al server FTP
e trasmettere a lui i files da caricare sul sito. Normalmente molto semplice è anche piuttosto potente e veloce nai trasferimenti
multipli, talvolta con centinaia di files. Altamente
raccomandabile per la manutenzione dei siti.
Vi sono molti siti che insegnano a metter su pagine web, ma queste poche, basilari regole sono quelle raccomandate da coloro che le pagine le fanno di professione. Pensateci un attimo, e vedrete quanta ricerca ci sta dietro...
Regole importanti
L'attenzione del visitatore
Il browser del visitatore
Di quanti Kilobytes la mia pagina?
Il tema da sviluppare
Dulcis in fundo

Regole importanti !
• La vostra homepage, ovvero la pagina di entrata al sito deve avere un nome particolare: index.htm o index.html (tutto minuscolo). Tale nome non dovrà mai essere assegnato ad una cartella.
• I nomi per i files e per le cartelle del vostro sito è bene siano tutti composti da sole lettere minuscole.
• Usare possibilmente nomi di una sola parola: il nome del documento non ha alcuna importanza ai fini della visualizzazione o della indicizzazione da parte dei motori di ricerca.
• NON usare nei nomi di files e cartelle accenti, spazi, punteggiature o caratteri inusuali quali:
< | ! " £ $ % & / ( ) = ? ^ § * > \
L'attenzione del visitatore
Trenta secondi, cinque dita, tre clic: questo è quanto vi concede il navigatore medio. Sembra uno scherzo, ma è il risultato di approfondite ricerche.
• Trenta secondi - Questo è il tempo massimo di attenzione: se la pagina non sarà visualizzata in questo tempo il visitatore se ne andrà. Per questo è importante che le pagine siano "leggere", ovvero con la minima quantità di immagini ... che però ci devono essere per far bella figura. Vanno preferite le piccole dimensioni e rapporti di compressione piuttosto spinti.
• Cinque dita - Sembra che il cervello classifichi gli oggetti a gruppi di cinque (come le dita): sono da preferire tutte quelle soluzioni che mettano il navigatore di fronte ad un numero di scelte compreso tra cinque e dieci... vedi links o richiami ad altre pagine. Un numero inferiore renderebbe il sito dispersivo, in caso contrario si renderebbe complicata la scelta. Meglio se viene implementata una scelta di tipo gerarchico per argomenti.
• Tre "click" - Vi sono concesse tre sole "cliccate", dopodichè il visitatore se ne andrà... a meno che non gli abbiate già fornito qualcosa di interessante.

Il browser del visitatore
Chi l'ha detto che il visitatore usa un browser come il vostro, e che quindi vede le pagine nel modo in cui le vedete voi ? Cercate di ricordarlo quando lavorate, quindi
• Usate pochi caratteri (font), e di tipo comune. Praticamente tutti hanno a disposizione i caratteri Arial, Verdana, Times new roman e Courier.
• Non tutti vedono le immagini, quindi ricordate di dichiarare le dimensioni (in pixel) e di inserire un testo alternativo "comprensibile" (attributo ALT di IMG). Questo farà si che il navigatore "text" generi una cornice vuota delle dimensioni dell'immagine... mantenendo in ordine la formattazione dei testi.
• Non inserite Java se non ritenuto necessario... C'è gente che usa ancora dei navigatori... a vapore.
• Per lo stesso motivo: Cercate di evitare i frames. Utilizzate piuttosto le tabelle per lo styling.
• Usate HTML 3.2 che consente una buona compatibilità. Provate a vedere le prime righe della home page del vostro provider tramite l'opzione "visualizza HTML" del vostro navigatore...

Di quanti Kilobytes la mia pagina?
Facciamoci due conti: Una connessione ad Internet "media" può fare 33600 bits per secondo, quindi circa 3 Kbytes nella migliore delle ipotesi (il server non è sempre lì pronto per voi...). Prendiamola per buona grazie alle superiori velocità raggiungibili: in 30 secondi posso scaricare circa 90 Kilobytes. Questo valore ovviamente è comprensivo di tutte le immagini che si trovano in quella pagina, più intestazione e corpo della pagina stessa. Diciamo che è norma comune definire "leggere" le pagine molto al di sotto di questo valore limite, "pesanti" quelle che vi si avvicinano, "mattoni" quelle che addirittura superano tale limite.
• Le vostre non saranno certo pagine da 90.000 battute dattilografiche però andiamoci piano con le foto e le applets! Direi che una o due foto per pagina, ben compresse fino a 15-20 Kb (meglio meno!) con una piccola applet ed una certa quantità di testo sono l'ottimale per la rapidità di caricamento.
• Attenzione: il testo è importante! Se non ci fosse un normale visitatore aspetterebbe mezzo minuto per vedere un paio di immagini, ed in un attimo - dopo averle viste - altro mezzo minuto di attesa... In breve ci si renderebbe conto di passare più tempo ad "aspettare" il sito piuttosto che a vederlo: diamogli qualcosa da fare per distribuire meglio le attese nel tempo.
• Se proprio sono indispensabili delle grandi immagini molto dettagliate si può anche cambiare sistema: far apparire nella pagina l'immagine più piccola e fortemete compressa che incorpora un link ad un'altra pagina che contiene l'immagine gigante. In tal caso può non essere scaricata da chi non è interessato.
• Ricordiamo inoltre che non tutti vedono le immagini!
Il tema da sviluppare
Sarebbe bene che ogni sito avesse un suo proprio tema, e non fosse un "deposito" di foto. In fin dei conti siete voi che volete lasciare una traccia elettronica nella storia, no ? Siete anche in una posizione estremamente favorevole nei confronti di chi il sito lo vede: spesso voi conoscete delle cose che lui non sa.
• Siete andati in vacanza da qualche parte? Avete qualche bella foto? Scrivete anche e soprattutto quello che avete provato... le stranezze... la gente... le bellezze naturali... il clima... animali... vegetazione... Invogliatemi ad andarci !
• C'è qualcosa di caratteristico nella vostra città che vorreste condividere con forestieri? Tradizioni... ospitalità... storia... curiosità... arte... gastronomia... religiosità...
Fatemi venir voglia di venirci !
Dulcis in fundo...
Non vorremo mica far innervosire il visitatore, vero ?
• Mettiamo delle barre di navigazione o gruppi di link tematici che consentano al visitatore di avere immediatamente una "primo assaggio" del contenuto del sito.
• Mettiamo tutto l'essenziale nella parte di pagina che si vede all'apertura. È assai seccante per un impaziente cronico fare lo scroll della pagina per poi accorgersi che non era quel che cercava...
• Mettiamo una barra di navigazione che inviti alla lettura di un'altra pagina alla fine del documento, oppure un link che ci faccia ritornare all'inizio per una nuova scelta. Il pulsante "indietro"del navigatore normalmente richiede lo sforzo di prendere la mira e cliccare... per vedere cose già viste.
La Lista Semplice
E' probabilmente una delle più usate su Internet. Inizia sempre con il tag e finisce con il corrispondente . Ogni singola riga viene invece individuata dal tag , mentre un'eventuale intestazione viene contenuta fra i tags ... Non occorre inserire dei ritorni a capo (p.es. con il tag
), in quanto ogni istruzione viene considerata come se fosse l'inizio di una nuova riga.
Sintassi
Esempio
Titolo della lista
Prima voce
Seconda voce
Ultima voce
Titolo della lista
• Prima voce
• Seconda voce
• Ultima voce

Alla Netscape hanno esteso le possibilita' offerte da questo genere di liste inserendo il parametro TYPE, che consente di scegliere quale identificatore debba distinguere le singole voci della lista. Ovviamente se l'utente utilizza un browser che non supporta tali estensioni, esse verranno semplicemente ignorate.
Sintassi
Esempio
Titolo della lista
Prima voce
Seconda voce
Ultima voce
Titolo della lista
• Prima voce
• Seconda voce
• Ultima voce
Titolo della lista
Prima voce
Seconda voce
Ultima voce
Titolo della lista
• Prima voce
• Seconda voce
• Ultima voce
Titolo della lista
Prima voce
Seconda voce
Ultima voce
Titolo della lista
• Prima voce
• Seconda voce
• Ultima voce
La Lista Ordinata
Le liste ordinate si distinguono da quelle semplici in quanto
prevedono un certo ordine logico nelle voci che le compongono.
I tags che ne definiscono l'inizio ed il termine sono,
rispettivamente: .... Una lista di questo genere
viene solitamente rappresentata da un elenco di voci numerate progressivamente, come quella che segue:
Sintassi
Esempio
Elenco oggetti
Pinze
Martello
Trapano
Elenco oggetti
1. Pinze
2. Martello
3. Trapano
Alla Netscape hanno tuttavia pensato di estendere questa
istruzione aggiungendo dei parametri che assumono la forma:
dove con il parametro TYPE si
definisce il tipo di visualizzazione che si richiede alla lista, mentre
con il parametro START si stabilisce da quale numero iniziare
il conteggio
Ecco alcuni esempi:
Parametro
Identificatori delle voci
TYPE=1
1, 2, 3, 4, ...
TYPE=a
a, b, c, d, ...
TYPE=A
A, B, C, D, ...
TYPE=i
i, ii, iii, iv, ...
TYPE=I
I, II, III, IV, ...

Sintassi
Esempio
Elenco oggetti
Pinze
Martello
Trapano
Elenco oggetti
3. Pinze
4. Martello
5. Trapano
Elenco oggetti
Pinze
Martello
Trapano
Elenco oggetti
B. Pinze
C. Martello
D. Trapano
Elenco oggetti
Pinze
Martello
Trapano
Elenco oggetti
a. Pinze
b. Martello
c. Trapano
Elenco oggetti
Pinze
Martello
Trapano
Elenco oggetti
I. Pinze
II. Martello
III. Trapano
Elenco oggetti
Pinze
Martello
Trapano
Elenco oggetti
cxxiii. Pinze
cxxiv. Martello
cxxv. Trapano
Come al solito è meglio evitare finchè possibile l'utilizzo di estensioni
al linguaggio HTML, a meno che non si abbia la certezza che il
proprio documento venga visualizzato con uno specifico
browser. Suggerisco di visualizzare la lista con diversi browser,
al fine di
valutare che aspetto possa avere un documento creato PER il
Netscape Navigator e visualizzato con un altro browser.
Lista di Definizioni
Questo genere di lista viene utilizzata quando si deve creare un
elenco di termini accompagnandoli dalle rispettive definizioni ed è ottenibile tramite i tags .... Il tag che definisce ogni
singola voce e' , mentre quello che crea le definizioni e'
. Se si vuole dare alla lista un aspetto più compatto e
meno dispersivo, è possibile inserire l'argomento COMPACT
all'interno del primo tag . E' opportuno notare tuttavia che
non tutti i browser implementano l'attributo COMPACT, quindi
è buona norma controllare prima i propri documenti HTML con
diversi browser prima di pubblicarli definitivamente e, soprattutto,
è bene non affidarsi a tale attributo per inserire a tutti i costi una
certa lista in uno spazio ridottissimo, in quanto si potrebbe andare incontro a spiacevoli sorprese.
Vediamo ora alcuni esempi:
Sintassi
Esempio
Capitolo 1
Prima voce
Capitolo 2
Prima voce
Seconda voce
Terza voce
Capitolo 3
Prima voce
Capitolo 1
Prima voce
Capitolo 2
Prima voce
Seconda voce
Terza voce
Capitolo 3
Prima voce
Capitolo 1
Prima voce
Capitolo 2
Prima voce
Seconda voce
Terza voce
Capitolo 3
Prima voce
Capitolo 1
Prima voce
Capitolo 2
Prima voce
Seconda voce
Terza voce
Capitolo 3
Prima voce
A seconda del browser utilizzato, potreste non notare alcuna
differenza fra le due versioni e ,
quindi non vi preoccupate più di tanto se i due esempi vi
appaiono identici. L'importante è che notiate come questo tipo
di liste si presti particolarmente bene quando si vogliano creare
dei documenti dotati di una sezione dedicata alla spiegazione
dei termini utilizzati.
tags e
Il linguaggio HTML prevede per le liste altri due tags, che
vengono tuttavia raramente utilizzati:
... e .... Essi sono molto
simili
alle liste semplici. Il tag ... per esempio, è pressoché identico al tag , con la differenza che dovrebbe
apparire leggermente più compatto, per lo meno in teoria, visto
che poi ogni produttore di browser tende a... 'personalizzare'
il proprio. Il tag ... invece viene utilizzato per
presentare un elenco di brevi parole, generalmente non più lunghe
di 20
caratteri. Le specifiche HTML non prevedono nidificazioni per tali istruzioni, ma taluni browserlei consentono interpretandole come se fossero delle liste semplici.
Ecco di seguito i relativi esempi che vi potranno dare un'idea di
una loro tipica visualizzazione.

Sintassi
Esempio
Prima voce del menù
Seconda voce del menù
Terza voce del menù
• Prima voce del menù
• Seconda voce del menù
• Terza voce del menù
Numero UNO
Numero DUE
Numero TRE
• Numero UNO
• Numero DUE
• Numero TRE
Da semplice strumento atto a favorire l'accesso alle informazioni
di tipo scientifico da parte di università e centri di ricerca,
il WorldWide Web è diventato in breve tempo un vero e proprio
strumento di comunicazione di massa e, conseguentemente, un
ottimo mercato emergente. Sempre più numerose sono le aziende
che entrano in Internet per vendere direttamente
al pubblico o per pubblicizzarsi in tutto il mondo a costi irrisori,
se paragonati a
quelli di una campagna pubblicitaria convenzionale.
Ecco dunque che le immagini vanno via via assumendo sempre
maggiore importanza, ed è proprio del loro utilizzo all'interno
dei documenti HTML che ci occuperemo in questo capitolo
del nostro corso.
Il tag che definisce un'immagine all'interno di un documento
è , al quale possono venire associati dei parametri
come nella tabella seguente:
SRC="nomefile.ext"
Specifica il file grafico che contiene l'immagine che verrà visualizzata all'interno del documento corrente. E' l'unico parametro che dobbiamo obbligatoriamente inserire affinchè la nostra immagine venga visualizzata.
ALIGN="TOP"
ALIGN="MIDDLE"
ALIGN="BOTTOM"
Specifica, tramite uno dei tre parametri TOP, MIDDLE e BOTTOM, se il testo successivo dev'essere allineato in alto (TOP), al centro (MIDDLE) o in basso (BOTTOM) rispetto all'immagine.
ALT="testo"
Specifica un testo alternativo che il browser dovrà utilizzare nel caso che non sia in grado di visualizzare correttamente l'immagine. Si consiglia vivamente di utilizzarlo sempre! Utilizzate delle descrizioni brevi. Per esempio, un'immagine contenente il logo aziendale dovrebbe avere l'argomento ALT="Logo"
ISMAP
Definisce l'immagine corrente come una image-map, ovvero consente d'interpretare un eventuale click del mouse in maniera differente a seconda della zona dell'immagine nel quale viene eseguito. Di questo tipo di immagini ci occuperemo successivamente in un capitolo appositamente dedicato, ma accenniamo fin d'ora che per utilizzare questa caratteristica, è necessario disporre di appositi programmi che possano correttamente interpretare l'input ricevuto dall'utente.
Vediamo ora alcuni piacevoli esempi...
Questo è un esempio di allineamento in alto.
L'istruzione utilizzata è
Questo è un esempio di allineamento al centro.
L'istruzione utilizzata è
Questo è un esempio di allineamento in basso.
L'istruzione utilizzata è
Formati grafici utilizzati
Nella creazione dei documenti in formato HTML,
si ragiona generalmente per pagine, dove per pagina
s'intende un unico
file avente come estensione .HTM o .HTML
Ogni pagina è solitamente lunga pochi KBytes, anche se non è
raro trovare listini prezzi di aziende lunghi qualche centinatio
di KBytes. In generale comunque, la quantità di dati
che un utente collegato con le nostre pagine riceve è
solitamente ben più
consistente del solo file .HTML, in quanto deve ricevere
anche una spesso considerevole quantità d'immagini.
Se è vero che un'immagine vale più di mille parole, è anche
vero che un'immagine occupa ben più spazio di mille parole e, considerata la velocità delle linee telefoniche e dei modem
attualmente disponibili, può essere fastidioso dover ricevere
qualche centinaio di KBytes di immagini per poi vedere una
scritta del tipo: "Spiacenti, il servizio è momentaneamente
sospeso!".
Questo dovrebbe far riflettere sulle dimensioni delle immagini
che dovranno entrare a far parte di una pagina Web. Ricordate
sempre che le velocità di visualizzazione delle pagine rilevate
durante le prove locali, sono molto più elevate di quelle riscontrabili
nella realtà delle linee intasate e dei modem lenti o mal configurati. Solitamente è meglio non caricare una pagina con più di qualche
decina di KBytes d'immagini e, possibilmente, suddividendole in
più files.
I formati generalmente utilizzati sulle pagine del WorldWide Web
sono il GIF ed il JPG, mentre comincia timidamente ad apparire
il .PNG
La scelta dell'uno o dell'altro non deve assolutamente essere
casuale. Ecco di seguito alcuni consigli...
Comprimete al massimo la palette dei colori,
utilizzando possibilmente quella standard di Windows.
Per i non esperti, potremmo tradurre il consiglio in:
"usate solo i colori strettamente indispensabili", anche
perché sono ancora moltissimi i
computer dotati di schede grafiche sottoutilizzate in
modalità VGA
standard per mancanza di driver o per ignoranza da
parte dell'utente.
In generale, per piccole immagini utilizzate il formato GIF 89a Interlacciato, che consente delle rapide visualizzazioni e che si materializza definendosi sempre più man mano che la
ricezione del documento procede, consentendo di avere
una prima
approssimazione delle immagini ricevute.
Quando è necessario visualizzare delle immagini con 256
colori e oltre, oppure di considerevoli dimensioni, è necessario
utilizzare il formato JPG, in maniera tale da comprimere
le dimensioni finali
del file che verrà poi effettivamente trasmesso all'utente.
Il rapporto di compressione da utilizzare dipenderà
ovviamente dalla qualità richiesta alle singole immagini
Evitate nella maniera più assoluta di costringere le persone che osserveranno le vostre pagine ad utilizzare la ScrollBar
orizzontale!!
Se voi disponete di uno spendido monitor da 900" con effetto
cinema, non significa che tutti lo possiedano. Lo standard in fatto
di monitor non professionali, è il 14". I più fortunati hanno il 17",
gli snob il 15". Questo significa che al massimo la risoluzione
adottata da chi possiede un monitor a 14" è di 800x600pixel,
ma spesso e volentieri è rimasta a 640x480pixel, forte del fatto
che i rivenditori spesso e volentieri non perdono tempo ad installare
i driver necessari (questo è particolarmente vero per i sistemi
basati su Windows 3.x).
I più intelligenti penseranno subito che la dimensione orizzontale
massima di un'immagine che eviti lo scroll su qualsiasi computer
sia di 640pixel. Niente di più sbagliato!! Infatti, dovete tener conto
anche di coloro che hanno sistemi NON-Windows, di coloro che
hanno le finestre non completamente aperte, e della ScrollBar
verticale che comunque occupa il suo spazio.
Una scelta coraggiosa potrebbe arrivare ai 600pixel,
una più prudente ai 550pixel.
Il mio personalissimo consiglio è di restare entro i 450pixel,
anche per lasciare una cornice naturale agli estremi dell'immagine
stessa.
Per il numero dei colori da utilizzare, vale lo stesso discorso
appena fatto: non tutti dispongono di schede grafiche in grado
di andare a 16milioni di colori e, in ogni caso, queste immagini
sarebbero memorizzate in files di grandi dimensioni,
sicuramente intollerabili per la maggior parte dei visitatori
delle vostre pagine,
che non esiterebbero un istante a cliccare su STOP e cambiare
sito. Contenete al massimo i colori e, nel caso, fate in modo che
sia l'utente a scegliere se vedere le immagini a
16, 256 o 16milioni
di colori, predisponendo degli appositi links alle
immagini in alta risoluzione. Immagini: estensioni all'HTML
Probabilmente il tag è quello che più di tutti ha ricevuto delle estensioni rispetto allo standard HTML originale. Prima di esaminarle in maggior dettaglio, è opportuno ricordare che non tutti i browser le supportano e che quindi il loro utilizzo dev'essere limitato il più possibile, in quanto non sono assolutamente affidabili al di fuori del Netscape e, forse, del Microsoft Internet Explorer. Non spaventatevi dunque se gli esempi che seguiranno non verranno correttamente visualizzati dal vostro browser.
Questa immagine è allineata a sinistra e il testo occupa tutto lo spazio a disposizione accanto alla figura. L'istruzione utilizzata è
.
Questa immagine è allineata a destra e il testo occupa tutto lo spazio a disposizione accanto alla figura. L'istruzione utilizzata è
.
Questa immagine ha il suo estremo superiore allineato con la parte superiore della corrente linea di testo. L'istruzione utilizzata è
.
Questa immagine ha il suo punto mediano esattamente allineato con la corrente linea di testo. L'istruzione utilizzata è
.
Questa immagine ha il suo estremo inferiore allineato con la parte inferiore della corrente linea di testo. L'istruzione utilizzata è
.
Questa immagine ha il suo estremo inferiore allineato con la base del testo successivo.
L'istruzione utilizzata è
.
Come avete potuto notare, gli effetti ottenuti si discostano pochissimo dai corrispondenti effetti ottenibili con gli argomenti standard dell'HTML. Se siete sicuri che le vostre pagine verranno viste con il Netscape, utilizzateli pure; in caso contrario, il rischio di vedere dei documenti completamente disallineati rispetto alle previsioni non vale la pena di essere corso.
Ci sono tuttavia delle estensioni che non creano problemi se presenti e che, se correttamente interpretate, consentono di migliorare notevolmente le vostre pagine.
Nella pagina seguente li esamineremo in maggior dettaglio.
Tramite i parametri WIDTH=valore HEIGHT=valore,
è possibile specificare le dimensioni esatte dell'immagine
corrispondente. Questa possibilità risulta molto utile, in
quantoil browser viene subito messo in condizioni di riservare
lo spazio opportuno all'interno della pagina, e può così
continuare
nella visualizzazione del testo successivo. Vi siete mai chiesti
perchè alcune pagine su Internet appaiono lentissime e
completamente vuote, mentre altre appaiono molto più
rapidamente e con gli spazi dedicati alle immagini
preimpostati? Bene, a parte eventuali problemi di traffico
in linea, il motivo è che i primi non comunicano al browser
le dimensioni dell'immagine, mentre i secondi si!
C'e' tuttavia un errore che gli aspiranti "HTMListi" tendono
a commettere, ed è quello di affidarsi ai parametri HEIGHT
e WIDTH per creare delle immagini che rientrino
perfettamente
nelle loro pagine, affidando al browser il compito di
convertire un'immagine p.es. di 400x400pixel in un'altra
da 50x50pixel.
Si corrono tuttavia almeno tre grossi rischi:
Se il browser non supporta tali estensioni, si rischia di
avere delle immagini troppo grandi o troppo piccole
rispetto al contesto della pagina, ottenendo degli effetti
veramente orrendi;
Anche se il broswer dovesse supportare tali estensioni,
l'algoritmo utilizzato per il ridimensionamento
dell'immagine
è molto primitivo e rischia di produrre delle immagini
incomprensibili;
E' decisamente stupido inserire in una pagina HTML
un'immagine da 100KByte, per farla comprimere al
browser in uno spazio che occupa fisicamente uno
spazio da 10Kbyte!!
Quindi fate attenzione ad utilizzare questi parametri solo
con le
dimensioni originali dell'immagine e, se proprio dovete
rimpicciolirla o ingrandirla, fatelo con un programma creato appositamente per tale scopo. Per meglio chiarire questi
concetti, di seguito verranno visualizzate tre immagini: la
prima utilizza come argomenti le dimensioni originali
dell'immagine, la seconda viene fatta ingrandire dal
browser,
e la terza viene fatta ridurre dal browser .

Estensioni avanzate al tag
Il tag non ha certo finito di stupirci, infatti esistono ancora
alcuni parametri non-standard che spesso s'incontrano nelle pagine HTML presenti su Internet, e che meritano una seppur breve
descrizione.
Iniziamo con il parametro BORDER="valore" che consente di
stabilire se un'immagine debba o meno avere un contorno e,
nel caso, che dimensione esso debba avere.
Ecco di seguito 3 immagini: la prima con BORDER="0",
la seconda con BORDER="1" e la terza con BORDER="10".
Particolarmente utilizzato è il parametro BORDER="0" quando
si crea un'immagine "cliccabile", ovvero che rimanda ad un'altra
pagina, come i pulsanti che avete utilizzato in questo corso per
sfogliarlo. Infatti molti browser interpretano un'immagine di questo
tipo inserendo automaticamente una cornice simile a quella che sia avrebbe utilizzando un BORDER=1, il che ha degli effetti estetici
spesso sgradevoli. Annullando il bordo, si ottiene un aspetto generalmente migliore.
Proseguiamo nel nostro esame delle estensioni avanzate introdotte
nel linguaggio HTML prevalentemente dalla Netscape, con il
parametro LOWSRC="nomefile.ext" che consente alcuni
interessanti effetti speciali.
Quando il Netscape trova un'istruzione del tipo , si comporta
come segue:
• Carica tutto il documento HTML
• Carica e visualizza tutte le immagini presenti nel documento
e, se ne incontra una con il parametro LOWSRC attivo,
carica il file corrispondente, ignorando quello indicato dal
parametro SRC
• Al termine del caricamento e della visualizzazione
dell'intero documento, carica le immagini indicate dal
parametro SRC e le sostituisce a quelle precedentemente
indicate dal parametro LOWSRC
Come avrete già capito, il parametro LOWSRC è stato
introdotto per venire incontro alle esigenze di coloro che,
utilizzando modem poco veloci o linee telefoniche
particolarmente intasate, hanno comunque la necessità di
vedere le immagini dei documenti HTML, seppure di minore
qualità. Ecco allora che il programmatore HTML può
finalmente fornire un'immagine essenziale di piccole dimensioni
(tramite LOWSRC) ed un'altra più accurata di maggiori
dimensioni che verrà automaticamente sostituita alla precedente
se l'utente avrà la pazienza di attenderne il caricamento, ma
consentendo comunque una visione preliminare soddisfacente
dell'intero documento. Si noti che per con il termine dimensioni
si è voluta indicare la dimensione del file contenente le immagini e
non la loro dimensione in pixel.
Sia il parametro SRC che LOWSRC possono contenere come argomento un'immagine GIF o JPG.
Il parametro LOWSRC consente inoltre di ottenere degli effetti
speciali. Pensate infatti ad un'immagine in B/N che si colora come
per magia dopo alcuni istanti.
Un effetto ancora più evidente viene ottenuto utilizzando delle
Clip-Art invece che immagini fotografiche.
Prima di terminare, diamo un rapido accenno ai parametri VSPACE=valore HSPACE=valore, che consentono di specificare rispettivamente lo spazio vuoto verticale e orizzontale in pixel che
deve separare l'immagine dal testo circostante. Essendo parametri specifici del Netscape che riguardano direttamente la formattazione
delle immagini e del testo circostante, se ne sconsiglia l'utilizzo nei
propri documenti, in quanto porterebbero ad imprevedibili e molto probabilmente pessimi effetti estetici se visualizzati con differenti
browser.
Le immagini trasparenti
Una delle caratteristiche offerte dal formato GIF, è quella di poter
creare delle immagini con UN SOLO colore trasparente, ovvero
che non copre ciò che sta al di sotto. Cerchiamo di capirci meglio
con degli esempi.
Prendete un foglio rettangolare completamente bianco e
disegnateci sopra un omino. Sovrapponetelo ad una
fotografia più grande.
Cosa vedete? Uno splendido omino che deturpa la foto
originale!
Prendete ora un foglio trasparente delle stesse dimensioni di quello precedente e disegnateci sopra un altro omino. Sovrapponetelo
alla fotografia di prima. Cosa vedete adesso? Uno splendido
omino perfettamente integrato con la fotografia originale!
Questo piccolo esempio vi dovrebbe far capire la differenza
fra un GIF normale ed un GIF trasparente.
Una delle caratteristiche del formato GIF è che ogni immagine
occupa sempre una certa superficie rettangolare misurabile
in pixel, ovvero in punti dello schermo. Un'immagine
100x150pixel occupera' dunque una porzione di schermo
rettangolare, lunga 100 punti e alta
150 punti, per un totale di 100x150=15,000 punti.
Se per un qualsiasi motivo la vostra immagine ha dei contorni
non rettangolari, essa dovrà essere inserita all'interno di
un'immagine comunque rettangolare, con evidenti spazi vuoti.
Fintanto che tali
spazi vuoti hanno lo stesso colore dello sfondo, il problema non
si
pone, in quanto si confonderà con esso, ma oggi che la maggior
parte delle pagine ha uno sfondo più o meno variopinto questa
soluzione non è più adottabile. Se però assegnamo agli spazi
vuoti
della nostra immagine rettangolare un colore che definiremo
trasparente, ecco che essa si potrà integrare perfettamente
con il contenuto dello sfondo sottostante.
Un'altra possibilità di utilizzo dei GIF trasparenti è quella di
separatori d'immagini o testi. Immaginate di avere due
immagini
e di doverle separare di 20 pixel. E' sufficiente creare
un'immagine 20x2pixel con una palette di 2 colori e
riempirne
tutto lo spazio a disposizione con uno dei due colori.
Assegnate a tale colore
l'attributo "trasparente" e memorizzatelo come GIF 89a.
A questo
punto potete inserire nel vostro documento HTML delle
istruzioni
simili a queste:
Ottenendo il seguente risultato: (il bordo è stato messo a 1 per
rendere visibile l'immagine!)
Esistono numerosi programmi in grado di modificare un GIF
pre-esistente in maniera tale da configurare un colore come
trasparente.
Il più famoso rimane forse il GIFTRANS.EXE, ma ormai
quasi tutti
i manipolatori d'immagini grafiche che supportano il formato
GIF
hanno questa possibilità. Uno fra i tanti è, per
Windows 3.x/95,
il Paint Shop Pro, che risulta essere anche un'ottimo
editor grafico
e che consiglio vivamente a tutti. I collegamenti ipertestuali (link)
I collegamenti ipertestuali, chiamati generalmente link, sono
degli elementi del documento HTML, quali parole o immagini,
che se 'cliccate' consentono di passare ad un'altra sezione dello
stesso o di un altro documento.
L'importanza dei link è notevole, in quanto consentono di collegare
fra loro (link significa appunto collegamento) diversi documenti in
maniera tale da consentire a chi li consulta di approfondire
determinati argomenti e, comunque, di non essere L'importa dalla sequenzialità tipica dei documenti cartacei.
Il tag che si occupa della creazione e gestione dei link è
..., al quale si possono associare numerosi
argomenti, dei quali uno a scelta fra i due seguenti è necessario:
NAME="nome_del_collegamento"
Viene utilizzato per creare dei punti nel documento ai quali si potrà successivamente accedere tramite un link diretto.
HREF="url_del_documento_collegato
Definisce un link che, se cliccato, consentirà all'utente di consultare il documento specificato nella URL. Senza addentrarci per ora in argomenti troppo tecnici, è utile sapere che per URL s'intende una sorta d'indirizzo universale tramite il quale è possibile definire in maniera univoca un certo documento o una sua specifica parte.
Cerchiamo di chiarire meglio le idee con degli esempi pratici.
Prendiamo in considerazione il seguente documento HTML,
del quale tralasciamo per semplicità espositiva l'header ed i
tags non necessari ai fini della presente trattazione.
Codice HTML
Risultato a video
Indice
Introduzione
Capitolo 1
Capitolo 2
Capitolo 3
Tabella cap.6
Digiland
Indice
Introduzione
Capitolo 1
Capitolo 2
Capitolo 3
Tabella cap.6


Commentiamo ora le varie voci del nostro ipotetico indice.
• La parola prefazione ed i 3 capitoli sono associati
rispettivamente ai files cap1.htm, cap2.htm e cap3.htm,
contenuti tutti nella stessa directory del documento corrente
• La riga Tabella cap.6, se 'cliccata', rimanda ad una sezione
dello stesso documento
Come consiglio generale, si consiglia di utilizzare, quando ciò
sia possibile, dei riferimenti relativi per i links del proprio sito,
in maniera tale da evitare eccessivi stravolgimenti in caso di
trasferimento di un servizio da un server ad un altro.
Notiamo inoltre che le parole 'cliccabili' (generalmente evidenziate
con un particolare colore e/o con la sottolineatura), sono quelle
contenute fra il tag d'inizio link e quello di fine link
Per meglio comprendere la relazione fra gli argomenti
HREF= e NAME= , osservate la figura seguente:
Come intuibile, il parametro NAME= assegna un nome ad una
porzione del documento, e HREF= la richiama tramite un link.
E' importante notare come i riferimenti NAME= siano direttamente richiamabili anche da pagine esterne. Per esempio, per collegare
la porzione cap1 del documento corso.html ospitato nel sito www.nomesito.it, è necessario utilizzare un'istruzione simile a quella
che segue:
Link al cap. 1 del corso
I link dalle immagini
Fra le tante possibilità offerte dal linguaggio HTML, c'è quella di
poter rendere cliccabili anche le immagini. Se al posto delle parole
volete rendere cliccabile un'intera immagine collegandola
direttamente ad altri documenti, è sufficiente inserire fra i tags ... il tag che definisce un'immagine, come nell'esempio
che segue:
Codice HTML
Risultato a video
Notate la differente rappresentazione ottenuta con l'utilizzo del
parametro BORDER="x"
Un valore pari a 0 (zero), impedisce la visualizzazione della
cornice, mentre un valore >=1 obbliga il browser a crearne appositamente
una di adeguate dimensioni. Solo voi siete padroni di decidere
se
sia meglio o meno inserire tale cornice. In generale, sappiate che
una cornice rende immediatamente riconoscibile un'immagine
cliccabile, ma se ciò può apparentemente sembrare un vantaggio,
non altrettanto può dirsi analizzando il problema da un punto di
vista estetico. Una cornice può essere superflua attorno a talune immagini, fino a diventare decisamente deturpante se utilizzata
con delle immagini dotate di trasparenza
Inviare E-Mail dal browser
Una delle possibilità offerte al programmatore HTML dal
WorldWide Web è quella di mettere a disposizione di milioni di
persone i propri documenti, siano essi i risultati di ricerche
scientifiche o dei semplici resoconti di viaggi, o magari poesie
o racconti, o quant'altro la fantasia umana possa creare. Lo scopo
principale di Internet è appunto quello di favorire la comunicazione
fra le persone e la libera circolazione delle idee.
Su Internet, il metodo più semplice per comunicare direttamente
con un'altra persona è quello di utilizzare la posta elettronica.
Il linguaggio HTML consente, con l'utilizzo di un semplicissimo link,
d'inviare automaticamente un messaggio all'autore del documento
consultato o a qualsiasi altro utente. Poniamo che vogliate inviare un
messaggio all'autore di questo corso HTML. Ecco come procedere
per far si che, con un semplice click del mouse, si possa inviare un
messaggio:
Codice HTML
Risultato a video
Il mio indirizzo E-Mail è:
[email protected]
Il mio indirizzo E-Mail è:
[email protected]
Premesso che il tag ... non è
indispensabile, ma è comunque utile per meglio identificare l'indirizzo
dell'autore sia per chi legge il sorgente HTML e sia per chi utilizza il
documento finito, notiamo che il browser è in condizione di avviare la
procedura di creazione di un nuovo messaggio E-Mail grazie all'utilizzo
della parolina mailto:[email protected] dove siete solitamente
abituati a vedere il nome di un file o la URL di un sito. mailto significa
'spedisci a', quindi il tag da noi utilizzato:
[email protected] è da
leggere come segue:
Crea un link (tramite il tag ...) che, se 'cliccato', predisponga
il browser all'invio di un messaggio (tramite l'argomento mailto:)
all'utente [email protected]
• Le mappe cliccabili
• Una delle possibilità offerte dal linguaggio HTML è quella
di poter inserire nelle proprie pagine delle immagini "cliccabili",
ovvero delle immagini che si comportano come se fossero de
i link ma che puntano a diversi documenti a seconda della
zona interessata dal click del mouse.
Generalmente vengono utilizzati due differenti tipi di mappe:
• Quelle che comportano la creazione di un programma
che gira sul server e che si occupa d'interpretare l'input
dell'utente (il click del mouse viene convertito in coordinate
relative all'immagine ed inviato al server per l'elaborazione)
Quelle che vengono automaticamente interpretate dal
browser analizzando direttamente la suddivisione
dell'immagine, senza necessità alcuna di avere una
diretta interazione con il server
(ovvero ogni zona cliccabile dell'immagine punta
automaticamente ad un ben preciso link)
• In questo corso ci occuperemo esclusivamente di queste
ultime.
Il tag che definisce esattamente un'area cliccabile all'interno
di un'immagine è ..., cui viene associato un
nome tramite il parametro NAME="nome_mappa", che
deve corrispondere al nome utilizzato nel
parametro USEMAP="#nome_mappa" del tag
di definizione
dell'immagine. Questo e' necessario per evitare
conflitti nel caso ci dovessero essere piu' mappe
cliccabili in
una stessa pagina.
Il codice necessario alla creazione di una mappa cliccabile
è dunque molto semplice, e lo riassumiamo di seguito:
•