Crea il tuo sito web partendo da zero - parte 03 - Primo HTML di esempio

Questo articolo fa parte di una serie che parla di come creare un sito web partendo da zero. Se non hai letto i precedenti ti invitiamo a farlo.

Alcune cose nel corso del tempo potranno essere aggiornate, modificate o cancellate perché il web è un mondo in continuo mutamento e, ovviamente, potrebbe capitare anche di sistemare qualche erroruccio.

PREREQUISITI e MATERIALE per questa parte:

• avere il materiale prodotto dalla parte 01 e 02
• Avere un elaboratore testi installato sul pc (va benissimo blocco note - note pad)
• Avere un browser installato sul computer

E' giunto il momento di realizzare il nostro primo file HTML.

Prima però volevo solo spiegare a grandi linee come funzionano i siti internet. Ecco i principali passaggi (semplificati al massimo).

• Un utente apre il suo browser (il programma per visualizzare i siti internet)
• L'utente digita un indirizzo nella barra degli indirizzi (per esempio www.abcwebegrafica.altervista.org)
• Il browser "chiama" questo indirizzo fino a che trova il server dove è salvato il sito
• Il sito è in formato HTML, il quale viene interpretato dal browser
• Il sito viene visualizzato dall'utente tramite il browser.

Molti inorridirebbero da questa spiegazione da quanto è imprecisa ma era solo per far capire che ha tantissima importanza il browser.

I browser riescono a visualizzare solamente alcuni tipi di file. Fra questi vi sono le immagini web (JPG, GIF, PNG) e l'HTML.

E' per questo motivo che i siti vengono realizzati utilizzando questo linguaggio.

L'HTML sono delle scritte che vengono poi interpretate dal broswer che mostra il risultato "tradotto".

Ora passiamo alle cose pratiche che vi renderanno il tutto molto più chiaro.

Prima di cominciare verificate che sul vostro PC siano visibili tutte le estensioni dei file. (Se non le visualizzate andate su impostazioni, pannello di controllo, opzioni cartella e nella sezione visualizzazione dovete togliere la spunta da "Nascondi le estensioni per i tipi di file conosciuti". Chiudete tutto, se avete fatto questi passaggi correttamente ora dovreste vedere le estensioni dei file.)

Create una cartella in una posizione che per voi sia facile da raggiungere. Per esempio sul Desktop. Io la chiamerò "sito" ma non è importante il nome che le date.

Aprite il vostro editor di testi (io utilizzerò blocco note).

Scrivete le seguenti cose (poi verranno spiegate in dettaglio). Consiglio di scriverle e di non copiare e incollare in modo che vi entrino in testa.

‹ html ›
    ‹ head ›
    ‹ /head ›

    ‹ body ›
    ‹ /body ›
‹ /html ›

Otterrete una cosa come in questo esempio (si apre in un altra finestra).

Soffermiamoci un attimo su quello che abbiamo appena fatto.

Le cose che abbiamo scritto (cioè ‹ html › ‹ head › ‹ body › ) si chiamano TAG.

Ogni tag ha il suo preciso significato.

• ‹ html › : indica che stiamo scrivendo un file html
• ‹ head › : indica una parte dell'html dove andranno inseriti dei "parametri" utili ma non visibili all'utente
• ‹ body › : indica la parte vera e propria in cui inseriremo le cose che dovrà vedere l'utente.

Ne esistono moltissimi altri che vedremo un po' alla volta.

In generale (esistono delle eccezioni) ogni tag ha anche la sua chiusura. I tag si chiudono riscrivendo lo stesso tag e poi aggiungendo una barra appena prima del nome (per esempio ‹ /body ›).

Con un po' di pratica potrete presto capire che il tag ‹ html › contiene i tag ‹ head › e ‹ body › in quanto la sua chiusura è dopo head e body.

E' molto importante mantenere i rientri come li ho segnati io. Li potete fare comodamente utilizzando il tasto tab. Servono per mantenere ordine (ora sono solamente poche righe di codice, ma quando sarà una pagina intera sarebbe impensabile metterci mano senza le tabulazioni)

Salvate il file nella cartella creata prima con il nome index e l'estensione html.

Questo è un passaggio fondamentale, il vostro file dovrà avere l'estensione html e NON txt.

Ora vedrete che l'icona del file appena creato sarà quella del vostro browser predefinito.

Se ci cliccate sopra due volte vi si aprirà il browser e vedrete solo una pagina bianca.

Vi parrà strano ma avete appena creato il vostro primo file html. E' ancora vuoto e per questo rimediamo fra un attimo.

Forse ora sembra tutto nebuloso ma andando avanti diverrà più chiaro.

Inseriamo ora all'interno del body (cioè fra ‹ body › e ‹ /body ›) una frase qualsiasi.

Ecco un esempio (si apre in un altra finestra).

Salvate e ora cliccate di nuovo sull'icona di index.html.

Vi si aprirà il browser e potrete leggere ciò che avete appena scritto in alto a sinistra. Vedi esempio (si apre in un altra finestra).

Questa parte termina qui.

Nella prossima verranno spiegati dei nuovi tag.

Vai alla parte 4 - Tag h1, h2, h3, h4, h5, h6