Corso HTML e CSS (Lezione 12)

Impariamo a costruire un sito Web

Lezione 12: Le sezioni del body

C’è un ultimo gruppo di tag del body che dobbiamo esaminare:

<div> Delimita una sezione del documento
<span> Delimita una sezione del documento

Questi tag, in particolare <div>, sono fondamentali nello sviluppo di una pagina html. La loro descizione abbraccerà quindi più di una lezione.

1) <div> … </div>

Questi tag delimitano una sezione (div sta per division) del documento. A seconda degli attributi di stile il suo comportamento e posizionamento può essere differente. Gli attributi che il tag <div> può avere sono quelli standard:

Attributo Valore Descrizione Obblig./Facolt.
class classname Attribuisce uno stile abbinando una classe. Vedremo successivamente con i CSS Facoltativo
dir rtl
ltr
Specifica la direzione del testo (ltr o rtl) Facoltativo
id id Specifica un id univoco per l’elemento. Vedremo successivamente con i CSS Facoltativo
lang codice linguaggio Specifica un codice linguaggio per il testo associato all’immagine. Facoltativo
style elemento di stile Attribuisce un elemento di stile senza far ricorso ad un foglio CSS. Vedremo successivamente. Facoltativo
title testo Titolo dato all’immagine che comparirà quando si porterà il mouse sull’immagine stessa. Facoltativo
xml:lang codice linguaggio Specifica un codice linguaggio per il testo associato all’immagine in un documento XHTML. Facoltativo

L’uso delle <div> verrà affrontato in dettaglio quando spiegheremo gli attributi dei fogli di stile CSS.

 

2) <span> … </span>

Il tag <span> va usato per raggruppare degli elementi affiancati nel documento. A questi elementi raggruppati si potranno così associare degli attributi di stile.

Gli attributi che possono essere associati direttamente a <span> sono quelli standard visti sopra.

Vediamo un esempio:

<p>
   Una parte di questo testo è <span style="background-color: #e4e4e4;">su sfondo grigio</span>
<p>

A video il browser mostrerà:

Una parte di questo testo è su sfondo grigio

 


A questo punto l’elenco dei tag del <body> è terminato possiamo vedere da qui in poi come inserire questi elementi in un documento html e come personalizzarli associando delle caratteristiche definite nei fogli di stile.

Un foglio CSS è già stato definito più volte. Per capire come funziona vediamone la struttura generale:

Nel foglio CSS si raccolgono delle regole che verranno applicate agli elementi del nostro documento html; ovviamente queste regole vanno scritte rispettando una precisa sintassi. Le regole sono costituite dai seguenti elementi:

Struttura CSS
Struttura CSS

 

Vedremo nelle prossime lezioni il lungo elenco dei selettori e per ciascuno le proprietà che possono essere definite. Alla teoria ovviamente, per rendere fruibile tutta la materia, assoceremo degli esempi pratici cominciando a costruire una pagina html.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.