PUBBLICARE IL SITO Passo uno Disporre tutto il contenuto, compresi suoni, immagini e cos via, nella stessa cartella. La pagina iniziale del sito dovr avere nome index.htm (oppure index.html). Il nome pi adatto consigliato dal fornitore di servizi. Se i file non si trovano nella stessa cartella si dovr usare, per raggiungerli, il percorso necessario. Passo due Cercare uno spazio web (hosting). Di solito i fornitori di caselle di posta elettronica offrono anche servizi gratuiti di hosting ed altri servizi correlati. Conviene quindi innanzitutto rivolgersi al proprio fornitore. Ad esempio, se si possiede un account di posta elettronica che termina con @tin,it si pu andare su http://tin.virgilio.it/siti_domini/index.aspx cercare il link Attiva il tuo spazio web gratis e seguire le istruzioni. Passo tre Una volta trovato lo spazio web di proprio gradimento, per mettere online il contenuto del proprio sito, occorre usare un programma chiamato Client FTP, che permette di trasferire i file sul web. Ai fini di un corretto funzionamento, il Client FTP dovr essere configurato con i parametri suggeriti dal vostro fornitore di servizi. Breve glossario Hosting: Sezione dell'hard disk di un server che ospita siti web, caselle di posta elettronica ed altri programmi tipo antivirus, antispam ... Servizio di hosting dunque l'offerta di disponibilit, da parte del server, di uno spazio Server: E' un programma che interpreta e risponde ai comandi lanciati dal programma client. Per esteso, si dice server anche il computer che ospita il programma server. web server: E' un programma che fornisce il contenuto di una pagina web agli utenti che ne fanno richiesta utilizzando un programma client: il browser. Client: Programma che interpreta e visualizza i dati inviati dal server. Nel caso di Internet il client il browser (come MSIE o FireFox) Client/server: Relazione che intercorre tra due programmi. Il client il programma che fa le richieste e il server quello che le soddisfa. FTP (File Transfer Protocol): Protocollo (insieme di regole) standard per la trasmissione di file tra due sistemi in Internet. COMINCIAMO Per iniziare basta un editor di testo semplice, come Blocco note. Scrivi poi i tag

e separali con "Invio". Se non hai voglia di scrivere, puoi anche selezionare con il mouse la riga di codice ed usare il classico metodo copia - incolla Questo in realt non necessario per la correttezza formale del testo, ma preferibile per un motivo di chiarezza. Scrivi ora, fra e una frase, come Primo esempio di scrittura in HTML. Infine, salva il file con il nome primo.htm sulla desktop. Non ti resta che chiudere il Blocco Note e lanciare il programma. Non far un grande effetto, ma solo l'inizio!

INTESTAZIONI E PARAGRAFI Ecco degli esempi di formattazione del testo:

Titolo1Titolo2Titolo3Titolo4Titolo5Titolo6

Come ottenerle? E' semplice. Visualizza il tuo file "primo.htm"con Blocco note e aggiungi, prima del testo Primo esempio di scrittura in HTML, , poi, alla fine del testo, il tag rispettivo di chiusura . Salva le modifiche apportate. Potrai vedere, se aggiorni il file, la tua frase scritta a caratteri molto grandi (Stile Titolo 1). La frase con i caratteri pi piccoli quella scritta con l'uso degli elementi (Stile Titolo 6). Avrai notato, se hai fatto la prova, che i tags d'intestazione ... forzano il testo ad andare a capo. Se invece si usa il tasto Invio questo non ha alcun effetto sulla visualizzazione del testo. Per mandare il testo a capo occorre usare dei tags speciali: il tag
forza il testo ad andare a capo Quanto viene scritto all'interno dei tags e viene racchiuso in un paragrafo. E' possibile allineare il testo mediante i seguenti attributi: allinea al centro < p align=left> allinea a sinistra (ma questo automatico se non altrimenti specificato) < p align=right>allinea a destra < p align=justify>giustifica il testo Quanto viene scritto all'interno dei tags e si presenta come paragrafo preformattato, che cio viene visualizzato cos come stato scritto. Si tratta comunque di tags abbastanza delicati da usare, e che possono dare sorprese a seconda dello risoluzione dello schermo o della modalit si visualizzazione preferita dall'utente. I tags e funzionano in modo molto simile ai tags . Essi servono per allineare nello stesso modo pi paragrafi, senza ripetere per ognuno di essi l'allineamento. Sono particolarmente utili con i fogli di stile (HTML dinamico: per ora meglio non affrontarlo). Usare i seguenti attributi: per allineare al centro < div align=left> per allineare a sinistra (ma questo automatico se non altrimenti specificato) < div align=right> per allineare a destra < div align=justify> per giustificare Quanto viene scritto all'interno dei tags e viene visualizzato in modo rientrato rispetto al resto del testo. TITOLI Guarda sulla parte alta della pagina, detta barra del titolo: quello che appare stato scritto fra i tag

Il titolo deve essere scritto nella testata della pagina, cio fra i tag . Apri quindi il tuo file, e aggiungi:

Questo il titolo

Controlla il risultato. COLORE E' possibile colorare singole parole, paragrafi, un intero testo, o anche aggiungere un colore di sfondo,con poche e semplici istruzioni. In generale, bisogna inserire la parte che si intende colorare fra i tag

Vediamo in dettaglio alcuni esempi. Codice:Ho colorato queste parole

Risultato:Ho colorato queste parole

Si possono anche colorare singole lettere ottenendo un effetto a r c o b a l e n o Codice: Questo un paragrafo colorato

Risultato:Questo un paragrafo colorato

Per colorare paragrafo-->Codice: (documento)

Per lo sfondo-->Codice:

Al posto dei nomi dei colori puoi usare il codice esadecimale! CARATTERI Grassetto--> ... Corsivo--> ... Sottolineato--> ... Linea sopra--> ... Barrato ... Barrato Barrato Formato Apice ... Formato Apice Formato Apice Formato Pedice ... Formato Pedice Formato Pedice Intermittente: solo Firefox ... Intermittente Intermittente maiuscoletto ... maiuscoletto MAIUSCOLETTO tutto maiuscole ... tutto maiuscole tutto maiuscole iniziali maiuscole ... iniziali maiuscole iniziali maiuscole

nascosto ... nascosto nascosto Esempio ... Esempio Esempio Definizione ... Definizione Definizione Citazione ... Citazione Citazione Tastiera 1 ... Tastiera 1 Tastiera 1 Tastiera 2 ... Tastiera 2 Tastiera 2 Codice ... Codice Spaziatura espansa di 2pt ... Spaziatura espansa di 2pt Piccolo Cia o Colore Ciao Tipo di font Ciao Grandezza dei caratteri (da 1 a 10) /font> VAI Grandezza dei caratteri rispetto alla precedente /font> Questo VAI I vari attributi possono essere usati contemporaneamente. Il testo di una pagina HTML pu essere scritto utilizzando qualsiasi carattere visibile sulla tastiera. Alcuni caratteri, tuttavia, come ad esempio < o & vengono utilizzati come elementi del codice del linguaggio: per essi e per altri caratteri speciali vengono usati dei costrutti particolari... Se si vuole andare a capo,senza che sia terminata una riga, non basta premere il tasto Invio, che ha effetto nel Blocco Note ma non nella visualizzazione della pagina con un browser. Occorre perci usare il tag
- Break Line - che spezza la riga nel punto voluto senza inserire un nuovo paragrafo. Come sappiamo, HTML usa alcuni caratteri per distinguere i comandi dal contenuto della pagina; anche gli spazi vuoti non vengono riconosciuti, a parte il primo. Per visualizzare tali caratteri sono necessari costrutti particolari. E' possibile: 1. Usare i nomi dei caratteri come qui sotto riportato: ad esempio scrivendo: si ottiene il carattere ; 3 4 si ottiene 3 4; AB si ottengono 4 spazi fra A e B: A B; 2. usare il codice numerico dei singoli caratteri. Abbiamo preparato due pagine, da scegliere in base alle proprie preferenze: una tabella con tutti i caratteri: cliccando su un carattere si ottiene il suo codice; una tabella con tutti i caratteri gi completa di codice. Attenzione: obbligatorio usare le lettere minuscole.(spazio) = = = = = = < > = = = = = = < > = = = = = = = = = = = =

" &

= = = = = = = = = = = = = = = = = = =

" &

= = = = = = = = = = = =

= = = = = = = =

= = = =

= = = = = = = =

= = = = = = = = = = =

= = = = = = = =

= = = = = = = =

IMMAGINI Un'immagine ravviva una pagina e la rende pi interessante. Chiunque abbia provato a navigare in Internet, avr comunque notato che caricare le immagini costa tempo, e anzi a volte si sar stancato di aspettare e avr cercato un altro sito. Per questo utile usare le immagini con parsimonia, risparmiando, se possibile, sulla dimensione, e facendo attenzione al formato. I formati pi diffusi sul Web sono il GIF e il JPG. Il formato JPG pi adatto per panorami o simili,poich salva le immagini con 16 milioni di colori; nello stesso tempo, essendo molto compresso, richiede pi tempo per essere visualizzato. Il formato GIF, pi snello - salva le immagini con 256 colori - adatto per la maggioranza dei casi, e permette sia le animazioni che il formato trasparente. Per inserire un'immagine in un documento, occorre scrivere il codice

Posso inserire l'immagine di nome sole.gif, subito di seguito allo scritto, senza spazi, come in questo caso, ((immagine)), semplicemente digitando la seguente riga dicodice:

Questo metodo, che molto semplice, non per sempre il pi indicato, perch l'immagine occupa un suo spazio e il testo le si dispone intorno senza incorniciarla perfettamente, a meno che l'immagine non sia abbastanza piccola. Un'immagine pu anche essere aggiunta come sfondo a una pagina,codice:

qualora si voglia aggiungere per sfondo un file tipo immagine di nome sfondo.jpg

Se l'immagine pi piccola della pagina, come succede quasi sempre, essa viene disposta affiancata, e quindi occorre evitare che si ottenga un effetto come quello a lato. Aggiungendo l'opzione bgproperties="fixed" lo sfondo non scorre insieme alla pagina. Se clicchi qui potrai scegliere fra alcuni sfondi da scaricare per fare le tue prove. Un'immagine speciale la linea orizzontale, che spezza le varie parti di una pagina. Si inserisce usando il tag . Usando ilcodice:

si ottiene una linea rossa. E' possibile gestire le immagini con precisione aggiungendo gli attributi opportuni al codice. Se l'immagine non si trova nella stessa cartella della pagina, occorre inserire un collegamento relativo. Supponiamo, ad esempio, di aver salvato l'immagine sole.gif nella cartella di nome images. La dovremo aprire con il seguentecodice:

SFONDI Se si vuole uno sfondo colorato, basta inserire nel tag l'opzione bgcolor="#...Esempio di codice:

In questo modo si ottiene uno sfondo di colore rosso. Gli sfondi attualmente non vanno molto di moda, eppure conservano sempre un certo fascino. Perci... clicca sui numeri associati agli sfondi, aspetta qualche secondo e osservane l'anteprima! TESTO SCORREVOLE o marquee Per ottenere un testo scorrevole si racchiude il testo stesso fra i tags:

Per ottenere il colore e la misura dello scritto, basta seguire le regole presentate nella sezione Caratteri Ad esempio scrivendo il seguente codice: < marquee loop =-1> CIAO A TUTTI < /font>

Il marquee non rende scorrevole solo le scritte, ma anche le immagini: unica limitazione sono le gif animate, che spesso vengono rese con l'animazione "sballata". Ad esempio, scrivendo il seguenete codice:< marquee loop =-1>

All'interno del tag possono essere aggiunti i seguenti attributi:loop=n

n indica il numero di iterazioni dello scorrimento. Ponendo loop=-1 lo scorrimento continuobehavior=

indica il funzionamento del marquee: scroll (impostazione predefinita). Il testo scorre senza fermarsi per poi riapparire fino a quando non sono stati terminati i giri (loop) stabiliti. A questo punto scompare. slide Una volta terminati i giri (loop) stabiliti, il testo si ferma o a destra dello schermo, o a sinistra, a seconda della direzione di scorrimento. alternateIl testo rimalza da una parte all'altra dello schermo.direction=

indica il verso di scorrimento:

left (impostazione predefinita): right: verso destra up: dal basso verso l'alto down: dall'alto verso il basso scrolldelay=n

verso sinistra

n indica il numero di millisecondi fra ciascuno dei successivi spostamenti del testo.scrollamount=n

n indica di quanti pixel si deve spostare ogni volta il testo.bgcolor=colore

il marquee scorre su uno sfondo del colore presceltotitle="messaggio"

Viene visualizzato un breve messaggio di teso se si passa con il mouse sopra l'area occupata dal marquee,: funziona come l'attributo "alt" per le immagini"align=

Il marquee si allinea rispetto al testo che lo circonda top in alto middle centrato bottom in bassoheight=

indica l'altezza del marquee. Pu essere espressa in pixel o in percentualewidth=

indica la larghezza del marquee. Pu essere espressa in pixel o in percentualehspace=n

horizontal-space: distanza del marquee in orizzontale dal testo (come per le immagini)vspace=n

vertical-space: distanza del marquee in verticale dal testo (come per le immagini) Gli attributi del marquee sono proprio tanti: per memorizzarli meglio si pu usare il tutorial in linea. COLLEGAMENTI IPERTESTUALI E' possibile collegare diversi documenti,o anche parti diverse dello stesso documento,con poche e semplici istruzioni. In generale, bisogna inserire fra i tag la parola da cui far partire il collegamentoparola

La parola di solito cambia colore e, cliccando su di essa con il mouse, si visualizza il documento che si desidera. Con un metodo simile si possono inserire anche suoni o filmati. Vediamo in dettaglio alcuni esempi. COLLEGARE A INIZIO PAGINACodice:Questa parola vi collegher a un file Risultato: Questa parola vi collegher a un file Codice:Questa immagine vi collegher allo stesso file Risultato: Questa immagine vi collegher allo stesso file Codice:Clicca sull'immagine per ingrandirla

Risultato: Clicca sull'immagine per ingrandirla

COLLEGARE A UN PUNTO PRECISO DI UN DOCUMENTO Per inserire un collegamento ipertestuale a un punto preciso di un documento,occorre 1. aprire il documento a cui ci si vuole collegare, scegliere il punto in cui la pagina deve essere aperta, e inserire un segnalibro attraverso la seguente linea di codice: parola a cui effettuare il link 2. ritornare al documento da cui ci si vuole collegare e scrivere, al punto giusto la seguente linea di codice: