Lezione 11 - Corso Avanzato Html

Section Elemento Semantico in Html

E' doveroso, a questo punto del programma, introdurre dei concetti più specifici per formulare una pagina web. E' intuitivo il fatto che non possiamo continuare a scrivere tutto il codice nella stessa pagina mischiando codice html con regole css (anche se finora lo abbimo fatto e possiamo continuare a farlo, ma solo se si tratta di cotenuti pezzi di codice). Quando il codice ha diverse centinaia di righe la cosa si complica notevolmente. A questo punto è necessario appoggiarsi ad un foglio di stile esterno.

Creare un foglio di stile esterno e richiamarlo all'interno delle pagine HTML e' semplice.

Per prima cosa dobbiamo definire un nuovo file e salvarlo con estensione .css Questo file dovrà contenere tutte le regole Css che andranno a definire la formattazione della pagina web a cui sarà collegato. Il file con estensione .css andrà collocato, e quindi salvato (è consigliabile), nella cartella pricipale del sito web, dove ci sarà anche la Home page la pagina principale del sito che sarà necessariamente denominata index.html.


Ora colleghiamo il file.css (file è puremente arbitrario, potete chiamarlo come volete l'importante è che abbia l'estensione .css) alla pagina che vogliamo fruisca dello stile che abbiamo nel file.css questo viene fatto aggiungendo nel tag <head></head> il seguente codice:

<link rel="stylesheet" type="text/css" href="file.css">

Spieghiamone il significato:

link è il tag che consente di attaccare lo stile di un file esterno al documento html.

rel è un'attributo per indicare la relazione tra il file collegato ed il documento html, e indico che il file collegato e' un stylesheet (foglio di stile).

href richiama il percorso per raggiungere il file che dobbiamo collegare, nel nostro caso file.css

type è un'attributo usato per specificare il media-type "text/css" per il Cascading Style Sheet. Permette ai browser di ignorare i tipi di style sheet da loro non supportati. In poche parole specifica il tipo di dati che stiamo fornendo.

Ricordiamo che un foglio di stile non deve usare tag HTML o comunque comandi racchiusi tra i segni < >

Il file deve essere costituito solo da regole, le quali si racchiudono tra parentesi graffe, e l'assegnazione del valore alla proprietà deve essere fatta con i due punti :
come ad esempio:

p { margin: 2px; }

Detto questo ora introduciamo l'argomento della lezione odierna.

Gli Elemeti Semantici

Nelle versioni precedenti del liguaggio html, per costruire sezioni, intestazioni, barre di navigazioe, ecc. c'èra da fare un bel pò di lavoro per l'organizzazione del codice, ora con la nuova versione di html5 avremo, per tutti questi oggetti un tag dedicato, un tag tutto per loro, un tag che va a definire il loro ruolo all'interno della pagina e la loro funzione.
Questi sono i famosi Elemeti Semantici.
Con gli elementi semantici avremo un tag per racchiudere una barra di navigazione, avremo un tag per definire le sezioni, gli articoli, le barre laterali e così via. Noi avremo solo il compito di decidere dove piazzarli e quale stile assegnarli.

Elemento Semantico SECTION


Section rappresenta una sezione (può essercene una o più di una) all'interno della pagina, ed essendo un contenitore invisibile per poterlo rappresentare creeremo un foglio di stile per dargli un'aspetto estetico.

Le section essendo degli oggetti modulari possono essere inserite una dentro l'altra per avere strutture con diverso grado di complessità asseconda dell'effetto che voglimo ottenere.

Traduciamo tutto in codice per vederne il risultato.
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Elemento Semantico Section</title>
  <meta charset="utf-8">
  <style>
	section {
		background-color: #ccc;
		border: 1px solid black;
		padding: 4px;
		margin-bottom: 6px;
	}
  </style>
 </head>
 <body>
  <section>
	<h1>Sezione 1</h1>
	<p>....contenuto della sezione 1 ....</p>
  </section>
  <section>
	<h1>Sezione 2</h1>
	<p>....contenuto della sezione 2 ....</p>
	<section>
	  <h2>Sottosezione 2.1</h2>
	  <p>bla bal bal</p>
	</section>
  </section>
  <section>
	<h1>Sezione 3</h1>
	<p>....contenuto della sezione 3 ....</p>
	<section>
	  <h2>Sottosezione 3.1</h2>
	  <p>bla bal bal bla bal bal</p>
        </section>
	<section>
          <h3>Sottosezione 3.2</h3>
          <p>bla bla</p>
	  <section>
	    <h3>Sottosezione 3.2.1</h3>
	    <p>bla bla</p>
	  </section>
	</section>
  </section>
 </body>                
</html>                    


Il risultato è:

Sezione 1

....contenuto della sezione 1 ....

Sezione 2

....contenuto della sezione 2 ....

Sottosezione 2.1

bla bal bal

Sezione 3

....contenuto della sezione 3 ....

Sottosezione 3.1

bla bal bal bla bal bal

Sottosezione 3.2

bla bla

Sottosezione 3.2.1

bla bla


Bello vero!!! quante cose si possono fare..... questo è solo l'inizio..... pensateci!!!