Cos’è Il Browser?
08/12/2009 – È quel programma che serve per navigare nella rete. Il suo significato deriva dalle iniziali della frase inglese Hyper Text Markup Language. Senza HTML, in pratica, non esisterebbe il World Wide Web. Non c’è nulla di particolarmente difficile e non serve avere alcuna esperienza di programmazione; non si tratta infatti di programmare, ma di assemblare delle istruzioni [ tags, elementi ] predefinite e molto semplici da inserire, ma soprattutto con pochissime regole da rispettare. Fare delle buone pagine Web non è per niente difficile, i problemi possono nascere quando non bastano più semplici pagine statiche o quando queste debbano produrre risultati elaborati. Per costruire pagine web si ha bisogno di un editor, cioè uno di quei programmi che si adoperano per scrivere testi:
Wordpad o il Blocco Note che di solito si trovano a corredo di Windows, Linux, Mac, ma anche qualsiasi altro elaboratore di testi potrebbe fare al caso tuo; unica raccomandazione: salva sempre il tutto in formato ASCII, cioè puro testo senza aggiunta di formattazioni particolari.
Alcuni di questi programmi come Word per citarne uno, aggiungono caratteri proprietari che non vanno d’accordo con il codice HTML e le relative pagine Web. Non lasciarti ingannare dal fatto che Word sia capace di esportare in formato HTML: come quasi tutti i suoi concorrenti, esso genera infatti quel che si dice “codice sporco“. Se usi un elaboratore di testi, dunque ricordati di salvare in formato TXT, quindi rinomina l’estensione manualmente scegliendo il formato HTML. L’ideale è procurarsi un editor specifico per HTML: in rete se ne trovano di potenti e anche gratuiti, sia di tipo visuale, sia testuale. I primi, altresì conosciuti con il nome di editor WYSIWYG (What You See Is What You Get) tendono anch’essi a generare codici sporchi, con la sola eccezione di Macromedia Dreamweaver oggi Adobe che però ha il difetto di costare parecchio.
In generale, chi desidera imparare veramente il codice HTML dovrebbe optare per un l’uso di editor testuali che costringono alla conoscenza del codice ma che ne agevolano comunque la scrittura e il controllo.
Incomincia dalla struttura
Apri l’editor prescelto, ti mostro un esempio con il blocco note i vari passaggi per iniziare a fare una pagina vuota: Per l’esempio ho salvato il foglio senza nominarlo, ma puoi da subito dopo aver aperto l’editor nominarlo.
Sul foglio bianco dell’editor prescelto inserisci i tags, o elementi che compongono il linguaggio HTML e che devono essere racchiusi fra i parentesi angolari < queste >. Si tratta di parole chiave, termini in lingua inglese riservati. L’elemento ( tag ) smette di produrre il suo effetto nel momento in cui lo stesso viene ripetuto facendolo precedere da una barra / contenuta sempre all’interno delle parentesi </ così >. L’inizio di un documento HTML ha sempre come elemento iniziale < html > e come elemento finale </ html >: non importa se in maiuscolo o minuscolo, ma tutto ciò che sarà contenuto tra questi due elementi verrà letta dal Browser per generare una pagina Web. La struttura di un documento HTML è composta da due sezioni ben distinte: una parte iniziale denominata testa, < head >, e una parte centrale denominata corpo < body >. Nella testa head Vengono inseriti quei comandi che inviano informazioni al server (meta comandi, titolo o codici che deve essere letto con una certa priorità: script, fogli di stile e altro ancora). Tutte cose che a questo livello interessano ancora poco e che tratteremo più avanti. Nel corpo body, va invece tutto il resto. Anche questi due elementi necessitano del relativo elemento di chiusura: </ head > e </ body>
Riassumo nell’esempio qui sotto.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Documento senza titolo ( nome del sito o della pagina ) </title>
</head>
<body>
</body>
</html>
Per il momento all’interno della sezione <head> non metterai nulla, si vedrà più avanti cosa inserire, adoperando quindi soltanto la zona <body>. La prima riga di codice è il cossiddetto DOCTYPE, una sorta di prologo che ha il compito di informare il browser che si tratta di un documento HTML relativo a determinante specifiche dettate dal W3C, in questo caso versione 4.01 Transitional. Apparentemente non serve a niente, e per questo si potrebbe ancehe pensare di eliminarlo, ma in realtà è molto importante se vuoi rispettare le regole del web e ottenere una validazione. Esso ha anche il compito di predisporre i browser a una corretta interpretazione del codice contenuto nella pagina. Ora prova a crearlo col tuo editor: con il cursore posizionati all’interno degli elementi, ossia tra i tag <body> e </body>. Prova a inserire del testo usando l’elemento <P>, che significa paragrafo, e procedi inserendo una frase, per esempio Ecco la mia prima pagina HTML .Naturalmente chiudi questo testo fra gli elementi <P> e </P>
Non importa come hai disposto le frasi del testo, puoi lasciare più spazi vuoti fra una parola e l’altra o ritornare a capo quante volte vuoi col tasto invio, nessuna importanza; il Browser ignorerà il tuo modo di scrivere limitandosi a leggere e interpretare soltanto quello che hai scritto. Non resta che salvare il documento, ricordando le regole dette poco fa. Se stai lavorando alla homepage, l’idelae è scegliere come nome index.html poichè è questo il nome esatto cercato di solito sui server uando si digita il solo URL, per esempio www.ansa.it.
FORMATTAZIONE DI BASE
Ora che hai capito come creare la struttura di una pagina web inserendo al suo interno una qualunque scritta generica, è bene capire quali sono le istruzioni per formattare un testo HTML. Innanzituttpo apri il tuo editor e richiama la pagina che hai precedentemente salvato. Posiziona il cursore all’interno dell’elemento paragrafo <P>, tra la lettera P e la parentesi di destra. Digita uno spazio vuoto e inserisci l’attributo align=”xxx” dove per xxx si intende uno dei seguenti attributi: center, left, right, justify. Il tuo codice dovrebbe assomigliare a qualcosa di questo tipo:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Home – NAMP</title>
</head>
<body>
< div align=”left” >Oggi è una bella giornata e voglio trascorrere il tempo con i miei amici animali. Fa molto caldo, quindi mi porto una bevanda dissetante. < /div >
</body>
</html>
Sostituendo l’attributo center con right, left o justify si ottengono rispettivamente un allineamento a destra, a sinistra o un paragrafo di testo giustificato. L’esempio sopra ti mostra la scritta a sinistra: “Oggi è una bella giornata e voglio trascorrere il tempo con i miei amici animali. Fa molto caldo, quindi mi porto una bevanda dissetante“. A proposito di sintassi nell’applicare i diversi tipi di formattazione avrai notato l’uso sia del segno uguale ( = ) sia quello delle virgolette (“”), sempre senza spazi. Si tratta di una regola importante perchè vale per tutti gli attributi e per questo è una di quelle che si utilizzano più frequentemente. Inoltre,se stai usando un editor HTML avrai notato che ognoi volta che vuoi andare a capo nopn basta lasemplice pressione del tasto invio. Nelle pagine web per questa operazione si usa si usa un apposito elemento, <br>. In alternativa si può anche chiudere un paragrafo e aprirne uno nuovo, </p><p> . Allo stesso modo, inserendo più spazi fra una parola e l’altra, ti accorgerai che questi non saranno visualizzati ma ignorati, tranne il primo. Prova per credere.
LAVORARE CON LE IMMAGINI
Dopo aver visto le regole base per la gestione del testo è ora arrivato il momento delle immagini, un altro elemento fondamentale del web. Innanzitutto apri il solito documento di prova, index.html, con il tuo editor, quindi posiziona il cursore nel punto in cui dovrà essere inserita l’mmagine, che risponde all’elemento (tag) < img src=”xxx.yyy” alt=”” />, dove “xxx” è il nome del file e yyy la sua estensione. Le immagini consentirte dal linguaggio “html” sono del tipo: GIF, JPG e PNG. A proposito di questi formati, detto che JPG e GIF vanno decisamente per la maggior, l’unica cosa che devi tenere sotto controllo è il peso dei byte di questi file. Come già detto prima, la bravura di un buon programmatore html passa anche dalla capacità di produrre codice pulito e, soprattutto leggero.
Quando prepari le immagini per un sito web, dunque, fai attenzione a scegliere attentamente il livello di compressione del file, fino a raggiungere l’equilibrio migliore fra qualità e dimensioni. Passiamo ora al codice necessario per inserire la tua prima immagine. Supponi che questa si chiami AASFONDOBLU “ASFONDOBLU.png“, sarà necessario inserirla in questo modo:
< img src=”https://numerico.altervista.org/NAMPIcoMenu/ASFONDOBLU.png” border=”0″ alt=”” width=”125″ height=”129″ />
Nota la sinstassi del comando.
Noterai anche che dopo la parola chiave img, che indica appunto immagine, c’è un “src” che sgnifica: source, ovvero sorgente, cioè l’immagine che deve essere visualizzata. Questo nome va inserito all’interno dei doppi apici ed è praticamente il nome dell’immagine stessa.
Adesso salva il tuo file HTML sovrascrivendo la versione precedente, quindi aprilo con un browser: noterai che l’immagine non viene visualizzata correttamente ma compare un simbolo con una crocetta rossa. La ragione è semplice: il codice appena scritto punta direttamente al file chiamato immagine. jpg all’interno della stessa cartella in cui sitrova INDEX.HTML, che però non esiste ancora. Procurati un’immagine di prova, rinominala come immagine.jpg o viceversa modifica il codice inserendo il nome del nuovo file. Unica avvertenza, fai attenzione a Maiuscole e Minuscole perchè sul web ci sono delle diferenze. . Adesso portati una riga sotto il tag che è servito per inserire l’immagine e scrivi in un altro paragrafo: La mia prima pagina web ha finalmente anche un’immagine.
Allineamento immagine: left, center, right
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Documento senza titolo ( nome del sito o della pagina ) </title>
</head>
< img src=”https://numerico.altervista.org/AASFONDOBLU.jpg” border=”0″ alt=”” width=”183″ height=”35″ align=”left” />
<body>
</body>
</html>
|
esempio immagine posizionata a sinistra |
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Documento senza titolo ( nome del sito o della pagina ) </title>
</head>
< img src=”https://numerico.altervista.org/NAMPIcoMenu/ASFONDOBLU.png” border=”0″ alt=”” width=”183″ height=”35″ align=”center” />
<body>
</body>
</html>
| esempio immagine posizionata al centro |
|
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Documento senza titolo ( nome del sito o della pagina ) </title>
</head>
< img src=”https://numerico.altervista.org/NAMPIcoMenu/ASFONDOBLU.png” border=”0″ alt=”” width=”183″ height=”35″ align=”right” />
<body>
</body>
</html>
| esempio immagine posizionata a destra | |
COLLEGAMENTI IPERTESTUALI
Dopo aver visto come inserire il testo e immagini, non resta che affrontare i link o collegamenti ipertestuali. Si tratta di elementi di una pagina, di solito testi, che sono interattivi poichè rimandano ad altri contenuti della Rete. Per iniziale apri come di consueto editor e documento di prova, posizionando il cursore del mouse nel punto esatto in cui dovrà essere inserito un link. Il tag da adoperare in questo caso è:
Senza il suo attibuto più importante, ossia href , esso è praticamente inutile. L’href, acronimo di hypertext reference, indica il collegamento cui fa riferimento il tag <a>. Vedi un esempio pratico, supponendo che desideri inserire un link a http://numerico.altervista.org/
Analizza la sintassi del comando: mentre href” specifica l’indirizzo per così dire di destinazione, quanto scritto di seguito, nel tuo esempio la parola “Cliccami per accedere“, sarà l’unico elemento visibile e interattivo all’interno della pagina web.
Naturalmente, oltre che cambiare URL e testo, si può associare il link anche ad altri tipi di elementi, come per esempio le immgini. In questo modo si da’ vita a a un processo chiamato nidificazione degli elementi tipico del linguaggio HTML. Si tratta di una caratteristica importante, poihè permette di sommare facilmente tra loro gli elementi e gli effetti propri di ciascun elemento.
Esempio 1 collegamento Ipertestuale stessa finestra.
_self apre il collegamento nella stessa pagina
<a href=”https://numerico.altervista.org/ALBERCLAUS/wp-login.php?action=register” target=”_self”>Cliccami per accedere</a>
Come già accennato in precedenza parlando delle immagini, è bene ricordare che nel caso in cui si decidesse di usare un’immagine grafica al posto del testo, questo di default mostrerebbe un bordo perimetrale colorato dello stesso colore scelto per segnalare la presenza di un link.
Se non vuoi vedere bordi colorati si deve usare l’attributo [ border=”0″ ] all’interno del tag img ome nell’esempio riporato sopra. Oltre agli indirizzi validi, l’attributo href accetta anche altri valori, con significati diversi.
<a href=”ftp://…”>
collegamento a un sito in modalità FTP
<a href=”mailto: nome@server”>
collegamento a un indirizzo di posta elettronica tramite client predefinito
<a href=”news:..”>
collegamento ad un gruppo di discussione (newsgroup Usenet)
<a href=”nomefile.zip”>
collegamento per il download di un file in formato compresso
<a href=”nomepagina.html”>
collegamento ad un’altra pagina all’interno della stessa cartella
Ci sarebbero anche altre possibili forme di link quali gopher,nntp,telnet,wais,newsrc, mai visto il loro raro utilizzo non vale nemmeno la pena approfondire il significato. Molto più importante è invece gestire altri aspetti dei collegamenti ipertestuali. Per esempio, seguendo quanto fin qui spiegato si ottiene sempre che la pagina di provenienza all’interno della finestra del browser. Se desiderate un comportamento diverso puoi aggiungere l’attributo “target” che specifica su quale finestra del browser di navigazione dovrà essere aperta:
target=”nome della finestra”
Dove nome della finestra corrisponde a nome assegnato con name in caso di frame o, in alternativa, la parola riservata _blank che apre una nuova finestra del browser, lasciando aperta e visibile anche la pagina contenente il collegamento ipertestuale.
Esempio 2 collegamento Ipertestuale nuova scheda.
<a href=”http://numerico.altervista.org/CUORI/33.gif” target=”_blank”>Cliccami </a>
Guarda che immagine ti regalo Cliccami
FORMATTAZIONE AVANZATA
Probabilmente, a questo punto ti sarai già accorto che scrivendo in HTML non sempre è possibile ottenere lo stesso risultato “grafico” che si ottiene con la normale scrittura di un testo. Certi caratteri hanno infatti delle regole ben precise che bisogna conoscere e applicare.Una delle primissime cose che si notano è la difficoltà nel lasciare più di uno spazio vuotofra una parola e l’altra. Il lingiìuaggio HTML ignora infatti tuttoi gli spazi in più inseriti con il metodo normale (barra spaziatrice) e ne lascia di fatto sempre e soltanto uno. Per ovviare a questo inconveniente esistono appositi codici che servono esclusivamente a introdurre spazi vuoti. Il simbolo significa non-breaking space, e se ne possono mettere tanti quanti sono gli spazi desiderati: così facendo il browser eseguirà la richiesta. Anche andare a capo all’interno di uno stesso paragrafo può diventare difficile. Come accennato in precedenza, la semplice pressione del tasto invio non è sufficiente per forzare un ritorno a capo: per fare questa operazione si adopera il tag <br> maiuscolo o minuscolo che sia non importa: questo tag forza un ritorno a capo e più <br> consecutivi equivalgono a più righe.
CARATTERI SPECIALI
Ci sono anche altri caratteri che conviene introdurre con le corrette regole che l’HTML richiede. Si tratta di caratteri particolari, per esempio quelli tipici di una lingua come, nel caso dell’italiano, le vocali accentate. Questo tipo di carattere speciale, quando scritto da “tastiera” e senza l’aiuto di un ereditor HTML, può mettere in crisi il browser che lo visualizza. Ecco perchè è meglio adoperare il relativo codice per ottenerlo:
à = à
è = è
ì = ì
ò = ò
ù = ù
Anche le doppie virgolette, le parentesi angolari e tutto quello che potrebbe essere male interpretato, conviene scriverlo con il suo codice; riporto di seguito l’elenco dei caratteri di uso più comune:
” = "
& = &
< = <
> = >
€ = &euro
Per concludere, alcuni caratteri speciali che potrebbero risultare utili:
© = ©
® = ®
£ = £
¼ = ¼
½ =½
¾ =¾
¹ =¹
º =º
FORMATTAZIONE DEL TESTO
Per migliorare l’aspetto di un testo, anche l’HTML offre una serie di strumenti di formattazione piuttosto ampia. Vedi quali sono gli elementi che producono questi effetti.
<strong></strong> = bold o grassetto
Tutto quello che sarà scritto all’interno dei tags <strong> e </strong> sarà visualizzato in grassetto. Lo stesso risultato si ottiene adoperando <b> e </b> che sono equivalenti di <strong> e </strong>.
<em> </em> = Italico o corsivo
Tutto quello che sarà scritto all’interno dei tags <em> e </em> sarà visualizzato in corsivo. Anche in questo caso avrai potuto ottenere lo stesso risultato adoperando <i > e </i>, che sono equivalenti di <em> e </em>.
A proposito di nidificazione, citata in precedenza, gli attributi di testo si prestano alla peferzione per questa tecnica e, per esempio, i tag grassetto e corsivo possono coesistere nel modo seguente:
<strong><em>numerico.altervista.org </em></strong>
COLORI, DIMENSIONI E FONT
Per modificare il testo nei suoi tre attributi fondamentali, ossia colore, dimensioni e tipo di carattere, esistono due diverse possibilità. Adoperare il tag <font> con i relativi parametri o fare uso di un foglio di stile, argomento riservato ai più esperti . La prima soluzione è molto semplice, poichè si tratta di racchiudere il testo tra i tag <font> e </font> con la medesima procedura fin qui adoperata per tutti gli altri elementi. Tra gli attributi (parametri) adoperabili con “font”, ci sono color, face e size. Vediamo come si adoperano:
<font color=”valore o nome”>
Tra e doppie virgolette sono ammessi i nomi dei colori in lingua inglese o il numero del colore in formato esadecimale (un numero formato da tre coppie esadecimali precedute dal simbolo cancelletto):
<font color=”green”>
proceduce lo stesso effetto di testo scritto in verde di:
<font color=”#008000″>
<—-font face=”nome del carattere”—–>
Cambia il tipo di font o carattere adoperando quello specificato fra le virgolette:
<font face=”Comic Sans MS”>
<font size=”valore numerico”>
Cambia le dimensioni del font o carattere, dove il valore specificato può avere un numero compreso fa -6 e +7:
<font size=”3″>
Anche in questo caso si possono avere più attributi per lo stesso font e combinarli fra di loro (nidificazione):
<font color=”#008000″ size=”3″ face=”Comic Sans MS”>
Da notare che le dimensioni del carattere dipendono dalle impostazioni personalizzate sul browser di chi ci visita e che soltanto con i CSS si possono forzare queste impostazioni. Infine, riguardo al tipo di font, evita di adoperare caratteri particolari poichè, se non sono installati anche nel pc di chi visiterà la pagina, saranno sostituiti da un font standard, ottenendo un risultato decisamente diverso (e deludente) da quello previsto.
HEAD E BODY
Dopo aver visto come inserire testo, immagini e link, adesso vediamo come il tuo sito può essere visualizzato meglio dai motori di ricerca, prima di imparare ad aggiungere alcuni attributi per il tag <body> in modo da estendere questi attributi all’intero documento e non a un singolo tag.
HEAD
Dopo averli fin qui trascurati, è arrivata l’ora di occuparci dei meta comandi, ovvero il codice compreso tra i tag <head> e </head>. Si tratta dei tag letti dalla sola Rete e che non producono alcun effetto visibile ma che sono fondamentali per far si che il sito venga “letto” dai motori di ricerca o validato dal W3C. Per questo motivo è opportuno specificare nellapagina iniziale (index.html), almeno un minimo di informazioni relative al contenuto del sito attraverso l’uso dei meta comandi, che per fortuna hanno una sintassi simile a quella dei tag fin qui descritti:
<meta name=”xxx” content=”yyy”>
Dove al posto di xxx andrà messo il nome del meta comando e al posto di yyy il suo contenuto o descrizione.I meta comandi veramente importanti non sono molti. Vediamo insieme:
<meta name=”DC.Title” content=”Mio titolo”>
Si usa per il titolo del documento. Anzichè Mio titolo metti quello della tua pagina.
<meta name=”description” content=”descrizione del sito/ pagina”>
Si adopera per la descrizione: è questo che ti identifica realmente in Rete. Sii preciso nel decsrivere cosa tratta il tuo sito.
<meta name=”Keywords” content=”parole separate da virgolette”>
Si usa per dare ulteriori informazioni sull’argomento trattato. Spesso si adoperano parole diverse che hanno però lo stesso significato, cercando così di interpretare e intuire quello che il visitatore digiterà sul motore di ricerca. Un esempio: chi cerca javascript potrebbe far uso della parola Javascript ma anche di JS oppure di Script Java. Tutte queste varianti possono essere inserite keywords (parole chiave) e quindi aiutare nella ricerca. Se ne possono inserire fino a 1.000 e dovranno semplicemente essere separate da una virgola e da uno spazio vuoto .
BODY
Il tag <body>, che dichiara l’inizio del corpo del documento, supporta diversi attributi con relativi parametri che, se inseriti direttamente in questo tag, saranno estesi all’intero documento, dal momento che body fa riferimento a tutto il documento e non solo a una sua parte. I suoi attributi principali sono:
bgcolor=”nome del colore di sfondo a tinta unita”.
bakground=”nome dell’immagine gif, jpg o png di sfondo”.
topmargin=”distanza in pixel dal margine superiore”.
bottommargin=”distanza in pixel dal margine inferiore”.
leftmargin=”distanza in pixel dal margine sinistro”.
rightmargin=”distanza in pixel dal margine destro”:
link=”colore dei links”.
vlink=”colore dei links visitati”.
text=”colore del testo”.
Possono essere inseriti tutti o soltanto quelli ritenuti necessari, però se si decide di optare per bgcolor non si potrà fare uso anche di background o viceversa, dal momento che uno esclude l’altro, a meno che non si faccia uso di di immagini con zone in trasparenza che lascerebbero vedere il fondo sotto. La sintassi prevede che si lasci uno spazio vuoto e che si racchiuda tra doppi apici (“”) il valore dell’attributo. Ecco un esempio:
<body bgcolor=”green” topmargin=”10″ bottommargin=”10″ leftmargin=”5″ rightmargin=”5″ link=”purple” vlink=”fucksia” text=”#008000″>
Questa dichiarazione di attributi nel body imposterà uno sfondo a tinta unita di colore green (verde) con una distanza dai margini superiore e inferiore di 10 pixel, una distanza dai margini laterali sinistro e destro di 5 pixel . Il colore dei link, anxìzichè essere quello di default (il blu) sarà porpora per i link non ancora visitati e fucsia per quanto riguarda quelli già visitati. Infine il colore del testo: grigio scuro. I colori possono essere espressi con il nome in lingua inglese o con l’equivalente numero in base esadecimale nelle classifiche sei cifre precedute dal simbolo cancelletto.
I FRAME
Le strutture basate su frame sono ideali per gestire siti articolati su due parti distinte: menu e pagina principale. Se il sito che hai intenzione di creare dovesse trattare decine di argomenti, e di conseguenza avere decine di pagine, molto probabilmente si renderebbe necessario fare uso di un menu da riportare su tutte le pagine per migliorare la navigazione. Per evitare di “ripetere” questo menu ogni volta, è possibile fare ricorso a una struttura a frame. Questi ultimi altro non sono che una suddivisione della pagina principale in due o più pagine all’interno della stessa finestra del browser. Quante e come disporle dipende soltanto da te, dal tuo progetto e dalla tua organizzazione. Non esistono limiti, anche se si raccomanda di non esagerare per non compromettere interfaccia e semplicità d’uso. Spesso sono sufficenti due soli frame, uno laterale dove inserire il menu e uno che rappresenta l’area occupata dai contenuti veri e propri. Quale che sia lo schema adottato, per realizzare uno Layout su frame bisogna creare una nuova pagina HTML che contenga al suo interno soltanto il codice per la struttura dei frame. Per prima cosa si preparano le altre due pagine:
menu.html e principale.html. Ovviamente puoi assegnare loro qualsiasi altro nome, l’importante è ricordarsi di cambiare i riferimenti dal codice che userò come esempio.
A questo punto, se avevi chiamato index.html il file su cui avevi lavorato fino ad ora, rinominalo come pagina principale.html e crea una nuova pagina dal nome index.html. Riprendi la struttura base iniziale e portati col cursore del mouse subito sotto </head> e inserisci il nuovo elemento che serve per chiamare una nuova struttura a frame, ossia <frameset>. Questo tag è infatti l’unico che non va inserito nè dentro la sezione <head>, nè dentro quella <body>, ma tra questi due elementi. Come per molti altri tag, anche nel caso di <frameset> è sempre necessario accompagnarlo ad almeno uno dei due attributi: rows o cols, che servono per suddividere la finestra in righe o in colonne. Supponendo di dover dividere la finestra in modo verticale adopereremo:
<frameset cols=”25%, 75%”>
Assegnando in questo caso il 25% dello spazio totale al frame piccolo per il menu e il restante 75% alla finestra principale. Potrai adoperare anche valori fissi espressi in pixel, nel caso in cui si debbano rispettare delle misure ben precise, senza cioè mantenere le proporzioni dovute a risoluzioni video e dimensioni diverse impostate dal visitatore. Meglio impostare il frame menu con una misura fissa, magari “220 pixel”, e il frame principale variabile a seconda di quanto spazio rimane; per fare questo si usa il carattere asterisco, che in questo caso è una specie di jolly:
<frameset cols=”220, *”>
Una volta stabilite nel frameset le dimensioni della suddivisione, dovrai richiamare i due file preparati precedentemente e cioè menu.html e principale.html.
<frame nane=”menu” src=”menu.html”>
< f rame name=”principale” src=”principale.html”>
Il tag frame ha diversi attributi, ma due soltanto sono indispensaili: name che indentifica il nome del frame così da poter richiamare su quel frame cin link proveniente da un frame diverso, e “src” (source) che invece richiama la pagina HTML vera e propria. Riassumendo, ecco rappresentato qua sotto come dovrebbe apparire ora il codice del tuo file index.html.
Analizzando riga per riga il listino si notano due importanti novità: il doctype, che è diverso poichè in questo caso viene ustao Frameset e non “Transitional” come nelle pagine HTML fin qui viste, e la presenza del tag “noframes” che serve per visualizzare un messaggio o eseguire altro codice HTML nel caso in cui il browser non supporti i frame. Una volta salvato il file com eindex.html, non resta che provare a vedere cosa succede. Se hai preparato precedentemente i due file (menu.html e principale.html) entrambi saranno visualizzati contemporaneamente, uno di fianco all’altro nella stessa finestra, dando l’impressione di essere una sola e unica pagina. Infine, ricordati i nomi che hai assegnato nella struttura ai tuoi frame usando l’attributo “name”: saranno questi i nomi che, richiamati all’interno dell’attributo target dei link, decideranno su quale dei due frame saranno aperti i link. Un esempio aiuterà a capire meglio quanto hai appena letto. Se hai deciso di usare due frame è molto probabile che uno di questa debba ospitare un menu in cui link dovranno però aprire la pagina nella finestra principale, non certo nel piccolo frame del menu stesso sul quale si trovano. Per fare si che ciò avvenga, dovrai aggiungere al link l’attributo target specificando il nome del frame usato con [ name ], quindi:
<a href=”nome_pagina.html” target=”principale”>
ESEMPIO
|
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html> <head> </head> <frameset cols=”220, *”> <frarne name=”menu” src=”menu. html ” scrolling=” auto”) <frame rr”1ns=”principale” src=”principale.html” scrolling=”auto”> <noframes> <body> <p>spiacente il tuo browser non supporta i frame</p> </body> </noframes> </franeset> </html> |
Questo link, rispetto a quelli visti a proposito dell’attributo href, ha in più l’attributo target, che adesso ha ragione di esistere dal momento che hai una struttura con più di una finestra e per questo è necessario decidere su quale aprire il link. Per farlo basta semplicemente specificare il nome del frame assegnato precedentemente con name, che dìventa il valore dell’attributo target.
LE TABELLE
Fin qui hai imparato a creare un sito e a suddividerlo in frame. Nonostante questo, adesso ti accorgi che con queste sole conoscenze non è per nulla semplice riuscirea posizionare gli elementi che fomano la pagina così come avresti voluto. Visto che per i CSS è anche troppo presto, risolverai il problema in modo tradizionale facendo uso delle care vecchie tabelle. Contrariamente a questo potresti pensare, infatti, che esse non servono soltanto per incolonnare dati, ma anche come “contenitori” per testi e immagini. Prova a creare una tabella semplice con il tag <table>, che però per assumere significato necessita di altri elementi. Almeno due: <tr> e <td> che si trovano annidati al suo interno e che servono rispettivamente per suddividere la tabella in righe e in colone. Intere tabelle possono poi essere a loro volta contenute all’interno di celle di altre tabelle, da qui il termine nidificate, un po’ come succede con le scatole cinesi. Inizia nel modo più semplice, supponendo di volere una tabella con una sola cella. Questa la sua definizione:
<table border=”1″>
<tr>
<td> qui andrà messo il tuo contenuto della tabella </td>
</tr>
</table>
|
Da notare che ogni elemento che riguarda la tabella necessita nel relativo elemento (o tag) di chiusura /, dove <tr> decreta l’inizio di una nuova riga, mentre <td> è la cella vera e propria . Dovendo creare una tabella con due celle affiancate, praticamente due colonne, sarà sufficiente affiancare due elemti <td> all’interno di uno stesso elemento <tr>:
<table border=”1″>
<tr>
<td>cella sinistra</td><td>cella destra</td>
</tr>
</table>
|
Con la stessa logica è possibile aggiungere tutte le righe e le celle che servono:
<table border=”1″>
<tr>
<td>cella alta a sinistra</td><td> cella alta a destra</td></tr>
<td>cella bassa a sinistra</td><td>cella bassa a destra</td></tr>
</table>
|
A volte però servono tabelle che non siano regolari come quelle che hai appena visto. Cio’ accade abbastanza spesso quando l’uso delle tabelle non si limita alla semplice tabulazione dei dati ma viene adoperata come contenitori di oggetti quali immagini, applet, script testi e tutto quello che può far parte di una pagina web. Vedi allora come creare delle tabelle particolari facendo uso di altri due attributi: rowspan e colspan, che servono per occupare più di una sola cella rispettivamente in senso orizzontale e verticale. Visto che modificano la cella, sono applicabili al solo elemento (o tag) <td>. Un esempio ti aiuta a capire meglio. Supponendo di dover occupare con una sola cella più colonne di una tabella regolare, adopererai “colspan” specificando il numero di colonne da occupare, che nel nostro caso potrà essere al massimo 2:
<table border=”1″>
<tr>
<td>cella alta a sinistra</td>
<td>cella alta a destra</td>
</tr>
<tr>
<td colspan=”2″>questa cella occupa lo spazio di due celle</td>
</tr>
</table>
|
||||
Allo stesso modo, volendo occupare più righe di una tabella regolare si fa uso di rowspan specificando il numero di righe da occupare, che nel tuo caso potrà essere al massimo 2:
<table border=”1″>
<tr>
<td rowspan=”2″>questa cella ocqupa 2 righe</td>
<td> cella alta a destra</td>
</tr>
<tr>
<td>cella bassa a destra</td>
</tr>
</table>
|
Come hai appena avuto modo di vedere, combinando questi attributi è possibile ottenere una struttura ottimale, tutto dipende da come e che cosa vuoi impaginare. Vedi ora un altro esempio e supponi di voler un tipo di impaginazione stile quotidiano: testa, colonne e piede di pagina.
<table border=”1″>
<tr>
<td colspan=”3″ align=”center”>testata pagina</td>
</tr>
<tr>
<td>colonna 1</td>
<td>colonna 2</td>
<td>colonna 3</td>
</tr>
<tr>
<td colspan=”3″ align=”center”>piede pagina</td>
</tr>
</table>
|
|||||||||
Tutto il testo inserito all’interno degli elementi <td> seguirà l’impaginazione dettata dalla struttura della tabella stessa, che risulterà essere dinamica, cioè modificherà le proprie dimensioni dei testi. Infine il bordo in alcuni casi potrebbe preferire più vistoso. Uno degli attributi dell’elemento <table> è proprio border, che se impostato a zero non produce alcun bordo, viceversa è possibile specificarne lo spessore in pixel. Oltre al bordo è possibile indicare sia quanto spazio lasciare fra le singole celle cellspacing, sia quanto spazio lasciare fra il bordo e i dati contenuti all’interno della singola cella cellpadding. Se non viene specificato alcun valore, i due attributi assumono come valore di default 2.
<table border=”1″ cellspacing=”19″ cellpadding=”8″>
E’ anche possibile avere uno sfondo colorato a tinta unita o decorato con un motivo grafico. Gli attributi da adoperare sono: bgcolor per il colore a tinta unita, background per un’immagine grafica valida gf, jpg, png da usare come sfondo. Valgono praticamente le stesse regole viste in precedenza per l’elemento body . Ovviamente, laddove adoperassi un colore a tinta unita non sarebbe possibile adoperare anche uno sfondo grafico e viceversa. Se inseriti all’interno dell’elemento <table> avranno effetto su tutta la tabella, ma è possibile adoperare colori o sfondi diversi per ogni singola cella. In questo caso, invece di applicare gli attributi al tag table li si applicheranno al tag cella <td>:
<table border=”1″>
<tr>
<td colspan=”3″ bgcolor=”Red”>testata pagina</td>
</tr>
<tr>
<td bgcolor=”Lime”>colonna 1</td>
<td bgcolor=”Silver”>colonna 2</td>
<td bgcolor=”Yellow”>colonna 3</td>
</tr>
<tr>
<td colspan=”3″bgcolor=”Aqua”>piede pagina</td>
</tr>>
</table>
>
|
|||||||||
MODULI
Adesso è arrivato il momento di qualcosa di leggermente più complesso, più professionale, come uno strumento per interagire con i tuoi visitatori, per conoscerli o per sapere cosa ne pensano nel tuo lavoro. Per fare questo si deve costruire un modulo o form. Questi elementi possono essere utilizzati per svariate forme di comunicazione; adoperati da soli, cioè con i soli elementi offerti dell’HTML, hanno delle limitazioni, ma se associati a un qualsiasi linguaggio di scripting (per esempio javascript), acquisiscono una potenza incredibilie e sono in grado di ricevere e inviare dati a/da pagine diverse, eseguire operazioni matematiche, effettuare controlli anche di tipo piuttosto complesso e molto altro. Un modulo può essere costituito da diversi elementi quali: caselle per introdurre testo, menu a tendina da cui poter effettuare delle scelte, caselle di spunta, caselle per selezioni singole o multiple, aree più o meno grandi per raccogliere commenti e descrizioni, caselle nascoste per password, pulsanti di invio e pulsanti di annullamento. Per cominciare è bene però partire da qualcosa di più semplice, anche perchè, una volta capita la tecnica, potrete arricchire i tuoi form con tuti gli elementi che vorrete.
Innanzitutto fai la conoscenza con <form>, ossia l’elemento che dichiara il modulo. Come di consueto, da solo dice poco o niente e necessita di alcuni attributi: action, metod e name. Il primo serve per inidirizzare il modulo al server, all’ URL, al CGI o all’inidirizzo di posta. Il secondo per dichiarare con quale dei due possibili metodi, POST e GET, si devono trasmettere i dati. Il terzo seve aidentificare il modulo, fattore indispensabile se si dovesse fare uso di JavaScript o di un altro linguaggio di programmazione a oggetti. I campi che compongono un modulo si ottengono con l’elemento <input>, al quale vanno assegnati due parametri: type (ce ne sono moltissimi) e name.
Sono solo esempi
<form>Inserisci it tuo nome<inputtype=”Text” name=”tuo nome”></form>
Se provi a digitare qualcosa, di fatto non servirà a nulla, in quanto, per fiunzionare correttamente, al modulo mancano due cose: il pulsante per l’invio e le specifiche relative a quest’ultimo. Per quanto riguarda il pulsante di invio si procede creando un altro elemento <input> questa volta però utilizzando, come attributo type, Submit al posto di Text, che serve appunto per creare il pulsante di invio. Aggiungerai anche Value per identificare la scritta che dovrà comparire sul pulsante.
<form>Inserisci il tuo nome<inputtype=”Text” name=”tuo nome”>
<input type=”Submit” value=”invia”>
</form>
A questo punto devi solo indicare a chi inviare i dati appena raccolti e il loro formato. Di solito i moduli sono inviati a uno script CGI al server sul quale hai il tuo sito. Gli script in CGI provvedono a ricevere i dati, effettuare dei controlli e dopo averli formattati passano all’immediata spedizione (send-mail); cioè si fa uso di un servizio semplicemente richiamandolo, e questo è di solito compreso con il pacchetto di hosting del proprio sito. Fai una verifica dei servizi offerti dal tuo gestore, è probabile si trovi sotto la voce formmail o sendmail. Questo servizio offre la possibilità di ricevere i dati provenienti dal tuo form e li inoltra sulla casella postale da te specificata, con il vantaggio di inviar ti tutti i dati oppotunamente ordinati e senza obbligare chi compila il modulo a dover inserire la propria e-mail. Vedi ora qualche esempio pratico per chiarirti le idee analizzando prima la raccolta dei dati attraverso la tua mail e in un secondo momento per mezzo del server CGI. In entrambi i casi dovrai fare uso dei due attributi spiegati all’inizio e cioè: Method e Action.
POSTA ELETTRONICA
<form method=”post” action=”mailto : [email protected]” enctype=”text,/plain” name=”mio_form”>
Tuo nome! <input type=”Text” name=”tuo nome”>
giudizio: <input type=”Text” name=”giudizio”>
<input type=”Submit” value=”invia”>
</form>
Facendo uso di una tabella con border=0 è stato possibile dare al form un aspetto molto più ordinato e professionale. Se vuoi provare il codice inserisci il tuo indirizzo e-mail nel codice e ti sarà recapitato in mail-box, in questo formato:
tuo nome=dati inseriti
giudizio=dati inseriti
Se questo sistema ti soddisfa non ti resta che crearti tutti i moduli che vuoi e farteli spedire. E’ possibile aggiungere anche il titolo o subject alla mail che ti consegnerà i dati del modulo; notate l’aggiunta di ?subject all’elemento form:
<form method=”post” action=”mailto:[email protected]?subject=dal sito MERAVIGLIE ti mando i saluti ” enctype=”text/playn” name=”mio_forum”>
Tuo nome: <input type=”Text” name=”tuo nome”>
giudizio: <input type=”Text” name=”tuo giudizio”>
<input type=”Submit” value=”invia”>
</form>
SERVER CGI
Per questo sistema la struttura resta la stessa, ma al posto di:
action=”mailto:[email protected]”
adopererai un indirizzo di CGI valido.
PRO E CONTRO
Il server CGI o script in php asp è di sicuro il sistema migliore, poichè permette l’invio del modulo anche da parte di chi non ha una casella postale o da chi, molto più semplice, non vuole farne uso per non renderla pubblica. Questo sistema provvede all’ordinamento e alla sua formattazione dei dati prima di recapitarli all’indirizzo e-mail. Gli script offrono controlli sui dati introdotti e inviano anche diverse informazioni quali: l’ora, il giorno, l’URL del mittente. L’uso della propria casella postale permettono di ricevere i moduli soltanto se chi li invia è disposto ad ad adoperare il proprio indirizzo di posta elettronica, è infatti grazie a questo che il modulo potrà essere spedito e di conseguenza recapitato. I dati sono meno ordinati ma comunque leggibili.
AUDIO SCRIPT APPLET
Se hai imparato il meccanismo per inserire e far funzionare i tag HTML e come usare i loro attributi e relativi parametri, sei praticamente in grado di inserire qualsiasi altro tag. Ti basta sapere che esiste e quali sono i suoi attributi. A mano a mano che proseguirai nel tuo percorso di conoscenza dell’HTML, imparerai a conoscerne altri, via via più specializzati. Per concludere, vedrai un paio di esempi di questo tipo, utili per inserire un sottofondo musicale e per utilizzare molti script che la Rete mette a disposizione gratuitamente.
AUDIO E MUSICA
Un brano musicale può essere introdotto in una pagina web facendoo uso dell’elemento object. Vedi subito la sintassi:
<object type=”audio/x-mid” data=”nome_file.mid”>
<param name=”src” value=”nome_file.mid”>
<param name=”autostart” value=”false”>
<param name=”loop” value=”true”>
</object>
Se non vedi nulla è perchè sul tuo browser non è stato installato alcun plug-in per riprodurre il file di tipo MIDI. Ecco perchè, nonstante il W3C ne sconsiglio l’utilizzo, molti continuano a usare l’elemento embed:
<embed src=”nome_file.mid” width=”145″ height=”35″ autostart=”false” loop=”true”>
In entrambi gli esempi, per nome:file.mid si intende il nome del brano MIDI da riprodurre, mentre autostar= true o false consente di avviare il brano automaticamente o manualmente, e loop= true o false per rpeterlo all’infinito o una sola volta. Width e Height servono per visualizzare l’interfaccia grafica. Se adoperi, ad esempio, il multimedia player di Windows, vedrai in questo esempio una porzione di dimensioni 145×45 pixel. Nell’esempio ho inserito false come attributo di “autostart”, quindi nell’ascoltare la musica dovrai premere sul pulsante play dell’interfaccia grafica. Con True si sarebbe avviata automaticamente. Infine, la scelta di inserire un brano di tipo midi e non uno di tipo MP3 o WAV, si deve al fatto che i file MIDI sono i più “leggeri” e non costringono il visitatore a lunghe ed estenuanti attese. Il brano musicale smette di funzionare nel momento in cui si scambia pagina, da qui la necessità di avere una struttura a frame nel caso in cui volessi una musica di sottofondo che accompagni il visitatore durante tutta la navigazione.
SCRIPTING
Il linguaggio HTML da solo ha dei limiti, visto che era stato concepito soltanto per pubblicare documenti statici. Per fortuna però questi limiti sono facilmente superabili grazie all’integrazione di linguaggio di scripting. Il migliore è senza dubbio JavaScript, non fosse altro perchè è compatibile con tutti i browser di navigazione, e senza fare uso del server in cui si trova la pagina web che lo sfrutta. In Rete se ne trovano in gran numero e per ogni esigenza: una volta quello che fa al caso tuo l’unca cosa che devi fare è seguire alla lettera le istruzioni riportate all’interno di ogni script facendo attenzione a non omettere niente, neppure una sola virgola del codice fornito, compresi i ritorni a capo e le spaziature, pena il mancato funzionamento dello script se non addirittura il blocco totale del tuo programma di navigazione. Di solito uno script è formato da una o più parti di codice, che devono essere posizionate fra gli elementi <head> </head> e/o <body> </body>.
Un esempio di scripting semplice è quello che ti permette di distinguere un link richiamando un messaggio in caso di clic.
<script language=”javascript” type=”text/javascript”>
< ! – –
function clic ()
{
alert (“hai fatto click sul link giusto.”);
}
// –>
</script>
Se invece volessi inserire un orologio all’interno della pagina web, le cose si complicherebbero un po’. Lo script in questione è infatti composto da tre parti di codice: una inserita fra i tags <head>, un’altra direttamente nel tag body, e una terza per visualizzare il risultato dello script, inserita nel punto preciso della pagina sulla quale visualizzare l’ora. Per prima cosa seleziona tutto il codice sottostante e copialo nella tua pagina web, in questo caso fra i tags: <head> e </head>. Oltre allo script, c’è anche una piccola dichiarazione di stile. Una volta inserita lo script nell’head della tua pagina web, lo si deve attivare con questo evento da inserire nel tag body:
<body onLoad=”StartClock24 ( ) “>
Adesso non rimane che richiamarlo facendo uso del codice sotto, da posizionare nel punto preciso che preferisci della tua pagina web, all’interno dei tags: <body> e </body>.
<form action=”numerico.altervista” name=”clock”><input type=”text” name=”showTíme” size=”8″ class=”input”></form>
Infine, nel caso in cui vuoicambiare il colore, il font e qualsiasi altra cosa, dovrai agire sulla dichiarazione di stile style che originariamente prevede un font verdana da 10 punti e di colore rosso.
APPLET
La stessa cosa detta per gli script vale anche per l’introduzione di applet. Ma cosa si intende esattamente con questa parola inglese? Si tratta sempre di codice Java, ma questa volta compilato e salvato in uno o più file di tipo CLASS. Sono file che di solito dovrebbero trovarsi sul server, nella stessa cartella dove c’è la pagina che li chiama. Le applet, a differenzadegli script, non si limitano a impartire istruzioni precise al browser, sono dei veri e propri programmi che lavorano in assoluta autonomia. Sulla Rete si trovano molte applet gratuite per gli usi più disparati, dai giochi alle utility, dalle applicazioni grafiche alle funzioni matematiche. Anche in questo caso sarà l’autore stesso a fornire le spiegazioni necessarie al suo inserimento, e più di ogni altra cosa come impostare i vari parametri per ottenere un corretto funzionamento.
PUBBLICARE IL SITO VIA FTP
In questa guida dovresti aver imparato tutto ciò che serve per creare un sito web. Adesso non resta che renderlo pubblico, in modo che chiunque possa vederlo: per farlo dovrai trasferirlo su uno spazio web in Rete. Se non hai un tuo spazio web puoi acquistarlo direttamente da uno dei numerosi provider italiani. Di solito insieme allo spazio viene registrato anche il nome del dominio. In ogni caso, se hai già uno spazio web, e/o decidi per uno gratuito, la procedura non cambia: o si accede tramite un pannello di controllo proprietario, oppure serve un client FTP come Filezilla e i dati di accesso al tuo server FTP File Transfer Protocol: Per realizzare un sito “Gratuito” come il mio vai su AlterVista https://it.altervista.org/
Guida FileZilla e scarica il programma.
nome del server FTP
User ID
Password
Il primo, nome del server FTP, lo decide chi ti offre lo sapzio, a volte preceduto dalla sigla FTP. La user ID invece viene decisa dall’utente in fase di registrazione: se registri il tuo spazio web col nome pippo, molto probailmente pippo corrisponderà anche alla user ID. In tutti i casi si tratta di un dato personale che varia a seconda delle tue scelte. Lo stesso discorso vale per la password, che a volte è generata casualmente dal server in fase di registrazione, ma che si può sempre personalizzare in un secondo momento.
Se sei in possesso di questi tre dati, non resta che inserirlinel tuo client FTP e, una volta connessi, puoi cominciare a trasferire i file che compongono il tuo sito dal disco fisso del tuo PC a quello del server. Se hai creato delle cartelle, dovrai fare in modo di trasferire anche quelle. Ci snon programmi che lo fanno in automatico nel momento in cui copiate la cartella stessa, altri invece hanno una voce: MAKEDIR o MKDIR, che serve per creare una nuova cartella.
Attenzione ai nomi dei file e delle cartelle, dovranno essere perfettamente uguali a quelli che hai nel tuo PC: maiuscole, minuscole, spazi vuoti, tutto. I sistemi Unix, Linux, quelli che di solito fanno unzionare tutta la Rete, sono molto sensibili a queste differenze, anche le più impercettibili, da qui il termine “case sensitive”. Se non hai molta esperienza in fatto di file, cartelle e relativi percorsi, il consiglio è di non complicarti la vita e di creare un’unica cartella. Infine, se in futuro farai modifiche sui file dei tuoi PC per aggiornare il sito, non preoccuparti di cancellare o modificare il file online: questi saranno sovrascritti automaticamente nel momento in cui invierai i nuovi file, poichè per funzionare dovranno avere lo stesso nome di quelli da aggiornare.
Ultimi Commenti