Lezione 13 - Corso Avanzato Html

Article Elemento Semantico in Html

Article

Un article (articolo) per il linguaggio html, è un contenitore che può essere riempito con tutti gli elementi che riteniamo più opportuni per completare parte della nostra pagina web. Può essere un'inserto con del testo descrittivo e magari corredato da immagini, può essere un post in un forum, può essere una scheda descrittiva di un prodotto in vendita in un negozio di e-commerce, perciò corredato di prezzo, titolo, descrizione, e altro ancora.

Nel codice html un articolo viene creato con il tag <article>

Ora passiamo alla pratica e mettiamo giù del codice. Per fare un lavoro più bello e un pò più completo, nelle regole css, abbiamo inserito delle nuove proprietà ed in particolare la proprietà float (fluttuare), e la proprietà overflow (straripamento, eccedente).

Con float: left; diciamo all'immagine di float (fluttuare) verso left (sinistra).

La proprietà overflow è strettamente legata alla proprietà height, (altezza) essa fornisce un modo per gestire il contenuto che eccede e superi i limiti imposti con height. Serve infatti per definire il comportamento di un elemento di blocco nel caso il suo contenuto ecceda dalle sue dimensioni impostate, ossia nel caso in cui l’area utile del contenitore non sia sufficiente per i contenuti.

È da usare quando si vogliano creare cotenitori (box, elementi di blocco ecc.) ad altezza fissa ma che abbiano molti contenuti. Si applica a tutti gli elementi di blocco e non è ereditata.


Sintassi ed esempi:
selettore {overflow : valore;}

I valori possono essere espressi con le parole chiave:

• visible: valore iniziale, il contenuto eccedente rimane visibile;

• hidden: (nascosto) il contenuto eccedente non viene mostrato;

• scroll: il browser crea delle barre di scorrimento che consentono di scorrere il contenuto eccedente;

• auto: il browser controlla il contenuto, se è eccedente, compaiono delle barra di scorrimento.

Facciamo degli esempio di come si presenterebbe la proprietà overflow nel foglio di stile con vari elementi di blocco:
div {overflow: auto;}

p {overflow: hidden;}

section {overflow: visible;}

article {overflow: scroll;}

Ora faremo del codice dove creeremo una section (sezione) con dentro tre article (articoli) che a loro volta, ognuno di essi, ha un'immagine che faremo flottare a sinistra:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Articoli di Giornale</title>
  <meta charset="utf-8">
  <style>
	section {
		background-color: greenyellow;
		border: 1px solid black;
		padding: 2px;
		}
		article {
			background-color: white;
			padding: 4px;
			overflow: visible;
			margin: 4px;
			margin-bottom: 22px;
		}
		img {
			float: left;
			margin-right: 10px;
		}
  </style>
 </head>
 <body>
  <h1>Titolo pagina</h1>
	  <section>
	  	<h2>Titolo Sezione</h2>
	  	<article>
	  		<h3>Titolo articolo 1</h3>
	  		<h4>Sottotilo articolo 1</h4>
	  		<p><img src="percorso_per_raggiungere_l_immagine_90X60px.jpg">  Questo è il contenuto del mio paragrafo. 
	  		Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. </p>
	  	</article>
	  	<article>
	  		<h3>Titolo articolo 2</h3>
	  		<h4>Sottotilo articolo 2</h4>
	  		<p><img src="percorso_per_raggiungere_l_immagine_90X60px.jpg">  Questo è il contenuto del mio paragrafo. 
	  		Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. </p>
	  	</article>
	  	<article>
	  		<h3>Titolo articolo 3</h3>
	  		<h4>Sottotilo articolo 3</h4>
	  		<p><img src="percorso_per_raggiungere_l_immagine_90X60px.jpg">  Questo è il contenuto del mio paragrafo. 
	  		Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. Questo è il contenuto del mio paragrafo. </p>
	  	</article>
	  </section>
 </body>                
</html>