HTML e FrontPage

www.mtcube.com
FRONT PAGE E HTML
Breve manuale d’uso
Il manuale può essere scaricato e consultato gratuitamente, tuttavia è vietata ogni riproduzione, anche parziale, del
contenuto del manuale, se non dietro autorizzazione dell’autore R. Folgieri, 2001
www.mtcube.com
Come si crea nella pratica un sito Internet? Qual è lo strumento più semplice? Come funziona il
linguaggio Html? Queste sono le domande cui questo manuale intende dare una risposta…
INDICE
MICROSOFT FRONT PAGE............................................................................................................................................3
FRONT PAGE EXPLORER..........................................................................................................................................3
ELENCO VOCI DI MENU PIU’ SIGNIFICATIVE .................................................................................................4
FRONT PAGE EDITOR................................................................................................................................................5
ICONE PARTICOLARI PRESENTI NELLA BARRA DEGLI STRUMENTI........................................................6
LA BARRA DEI MENU ...............................................................................................................................................7
SEMPLICI PASSI PER CREARE UN SITO WEB...........................................................................................................8
HTML – BREVE GUIDA INTRODUTTIVA .................................................................................................................13
1 - COS'E' UN FILE HTML.........................................................................................................................................13
2 - COSA SONO LE ISTRUZIONI HTML.................................................................................................................13
3 - LA STRUTTURA DI UN FILE HTML E LE ISTRUZIONI STRUTTURALI.....................................................13
4 - ISTRUZIONI CHE OPERANO SUI CARATTERI...............................................................................................14
5 - ISTRUZIONI CHE OPERANO SUL LAYOUT DI PAGINA (IMPAGINAZIONE). ..........................................14
6 - OPERAZIONI PIU' AVANZATE SUL LAYOUT DI PAGINA (CREAZIONE DI LISTE)................................15
7 - LE "ANCORE" O LINKS IPERTESTUALI. .........................................................................................................16
8 - LE IMMAGINI ON LINE. .....................................................................................................................................16
9 - LE TABELLE. ........................................................................................................................................................17
10 - CARATTERI SPECIALI......................................................................................................................................18
11 - CONCLUSIONI....................................................................................................................................................18
2
Il manuale può essere scaricato e consultato gratuitamente, tuttavia è vietata ogni riproduzione, anche parziale, del
contenuto del manuale, se non dietro autorizzazione dell’autore R. Folgieri, 2001
www.mtcube.com
MICROSOFT FRONT PAGE
Microsoft Front Page è stato a lungo lo strumento più diffuso (grazie soprattutto al fatto che la
versione light era gratuita e diffusa sia via internet sia tramite le riviste specializzate unitamente a
Internet Explorer) per la creazione e la manutenzione di siti Web.
La creazione di siti Web e quella delle pagine HTML che lo compongono, venivano realizzate
tramite due tools distinti:
 Front Page Explorer
 Front Page Editor
Chiaramente ora ci sono tanti strumenti, ma da qualche parte  front page è ancora utilizzato…
FRONT PAGE EXPLORER
Visualizzazione delle directory che
compongono il sito
Elenco dei file che
compongono il sito
Visualizzazione grafica dei
collegamenti tra le varie pagine
HTML
Visualizzazione Link attivi
Visualizzazione collegamenti attivi
Consente di:
1. Creare un nuovo sito Web
2. Modificare la struttura di un sito Web preesistente
3. Pubblicare il sito sul Server Internet in modo da consentirne l’accesso a chiunque lo desideri (o
ne abbia l’accesso)
3
Il manuale può essere scaricato e consultato gratuitamente, tuttavia è vietata ogni riproduzione, anche parziale, del
contenuto del manuale, se non dietro autorizzazione dell’autore R. Folgieri, 2001
www.mtcube.com
ELENCO VOCI DI MENU PIU’ SIGNIFICATIVE
FILE:




Creazione di un nuovo Web
Apertura di un Web già esistente
Creazione di una nuova pagina HTML (standard o costruita mediante uno dei template
preesistenti)
Creazione di una nuova directory all’interno della struttura
MODIFICA:
 Copia dell’elemento selezionato
 Eliminazione dell’elemento selezionato
 Annulla l’ultima operazione eseguita
 Rinomina un elemento
VISUALIZZA:

Temi: consente di visualizzare degli stili predefiniti di siti Web (Bottoni con una
determinata grafica, intestazioni particolari, background delle pagine HTML etc…)
STRUMENTI:


Microsoft Gif Animator (consente di creare delle bitmap animate da inserire all’interno
delle pagine Web)
Impostazioni delle proprietà di un elemento (Colori dei link, diritti d’accesso etc…)
PUBBLICA:

Consente di trasferire il Sito o la singola pagina creata localmente sulla macchina che
ospita il proprio sito WEB.
4
Il manuale può essere scaricato e consultato gratuitamente, tuttavia è vietata ogni riproduzione, anche parziale, del
contenuto del manuale, se non dietro autorizzazione dell’autore R. Folgieri, 2001
www.mtcube.com
FRONT PAGE EDITOR
Come accennato precedentemente, mentre con Front Page Explorer viene gestita la struttura del sito
Web, con Front Page Editor è possibile creare/modificare le proprie pagine HTML.
La creazione delle pagine, può avvenire sia mediante tools grafici sia (per i più esperti) mediante la
digitazione del codice HTML.
Il risultato delle nostre operazioni potrà essere visualizzato immediatamente mediante la selezione
della voce ANTEPRIMA situata nella parte bassa della finestra dell’editor. Qualora fossero
necessarie delle piccole modifiche, sarà possibile intervenire direttamente sul codice HTML
selezionando la voce HTML (situata sempre nella parte bassa della finestra). Il codice che apparirà
sarà la traduzione in codice HTML di tutte le operazioni svolte tramite tools grafici nella modalità
NORMALE.
Modalità di sviluppo per esperti,
visualizza il codice HTML della
pagina e ne consente la modifica.
Anteprima della
pagina HTML
Modalità di creazione pagine in
modalità standard, vale a dire
mediante l’utilizzo di oggetti grafici
predefiniti (nelle Toolbars visibili)
5
Il manuale può essere scaricato e consultato gratuitamente, tuttavia è vietata ogni riproduzione, anche parziale, del
contenuto del manuale, se non dietro autorizzazione dell’autore R. Folgieri, 2001
www.mtcube.com
ICONE PARTICOLARI PRESENTI NELLA BARRA DEGLI STRUMENTI
Richiamo di
Front Page
Express
Inserimento/modifica
di un collegamento
ipertestuale (locale o
remoto)
Inserimento di un
elemento di Front Page
Inserimento di una tabella
(operazione analoga all’inserimento
di una tabella in Excel o Word)
Inserimento di un’immagine
(clipart o personale)
Gli elementi di Front Page (quelli già esistenti) che è possibile inserire in una pagina, sono
mostrati nella figura seguente:
6
Il manuale può essere scaricato e consultato gratuitamente, tuttavia è vietata ogni riproduzione, anche parziale, del
contenuto del manuale, se non dietro autorizzazione dell’autore R. Folgieri, 2001
www.mtcube.com
LA BARRA DEI MENU
Le voci presenti nella barra dei menu di Front Page è analoga, sia come aspetto sia come
funzionalità a quella di un qualsiasi word processor (basti pensare che dalla versione 8.0 di
Microsoft Word è possibile salvare un documento redatto in formato HTML, ottenendo così una
pagina inseribile in un sito Web).
La modalità di creazione di una pagina mediante gli oggetti grafici infatti si svolge esattamente così
come per un documento Word. Si inserisce il testo, eventuali tabelle, clipart etc… l’unica
differenza sta nel fatto che tutte queste operazioni vengono tradotte in codice HTML (possiamo
vederlo premendo il tasto HTML a fondo pagina dopo aver creato la nostra pagina web).
Le voci che ora verranno elencate, essendo mirate alla gestione di oggetti riservati esclusivamente
al mondo Web, sono presenti esclusivamente in Front Page (ed in tutti i pacchetti di Web Editing).
7
Il manuale può essere scaricato e consultato gratuitamente, tuttavia è vietata ogni riproduzione, anche parziale, del
contenuto del manuale, se non dietro autorizzazione dell’autore R. Folgieri, 2001
www.mtcube.com
SEMPLICI PASSI PER CREARE UN SITO WEB
Per creare un nuovo sito Web, dovete selezionare la voce NUOVO\WEB dal menu FILE. Appare
una finestra in cui potete scegliere se farvi guidare nella creazione del sito attraverso formati
suggeriti da FrontPage (modalità che vi consigliamo per cominciare a familiarizzare con
l’ambiente), oppure potete scegliere di creare un sito web vuoto (questo significa che creerete il sito
da soli).
Nel caso in cui abbiate scelto una delle strutture suggerite da FrontPage, verrete guidati nello
scegliere stile, sfondi, informazioni da mettere sulle pagine, immagini, ecc. e successivamente
potrete personalizzare le pagine web create. Se invece scegliete di creare un sito Web vuoto
(l’ultima icona nella figura), potete poi utilizzare la voce NUOVO\PAGINA sempre nel menu FILE
(in questo caso scegliete la prima icona “Pagina vuota”).
Anche in questo caso potete scegliere se farvi aiutare da FrontPage nella creazione di ciascuna
pagina del sito web (scegliendo uno dei modelli), oppure se proseguire da soli nella composizione
del sito.
Potete scegliere (guardate le “linguette” riportate nella finestra) se creare una pagina senza o con
frame (cioè senza o con aree della pagina che scorrono indipendentemente dalle altre), oppure
potete scegliere di creare un foglio di stile. Il foglio di stile (con estensione CSS) sarà la pagina
contenente stili, impaginazione, tipi di carattere, ecc,, di riferimento per tutto il sito.
8
Il manuale può essere scaricato e consultato gratuitamente, tuttavia è vietata ogni riproduzione, anche parziale, del
contenuto del manuale, se non dietro autorizzazione dell’autore R. Folgieri, 2001
www.mtcube.com
Una volta creata una pagina del vostro nuovo sito, potrete utilizzare tutti i comandi di menu
(elencati nei paragrafi successivi) e tutti i bottoni che avete a disposizione nell’area di lavoro per
inserire immagini, testo e links (collegamenti) nelle pagine.
MENU
STRUMENTI (del tutto simili a quelli
che, per esempio, utilizzate in Word)
Modalità di lavoro. In quella NORMALE potete utilizzare gli strumenti della
barra, in HTML potete agire direttamente sulle istruzioni, con ANTEPRIMA
potete avere un preview della pagina appena composta.
Se in modalità normale vogliamo inserire un’immagine, scegliamo il comando corrispondente dal
menu INSERISCI, oppure selezioniamo l’icona corrispondente sulla barra degli strumenti ( ).
In tal modo, seguendo le richieste delle dialog box che appaiono, inseriremo un’immagine nella
posizione desiderata.
9
Il manuale può essere scaricato e consultato gratuitamente, tuttavia è vietata ogni riproduzione, anche parziale, del
contenuto del manuale, se non dietro autorizzazione dell’autore R. Folgieri, 2001
www.mtcube.com
Allo stesso modo, agendo attraverso i comandi di menu oppure utilizzando i pulsanti presenti nella
barra, potremo inserire testi, personalizzarne i caratteri, inserire tabelle, link, ecc. Basta provare ad
utilizzare i vari comandi per rendersi conto che non è difficile creare una pagina web simpatica e
funzionale.
Di seguito riportiamo lo schema dei pulsanti presenti nella barra, descrivendone i principali.
Annulla
ripristina
Stampa
Nuova
pagina
o web
Salva
pagina
o web
Mostra
anteprima
nel browser
Inserisci Componente Tabella
Immagine da file
Impaginazione
Elenchi puntati
Collegamento
Ipertestuale
Grassetto Corsivo Sottolineato
Apri
pagina
o web
Tipo
testo
Mostra
elenco
cartelle
Tipo
carattere
Taglia Copia Incolla Inc. Formato
Evidenziatore
Colore del testo
Controllo
ortografia
Dimensione
carattere
Il tasto Collegamento Ipertestuale (così come la voce corrispondente nel menu INSERISCI),
permette di collegare tra loro le pagine web create, collegarle a pagine di altri siti, immettere il
collegamento a documenti da scaricare (in formato .zip), collegare una parola alla possibilità di
inviare una mail per chiedere, per esempio, informazioni.
Innanzitutto selezionate la parola che deve diventare un LINK e poi, facendo un click sul bottone o
scegliendo l’opzione di menu, ci apparirà la finestra mostrata in figura:
10
Il manuale può essere scaricato e consultato gratuitamente, tuttavia è vietata ogni riproduzione, anche parziale, del
contenuto del manuale, se non dietro autorizzazione dell’autore R. Folgieri, 2001
www.mtcube.com
Ora potete introdurre il tipo di LINK desiderato:
 ad un’altra pagina (scegliendo tra quelle proposte o “sfogliando” le cartelle alla ricerca di
quella desiderata)
 ad un indirizzo URL differente (ad esempio per riportare i link ai vostri siti preferiti),
indicando l’indirizzo nell’apposita casella
 oppure selezionando (“sfogliando l’hard disk alla ricerca di quello desiderato) un
documento (.zip) che l’utente potrà scaricare con un click sul link.
Se fate un click con il tasto destro sulla pagina corrente, potete anche scegliere se mettere
un’immagine di sfondo alla pagina stessa. Basta dunque fare click con il tasto destro sulla pagina e
scegliere la voce PROPRITA’:
Attraverso la stessa finestra, nella sezione GENERALE, si può mettere un suono di sottofondo alla
pagina.
Potete personalizzare ulteriormente le pagine web, inserendo componenti e moduli che FrontPage
mette a disposizione, come Pulsanti, Testo scorrevole, Contatori, ecc. Troverete l’elenco dei moduli
11
Il manuale può essere scaricato e consultato gratuitamente, tuttavia è vietata ogni riproduzione, anche parziale, del
contenuto del manuale, se non dietro autorizzazione dell’autore R. Folgieri, 2001
www.mtcube.com
a disposizione nel menu INSERISCI, sotto la voce MODULI e i componenti nello stesso menu,
ovviamente sotto la voce COMPONENTI. Provate ad inserirne qualcuno per vederne l’effetto!
E’ buona norma utilizzare una tabella per rendere più ordinati gli spazi nella pagina. Potete
scegliere se le tabelle devono avere sfondo o bordi, semplicemente personalizzandone le proprietà
cui accedete selezionando la tabella con il pulsante destro del mouse o selezionando la voce di
menu Proprietà\Tabella dal menu Tabella.
A questo punto potete vedere l’anteprima della pagina che avete creato nel browser, tramite
l’apposito bottone della barra, oppure nella sezione Anteprima di FrontPage.
Se invece volete rimaneggiare il codice HTML, provate a fare un click sulla linguetta in baso e
accederete alla traduzione in linguaggio HTML della pagina che avete creato in modalità normale:
12
Il manuale può essere scaricato e consultato gratuitamente, tuttavia è vietata ogni riproduzione, anche parziale, del
contenuto del manuale, se non dietro autorizzazione dell’autore R. Folgieri, 2001
www.mtcube.com
HTML – BREVE GUIDA INTRODUTTIVA
1 - COS'E' UN FILE HTML.
Il file "html" (semplicemente "htm" per quelli che operano su un PC MS-DOS, nel quale non sono ammesse estensioni
di file di quattro lettere), sono dei semplici FILE DI TESTO (cioè contenenti solo caratteri ASCII) che, per questo
motivo sono facili da gestire, nel senso della trasmissione telematica. Essi però differiscono da testi destinati ad essere
semplicemente letti, perché contengono delle ISTRUZIONI PROGRAMMATICHE, inframezzate al testo che dovrà
essere realmente letto, scritte secondo un linguaggio che è, appunto, l'HTML (=HyperText Markup Language). Il
browser con cui il cybersurfista esplora il WWW (Mosaic, Netscape, I.Explorer...) è fatto apposta per interpretare le
istruzioni presenti nel file html e per trasformarle nelle caratteristiche grafiche (caratteri, colori, impaginazioni,
immagini, links...) di ciò che appare sullo schermo. Pertanto redigere un file html è un piccolo lavoro di
programmazione. Facciamo subito un esempio per non abusare troppo della pazienza di coloro che non sono dei guru
informatici. La seguente frase: <B>cipolle rosse</B> verrà rappresentata sullo schermo da una scritta in grassetto (=
cipolle rosse), perché il browser realizza in grassetto tutto ciò che sta fra <B> e </B>.
2 - COSA SONO LE ISTRUZIONI HTML.
Con questo abbiamo già capito alcune cose: le istruzioni (tags) sono sempre contenute fra < e > , e possono essere
accoppiate, ovverosia sono costituite da un'istruzione iniziale (<B> = da qui in poi grassetto!) e da un'istruzione finale
(</B> = da qui in poi basta grassetto!). In realtà non tutte le istruzioni sono accoppiate, ce ne sono una minoranza che
non necessitano di una fine; per esempio l'"a capo" che si indica così: <BR> . Le istruzioni possono contenere NOMI o
ELEMENTI, ATTRIBUTI, VALORI. Che significa? Per quanto riguarda il nome o elemento l'abbiamo già visto: BR è
il nome o elemento dell'istruzione di "a capo". Gli attributi e i valori li vedremo meglio in seguito, per ora ci limitiamo
ad un esempio: <IMG SRC="image.gif"> significa che, a quel punto, deve comparire un'immagine che è il file
image.gif . IMG (che significa immagine) è il nome o elemento, SRC (che significa sorgente) è l'attributo, "image.gif" è
il valore dell'attributo.
3 - LA STRUTTURA DI UN FILE HTML E LE ISTRUZIONI STRUTTURALI.
Al browser bisogna sempre dire dove comincia e dove finisce il file html, e questo si ottiene con le semplici istruzioni:
<HTML> e </HTML> . Inoltre il file html contiene due parti. la testa (head) e il corpo (body) e, naturalmente, bisogna
dire al browser dove iniziano e dove finiscono queste parti. Si fa così: <HEAD> </HEAD> e <BODY> </BODY> .
Pertanto un file html contiene sempre, obbligatoriamente queste istruzioni:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Cosa c'è nella testa del file? Normalmente ci si mette il titolo della pagina, che comparirà in quella striscia in alto nello
schermo, al di sopra dei vari menù e tasti cliccabili. Come si fa? Semplice, si usano i seguenti tags: <TITLE>
</TITLE> . Esempio:
<HTML>
<HEAD>
<TITLE>IL MANUALE ITALIANO PER IL PRINCIPIANTE HTML</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Che altro ci può essere nella testa? Beh, a dire la verità ci sarebbero altre funzioni come ISINDEX, BASE, LINK,
META... che ora non considereremo. Non sono necessarie per il livello medio che ci basta raggiungere.
E nel body? Nel body c'è tutto il resto... Ora lo vedremo.
13
Il manuale può essere scaricato e consultato gratuitamente, tuttavia è vietata ogni riproduzione, anche parziale, del
contenuto del manuale, se non dietro autorizzazione dell’autore R. Folgieri, 2001
www.mtcube.com
4 - ISTRUZIONI CHE OPERANO SUI CARATTERI.
Se vogliamo aggiungere nel file html un commento che ci serve da promemoria, ma che non vogliamo che sia
visualizzato sullo schermo, dobbiamo sostituirlo ai puntini in questa istruzione <!...> . Esempio: <!le prossime tre righe
sono state aggiunte da mio cugino> è una frase che non sarà visualizzata a schermo dal browser. Pertanto le istruzioni
che operano sui caratteri sono sostanzialmente queste:
<STRONG> </STRONG> oppure <B> </B> che generano il grassetto,
<EM> </EM> oppure <i> </i> che generano il corsivo inclinato (italic),
<TT> </TT> che generano un carattere monospazio tipo "macchina da scrivere".
<BLINK> </BLINK> che rendono lampeggiante la scritta compresa.
<FONT COLOR="999900"> </FONT> che determinano la particolare colorazione dei caratteri compresi
nell'istruzione
(il
colore
è
stabilito
dalla
sigla
numerica
o
letterale
fra
virgolette).
Esempi di colori:
1. 00FFFF,
2. FF0000,
3. 00FF00,
4. FFF000,
5. 0000FF,
6. FFFFFF,
7. FF00FF,
8. FFFF00,
9. ABCDEF,
10. 000000,
11. 990000,
12. 009900,
13. 000099,
14. 999900,
15. 990099,
16. 009999.
5 - ISTRUZIONI CHE OPERANO SUL LAYOUT DI PAGINA (IMPAGINAZIONE).
<BR> istruzione non accoppiata che manda a capo (altrimenti il browser riproduce il testo scritto tutto di fila,
senza mai andare a capo).
<P> ( </P> ) istruzione che, se non accoppiata, manda a capo lasciando lo spazio di una riga vuota (come a voler
separare un paragrafo), invece, se accoppiata, delimita un paragrafo a sé stante,
<HR> istruzione non accoppiata che crea una barra orizzontale di separazione fra un paragrafo e l'altro,
<CENTER> </CENTER> istruzione che centra la scritta nella pagina:
come un titolo,
<Hn> </Hn> dove n può assumere i valori 1, 2, 3, 4, 5, 6 (es.: <H3> </H3>), istruzione che crea dei caratteri da
intestazione (generalmente adatti ai titoli), in neretto, e variabili da una dimensione molto grande (n=1) a una
dimensione piccola (n=6). Esempio:
Questo è H1
Questo è H2
Questo è H3
Questo è H4
Questo è H5
Questo è H6
<BLOCKQUOTE> </BLOCKQUOTE> che genera un paragrafo rientrato verso destra (rientro a sinistra),
<PRE> </PRE> (preformatted) che riproduce il testo esattamente con la stessa formattazione che ha nel file
html (cioè con le stesse andate a capo, gli stessi spazi, gli stessi rientri, ecc...); serve per semplici tabelle,
effetti grafici particolari, disegnini in caratteri ASCII...
14
Il manuale può essere scaricato e consultato gratuitamente, tuttavia è vietata ogni riproduzione, anche parziale, del
contenuto del manuale, se non dietro autorizzazione dell’autore R. Folgieri, 2001
www.mtcube.com
6 - OPERAZIONI PIU' AVANZATE SUL LAYOUT DI PAGINA (CREAZIONE DI LISTE).
Volendo creare delle liste con rientri, asterischi, numeri, definizioni, ecc... si possono usare le seguenti istruzioni:
<UL> </UL> (unordered list) che racchiude le voci della lista facendole rientrare a sinistra,
<LI> che fa precedere ogni voce della "unordered list" da un pallino o quadratino nero, Inoltre manda
automaticamente a capo,
Esempio, con una lista nidificata dentro un'altra lista:
Lista di Scuole:
<UL>
<LI> Scuole Medie inferiori,
<LI> Scuole Medie Superiori:
<UL>
- Licei Classici
- Licei Scientifici,
- - Istituti Tecnici,
- - Istituti Professionali,
- - Istituti Magistrali. </UL>
<LI> Facoltà Universitarie.
</UL>
Che è visualizzato, in realtà, nel seguente modo:
Lista di Scuole:
 Scuole Medie inferiori,
 Scuole Medie Superiori:
- Licei Classici
- - Licei Scientifici,
- - Istituti Tecnici,
- - Istituti Professionali,
- - Istituti Magistrali.
 Facoltà Universitarie.
Attenzione! Volendo, in tutte le liste il pallino nero può essere sostituito con un disegnino a piacere, basta prima
prepararlo e salvarlo in formato GIF o JPG, e poi aggiungere un attributo all'istruzione <LI>, e cioè:
<LI SRC=image.gif> in cui image.gif è l'immagine da visualizzare, sistemata nella stessa directory in cui si trova
il file html.
<OL> <LI>... <LI>... <LI>... ... </OL> (ordered list) che genera la lista con gli opportuni rientri a sinistra (come
la unordered list), con la differenza che <LI> non crea un pallino nero ma un numero progressivo (tanti quanti sono
gli elementi della lista).
<DL> </DL> (definition list) che genera una lista particolare in cui ogni elemento della lista compare come
titoletto, seguito da una definizione (un discorsetto più lungo ulteriormente rientrato a sinistra),
<DT> </DT> racchiude gli elementi della definition list,
<DD> indica l'inizio della definizione, cioè del piccolo paragrafo che spiega nei dettagli in cosa consiste l'elemento
principale della lista.
Esempio:
<DL>
<DT>Primo termine</DT>
<DD>Qui si spiega cos'è il primo termine, che consiste in bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla...
<DT>Secondo termine</DT>
<DD>Qui si spiega cos'è il secondo termine, che consiste in bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla, bla...
<DT>Terzo termine</DT>
<DD>Qui si spiega cos'è il terzo termine, che consiste in bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla...
........
</DL>
Che è visualizzato nel seguente modo:
Primo termine
Qui si spiega cos'è il primo termine, che consiste in bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla...
15
Il manuale può essere scaricato e consultato gratuitamente, tuttavia è vietata ogni riproduzione, anche parziale, del
contenuto del manuale, se non dietro autorizzazione dell’autore R. Folgieri, 2001
www.mtcube.com
Secondo termine
Qui si spiega cos'è il secondo termine, che consiste in bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla...
Terzo termine
Qui si spiega cos'è il terzo termine, che consiste in bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla... ........
7 - LE "ANCORE" O LINKS IPERTESTUALI.
Eccoci al dunque: i links! Come tutti sanno i links sono lo strumento che fa del Web una potentissima biblioteca
mondiale in cui tutti i lettori possono saltare, al semplice suono di un "click", dall'America, all'Europa, all'Australia,
ecc...
I links sono dovuti ad una istruzione html che si chiama "anchor" ed è rappresentata da questi simboli: <A>> </A> .
Per la verità questa istruzione, scritta così come l'abbiamo presentata, non produce nessun effetto, infatti ha
obbligatoriamente bisogno di un attributo e di un valore per l'attributo. L'attributo comunemente può essere HREF o
NAME. Vediamone il significato:
<A HREF="http://www.dada.it/history.htm">Le origini storiche del Cristianesimo</A> E' l'istruzione
completa in grado di funzionare. La frase Le origini storiche del Cristianesimo è quella che comparirà sul browser,
generalmente in colore blu e sottolineata, su di essa la freccia del mouse si trasforma in una manina e, cliccando,
viene chiamata la pagina ' http://www.dada.it ' che, compatibilmente con le velocità di trasmissione dei dati in rete
in quel preciso momento, arriverà subito e comparirà visualizzata sullo schermo. Questo è un link, non è difficile.
Il link che abbiamo visto conduce ad una pagina diversa da quella di partenza, magari terribilmente lontana nel mondo,
però, volendo, si possono costruire dei link interni, ovverosia dei link che portano ad un punto voluto nella stessa
pagina in cui ci troviamo. Occorrono ben quattro istruzioni: due accoppiate (con l'attributo HREF), in cui compare il
simbolo #, per poter creare il link di partenza, e due accoppiate (con l'attributo NAME), in cui non compare il simbolo
#, per definire il punto di destinazione. Vediamo come sono fatte:
<A HREF="#punto1">Capitolo I</A> E' l'istruzione accoppiata che fa comparire sullo schermo un link con
scritto ' Capitolo I ', cliccando sul quale si può raggiungere il vero e proprio capitolo 1.
Ma come fa il browser a trovarlo? Lo trova perché all'inizio del capitolo 1 c'è l'istruzione così composta:
<A NAME="punto1">CAPITOLO I</A> Che fa comparire sullo schermo la scritta CAPITOLO I, la quale, se è
un titolo in evidenza al centro della pagina, potrebbe essere combinata con altre istruzioni come: <center><H2><A
NAME="punto1">CAPITOLO I</A></H2></center> . In questa pagina, sono links di questo tipo quelli in cui c'è
scritto : "Torna all'INDICE".
Adesso, addentrandoci nelle virtù dell'html, possiamo dire che si può anche creare un link esterno (cioè verso un'altra
pagina), nel quale però non si vuole arrivare alla semplice intestazione, ma si vuole subito raggiungere un punto
particolare della pagina in questione, in cui c'è scritto qualcosa che interessa. Il link, contenente il simbolo #, sarà fatto
così:
<A
HREF="nome.del.server/percorso/nomefile.html#puntox>Bla,
bla,
bla...</A>
In
cui
'
nome.del.server/percorso/nomefile.html ' sono tutte le specificazioni per ottenere la pagina desiderata e ' puntox ' è
il punto da raggiungere. Ma, naturalmente, in quella pagina, da qualche parte, ci dovrà essere per forza l'istruzione
di destinazione <A NAME="puntox">Bla, bla, bla...</A> altrimenti, come farà il programma ad individuare il
punto?
Un particolare tipo di link è quello che apre una finestra di posta:
<A HREF="mailto:[email protected]">Esperto</A> che serve, appunto, per spedire eventuali messaggi alla
persona indicata nell'argomento dell'istruzione (Esperto).
8 - LE IMMAGINI ON LINE.
Finora abbiamo parlato di solo testo. Ora, finalmente, ecco arrivare le immagini. Chiariamo subito un concetto
importante: le immagini non si trovano nel file html, si trovano a parte e sono dei file indipendenti di tipo GIF o JPG. Il
file html contiene solo una istruzione che indica al browser di visualizzare la figura sullo schermo. Ora tutti capiscono
subito che, per potere trovare questa figurina, il browser deve sapere dove si trova.
<IMG SRC="image.jpg"> E' l'istruzione (singola) necessaria per far comparire la figurina image.jpg . IMG
significa immagine e SRC significa sorgente (source). Attenzione! L'immagine deve trovarsi nella stessa directory
in cui si trova il file html, altrimenti come la può trovare il browser? Se l'immagine si trova in un'altra directory
l'istruzione deve contenere l'informazione su tutto il percorso necessario: <IMG SRC="/percorso/image.jpg"> .
16
Il manuale può essere scaricato e consultato gratuitamente, tuttavia è vietata ogni riproduzione, anche parziale, del
contenuto del manuale, se non dietro autorizzazione dell’autore R. Folgieri, 2001
www.mtcube.com
Se vogliamo l'immagine al centro della pagina scriveremo: <center><IMG SRC="/percorso/image.jpg"></center> . Se
vogliamo una scritta (per esempio: "Fotografia di ...") a fianco dell'immagine, dobbiamo aggiungere un altro attributo:
ALIGN con, rispettivamente, i seguenti valori: bottom, middle, top.
<IMG SRC="image.jpg" ALIGN=bottom> Fotografia di ... immagine con scritta a fianco in basso
<IMG SRC="image.jpg" ALIGN=middle> Fotografia di ... immagine con scritta a fianco a metà altezza
<IMG SRC="image.jpg" ALIGN=top> Fotografia di ... immagine con scritta a fianco in alto
Le immagini possono essere links ipertestuali? Certamente. Si osservi questa istruzione accoppiata:
<A HREF="nome.del.server/percorso/file.html"><IMG SRC="image.gif"></A> Si tratta, appunto, di un link
effettuato non con una stringa di testo, ma con una figurina.
E le immagini che costituiscono uno sfondo per la intera pagina web? A proposito di questo bisogna dire che lo sfondo,
generalmente, è costituito da un disegnino piccolo piccolo che viene automaticamente ripetuto molte volte, a tutto
schermo, dal browser. L'istruzione deve essere messa al posto della scritta <BODY>, all'inizio del corpo dell file html,
ed è fatta così:
<BODY background=backgr.gif> che prende il file backgr.gif e lo moltiplica a tutto schermo, creando lo sfondo
desiderato.
9 - LE TABELLE.
Si osservi la seguente tabella:
PRIMA CASELLA
SECONDA CASELLA
TERZA CASELLA
QUARTA CASELLA
essa è stata realizzata scrivendo queste istruzioni:
Istruzioni
Significato
<CENTER>
inizio della tabella, con bordo visibile
<table border>
inizio di una riga
<tr>
<td>PRIMA CASELLA</td>
inizio e fine di una casella
<td>SECONDA CASELLA</td>
inizio e fine di una casella
fine di una riga
</tr>
inizio di una riga
<tr>
<td>TERZA CASELLA</td>
inizio e fine di una casella
<td>QUARTA CASELLA</td>
inizio e fine di una casella
fine di una riga
</tr>
fine della tabella
</table>
</CENTER>
all'interno della tabella si può disporre nel modo preferito e più fantasioso qualsiasi elemento della pagina: testo,
disegni, links, altre tabelle.
Naturalmente si possono mettere tutte le righe che si vuole, basta semplicemente aggiungere, ogni volta, l'istruzione
<tr>.
Si può anche creare una tabella che genera delle colonne di larghezza diversa, stabilendo fin da principio quale sarà la
percentuale di ciascuna colonna rispetto alla larghezza della pagina:
più stretta
più larga
più stretta
più larga
che è stata realizzata con le seguenti istruzioni:
<table border width=100%>
<tr>
<td width=20%> più stretta </td>
<td width=80%> più larga </td>
</tr>
<tr>
<td width=20%> più stretta </td>
<td width=80%> più larga </td>
</tr>
</table>
17
Il manuale può essere scaricato e consultato gratuitamente, tuttavia è vietata ogni riproduzione, anche parziale, del
contenuto del manuale, se non dietro autorizzazione dell’autore R. Folgieri, 2001
www.mtcube.com
10 - CARATTERI SPECIALI.
Alcuni caratteri devono essere scritti, nel file html, mediante simboli particolari. Per esempio, com'è facile intuire, il
segno < viene normalmente interpretato dal browser come inizio di una istruzione e, pertanto, non visualizzato a
schermo. Come si fa se si vuole visualizzare proprio questo simbolo? Occorre scriverlo in questo modo: & # 60;
(lettere
attaccate)
,
oppure
&
l
t;
(lettere
attaccate)
.
Ci sono poi altri caratteri che devono essere scritti in un modo particolare, affinché tutti i browser siano in grado di
visualizzarli, per esempio le lettere accentate, come la voce del verbo essere " è " che si scrive così: & e grave; (lettere
attaccate) con tanto di punto e virgola in fondo. Vediamo una lista di caratteri particolari:
< si rende con: & # 60 (scritto tutto attaccato e seguito da un punto e virgola) oppure & l t (scritto tutto attaccato e
seguito da un punto e virgola) > si rende con: & # 62 (scritto tutto attaccato e seguito da un punto e virgola) oppure & g
t (scritto tutto attaccato e seguito da un punto e virgola) & si rende con: & # 38 (scritto tutto attaccato e seguito da un
punto e virgola) ß si rende con: & # 223 (scritto tutto attaccato e seguito da un punto e virgola) oppure & s z lig (scritto
tutto attaccato e seguito da un punto e virgola) à si rende con: & # 224 (scritto tutto attaccato e seguito da un punto e
virgola) oppure & a grave (scritto tutto attaccato e seguito da un punto e virgola) è si rende con: & # 232 (scritto tutto
attaccato e seguito da un punto e virgola) oppure & e grave (scritto tutto attaccato e seguito da un punto e virgola) é si
rende con: & # 233 (scritto tutto attaccato e seguito da un punto e virgola) oppure & e acute ; (scritto tutto attaccato e
seguito da un punto e virgola) ì si rende con: & # 236 (scritto tutto attaccato e seguito da un punto e virgola) oppure & i
grave ; (scritto tutto attaccato e seguito da un punto e virgola) ò si rende con: & # 242 (scritto tutto attaccato e seguito
da un punto e virgola) oppure & o grave ; (scritto tutto attaccato e seguito da un punto e virgola) ù si rende con: & #
249 (scritto tutto attaccato e seguito da un punto e virgola) oppure & u grave (scritto tutto attaccato e seguito da un
punto e virgola)
11 - CONCLUSIONI.
Questo breve manualetto finisce qui. Ci sono innumerevoli altre questioni che rimangono da spiegare, come i moduli,
le cornici (frames), le animazioni, le mappe cliccabili... Ma noi crediamo che, in alcuni casi, voler fare troppo significa
non combinare niente e, poiché questo manualetto è destinato a chi comincia, ci è sembrato opportuno limitarci a
queste nozioni base della programmazione html.
Una cosa è certa: una persona di buon gusto e con grande fantasia, anche con queste semplici nozioni, può
costruire delle pagine a dir poco meravigliose. Buon lavoro, dunque!
18
Il manuale può essere scaricato e consultato gratuitamente, tuttavia è vietata ogni riproduzione, anche parziale, del
contenuto del manuale, se non dietro autorizzazione dell’autore R. Folgieri, 2001