Manuale introduttivo HTML - mtcube

www.rfolgieri.com

HTML Breve manuale d’uso

Copyright 2007 Raffaella Folgieri - è vietata ogni riproduzione, anche parziale, del contenuto del manuale, se non previa autorizzazione da parte dell’autore.

www.rfolgieri.com Come funziona il linguaggio Html? In questo manuale la risposta… INDICE HTML – BREVE GUIDA INTRODUTTIVA ...................................................................................................................3 1 - COS'E' UN FILE HTML...........................................................................................................................................3 2 - COSA SONO LE ISTRUZIONI HTML...................................................................................................................3 3 - LA STRUTTURA DI UN FILE HTML E LE ISTRUZIONI STRUTTURALI.......................................................3 4 - ISTRUZIONI CHE OPERANO SUI CARATTERI.................................................................................................4 5 - ISTRUZIONI CHE OPERANO SUL LAYOUT DI PAGINA (IMPAGINAZIONE). ............................................4 6 - OPERAZIONI PIU' AVANZATE SUL LAYOUT DI PAGINA (CREAZIONE DI LISTE)..................................5 7 - LE "ANCORE" O LINKS IPERTESTUALI. ...........................................................................................................6 8 - LE IMMAGINI ON LINE. .......................................................................................................................................6 9 - LE TABELLE. ..........................................................................................................................................................7 10 - CARATTERI SPECIALI........................................................................................................................................8 11 - CONCLUSIONI......................................................................................................................................................8

2 Copyright 2007 Raffaella Folgieri - è vietata ogni riproduzione, anche parziale, del contenuto del manuale, se non previa autorizzazione da parte dell’autore.

www.rfolgieri.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: cipolle rosse verrà rappresentata sullo schermo da una scritta in grassetto (= cipolle rosse), perché il browser realizza in grassetto tutto ciò che sta fra e .

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 ( = da qui in poi grassetto!) e da un'istruzione finale ( = 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ì:
. 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: 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: e . 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ì: e . Pertanto un file html contiene sempre, obbligatoriamente queste istruzioni: 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 tag: . Esempio: IL MANUALE ITALIANO PER IL PRINCIPIANTE 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.

3 Copyright 2007 Raffaella Folgieri - è vietata ogni riproduzione, anche parziale, del contenuto del manuale, se non previa autorizzazione da parte dell’autore.

www.rfolgieri.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: è una frase che non sarà visualizzata a schermo dal browser. Pertanto le istruzioni che operano sui caratteri sono sostanzialmente queste: oppure che generano il grassetto, oppure che generano il corsivo inclinato (italic), che generano un carattere monospazio tipo "macchina da scrivere". che rendono lampeggiante la scritta compresa. 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).
istruzione non accoppiata che manda a capo (altrimenti il browser riproduce il testo scritto tutto di fila, senza mai andare a capo).

(

) 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,

---

istruzione non accoppiata che crea una barra orizzontale di separazione fra un paragrafo e l'altro, istruzione che centra la scritta nella pagina: come un titolo, dove n può assumere i valori 1, 2, 3, 4, 5, 6 (es.:

), 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

che genera un paragrafo rientrato verso destra (rientro a sinistra),

(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... 4 Copyright 2007 Raffaella Folgieri - è vietata ogni riproduzione, anche parziale, del contenuto del manuale, se non previa autorizzazione da parte dell’autore.

www.rfolgieri.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:

(unordered list) che racchiude le voci della lista facendole rientrare a sinistra,

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:

• Scuole Medie inferiori,
• Scuole Medie Superiori:
  - Licei Classici - Licei Scientifici, - - Istituti Tecnici, - - Istituti Professionali, - - Istituti Magistrali.
• Facoltà Universitarie.

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

, e cioè:

in cui image.gif è l'immagine da visualizzare, sistemata nella stessa directory in cui si trova il file html.

1. ...
2. ...
3. ... ...

(ordered list) che genera la lista con gli opportuni rientri a sinistra (come la unordered list), con la differenza che

non crea un pallino nero ma un numero progressivo (tanti quanti sono gli elementi della lista).

(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),

racchiude gli elementi della definition list,

indica l'inizio della definizione, cioè del piccolo paragrafo che spiega nei dettagli in cosa consiste l'elemento principale della lista. Esempio:

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

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

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... 5 Copyright 2007 Raffaella Folgieri - è vietata ogni riproduzione, anche parziale, del contenuto del manuale, se non previa autorizzazione da parte dell’autore.

www.rfolgieri.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: > . 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: Le origini storiche del Cristianesimo 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: Capitolo I 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: CAPITOLO I 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:

CAPITOLO I

. 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ì: