Creazione di pagine Web di base

Questa pagina ha lo scopo di istruire il principiante HTML completo su questi argomenti:

Cos'è una pagina Web?
Come funziona una pagina Web?
Come posso creare una semplice pagina Web?
Come trasferisco la mia pagina dal mio computer a Internet?

Nei miei molti anni di esperienza nell'istruire i principianti nella progettazione di pagine Web, ho capito che questi sono i problemi principali. Prometto di renderlo il più semplice e indolore umanamente possibile.

? Cos'è una pagina Web?

! Una pagina Web è un file di computer di testo semplice leggibile dall'uomo che contiene parole e alcune istruzioni speciali su come dovrebbero apparire le parole. Queste istruzioni sono chiamate "tag". Una pagina Web può anche contenere riferimenti ad altre pagine Web, immagini grafiche, suoni e così via. Tali riferimenti sono chiamati "collegamenti".

? Come funziona una pagina Web?

!
Una pagina Web contiene la formattazione del testo e altre informazioni nei suoi tag. Il testo ei tag nella pagina Web vengono interpretati da un programma chiamato "browser Web".
Ecco come appare una pagina Web in un editor Web come Arachnophilia come testo normale e come appare su un browser:
Editor web (testo normale)
<html>
   <head>
      <title>
         This is my page!
      </title>
   </head>
   <body>
      <h2>
         Welcome to my web page!
      </h2>
      By using HTML tags I can make my text 
      <i>
         italic,
      </i>
      or 
      <b>
         bold,
      </b>
      or 
      <u>
         underlined.
      </u>
   </body>
</html>
Browser: Questa è la mia pagina!

Benvenuti nella mia pagina web!
Utilizzando i tag HTML posso creare il mio testo corsivo, O grassetto, O sottolineato.
Nota i <tag> sopra:

Il tag "<b>" significa "Inizia a stampare il testo in grassetto."

Il tag "</b>" significa "Okay, puoi smetterla di fare quella cosa audace che ho detto prima."

Un <tag> iniziale e un </tag> finale controllano cosa c'è tra di loro. Come in questo esempio, quasi tutti i tag sono in coppia (ma, sfortunatamente, non tutti).
Un tipo molto importante di tag è chiamato "link". I collegamenti sono il motivo per cui le pagine HTML non sono solo un altro tipo di documento di elaborazione testi, con testo in stile. Tra le altre cose, i collegamenti consentono a chi visualizza la pagina di spostarsi:

In un'altra parte della pagina corrente (come fanno i collegamenti nella parte superiore di questa pagina),

In un'altra pagina del tuo sito,

In un'altra posizione su Internet.

Ecco come appare un collegamento in testo normale e quando viene visualizzato in un browser:
Editor web (testo normale)
<a href="http://www.arachnoid.com/arachnophilia">
	Go to the Arachnophilia Home Page
</a> 
Navigatore

Vai alla home page di Arachnophilia
La visualizzazione del browser a destra contiene la versione visualizzata del collegamento e, se fai clic su di esso (e se sei connesso a Internet), andrai alla home page di Arachnophilia.
Si noti che ci sono due parti in un collegamento:

L'indirizzo Internet effettivo: "http://www.arachnoid.com/arachnophilia".

Un'etichetta leggibile dall'uomo che indica l'indirizzo: "Vai alla home page di Arachnophilia".

Per funzionare come previsto e soddisfare le aspettative delle persone, i tuoi link dovrebbero sempre avere entrambe le parti.

? Come posso creare una semplice pagina Web?

!
È facile, davvero! Ecco i passaggi:

Crea un nuovo documento HTML,

Digita del testo nella pagina,

Salva la tua nuova pagina,

Anteprima della pagina.

* Per prima cosa, crea un nuovo documento HTML. Esegui Arachnophilia e scegli File ... Nuovo ... File HTML. Come questo:

Ti verrà chiesto di fornire un titolo per la tua pagina. Il titolo è molto importante: appare sulla barra del titolo del browser ed è piuttosto evidente per i tuoi visitatori. Puoi sempre cambiare il titolo in seguito.
Ora vedrai qualcosa di più o meno simile a questo:
Redattore web
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 
  3 
  4 
  5 <html>
  6    <head>
  7       <title>
  8          My page!
  9       </title>
 10       <meta name="GENERATOR" content="Arachnophilia 5.0"/>
 11       <meta name="FORMATTER" content="Arachnophilia 5.0"/>
 12    </head>
 13 
 14    <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
 15 
 16       |
 17 
 18    </body>
 19 </html>
 20 
La linea verticale rossa (" | ") è chiamato "cursore" o "accento circonflesso". I due termini sono usati in modo intercambiabile. Se hai già imparato a usare un elaboratore di testi, saprai cosa significa questo termine. Ma se non l'hai fatto, il cursore è il punto di azione in un programma di videoscrittura: è dove accadono le cose Quando vuoi mettere alcune parole in un posto particolare, prima metti il cursore lì, poi digiti.
* Ora digita qualcosa:
Redattore web
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 
  3 
  4 
  5 <html>
  6    <head>
  7       <title>
  8          My page!
  9       </title>
 10       <meta name="GENERATOR" content="Arachnophilia 5.0"/>
 11       <meta name="FORMATTER" content="Arachnophilia 5.0"/>
 12    </head>
 13 
 14    <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
 15 
 16       This is my personal Web page!|
 17 
 18    </body>
 19 </html>
 20 
Ok, non è Shakespeare, ma questa è solo una prova della realtà, non la realtà stessa. :)
* Passaggio successivo: salva la tua pagina.

Una digressione: niente è più frustrante che perdere documenti informatici sui quali si sono magari spese ore. Salva sempre i tuoi documenti e sai sempre dove sono stati salvati i tuoi documenti. Non limitarti a premere "Salva" una volta ogni tanto senza pensare a dove è archiviato il documento. Sii proattivo: scegli (crea) una directory per il tuo sito Web e inserisci tutti i componenti lì.
Lo sottolineo perché nel corso degli anni ho ricevuto un numero qualsiasi di e-mail da persone altrimenti intelligenti che lasciano la stanza, accarezzano il gatto, tornano e poi semplicemente non riescono a capire cosa sia successo alla loro opera magnum.
Scegli File ... Salva con nome. Apparirà una finestra di dialogo Esplora file. Scegli una directory e un nome file appropriati.
* Ora diamo un'occhiata alla tua pagina su un browser web.
I personal computer più recenti sono dotati di almeno un browser. In questo passaggio (e supponendo che tu non l'abbia già fatto), aiuterai Arachnophilia a trovare un browser.
Per avviare il processo, premi questo pulsante della barra degli strumenti: oppure premi Ctrl-P. Dopo un messaggio esplicativo, vedrai questa finestra di dialogo:

Innanzitutto, se il percorso di ricerca predefinito non sembra corretto per il tuo sistema, scegline uno appropriato, digitandolo o utilizzando il pulsante "Sfoglia". Sui sistemi Windows, la maggior parte dei browser si trova in una directory denominata "/Program Files". Sui sistemi Linux di recente annata, sarà "/usr/bin". Gli utenti Macintosh probabilmente vedranno l'impostazione predefinita "/Applications". Molto probabilmente una di queste alternative apparirà automaticamente in base al tuo sistema operativo. Dopo aver scelto un percorso di ricerca appropriato, premere "Cerca". Il motore di ricerca del browser cercherà uno qualsiasi dei nomi di browser elencati a sinistra (e puoi aggiungerli all'elenco).
Con un po' di fortuna, uno o più percorsi del browser appariranno nell'elenco a destra. Per trasferire i risultati nell'elenco del tuo browser personale, premi "Trasferisci", quindi "OK". Quindi, per visualizzare la tua pagina, premi il pulsante di anteprima ( ) o di nuovo Ctrl-P.

Se tutte queste funzionalità non riescono a individuare il tuo browser, puoi semplicemente digitare il nome del browser e il percorso del suo eseguibile nella parte inferiore della finestra di dialogo del browser, quindi premere "OK".

? Come trasferisco la mia pagina dal mio computer a Internet?

! Sfortunatamente per i costruttori di pagine Web principianti, questa è la parte più complessa per iniziare.
Se hai un amico con più esperienza Web, potresti voler chiedere aiuto a questo punto.
Il modo normale per portare la tua pagina dal tuo computer a Internet è usare un protocollo di trasferimento file chiamato (sorpresa!) File transfer Protocol (FTP). Arachnophilia ha un servizio FTP integrato per aiutarti a farlo.
Prima di utilizzare il servizio FTP, è necessario disporre di alcune informazioni, informazioni che il tuo provider di servizi Internet dovrebbe averti fornito:

Il nome del server FTP.

Il tuo nome utente di accesso.

La tua password di accesso.

Il percorso della tua directory.

Come primo passo, individuare queste informazioni e tenerle a disposizione.
Successivamente, assicurati che la tua nuova pagina sia ancora visualizzata nella finestra dell'editor Web di Arachnophilia. Quindi scegli la voce di menu HTML ... Esegui il servizio FTP o premi Alt-F. Vedrai qualcosa del genere:

Ecco i passi da fare:

Per "Nome sito", digita qualcosa che ricorderai facilmente. Questo non è un nome speciale, è solo una comoda etichetta.

In "Nome server", digita il nome del server FTP fornito dal tuo servizio Internet.

Per "Nome utente", digita il nome di accesso fornito dal tuo servizio.

In "Password", digita la password che ti è stata data. Hai la possibilità di salvare la password in modo da non doverla digitare ogni volta che utilizzi il servizio FTP. Ma questo comporta un piccolo rischio: una persona esperta di computer, un hacker, potrebbe, in linea di principio, acquisire e decrittografare la tua password se avesse ottenuto l'accesso al tuo computer. Decidi tu.

Per "Directory remota", digita queste informazioni se sono state fornite dal tuo servizio.

NOTA: la maggior parte dei percorsi delle directory FTP remote deve iniziare con un prefisso, come "/" o "~/". Se si omette questo prefisso, la transazione FTP potrebbe non funzionare come previsto. Se non sei sicuro di questo problema, assicurati di includere un prefisso, come questo: "/myPages". Alcuni servizi richiedono "~/", un esempio potrebbe essere "~/html". Se non sai quale utilizzare o non sei sicuro di quale percorso di directory inserire, chiedi al tuo ISP.

Per "Directory locale" e se la tua pagina Web è ancora caricata in Arachnophilia, premi semplicemente il pulsante a destra: "Usa corrente". Questo è un modo semplice per dire al servizio FTP dove si trova la tua pagina nel computer locale.

Dopo aver inserito queste informazioni, puoi testare la connessione:

Assicurati di aver effettuato l'accesso a Internet.

Premi il pulsante "Prova".

Il servizio FTP contatterà il tuo servizio Internet, eseguirà la scansione della directory locale fornita e ti riporterà cosa caricherebbe se fosse stato premuto "Esegui".

Con un po' di fortuna, le prove si svolgeranno senza intoppi. In caso di problemi, sposta semplicemente il cursore "Livello" verso destra (per visualizzare più informazioni) e premi nuovamente "Prova" per vedere qual è il problema. Potresti aver digitato il nome del sito, il nome utente o la password in modo errato - ricorda, il caso di queste voci è significativo.
Dopo aver eseguito con successo le prove, premi "Esegui". Nella maggior parte dei casi, "Esegui" caricherà la tua pagina web. Utilizzare la procedura di risoluzione dei problemi sopra descritta in caso di problemi.
Ora puoi usare il tuo browser per visualizzare la versione online della tua pagina.
Alcuni dettagli aggiuntivi del servizio FTP:

Il servizio FTP utilizza un file di registro locale per tenere traccia di quali file sono stati caricati.

Quando modifichi una pagina e la salvi, la data di modifica cambia. Se esegui un caricamento FTP, il programma confronterà la data del file con la voce del file di registro. Se la data di un file è più recente della voce di registro, verrà caricato e la voce del file di registro verrà modificata.

Per evitare che tutti i tuoi file vengano caricati di nuovo, basta premere "SyncLog". Ciò sincronizza il file di registro locale con le date effettive di modifica del file, ma senza caricare nulla.

Al contrario, per caricare tutti i file indipendentemente dalle loro date, scegli "carica tutto", quindi "Esegui". Questo forza un caricamento completo.

Se sai di voler caricare solo pochi file o solo uno, ma non sei sicuro dello stato del file di registro, utilizza questa procedura:

Premi "SyncLog". Questo aggiorna il file di registro senza caricare nulla.

Carica, modifica e salva solo i file che desideri modificare (questo modifica le date di modifica).

Premi "Esegui". Verranno caricati solo i file modificati.

Per istruzioni FTP più avanzate, fai clic qui.

Suggerimenti generali per siti Web:

Informazioni sulla tua pagina:

Conserva sempre una copia locale della tua pagina. Non dare mai per scontato che, poiché esiste una copia sulla macchina del tuo provider, puoi eliminare la tua copia locale. I fornitori di servizi Internet perdono regolarmente macchine e dati degli utenti.

Se riscontri problemi durante il caricamento della tua pagina, ripeti i passaggi.

Hai digitato tutte le informazioni esattamente come appaiono come fornite dal tuo servizio?

Eri connesso a Internet?

La tua pagina è stata caricata in Arachnophilia per consentire al pulsante "Usa corrente" del servizio FTP di individuarla?

Se ancora non riesci a caricare la tua pagina, chiedi aiuto a un amico o contatta il tuo fornitore di servizi.

Informazioni sul design generale della pagina Web:

Un numero qualsiasi di riviste e libri trattano questo argomento: visita una libreria o una biblioteca.

Ci sono risorse online di tutti i tipi per aiutarti a imparare a scrivere pagine web.

Se vedi una pagina che fa qualcosa che vuoi che faccia la tua pagina, guarda semplicemente la versione in testo normale della pagina:

In Microsoft Internet Explorer, scegli la voce di menu "Visualizza ... Sorgente".

In Netscape, scegli la voce di menu "Visualizza ... Sorgente pagina."

Osserva i tag della pagina. Puoi imparare molto in questo modo.

Se non conosci i motori di ricerca, faresti bene a informarti su questo potente strumento Internet. Visita www.google.com per un esempio di motore di ricerca. Digita "HTML tutor" per sapere quanto può essere utile un motore di ricerca.