Contenitori

flexlex

Posted on 22/2/2014, 01:05

.

Group: Mod

Posts: 3,751

Reputation: +53

Location: bolzano/bozen

Status: Offline

Contenitori

Una piccola introduzione
Una piccola guida sui contenitori di tipo block (div) è già stata scritta da Rory, potete trovare la sua discussione qui.

Che tipi di contenitori ci sono?
Principalmente ci sono due tipi di contenitori.
1) Contenitori di html/codice/contenuto.
2) Contenitore di testo.

Posso capire che se vi scrivo questi due tipi di contenitori, siate leggermente confusi. Ma la differenza è ben evidente sia a livello visivo che a livello pratico.

Il div (display:block) è un contenitore che "isola" il contenuto dal resto. Per esempio il "nav" dei forum (MAW > Sezione > topic) sono spesso "confinati" con un bordo ed uno sfondo tutto loro e prendono il "massimo" della larghezza a loro disposizione.
Per esempio:

Sono un div e prendo tutto lo spazio in larghezza.

Di solito un div è "invisibile", appunto bisogna renderlo visibile con dei stili. Rory nella sua guida lo ha fatto con background (o ancora più corretto sarebbe background-color). Io lo ho fatto con delle ombre, poi nelle lezioni di CSS imparerete a stilizzare gli elementi (bottoni, link, div, span, fieldset, e chi più ne ha più ne metta) ed è lì che poi che i contenitori diverranno veramente utili. Ora come ora ci serve solo per "dividere" il contenuto dal resto. C'è anche da dire che gli elementi in "block" (per esempio i div) vanno sempre a capo.

HTML

<div>Contenuto isolato</div>

La contro parte del div è lo span. Lo span contiene testo o immagini e non "isola" il contenuto, ma un frammento di testo. Senza andare a capo, ma rimanendo parte del testo. (Per esempio il tag <u> che serve per sottolineare, non manda a capo il testo, quindi si può dire che è uno span). lo span non applica nessuno stile al testo (non fa grassetto, linee o altro), appunto sempre con il CSS potremmo definire noi gli stili per rendere uno span quello che vogliamo.
Esempio per uno span: Sono un testo normale Io invece sono uno span e io sono nuovamente un testo normale.
La differenza principale è che NON prende tutto lo spazio, non va a capo e non gli si può attribuire una dimensione fissa o variabile (non gli si può dire che deve essere largo quanto il 50% della pagina per esempio, cosa invece possibile con i div).

HTML

<span>Contenuto nello span</span>

Nel passato si usavano i div per centrare il testo, poi per un periodo è andato di moda il tag center, poi il paragrafo con l'allineamento centrale.
Qui i rispettivi codici.

HTML

<div align="center">Contenuto isolato</div>
<center>Contenuto isolato</center>
<p align="center">Contenuto isolato</p>

Questi metodi sono assolutamente da evitare, visto che sono deprecati e non vengono più utilizzati, oggi si usa il CSS, di solito attribuendo una dimensione fissa ad un div e poi dicendogli di "allinearsi" in centro con la proprietà margin. Vedremo poi quando faremo i CSS

Esercizio

Come al solito un link per l'esercizio che sarebbe questo http://jsbin.com/qiwet/1/edit nel quale trovate una pagina bianca. Negli stili ho impostato tutti i div e span in talmodo che siano visibili, quando vengono creati. Il vostro compito è quello di creare un div (se su jsbin digitate "div" e poi premete il tabulatore (il tasto tra caps lock e il tasto backshift (\)) vi creerà automaticamente il tag) e di scrivere dentro "Ciao, sono bello/a e il mio nick su FF è {{Tuo Nick}}". Poi linkate il vostro risultato in questo topic.

P.s
Intanto nella seconda colonna nel esercizio di JSBin potete dare uno sguardo al CSS (Cascading StyleSheet), tutta roba che inizieremo a fare fra 3 lezioni

Quando faremo il CSS potrete dare libero sfogo alle vostre conoscenze, e posso iniziare ad insegnarvi i veri trucchi del mestiere

Fino ad ora siamo solo ai "preparativi".