PROGRAMMIAMO
HTML - Tag, elementi, attributi

Struttura pagina HTML

La struttura base di un documento HTML è molto semplice e può essere riassunta così:

<!DOCTYPE HTML>
<html>
  <head>
....
  </head>
  <body>
....
  </body>
</html>

I puntini di sospensione indicano la presenza di codice HTML (questo è un esempio di pagina vuota, che non produce nessuna visualizzazione).

La pagina si compone di alcune "parti" predefinite, indicate sopra con colori diversi. Esaminiamole ora brevemente una per una. Per comodità, facciamo anche riferimento alla pagina di esempio già vista nella lezione sugli Strumenti, che riportiamo qui sotto:

<!DOCTYPE html>
<html>
  <head>
<meta charset="utf-8">
<title> La mia prima pagina in HTML </title>
  </head>
  <body>
<p>Ecco la mia <strong> prima pagina!!!! </strong> in HTML </p>
<p> Visita <a href = " http://www.programmiamo.altervista.org/index.html"> Programmiamo</a>:<br /> potrai imparare
tutti i segreti dell'HTML! </p>
  </body>
</html>

 

Tag e elementi

Ci occuperemo nella prossima lezione della dichiarazione DOCTYPE che sta all'inizio della pagina. Per adesso diciamo solo che non si tratta di un tag, ma di un tipo diverso di dichiarazione.

Nel resto della pagina possiamo individuare una serie di "istruzioni" in linguaggio HTML, dette più precisamente tag. Questi sono facilmente riconoscibili perché sono tutti racchiusi fra i simboli di "<" e di ">" (per esempio <body>, </head>, <p>...).

Fra i tag ve ne sono alcuni detti "di apertura" e altri detti "di chiusura". I tag di chiusura si distinguono per la presenza del simbolo di divisione (in inglese slash, /) a inizio tag. Così per esempio <body> è un tag di apertura e il suo corrispondente tag di chiusura è </body>.

I tag di apertura sono "accoppiati" con i corrispondenti tag di chiusura un po' come le parentesi aperte e chiuse in una espressione matematica. Una coppia di tag di apertura e di chiusura delimita quello che si chiama elemento (alcuni elementi sono costituiti da un unico tag di apertura/chiusura e si dicono elementi vuoti).

In una qualsiasi pagina HTML è generalmente sempre possibile individuare gli elementi mostrati in figura:

Attributi

In HTML la maggior parte degli elementi possiede anche un certo numero di attributi, mediante i quali è possibile specificare più dettagliatamente il comportamento dell'elemento stesso.

Per esempio si consideri

<a href = " http://www.programmiamo.altervista.org/index.html"> Programmiamo </a>

Il tag in questo caso è <a> e serve per creare un link su una parola (Programmiamo, nel nostro esempio). href è un attributo del tag <a> e serve per specificare l'indirizzo della pagina internet che dovrà essere aperta cliccando sul link. L'indirizzo della pagina http://www.programmiamo.altervista.org/index.html si chiama valore dell'attributo.

In generale un tag può avere più di un attributo e la sintassi per l'uso degli attributi e dei relativi valori è la seguente:

<tag attributo1 = "valore1" attributo2 = "valore2" .... >

 

Elementi di struttura, elementi dell'head ed elementi del body

Possiamo suddividere tutti gli elementi che compongono una pagina HTML in tre categorie:

  1. Elementi di struttura: definiscono la struttura della pagina e sono sempre presenti in ogni pagina HTML. Essi sono <html>, <head> e <body>.
  2. Elementi dell'head: sono quegli elementi che possono trovarsi solo all'interno dell'elemento <head>. Fra questi per ora vediamo solo l'elemento <title>. Altri elementi di questo tipo sono <base>, <link>, <meta>, <style> e <script>.
  3. Elementi del body: sono gli elementi che possono trovarsi solo all'interno del body. Si tratta del gruppo più numeroso, quello che contiene tutti gli elementi usati per controllare la visualizzazione di una pagina. Fra questi per ora ricordiamo <p>, <img>, <a>, <strong> e molti altri. Come vedremo in seguito, gli elementi del body si suddividono a loro volta in elementi di blocco ed elementi inline.

Si osservi che:

 

precedente -successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it