HTML - MANUALE

8/8/2019 HTML - MANUALE

http://slidepdf.com/reader/full/html-manuale 1/43

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 untesto o ad un’immagine permettono di modificarne le caratteristiche di visualizzazione (per esempioil 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 visualizzareil documento.Un documento html non è altro che un file di testo, e si crea attraverso programmi come il BloccoNote di Windows, WordPad, e molti altri; è costituito da caratteri e nient’altro (niente coloriparticolari associati al testo, niente immagini, niente formattazione, ecc.).L’estensione associata ai file di testo è “.TXT”, tale formato gestisce unicamente i caratteritralasciando 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 anchele informazioni di formattazione, che non dovranno essere presenti in un file usato per descrivereuna 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, sostituendocosì 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 eravuoto, la pagina sarà solo un foglio bianco.



2. GLI STANDARD Qualche tempo fa il browser più utilizzato per interpretare il codice html era Netscape, questidettava le regole e definiva come l’html doveva essere e cosa poteva offrire, mentre i pochi altribrowser 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: laMicrosoft 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 maggioreesperienza maturata nel settore, era di molto superiore al nuovo arrivato, però Internet Explorerebbe il vantaggio di auto installarsi in tutte le macchine Windows e di essere distribuitogratuitamente. A causa di ciò, col passare del tempo, Internet Explorer riuscì ad imporsi sullaconcorrenza, e da questo momento in poi la standardizzazione di fatto del linguaggio html, assiemealla 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 qualierano 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 comeespandere il linguaggio, ma la cosa non avvenne e si ebbe un prolificare di nuovi tag incompatibilitra loro: Internet Explorer inventava i suoi tag e Netscape i propri, magari permettevano di ottenerela stessa cosa, ma erano diversi così che Netscape non riconosceva i tag di Internet Explorer eInternet Explorer non riconosceva i tag di Netscape. Questa situazione si è trascinata fino ai giorninostri anche se fu dato vita ad un’organizzazione: il W3C, la quale doveva ricondurre l’html ad unostandard; in realtà prima i browser propongono le nuove regole e i nuovi tag, poi questaorganizzazione 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 aibrowser. E’ facile capire come questo sistema sia estremamente lento e porti solo complicazioni achi dovrà districarsi nel linguaggio.

3. GLI EDITOR

Esistono programmi che facilitano la creazione di documenti html, anche gratuiti, denominati editorHTML. 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 dispecifici tag ed altro, allo scopo di agevolare la stesura e la gestione del documento. Strumentidi 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ì lapagina 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à ilprogramma. Questi strumenti rendono i tempi di apprendimento brevissimi, però limitano lafantasia e creatività entro ciò che riescono a gestire: senza conoscere l’HTML non sarà possibilepersonalizzare 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 esottocartelle che andranno a comporre il sito.



− L’indirizzo del sito Web è collegato ad una pagina ben definita, che solitamente deve avere ilnome 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 ilmantenimento 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 filescuola.htm e Scuola.htm non sono la stessa cosa. Se il sito funziona correttamente in locale, mauna volta in rete mancano immagini, le pagine non si caricano, ecc., forse l’errore sta proprionei nomi che si sono utilizzati. Per evitare problemi di questo genere, è consigliabile utilizzaresempre 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, quindidovranno essere “leggere”: non dovranno cioè occupare troppa memoria. Quando si controlla ilpeso di una pagina, si deve considerare non solo il file .htm, ma anche tutti quelli che in essavengono richiamati (immagini, suoni, ecc.).

5. I TAG I Tag sono istruzioni delimitate e rese riconoscibili attraverso i simboli < e >. Tutte, tranne qualcheeccezione, devono essere aperte e chiuse; esistono quindi tag di apertura e tag di chiusura, cheservono per delimitare parti del documento.Si usano i tag di apertura per indicare al browser dove deve iniziare ad applicare una determinataformattazione, 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ù facileindividuarli nel documento e le eventuali successive correzioni saranno facilitate).E’ possibile usare contemporaneamente più tag su uno stesso pezzo di testo. Ad esempio, se sidesidera 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 praticaavvertono 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, peruna corretta interpretazione del documento. In ogni caso queste informazioni non sono rese visibilinella 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 econsiglia 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 quantonon 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 deldocumento, quindi tra <HEAD> e </HEAD>.

TITOLO

<TITLE>

Il tag TITLE consente di dare un titolo alla pagina web, che sarà visualizzato sulla barra del titolodel 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 daimotori di ricerca per recuperare parole chiavi.

INFORMAZIONI

<META>

I tag META permettono di fornire ulteriori informazioni, spesso dedicate ad entità un po’ particolaricome 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’attributoCONTENT.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 aimotori di ricerca in relazione al contenuto del sito, devono essere termini che rispecchiano eriassumono 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 contieneinformazioni tradotte in lingue diverse dall’italiano può tornare utile inserire anche parole chiaviin tali lingue;

− non esagerare inserendo la stessa parola troppe volte: potrebbe portare all’immediata esclusionedella 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 ricercacome 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 browserun’altra pagina. In CONTENT, 5 è il numero di secondi che devono passare prima che il browsercarichi la pagina successiva; url=”seconda.htm” identifica il file che sarà richiamato, in questo casotale 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) MARGINILEFTMARGIN TOPMARGIN per internet explorerMARGINWIDTH MARGINHEIGHT per netscapeTali attributi consentono di ridefinire i margini del documento (distanza del testo dal bordo dellafinestra del browser).I due browser più diffusi usano attributi diversi e per ottenere lo stesso risultato (la stessa pagina inentrambi i browser) è necessario inserirli tutti contemporaneamente; internet explorer nonconoscendo gli attributi di netscape non li prenderà in considerazione, lo stesso farà netscape con gliattributi 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 coloridiversi.

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 collegamentipresenti 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 collegamentivisitati presenti nella pagina.

5) COLORE DEI COLLEGAMENTI SELEZIONATI

ALINK=”colore”

Tale attributo permette di usare un colore diverso dal default (solitamente rosso) per i collegamentiselezionati nella pagina. Questa caratteristica si nota con più facilità in Netscape, è sufficientemantenere 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, ilcolore usato è il bianco, ma come alcune caratteristiche del testo, può essere modificato a piaceredall’utente, quindi per assicurarsi di avere come sfondo un particolare colore si consiglia diutilizzare 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 tintaunita ma consente di riempire lo sfondo replicando un’immagine. In questo caso, spesso, si usanoTEXTURE: 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 anchel’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 visualizzazionedel 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 comeesempio dimostrativo in grado di evidenziare chiaramente come alcuni tag non funzionino su tutti ibrowser.L’immagine di sfondo, quando la pagina è tanto lunga da attivare lo scroller laterale, scorre assiemealla 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 cifosse.

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 ouna citazione, dichiarando così la natura del blocco di testo e lasciando al browser il compito dideciderne l'aspetto: la formattazione. I tag fisici, al contrario, si preoccupano esclusivamente didefinire l’aspetto del testo che delimitano. Consentono di applicare il grassetto, il corsivo, dicambiare 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 sonopresi in considerazione dai browser. Tutto il testo è disposto come se si trovasse su di una stessariga, 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, inmodo 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 nuovotag 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 gestirnel’allineamento.

<DIV ALIGN=”allineamento”>

Un po’ come fa il tag <P>, ma a differenza di quest’ultimo, non utilizza spaziature di rigamaggiorate.

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 servea 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 didefault, che solitamente è il “Times New Roman”. Per evitare il problema è necessario utilizzaresolo i caratteri più diffusi: quelli che sono comunemente installati da tutti i sistemi operativi, peresempio 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>

SIZEModifica la dimensione del testo.I valori che questo attributo supporta vanno dall’1 al 7.



Esempio:<FONT SIZE=”valore”>pokebook.it</FONT>

COLORModifica il colore del testoPermette di usare per il testo colori diversi dal nero di default. I colori si esprimono attraverso inomi 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 inmodo 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, talevalore può andare da 1 a 6. Il tag prevede anche spaziature di paragrafo rispetto agli elementi cheseguono 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 dellalista 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 lapossibilità di utilizzare sistemi di indicizzazione diversi, è sufficiente aggiungere nel tag di aperturaun 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 da1.

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 elementodella 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>, ladefinizione 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 leidee 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 dicaratterizzarla e di distinguerla dalla massa. Tutto questo deve essere fatto con la consapevolezzadei limiti imposti dalle attuali tecnologie: Internet, per come è conosciuta dalla maggioranza deisuoi 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 dipiù, a causa delle loro capacità di compressione, molto efficaci per diminuire il peso delle immaginie 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 documentohtml 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, ele 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 nondelimita 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 haricavate 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 delfile. 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 noncorrisponda alle sue effettive dimensioni. Per evitare quest’inconveniente il tag <IMG> prevede unpaio di utili attributi.

WIDTH

Consente di specificare la dimensione orizzontale dell’immagine. Dimensione che può essereespressa sia in pixel sia in percentuale. E’ possibile applicare all’immagine dimensioni differenti daquelle effettive, provocando riduzioni o ingrandimenti. Nel primo caso l’immagine sarà più pesantedel necessario, nel secondo perderà in qualità. Per questi motivi è consigliabile usare le effettivedimensioni dell’immagine.In Pixel.Le dimensioni naturali dell’immagine utilizzata sono 242 pixel in orizzontale e 71 in verticale. Inquesto 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 espressasia 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 taliattributi favorisce l’impaginazione dell’eventuale testo presente nel documento. Per l’immagineutilizzata 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 qualsiasicarattere, 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 questoricominci subito dopo. Lo spazio vuoto, evidenziato dalle frecce rosse, è dovuto alla dimensionedell’immagine. Si noti in figura 7 come gli stessi effetti si presentino anche in documenti dove è lostesso 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’attributoALIGN. Le opzioni disponibili sono:



TOPBOTTOMMIDDLE

LEFTRIGHT

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 iltesto.

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 cuisi utilizza l’immagine anche come link, in queste situazioni i browser applicano il bordoautomaticamente, se ciò dovesse dar fastidio, per rimuovere il bordo, è sufficiente utilizzarel’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 rivelaquando 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 utilizzandoun browser testuale (FIG 17), l’immagine non è visibile, ma la si può descrivere, avvisando l’utentedi 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 inmodo non lineare (a differenza di quanto avviene con i testi cartacei), ciò significa che nondovranno per forza essere letti pagina per pagina, capitolo per capitolo, dall’inizio alla fine, maconsultati dinamicamente, passando dall’uno all’altro, abbandonandone alcuni per approfondirnealtri 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 chiusurae 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 chesta 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 sisupponga di voler richiamare la pagina seconda.htm attraverso un link dalla pagina prima.htm, eche 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 dasistema d’accesso alla risorsa collegata, evidenziato attraverso la sottolineatura e di colore blu (sonole impostazioni standard nella maggior parte dei browser). L’utente cliccando sul link richiamerà lapagina 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 volerinserire 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 usarel’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’attributoBORDER 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. Eccocosa succede: se il visitatore clicca su un link cui è stato applicato tale attributo, il bowser primalancia una nuova sessione di se stesso, in pratica apre una nuova finestra di sé e, in essa, richiama larisorsa associata al link. Questo sistema consente di non perdere i propri visitatori nel caso in cui sidesideri 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 diposta elettronica presenti nella macchina del visitatore, compilando in modo automatico anchealcuni 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, chepermette di saltare velocemente da un punto all’altro dello stesso documento, ed è generato sempregrazie 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 1Titolo 2Titolo 3

DOCUMENTO

TITOLO 1

Bla bla bla …Etc…

La cosa può essere ottenuta tramite l’uso dei riferimenti, paragonabili a delle etichette, checonsentono 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”><H1>TITOLO 1</H1>

Bla bla bla …

<A NAME=”t2”>



<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 ilink:

…

<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. Riconsiderandol’esempio, si potrebbe creare una pagina esclusivamente per mantenere l’indice, e richiamare iriferimenti 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. aqua2. black3. blue4. fuchsia5. gray6. green7. lime8. maroon9. navy10. olive11. purple

12. red13. silver14. teal



15. yellow

Tale sistema è molto semplice e di facile comprensione, ma limitato nel numero di coloridisponibili: 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 valorecompreso tra 00 (zero) e FF (255, il massimo). Questo significa che si hanno a disposizione 256 x256 x 256 possibili combinazioni e quindi colori, per un totale che si aggira attorno ai 16 milioni dicolori. 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 precedentepermettendo di ottenere qualsiasi tonalità di colore si desideri.Il modo più semplice per conoscere il codice di un colore è quello di utilizzare un programma digrafica 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 sitrova 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 nonnecessariamente a pagamento, per esempio si potrebbe utilizzare il Composer di Netscape: l’editordi 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 (fogliettoe 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 diComposer (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 finestraprincipale e inserire del testo qualsiasi nel documento. Il testo apparirà del colore selezionato (FIG6).

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 cartellaradice (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”. Sidesidera inserire in tale pagina l’immagine “pippo.gif”, anche questa memorizzata nella cartellaprincipale: “documenti” (FIG 1).

FIG. 1

Nel file index.htm sarà necessario usare il tag IMG per richiamare l’immagine specificandone ilpercorso (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 diconcreto.

COLLEGAMENTI ASSOLUTI

I collegamenti assoluti specificano dettagliatamente la posizione del file all’interno della struttura dicartelle (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 desideriamoutilizzare 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:”), finoalla cartella che contiene il file “pippo.gif”. I caratteri “/” posti prima e dopo la cartellaservono 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 lecose non funzionino più quando il lavoro è messo in rete (su internet). Questo è dovuto alCollegamento Assoluto: infatti, in rete, nella macchina che ospita le pagine del sito i dati vengonomemorizzati 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 lacartella 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ù spessoper creare dei collegamenti ipertestuali a pagine altrui.

COLLEGAMENTI RELATIVI

I collegamenti relativi indicano il percorso a partire dalla posizione del file che contiene ilcollegamento.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 stessacartella del file “pippo.gif”, quindi il browser quando leggerà la pagina sarà già posizionato nellacartella “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 unasottocartella “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, quindiper 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 secondapagina 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”, allacartella “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 perdefinire i percorsi ad un file, questo perché, in rete, a tale cartella non è possibile attribuire un nomespecifico.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 è necessarioprestare moltissima attenzione alla forma utilizzata. Lo strumento che consente di dare vivacità eforma ai documenti web è per eccellenza l’immagine, qui cercheremo di capire che formatoutilizzare per memorizzare le immagini nel miglior modo possibile, e come ottenere il migliorrapporto tra qualità e dimensioni. Più l’immagine “pesa” e più tempo impiegherà per scaricarsi. Iformati più utilizzati per comprimere le immagini (ridurne il peso) sono due: GIF e JPEG. Non haimportanza il programma utilizzato per la creazione dell’immagine, né il formato usato dallo stessoper memorizzarla, tanto per inserirla in una pagina web dovrà essere convertita in uno dei dueformati citati sopra. Per capire quando usare gif e quando jpeg è necessario conoscerne lecaratteristiche, di seguito trattate in dettaglio.

GIF

Graphics Interchange FormatIl numero di colori gestiti dal formato è limitato e può variare da un minimo di 2 colori (1 bit) a unmassimo di 256 (8 bit), indipendentemente dal numero di colori dell’immagine originale. Sel’immagine da salvare non supera i 256 colori sarà identica all’originale, altrimenti subirà delleperdite che ne influenzeranno la qualità.Ecco come lavora il formato in questione:

FIG. 199 byte

FIG. 2139 byte

FIG. 3139 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 sonobianchi, 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 successionemaggiore sarà la compressione. Se l’immagine non dispone di pixel dello stesso colore limitrofi, ilpeso dell’immagine non otterrà benefici, anzi aumenterà.Le immagini di figura 1, 2, 3 sottolineano come il sistema funzioni per righe, mentre la disposizionedei pixel in verticale non ha nessuna influenza sulla compressione, in effetti le figure 2 e 3 varianoentrambe tre volte per ogni riga e il peso coincide.

JPEGJoint Photographic Experts GroupNon ci sono limiti per il numero di colori nell’immagine, il jpeg lavora sempre alla profondità di 32bit 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 compressanon 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 dicompressione 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 dallamedia dei colori presenti nel blocco, questo provoca, in caso di compressioni elevate, la presenza diquadrati 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 pochicolori, mentre jpeg in caso di immagini fotorealistiche e/o piene di sfumature.Esempio:Quale formato usare per comprimere un’immagine fotorealisticaL’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 insequenza. In effetti, il peso dell’immagine rimane gravoso (FIG 4).

FIG. 4Immagine GIF a 256 colori, peso 25,57 K



Ridurre il numero di colori riduce il peso dell’immagine ma la qualità ne risente pesantemente (FIG5).

FIG. 5Immagine GIF 16 colori, peso 8,195 K

Utilizzando il formato JPEG le cose migliorano (FIG 6): la qualità rimane buona e il peso si riducenotevolmente. Tuttavia onestamente è ancora troppo pesante.

FIG. 6Immagine 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’ possibilecominciare a notare l’effetto indesiderato dei quadratini.

FIG. 7Immagine 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): iquadrati sono ancora più evidenti e i dettagli si perdono e confondono.



FIG. 8Immagine 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. Irisultati visibili in figura 10 evidenziano la riduzione del peso ma anche una notevole perdita diqualità.

FIG. 10 jpeg qualità 10%, peso 3,1 K

Utilizzando il formato GIF, figura 11, notiamo invece come l’immagine mantenga un buon aspettoanche 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, figura12, si ottengono pochi miglioramenti qualitativi non sufficienti per accettare l’aggravio conseguitoin termini di peso.

FIG. 12gif 256 colori, peso 6,45 K

Concludendo in questo caso la soluzione migliore prevede l’uso del formato GIF. Qualche provadeve essere fatta per testare il numero di colori necessari all’immagine, questo per ottenere ilmiglior grado di compressione possibile.

HTML - MANUALE

Documents

Transcript of HTML - MANUALE