Manuale scritto da Gianni Crestani - Roberto Toppoli · Creare pagine Web Manuale scritto da Gianni...

Creare pagine Web Manuale scritto da Gianni Crestani - email: [email protected]

La diffusione in qualunque forma delle Lezioni / Tutorial del sito www.pcdazero.it è consentita. Tuttavia si richiede che la riproduzione sia completa del nome, e-mail e pagina web dell'Autore.

1

Manuale scritto da Gianni Crestani e-mail: [email protected]

Scaricato da A SBAFO! Tutto per il web gratis e in italiano… www.asbafo.net

http://www.pcdazero.it/

http://www.asbafo.net/

2

INDICE DEL MANUALE

CREARE PAGINE WEB

Pagina web con Word Lavorare con due programmi Cambiare lo sfondo

PUBBLICARE SU INTERNET UNA PAGINA WEB

Registrare un sito Attivare il sito Inviare / Pubblicare pagine web Vedere la tua pagina su Internet Eliminare un file dal sito online

CREARE COLLEGAMENTI IPERTESTUALI

Creare una cartella web Creare la Home Page con Word Creare altre pagine web Modificare le pagine da Internet Explorer Inserire un collegamento ipertestuale Aprire da Word una pagina web Vedere il risultato finale

INSERIRE UNA TABELLA PER METTERE ORDINE

Mettere un po' d'ordine Inserire una tabella Restringere o allargare le colonne della tabella Nascondere la tabella

INSERIRE ED INVIARE IMMAGINI

Inserire una immagine clip art Una cartella per le immagini Inviare in Internet (pubblicare) la pagina web con le immagini Aggiornare le pagine web modificate

INTRODUZIONE AL LINGUAGGIO HTML

Creare la prima pagina web con il linguaggio HTML Come vedere le estensioni dei file Cosa sono le estensioni dei file Browser predefinito ! Usare il Blocco Note come editor HTML

LINGUAGGIO HTML ED ELEMENTI TAGS

Cos'è l'HTML Cosa sono i TAGS HTML, un linguaggio da capire <HEAD> </HEAD> <TITLE> </TITLE> <META name="" content=""> <BODY> </BODY>

3

LA FORMATTAZIONE CON L'HTML

Formattare il testo con l'HTML Come modificare una pagina HTML

COME CREARE COLLEGAMENTI CON L'HTML

I collegamenti del web I tags di collegamento <A></A> Come vedere se il collegamento funziona Usare il tag per andare a capo Primi esercizi sull'HTML

COME CREARE COLLEGAMENTI ESTERNI

Collegamenti a risorse web esterne Trucco per inserire indirizzi senza sbagliare Esercizio pratico sui collegamenti esterni Aprire un collegamento su una nuova finestra



4

CREARE PAGINE WEB

Ci sono svariati modi per creare una singola e semplice pagina web e uno di questi è quello di usare il "semplice" programma Word.

Pagina web con Word Apri il programma Word e scrivi:

La mia prima pagina web con word

Dalla barra dei menù clicca su File e clicca su Salva come pagina web...

Dalla finestra di dialogo, scegli la cartella dove salvare la pagina,

Clicca su Salva.

Bene ... hai creato la tua prima pagina web.

.. più facile di così !



5

Per vedere ora la pagina web appena creata, riduci a icona il programma Word, apri la cartella in cui hai creato la pagina e fai doppio clic sopra di essa per aprirla...

Si aprirà il browser predefinito (Internet Explorer, Netscape o altri) nel quale verrà "caricata" la tua prima pagina web.

Lavorare con due programmi Nella barra delle apllicazioni dovresti vedere due icone, corrispondenti al programma Word ed al programma Internet Explorer.

Word servirà per modificare la pagina, mentre Internet Explorer servirà per visualizzare i risultati. Per eseguire le modifiche, quindi:

1. dalla barra delle applicazioni, clicca sul programma Word,

2. esegui le modifiche necessarie (ad esempio formatta il testo in allineamento centrato, carattere rosso, dimensione 20 ) e clicca su salva per salvare le modifiche.

Per visualizzare il risultato:

1. dalla barra delle applicazioni, clicca sul programma Internet Explorer,



6

2. clicca sul pulsante aggiorna oppure premi il tasto F5 da tastiera per visualizzare le modifiche.

Cambiare lo sfondo Ora aggiungi un tocco colorato alla pagina, cambiando lo sfondo: dalla barra dei menù clicca su Formato, scegli la voce Sfondo e quindi clicca sul colore desiderato...

Per riosservare il risultato, ricordati di:

1. salvare le modifiche, 2. riaprire Internet Explorer,

cliccare sul pulsante Aggiorna (o tasto F5).

PUBBLICARE SU INTERNET UNA PAGINA WEB

La prima pagina di ogni sito deve essere nominata index.html (oppure index.htm, index.php, index.asp se si usano altri linguaggi).

Pertanto se hai creato la tua prima pagina con un altro nome, rinominala con il nome index.html.

Ora questa pagina web la devi inviare su internet perchè possa venire visualizzata dalle persone che si collegano a internet ( internauti ).

Esistono dei siti che mettono a disposizione uno spazio del loro disco fisso (detto hosting ), gratuitamente, per chi vuole pubblicare le proprie pagine web. In questo tutorial ho fatto riferimento al sito http://www.altervista.org/ , ma tantissimi altri siti mettono a disposizione dello spazio gratuito.

http://www.altervista.org/



7

E' sufficiente andare su un motore di ricerca e digitare le parole hosting gratis (o gratuito).

Il vantaggio di un hosting gratuito è che appunto non devi sborsare un centesimo, gli svantaggi principali sono:

1. il nome del sito è lungo e difficile da ricordare; 2. solitamente, viene posizionata automaticamente su ogni pagina web una barra pubblicitaria; 3. la maggior parte non permette di pubblicare pagine di tipo commerciale.

... comunque per imparare ... va benissimo.

Registrare un sito

1. Collegati al sito http://www.altervista.org/ 2. Clicca su Iscriviti gratis (in alto a destra della pagina)...

Si apre una nuova pagina, nella quale ti vengono richiesti alcuni dati (form)...

3. inserisci i dati richiesti (quelli con l'asterisco sono obbligatori), per leggere il regolamento ed il trattamento dei dati personali, clicca sui relativi link (collegamenti ipertestuali).

Se sono di tuo gradimento ...

4. clicca sulla casella Accetto di usufruire ... (per mettere il segno di spunta). 5. ...e clicca su Invia.

Attivare il sito

Come viene descritto nell'ultima immagine, ti verrà inviata un e-mail (solitamente dopo qualche minuto e comunque entro sessanta minuti) nella quale riceverai le istruzioni per attivare il tuo sito.

1. Vai a leggere la tua e-mail e clicca sul link indicato. Verrà quindi aperta (tramite il browser) la procedura di attivazione;

Segui le istruzioni e alla fine comparirà una finestra che ti confermerà l'attivazione del tuo account.




8

Come vedi il tuo sito avrà il seguente indirizzo: http://nomesito.altervista.org (dove al posto di "nomesito", ci sarà quello scelto da te).

Inviare / Pubblicare pagine web

Attivato il sito, puoi ora inviare la tua prima pagina (ti ricordo che deve essere nominata index.html):

1. collegati al sito di http://www.altervista.org/

In alto a destra...

2. inserisci il tuo user e la tua password (se hai dei dubbi leggi l'email che ti ha spedito Altervista, nella quale troverari il tuo nickname (che corrisponde all'user), e la tua password);

3. clicca sulla freccetta a destra della casella password o premi il tasto Invio da tastiera.

Dalla nuova pagina che viene aperta,

4. clicca su gestione files.

Dalla finestra che si apre potrai vedere tutti i files del tuo sito online.

Inizialmente vedrai un file nominato index.html e una cartella immagini. Questo file index.html, è stato creato automaticamente da Altervista, ed è un file provvisorio, che verrà sovrascritto quando tu invierai quello creato da te.

5. clicca sul pulsante Invia files...

Verrà aperta una finestra dalla quale potrai gestire il trasferimento dei file (pagine web in questo caso) dal tuo computer al computer del sito che ti ospita (hosting)...




9

6. clicca sul pulsante Sfoglia. Si aprirà la finestra Scegli file nella quale dovrai aprire la cartella in cui hai salvato la tua pagina web...

7. fai doppio clic sul file index...

8. quindi dalla finestra di Altervista clicca sul pulsante Invia files in fondo...

...la tua pagina è ora su internet.

Vedere la tua pagina su Internet Apri il browser (Internet Explorer) e digita sulla barra degli indirizzi http://tuouser.altervista.org/ e

premi il tasto Invio.



10

Come vedi, la tua pagina è online !

Eliminare un file dal sito online

Se nella finestra Gestione files vedi due file index, uno è quello che hai caricato tu (probabilmente index.htm), l'altro è il file esistente creato automaticamente da altervista (index.html).

Cancella il file presistente nel seguente modo:

1. seleziona il file cliccando sulla casella di controllo alla sua sinistra

2. clicca sul pulsante cancella.

CREARE COLLEGAMENTI IPERTESTUALI

Creare una cartella web

Per creare un sito web devi innanzitutto creare una cartella nel tuo disco fisso.

In questa cartella verranno posti tutti i file e cartelle che verranno in seguito pubblicati sul web.

Quindi primo passo:

1. apri la cartella Documenti; 2. un clic con il tasto destro e crea una Nuova

cartella...

3. Nomina la cartella "Mio sito web"



11

Creare la Home Page con Word

Per creare una pagina web utilizza al momento ancora il programma Word.

1. Apri il programma Word

2. Digita il testo Home Page, aumenta la dimensione a 20p., applica il grassetto e allineamento centrato

3. Sotto di due righe scrivi il testo I miei siti preferiti

4. Dal menu File scegli la voce Salva come pagina

Web (Nelle versioni precedenti di Word la voce è "Salva come HTML")

5. Dalla finestra di dialogo Salva con nome seleziona nella casella Salva in la cartella del tuo sito (seguendo sempre l'esempio, la cartella è "Mio sito web")

6. Nelle casella Nome file digita index.html (necessariamente deve essere nominata così la Home Page)

7. Clicca sul pulsante Salva (a destra in basso della finestra di dialogo)

Creare altre pagine web

Ora per creare un'altra pagina web puoi procedere nel seguente modo. Senza chiudere la pagina index.html da Word,

2. dalla barra dei menu clicca su Salva come pagina web...



12

2. dalla finestra di dialogo Salva con nome clicca sul pulsante Cambia titolo e digita il titolo I miei siti preferiti...

3. nella casella nome file digita siti preferiti

4. clicca sul pulsante Salva o premi Invio da tastiera.

In questo modo avrai creato un'altra pagina web

6. Ora cambia il testo invertendo il testo come descritto in figura...

7. effettuate le modifiche, clicca su File -> Salva 1. Chiudi la finestra del programma

Nella cartella "Mio sito web" vedrai i due file riferiti alle due pagine web appena create...

Modificare le pagine da Internet Explorer

Come modificare ora le pagine web create? Non è sufficiente aprire il file con un doppio clic! Procedi come segue:

2. Apri con un doppio clic il file index.html

Verrà aperta la finestra di Internet Explorer nella quale potrai vedere il risultato reale della pagina web, ma dalla quale non potrai modificare alcunché. Per poter modificare...

5. dalla barra dei menu clicca su file -> modifica con microsoft word...



13

Inserire un collegamento ipertestuale

Ed ora sei giunto al momento magico, l'inserimento di un collegamento ipertestuale. Cliccando sul testo "I MIEI SITI PREFERITI", voglio che si apra la pagina "siti preferiti".

2. Seleziona la frase "I MIEI SITI PREFERITI"...

3. dalla barra dei menu clicca su Inserisci -> Collegamento ipertestuale

1. Dalla finestra di dialogo Inserisci collegamento ipertestuale, seleziona con un clic la pagina che vuoi che si apra quando cliccherai sul testo selezionato: in questo caso clicca su "siti preferiti.html"

2. clicca su OK per confermare...

Il testo selezionato si trasforma in blu e sottolineato, formattazione tipica di un collegamento ipertestuale.



14

6. Clicca su Salva per salvare le modifiche effettuate...

Aprire da Word una pagina web

Ora per modificare la prossima pagina web, in questo caso il file "siti preferiti.html", tieni pure aperta la finestra del programma Word.

1. Dalla barra dei menu clicca su File -> Apri...

2. dalla finestra di dialogo Apri fai doppio clic su "siti preferiti"...

5. seleziona il testo "LA MIA HOME PAGE"...

3. dalla finestra di dialogo Inserisci collegamento ipertestuale, fai doppio clic su index

1. Salva le modifiche della pagina e... 6. chiudi il programma Word.



15

Vedere il risultato finale

Dopo aver chiuso il programma Word,

4. Dalla cartella "Mio sito web"... 2. apri il file index.html (doppio clic)

Vedrai apparire la finestra di Internet Explorer...

5. Clicca sul link (si dice anche così) "I MIEI SITI PREFERITI" e la finestra cambia di aspetto. Nota che anche la barra del titolo è cambiata...

6. Clicca sul link "LA MIA HOME PAGE" per rivedere la pagina index.html

Complimenti hai creato i tuoi primi due collegamenti ipertestuali (link) !

Ti invito ad osservare la barra di stato (che si trova in fondo alla finestra) mentre posizioni il puntatore sul link. Osserva anche la "barra indirizzo" e nota le differenze mentre passi da una pagina all'altra...



16

INSERIRE UNA TABELLA PER METTERE ORDINE

Hai già creato una semplice pagina web ed un collegamento tra una pagina e l'altra. Vediamo ora come mettere ordine in una pagina web posizionando il testo dove vuoi tu.

Mettere un po' d'ordine

La cosa più semplice per mettere ordine in una pagina web e quella di inserire una tabella.

Inserendo una tabella, la pagina verrà suddivisa in celle e quindi sarà facilmente gestibile per il posizionamento degli oggetti (testi e immagini).

Inserire una tabella

Il programma di riferimento è ancora per il momento Word.

1. Dalla barra dei menu clicca su Tabella > Inserisci Tabella...

3. dalla finestra di dialogo scegli 3 colonne per 3 righe...

4. e scegli l'opzione "adatta alla pagina"... 2. clicca su OK.

Al momento sembra dire poco, ma tieni presente che le righe si allargheranno mano a mano che inserirai testo e/o immagini.

Restringere o allargare le colonne della tabella

Per dimensionare la larghezza delle colonne di una tabella in Word,

1. posiziona il puntatore sull'intersezione delle colonne, 2. quando il puntatore si trasforma in una doppia freccia divergente...



17

5. clicca, tieni premuto il pulsante del mouse e 6. sposta a destra o a sinistra il mouse 7. e rilascia il pulsante del mouse.

A questo punto puoi compilare la tabella come vedi nell'esempio.

La mia pagina web

Chi sono I miei siti preferiti Risorse utili

Benvenuti nel mio sito

Link 1

Link 2

Link 3

Autore: Pinko Palla – [email protected]

Ti ricordo che dovrai salvare il documento Come pagina web (dal menu File)

Nascondere la tabella

Se le linee della tabella ti sembrano esteticamente poco belle, potrai nasconderle così:

1. clicca su una cella della tabella,

3. seleziona la tabella ( Tabella -> Seleziona Tabella )

4. dalla barra dei menu clicca su Formato -> Bordi e Sfondo, 5. dalla scheda Bordi scegli l'opzione "Nessuno"...

8. clicca su OK.



18

Salva le modifiche e riapri la tua pagina web con il browser (Internet Explorer o similari). Ecco l'esempio.

La mia pagina web

Chi sono I miei siti preferiti Risorse utili

Benvenuti nel mio sito

Link 1

Link 2

Link 3

Autore: Pinko Palla – [email protected]

INSERIRE ED INVIARE IMMAGINI

Ora che hai imparato ad inserire le tabelle, potrai dedicarti a posizionare qualche immagine per abbellire il tuo sito. Per vedere l'esempio, clicca qui..

Inserire una immagine clip art

Nel programma Word ci sono delle immagini già pronte per essere usate nei documenti. Per inserirle:

1. clicca (posiziona il cursore) sul punto della pagina in cui vuoi inserire l'immagine; 2. dalla barra dei menu clicca su Inserisci -> Immagine -> Clip Art... 3. clicca sul comando Salva per salvare le modifiche della tua pagina web.

Una cartella per le immagini

Dopo aver salvato le modifiche con le immagine inserite,

7. apri la cartella nella quale hai salvato la tua pagina web.

Se hai seguito gli esempi della lezione precedente la cartella è "mio sito web". Vedrai una cartella che inizia con lo stesso nome della pagina web che hai creato.

Se hai nominato la pagina index.html, la cartella è "index_file"

All'interno della cartella "index_file" sono state salvate tutte le immagini che tu hai inserito nella pagina index.html insieme ed altri file.

Nel file index.html non ci sono le immagini che tu hai inserito, ma ci sono solo dei collegamenti alla cartella "index_file". Infatti se tu ora cancelli la cartella "index_file" e apri il file index.html non vedrai più le immagini. Al loro posto ci sono delle finestrelle vuote.



19

Inviare in Internet (pubblicare) la pagina web con le immagini

Tutto questo per farti capire che ora, per caricare la tua pagina web sul tuo spazio Internet, non basterà più inviare il file index.html, ma dovrai anche inviare la cartella "index_file" con tutto il suo contenuto.

9. Collegati al portale che ospita il tuo sito web...

10. inserisci la tua user e password personale e clicca invio da tastiera...

2. clicca su Gestione file...

Siccome la cartella "index_file" sul tuo spazio internet non esiste, la devi creare:

3. scrivi il nome esatto della cartella "index_file" sulla casella di testo Crea una cartella e clicca sul pulsante Crea cartella.

Ora devi entrare nella cartella appena creata:

11. clicca su "index_file"...

La cartella come vedi è vuota,

4. clicca sul pulsante Invia files...

Ora dovrai inviare tutti i file contenuti nella cartella "index_file" del tuo disco fisso.

8. Nella prima riga clicca su Sfoglia e dalla finestra che si apre fai doppio clic sul file da inviare; 9. nella seconda riga clicca su Sfoglia e clicca sul prossimo file...



20

… e così via per tutti i file che devi inviare della cartella "index_file".

12. Clicca sul pulsante in basso Invia files.

Bene, ora hai praticamente copiato i file su internet.

Per tornare alla cartella superiore, clicca su Parent.

21

Aggiornare le pagine web modificate

Il file index.html lo hai modificato, pertanto lo devi aggiornare anche sul tuo spazio internet.

1. Dalla cartella principale clicca su Invia files...

2. clicca su Sfoglia e ricarica il file index.html modificato...

3. clicca sul pulsante in basso Invia files.

Bene, ammira ora i risultati collegandoti al tuo sito online "tuonome.altervista.org".

INTRODUZIONE AL LINGUAGGIO HTML

Creare la prima pagina web con il linguaggio HTML 1. Apri il programma Blocco note (Start -> Programmi -> Accessori -> Blocco note) 2. Scrivi il seguente codice

<html>

<head> <title>Qui scrivo il titolo della pagina</title> </head> <body> Qui scrivo il testo della pagina </body>

</html> (oppure più semplicemente usa i comandi Copia ed Incolla)

22

3. Salva la pagina con il nome index.html, 3. chiudi la finestra del programma,

4. apri la pagina index dalla cartella in cui l'hai creata.

(Probabilmente vedrai scritto solamente "index" perché l'estensione "html" è nascosta)

Il file si aprirà con il browser predefinito (Internet Explorer, FireFox, Mozzilla, Opera o similari).

Nella barra del titolo vedrai scritto Qui scrivo il titolo della pagina, nel corpo della pagina vedrai scritto Qui scrivo il testo della pagina.

Nascono spontanee tre domande:

1. a cosa servono tutte quelle scritte racchiuse tra due parentesi angolari ( < > ) ? 2. perché il file, che hai creato con il programma Blocco note, viene aperto con il programma

Internet Explorer ? 3. Perché il file che hai nominato index.html si è trasformato in index ?

Partiamo dall'ultimo quesito.

Come vedere le estensioni dei file

In realtà il file index.html non si è trasformato in index, ma semplicemente viene visualizzata solamente la prima parte del file, mentre la seconda parte viene nascosta...

Per poter visualizzare la parte nascosta del file (l'estensione)

3. apri la cartella Documenti,

4. dalla barra dei menu clicca su Strumenti -> Opzioni Cartella...

4. clicca sulla scheda Visualizzazione...



23

2. con un clic, TOGLI la spunta dalla casella di controllo "Nascondi le estensioni per i tipi di file conosciuti"...

5. clicca sul comando OK

D'ora in poi vedrai sempre le estensione dei file. Per nascondere nuovamente le estensioni, segui i punti 1) 2) 3) precedenti e

1. con un clic, METTI la spunta nella casella di controllo "Nascondi le estensioni per i tipi di file conosciuti"...

Cosa sono le estensioni dei file

Partiamo subito con un esempio.

Apri un nuovo documento di Word e salvalo con il nome "prova". Il documento verrà salvato con il nome "prova.doc"

".doc" è l'estensione del file che viene, in questo caso, aggiunta automaticamente al nome che tu hai dato al documento Word.

L'estensione ".doc" identifica che il file è un documento Word. L'estensione ".doc" serve per far capire al Sistema Operativo che quel file dovrà essere aperto con il programma Word.

Infatti se cancelli l'estensione, rinominando il file "prova.doc" con "prova", e lo apri, il Sistema Operativo non capirà con quale programma aprire il file. Quindi conoscendo l'estensione di un file si capisce a quale programma è associato tale file.

Inoltre se siamo in un Sistema Operativo ad interfaccia grafica (come nella maggior parte dei casi), ad ogni estensione del file viene associata una determinata icona caratteristica del programma.

Qui di seguito espongo una tabella di alcuni tipi di file con relative estensioni ed icone associate.

Estensione Tipo di file Icona associata

HTML documento HTML

XLS Foglio di lavoro Excel

TXT Documento di testo

PPT Presentazione

BMP Immagine bitmap



24

MDB Database

JPG Immagine JPEG

GIF Immagine GIF

DOC Documento Word

Browser predefinito !

Il browser è un programma che serve per aprire e quindi leggere le pagine web. Internet Explorer è un browser, ma non è l'unico browser.

FireFox, Mozzilla, Opera sono un esempio di browser alternativo. Io personalmente prediligo FireFox. Nello stesso computer puoi istallare più browser.

Il browser predefinito è il programma che verrà aperto quando, ad esempio fai un doppio clic sul file index.html.

In conclusione, i file con estensione ".htm" o ".html" verranno aperti con il browser predefinito.

Usare il Blocco Note come editor HTML

Programmi come Word, Excel, Powerpoint, permettono di leggere, creare e modificare il contenuto dei file con estensione, rispettivamente ".doc", ".xls", ".ppt".

Un programma come Internet Explorer permette solamente di leggere il contenuto di un file con estensione ".htm" o ".html".

Per creare e modificare una pagina HTML è necessario un programma diverso, generalmente chiamato "editor HTML". L'editor HTML più semplice è il Blocco note di Windows che ad inizio lezione hai già usato.

In seguito si potrà passare ad un "editor HTML" molto più completo ed evoluto come HTML-Kit (scaricabile dal sito http://www.chami.com/html-kit/).

Il Blocco note non è nato come "editor HTML", ma come un semplicissimo elaboratore di testi. Ed è per questo che per usarlo come "editor HTML" quando salvi il file devi aggiungere l'estensione ".html".

Non aggiungendo l'estensione il programma Blocco note aggiungerà lui stesso automaticamente l'estensione ".txt".

Facendo doppio clic sul file con estensione ".txt", il file verrà aperto con il programma Blocco note (e non quindi con il browser predefinito).

E fino a qui, due domande sono state esaudite (almeno spero). Rimane in sospeso, ancora la prima domanda...

http://www.chami.com/html-kit/

25

1. a cosa servono tutte quelle scritte racchiuse tra due parentesi angolari ( < > ) ?

... e questo sarà l'argomento della prossima lezione.

LINGUAGGIO HTML ED ELEMENTI TAGS

Cos'è l'HTML

L'HTML (leggi "acca ti emme elle"), è ricavato dalle iniziali di "HyperText Markup Language".

L'HTML è un linguaggio riconosciuto universalmente che tutti i computer possono potenzialmente capire. E questo è uno dei principali motivi per cui l'HTML è diventato il linguaggio di pubblicazione usato da Internet.

Quindi conoscendo l'HTML puoi costruire pagine web che potranno essere pubblicate in Internet.

Non è strettamente necessario conoscerlo per costruire pagine web. Hai visto infatti che con un programma come Word puoi facilmente creare qualche pagina web. Word trasforma, per te, automaticamente il documento in linguaggio HTML.

Comunque, conoscere l'HTML ti darà più sicurezza e controllo nella costruzione di un sito web.

Cosa sono i TAGS

L'HTML usa degli elementi detti tags che sono appunto, tutte quelle scritte racchiuse tra due parentesi angolari ( < > ).

I tags sono delle istruzioni che definiscono la visibilità della pagina web.

HTML, un linguaggio da capire

Riprendiamo l'esempio della lezione precedente, con qualche piccola modifica:

Scrivere: <html> è come dire al browser: 

e quindi di seguito:

<head>  <title>  La mia prima pagina in HTML </title>  <meta name="Generator" content="Blocco note di Windows">  <meta name="Description" content="Questo è un esercizio">  </head>  <body>  Benvenuti a tutti voi. </body>  </html>

26

Esistono i "tags di inizio" (es. <html>), ed i "tags di fine" (es. </html>). I "tags di fine" sono caratterizzati dal carattere slash ("/") ad inizio istruzione.

Analizziamo ora i singoli elementi appena visti.

<HEAD> </HEAD>

L'elemento HEAD contiene informazioni sul documento corrente, quali il suo titolo (che sarà l'unica informazione visibile - Barra del titolo), le parole chiave, che possono essere utili ai motori di ricerca, e altri dati che non sono considerati contenuto del documento (visibile).

<TITLE> </TITLE>

L'elemento TITLE identifica il contenuto di un documento. Il testo racchiuso in questi tags sarà visibile sulla "barra del titolo".

<META name="" content="">

L'elemento META può essere usato per identificare le proprietà di un documento (ad es. editor, autore, descrizione, elenco di parole chiave, ecc.) e assegnare valori a queste proprietà.

Ciascun elemento META specifica una coppia proprietà/valore. L'attributo name identifica la proprietà e l'attributo content specifica il valore della proprietà.

Questo tag è facoltativo, e quindi per ora puoi fare a meno di inserirlo se ti complica la comprensione di questa lezione.

<BODY> </BODY>

L'elemento BODY è il corpo di un documento e racchiude il contenuto del documento.

LA FORMATTAZIONE CON L'HTML

Formattare il testo con l'HTML

Per formattare il testo, ovvero per trasformare il testo nelle sue dimensioni, colore, allineamento e stile, dovrai fare uso di alcuni elementi (tags) specifici.

 Presenta il testo in stile grassetto

 Presenta il testo in stile corsivo

<BIG></BIG> Presenta il testo sovradimensionato

27

 Presenta il testo sottodimensionato

<TT></TT> Presenta come testo di telescrivente o monospaziato

<CENTER></CENTER> Presenta il testo centrato in senso orizzontale.

Riprendi l'esempio precedente...

<html> <head> <title>La mia prima pagina in HTML</title> <meta name="Generator" content="Blocco note di Windows"> <meta name="Description" content="Questo è un esercizio"> </head> <body> Benvenuti a tutti voi. </body> </html>

e modifica l'ottava riga così:

Benvenuti a tutti voi otterrai: Benvenuti a tutti voi

E poi ancora così:

Benvenuti a tutti voi otterrai: Benvenuti a tutti voi e così via

Benvenuti a tutti voi otterrai: Benvenuti a tutti voi <big>Benvenuti a tutti voi</big> otterrai: Benvenuti a tutti voi <big>Benvenuti a tutti voi</big> otterrai: Benvenuti a tutti voi <big><big>Benvenuti a tutti voi</big></big>

otterrai: Benvenuti a tutti voi

<center>Benvenuti a tutti voi</center> otterrai:

Benvenuti a tutti voi

<center><big>Benvenuti a tutti voi</big></center> otterrai:

Benvenuti a tutti voi



28

Come modificare una pagina HTML

Per modificare un file html:

5. fai doppio clic per aprire il file

Verrà aperto con il browser predefinito (ad es. Internet Explorer)

3. dalla barra dei menu clicca su File -> Modifica con Blocco note...

Verrà aperto il programma Blocco note con il codice HTML...

3. Apporta le modifiche necessarie,

3. dalla barra dei menu (del Blocco note) clicca su File -> Salva

Ora, anche senza chiudere il programma Blocco note,

1. attiva la finestra del browser,

6. clicca sul comando Aggiorna...

oppure premi il tasto F5 da tastiera.

In questo modo, se dovrai apportare ulteriori modifiche, ti basterà attivare nuovamente la finestra del programma Blocco note dalla "barra delle applicazioni".

COME CREARE COLLEGAMENTI CON L'HTML

I collegamenti del web

Un collegamento è una connessione da una risorsa Web ad un'altra. Esempi di risorse Web sono i documenti HTML, file di immagine, file di musica e video. Quando visiti una pagina web, puoi accedere ad un'altra pagina web, cliccando semplicemente sopra ad un collegamento ipertestuale.

Nella lezione Creare collegamenti ipertestuali hai visto come crearlo con Word, vediamo, ora come crearlo direttamente con il linguaggio HTML.

Prima di iniziare crea una cartella specifica, e nominala "mio sito web". Crea in essa tre documenti HTML e nominali:

29

index.html preferiti.html blog.html

I tags di collegamento <A></A>

Per visitare la pagina preferiti.html, oppure la pagina blog.html con un clic, partendo dalla pagina index.html:

1. Apri la pagina index.html con il blocco note, 2. tra i tags <BODY></BODY> inserisci il seguente codice

<A href="preferiti.html">I miei siti preferiti</A> <A href="blog.html">Le mie riflessioni</A>

4. salva le modifiche al documento index.html

Quindi il codice completo potrà essere questo:

<HTML> <HEAD> <TITLE>La mia home page</TITLE> </HEAD> <BODY> <CENTER>IL MIO SITO WEB</CENTER> <A href="preferiti.html">I miei siti preferiti</A> <A href="blog.html">Le mie riflessioni</A> </BODY> </HTML>

Quindi i tags per creare un collegamento sono <A></A>.

Nel tag di apertura <A> si dovrà inoltre specificare la pagina (o risorsa) che dovrà essere aperta

<A href="preferiti.html">

dove al posto di preferiti.html si dovrà specificare l'esatto percorso dove si trova la pagina (o risorsa).

Come vedere se il collegamento funziona

Ora apri il documento index.html dalla cartella "mio sito web". Il file verrà aperto con il browser predefinito. Clicca sopra i collegamenti appena creati e verifica se vengono aperte le corrispettive pagine.

Usare il tag per andare a capo

Come hai potuto notare, il testo di un documento HTML viene visualizzato tutta in una riga finché c'è spazio sulla finestra e poi va a capo automaticamente.

Per forzare il "testo a capo":

30

2. inserisci il tag 

Seguendo l'esempio sopra, modifica il codice così:

<A href="preferiti.html">I miei siti preferiti</A> <A href="blog.html">Le mie riflessioni</A>

Nota: Scrivere il codice in tre righe come sopra, o tutto su una riga, non ha alcuna differenza nella visualizzazione della pagina web. Scriverlo in più righe, facilita però la lettura e l'eventuale modifica del codice.

Primi esercizi sull'HTML

Per esercizio completa le altre pagine inserendo i relativi collegamenti.

3. modifica il file preferiti.html inserendo i collegamenti alle pagine index.html e blog.html:

<HTML> <HEAD> <TITLE>I preferiti</TITLE> </HEAD> <BODY> <CENTER>I MIEI SITI PREFERITI</CENTER> <A href="index.html">La mia home page</A> <A href="blog.html">Le mie riflessioni</A> </BODY> </HTML>

4. modifica il file blog.html inserendo i collegamenti alle pagine index.html e preferiti.html:

<HTML> <HEAD> <TITLE>Blog</TITLE> </HEAD> <BODY> <CENTER>LE MIE RIFLESSIONI</CENTER> <A href="index.html">La mia home page</A> <A href="preferiti.html">I miei siti preferiti</A> </BODY> </HTML>

COME CREARE COLLEGAMENTI ESTERNI

Collegamenti a risorse web esterne

Oltre a collegare pagine interne del proprio sito, si possono creare collegamenti a risorse web esterne, ovvero, a qualsiasi pagina o risorsa disponibile nello spazio web mondiale.

Per creare un collegamento ad una risorsa web esterna è fondamentale conoscere il suo indirizzo (tecnicamente detto URI acronimo di "Universal Resource Identifier")

31

L'indirizzo del sito che stai visitando è http://www.pcdazero.it.

L'indirizzo della risorsa che stai consultando (la presente pagina) è

http://www.pcdazero.it/089creopagineweb.php Quindi per creare nella tua pagina preferiti.html un collegamento al presente sito:

1. Apri con il Blocco note il file preferiti.html 2. Aggiungi il seguente codice (trai tags <BODY></BODY>)

<A href="http://www.pcdazero.it ">Pcdazero</A>

Per creare un collegamento direttamente a questa pagina,

1. inserisci il codice:

<A href="http://www.pcdazero.it/089creopagineweb.php ">Creare collegamenti esterni</A>

Mentre, per inserire un collegamento al motore di ricerca Google,

2. inserisci il codice

<A href=" http://www.google.it ">Il motore di ricerca Google</A>

Tieni presente che tra i tags <A></A> potrai inserire del testo a piacimento.

Trucco per inserire indirizzi senza sbagliare

Un piccolo trucco per non sbagliare la digitazione degli indirizzi nella creazione di collegamenti delle tue pagine web consiste nell'usare la tecnica del copia ed incolla.

4. Durante la navigazione Internet, se un sito o risorsa è di tuo interesse, clicca con il tasto destro all'interno della barra indirizzo del tuo browser. Così facendo, vengono eseguiti contemporaneamente due eventi: la selezione dell'indirizzo e l'apertura del menu contestuale.

1. dal menu contestuale clicca su copia. 2. Apri il programma Blocco note, 3. clicca con il tasto destro e scegli la voce incolla.

Avrai così a disposizione l'indirizzo che potrai in seguito trasferire (con un altro copia ed incolla) in una delle tue pagine HTML.

Esercizio pratico sui collegamenti esterni

Come esercizio,

2. arricchisci la tua pagina preferiti.html, inserendo una decina di collegamenti a pagine web esterne.

Se vuoi, puoi iniziare con questo codice di collegamenti ad alcune Risorse del Web:

32

 <A href="http://www.pcdazero.it ">Imparare ad usare il PC</A> <A href=" http://www.google.it ">Il motore di ricerca Google</A>

3. Salva il file preferiti.html 1. Pubblica sul tuo spazio web tutti i file:

index.html preferiti.html blog.html

1. Clicca sui vari collegamenti per verificarne l'esito.

Aprire un collegamento su una nuova finestra

I collegamenti creati fin d'ora hanno la caratteristica di sostituire il contenuto della finestra corrente con il contenuto del collegamento cliccato.

Per creare un collegamento che apre una nuova finestra, dovrai specificarlo, inserendo l'attributo target:

1. inserisci il seguente codice:

<A href="http://www.google.it" target="_blank">Google </A>

Quindi:

• con href="http://www.google.it" indichi di aprire la relativa pagina, • con target="_blank" indichi al browser di aprirla in un'altra finestra.

Per esercizio:

1. Modifica tutti i collegamenti esterni della tua pagina preferiti.html inserendo l'attributo

target="_blank"

Manuale scritto da Gianni Crestani e-mail: [email protected]

Scaricato da A SBAFO! Tutto per il web gratis e in italiano…

www.asbafo.net

http://www.pcdazero.it/

mailto:[email protected]

http://www.asbafo.net/

Manuale scritto da Gianni Crestani - Roberto Toppoli · Creare pagine Web Manuale scritto da Gianni...

Documents

Transcript of Manuale scritto da Gianni Crestani - Roberto Toppoli · Creare pagine Web Manuale scritto da Gianni...