docDiv e Span - Filibusta
download 
Reclamo Transcript
Div e Span - Filibusta
TABLE o TABLELESS?
Fino a pochi anni fa la strutturazione degli elementi all'interno di una pagina
avveniva attraverso le tabelle.
Ad esempio questo è il vecchio sito del polo universitario (www.crema.unimi.it)
Se attiviamo da firefox l'evidenziazione delle tabelle, scopriamo che è
strutturato con una serie di tabelle annidiate.
( per scaricare la tool bar di firefox:
● aprire firefox
● andare all'indirizzo:
● https://addons.mozilla.org/extensions/moreinfo.php?id=60
● cliccare su “install now”
● cliccare su “installa ora” )
Per quanto possa sembrare poco logica, era (ed in alcuni casi è ancora) una
procedura diffusa, anche perché comoda se sviluppata con editor visuali.
La comodità veniva “pagata” con una notevole complessità di codice e poca
chiarezza dei contenuti.
Per diversi motivi, quali l'accessibilità e l'indicizzazione dei motori di ricerca,
molti sviluppatori stanno abbandonando la strutturazione a tabelle. La
tendenza oggi è quella di scrivere un codice HTML rigoroso e racchiudere in
contenuti in elementi denominati DIV e SPAN.
Il W3C definisce i div e gli span in maniera generica, come “raccoglitori di
elementi”:
“ Gli elementi DIV e SPAN, insieme con gli attributi id e class, offrono un
meccanismo generico per aggiungere struttura ai documenti. Questi elementi
definiscono il contenuto o come in riga (SPAN) o come a livello di blocco (DIV),
ma non impongono alcun altro idioma presentazionale sul contenuto. Pertanto,
gli autori possono usare questi elementi in congiunzione con i fogli di stile,
ecc., per adattare l'HTML ai propri bisogni ed ai propri gusti.”
I div sono elementi di blocco. Necessitano del tag di chiusura e hanno come
attributo fondamentale
id = “nome”
L'id identifica il nome, scelto dallo sviluppatore web, per identificare il div, e ad
esempio, attribuirgli determinate proprietà.
ESEMPIO:
Facciamo un esempio, riportando la struttura HTML dell'esercizio della lezione
scorsa (enciclopedia), che era stato strutturato con tre DIV:
uno con <div id=”sommario”> ... </div> che raccoglieva tutta la lista dei link
agli alla spiegazione degli altri tag.
Uno con <div id=”contenuto”>...</div> che raccoglie il contenuti relativi alla
spiegazione del tag a cui la pagina si riferisce
uno con <div id=”footer”></div> che raccoglie le informazioni del piè di
pagina.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
@import "fogliostile.css";
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Enciclopedia del tag</title>
</head>
<body>
<div id="sommario">
<p>TAG:</p>
<ul>
<li><a href="title.htm">title</a></li>
<li><a href="p.htm">p</a></li>
<li><a href="br.htm">br</a></li>
<li><a href="em.htm">em</a></li>
<li><a href="strong.htm">strong</a></li>
<li><a href="acronym.htm">acronym</a></li>
<li><a href="img.htm">img</a></li>
<li><a href="ul.htm">ul - li</a></li>
<li><a href="ol.htm">ol - li</a></li>
<li><a href="table.htm">tabelle - elementi</a></li>
<li><a href="table_2.htm">tabelle - colspan e rowsapan</a></li>
<li><a href="form.htm">form </a></li>
<li><a href="table_3.htm">altri attributi per table</a></li>
<li><a href="fielset.htm">filedset e legend</a></li>
<li><a href="caratteri.htm">tabella dei caratteri</a></li>
</ul>
</div>
<div id="contenuto">
<h1>Nome del tag</h1>
<p>spiegazione</p>
</div>
<div id="footer">
<p>pagina realizzata nel corso IFTS - HTML</p>
</div>
</body>
</html>
Per chiarire la funzionalità del dei div, riportiamo una parte del foglio di stile
collegato alla pagina.
#sommario{
margin-top:0px;
float:left;
width:200px;
text-align:left;
}
#contenuto{ margin-top:5px;
margin-left:205px;
border:1px solid #C6C6FF;
text-align:left;
padding-left:5px;
padding-right:5px;}
#footer{
font-size:8px;
color:#999;}
Il nome che segue il cancelletto corrisponde a quello definito dell'attributo id
del div. Tra le graffe andranno elencate le proprietà specifiche di quel div.
I div possono essere annidati tra loro.
Il Tag span esegue la medesima funzione di div, con la differenza che
“raccoglie” elementi di linea.
Ad esempio possiamo avere all'interno di un paragrafo, del testo che vogliamo
abbia particolari caratteristiche:
<div id="contenuto">
<!-- fare attenzione a < e > -->
<h1> GIACOMO LEOPARDI</h1>
<p>Giacomo Leopardi nacque a Recanati il 29 giugno 1798, primogenito della
più illustre casata del piccolo centro marchigiano. Il padre,
austero e politicamente reazionario, fu, insieme con i precettori
ecclesiastici, il suo primo insegnante.<br />
Ma l'ingegno precocissimo del giovane Giacomo e la sua estrema
sensibilità, frustrati dalla freddezza parentale, lo indussero ben
presto a <span id="colore">riversare tutta la sua passione sui libri
della biblioteca paterna</span> (sette anni di studio "matto e
disperatissimo") e ne fecero un fenomenale autodidatta, esperto in
lingue classiche, ebraico, lingue moderne, storia, filosofia e
filologia (nonché scienze naturali e astronomia).</p>
</div>
parte del foglio di stile sarà:
#colore{
font-size:14px;
color:#FF0000;
}
E il risultato sarà il seguente:
