Corso HTML e Css
Corso HTML e Css
Struttura generale di un documento html; il DOCTYPE, l'elemento html; l'elemento head e i metadati; l'elemento body e le sezioni del documento; i fogli di stile a cascata; gli stili di default; i fogli di stile dell'autore del documento.
La dichiarazione del tipo di documento, DOCTYPE, è un preambolo al documento. E' una dichiarazione necessaria affinchè il browser, (Chrome, Firefox, Microsoft Edge,...) possa fare del proprio meglio per seguire la specifica indicata.
L'elemento html rappresenta la radice di un documento HTML. Contiene un elemento head seguito da un elemento body.
E' il primo elemento all'interno dell'elemento html. Contiene metadati, informazioni che descrivono il documento stesso e che sono utilizzate dai programmi che lo riproducono.
L'elemento body contiene gli elementi visualizzati nel browser o stampati o riprodotti in qualunque altro modo fruibile dagli utenti e che costituiscono la ragione stessa per la quale il documento è stato creato.
<!DOCTYPE HTML> è la dichiarazione di tipo del documento, preambolo all'inizio del file. E' necessaria (provate ad ometterla o a scriverla male e vedrete cosa succede). DOCTYPE e HTML possono essere scritti sia con le maiuscole che con le minuscole. Non è un elemento di HTML infatti è al di fuori dell'elemento html.
<!-- ... --> tutto quanto compreso fra queste due tag è un commento. Per il browser è come se non esistesse. I commenti servono ai programmatori o agli autori dei documenti per descrivere qualche cosa che vogliono ricordare.
<html lang="it"> ... </html> è l'elemento radice del documento. L'attributo lang, che ne specifica la lingua, è utilizzato dagli strumenti di sintesi vocale. Il suo uso è raccomandato. L'elemento html contiene un elemento head seguito da un elemento body.
<head> ... </head> è il primo dei due rami di primo livello di un documento HTML. Contiene metadati, informazioni che descrivono il documento stesso e che sono utilizzate dai programmi che lo riproducono. In questo esempio sono inseriti solo quelli strettamente necessari per il funzionamento del browser. In futuro ne vedremo altri.
<meta charset="utf-8"/> specifica la codifica ASCII del documento.
<title> Lezione 1 </title> specifica l'etichetta della scheda del browser su cui viene visualizzato il documento. Se manca, come etichetta della scheda del browser, viene preso il nome del file, e l'utility di controllo del markup segnala errore. Pertanto title non si deve omettere.
<link rel="stylesheet" href="HTML_00.css" type="text/css" media="screen"/> specifica il primo foglio di stile definito dall'utente, applicato al documento. Vediamo più nei dettagli questo statement.
Il body definisce il contenuto del documento. Esso contiene elementi di strutturazione e raggruppamento dei contenuti, nonchè gli elementi testuali, multimediali che lo costituiscono.
Descriviamo sinteticamente quelli presenti nell'esempio:
In HTML sono presenti sei elementi per l'intestazione o titolazione di contenuti: h1, h2, h3, h4, h5, h6.
h1 è l'elemento per la titolazione del primo livello di sezionamento di un documento. Nel caso di un libro h1 conterrebbe il titolo dell'opera, con il titolo dei capitoli in elementi di tipo h2 .
p sta per paragrafo. E' l'elemento base di raggruppamento dei testi.
Dal punto di vista sintattico un solo elemento p potrebbe contenere una porzione comunque lunga di testo è raccomandabile però utilizzarlo conformemente alla sua finalità semantica che è quella di esprimere un distinto aspetto dell'argomento a cui fa riferimento. In tal senso può essere composto da un numero variabile di periodi, da uno solo a molti, a seconda dell'argomento e dallo stile dell'autore, o dall'enfasi che si vuole dare al punto di vista espresso.
L'elemento p può contenere molti altri elementi ed è così importante da dedicargli una trattazione a parte. Ci torneremo in seguito.
L'elemento a è utilizzato nell'esempio come "collegamento ipertestuale". Nel caso specifico consente di aprire, nel browser, la pagina "http://validator.wr.org", specificata con l'attributo href, in una nuova scheda. Che la scheda in cui aprire lo strumento di validazione sia una nuova scheda è dovuto all'assegnazione del valore _blank all'attributo target.
L'elemento a, in aggiunta all'uso di collegamento ipertestuale, può essere utilizzato in diversi altri modi. Anche ad esso sarà dedicata una trattazione a parte.
L'elemento div è un contenitore di elementi. Gli elementi all'interno di un div sono suoi figli e, come tali, possono ereditare dal padre specifiche caratteristiche. Nel seguito vedremo con quali meccanismi.
Nell'uso presentato nell'esempio agli elementi div sono stati assegnati gli attributi class ="Esercizi" e class ="Appunti". In questo modo ho dichiarato che il primo elemento div appartiene alla classe "Esercizi" mentre il secondo appartiene alla classe "Appunti". Fra poco vedremo il perchè di queste assegnazioni.
CSS è un linguaggio per la formattazione di documenti su diversi tipi di dispositivi.
Prendendo come riferimento una pagina web, con HTML se ne definisce il contenuto testuale e multimediale; con CSS se ne definisce l'aspetto. CSS consente di definire disposizione, dimensioni, aspetto degli oggetti definiti con HTML, assegnando ad essi delle proprietà di stile.
L'idea alla base di CSS è quella di rendere i documenti indipendenti dai dispositivi di presentazione e dal loro software, di facilitarne manutenibilità e riusabilità
Le proprietà di stile si applicano agli elementi dei documenti. Fra di essi esistono relazioni di parentela. Ad esempio, in un documento html, tutti gli elementi visualizzabili sono contenuti nell'elemento body che pertanto è l'antenato comune a tutti gli altri. CSS sfrutta questi tipi di relazione consentendo l'ereditarietà di alcune proprietà.
Il nome "Cascading Syle Sheets" rivela un importante meccanismo di funzionamento di CSS: quello dell'applicazione di regole di stile in sequenza. Per prima cosa sono applicate regole di stile di default, poi quelle specificate dall'autore del documento in uno o più file, applicate secondo l'ordine di dichiarazione dei file stessi, ed infine sono applicate le eventuali regole di stile dell'utente.
L'autore del documento specifica i file contenti le regole di stile da applicare mediante l'inserimento di elementi link nella sezione head.
Esempio: <link rel="stylesheet" href="HTML_00.css" type="text/css" media="screen"/>
Regola di stile applicata a tutti gli elementi di tipo p:
p{
margin-left:2em;
color:blue;
}
Regola applicata agli elementi con attributo class="Esercizi":
.Esercizi{
background-color:2em;
}
Regola applicata agli elementi p definiti all'interno di elementi di class="Esercizi":
.Esercizi p{
color:red;
}
Regola applicata agli elementi identificanti dall'attributo id="nota":
#Nota p{
font-family:lucida handwriting;
color:green;
}
Il css dell'esempio è stato predisposto per inserire regole di stile su tutti gli oggetti presenti nel file HTML, ma, nella configurazione iniziale, nessuna regola di stile è stata inserita. Ho fatto così per evidenziare il fatto che, in assenza di dichiarazioni da parte dell'autore, agli elementi sono applicati gli stili di default.
Gli stili di default raccomandati sono quelli indicati in sample.htm., una raccomandazione in appendice D delle specifiche CSS 2.2. Da questa raccomandazione estraggo le regole per gli elementi:
body{
display:block; }
div{
display:block; }
h1{
display:block;
font-size:2em;
margin:0.67em 0;
font-weight:bolder; }
h2{
display:block;
font-size:1.5em;
margin:0.75em 0;
font-weight:bolder; }
p{
display:block;
font-size:1em;
margin:1.12em 0; }
Queste regole di stile saranno valide sino a quando non sovrascritte in HTML_01.css, che è quello che faremo negli esercizi proposti.
Per prima cosa scarica il file HTML_01.rar nella cartella CorsoHTML che avrai creato in precedenza.
Estrai la cartella HTML_01 e apri in Notepad++ i file HTML_01.html e HTML_01.css.
Se vuoi vedere il file dell'esempio prima di scaricarlo clicca qui.
Entra in HTML_01.html e, dal menu "Esegui", clicca su Esegui in Chrome, o Esegui in Firefox, o nel browser che preferisci.
Alla destra ecco come si presenterà la pagina.
Lo scopo è di mostrare come, in assenza di dichiarazione di stile da parte dell'autore, siano applicate quelle di default.
Nel file css modificare il selettore body in questo modo:
body{
width:50%;
padding-left:24%;
padding-right:24%;
background-color:beige;
}
Ecco il nuovo aspetto della pagina:
L'esempio mostra come la proprietà background-color sia stata ereditata da tutti i suoi figli, e come questi si siano disposti all'interno del loro contenitore.
Nel file css modificare i selettori .Esercizi e .Appunti h2 in questo modo:
.Esercizi {
background-color:silver;
}
.Appunti h2{
color:blue;
}
Ecco il nuovo aspetto della pagina:
L'esempio mostra come le proprietà delle classi sovrascrivino quelle degli elementi.
Nel file css modificare il selettori #notain questo modo:
#nota{
font-family:"lucida handwriting";
font-size:1.5em;
color:green;
}
Ecco il nuovo aspetto della pagina:
L'esempio mostra come le proprietà degli id sovrascrivino quelle degli elementi e delle classi.
Nel file html aggiungere questi paragrafi alla div Esercizi.
L'elemento html contiene gli elementi head e body.L'elemento body contiene gli elementi div, h, p, i quali a loro volta contengono caratteri di testo ed altro.
L'elemento div della classe Esercizi contiene paragrafi. L'aggiunta di questi paragrafo mostra come, per default, le dimensioni del contenitore si adatti a quella del contenuto.
Ecco il nuovo aspetto della pagina:
L'esempio mostra come il contenitore Esercizi ( la div di classe Esercizi) si sia espansa in altezza per contenere i nuovi paragrafi aggiunti.
Il lettore potrà ora fare altre prove ed eventualmente annotare propri appunti nella sezione dedicata.
Un ultima raccomandazione:durante gli esercizi tenere aperti di due strumenti di validazione del codice: W3C Markup Validation Service e W3C CSS Validation Service e verificare i file su cui si è lavorato dopo aver eseguito le modifiche. I browser sono molto tolleranti, e visulizzano bene le pagine anche in presenza di errori, ma gli errori è meglio evitarli.
Le prossime lezioni chiariranno molti aspetti di HTML e CSS, qui solo accennati, ma chi desidera, da subito, approfondire alcuni degli argomenti della lezione potrà esaminare queste pagine già presenti nel sito: