1. Creare Il Tuo Primo Documento HTML

Obiettivi

Dopo questa lezione sarai in grado di:

Lezione

Ora che sai cos'e' l'HTML, cominciamo ad usarlo, no?

(Piccolo quiz -- cosa significa questa sigla?).

Cosa sono i tag HTML?

Quando un web browser visualizza una pagina come quella che stai leggendo ora, la legge da un file di solo testo, e va alla ricerca di codici speciali o "tags" che sono contrassegnati dai segni < e >. Il formato generale per un tag HTML e': 

     <nome_tag>stringa di testo</nome_tag>

Per esempio, il titolo per questa lezione usa un tag header: 

     <h3>Cosa sono i tag HTML?</h3>

Questo tag comunica al web browser di visualizzare il testo Cosa sono i tag HTML? nello stile di intestazione di livello 3 (su queste cose ne impareremo di piu' andando avanti). I tag HTML possono dire al web browser di rendere il testo in grassetto, in corsivo, trasformarlo in un'intestazione, o farlo diventare un link ipertestuale ad un'altra pagina web. E' importante notare che il tag di chiusura, 

    </nome_tag>

contiene il carattere "/" slash. Questa "/" barretta indica al web browser dove deve termina il testo contrassegnato dal tag aperto in precedenza. Molti tag HTML sono accoppiati in questo modo. Se ti dimentichi la barretta, il web browser continuera' a considerare il tag valido per tutta la restante parte del tuo documento, dando risultati indesiderati (come in un esperimento che potresti provare a realizzare piu' tardi).

NOTA: Un web browser non fa caso al fatto che tu possa usare maiuscole o minuscole. Per esempio, <h3>...</h3> non e' reso diverso da <H3>...</H3>

Diversamente dalla programmazione informatica, se fai un errore tipografico in HTML, non ci sara' una distruzione del programma od un crash nel sistema; semplicemente, la tua pagina web sembrera'... sbagliata. E' facile e veloce ritornare al codice HTML ed apportare le giuste modifiche.

Il tuo browser ha un vocabolario piccolo ma aperto! Un aspetto interessante dell'HTML e' che se il browser non riesce a capire come si deve comportare con il tag dato, lo ignora! Per esempio, nel documento che stai osservando, il tag d'intestazione di questa sezione assomiglia veramente a questa: 

    <wiggle><h3>What are HTML tags?</h3></wiggle>

ma dato che il tuo programma probabilmente non supporta questo <wiggle> tag (noi l'abbiamo creato, forse in futuro fara' in modo che il testo ondeggi lungo lo schermo?), esso procede con le sue conoscenze. Se stessi programmando un nuovo web browser, potrei decidere di aggiungere le funzionalita' per il tag <wiggle> nel mio software.

Aprire Il Tuo Workspace

Per completare le lezioni di questo corso, dovresti creare una seconda finestra web (questo ti permette di tenere a portata di mano questa finestra con le istruzioni e la lezione ed una finestra come "spazio di lavoro" ), piu' aprire un'applicazione del tuo editor di testo in una terza finestra.

NOTA: Questo e' un buon punto per ricordarti che ti forniremo direttive che sono comunque generali come il nome dei menu e dei file, che potrebbero variare in base al browser che stai usando. Se le nostre istruzioni dicono "Seleziona Apri... dal Menu File" ed il tuo web browser non ha questa esatta possibilita', cerca di trovare l'equivalente piu' simile.

Cosi' potrai essere in grado di saltare comfortevolmente da una finestra ad un'altra applicazione diversa sul tuo computer. Un'altra opzione e' quella di stampare le istruzioni della lezione (ma noi non abbiamo intenzione di promuovere troppo quest'esagerato sfruttamento delle piante).

Ecco qui i passaggi necessari alla creazione di un "workspace":

  1. Dal menu File del tuo web browser, seleziona Nuovo/Finestra o Nuovo Web Browser (Il nome esatto del comando da menu potrebbe essere diverso in base a quale tipo di programma di stia usando). Una seconda web window dovrebbe apparire. Pensa alla prima finestra come se fosse il tuo "libro di testo" ed al secondo clone come al tuo "workspace" per completare le lezioni di HTML.
    2. NOTA: L'unica ragione per lavorare con due finestre e' che cosi' facendo puoi leggere le istruzioni per le lezioni e vedere al contempo il documento che stai creando. Non e' obbligatorio avere le due finestre aperte; rende solo il lavoro piu' semplice. Puoi anche mettere un segnalibro a questa pagina web o saltare indietro fino a qui attraverso il menu Vai a.. o Cronologia.
  2. Successivamente, avrai bisogno di saltare fuori dal tuo web browser ed aprire il tuo programma di text editor.
NOTA: Avrai necessita' di saltare indietro ed avanti tra finestre diverse per completare queste lezioni. Questa potrebbe essere una difficolta', in base alle dimensioni del tuo monitor. Potresti scegliere di ridimensionare le tre finestre in modo che si adattino al tuo schermo o farne una pila in modo che all'occorrenza tu possa portarle in primo piano semplicemente con un click.
Se stai usando un programma di word processor per creare il tuo codice HTML, assicurati di salvarlo in formato solo testo (od ASCII).

Se sei proprio un principiante ti raccomandiamo CALDAMENTE di usare l'editor di testo piu' semplice disponibile-- SimpleText o TeachText per gli utenti Macintosh od il NotePad di Windows. Perche' non usare questi comodi editor HTML? Sembra un approccio istruttivo che tu prima debba imparare i concetti e POI cercare le scorciatoie o gli aiuti che rendono piu' facile la vita ed il lavoro meno tedioso.

Ancora, ti sara' d'aiuto la creazione di una nuova directory/folder sul computer da usare come area di lavoro. La potresti chiamare workarea o myspace o in qualsiasi altro modo; solo assicurati di conservare tutti tuoi file creati in questo unico spazio. Ti semplifichera' la vita... almeno mentre lavori a questo tutorial!

Creare I Tuoi Documenti HTML

Un documento HTML contiene due parti distinte, il corpo e la testa. L'Head e' la parte che contiene informazioni riguardo il documento che non sono visualizzate sullo schermo. Il body, invece, e' costituito da tutto quello che e' visualizzato come parte della pagina.

La struttura di base allora di ogni pagina HTML e': 

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
  <html>
  <head>
  <!-- informazioni d'intestazione usate per fornire      

      notizie extra riguardo questo documento,         

      non visualizzate sulla pagina
   -->
  </head>

  <body>
  
  <!-- tutto l'HTML da visualizzare -->
          :      :
          :      :
          :      :
  </body>
  </html>

La primissima linea: 

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Non e' tecnicamente richiesta, ma e' un codice che informa il browser per quale versione di HTML e' stata scritta la pagina corrente. Racchiudi tutto il lavoro in HTML nei tag <html>...</html>. Dentro, per primo viene il tag <head>...</head> e poi <body>...</body>. La tua web page puo' apparire gradevole sulla maggior parte dei computer senza nessuno di questi tag. In ogni caso, usandoli, le tue web page saranno in perfetto accordo con gli standard HTML Internazionali ed assicurati per la compatibilita' con i browser del prossimo futuro.

E' una buona abitudine, come quella di lavarti i denti :o).

Nota anche i tag di commento racchiusi da <!-- blah blah blah -->. Il testo contenuto tra questi tag NON viene visualizzato nella tua pagina web ma e' per informazioni che potrebbero essere utili a te o a qualsiasi altra persona che voglia guardare a fondo il tuo codice sorgente HTML. Quando le tue pagine diventano complesse (come ti renderai conto quando ci avventureremo tra tabelle, frame, ed altre cosuccie divertenti, tra non meno di 20 lezioni!), i commenti diventeranno utilissimi nel momento in cui avrai bisogno di migliorare pagine create un sacco di tempo fa.

Questi sono i passi da compiere per creare il tuo primo file HTML. Sei pronto?

  1. Se non l'hai ancora fatto, lancia il tuo programma di text editor.
  2. Entra nella finestra del text editor.
  3. Digita il seguente testo (NON devi schiacciare INVIO alla fine di ciascuna linea, ci pensera' il browser a dispiegare il testo e ad adattarlo): 
    4.      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
     <html>
     <head>
     <title>La mia prima pagina</title>
     </head>
     <!--    prova di pagina    -->
     <body>
     In questa lezione userai la Rete per cercare
    
     informazioni  e poi scrivere il tuo
    
     resoconto sui risultati.
     </body>
     </html>
    NOTA: Guarda dove e' posizionato il tag <title>...</title>. E' nella parte contrassegnata da <head>...</head> e quindi non e' visibile sullo schermo. A cosa serve allora? Il tag <title> e' usato unicamente per identificare ogni documento ed e' anche visualizzato sulla barra degli strumenti del browser.
    Nota anche che abbiamo inserito un tag di commento. Puoi scriverci quello che piu' ti pare tra i tags di commento, ma il tutto sara' visibile solo se si guarda nel sorgente HTML della pagina web.
  4. Salva il documento come "prima.html" e conservalo nella folder/directory che fa da area di lavoro e che hai definito per questo corso. In piu', se stai usando un programma di word processor per creare il tuo codice HTML, assicurati di salvare come formato solo testo (o ASCII).
NOTA: Per gli utenti di Windows 3.1, si deve salvare tutti i codici HTML con nomi che terminino con l'estensione .HTM, ed in questo caso il tuo file sara' prima.HTM. Non preoccuparti!! Il tuo web browser e' abbastanza furbo da capire che i file con estensione .HTM sono file HTML.

Usando queste estensioni, un web browser sapra' come leggere questi file di testo come HTML e visualizzare adeguatamente la web page.

Visualizzare I Tuoi Documenti In Un Web Browser

  1. Ritorna alla finestra web che stai usando per il tuo spazio di lavoro. (Se non hai ancora aperto una seconda finestra nel tuo browser, selezionaNuova/Finestra o Nuovo Browser dal menu File.)
  2. Seleziona Apri... da File.
  3. Usa la finestra di dialogo per trovare ed aprire il file che hai creato, "prima.html"
  4. Ora, dovresti vedere nella barra del titolo della finestra dello spazio di lavoro il testo "Volcano Web" e nella pagina sotto, la sola frase <body> che hai scritto, "In questa lezione..."

 

2. Modificare un Documento HTML

Ora che hai creato il tuo primo documento HTML, imparerai come apportare modifiche ai tuoi documenti velocissimamente e a vederne i risultati nel tuo web browser.

Obiettivi

Dopo questa lezione sarai in grado di:

Lezione

Riaprire Il Tuo Spazio Di Lavoro

Per completare questa lezione, hai bisogno di creare una seconda finestra nel tuo web browser e riaprire la finestra di text editor che hai usato nella prima lezione. Seguono i punti da eseguire per riaprire il tuo workspace (ricorda che il nome esatto dei comandi dei menu potrebbero variare in base al browser che stai usando):

  1. Crea una nuova finestra nel tuo web browser selezionando Nuovo/Finestra dal menu File .
  2. Usa il comando Apri... dal menu File per trovare ed aprire il file HTML che hai creato nella lezione precedente.
  3. Riapri il tuo programma di text editor.
  4. Nel text editor, apri il file ("prima.html") che hai creato nella lezione precedente.
NOTA: Se sei un utente Windows 3.1, il tuo file dovrebbe chiamarsi "prima.HTM".
Da questo momento in poi, noi assumiamo tu sappia facilmente riaprire il tuo workspace in questo modo.

Apportare Cambiamenti Nel Tuo Documento HTML

  1. Vai alla finestra del text editor.
  2. Sotto il testo che hai digitato nella lezione precedente, schiaccia INVIO alcune volte e inserisci un testo.
    3.

    Nota che questo testo dovrebbe essere sopra i tag </body> e </html> che sono in fondo al tuo file HTML.

  3. Seleziona Salva dal menu File per rendere effettive le modifiche apportate al tuo file.

Ricaricare Il Tuo Documento Nel Web Browser

Ritorna al tuo workspace nel web browser, dove la versione precedente del tuo file era visualizzata. Nota che il nuovo testo che hai aggiunto non e' visibile. Per vedere i cambiamenti, usa il bottone Aggiorna o l'opzione nel menu specifica del tuo web browser. Questo obbliga il programma a rilegge lo stesso file e a visualizzare qualsiasi cambiamento sia avvenuto. Ora puoi vedere il nuovo testo che hai inserito.

Nota che il web browser ignora tutte le linee vuote e gli spazi extra (i ritorni a capo) che hai digitato nel file. In ogni caso, quando scrivi codice HTML, e' di grande aiuto separare le principali sezioni con linee vuote.... quando hai bisogno di tornare indietro ed inserire testo, ti rende piu' facile la localizzazione della posizione corretta in cui apportare le modifiche.

Naturalmente, ci saranno occasioni in cui vorrai che la tua pagina web abbia spazi vuoti tra le sezioni (per esempio tra paragrafi). Nella quarta Lezione impareremo come farlo.

Drag and Drop Bonus!

Ci puo' essere un modo piu' semplice per caricare e vedere pagine HTML. Dovrai sistemare il desktop del tuo computer in modo che tu possa vedere del tuo file HTML vicina alla finestra del tuo web browser. Devi semplicemente fare click e trasportare l'icona del tuo file "prima.html" o "prima.htm" dentro alla finestra del tuo web browser. Voilà! la tua pagina sara' visualizzata se il tuo computer supporta il drag and drop (funziona con i Macintosh OS 7.5 e Windows 9x).

Verifica

Argomenti di verifica per questa lezione:

  1. Come hai riaperto il tuo workspace?
  2. Quali passi hai fatto per apportare modifiche al tuo documento HTML?
  3. Come hai visualizzato e visto questi cambiamenti nel tuo web browser?

Pratica Indipendente

Come hai fatto in questa lezione, modifica il tuo documento HTML personale che hai cominciato la scorsa lezione. Aggiungi poche frasi e vedi se riesci a ricaricare il documento modificato nel tuo web browser.

Prossimamente....

Ora che hai un'infarinatura di quelle che sono le tecniche di editing, aggiungeremo una sezione di intestazione grande e bella al tuo documento HTML.

 

3. Intestazioni: Sei Livelli Di approfondimento

Come puoi vedere in questa pagina, l'intestazione della sezione di questa pagina ("Intestazioni: Sei Livelli Di Approfondimento", "Obiettivi", "Lezioni", "Intestazioni HTML" ...) appare in dimensioni diverse e, forse, con colori e caratteri diversi. L'HTML fornisce tag per realizzare intestazioni a sei livelli decrescenti di significato. Il tuo browser determina l'esatto carattere tipografico e la grandezza giusta per la visualizzazione.

Obiettivi

Dopo questa lezione sarai in grado di:

Lezione

Intestazioni HTML

Le intestazioni sono realizzate in HTML "marcando" certi frammenti di testo con tag d'intestazione. Il formato per un tag d'intestazione HTML e': 

     <hN>Testo da Far Apparire nell'Intestazione</hN>

dove N e' un numero tra 1 e 6 per identificare le dimensioni dell'intestazione. Ecco alcuni esempi di diverse dimensioni d'intestazione:

sample web page

Intestazione Livello 1

Intestazione Livello 2

Intestazione Livello 3

Intestazione Livello 4

Intestazione Livello 5
Intestazione Livello 6

I livelli d'intestazione variano da un livello di 1 (massima importanza) al livello 6 (minima importanza). Come principio, i livelli delle tue intestazioni dovrebbero avere un ordine logico costante.

Posizionare Intestazioni Nei Tuoi Documenti HTML

  1. Riapri il tuo workspace (se non e' gia' aperto).
  2. Vai alla finestra del text editor.
  3. Apri il file HTML che hai creato nella lezione 2, "Volc.html".
  4. Prima useremo il tag per visualizzare il titolo come intestazione massima, <H1>. Digita cio' che segue sopra il testo gia' esistente e dopo i tag </head><body>: 
    5.           <h1>prima</h1>
  5. Sotto il testo che hai gia' digitato, crea altre intestazioni per la futura sezione della tua pagina Volcano Web.

    6. Digita le seguenti intestazioni nel body della tua web page (Nota che alcuni tag sono H3 ed altri sono H2): 

              <h2>Introduzione</h2>

          <h2>Glossario</h2>

          <h2>Luoghi Vulcanici negli USA</h2>

          <h3>Mount St Helens</h3>

          <h3>Long Valley</h3>

          <h2>Luoghi Vulcanici su Marte</h2>

          <h2>Progetti di Ricerca</h2>

          <h3>Riferimenti</h3>
  6. Salva le modifiche nel tuo text editor.
  7. Ritorna al tuo web browser, Apri ed Aggiorna il file HTML.
Nota che sul computer che stai usando ora, puoi utilizzate i settaggi del tuo web browser per definire i caratteri e/o le dimensioni delle intestazioni. Per esempio su un computer, puoi avere che un browser visualizza i tag h1 con font Times a 36 punti; tag h2 come font Helvetica a 24 punti, etc. I codici HTML definiscono solo che le intestazioni debbano essere di un certo tipo (h1 a h6); come viene effettivamente visualizzato e' controllato dall'utente del web browser.

Controlla il tuo lavoro

Se alcune delle tue intestazioni sembrano non essere corrette, assicurati di controllare che i tag di chiusura e di apertura siano dello stesso livello.

Come esercizio opzionale, dai un'occhiata a quello che succede quando commetti un errore tipografico. Apri il tuo documento HTML nell'editor di testo e cancella lo slash (/) nel tag <h1>, dopo l'intestazione Prima: 

          <h1>Prima<h1>

Salva i cambiamenti e ricarica nel tuo web browser. Senza la conclusione corretta del tag h1, il tuo web browser interpreta tutto il testo successivo come parte del titolo! Dopo aver provato, dovresti tornare al tuo documento e reinserire lo slash nello spazio giusto.

Verifica

  1. Quali sono i vari livelli d'intestazione in HTML?
  2. Quali sono i tag associati a questi vari livelli?
  3. Quali passaggi devi seguire per posizionare intestazioni nel tuo documento HTML?
  4. Cosa succede se ti dimentichi uno slash alla fine di un tag d'intestazione?