Tutorial HTML E CSS

HTML e FOGLI DI STILE


HTML – Hype Text Markup Language

CSS - Cascading Style Sheet


Introduzione1989 : Tim Berners-Lee al CERN, progetta il WWW . Primi prototipi nel 1991 con l'idea di un ipertesto multimediale distribuito

L’HTMLL’HTML è il linguaggio con cui potete indicare come i vari elementi vanno disposti in una pagina Web. Hypertext Markup Language (“Linguaggio di contrassegno per gli Ipertesti”)Un documento html è un file di testo con delle indicazioni sul colore delle scritte, sulla posizione delle immagini all’interno della pagina, su come far scorrere il testo, e altre cose di questo genere.

Non è un linguaggio di programmazione, no logica, no errori. Indica solamente la posizione di testo e contenuti.

Il Browser

è il programma che usate quando navigate nel Web e svolge principalmente due compiti:

• scarica i vari file che si trovano su un computer remoto (il server) e che fanno riferimento a un certo indirizzo

• legge i documenti scritti in html, e visualizza la pagina in un certo modo. (RENDERING)

esempi di browser: Internet Explorer, Firefox, Chrome

Ogni browser interpreta in modo diverso l'html e i fogli di stile

E' possibile visualizzare il codice HTML delle pagine intenet premendo assieme i tasti CTRL + U della tastiera oppure tasto destro del mouse scegliendo poi la voce visualizza sorgente


Lo standard HTMLIl W3C World Wide Consortium si occupa di standardizzare l'HTML, di cui ne esistono varie versioni.

Noi studieremo l'HTML ver. 4.01 del 24 dicembre 1999

Ora siamo alla versione 5 con importanti novità ma che non possono prescindere dalla sintassi della versione 4.0

Cosa ci serve• Un browser per visualizzare le pagine

• un editor di testo per scrivere il codice HTML (notepad++) !!! Attenzione alle estensioni dei file in windows !!!

I file html hanno estensione .html o .htm


L'HTML e i TAGL'html è un insieme di marcatori (TAG) Ogni TAG ha un nome e una diversa funzione I tag vanno inseriti tra parentesi angolari <TAG>

La chiusura del tag viene indicata con una “/” detto “slash” </TAG>).

Il contenuto va inserito tra l’apertura e la chiusura del tag medesimo, secondo questa forma:

<TAG attributi> contenuto </TAG>

Esempio : <P align="right">testo</P>

Sintassi degli attributi: attributo="valore"

Quindi

<TAG attributo_1="valore1" attributo_2="valore2">contenuto</TAG>

Alcuni tag non hanno contenuto

<TAG attributi />

Esempio: <IMG widht="20" height="20" src="miaImmagine.gif" alt="immagine" />

Annidamento e indentazioneI TAG possono essere annidati

Ad esempio:

<TAG1 attributi>contenuto 1<TAG2>contenuto 2</TAG2>

</TAG1>

NB. indentazione : buona norma utilizzare dei caratteri di tabulazione in presenza di un annidamento.

Apertura e chiusura del tag si trovano allo stesso livello, mentre il contenuto viene spostato verso destra di un tab

I commenti Per rendere il nostro codice più leggibile inserire dei “commenti” invisibili al browser. Sintassi:



Maiuscolo o minuscolo?L’HTML è “case unsensitive“, cioè indipendente dal formato. Per leggibilità si usava il maiuscolo per il nome del tag (es: <P>) e in minuscolo gli attributi (es: align=”right”). Ora non più.


La Prima Pagina HTML

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”><html>

<head></head><body></body>

</html>

Due Sezioni:

HEAD: Contiene informazioni che riguardano il modo in cui il documento deve essere letto e interpretato. Questo è il luogo dove scrivere – ad esempio – i meta-tag (alcuni sono ad esclusivo beneficio dei motori di ricerca), script JavaScript o VbScript, fogli di stile, eccetera

BODY: Il contenuto vero e proprio

Nell'HEAD ci deve essere:

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>

indica al browser che deve caricare il set di caratteri occidentale (e non – ad esempio – il set di caratteri giapponese).

<title>Nome del sito</title>

Il title è il titolo della pagina e compare in alto sulla barra del browser


Separare il layout dal contenuto L’HTML in origine è nato come linguaggio per formattare i documenti presenti sul Web. Esistono TAG di contenuto e TAG di stile (ad esempio <p>qui il mio testo</p> e <font color=”red”>

Oggi si usano i FOGLI DI STILE e le CLASSI

<p class=”formattaTitoli”>titolo 1

</p>

la colorazione del testo viene affidata alla classe “formattaTitoli”, descritta altrove del documento, o su un file separato. Basta editare la classe “formattaTitoli” per cambiare l’aspetto anche di centinaia di pagine.

Gli elementi HTML e i fogli di stile Un altro concetto importante è che gli elementi vengono classificati nella trattazione a fogli di stile secondo tre tipologie:

Tipologie di tagElementi di blocco

elementi che costituiscono un blocco attorno a sé, e che di conseguenza vanno a capo, come i paragrafi, le tabelle, le form, ma soprattutto i div.

Elementi “inline”

elementi che possono essere integrati nel testo, come i collegamenti o le immagini, oppure gli span

Liste Lista numerate, o non numerate


Classificazione degli elementi HTML e albero del DOM

Elementi blocco (block) ed elementi in linea (inline)Osserviamo una pagina HTML tentando di non pensare al contenuto ma solo alla sua struttura e mettendo in atto una sorta di processo di astrazione.

Pensiamo ad un insieme di rettangoli (box). Non importa che si tratti di paragrafi, titoli, tabelle o immagini: si tratta sempre di box rettangolari.

Alcuni box contengono altri box; Alcuni, se si trovano in mezzo al testo, lasciano che esso scorra loro intornoQuesta è la distinzione tra elementi blocco (quelli contrassegnati dal bordo nero) ed elementi inline (quelli circondati dal bordo rosso).

Gli elementi blocco sono box che possono contenere altri elementi, sia di tipo blocco che di tipo inline. Quando un elemento blocco è inserito nel documento viene automaticamente creata una nuova riga nel flusso del documento. Esempio:

<h1>titolo</h1><p>paragrafo</p>

Le parole “titolo” e “paragrafo” appariranno su due righe diverse, perché <h1> e <p> sono elementi blocco.

Gli elementi inline non possono contenere elementi blocco, ma solo altri elementi inline. Non danno origine ad una nuova riga.

Oltre a questi esistono gli elementi lista e gli elementi connessi alle tabelle.


Struttura ad albero di un documentoIl meccanismo fondamentale dei CSS è l’ereditarietà. Molte proprietà impostate per un elemento siano automaticamente ereditate dai suoi discendenti. Tutti i concetti che spiegheremo qui di seguito sono definiti nel cosiddetto Document Object Model (DOM), lo standard fissato dal W3C per la rappresentazione dei documenti strutturati.

Presentiamo subito un frammento di codice HTML:<html>

<head><title>Struttura del documento</title></head><body>

<h1>Titolo</h1><div>

<p>Primo <a href="pagina.htm">paragrafo</a>.</p></div><p>Secondo <em>paragrafo</em>.</p>

</body></html>

Questa è la sua rappresentazione strutturale secondo il modello ad albero:

Tutti gli elementi hanno tra di loro una relazione del tipo genitore-figlio (parent-child ininglese).

HTML si dice elemento radice (ingl: root).

http://it.wikipedia.org/wiki/Document_Object_Model


Impostare il colore di sfondo In HTML possiamo impostare un colore di sfondo è utilizzando l'attributo del tag body.

<body bgcolor="blue">

bgcolor sta per “background color”, cioè “colore di sfondo”. Molti colori sono disponibili utilizzando le corrispondenti parole chiave in inglese.

In alternativa è preferibile utilizzare lo stile CSS, in quanto il colore di sfondo è una caratteristica estetica della pagina:

<body style="background-color:blue">

È preferibile utilizzare la codifica esadecimale del colore:

<body bgcolor="#0000FF">

Inserire un’immagine di sfondoIn HTML: <body background=”imgSfondo.gif”>

immagine di sfondo che si trova nella stessa cartella della pagina HTML. L’immagine di sfondo verrà ripetuta in orizzontale e in verticale.

Con il CSS:

<body style=”background: #FFFFFF url('imgSfondo.gif') repeat-x repeat-y 0 0”>


Eliminare i margini delle paginePer eliminare il bordo è sufficiente inserire i seguenti attributi del body: <body leftmargin="0" topmargin="0">

oppure <body style=”margin: 0px; padding: 0px”>

Impostare il colore del testo e dei link per tutta la pagina

Il testoDi default il testo di una pagina è nero.

Abbiamo la possibilità di assegnare un colore per il testo di tutta la pagina, semplicemente utilizzando questo attributo del tag <body>:

<body text="red">

Quindi potremo avere, ad esempio:

<body bgcolor="#0000ff" text="#ffffff">

CSS: color: #CC0000;


I linkIl link è un collegamento tra una pagina è l’altra. I link testuali hanno diversi stati:

StatusCodifica inHTML 4.01

Descrizione

Collegamento normale

link Nell’HTML tradizionale il link è sempre sottolineato (è possibile eliminare la sottolineatura in CSS). Di default i link sono blu (#0000FF).

Collegamento visitato visitedUn link è visitato, quando l’URL della pagina compare nella cronologia dell’utente. Di default i link visitati sono di color violetto (più esattamente: #800080).

Collegamento attivo active Il collegamento è attivo nel momento in cui il link è stato cliccato e sta avvenendo il passaggio da una pagina all’altra. Utile quando i modem avevano una velocità molto inferiore a quella odierna.

Collegamento al passaggio del mouse

assente Con l’HTML 4.01 al passaggio del mouse sul link si può fare ben poco, coi fogli di stile invece è possibile creare qualche effetto di visualizzazione, utilizzando la parola chiave hover” nei CSS)

Anche il colore dei link di tutta la pagina può essere tramite gli attributi del body

<body link="red" vlink="green" alink="yellow">

e tramite i CSS:

a:link { color: #FF0000; }

a:visited { color: #00FF00; }

a:hover { color: #FF00FF; }

a:active { color: #0000FF; }


Titoli, paragrafi, blocchi di testo e contenitori Racchiudere il testo in appositi tag a seconda della funzione che il testo sta svolgendo. La pagina risulterà più semplice da leggere, quando dovremo modificarla, e inoltre potremo ottenere la formattazione che desideriamo.

I TAG sono marcatori che ci permettono di mantenere ordine nella pagina e ottenere il layout che desideriamo.

I titoli: h1, h2, …, h6I tag h1, h2 … h6

<h1>titolo 1 </h1><h2>titolo 2 </h2><h3>titolo 3 </h3><h4>titolo 4 </h4><h5>titolo 5 </h5><h6>titolo 6 </h6>

La “h” sta per “heading”, cioè titolo e le grandezze previste sono sei. Dall’<h1>, che è il più importante, si va via via degradando fino all’ <h6>. Il tag

<hx> (sia esso h1 o h6) risulta formattato in grassetto e lascia una riga vuota prima e dopo di sé.

Si tratta di un elemento di blocco (cfr. lezioni precedenti).

Il paragrafo <p>Il paragrafo è l’unità di base entro cui suddividere un testo. Il tag <p> lascia una riga vuota prima della sua apertura e dopo la sua chiusura.

Esempio: due paragrafi

<p>paragrafo 1</p><p>paragrafo 2</p>


Il <div>Il blocco di testo va a capo, ma – a differenza del paragrafo – non lascia spazi prima e dopo la sua apertura.

Esempio: due <div>

<div>Blocco di testo 1</div><div>Blocco di testo 2</div>

Si tratta dell’elemento di tipo block per eccellenza.

Lo <span>Lo <span> è un contenitore generico che può essere annidato (ad esempio) all’interno dei <div>. Si tratta di un elemento inline, che cioè non va a

capo e continua sulla stessa linea del tag che lo include.

Esempio: due <span>

<span>contenitore 1</span><span>contenitore 2</span>

Lo <span> è un elemento molto utilizzato soprattutto insieme ai fogli di stile, ad esempio per definire delle aree di testo particolari. Se non viene

associato ad uno stile risulta praticamente invisibile.


Montare gli elementi insiemeLe caratteristiche più evidenti di <p>, <div> e <span> sono quindi:

• <p> lascia spazio prima e dopo la propria chiusura

• <div> non lascia spazio prima e dopo la propria chiusura, ma – essendo un elemento di blocco – va a capo

• <span> – essendo un elemento inline – non va a capo

Per quel che riguarda i tag heading (<h1>, …, </h6>) è da notare che la grandezza del carattere varia a seconda delle impostazioni che l’utente ha

sul proprio browser.

Allineare il testoI “tag-contenitori” che abbiamo appena visto permettono di allineare il testo utilizzando semplicemente l’attributo align (deprecato: usare CSS).

In ogni caso, vediamo cosa ci è concesso fare per l’allineamento con HTML 4: consideriamo il testo di un paragrafo:

Allineamento Sintassi css

Testo allineato a sinistra

<p align="left">testo</p><p style="text-align: left;">testo</p>

Testo allineato a destra<p align="right">testo</p>

<p style="text-align: right;">testo</p>

Testo giustificato<p align="justify">testo</p>

<p style="text-align: justify;">testo</p>


Andare a capoNell’andare a capo si può commettere l’errore, per fortuna sempre meno diffuso, di lasciare paragrafi vuoti o aperti. Ad esempio:

<p><p><p>

Quando per andare a capo all’interno di un paragrafo possiamo utilizzare il tag <br /> (“break”, cioè “interruzione di riga”).

Se per andare a capo è sufficiente un <br>, per saltare una riga ne occorrono due:

<br /><br />

Un altro valido tag per suddividere la pagina in più parti è il tag <hr /> (“horizontal rule”), che serve per tracciare una linea orizzontale. Eccone un esempio:

Questo tag ha anche alcuni attributi (deprecati, perché la formattazione andrebbe fatta con i CSS):

L’attributo noshade evita di sfumare la linea, size indica l’altezza in pixel, width è la larghezza in pixel o in percentuale, align l’allineamento.

<hr noshade size="5" width="50%" align="center" />


Scegliere lo stile (grassetto, corsivo & C.) Sul Web abbiamo più utenti del documento:

• il lettore, che guarderà alla tipografia e alla rappresentazione grafica del testo;

• il crowler, o altri strumenti automatici, che usano i tag per comprendere il valore che hanno alcune porzioni del documento.

Le note semantiche possono non coincidere necessariamente con una rappresentazione specifica, per questo in HTML solitamente si suddividono i tag in grado di attribuire lo stile al testo in stili fisici e stili logici:

• vengono definiti come logici (o “semantici”) quei tag che forniscono anche informazioni sul ruolo svolto dal contenuto del tag, e in base a

questo adottano uno stile grafico • vengono definiti come fisici quei tag che definiscono graficamente lo stile del carattere, indipendentemente dalla funzione del contenuto del tag.

Gli stili fisici sono sempre più considerati deprecati o comunque desueti perché è più appropriato definire gli stili tipografici tramite CSS.

Gli stili logiciGli stili logici forniscono anche informazioni sul contenuto e la loro formattazione è spesso lasciata al browser, ma ancor di più alla stilizzazione tramite CSS. Ecco un elenco dei principali tag semantici.

TAG Descrizione Esempio Visualizzazione

<em>

Serve per porre l’enfasi su un’espressione (emphasis). Spesso utilizzato per stilizzare il corsivo. Un buon modo per tematizzare la pagina.

Particolare attenzione agli <em>stili semantici</em>

Particolare attenzione agli stili semantici

<strong> Serve a dare una enfasi forte (strong emphasis) a un’espressione. Spesso utilizzato per stilizzare il

Particolare attenzione agli <strong>stili

Particolare attenzione agli stili semantici


grassetto. Un modo molto utilizzato per tematizzare la pagina.

semantici</strong>

<abbr>

Indica un abbreviazione. Si può utilizzare per acronimio abbreviazioni. Spesso è reso con una sottolineatura tratteggiata e con l’acronimo che appare in un fumetto al passaggio del mouse. In HTML5 sostituisce il <acronym>

<abbr title="Responsabilità Civile Auto">RCA</abbr>

<blockquote>Sono blocchi utilizzati per note in evidenza o citazioni. In genere il testo viene rientrato verso destra. l’attributo cite è facoltativo.

<blockquote cite="http://html.it">Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita</blockquote>

Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita

<code>

Nasce per essere un tag “inline”, serve per riportare una parola chiave di un linguaggio di programmazione o una riga di di codice. In genere viene reso con testo monospazio (Courier)

<code>if (document.all) alert ("ciao");</code>

if (document.all) alert("ciao");

<cite>Serve per citare un particolare lavoro all’interno del testo, si tratta in un tag inline e in genere è reso in corsivo.

Come dice la <cite cite="http://html.it">Guida HTML</cite>

Come dice la Guida HTML

<address>

Serve per indicare informazioni di contatto. È semanticamente inutile utilizzarlo per gli indirizzi postali, per quelli meglio utilizzare il microformato hcard. Il testo viene tipicamente visualizzato in corsivo.

<address><a href="http://www.cecchin.it"> Wolfgang Cecchin</a></address>

Wolfgang Cecchin

<dfn>Indica una definizione: il testo è visualizzato in corsivo.

<dfn>L'HTML è un linguaggio di contrassegno</dfn>

L’HTML è un linguaggio di contrassegno

http://www.html.it/pag/16043/scegliere-lo-stile-grassetto-corsivo-c/#

http://html5doctor.com/microformats/#hcard


<keyboard>Indica una digitazione da tastiera: il testo viene visualizzato a spaziatura fissa.

<kbd>digitazione da tastiera</kbd>

digitazione da tastiera

<q>Indica una citazione breve all’interno del testo. Nessun rendering del testo particolare.

Come diceva Don Abbondio: <q>"Il coraggio, uno non se lo può dare"</q>

Come diceva Don Abbondio: “Il coraggio, uno non se lo può dare”

<samp>Indica un esempio. Il testo viene visualizzato a spaziatura fissa.

<samp>ecco un esempio di "samp"</samp>.

ecco un esempio di “samp”

<var> La variabile viene visualizzata in corsivo.Inseriamo i dati nella variabile temporanea <var>temp</var> ...

Inseriamo i dati nella variabile temporanea temp …

<acronym>

Indica un acronimo. Spesso è reso con una sottolineatura continua e con l’acronimo che appare in un fumetto al passaggio del mouse. In HTML5 è deprecato e sostituito da <abbr>

<acronym title="Responsabilità Civile Auto">RCA</acronym> RCA

Gli stili fisiciI principali stili fisici sono:

Codice HTML Visualizzazione Descrizione

<b>testo in grassetto</b> Questo testo è in grassetto Formatta il testo in grassetto.

<i>testo in corsivo</i> Questo testo è in corsivo Formatta il testo in corsivo.

<pre>testo preformattato</pre> PHP_FUNCTION{ zval **parameters;

il testo così come è stato inserito nel file html dall’autore stesso (preformattato quindi), senza


Esempio:

<pre>

PHP_FUNCTION{zval **parameters; zval *value; char* str;

</pre>

zval *value; char* str;

riformattarlo.

<u>testo sottolineato</u> Questo testo è sottolineato Sottolinea il testo presente nel tag.

<strike>testo barrato</strike> Questo testo è barrato Con il testo barrato, vengono indicate (ad esempio) le correzioni.

<sup>testo in apice</sup> E=mc2 “Superscript”: indica al browser di portare il testo al di sopra della linea di scrittura. Utile per formule matematiche (ad esempio le potenze)

<sub>testo in pedice</sub> H2O Subscript

Di fatto i tag <b> e <i> sono sempre meno utilizzati in favore di <strong> e <em>.


Scegliere il font del testo L’utilizzo del tag <font> è deprecato dal W3C. Vediamo presto anche in CSS come si utilizza.

Il tipo di carattere (cioè il “font”) che il browser visualizza di default è il “Times”.

Per scegliere il tipo di carattere con cui un font deve essere visualizzato è sufficiente usare la sintassi:

<font face=”Arial”>testo in Arial</font>

testo in Arial

<font face=”Verdana”>testo in Verdana</font>

testo in Verdana

<font face=”Geneva”>testo in Geneva</font>

testo in Geneva

Sono pochi i caratteri utilizzabili su l web perché i font dovrebbero essere installati sul client

Di solito si indicano una serie di caratteri, fino ad indicare la famiglia a cui il nostra carattere appartiene.


Vediamo alcuni esempi di famiglie “sicure” di caratteri:

<font face=”Verdana, Arial, Helvetica, sans-serif”>Verdana e caratteri simili</font>

Verdana e caratteri simili

<font face=”Arial, Helvetica, sans-serif”>Arial e caratteri simili</font>

Arial e caratteri simili

<font face=”Times New Roman, Times, serif”>Times e caratteri simili</font>

Times e caratteri simili

<font face=”Courier New, Courier, mono”>Curier e caratteri simili</font>

Curier e caratteri simili

<font face=”Georgia, Times New Roman,Times, serif”>Georgia e caratteri simili </font>

Georgia e caratteri simili

<font face=”Geneva, Arial, Helvetica, sans-serif”>Geneva e caratteri simili</font>

Geneva e caratteri simili


Scegliere il colore del testoUna volta scelto il carattere con cui scrivere il nostro testo possiamo scegliere il colore, ecco il codice:

Codice Effetto<font face=”Verdana, Arial, Helvetica, sans-serif” color=”blue”>

testo blu in Verdana

</font>

Una volta scelto il colore possiamo sempre decidere di cambiarlo:

Codice Effetto<font face=”Verdana, Arial, Helvetica, sans-serif” color=”blue”>testo blu in Verdana</font><br /><font face=”Verdana, Arial, Helvetica, sans-serif” color=”red”>testo rosso </font><br />o meglio ancora: <br /><font face=”Verdana, Arial, Helvetica, sans-serif” color=”blue”>testo blu in Verdana <br /><font color=”red”>testo rosso</font><br /></font>

La seconda codifica è preferibile alla precedente, perché la scelta del tipo di carattere viene effettuata una sola volta, evitando così di scrivere del codice inutile. È importante notare che per evitare la ripetizione i due tag sono annidati l’uno dentro l’altro.


Le dimensioni del testoLe dimensioni del testo si attribuisco mediante l’attributo ‘size’ del tag <font>. Ci sono due modi per dare attribuire le dimensioni al testo tramite il

tag <font>:

• valori interi da 1 a 7

• valori relativi alla dimensione di base del tag font (di default “3″)

Nel caso dei valori interi, ecco la scala di grandezza:

Codice Effetto<font size=”1″>testo di grandezza 1</font><br /><font size=”2″>testo di grandezza 2</font><br /><font size=”3″>testo di grandezza 3</font><br /><font size=”4″>testo di grandezza 4</font><br /><font size=”5″>testo di grandezza 5</font><br /><font size=”6″>testo di grandezza 6</font><br /><font size=”7″>testo di grandezza 7</font>

Nel caso dei valori relativi alla dimensione di base è possibile “spostarsi” nella scala di grandezza font utilizzando i segni “+” e “-“.

La grandezza del font di base di default nel browser è 3.


NOTA BENE

In realtà la grandezza del carattere dipende dalle impostazioni del browser dell’utente

L’unico modo per fissare il carattere è (ancora una volta) quello di utilizzare i fogli di stile, esprimendo le dimensioni in pixel.

P{ font-size: 16px; }


Elenchi puntati e numerati Se abbiamo la necessità di inserire un elenco di termini, possiamo utilizzare le “liste”, che sono sostanzialmente di tre tipi:

• Elenchi ordinati

• Elenchi non ordinati

• Elenchi di definizioni

Tutti e tre i tipi di elenchi funzionano nel medesimo modo: si apre il tag, si elencano i vari elementi della lista (ciascuno con il proprio tag), si chiude il tag dell’elenco. La sintassi ha quindi questa forma:

<elenco> <elemento>nome del primo elemento <elemento>nome del secondo elemento</elenco>

come si può vedere, il tag che individua l’elemento della lista non ha bisogno di chiusura (la sua chiusura, in questo caso, è opzionale). Le liste di definizioni hanno una struttura leggermente diversa che vedremo a breve.

Gli elenchi ordinatiIl tag da utilizzare per aprire un elenco ordinato è <ol> (“ordered list”) e gli elementi sono individuati dal tag <li>(“list item”):

Codice ResaTesto che precede la lista<ol> <li>primo elemento</li> <li>secondo elemento</li> <li>terzo elemento</li>

Testo che precede la lista

1. primo elemento 2. secondo elemento


</ol>Testo che segue la lista

3. terzo elemento

Testo che segue la lista

Il tag che individua l’elenco lascia una riga di spazio prima e dopo il testo che eventualmente lo circonda.

Gli elementi dell’elenco sono sempre rientrati di uno spazio verso destra: tutto questo serve a individuare in modo inequivocabile l’elenco.

Lo stile di enumerazione visualizzata di default dal browser è quello numerica, ma è possibile indicare uno stile differente specificandolo per mezzo dell’attributo type.

Gli stili consentiti sono:

Valore dell’attributo type Descrizione Codice Resa

type="1"(è così di default)

numeri arabi

<ol type=”1″><li>primo</li><li>secondo</li><li>terzo</li></ol>

1. primo2. secondo3. terzo

type="a" alfabeto minuscolo

<ol type=”a”><li>primo</li><li>secondo</li><li>terzo</li></ol>

a. primob. secondoc. terzo

type="A" alfabeto maiuscolo <ol type=”A”><li>primo</li><li>secondo</li>

A. primoB. secondo


<li>terzo</li></ol>

C. terzo

type="i" numeri romani minuscoli

<ol type=”i”><li>primo</li><li>secondo</li><li>terzo</li></ol>

i. primoii. secondoiii. terzo

type="I" numeri romani maiuscoli

<ol type=”I”><li>primo</li><li>secondo</li><li>terzo</li></ol>

I. primoII. secondoIII.terzo

Gli elenchi non ordinatiGli elenchi non ordinati sono individuati dal tag <ul> (“unordered list”), e gli elementi dell’elenco sono contraddistinti anch’essi dal tag <li>:

<ul> <li>primo elemento <li>secondo elemento <li>terzo elemento</ul>

il tipo di segno grafico utilizzato per individuare gli elementi dell’elenco di default dipende dal browser, ma di solito è un “pallino pieno”. È possibile comunque scegliere un altro tipo di segno:


Valore dell’attributo type Descrizione Codice Resa

type="disc"(è così di default)

visualizza un “pallino” pieno.È la visualizzazione di default

<ul type=”disc”><li>primo</li><li>secondo</li><li>terzo</li></ul>

primo secondo terzo

type="circle" visualizza un cerchio vuoto al proprio interno

<ul type=”circle”><li>primo</li><li>secondo</li><li>terzo</li></ul>

primo secondo terzo

type="square" Visualizza un quadrato pieno al proprio interno

<ul type=”square”><li>primo<li>secondo<li>terzo</ul>

primo secondo terzo

Da notare inoltre che il tipo di segno grafico, varia in automatico al variare dell’annidamento della lista.

E' sempre meglio utilizzare i CSS Vediamo come...


I link e l’ipertestualità Una delle caratteristiche che ha fatto la fortuna del web è l’essere costituito non da testi ma da ipertesti.

I link sono “il ponte” che consente di passare da un testo all’altro. In quanto tali, i link sono formati da due componenti:

Il Contenuto: È la parte visibile del link, e proprio per questo l’utente deve essere sempre in grado di capire quali sono i collegamenti da cliccare all’interno della pagina

la risorsa: Si tratta di un’altra pagina (sullo stesso server o su un server diverso), oppure è un collegamento interno a un punto della pagina stessa

Link che puntano ad altri documentiQuesto è un link <a href=”http://www.01rabbit.it/”>01RABBIT</a>

Il browser si comporterà in modo differente a seconda della risorsa. Ad esempio:

Immagine .gif, .jpg, .png Viene visualizzata nel browser

Documento .html, .pdf, .doc La pagina è visualizzata nel browser.

File .zip, file .exe Viene chiesto all’utente di scaricare il file

<a href=”mailto:[email protected]”>Mandami una e-mail</a>


I percorsi assoluti e relativi

Percorsi assolutiFino a quando ci troviamo nella condizione di creare un sito web di dimensioni ridotte (poche pagine) non avremo problemi di complessità, e possiamoanche ipotizzare di lasciare tutti i nostri file in una medesima cartella. È evidente però che – man mano che il nostro sito web cresce – avremo bisogno di un maggior ordine.

Si presenterà allora l’esigenza di inserire le immagini del sito in una cartelle diverse (in modo da averle tutte nella medesima locazione), e magari sarà opportuno dividere il sito in varie sezioni, in modo da avere tutti i documenti dello stesso tipo all’interno di un contesto omogeneo.

Poiché l’organizzazione di un sito in directory e sottodirectory è una cosa normalissima, dobbiamo imparare a muoverci tra i vari file che costituiscono il sito stesso, in modo da essere in grado di creare collegamenti verso i documenti più reconditi, destreggiandoci tra le strutture più ramificate.

Per farlo esistono due tecniche:

• indicare un percorso assoluto

• indicare un percorso relativo

Nel caso in cui il documento a cui vogliamo puntare si trovi in una particolare directory del sito di destinazione, con i percorsi assoluti non abbiamo che da indicare il percorso per esteso.

Se esaminiamo:

Leggi le risorse sui <a href=”http://www.html.it/css/index.html”>fogli di stile</a>


Percorsi relativiPer riferimenti a documenti nel vostro stesso sito e magari non avete ancora un indirizzo web è utile utilizzare i percorsi relativi.

I percorsi relativi fanno riferimento alla posizione degli altri file rispetto al documento in cui ci si trova in quel momento.Per linkare due pagine che si trovano all’interno della stessa directory è sufficiente scrivere:

<a href=”paginaDaLinkare.html”>collegamento alla pagina da linkare nella stessa directory della pagina presente</a>

Poniamo ora di trovarci in una situazione di questo genere:

Figura 1. Riferimento a pagina di una sottodirectory

Dalla pagina “index.html” vogliamo far riferimento al file “interna.html”, che si trova all’interno della directory “interna”, che a sua volta si trova all’interno della directory “prima”.

La sintassi è la seguente:

<a href=”prima/interna/interna.html”>Visita la pagina interna</a>

Vediamo adesso l’esempio opposto: dalla pagina interna vogliamo far riferimento a una pagina (“index.html”) che si trova più in alto di due livelli:


Figura 2. Riferimento a pagina in una directory di livello superiore

La sintassi è la seguente:

<a href=”../../index.html”>Visita la pagina interna</a>

Come si vede, con i percorsi relativi valgono le seguenti regole generali:

Per far riferimento a un file che si trovi all’interno della stessa directory basta linkare il nome del file

<a href=”paginaDaLinkare.html”>collegamento alla pagina</a>

Per far riferimento a un file contenuto in una cartella di livello inferiore alla posizione corrente, basta nominare la cartella seguita dallo “slash”, e poi il nome del file.

<a href=”prima/interna/interna.html”>Visita la pagina interna</a>

Per tornare su di un livello, è sufficiente utilizzare la notazione:../nomeFile.html

<a href=”../../index.html”>Visita la pagina interna</a>

A volte potrete incontrare la notazione: Leggi le risorse sui <a href=”/css/index.html”>fogli di stile</a>

Se il vostro sito è all’interno di un server Unix (ma la sintassi funziona anche in sistemi Windows, basta che non siano in locale) il carattere ‘/’ indica ladirectory principale del sito. Dunque <a href=”/css/index.html”> è un altro modo di esprimere i percorsi assoluti all’interno del proprio sito.


Consigli per i nomi dei file• non utilizzare mai spazi vuoti nei nomi dei file

• maiuscole e minuscole sono differenti

I link interni o ancore È possibile creare un link interno al documento, utilizzando le ancore.

<a name=”primo”>Stiamo per esaminare la struttura…. Eccetera…</a>

E' possibile far riferimento all’ancora presente all’interno del documento attraverso un link

<a href=”#primo”>vai al primo paragrafo</a>

il cancelletto indica che il collegamento deve cercare un ancora chiamata “primo” all’interno della pagina stessa.

Se non si specifica il nome dell’ancora a cui si vuol puntare, viene creato un link che punta ad inizio pagina.


Gli attributi dei link

targetÈ possibile specificare in quale finestra la pagina linkata deve essere aperta: di default all’interno del documento stesso, ma è possibile specificare che la pagina sia aperta in una nuova finestra: <a target="_blank" href="http://www.html.it">visita HTML.IT</a>

titleL’attributo title serve per specificare un testo esplicativo per l’elemento a cui l’attributo è riferito. Questa spiegazione addizionale favorisce l’accessibilità del sito anche ai disabili, alle persone per esempio che hanno disturbi alla vista. Se lasciate il cursore del mouse per qualche secondo su

un collegamento dotato di title, vedrete comparire una specie di etichetta con il testo specificato nel title:

<a title="titolo del link" href="http://www.01rabbit.it/" target="_blank" >Visita www.01rabbit.it</a>

L’attributo title è anche utilissimo per migliorare la propria presenza nei motori di ricerca, che ne vanno a leggere il contenuto.

http://www.01rabbit.it/

http://webdesign.html.it/guide/leggi/46/guida-accessibilita-dei-siti-web-teorica/


Inserire le immagini Nelle pagine HTML possiamo inserire anche delle immagini: diagrammi e grafici, fotografie, e in genere immagini create con un programma di elaborazione grafica (come GIMP o Photoshop).

La sintassi per inserire una immagine è:

<img src="http://miosito.it/miaImmagine.gif" alt="testo" />

Il tag <img /> è un tag senza un contenuto, per questo non ha un elemento </img> di chiusura: lo chiudiamo utilizzando lo slash (“/”) prima della

parentesi angolare.

I formati ammessi nel Web sono sostanzialmente tre:

Formato Descrizione

GIF(Graphic Interchange Format): le immagini GIF hanno una tavolozza che non supera i 256 colori, per questo vengono utilizzate spesso per grafici o icone. GIF ci consente di impostare trasparenze nelle immagini e di creare piccoli banner, questo formato consente infatti di rappresentare anche semplici animazioni (GIF animate)

JPG (o JPEG) Idoneo per le immagini di qualità fotografica

PNG

(Portable Network Graphic). Il PNG è un tipo di immagine introdotto più recentemente, elaborato dal W3C per risolvere i problemi di copyright del formato GIF (che è invece proprietario); oggi il PNG è letto da tutti i browser e offre il supporto al canale alfa (caratteristica questa non ancora perfettamente supportata da ogni browser). PNG permette sia di rappresentare immagini di qualità fotografica (PNG24), sia di ottimizzare colori in modo simile a GIF (PNG8 – 256 colori)

Attenzione a non inserire immagini troppo pesanti; evitare di sovraccaricare la pagina con troppe immagini. Un peso eccessivo rende le pagine lente dacaricare e questo può diventare un problema sia per gli utenti, sia per i motori di ricerca.

Resta valido il discorso sui percorsi relativi ed assoluti visto in precedenza

http://www.w3c.org/

http://miosito.it/miaImmagine.gif

http://grafica.html.it/guide/leggi/189/guida-photoshop-cs5/

http://grafica.html.it/guide/leggi/15/guida-gimp/


Dal momento che il browser non sa quali siano le dimensioni dell’immagine finché questa non sia caricata completamente è un’ottima abitudine quella di indicare già nel codice la larghezza (width) e l’altezza (height) dell’immagine: in questo modo si evita di vedere la pagina costruirsi man mano che viene caricata, poiché stiamo dando al browser un’idea dell’ingombro.

Ad esempio:

<img src="logo.gif" width="224" height="69" />

L’attributo alt è utile per specificare il testo alternativo (alternative text)

<img src="logo.gif" alt="HTML.it" width="224" height="69" />

L’attributo alt è di estrema utilità per rendere il sito accessibile.

L’attributo title è simile ad alt

È inoltre possibile specificare la grandezza (in pixel) del bordo attorno all’immagine:

<img src="logo.gif" border="3" width="224" height="69" />

Immagini con i linkI link per default lasciano sempre un bordo di un pixel attorno all’immagine

<a href="http://www.html.it" target="_blank"><img src="logo.gif" width="224" height="69" border="0" /></a>Dunque, nel caso dei link se non si desidera avere i bordi, sarà necessario impostarli a “0″


Disporre le immagini in un contesto Se inserita in un testo, normalmente una immagine blocca il testo che non scorre intorno all'immagine.

Possiamo utilizzare l’attributo align=”left” e align=”right”:

Altri valori possibili sono:

Valore di align Visualizzazione

bottomallinea la prima riga di testo sulla sinistra nella parte bassa dell’immagine (è così di default).

middle allinea la prima riga di testo sulla sinistra al centro dell’immagine.top allinea la prima riga di testo sulla sinistra nel lato superiore dell’immagine.

Infine hspace (horizontal space, cioè “spazio orizzontale”) e vspace (vertical space, cioè “spazio veritcale”) possiamo impostare lo spazio (in pixel) che deve essere lasciata tra l’immagine e cioè che la circonda.

Ovviamente meglio impostare lo spessore e il colore dei bordi, gli spazi e la disposizione del testo attorno alle immagini attraverso i fogli di stile.


Le mappe di immagine A volte è necessario far sì che solo una determinata parte di un’immagine sia collegata a un link. È il tipico caso delle Regioni d’Italia: abbiamo una cartina e abbiamo la necessità che alla sagoma di ciascuna regione corrisponda un differente link.

Questo tipo di mappa è contraddistinto dall’attributo usemap del tag img:

<img src=”miaImmagine.gif” usemap=”nomeMappa”>

come valore dell’attributo usemap bisogna specificare il nome della mappa a cui l’immagine fa riferimento.

A questo punto non ci resta che creare la mappa:<map name=”nomeMappa”>…</map>

All’interno del tag <map> dobbiamo poi specificare le aree sensibili a cui corrisponderanno i nostri link, con relativi forme, coordinate e collegamenti.Per farlo si utilizza il tag <area>, per ogni zona sensibile che vogliamo creare.

Vediamo un esempio: abbiamo preso la cartina dell’Italia e – a scopo puramente didattico – abbiamo deciso di mappare la Regione Valle D’Aosta con una forma rettangolare, la Sardegna con un cerchio, e la Sicilia con un poligono (per rendervene conto passate il mouse su una di queste regioni).


Figura 1. Esempio di immagine con mappe

<img alt=”Esempio di immagine con mappe” src=”italia.gif” width=”220″ height=”235″ border=”1″ usemap=”#regioni”><map name=”regioni” id=”regioni”>

<area shape=”rect” coords=”14, 24, 35, 37″ href=”http://www.regione.vda.it/” target=”_blank” alt=”Valle d’Aosta”><area shape=”circle” coords=”45, 156, 29″ href=”http://www.regione.sardegna.it/” target=”_blank” alt=”Sardegna”><area shape=”poly” coords=”105, 199, 115, 197, 121, 200, 131, 201, 139, 198, 150, 197, 156, 195, 151, 201, 145, 209, 148, 212, 150, 219, 152,

225, 147, 227, 144, 231, 128, 221, 119, 219, 113, 212, 108, 212, 102, 210, 98, 205″ href=”http://www.regione.sicilia.it/” target=”_blank” alt=”Sicilia”></map>

le coordinate fanno riferimento all’immagine stessa, e il vertice in alto a sinistra è l’ipotetico punto con coordinate 0,0. Le coordinate dei punti che descrivono le varie forme si riferiscono alla distanza in pixel da quel punto (si tratterà di volta in volta della x o della y).


Come si può vedere per definire un’area è necessario specificare una forma, che può essere di tre tipi:

Forma Descrizionerettangolare

<area shape=”rect”>

è necessario specificare alcune coordinate del rettangolo per individuare i veritici. In particolare sono da specificare (in quest’ordine):

• la x del lato di sinistra • la y del lato alto • la x del lato destro • la y del lato in basso

circolare

<area shape=”circle”>

è necessario specificare le coordinate del centro (x e y) e la misura del raggio (in pixel)

poligonali

<area shape=”poly”>

è necessario specificare tutte le coordinate del poligono a coppie

In ciascun tag <area> è inoltre possibile specificare l’attributo alt per il testo alternativo

Per il resto, il tag <area> si comporta esattamente come il tag <a>, con la possibilità di specificare ad esempio il target in cui aprire i link.


Tabella: struttura di baseLe tabelle sono tra le componenti più importanti dell’HTML: nate per impaginare dati aggregati, si sono poi trasformate in uno strumento indispensabile per gestire i layout grafici, per tornare, nell’epoca dei CSS, ad essere elementi utilissimi per rappresentare informazioni.

Immaginiamo la nostra prima tabella come una griglia formata da righe e colonne. I tag necessari per creare una tabella sono:

Tag Descrizione<table> apre la tabella<tr> “table row”: indica l’apertura di una riga<td> “table data”: indica una cella all’interno di una riga

Il numero delle celle all’interno di ciascuna riga deve essere costante.

Esaminiamo alcuni attributi classici dell’HTML conviene utilizzare i CSS.

Gli attributi delle tabelleL’attributo border permette di specificare di quanti pixel deve essere il bordo delle tabelle.

<table border="1"><tr>

<td>prima cella</td><td>seconda cella</td></tr><tr>

<td>terza cella</td><td>quarta cella</td></tr>

</table>


Che viene visualizzato così:

prima cella seconda cella

terza cella quarta cella

Possiamo specificare la larghezza e l’altezza delle tabelle tramite gli attributi width e height che possono essere riferiti a tutti e tre i tag (<table>, <tr>, <td>). Il valore in pixel o in percentuale (il numero deve essere allora seguito dal simbolo “%”): la tabella si adatta secondo lo spazio a disposizione.

<table width="300" height="200" border="1"><tr>

<td>prima cella</td><td>seconda cella</td></tr><tr>

<td>terza cella</td><td>quarta cella</td></tr>

</table>




Oppure:

<table width="75%" border="1"><tr>

<td width="25%">prima cella</td><td width="75%">seconda cella</td>


</tr><tr>

<td width="25%">terza cella</td><td width="75%">quarta cella</td></tr>

</table>




gruppi di righe: <caption>, <thead>, <tfoot>, <tbody> Consentono di capire quali siano le diverse parti della tabella.

<caption> è l’intestazione, il titolo con un commento esplicativo sulla tabella

<thead> è l’intestazione, la parte iniziale della tabella, quella che contiene ad esempio indicazioni sul contenuto delle celle

<tfoot> è il piede, la conclusione della tabella, quella che consente ad esempio di tirare le somme

<tbody> è il corpo, la parte centrale con il contenuto vero e proprio della tabella

Le celle all’interno del tag <thead> possono essere indicate con <th> (“table header”), al posto del consueto <td> (“table data”), il contenuto delle celle è automaticamente formattato in grassetto e centrato.


Figura 1. Elementi della tabella


Raggruppare gli stili delle colonneCosì come è possibile suddividere le righe di una tabella in gruppi ordinati, allo stesso modo è possibile raggruppare gli stili delle colonne. Il tag da usare è il <colgroup> e serve per fornire indicazioni su come le colonne debbano essere visualizzate.

Vediamo prima due attributi:

Attributo Descrizione

alignPuò essere riferito sia a <tr>, sia a <td> e serve per definire l’allineamento dei contenuti a sinistra, a destra o al centro (left, right, center)

bgcolorPuò essere riferito tanto a <table>, <tr>, o <td> e, come abbiamo visto a proposito del <body>, consente di impostare un colore di sfondo

colgroupIl tag <colgroup> permette di impostare un layout unico per le colonne senza avere la necessità di specificare allineamento del testo, o il colore di

sfondo per ogni singola cella.

Con l’attributo span (da non confondere con il tag <span>) possiamo

impostare il numero di colonne che fanno parte del gruppo.

Per avere un layout di questo genere:

Basterà quindi scrivere:

<table width="75%" border="1"><colgroup bgcolor="#00FFCC" width="20%" align="right"></colgroup><colgroup span="2" bgcolor="#33CCFF" width="30%" align="center"><caption><div align="center"><b>Fatturato dell'azienda XYZ</b></div></caption> <thead>

<tr><th>Mesi di attività</th><th>Fatturato da attività 1 (in euro)</th><th>Fatturato da attività 2 (in euro)</th>

</tr></thead>

</table>

Raggruppare celle con rowspan e colspan E' possibile raggruppare le celle. E' necessario specificare che una cella deve occupare il posto di n colonne. Si utilizza l’attributo colspan sul <td>, specificando come valore il numero di celle che devono essere occupate. Ad esempio:

<td colspan=”2″> Il cui codice corrispondente è:

<table width=”430″ border=”1″ bordercolor=”#000000″><tr><td width=”30%”></td><td width=”30%”></td><td width=”30%”></td></tr><tr><td></td><td colspan=”2″ align=”center” valign=”middle”><b><td colspan=”2″></b></td></tr>

</table>


L’attributo rowspan (da riferirsi sempre a <td>) serve per creare delle celle che occupino più di una riga. Ad esempio:

<td rowspan=”2″>

Annidare tabelleÈ anche possibile annidare le tabelle le une dentro le altre. Come in questo esempio:

<table width=”430″ border=”1″><tr><td width=”50%”></td><td width=”50%”></td></tr><tr>

<td height=”24″></td><td><table width=”100%” border=”1″>

<tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr>

</table></td></tr>

</table>


Attributi del tag tableI seguenti attributi di TABLE ci permettono di regolare le distanze tra i margini della tabella (o della cella) e il contenuto:

border (che abbiamo già visto) specifica la larghezza dei bordi di una tabella (in pixel)

cellspacing specifica la distanza (in pixel) tra una cella e l’altra, oppure tra una cella e il bordo. Di default è un pixel, dunque occorrerà sempre azzerarlo esplicitamente, quando non lo si desideri

cellpadding indica la distanza tra il contenuto della cella e il bordo. Se il valore viene indicato con un numero intero, la distanza è espressa in pixel; il cellpadding tuttavia può anche essere espresso in percentuale. Di default la distanza è nulla

La dimensione indicata nel cellpadding e dal cellspacing – una volta specificata – haeffetto su tutti i lati della cella.

I rapporti tra gli attributi che abbiamo appena esaminato sono regolati come segue:

<table width=”75%” border=”1″ cellpadding=”10″ cellspacing=”0″>


Attributi di <table>, <tr>, <td> I seguenti attributi invece hanno invece valore per tutti gli elementi della tabella (<table>, <tr>, <td>), li presenteremo quindi in un medesimo contesto.

Dimensioni

width e height che determinano la larghezza e l’altezza (in pixel o in percentuale) di tabelle, righe o celle.

Lo sfondo

bgcolor, oppure con una immagine background,

L’allineamento

align, se riferito al tag <table>, sposta la tabella

<table align=”right”>

Se riferito a <tr> o a <td> sposta invece il contenuto

<td align=”right”>contenuto</td>

valign per l’allineamento verticale delle celle. I valori possibili sono top (alto), middle (in mezzo – è il valore di default), bottom (in basso), baseline (alla linea di base). <td height=”100” valign=”middle”>contenuto</td>

Colori dei bordi bordercolor

NB Quando una cella non viene riempita con un qualsiasi elemento la visualizzazione non sempre è corretta. Usare o <br>


Impaginare un layout con le tabelle Le tabelle sono state e sono utilizzate tantissimo per visualizzare i layout grafici

È vero che l’impaginazione a tabelle ha fatto il suo tempo:

• perché mischia la visualizzazione dei dati ai dati stessi, e dunque è difficile da gestire

• perché riempie le pagine con molto codice rallentando lo scaricamento

Oggi siamo in un periodo di transizione. Gli sviluppatori dai “vecchi” modi di costruire i siti web (a tabelle), dovrebbero migrare verso qualcosa di nuovo: verso una impaginazione che utilizzi i fogli di stile e l’(x)html.

L’impaginazione a tabelle rimane, tuttavia, senz’altro una pietra miliare del web.


Comporre una pagina in frame

Comporre una pagina in frameI frame servono per suddividere una finestra del browser in vari riquadri indipendenti.

Permetteva notevoli vantaggi:

• Fino a qualche tempo fa la velocità di navigazione era bassissma. Con i frame potevo caricare solo una parte della pagina.

• Potevo riutilizzare codice per testata footer e parti ripetitive

• Potevo mantenere fisso il menu di navigazione e far scorrere solo il contenuto

• Oggi sono utilizzati per aggiornare solo parti delle pagine tramite AJAX ma questa è un'altra storia :-)

Per utilizzare i frame, è necessario creare la dichiarazione della struttura che vogliamo utilizzare. Vediamo subito il codice:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//IT” “http://www.w3.org/TR/html4/frameset.dtd”><html><head><meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″><title>HTML.it</title></head><frameset rows=”50%,50%” cols=”50%, 50%”><frame src=”prima.html”><frame src=”seconda.html”><frame src=”terza.html”><frame src=”quarta.html”>


<noframes><p>Qui può essere indicato il link a <a href=”senzaFrame.html”> una versione del sito</a> che non utilizzi un layout a frame</p></noframes></frameset></html>

Cambia il doctype, cioè il tipo di documento di riferimento.

Invece di <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//IT”>

si deve scrivere: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//IT” “http://www.w3.org/TR/html4/frameset.dtd”>

stiamo indicando semplicemente al browser che facciamo riferimento alle specifiche che servono per regolare il comportamento dei frame.

Scompare il tag <body> e al suo posto troviamo il tag <frameset> (“set di riquadri”), che ci permette di indicare come devono essere indicati i framesall’interno della pagina

Il tag <frameset> ha sostanzialmente due importanti attributi: rows e cols:

• rows permette di specificare il numero e la grandezza delle righe, nel caso in cui venga omesso, significa che ci troviamo di fronte a una

struttura a colonne . <frameset cols=”33%, 33%,*”>

• cols permette di specificare il numero e la grandezza delle colonne e, nel caso in cui venga omesso significa che ci troviamo di fronte una

struttura a righe <frameset rows=”33%, 33%,*”>

Possiamo lasciare che una o più righe si auto-dimensionino, utilizzando l’asterisco; Normalmente esprimiamo la grandezza dei riquadri come dimensione fissa, percentuale o proporzionale: <frameset rows=”1*,3*” cols=”3*,2*,1*”>

http://html.it/guide/esempi/guida_html/frames/frameset3/indice.html





Con il tag FRAME specifichiamo dove si trova il file di ciascun frame. <frame src=”prima.html”>

Se le dimensioni del riquadro non sono sufficienti a mostrare il documento nella sua interezza, il frame avrà delle barre di scorrimento

È possibile assegnare name e id ad ogni frame <frame id=”primoRiquadro” name=”primoRiquadro” src=”prima.html”>

Frameset annidatiÈ possibile annidare diversi frames l’uno dentro l’altro. Al posto di uno dei tag <frame> è sufficiente includere le indicazioni del nuovo frameset. Così:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//IT” “http://www.w3.org/TR/html4/frameset.dtd”><html><head><meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″><title>HTML.it</title></head><frameset rows=”15%,70%,15%”>

<frame src=”11.html”><frameset cols=”25%,50%,25%”><frame src=”21.html”><frame src=”22.html”><frame src=”23.html”></frameset>

<frame src=”12.html”><noframes><p>Qui può essere indicato il link a <a href=”senzaFrame.html”> una versione del sito</a> che non utilizzi un layout a frame</p></noframes></frameset>

</html>


Attributi del frameset<frameset frameborder=”no” cols=”25%,75%”>

L’attributo frameborder (di default impostato a “yes”) permette di specificare se nel frameset devono essere presenti i bordi.

<frameset framespacing=”20″ border=”20” cols=”25%,75%”>

framespacing funziona solo con Internet Explorer e permette di impostare lo spazio tra un frame e l’altro. Di fatto equivale all’attributo border, che permette di specificare lo spessore deibordi in pixel.

<frameset border=”10″ framespacing=”10″ bordercolor=”#FF0000” cols=”25%,75%”>

bordercolor permette di specificare il colore dei bordi del frameset.

Attributi dei frame

<frame src=”prima.html” scrolling=”no”><frame src=”prima.html” scrolling=”auto”>

L’attributo scrolling (di default impostato a “yes”) indica se si vuol consentire all’utente di poter scorrere il frame oppure no.scrolling può anche essere impostato ad “auto”. In questo caso la barra di scorrimento compare in automatico, ma solo se necessario

<frame src=”prima.html” scrolling=”no”><frame src=”prima.html” scrolling=”no” noresize>

noresize impedisce al singolo frame di essere ridimensionato.

Se usato in unione con scrolling=”no”,di fatto “blocca” il contenuto del frame.


<frame src=”prima.html” frameborder=”0”>

frameborder conesente di far apparire o meno i bordi del frame (i valori ammessi sono “0″ e “1″,ovvero “no” e “yes”).

Questo attributo permette di specificare un valore differente da quello impostato nel frameborder del <frameset>

<frame marginwidth=”50″ marginheight=”50″ src=”prima.html”>

marginheight e marginwidth permettono di impostare la distanza verticale (marginheigth) e orizzontale (marginwidth) fra i bordi del frame e il suo contenuto.

Il target dei link in un framesetGrazie all’attributo target possiamo specificare qual’è la destinazione del link; con questa sintassi siamo dunque in grado di caricare il contenuto di un collegamento nel riquadro che riteniamo più opportuno: <a href="paginaDaLinkare.html" target="nomeDelFrame">

Ci sono poi delle “parole chiave” che ci consentono di ricaricare i link in destinazioni predefinite:

target=”_blank” Apre il link in una nuova finestra, senza nome

target=”_self” Apre il link nel frame stesso

target=”_parent” l documento viene caricato nel frameset precedente a quello corrente (più esattamente nel frame genitore)

target=”_top” Il documento viene caricato nella finestra originale, cancellando ogni struttura a frame.


Il tag noframes<noframes> questo tag serviva per browser particolarmente obsoleti che non erano in grado di leggere e visualizzare una struttura frameset.

Tutti i browser odierni sono in grado di interpretare correttamente la struttura di un frameset, ma i motori di ricerca sono paragonabili a browser obsoleti, per questo motivo alcuni di essi “catturano” il contenuto del <noframes> come descrizione di un sito.

L’iframe “Iframe” significa “inline frame”: in qualsiasi momento in un documento che non utilizzi una struttura a frame è possibile creare un frame al volo grazie a questo tag.

Possiamo specificare la larghezza e l’altezza del tag, mentre gli attributi di visualizzazione sono gli stessi del tag <frame> si tratta di una vera e propriafinestra verso l’esterno all’interno di un documento ordinario.

<iframe src="http://pro.html.it" width="300" height="300"> Contenuto alternativo per i browser che nonleggono gli iframe. </iframe>

http://pro.html.it/


Ecco un elenco degli attributi per personalizzare l’iframe, incluse alcune novità introdotte con HTML5

Attributo Valori Descrizionesrc URL L’indirizzo che contiene il contenuto dell’iframewidth in pixel L’altezza dell’iframeheight in pixel L’altezza dell’iframename stringa Il nome dell’iframeseamless seamless Indica che l’iframe appariràà come parte del documentoscrdoc codice HTML Permette di inserire direttamente l’HTML del contenuto

sandbox

"" allow-formsallow-same-originallow-scriptsallow-top-navigation

Abilita una serie di restrizioni aggiuntive ai contenuti del’iframe, utile soprattutto per questioni di sicurezza

Quello che segue invece è un elenco degli attributi deprecati, o aboliti da HTML5:

Attributo Valori Descrizione

alignleft, right, top, middle,bottom

Ignorato in HTML5 era già deprecato in HTML 4.0.1 e serviva per specificare l’allineamento dell’iframe

scrolling yes, no, auto Indica se visualizzare o meno le barre di scorrimento nell’iframeframeborder 0,1 Ignorato in HTML5, serviva a mostrare o a nascondere il bordo dell’iframe

longdesc URLIgnorato in HTML5, specifica una pagina che contiene una descrizione approfondita dell’iframe

marginwidth e marginheight

pixelIgnorati in HTML5, indicano rispettivamente il margine orizzontale e verticale dell’iframe


Vantaggi e svantaggi dei frames Vantaggi

• Dal punto di vista dell’utente: evitare di ricaricare le parti comuni

• Dal punto di vista del webmaster: includere il layout comune in pochi files

• Dal punto di vista dell’utente: mantenere in vista alcuni punti del layout

Gli svantaggi sono superiori ai vantaggi

I motori di ricerca infatti navigano di link in link attraverso il web per catturare contenuti da indicizzare.

È frequente che una struttura a frame sia inserita all’interno di un motore di ricerca in modo errato.

Oggi la banda a disposizione si è ampliata, i CSS alleggeriscono la struttura dei siti e rendono possibile alcune soluzioni che prima erano difficili e la gestione dei contenuti può essere semplificata utilizzando le inclusioni lato server.


Struttura del tag form Il form è un modulo di immissione dati. L’invio dei dati è solitamente organizzato in due parti:

• una pagina principale che contiene i vari campi dei form, che consentono all’utente di effettuare delle scelte, scrivere del testo, inserire

un’immagine • una pagina secondaria che viene richiamata dalla principale e che effettua “il lavoro” vero e proprio di processare e raccogliere i dati.

Di norma sitratta di una pagina di programmazione che si trova sul server. Può essere un cgi, oppure una pagina asp, php, jsp o altro

Noi ci occuperemo della sola pagina principale.

Il tag <form>: si tratta di un elemento di blocco, lascia uno spazio prima dell’apertura e dopo la chiusura.

<form name=”datiUtenti”action=”paginaRisposta.php”>…</form>

“name” serve per indicare il nome del form, “action” indica l’URL del programma o della pagina dirisposta che processerà i dati.

Grazie all’“action” è anche possibile far sì che i dativengano inviati in e-mail al webmaster (si tratta infatti a tutti gli effetti di un riferimento a un URL). Il codice è questo:

<form action=”mailto:[email protected]?subject=Oggetto predefinito” enctype=”text/plain” method=”POST”>

vedremo in una delle prossime lezioni come utilizzare concretamente questa sintassi.


MethodQuando creiamo un form possiamo scegliere due metodi di invio: GETe POST.

Con il metodo GET la pagina di risposta viene contattata e idati vengono inviati nell’URL (“query string“, cioè nella “stringa di interrogazione“) secondo questa forma:

paginaRisposta.php?nome=Wolfgang&cognome=Cecchin&datiInviati=prova+invio

i dati (nella forma nome del campo = valore del campo) sono appesi alla pagina dopo il punto interrogativo.

La sintassi perl’invio in get è: <form name=”datiUtenti” action=”paginaRisposta.php”method=”GET”>

Nel metodo POST invece l’invio dei dati avviene in due step: prima viene contattata la pagina sul server che deve processare i dati, e poi vengono inviati i dati stessi. La sintassi è: <form name=”datiUtenti” action=”paginaRisposta.php”method=”POST”>

Enctype (tipo di codifica)

Prima di passare i dati alla pagina di risposta i dati vengono codificati dal browser. Quando è necessario inviare un’immagine o un file, è indispensabiledichiarare espressamente quali dati vogliamo inviare.

<form name=”datiUtenti” action=”paginaRisposta.php”method=”post” enctype=”multipart/form-data”>

target

con l’attributo “target” è possibile far aprire i dati del form in una pagina differente rispetto a quella corrente


Il tag Input Tra i campi dei form il tag più utilizzato è l’<input>. Per specificare il tipo di campo è necessario specificare l'attributo type

<input type=”text”> <input type=”button”>

tra gli attributi il name e il value <input type=”text” name=”tuoTesto” value=”qui il tuo testo”>

I bottoni (sumbit, reset, button, image) Necessari per l'invio dei dati o per la cancellazione

<input type=”submit” value=”invia I dati”>

Ad esempio:

<form action=http://www.01rabbit.it target=”_blank”><inputtype=”text”><br><input type=”submit”value=”salva”><input type=”reset” value=”cancella”><input type=”button”value=”bottone generico” onclick=”javascript: alert('ciao')”>

</form>

Il tag <button>Il tag <button>, a differenza del tag <input>, dà la possibilità di inserire del testo o un immagine tra l’apertura e la chiusura del tag medesimo. <button type=”button”>bottone generico </button><buttontype=”reset”>cancella</button>


<button type=”submit”>invia</button>

Il campo imageL'input con type=“image” ci consente di utilizzare come bottoni delle vere e proprie immagini

<input name=”invia il modulo” type=”image” src=”invia.gif” alt=”invia il modulo” title=”invia il modulo” width=”78″ height=”38″>

Inserire testo (campo testo, textarea, password)

Per consentire all’utente di inserire del testo è possibile utilizzare un “campo testo”. Se il campo è su una singola linea avremo:

<input name="mioTesto" type="text" value="qui il tuo testo" size="40" maxlength="200" />

maxlength indica il numero massimo di caratteri che l’utente può inserire, con size si esprimono invece le dimensioni del campo di testo

“textarea” (area di testo). Ecco la sintassi: <textarea name="testo" rows="5" cols="40"> qui puoi scrivere il tuo testo</textarea>

rows e cols indicano le righe e le colonne visualizzate

il campo password che mostra degli asterischi al posto dei caratteri inseriti :

<input type="password" maxlength="8" size="18" value="mia_password" name="mioTesto" />

attributo readonly="readonly" per avere un campo in sola lettura

Oppure disabled="disabled" per disabilitare il campo


checkbox, radio, selectElementi che permettono agli utenti di effettuare delle scelte tra valori preimpostati.

Checkbox: per le scelte multiple.

<form action=""><p>Linguaggi conosciuti</p>

<input type="checkbox" name="html" value="html" checked="checked"/> html <br /> <input type="checkbox" name="css" value="css"/> css <br /> <input type="checkbox" name="javascript" value="javascript"/> JavaScript </form>

I radio button (“bottoni circolari”) consentono di effettuare una scelta esclusiva.

<form action=""><p>Linguaggi conosciuti</p>HTML <input type="radio" name="linguaggio" value="html" checked="checked"/><br/>CSS <input type="radio" name="linguaggio" value="css"/>JavaScript <input type="radio" name="linguaggio" value="javascript"/>

</form>

Menu di opzioni (select)

Grazie al tag <select> è possibile costruire dei menu di opzioni. Ciascuna voce deve essere compresa all’interno del tag <option> e il valore deve essere specificato attraverso l’attributo “value”. Con l’attributo “selected” si può indicare una scelta predefinita:

<form>


<p>Siti per webmaster</p><select name="siti" >

<option value="http://www.html.it" selected="selected">www.html.it</option><option value="http://freephp.html.it">frephp.html.it</option><option value="http://freasp.html.it">freasp.html.it</option>

</select></form>

utilizzando l’attributo “multiple” è possibile fare delle scelte multiple utilizzando il tasto CTRL. Tramite l’attributo “size” si può regolare l’altezza del menu, aggiungendo o togliendo la barra di scorrimento verticale.

Altri campi (file e hidden) Potremmo avere la necessità di passare dei parametri “privati” senza far percepire la loro presenza all’utente. In questo caso possiamo utilizzare dei campi nascosti, presenti all’interno del form ma invisibili all’utente (ricordiamoci sempre di specificare la coppia “nome-valore”):

<input type=”hidden” name=”urlDiProvenienza” value=”www.html.it”>

Il campo “file”, consente invece di inviare un file sul server, nel caso in cui la pagina di risposta sia stata programmata correttamente. La sintassi è:

<form action=”pagina.php”><input name=”fileUtente” type=”file” size=”20″></form>

http://freasp.html.it/

http://freephp.html.it/

http://www.html.it/

http://www.html.it/


Includere script JavaScript o CSS esterni

JavaScriptCominciamo subito con il dire che JavaScript non è Java. JavaScript è un linguaggio di scripting, eseguito dal browser, che permette di creare interattività all’interno della pagina.

La sintassi JavaScript deve essere inserita all’interno del tag <script>. Così:

<script type="text/javascript">function ciao(){ alert ("ciao");}</script>

e poi nella pagina:

<input type="button" value="clicca" onClick="ciao()">

I CSS (i fogli di stile)Infine i fogli consentono di impostare il layout di un documento. La sintassi per includerli all’interno della pagina è:

<style type=”text/css”>…</style>


I meta tag Utili per i motori di ricerca, si scrivono nell'head del documento.

<title> imposta il titolo della pagina.

Il meta-tag “description” permette di impostare una descrizione sintetica del sito stesso. Compare talvolta nei risultati della ricerca:

<meta name=”description” content=”questa è la descrizione del sito”>

“keywords” permette di indicare alcune parole chiave per la ricerca del sito da parte dei motori di ricerca. Le keywords compaiono separate da virgola o spazio

<meta name=”keywords” content=”html wml xml smil javascript”>

È fortemente sconsigliabile l’inserimento di keyword “astute” non relative al contenuto effettivo del sito.


Il foglio di Stile CSS: regole, proprietà, commenti Vediamo gli elementi costitutivi di un foglio di stile CSS. Osserviamo questa porzione di codice:

body {background: white;color: black;

}/* Stili per i titoli h1 */h1 {

color: red;font: 36px Helvetica, Arial, sansserif;

}

/* Colore del testo delle liste */li {color: green;}/* Colore dei titoli h1 per la stampa */

@media print { h1 {color: black;}

}

Nello snippet abbiamo inserito le tre tipologie di dichiarazioni che è possibile inserire in un CSS:

• regole;

• commenti;

• direttive @-rules.

Un foglio di stile è un insieme di regole, dei commenti e direttive @-rule. commenti e @-rule sono opzionali e facoltativi, Vediamo come si compongono le regole.


Regole CSSL’illustrazione mostra la tipica struttura di una regola CSS. Essa è composta da dueblocchi principali:

• il selettore;

• il blocco delle dichiarazioni.

Il selettore serve a definire la parte del documento cui verrà applicata la regola (tagH1) le dichiarazioni indicano come formattare gli elementi (sfondo rosso, colore del testo bianco).Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe. Al suo interno possono trovare posto più dichiarazioni. Una dichiarazione è composta da una coppia proprietà : valore;

La proprietà definisce un aspetto dell’elemento/selettore da modificare (margini, colore di sfondo, larghezza, etc) secondo il valore espresso. Proprietàe valore devono essere separati dai due punti. Le dichiarazioni vanno invece separate con un punto e virgola.

Proprietà singole e a sintassi abbreviata

Esistono proprietà singole e proprietà a sintassi abbreviata con le quali definiamo un insieme di proprietà in un unica regola.

• margin-top

• margin-right

• margin-bottom

• margin-left

Si può utilizzare la scorciatoia margin : div {margin: 10px 5px 10px 5px;}

altre scorciatoie sono background; border; margin; padding;


Commenti

Nello snippet di codice visto ad inizio lezione, le parti racchiuse tra i segni /* e */, rappresentano commenti al codice.

I commenti sono utili per aggiungere annotazioni esplicative di vario tipo a beneficio di chi scrive e consulta il codice.

Le @-rules

Il terzo tipo di dichiarazione che è possibile inserire in un CSS è rappresentato dalla cosiddette direttive @-rules. Il nome deriva dal fatto che questo

particolare tipo di istruzione è contrassegnato nella sua definizione dal simbolo/prefisso @ (at):

@media print { h1 {color: black;} }

Indicano l'applicazione delle regole solo per la stampa, o per diverse dimensioni dello schermo (utilizzate per la programmazione dei siti mobili)


Valori e unità di misura nei CSSUna proprietà CSS può essere impostata con l’assegnazione di un valore. Ci sono diverse tipologie di valori che vedremo.1. I valori di una proprietà non vanno mai messi tra virgolette tranne che per l'indicazione dei font

p {font-family: "Times New Roman", Georgia, serif;}

2. Quando si usano valori numerici con unità di misura, non bisogna lasciare spazio tra numero e sigla dell’unità. È corretto quindi scrivere 15px

oppure 15em. È invece sbagliato usare 15 px o 15 em. In questi casi la regola sarà ignorata o mal interpretata.

Tipi di valore

Nei CSS i valori possono essere espressi da:

• numeri interi (1, 23, 45, etc.) o in virgola mobile (1.2, 3.45, 4.90, etc.)

• unità di misura

• percentuali

• codici per la definizione dei colori

• URI

• parole chiave (keywords)

• stringhe di testo

p {lineheight: 1.2;}div {width: 300px;}div {width: 60%;}body {backgroundcolor: #2795b6;}body {backgroundimage: url(sfondo.jpg);}body {backgroundrepeat: norepeat;}fontfamily: "Times New Roman";


Unità di misura Dimensioni: Questa è la lista delle unità di misura usate per definire dimensioni, spazi o distanze. Nella pratica comune vengono usati solo em e px ; elenchiamo comunque tutte per completezza.

Unità di misura Descrizionein (inches – pollici) classica misura del sistema metrico americano. Praticamente nullo il suo valore su un supporto come un browser web.cm (centimetri) stesso discorso visto per i pollici, la difficoltà maggiore sta nella resa su monitor, che è altra cosa rispetto alla carta stampata.mm (millimetri) vedi quanto detto per centimetri e pollici.

pt (points – punti)unità di misura tipografica destinata essenzialmente a definire la dimensione dei font. Il suo utilizzo è di fatto limitato ai CSSper la stampa.

pc (picas) unità poco usata. 1 pica equivale a 12 punti.

em (em-height)unità di misura di ampio utilizzo se si desidera impostare le dimensioni dei font o dei box con un unità di misura relativa.

ex (ex-height) di fatto inesistente il suo utilizzo. 1ex equivale all’altezza del carattere x minuscolo del font scelto.px (pixels) unità di misura ideale per gli schermi. È quella più usata e facile da comprendere.

Percentuale: Un valore espresso in percentuale è da considerare sempre relativo rispetto ad un altro valore, in genere quello espresso per l’elementoparente.

Colori:

parole chiave (black | navy | blue | maroon | purple | green | red | teal | fuchsia | olive | gray | lime | aqua | silver | yellow | white )

Notazione esadecimale: #RRGGBB e notazione decimale: color: rgb(0%, 0%, 0%) oppure color: rgb(0.6, 0.6, 0.6);


Stringhe

Alcune proprietà dei CSS possono avere come valore una stringa di testo da inserire come contenuto aggiunto nel documento.

Valori URI

Si tratta di URL che puntano a documenti esterni (in genere immagini, come negli sfondi). Possono essere URL assoluti o relativi. In questo caso il percorso fa sempre riferimento alla posizione del foglio di stile e non del documento HTML.

La definizione dell’indirizzo è sempre introdotta dalla parola chiave url e va inserita tra parentesi tonde, con o senza virgolette. Queste possono essere

singole o doppie. Un esempio:

backgroundimage: url(sfondo.jpg);

backgroundimage: url('sfondo.jpg');

backgroundimage: url("sfondo.jpg");


Inserire i fogli di stile CSS in un documento Ci sono CSS esterni e interni. È esterno un foglio di stile definito in un file separato dal documento. Si tratta di documenti di testo modificabili anche con un editor di testo ai quali si assegna l’estensione .css.

Un foglio di stile si dice invece interno quando il suo codice è compreso in quello del documento.Uno stile può essere anche inlinea

Fogli di stile collegati: utilizzando il tag <link> nell head

<html><head><link href="stile.css" rel="stylesheet" type="text/css"></head>

<body>[...]</body></html>

Attributi di link

Attributo Descrizione

reldescrive il tipo di relazione tra il documento e il file collegato. È obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet.

href serve a definire l’URL assoluto o relativo del foglio di stile. È obbligatorio

type identifica il tipo di dati da collegare. Per i CSS il valore da usare è text/css. L’attributo non è più obbligatorio a partire dalla versione 5 del linguaggio HTML.

media con questo attributo si identifica il supporto (schermo, stampa, etc.) cui applicare un particolare foglio di stile. È un attributo opzionale.


Fogli incorporati

I fogli incorporati sono quelli inseriti direttamente nel documento HTML tramite il tag <style> all’interno della sezione <head>:

<html><head>

<style type="text/css">body {background: white;}p {color: black;}[…]

</style></head><body>[...]</body></html>

Il tag <style>. Esso può avere due attributi: type (opzionale); media (opzionale).

Per entrambi gli attributi valgono le osservazioni viste in precedenza. Seguono le regole del CSS e la chiusura di </style>.

CSS in linea

utilizzando l'attributo style direttamente nell'html, applicabile a tutti gli elementi. <elemento style="proprietà: valore; proprietà : valore;"><h1 style="color: red; background: black;">...</h1>

Come valore di style si possono dichiarare più regole di stile separate dal punto e virgola. I due punti introducono il valore della proprietà

Consigli

Usare sempre fogli di stile esterni. Con i fogli di stile si ha riuso del codice, pagine più leggere e leggibili, facilità di modificare gli stili per un intero sito.


I selettori CSS di base: universale, di tipo, id, classi Una regola CSS viene applicata ad un selettore.

La parola parla da sé: si tratta di una semplice dichiarazione che serve a selezionare la parte ole parti di un documento soggette ad una specifica regola.

Selettore universale

Il selettore universale serve infatti a selezionare tutti gli elementi di un documento. Si esprime con il carattere * (asterisco).

* {color: red;}

Selettore di tipo (o selettore di elementi)

È il più semplice dei selettori. È costituito dal nome di uno specifico TAG HTML. Seleziona tutti gli elementi di quel tipo presenti in un documento.

h1 {color: green;}p {backgroundcolor: yellow;}

Raggruppare i selettori

È possibile raggruppare diversi selettori con le virgole

Il raggruppamento è un’operazione molto conveniente. Pensate a questo scenario:

h1, h2, h3 {background: white; color: red; fontsize: 18px;}

Si possono raggruppare anche tipi diversi.


Id e classi

Id e classi sono la chiave per sfruttare al meglio questo linguaggio.

In HTML esistono due attributi globali applicabili a tutti gli elementi: sono id e class.

L'id viene spesso utilizzato per javascript, la class viene utilizzata per i CSS

<p class="testobianco">....</p><p id="mioparagrafo">....</p>

L'attributo non modifica nulla, a meno che non viene trovato in un foglio di stile css:

.testobianco {color: white;}

#mioparagrafo {color: red;}

Il testo del nostro paragrafo sarà ora formattato secondo i nostri desideri: testo bianco.

Lo stesso meccanismo è valido per i selettori di tipo id.

Attenzione: In un documento HTML l’attributo id è usato per identificare in modo univoco un elemento. l’id dichiarato nel CSS trasformerà solo

quel paragrafo specifico. Una singola classe, al contrario, può essere assegnata a più elementi, anche non dello stesso tipo.

<p class="testobianco">....</p><div class="testobianco">....</div><ul class="testobianco">...</ul>

La classe .testobianco presente nel CSS formatterà allo stesso modo il testo del paragrafo, del div e della lista.

La strategia dovrà dunque essere questa: se uno stile va applicato ad un solo specifico elemento usate un id. Se invece prevedete di usarlo più volte,

ovvero su più elementi, definite nel CSS una classe.


Selettore di classi

Per definire una classe si usa far precedere il nome da un semplice punto: .nome_della_classe

Questa è la sintassi di base. Un selettore di classe così definito può essere applicato a tutti gli elementi di un documento HTML.

Esiste un secondo tipo di sintassi: elemento.nome_della_classe

lo stile verrà applicato solo ai paragrafi che presentino l’attributo class="nome_della_classe".

Il secondo tipo di sintassi va usato solo se pensate di applicare una classe ad uno specifico tipo di elemento (solo paragrafi o solo div, e così via). Se invece ritenete di doverla applicare a tipi diversi usate la sintassi generica.

Selettore di id

La sintassi per il selettore id è semplicissima. Basta far precedere il nome dal simbolo di cancelletto #: #nome_id

#titolo {color: blue;}

assegniamo il colore blue all’elemento che presenti questa definizione nel codice HTML: <h1 id="titolo">...</h1>


Ereditarietà, cascata, conflitti tra gli stili Ereditarietà

Il primo concetto è quello di ereditarietà. Secondo questo meccanismo le impostazioni di stile applicate ad un elemento vengono ereditate anche dai suoi discendenti.

Vediamo di chiarire con un esempio. Impostiamo il colore grigio scuro per il testo a livello dell’elemento body:

body {color: #222;}

Tutti gli elementi discendenti di body, erediteranno questa impostazione. Ma se ad un certo punto definiamo nel codice del CSS un selettore con la proprietà color: white; l’ereditarietà viene spezzata:

body {color: #222;}li {color: white;}

Gli elementi li avranno perciò il testo bianco.

Non tutte le proprietà sono ereditate: margini, bordi, padding, background le ad esempio non si possono ereditare.


Peso e origine

Si possono presentare dei conflitti di stile:

p {color: black;}.testo {color: white;}

e in una pagina HTML scrivo

<p class="testo">Testo del paragrafo</p>

Cosa succederà?

Il concetto di PESO. Si riferisce alla maggiore o minore importanza da assegnare a ciascuna regola.

Specificità

La specificità descrive il peso relativo delle varie regole all’interno di un foglio di stile. Esistono regole ben precise per calcolarla e sono quelle che applica un browser quando si trova davanti ad un CSS. I fattori del calcolo sono tre e ciascuno di essi rappresenta il valore di una tripletta. Per prima

cosa si conta il numero di selettori id presenti nella regola. Si passa quindi a verificare la presenza di classi e pseudo-classi. Infine si conta il

numero di elementi definiti nella regola. Mai come in questo caso urge l’esempio.

In linea di massima gli ID sono più importanti delle CLASSI che sono più importanti dei SELETTORI

#id .class P

cascata

Il browser verifica prima le @-rule poi la specificità tenendo conto però che una regola scritta inlinea, è più importante di quella scritta nel documento che è più importante di quella nel foglio di stile. Se ho più fogli di stile, ha più importanza l'ultima regola scritta. Se una dichiarazione viene

accompagnata dalla parola chiave !important essa balza al primo posto nell’ordine di applicazione a prescindere da tutto


Il box model Si tratta del meccanismo che governa la presentazione dei vari elementi di una pagina. Abbiamo mostrato che una pagina HTML non è altro che un insieme di box rettangolari, che si tratti di elementi blocco o di elementi inline.

Elementi block-level

• Un elemento block-level può contenere altri elementi block-level e anche elementi inline, mentre un elemento inline può contenere solo altri

elementi inline. • Ad un elemento block-level si possono attribuire delle dimensioni.

• Un elemento block level di dimensioni non specificate occupa tra margini, bordi, padding e contenuto, tutta la larghezza messa a disposizione

del suo box contenitore. In verticale occuperà l’altezza necessaria al suo contenuto.

Elementi inline

• Ad un elemento inline, a meno che questo non venga dichiarato float, posizionato o modificandone la sua natura con la proprietà display,

non si possono attribuire delle dimensioni. • Elementi inline adiacenti vengono disposti orizzontalmente, mentre elementi blocco vengono disposti verticalmente.

• Un elemento inline occuperà sia in orizzontale che in verticale l’altezza necessaria al suo contenuto

Tutto l’insieme di regole che gestisce l’aspetto visuale degli elementi blocco viene in genere riferito, appunto, al cosiddetto box model.


Ogni box comprende un certo numero di componenti di base, ciascunomodificabile con proprietà dei CSS. La figura qui sotto mostra visivamente talicomponenti:

Partendo dall’interno abbiamo:

• L’area del contenuto. Le dimensioni dell’area possono essere

modificate con la proprietà width e height.

• Il padding. È uno spazio vuoto tra l’area del contenuto e il bordo

dell’elemento. Come si vede nella figura, se si imposta un colore disfondo per un elemento, esso si estende dall’area del contenuto allazona di padding.

• Il bordo. È una linea di dimensione, stile e colore variabile che circonda la zona del padding e l’area del contenuto.

• Il margine. È uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti.

Il box model è governato da una serie di regole di base concernenti la definizione di un box e il suo rapporto con gli altri elementi.

Attenzione nel calcolo della larghezza del box : margine sx + bordo sx + padding sx + area del contenuto + padding dx + bordo dx + margine dx

Se non si imposta alcun valore per la proprietà width o se il valore usato è auto la larghezza di un box è uguale a quella dell’area del contenuto

dell’elemento contenitore.

Solo per tre proprietà è possibile impostare il valore auto: margin, height, width. L’effetto dell’uso di auto è quello di lasciar calcolare al

browser l’ammontare del valore per ciascuna di queste proprietà

I margini possono avere valori negativi. Ciò non è consentito per padding, bordi, altezza e larghezza.

A seconda del browser due margini verticali adiacenti possono collassare nel senso che il margine non sarà la somma ma quello maggiore


Impostare l’altezza con i CSS: le proprietà height e overflow In genere l’altezza di un elemento è determinata dal suo contenuto.

La proprietà height

Questa proprietà definisce la distanza tra il bordo superiore e quello inferiore di un elemento. selettore {height: valore;}

Il valore può essere espresso da un valore numerico con unità di misura, un valore in percentuale rispetto all’altezza del blocco contenitore, purchéesso abbia un’altezza esplicitamente dichiarata, auto: l’altezza sarà quella determinata dal contenuto.

Le proprietà min-height e max-height

Imposta un’altezza minima o massima per un elemento. selettore {minheight: valore;}

La proprietà overflow

Collegata alla proprietà height è la proprietà overflow. Essa fornisce un modo per gestire il contenuto che superi i limiti imposti con height.

Serve infatti per definire il comportamento di un elemento blocco nel caso il suo contenuto ecceda dalle sue dimensioni.

selettore {overflow : valore;}

I valori possono essere espressi con le parole chiave:visible: valore iniziale, il contenuto eccedente rimane visibile; hidden: il contenuto eccedente non viene mostrato; scroll: il browser crea barre di scorrimento che consentono di fruire del contenuto eccedente; auto: il browser tratta il contenuto eccedente secondo le sue impostazioni predefinite; di norma dovrebbe mostrare una barra di scorrimento laterale.


Impostare la larghezza con i CSS: la proprietà width Bisogna distinguere tra tre concetti:

• la larghezza dell’area del contenuto;

• la larghezza complessiva;

• la larghezza dell’area visibile.

La prima è data dal valore della proprietà width.

La seconda corrisponde allo spazio occupato sulla pagina compresi i margini ed è data da questa somma:

margine sinistro + bordo sinistro + padding sinistro + area del contenuto + padding destro + bordo destro +margine destro

La terza corrisponde allo spazio occupato sulla pagina esclusi i margini, parliamo insomma della parte del box delimitata dai bordi e a cui si può applicare uno sfondo. È data da questa somma:bordo sinistro + padding sinistro + area del contenuto + padding destro + bordo destro

La proprietà widthCon la proprietà width, dunque, impostiamo la larghezza dell’area del contenuto di un box, esclusi padding e bordi:

selettore: {width: valore;}

La proprietà min-width e max-width

come per min-height e max-height


Margin: gestire i margini con i CSS I margini consentono di impostare con precisione la distanza tra gli elementi. Possiamo definire il margine come la distanza tra il bordo di un elemento e gli elementi adiacenti.

Sono cinque le proprietà con cui è possibile definire un margine. Quattro impostano la distanza per ciascun lato del box. L’ultima, margin, è una

proprietà a sintassi abbreviata utile per definire con una sola dichiarazione tutte le impostazioni per i quattro lati.

Margin-top, margin-right, margin-left, margin-bottomImposta la distanza due elementi adiacenti sia inverticale che in orizzontale, in alto, in basso, a destra o a sinistra. Si applica a tutti gli elementi e non è ereditata.

selettore {margintop: valore;}selettore {marginright: valore;}selettore {marginbottom: valore;}selettore {marginleft: valore;}

I valori possibili sono:

• un valore numerico con unità di misura: il valore è espresso in termini assoluti;

• un valore in percentuale: il valore è calcolato come percentuale rispetto alla larghezza (width) del blocco contenitore;

• auto: il browser calcola automaticamente la distanza.

Assegnando il valore auto le proprietà margin-right e margin-left su elementi che abbiano una larghezza (width) specificata, si ottiene l’effetto di

centrare orizzontalmente un box.

Per i margini verticali ricordiamo che se per un elemento si imposta un margine inferiore ed esso si trova sopra ad un altro elemento che abbia impostato un margine superiore, la distanza tra i due sarà quella maggiore e non data dalla somma delle due proprietà.


margin

È una scorciatoia. Con essa è possibile specificare in una sola regola i valori per tutti e quattro i lati di un elemento. Si applica a tutti gli elementi e non è ereditata. I tipi di valori esprimibili sono gli stessi visti per le proprietà singole.

selettore {margin: valore1, valore2, valore3, valore4;}

esempio: div {margin: 10px 15px 10px 20px;}

L’ordine di lettura va inteso in senso orario, il primo valore si riferisce al lato superiore, il secondo a quello destro, il terzo al lato inferiore, il quarto a quello sinistro. Nella definizione dei valori è possibile mischiare percentuali con valori assoluti in unità di misura.

Un’ulteriore abbreviazione della sintassi si può ottenere usando tre, due o un solo valore. Queste le regole:

• se si usano tre valori, il primo si riferisce al margine superiore, il secondo a quelli sinistro e destro, il terzo a quello inferiore;

• se si usano due valori, il primo si riferisce ai lati superiore e inferiore, il secondo al sinistro e al destro;

• se si usa un solo valore, un uguale distanza sarà applicata ai quattro lati.


Il padding con i CSS Il padding è utile per creare spazio intorno al contenuto del box. Tra margini e padding la differenza è che quando si usa il padding, lo spazio di distanza viene inserito all’interno dei bordi dell’elemento e non all’esterno. La cosa risulta evidente se si usa per l’elemento un colore di sfondo diverso da quello della pagina.

Nella sintassi funziona in modo simile ai margini. Anche qui quattro proprietà singole per i lati e una a sintassi abbreviata (padding).

padding-top, padding-right, padding-left, padding-bottomImposta l'ampiezza del padding sia in verticale che in orizzontale, in alto, in basso, a destra o a sinistra. Si applica a tutti gli elementi e non è ereditata.

selettore {paddingtop: valore;}selettore {paddingright: valore;}selettore {paddingbottom: valore;}selettore {paddingleft: valore;}

I valori possono essere:

• un valore numerico con unità di misura;

• un valore in percentuale calcolato come percentuale rispetto alla larghezza (width) del blocco contenitore.

padding

E' una scorciatoia come per margin. Serve a impostare i valori del padding per tutti e quattro i lati di un elemento. Valgono per essa tutte le osservazioni

e le regole sintattiche viste per la proprietà margin.

selettore {padding: valore1, valore2, valore3, valore4;}

esempio: div {padding: 10px 15px 10px 20px;}


Border e outline: gestire i bordi con i CSS Anche per i bordi ci sono proprietà singole e proprietà a sintassi abbreviata. Le prime definiscono singoli aspetti di ciascuno dei quattro bordi. Le seconde consentono di riunire in una sola regola le diverse impostazioni.

Sono proprietà singole:

bordertopcolor, bordertopstyle, bordertopwidth, borderbottomcolor, borderbottomstyle, borderbottomwidth, borderrightcolor, borderrightstyle, borderrightwidth, borderleftcolor, borderleftstyle, borderleftwidth

Sono proprietà a sintassi abbreviata:

border, borderbottom, bordertop, borderright, borderleft, bordercolor, borderstyle, borderwidth

Iniziamo a vedere come impostare le proprietà per un singolo bordo. Questa la sintassi di base con le proprietà singole:

selettore {border<lato>color: <valore>; border<lato>style: <valore>;border<lato>width: <valore>;

}

E questa la sintassi abbreviata:

selettore {border<lato>: <valore width> <valore style> <valore color>;

}


Di ciascun lato si possono definire per il bordo tre aspetti:

1. il colore (color); 2. lo stile (style); 3. lo spessore (width).

I valori possibili per il colore sono:

• un qualsiasi colore;

• la parola chiave inherit.

Il colore può essere espresso in RGB, o ESADECIMALE. Se non si imposta un valore specifico, il colore sarà quello di primo piano impostato con la

proprietà color.

Lo stile di un bordo può invece essere espresso con una delle seguenti parole chiave:

Stile bordo Descrizionenone l’elemento non presenta alcun bordo e lo spessore equivale a 0hidden equivalente a nonedotted bordo a puntinidashed bordo a lineettesolid bordo solido e continuodouble bordo solido, continuo e doppiogroove tipo di bordo in rilievoridge altro tipo di bordo in rilievoinset effetto ‘incastonato’outset effetto ‘sbalzato’


Infine abbiamo lo spessore. Esso può essere modificato secondo i seguenti valori:

• un valore numerico con unità di misura;

• thin: bordo sottile;

• medium: bordo di spessore medio;

• thick: bordo di spessore largo.

Nel caso delle parole chiave la dimensione esatta non è specificata dal linguaggio.

Esempi:

div {borderleftcolor: black;borderleftstyle: solid;borderleftwidth: 1px;

}

div {borderleft: 1px solid black;}

Definire stili per tutti e quattro i bordiSe si vogliono impostare stili per tutti e quattro i bordi del box, si hanno ancora una volta due opzioni. La prima è da usare quando si vogliono impostare insieme i quattro bordi ma si vuole assegnare a ciascuno uno stile diverso in quanto a colore, spessore, stile:

selettore {borderwidth: <valortop valoreright valorebottom valoreleft>;borderstyle: <valortop valoreright valorebottom valoreleft>;bordercolor: <valortop valoreright valorebottom valoreleft>;

}Valgono le regole di margin e padding


L’ultima proprietà a sintassi abbreviata è border. Con essa possiamo definire con una sola regola le impostazioni per i quattro bordi a patto che abbiano tutti lo stesso colore, lo stesso stile e lo stesso spessore.

Selettore { border: <valore spessore> <valore stile> <valore colore>; }

div {border: 2px solid black;}


Gestire il colore con i CSS Definizione dei colori: I colori possono essere espressi in vari modi nel contesto di una regola CSS.

Parole chiave: Si tratta di sedici keyword che definiscono i colori della palette VGA standard di Windows:

black | navy | blue | maroon | purple | green | red | teal | fuchsia |olive | gray | lime | aqua | silver | yellow | white

codici con notazione esadecimale: Le prime due lettere (o numeri) corrispondono ai valori per il colore rosso (RED), la seconda coppia fa riferimento

al verde (GREEN), l’ultima al blue (BLUE). Il codice va preceduto dal simbolo del cancelletto (#) ( color: #CC0000 )

È possibile abbreviare se le due lettere per i singoli colori sono duplicate (color: #C00)

I valori possono essere espressi anche in percentuale (da 0% a 100%) o con una scala che va da 0 (il nero) a 255 (il bianco)

color: rgb(0%, 0%, 0%);color: rgb(0, 0, 0);

La proprietà color

Per ogni elemento si possono definire almeno tre colori: il colore di primo piano; il colore di sfondo; il colore del bordo;

La proprietà color definisce esclusivamente il colore di primo piano, ovvero quello del testo;

La proprietà color si applica a tutti gli elementi ed è ereditata.

selettore {color: valore;}

I valori possibili sono: qualunque valore di un colore definito con i metodi visti sopra;

la parola chiave inherit: con essa si dice esplicitamente al browser di ereditare le impostazioni definite per l’elemento parente.


Gestione dello sfondoLa lista delle proprietà per lo sfondo, applicabili a tutti gli elementi:background-color background-image background-repeat background-attachment background-position

Background-color Definisce il colore di sfondo di un elemento. Questa proprietà non è ereditata.

selettore {background-color: valore;}

Valori: un qualunque colore oppure la parola chiave transparent

background-image Definisce l’URL di un’immagine da usare come sfondo di un elemento. Questa proprietà non è ereditata.

selettore { background-image: url(valore); }

background-repeat: consente di definire la direzione in cui l’immagine di sfondo viene ripetuta. Proprietà non ereditata.

selettore {background-repeat: valore;}

Valori: repeat. L’immagine viene ripetuta in orizzontale e verticale. È il comportamento standard. repeat-x. L’immagine viene ripetuta solo in orizzontale. repeat-y. L’immagine viene ripetuta solo in verticale.no-repeat. L’immagine non viene ripetuta.

body { background-image: url(sfondo.gif); background-repeat: repeat; }


background-attachment Con questa proprietà si imposta il comportamento dell’immagine di sfondo rispetto all’elemento cui è applicata e all’intera finestra del browser. Si decide, in pratica, se essa deve scorrere insieme al contenuto o se deve invece rimanere fissa. Proprietà non ereditata.

selettore {background-attachment: valore;}

Valori: scroll. L’immagine scorre con il resto del documento quando si fa lo scrolling della pagina fixed. L’immagine rimane fissa mentre il documento scorre

body { background-image: url(back_400.gif); background-repeat: repeat-x; background-attachment: fixed; }

background-position: Definisce il punto in cui verrà piazzata un’immagine di sfondo non ripetuta o da dove inizierà la ripetizione di una ripetuta.

selettore {background-position: valoreOriz | valoreVert;}

I valori specificano le coordinate di un punto sull’asse verticale e su quello orizzontale e possono essere espressi con diverse unità di misura e modalità:con valori in percentuale con valori espressi con unità di misura con le parole chiave top, left, bottom,right

body { background-image: url(back_400.gif); background-repeat: no-repeat; background-position: 50px 50px;}

Significa che l’immagine apparirà a 50px dal bordo superiore e a 50px da quello sinistro della finestra.

Logica vuole che si impostino due valori. Definendone uno solo esso sarà usato sia per l’asse orizzontale che per quello verticale.


background

la proprietà background è una scorciatoia, possiamo definire in un colpo solo tutti gli aspetti dello sfondo. Deve contenere almeno la definizione del colore di sfondo.

selettore { background: background-color background-image background-repeat background-attachment background-position; }

I valori non vanno separati da virgole. L’ordine non è importante, ma quello dato è il più logico e andrebbe rispetatto: si va in ordine di importanza.

body { background: white url(sfondo.gif) repeat-x fixed; }


Gestione del testo: proprietà di baseLe proprietà di base definiscono i seguenti aspetti:

• il font da usare;

• la sua dimensione;

• la sua consistenza

• l’interlinea tra le righe;

• l’allineamento del testo:

• la sua decorazione (sottolineature, etc.).

La proprietà font-family: serve a impostare il tipo di carattere tipografico per una qualunque porzione di testo. Si applica a tutti gli elementi ed è ereditata. E' possibile impostare un elenco di caratteri alternativi.

selettore {fontfamily: <font 1>, <font2>, ....,<famiglia generica>;}p {fontfamily: Arial, Verdana, sansserif;}

il browser tenterà di usare il primo font della lista. Se questo non è disponibile sul dispositivo dell’utente userà il secondo. In mancanza anche di questo, verrà utilizzato il font principale della famiglia sans-serif presente sul sistema. Le famiglie generiche sono:

• serif (Times New Roman);

• sans-serif (Arial);

• cursive (Comic Sans);

• fantasy (Allegro BT);

• monospace (Courier).

I nomi dei font della lista vanno separati dalla virgola. I caratteri con nomi composti da più parole vanno inseriti tra virgolette.


La proprietà font-size: Insieme a font-family è la proprietà considerata essenziale nella definizione dell’aspetto del testo, di cui definisce le

dimensioni. È applicabile a tutti gli elementi ed ereditata.

selettore {fontsize: valore;}

Dimensione assoluta significa che essa non dipende da nessun altro elemento ed è quella definita dall’unità di misura usata. Dimensione relativa significa che essa viene calcolata in base alla dimensione del testo dell’elemento parente.

Sono valori assoluti:

• le sette parole chiave xx-small, x-small, small, medium, large, x-large, xx-large;

• quelli espressi con unità di misura: pixel (px)

Sono valori relativi:

• le parole chiave smaller e larger;

• quelli espressi in em;

• quelli espressi in percentuale.

Nelle pratiche più comuni, la scelta del dimensionamento dei font viene fatta tra pixel, em e percentuale.

La proprietà font-weight Serve a definire la consistenza o "peso" visivo del testo. Si applica a tutti gli elementi ed è ereditata.

selettore {fontweight: valore;}

Il "peso" visivo di un carattere può essere espresso con una scala numerica o con parole chiave:

• valori numerici: 100 – 200 – 300 – 400 – 500 – 600 – 700 – 800 – 900 ordinati in senso crescente (dal più leggero al più pesante);

• normal: valore di default, è l’aspetto normale del font ed equivale al valore 400;

• bold: il carattere acquista l’aspetto che definiamo in genere ‘grassetto’; equivale a 700;


• bolder: misura relativa; serve a specificare che una determinata porzione di testo dovrà apparire più pesante a livello visuale rispetto al testo

dell’elemento parente; • lighter: misura relativa; il testo sarà più leggero di quello dell’elemento parente.

La proprietà font-style

selettore {fontstyle: valore;}

valori:• normal: il testo mantiene il suo aspetto normale;

• italic: formatta il testo in corsivo;

• oblique: praticamente simile a italic.

La proprietà si applica a tutti gli elementi ed è ereditata.

La proprietà line-height serve a definire l’altezza di una riga di testo all’interno di un elemento blocco. L’effetto è quello di impostare l'interlinea La proprietà si applica a tutti gli elementi ed è ereditata.

selettore {lineheight: valore;}

I valori

• normal: il browser separerà le righe con uno spazio ritenuto "ragionevole"; corrisponde a un valore numerico compreso tra 1 e 1.2;

• un valore numerico: usando valori numerici tipo 1.2, 1.3, 1.5 si ottiene questo risultato: l’altezza della riga sarà uguale alla dimensione del font

moltiplicata per questo valore; • un valore numerico con unità di misura: l’altezza della riga sarà uguale alla dimensione specificata;

• percentuale: l’altezza della riga viene calcolata come una percentuale della dimensione del font.


Allineare il testo: la proprietà text-alignLa proprietà serve a impostare l’allineamento del testo. È ereditata e si applica a tutti gli elementi.

selettore {textalign: valore;}

I valori possono essere rappresentati da una delle seguenti keyword:

• left: allinea il testo a sinistra;

• right: allinea il testo a destra;

• center: centra il testo;

• justify: giustifica il testo.

La proprietà text-decorationImposta particolari decorazioni e stili per il testo. Ereditabile e applicabile a tutti gli elementi.

selettore {textdecoration: valore o valori;}

I valori che è possibile usare sono:• none: il testo non avrà alcuna decorazione particolare;

• underline: il testo sarà sottolineato;

• overline: il testo avrà una linea superiore;

• line-through: il testo sarà attraversato da una linea orizzontale al centro;

• blink: testo lampeggiante.

Tutorial HTML E CSS

Documents

Transcript of Tutorial HTML E CSS