IL TESTO E’ STATO DIVISO IN 4 SEZIONI: SEZIONE 1; SEZIONE 2; SEZIONE 3; SEZIONE 4


COPERTINA

 

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.

 

 

IL LINGUAGGIO HTML.

 

HTML = hiper text markup language = Linguaggio per Migliorare gli Iper-Testi

HTML è il CODICE (formato da simboli e parole) attraverso il quale comunicano i PC collegati in rete. Esso non è l'unico, ma è ancora il più diffuso ed è quello gestito (capito) dal software Internet Explorer di Windows. Conoscere html non è indispensabile (non è necessario essere ingegneri meccanici per guidare l'automobile): numerosi programmi automatici traducono ad esempio word in html (ciò accade nell'invio di messaggi attraverso e-mail); diventa indispensabile però quando si vuole che il risultato della traduzione rispetti i nostri desiderii (è necessario essere ingegneri meccanici per costruire una automobile che funzioni come vogliamo noi). Per esemplificare: può accadere che l'immagine da noi inviata venga automaticamente inserita a destra della pagina, mentre noi la vogliamo a sinistra. Il controllo sulla pagina che arriva a destinazione dipende dalla nostra conoscenza del codice html.

Il linguaggio html gestisce tre elementi: codice, testo, immagini (e suoni).

Il codice (composto di simboli, parole e numeri) è indispensabile per inserire testo e immagini. In pratica se non si ha il piatto (il codice), il server non ci permette di mangiare (inviare o ricevere testi e immagini). Il codice è gestito dall'autore delle pagine web e non può essere modificato che da lui. Infatti per immettere un oggetto in rete occorre una password (parola - chiave) nota soltanto all'autore della pagina e al provider.

Esempi di simboli sono @, #, <, >, /, ecc. Esempi di parole sono br, align, name, yellow, font, ecc.

L'insieme di simboli, parole e numeri in una successione tassativamente osservata (altrimenti non funziona) costituisce un ordine (o stringa). Gli ordini sono applicati al testo e alle immagini per dare la posizione, la qualità, le dimensioni, il colore, il movimento, il collegamento, ecc.

Esempi di stringhe: <font face="symbol">D</font>: questa stringa (che costituisce la parte nascosta della pagina web), applicata al testo D, produce la scrittura del "delta" maiuscolo (D) dell'alfabeto greco.

         <p align="center"> <img src="pane.gif" width=200 height=150> </p> produce il posizionamento al centro della pagina della figura chiamata "pane" con le dimensioni di 200 x 150 pixel.

 

LA COSTRUZIONE DELLA PRIMA PAGINA HTML

 

PER SCRIVERE IN HTML CI SERVIREMO DI BLOCCO NOTE.

 

TUTTI GLI ESEMPI DESCRITTI SONO STATI SVILUPPATI E SONO PRESENTI NELLA CARTELLA

 

Prima di cominciare bisogna creare sul desktop una cartella che contenga ciò che produrremo,

 denominata per esempio FIDO.

 

PRIMA FASE: aprire una pagina di blocconote che si trova già sul desktop oppure che bisogna cercare da START - PROGRAMMI - ACCESSORI*. Esplorare il menu: file, modifica, cerca, ? Inserire da modifica "a capo automatico".

            *creare un collegamento sul desktop per non cercare ogni volta un programma: start-programmi-accessori-blocconote-tasto destro-invia a-desktop (crea collegamento)-tasto sinistro.

 

SECONDA FASE: scrivere la prima serie di stringhe (vedi paragrafo intitolato "linguaggio html") che fanno esistere la pagina html. In ciò che scriveremo ora occorre rispettare: simboli, parole, sequenza, posizione sulla pagina, la scrittura in minuscolo; in colore verde sono gli esempi di titoli e testi che gli autori modificano secondo le loro esigenze.

           <html>

           <head><title>ETA'</title></head>

           <body>

            <p align="center">IL MIO CANE.</p>

            <br>Il mio cane ha già 6 anni. Mangia come un dannato e gioca ancora come un cucciolo.

           -------

           -------

           </body>

           </html>

 

TERZA FASE: salvare la pagina. FILE-SALVA CON NOME-TASTO SINISTRO-APPARE FINESTRA-SALVA COME-TUTTI I FILE [*.*]-NOME FILE-fido1.htm*-SALVA IN-DESKTOP-FIDO-TASTO SINISTRO-INVIO-SALVA-TASTO SINISTRO-CHIUDERE PAGINA. Riappare il desktop.

           * Il numero 1 serve perchè probabilmente scriveremo molte pagine dedicate a Fido. Non dimenticare il punto prima di htm    (attenzione: non html).

 

QUARTA FASE: controllo. Aprire la cartella FIDO nella quale si deve trovare la icona intitolata fido1.htm. Se non c'è significa che si è commesso un errore e bisogna ricominciare da capo, controllando la sequenza. Se c'è fido1.htm, aprire e controllare di aver ottenuto il seguente risultato:

 

IL MIO CANE.

Il mio cane ha già 6 anni. Mangia come un dannato e gioca ancora come un cucciolo.

 

QUINTA FASE: tornare su blocconote per correggere, aggiungere, completare. FRECCIA BIANCA SU UN PUNTO QUALUNQUE DI fido1 - TASTO DESTRO-(VISUALIZZA ORIGINE) HTML-TASTO SINISTRO. Riappare la pagina blocconote che avevamo composto. Su di essa possiamo correggere, aggiungere, completare a nostro piacimento ma senza toccare i codici iniziali e finali:

           <html>

           <head><title>         </title></head>

           <body>

 

           </body>

            </html>

            senza i quali la pagina non esiste.

 

SESTA FASE: salvare le correzioni. CHIUDERE LA PAGINA BLOCCONOTE-APPARE FINESTRA-SI-TASTO SINISTRO-APPARE PAGINA fido1-ICONA "AGGIORNA" SUL MENU-TASTO SINISTRO. Sulla pagina fido1 appaiono le variazioni che abbiamo apportato.

 

 

SIGNIFICATO DEI CODICI

 

1.       Tutti i codici iniziano con il segno di minore <.

2.       Tutti i codici terminano con il segno di maggiore >.

3.       Quasi tutti i marcatori hanno un codice di chiusura introdotto da una sbarra /.

4.       Il codice <br> significa "vai a capo".

5.       Il codice <p align= introduce la posizione dell'oggetto: "left" a sinistra; "right" a destra; "center" al centro.

6.       Il codice </p> chiude il codice di posizione dell'oggetto determinando anche un "a capo".

7.       La sequenza <head> (testa) <title> (titolo) introduce il titolo "interno" della pagina, cioè il PC conosce la pagina con il nome scritto dopo <title>, per esempio " ETA' ".

8.       La sequenza </title> (fine titolo) </head> (fine testa) chiude il titolo interno.

9.       La sequenza <body> (corpo) efgh </body> racchiude testo e immagini che appariranno al lettore.

10.   La sequenza <html> --------- </html> racchiude la pagina.

11.   Il formato della pagina è  .htm e la presenza del punto è essenziale.