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: http://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

