Ingrandisci i caratteri: dimensioni normali (alt+1) | dimensioni medie (alt+2) | dimensioni grandi (alt+3)

Lezione 01

Introduzione al linguaggio

Roberto Abutzu

nv-mondoinformatico

vai ai contenuti

clicca qui per aggiungere il sito ai preferiti

Introduzione

Corso html 5.

Di Roberto Abutzu.

Prima parte: introduzione e spiegazione del linguaggio HTML5.

pubblicato il:


Roberto

Con questo mio scritto e per quanto mi è possibile, vorrei iniziare a parlare di html in modo semplice un po' per tutti.

Prenderò spunto dal corso pubblicato da Nunziante Esposito su Uiciechi.it andando a precisare i cambiamenti che sono avvenuti con l&apos>ultima versione del linguaggio html, arrivato ormai alla versione 5.

Facciamo una premessa importante:

>

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 web.

Tante pagine web messe assieme, ci danno come risultato il sito.

Di cosa si compone un sito?

Pensate al sito come ad 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 collegate 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/apos;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 caratteristiche che devo specificare nel css, che si occuperà poi 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 debba essere verde.

Ovviamente, questo vale per tutti gli elementi di una pagina, per tutte le pagine e quindi, per tutto il sito.

Qualcuno si chiederà se è possibile dare colori diversi ai singoli 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 Browser predefinito.
La pagina che si aprirà, ovviamente, 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 medesima, ma si aprono direttamente con il blocco note, premendo invio sul file stesso.

Torniamo un po' 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 precedentemente.
I file da creare sono:

  1. style.css
  2. template.css

Lasciamoli li per il momento e torniamo alla nostra cartella sito.

Sempre con il blocco note, creiamo qui il file:
Index.html come spiegato.

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/apos;importante è conoscerle bene e avere un ordine perché poi, nel file html, dobbiamo scrivere il percorso corrispondente agli 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@evyweb.it

Rileggi o prosegui

  • 02-lezione successiva
  • torna all'indice delle lezioni
  • torna alla home del corso
  • Certificazione del sito

    HTML5 Valido CSS 3 Valido Livello di accessibilità tripla-A WCAG 2.0
    Copyright Roberto Abutzu