logo del sito

W3C

Al giorno d'oggi è importante che un sito Web, sia compatibile con gli standard del Consorzio Internazionale W3C.

HTML

Tutte le pagine dei siti web sono scritte in HTML, linguaggio che viene letto ed elaborato dal browser, il quale genera la pagina che viene visualizzata sullo schermo del nostro computer.

CSS

Con il termine CSS (dall'inglese Cascading Style Sheets) vengono semplicemente definiti appunto i "fogli di stile a cascata", usati per separare all'interno delle pagine di un sito, i contenuti dalla formattazione, permettendo una programmazione più facile per gli autori delle pagine HTML.

Classificazione degli elementi

Quando si usa Xhtml, è molto utile conoscere il meccanismo di funzionamento dei CSS, o meglio, è bene sapere su cosa si interviene quando si usano i fogli di stile. All'interno di un documento Html si distinguono due gruppi di elementi fondamentali: quelli che rappresentano dei blocchi (elementi blocco) e quelli che servono a inserire qualcosa all'interno di una riga di testo normale (elementi in linea).

Elementi blocco e elementi in linea

Se noi guardiamo la struttura di una pagina (X)Html, senza pensare al suo contenuto, notiamo che essa non è altro che un insieme di box quadrati o rettangoli, a prescindere che si tratti di titoli, paragrafi, tabelle o immagini: sempre di contenitori si tratta. Nell'immagine quà raffigurata potete però osservare che non tutti i box sono uguali, infatti alcuni contengono altri box al loro interno, altri sono invece contenuti all'interno dei primi. Osservate anche che ci sono dei quadrati in mezzo a del testo e che quest'ultimo scorre intorno senza interrompere il suo flusso e senza andare a capo. Questo è un pò il semplice esempio fondamentale che esiste tra gli elementi blocco e gli elementi in linea.

Come abbiamo visto nella guida riferita all'Xhtml, e più precisamente sulla lezione n°9 (riguardante il body), gli elementi blocco sono dei box che possono contenere altri elementi, sia di tipo blocco che di tipo in linea e quando un elemento blocco è inserito nel documento si crea automaticamente una nuova riga. Infatti inserendo in (X)Html queste due righe di codice, avevamo prima:

  <body>
    <h1>Titolo</h1> <p>paragrafo</p>
  </body>

e poi:

  <body>
    <h1>Titolo</h1>
    <p>paragrafo</p>
  </body>

perchè <h1> e <p> sono elementi blocco.

Gli elementi inline invece possono contenere essenzialmente solo testo, o altri elementi inlinea e non possono contenere elementi blocco. Nell'immagine sono i rettangoli con il bordo verde. Come si può notare, quando sono inseriti nel documento non danno origine ad una nuova riga. Una terza categoria è quella degli elementi lista. Comprende in pratica solo l'elemento LI (list item).

Elementi rimpiazzati

Quando si introduce il concetto di classificazione degli elementi, bisogna sempre ricordare gli elementi rimpiazzati ed elementi non rimpiazzati. I primi sono elementi di cui un browser conosce solo le dimensioni intrinseche cioè, quelli in cui altezza e larghezza sono definite dall'elemento stesso e non da ciò che lo circonda. L'esempio più tipico di elemento rimpiazzato è img (un'immagine). Altri elementi rimpiazzati sono: input, textarea, select e object.

Struttura ad albero

Un altro concetto importantissimo che dobbiamo ricordare quando creiamo pagine web, è quello della struttura ad albero di un documento. Il meccanismo fondamentale dei CSS è infatti l'ereditarietà, cioè quella condizione che fa sì che molte proprietà impostate per un elemento siano automaticamente ereditate dai suoi discendenti, e sapersi districare nella struttura ad albero, significa sfruttare al meglio la potenza del linguaggio Html. Se inseriamo queste stringhe di codice:

<html>
<head>
<title>Struttura ad albero del documento</title>
</head>
<body>
<h1>AndMar</h1>
<div>
<p>Primo<a href="introduzione.htm">paragrafo</a></p>
</div>
<p>Secondo<b>paragrafo</b></p>
</body>
</html>

poi avremo questo schema finale che rappresenta la struttura ad albero di cui abbiamo accennato.

Struttura ad albero

Il codice Html all'interno di una pagina web è strutturato in modo da seguire una sorta di albero genialogico in cui tutti gli elementi hanno tra di loro una relazione di tipo parentale. C'è un genitore e un figlio. Ogni elemento è genitore e/o figlio di un altro. Un elemento si dice genitore (parent) quando contiene altri elementi. Si dice figlio (child) quando è racchiuso in un altro elemento. Come si vede dallo schema, BODY, ad esempio è figlio di HTML. Quest'ultimo, allo stesso tempo è anche il padre di H1, DIV e P, che a sua volta è il genitore di B. Sembrerebbe che anche BODY è in qualche modo genitore di B, ma non è esattamente così, perchè in questo caso subentra un altra relazione: quella tra antenato (ancestor) e discendente (descandant). La relazione che lega genitore e figlio è valida solo se tra un elemento e l'altro si scende di un livello. Pertanto possiamo dire che HEAD è figlio di HTML, che A è figlio di P. Tra DIV e A, invece si scende di due livelli: diciamo allora che DIV è un antenato di A, e che questo rispetto al primo è un discendente.

Per finire, il capostipite di questa grande famiglia è HTML, che in termini tecnici si dice che è anche l'elemento radice (root).

^ Inizio pagina

Ricerca personalizzata


Lezione successiva successiva

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

Indice