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.

Il corpo del documento

  <body>
       <h1>
     Benvenuti su AndMar!
       </h1>
       <p>
     All' interno del sito, parleremo del linguaggio (X)html!
       </p>
  </body>

All' interno del corpo del documento compreso tra i tag <body> e </body> viene inserito tutto il contenuto di una pagina web che può essere testo, immagini, colori, grafica, ecc. Gli elementi che appaiono all'interno del corpo del documento si dividono in due categorie ben distinte: Elementi blocco (block elements) e Elementi in linea (inline elements).

Gli elementi blocco

Una pagina Html è praticamente un insieme di rettangoli che si dispongono in un determinato modo sul monitor del pc. Ognuno di questi rettangoli è contraddistinto da un elemento (o tag) blocco. Un elemento blocco è quindi un box che può contenere altri elementi blocco, oppure elementi non blocco, detti anche elementi inline, o testo. Cosa molto importante: quando un elemento blocco viene inserito in una pagina Web, in essa si crea automaticamente una nuova riga. Se per es. in una pagina inseriamo queste due righe di codice affiancate:

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

Automaticamente il testo paragrafo si troverà sulla riga in basso, in quanto abbiamo inserito un nuovo elemento blocco (<p>).

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

Degli elementi blocco ne elenchiamo qualcuno:

I paragrafi sono molto importanti. Essi definiscono blocchi di testo separati, l'uno dall'altro, da uno spazio consistente. All'interno di un paragrafo possono però essere inseriti dei ritorno a capo, marcati dal tag <br />, che rappresenta un'eccezione nella struttura consueta di Xhtml, perchè è un elemento che non ha un tag di chiusura. Siccome però in XHTML non possono esistere elementi privi di chiusura, deve essere usata, nel tag di apertura, la chiusura implicita, marcata dallo slash finale. (si ha quindi <br /> e non <br>)

Quando si inseriscono elementi blocco si devono seguire delle regole legate alla gerarchia e all'annidamento di tali elementi, nel senso che il primo elemento da inserire in questa gerarchia è <div> che stà ad indicare un contenitore all'interno del quale trovano posto tutti gli altri elementi e questo fà si che non si creino annidamenti sbagliati, che sarebbero impietosamente segnalati quando andiamo a validare il nostro documento. Se guardiamo l'esempio sottostante notiamo subito che non è stata seguita nessuna gerarchia, infatti l'elemento <p> non pu˛ contenere altri elementi blocco e di conseguenza l'annidamento è sbagliato.

  <body>
    <p><div>Annidamento sbagliato</div></p>
  </body>

Invece il successivo esempio è corretto.

  <body>
    <div><p>Annidamento corretto</p></div>
  </body>

Se date un'occhiata a questo allegato potete trovare tutti gli elementi blocco di Xhtml con le rispettive DTD specificate.

Gli elementi inline

Degli elementi inline ne elenchiamo qualcuno:

Si distinguono da quelli di tipo blocco, essenzialmente per due motivi e cioè una volta inseriti in una pagina Web non danno origine a una nuova riga, e poi possono contenere solo testo o viceversa altri elementi inline e anche per loro bisogna porre molta attenzione all'annidamento. Una regola ferrea quindi è che un elemento inline non può contenere elementi di tipo blocco.

L'esempio quà sotto è infatti errato e non reggerà al giudizio della validazione.

  <body>
    <b><p>Annidamento sbagliato</p></b>
  </body>

Mentre quest'ultimo è corretto.

  <body>
    <p><b>Annidamento corretto</b></p>
  </body>

Anche per gli elementi inline consultate questo allegato che comprende una lista completa.

^ Inizio pagina

Ricerca personalizzata


Lezione successiva successiva

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Indice