Guida pratica alla creazione di pagine web

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Guida pratica alla creazione di pagine web"

Beata Simone
9 anni fa
Visualizzazioni

1 Guida pratica alla creazione di pagine web Dopo aver creato una pagina html, muoviamo i primi passi nell'uso del codice. Naturalmente non è necessario conoscere il codice a memoria per creare pagine internet, lavorando con un editor HTML come DreamWeaver sarà il programma a scrivere il codice. Credo però che una conoscenza dei comandi principali e soprattutto della filosofia che sta alla base di questo linguaggio sia molto utile. Apriamo la pagina con internet explorer: Torniamo alla cartella in cui avete salvato il vostro file. Cliccaccano sul file home dovrebbe avviarsi automaticamente Internet explorer (oppure il vostro browser predefinito. Se appare una icona diversa procedete in questo modo: prima aprite Internet explorer e poi file, apri andate ad aprire il vostro file.) Comparirà una pagina completamente bianca con la scritta a sinistra Ecco la mia prima pagina!.

Credo però che una conoscenza dei comandi principali e soprattutto della filosofia che sta alla base di questo linguaggio sia molto utile.

2 Torniamo al codice: Per modificare il codice della pagina procediamo in questo modo: In Internet explorer clicchiamo sul menù Visualizza e poi su HTML In questo modo si avvierà automaticamente Blocco note e torneremo a visualizzare il codice della pagina. Aggiungiamo alcune modifiche: Modifichiamo il comando (o tag) <body> aggiungendo questo codice (ATTENZIONE non dobbiamo aggiungere un altro comando, ma solo modificare quello esistente) <body bgcolor= #00ff00 > Abbiamo aggiunto una proprietà al corpo della pagina, in particolare abbiamo aggiunto un colore di fondo che in questo caso sarà verde. (per adesso non vi preoccupate di sapere perché #00ff00 significa verde, ci arriveremo...). Aggiungiamo poi altro codice prima e dopo la scritta Ecco la mia pagina!, è indifferente andare a capo o scrivere il codice tutto di seguito, l'importante è rispettare l'ordine in cui i comandi sono dati perché sarà lo stesso ordine in cui li leggerà il computer che aprirà la nostra pagina. <center><font size= 7 color= #ff0000 > Ecco la mia prima pagina! </font></center> Il comando <center>, centra tutto quello che segue al centro della pagina, il comando <font> invece attribuisce al testo particolari caratteristiche, in questo caso abbiamo specificato una dimensione size= 7 e un colore color= #ff0000 (rosso).

Aggiungiamo alcune modifiche: Modifichiamo il comando (o tag) <body> aggiungendo questo codice (ATTENZIONE non dobbiamo aggiungere un altro comando, ma solo modificare quello esistente) <body

3 Ecco come apparirà il codice in blocco note A questo punto basta salvare il file (solo salvare visto che il nome glielo abbiamo già dato prima) CHIUDIAMO blocco note (importante non lasciarlo aperto) e ricarichiamo la pagina (RELOAD) Che cosa è successo? Lo sfondo della pagina è diventato verde, la scritta, molto più grande è ora al centro della pagina ed è divenata rossa (una cosa orrenda!). Tutto questo è successo perché Internet explorer, quando apre il nostro file, legge il codice e confeziona l'aspetto della pagina secondo le nostre istruzioni.

Lo sfondo della pagina è diventato verde, la scritta, molto più grande è ora al centro della pagina ed è divenata rossa (una cosa orrenda!

4 A questo punto dovreste aver iniziato a capire come funziona il giochino. Facciamo un altro piccolo esperimento. Torniamo al codice ( visualizza e poi html ) e modifichiamolo in questo modo. Subito dopo la scritta Ecco la mia prima pagina! siamo andati a capo e abbiamo aggiunto la scritta Qui troverete notizie, poi abbiamo aggiunto molto interessanti, ma solo dopo i comandi </font> e </center> Salviamo, chiudiamo blocco note e ricarichiamo la pagina. Come apparirà la pagina? La scritta Qui troverete notizie appare di seguito all'altra perché anche se noi siamo andati a capo, il computer non ha ricevuto nessuna istruzione e, essendo notoriamente stupido, ha riportato solo il testo trovato. Inoltre, poiché prima di trovare la scritta molto interessanti il computer ha trovato i comandi </font> (basta fare il carattere particolare!) e </center> (basta mettere le cose al centro!), ha posto la scritta nel modo che lui ritiene normale (default) e cioè piccola, nera e allineata a sinistra.

siamo andati a capo e abbiamo aggiunto la scritta Qui troverete notizie, poi abbiamo aggiunto molto interessanti, ma solo dopo i comandi </font> e </center> Salviamo, chiudiamo blocco note e

5 Se volessi che il titolo della mia pagina apparisse in questo modo cosa dovrei fare? Ecco le modifiche al codice: Dopo la scritta Ecco la mia pagina! abbiamo aggiunto il comando <br> che significa vai a capo e di seguito abbiamo aggiunto il resto della scritta. Bene! Se vi sentite pronti passamo a qualcosa di più interessante.

abbiamo aggiunto il comando <br> che significa vai a capo e di seguito abbiamo

Documenti analoghi

Gestione del testo. Dreamweaver e il testo. Richiamare la pagina

Gestione del testo. Dreamweaver e il testo. Richiamare la pagina Gestione del testo 04 In questo capitolo In questo capitolo imparerai a utilizzare gli strumenti di formattazione del testo. Imparerai come impostare uno stile a un testo per un titolo o un paragrafo.