IL TESTO E’ STATO DIVISO IN 4 SEZIONI:
SEZIONE 1
SEZIONE 2
SEZIONE 3
SEZIONE 4
ITN BUCCARI
CORSO DI INFORMATICA
NAUTIBASE
ANNO SCOLASTICO 2000 - 2001
LEZIONI PREPARATORIE
CORSO DI BASE: le
funzioni trattate sono soltanto l'inizio della conoscenza del linguaggio, per
cui è necessario un approfondimento per impadronirsene.
LA PAGINA DI SERVIZIO
Tutte le pagine html cominciano con
<html>
<head><title> -------
</title></head>
<body>
e finiscono con
</body>
</html>
e quindi è un poco scomodo ripetere ogni volta simili ordini dopo aver aperto una pagina blocconote. E' utile costruire una pagina di servizio già pronta per essere usata. Il modo più semplice è costruire una pagina intitolata "VUOTA".
PROCEDURA:
· Aprire una pagina blocconote.
· Scrivere le sequenze e i titoli nel modo seguente:
<html>
<head><title> VUOTA </title></head>
<body>
<p align="center">
VUOTA </p>
<br>
</body>
</html>
·
Salvare
la pagina dentro la cartella FIDO con il nome vuota.htm.
·
Quando
serve una pagina nuova, si apre vuota.htm, si cambia il titolo (per esempio GIOCATTOLI) e si salva con il nome fido2.htm sempre nella cartella FIDO.
·
Chiudere
tutte le pagine.
·
Riaprire
la cartella: troviamo le pagine fido1.htm, fido2.htm, vuota.htm.
·
Per
realizzare fido3.htm riapriamo vuota.htm e ripetiamo la procedura.
·
Se
le pagine devono avere un colore diverso dal bianco e i titoli un colore
diverso dal nero e una dimensione maggiore del normale, i codici sono ancora
più noiosi da ripetere e quindi è ancora più utile avere una pagina di
servizio.
ATTENZIONE
OGNI VOLTA CHE SI CORREGGE QUALCOSA NELLA PAGINA BLOCCONOTE BISOGNA
SALVARE LE MODIFICHE E AGGIORNARE LA
PAGINA FINALE.
INSERIRE SEMPRE IL COMANDO "MODIFICA, A CAPO AUTOMATICO".
ALTRI (POCHI) CODICI
Le parole in rosso sono quelle alle quali si applica il codice.
· Codice colore: <font color="green">cucciolo</font>
· Codice dimensione parola: <font size="5">dannato</font>
· Codice lettera greca: <font face="symbol">a</font>
·
Codice
parola verde, grande, in lettere greche: <font
color="green"><font size="5"><font
face="symbol"> mangia</font></font></font>
oppure <font color="green" size="5" face="symbol
">mangia</font>
· Codice link: se vogliamo far apparire la pagina fido2.htm (dove sono descritti i giocattoli di Fido) cliccando sulla parola gioca, scriveremo: <a href="fido2.htm">gioca</a>.
· Codice per colorare tutta la pagina: si entra nel codice <body> e si scrive: <body bgcolor="yellow">. Tutta la pagina diventerà gialla.
· Codice grassetto: <b>mio</b>
· Codice corsivo: <i>cane</i>
· Codice sottolineato: <u>anni</u>
· Codice grassetto, corsivo, sottolineato: <b><i><u>sei</u></i></b>
· Codice per inserire una figura: <img src="osso.gif"> (questo marcatore non ha chiusura)
· Codice spazio vuoto: &nsbp; (questo codice non è contenuto fra < e >)
ATTENZIONE
PRIMA DI ANDARE OLTRE
OCCORRE SCRIVERE A MANO TRE PAGINE CON TUTTE LE INDICAZIONI: TITOLI, COLORI,
DIMENSIONI, LEGAMI, A CAPO, ECC.
BISOGNA CIOE' AVERE A
DISPOSIZIONE IL PROGETTO DI QUEL CHE SI VUOLE OTTENERE
(SCENEGGIATURA).
PROGETTO DELLA PRIMA PAGINA
FRAME
Ricordiamo
che quello che scriviamo sulla pagina di blocconote è diverso da ciò che vedremo nella pagina finale e quindi, per pagine
appena complicate, occorre prima fare un progetto.
La pagina frame è una pagina difficile e bisogna costruirla pazientemente. Frame significa struttura, intelaiatura di supporto: in essa confluiscono molte o addirittura tutte le altre pagine, oppure da essa si dipartono per navigare dentro tutto il nostro documento.
L'esempio più semplice è quello di una pagina che contiene l'indice di tutta l'opera a sinistra, mentre a destra appaiono, attraverso i link, tutte le altre pagine, una per volta, a piacere.
Per ottenere il risultato in figura bisogna avere alcuni documenti (file) in html:
1) il documento che contiene gli ordini per dividere la pagina: lo chiameremo frame1.htm.
2) il documento che contiene l'indice: lo chiameremo indice1.htm.
3) i documenti che contengono
testo e immagini che abbiamo chiamato fido1.htm, fido2.htm e fido3.htm.
Decidiamo che la parte destinata all'indice abbia una larghezza di 80 pixel, mentre tutto il resto (indicato dall'asterisco *) sarà dedicato a testo e immagini. Se ci accorgeremo che 80 pixel è poco, nel seguito lo correggeremo.
FRAME1
CI SERVIREMO DELLA PAGINA DI SERVIZIO DI NOME vuota.htm
INSERIRE IL COMANDO "MODIFICA, A CAPO AUTOMATICO".
CODICE
<html><head><title>frame1</title></head>
<frameset cols="80,*"
frameborder="no" border=0>
<frame scrolling="yes"
name="sin" src="indice1.htm">
<frame scrolling="yes"
name="des" src="fido1.htm">
</frameset>
<noframe>
</noframe>
</html>
Salvare
con il nome: frame1.htm.
SIGNIFICATO
A) Costruisci una struttura posizionando (frameset) due colonne larghe 80 e * pixel (cols="80,*"), senza contorno (frameborder="no") e quindi con bordo di spessore 0 (border=0).
B) Nella struttura metti lo scrolling (frame scrolling="yes") e nella parte sinistra di nome sin (name="sin") richiama il documento di nome indice1.htm (src="indice1.htm").
C) Nella struttura metti lo scrolling (frame scrolling="yes") e nella parte destra di nome des (name="des") richiama il documento di nome fido1.htm (src="fido1.htm").
D) Se il browser non sa leggere la pagina frame, scrivila senza frame (<noframe></noframe>).
INDICE1 (inserire il
comando: modifica, a capo automatico)
CODICE
<html><head><title>indice1</title></head>
<body>
<a href="fido1.htm"
target="des" >Il mio cane </a>
<br><a href="fido2.htm"
target="des"> Giocattoli</a>
<br><a href="fido3.htm"
target="des"> Il mantello</a>
</body></html>
Salvare con il nome: indice1.htm.
SIGNIFICATO
A) Cliccando sul titolo "Il mio cane" mandami al file fido1.htm (a href="fido1.htm") facendolo apparire nella parte destra chiamata des (target="des").
B) Cliccando sul titolo "Giocattoli" mandami al file fido2.htm (a href="fido2.htm") facendolo apparire nella parte destra chiamata des (target="des").
C) Cliccando sul titolo "Il mantello" mandami al file fido3.htm (a href="fido3.htm") facendolo apparire nella parte destra chiamata des (target="des").
RISULTATO
Aprendo il file di nome frame1.htm vedremo una pagina divisa in due parti: a sinistra l'indice con i titoli in colonna: Il mio cane, Giocattoli, Il mantello. Portando la freccia del mouse su uno dei titoli, la freccia si trasforma in "manina" e, cliccando, appare a destra la pagina relativa all'argomento chiamato.
MIGLIORAMENTI:
1) Si può colorare la pagina indice1:
<html><head><title>indice1</title></head>
<body bgcolor="azure">
..........................
</html>
2) Si può far apparire una scritta sotto la manina:
<a href="fido1.htm" target="des" title="E' BELLO">Il mio cane </a>
3) Se abbiamo una fotografia di Fido (di nome in codice Fido.gif) possiamo usarla come sfondo della pagina Fido2:
<html><head><title>fido2</title></head>
<body background="Fido.gif">
..........................
</html>
ATTENZIONE
OGNI VOLTA CHE SI
CORREGGE QUALCOSA NELLA PAGINA BLOCCONOTE BISOGNA SALVARE LE MODIFICHE E AGGIORNARE LA PAGINA FINALE.
INSERIRE IL
COMANDO "MODIFICA, A CAPO AUTOMATICO".
CORREGGERE
LA PAGINA FRAME
La pagina che contiene il codice per costruire il file frame1.htm è completamente nascosta. Per trovarla per effettuare aggiunte e correzioni (per esempio cambiare la larghezza destinata all'indice), bisogna aprire frame1.htm, andare sul menu, aprire visualizza e cliccare su (ORIGINE) HTM. In questo modo abbiamo di nuovo la pagina blocconote contenente il codice
<frameset cols="80,*"
frameborder="no" border=0>
<frame scrolling="yes"
name="sin" src="indice1.htm">
<frame scrolling="yes" name="des" src="fido1.htm">
</frameset>
nel quale correggere per esempio da 80 a 100 la larghezza della colonna di sinistra, oppure costruire una cornice di un certo spessore: frameborder="yes" border=3.