html51
corso html5, prima lezione
Roberto abutzu su uiciechi.it, 2013-01.

prima parte: introduzione e spiegazione del linguaggio HTML5 corretto.
Con questo mio scritto e per quanto mi è possibile, vorrei iniziare a parlare di html in modo 
semplice un pò per tutti.
Prenderò spunto dal corso pubblicato da Nunziante su Uiciechi.it andando a precisare i cambiamenti 
che sono avvenuti con l'ultima versione del linguaggio html, arrivato ormai alla versione 5.
Facciamo una premessa importante: Html 5  non è ancora uno standard definitivo e, quindi, qualcosa 
potrebbe cambiare con il tempo.
I browser, non supportano completamente Html 5, ma ormai manca davvero poco. Ciò premesso, tenetevi 
saldi, perché si parte ed iniziamo.
Il linguaggio Html, non può essere considerato un vero e proprio linguaggio di programmazione. 
Infatti, permette solo di scrivere delle stringhe che vengono poi interpretate dai Browser, dandoci 
come risultato le pagine, e tante pagine messe assieme, ci danno come risultato il sito.
Di cosa si compone un sito?
Pensate al sito, come una cartella con all'interno altri file e cartelle. I file, in questo caso 
con estensione .html sono tutte le pagine del sito che vengono colegate tra loro dai link.
Nelle cartelle ci mettiamo le immagini del sito, altri file e tutte le altre cose che poi vedremo.
Nello spazio Web che, come dicevo, dobbiamo paragonare ad una cartella del computer, è  possibile 
avere anche altri tipi di file, ma analizzeremo prevalentemente quelli HTML. Tra i file presenti 
nello spazio web, quindi  in questa cartella, diciamo che il più importante è quello della prima 
pagina del sito e che può avere come nome: index.html oppure default.html, anche se il più usato in 
assoluto è index.html. Da tener presente che le estensioni di questi file, talvolta sono htm al 
posto di html ed è la stessa cosa.
Questo file di solito è la Home page del sito, quella che si apre quando digitiamo un indirizzo 
web. Per esempio: www.uiciechi.it, punterà alla index.html del 
sito dell'Unione Italiana dei Ciechi e degli Ipovedenti, aprendoci la Home page.
In questo file, poi, inseriremo i collegamenti alle altre pagine del sito.
I fogli di stile che, in gergo, vengono chiamati css.
Spesso si sente parlare dei Css, ma cosa sono?
Sono dei file con estensione .css che permettono di dare la formattazione ai documenti html. In 
pratica, sono dei semplici file di testo che contengono al loro interno le indicazioni per il 
posizionamento degli oggetti nelle pagine e Quelle necessarie per i colori e le dimensioni di tutto 
quello che contengono le pagine e il loro sfondo.
Alcuni esempi semplici:
Il carattere, il suo colore, le sue dimensioni, sono tutte cose che posso specificare nel css che 
si occuperà di applicare al file Html.
Possiamo dire che il risultato di una pagina web, viene dato da due file che lavorano insieme e che 
sono uniti tra loro. In pratica, il File html contiene gli elementi di una pagina web, mentre il 
file css ordina graficamente questi elementi, dandogli i colori e le dimensioni stabilite dal 
programmatore.
Quale è il vantaggio dei Css, conosciuti anche come fogli di stile a cascata?
Immaginiamo di voler dare il colore  verde a tutti i paragrafi del sito. Questo comando, io lo 
scriverò una volta sola nel file css, e lui farà verdi tutti i paragrafi del sito. Questo evita di 
dover scrivere in ogni pagina che ogni paragrafo del sito deve essere verde. Ovviamente, questo 
vale per tutti gli elementi di una pagina, per tutte le pagine e quindi, di tutto il sito. Qualcuno 
si chiederà se è possibile dare colori diversi ai paragrafi. Certo, sempre dal Css, dando un nome 
univoco al paragrafo  stesso. Poi vedremo come, basta per ora sapere che è possibile personalizzare 
ogni elemento di una pagina web e per questo si usano i css.
Altra domanda che sorge spontanea è: dove possiamo trovare i file html o  css?
In realtà, sono dei semplici file di testo, creati anche con il blocco note di Windows, ai quali 
cambieremo l'estensione da TXT in HTML o CSS.
Vediamo come fare in pratica questa operazione. Per creare un file html, apriamo il blocco note e 
salviamo un file nuovo chiamandolo index.txt.
A questo punto, lo rinominiamo premendo F2 e cambiando l'estensione da txt in html, ottenendo: 
index.html. Windows ci fornisce il solito avviso, ma noi confermiamo la scelta. Questo file è vuoto 
ma premendo invio, verrà aperto Internet explorer o il brouser predefinito. La pagina che si 
aprirà, e questo è ovvio, sarà vuota.
Ma come si inseriscono i dati all'interno del file html? Semplice, lo apriamo con il blocco note. 
Per farlo, una volta selezionato il file, apriamo il menu contestuale, premiamo freccia giù fino  a 
trovare la voce Apri con. Apriamo il sottomenu, scendiamo fino a blocco note e premiamo invio.
Il file: index.html,  è aperto ed è possibile scrivere il codice html.
Per i file css, la procedura è la stessa, ma si aprono direttamente con il blocco note, premendo 
direttamente  invio sul file.
Torniamo un pò indietro e creiamo una cartella nuova. La chiameremo sito. Al suo interno, creiamo 
per ora altre due cartelle: Images e Css. Nella cartella images, metteremo poi le immagini del 
sito, nella cartella Css i file css. Apriamo la cartella css e  all'interno creiamo due file con il 
blocco note, come spiegato prima.
I file da creare sono: style.css e template.css. Lasciamoli li per il momento e torniamo alla 
nostra cartella sito. Sempre con il blocco note, creiamo quì il file Index.html come spiegato sopra.
Ricapitolando:
• Cartella sito.
• Dentro due cartelle, images e css, più un file index.html.
• Dentro la cartella css, due file: Style.css e template.css.
Questa disposizione è una cosa soggettiva, come soggettivi sono anche i nomi delle cartelle. 
L'importante è conoscerle bene e avere un ordine perchè poi, nel file html, dobbiamo scrivere il 
percorso di dove trovare gli elementi per comporre la pagina.
Fatto ciò, abbiamo tutto  quello che ci serve per iniziare. Quando un sito è concluso, tutta questa 
cartella verrà trasferita su un server e il sito sarà disponibile per essere visitato. Poi vedremo 
come.
Vi rimando alla prossima parte per cominciare a imparare i primi elementi di una pagina html.
***********
Per ulteriori spiegazioni, scrivere a: Roberto Abutzu