Sei sulla pagina 1di 27

HTML

Appunti per

Corso A.F.M. - SISTEMI INFORMATIVI AZIENDALI

Corso Grafica e Comunicazione

LUIGI DI PAOLO
COS’È
HTML HTML?

È l’acronimo di

INTRODUZIONE HyperText Markup

Language, un

Il linguaggio html (HyperText Markup Language) è nato nei linguaggio di


primissimi anni ’90 ad opera di Tim Berners-Lee presso il CERN di
Ginevra, in Svizzera. Il linguaggio è finalizzato alla stesura di marcatura per
documenti destinati ad essere trasmessi in forma elettronica. Nel 1989
presentare i contenuti
Tim Berners-Lee propose un progetto riguardante la pubblicazione di
ipertesti noto con il nome di World Wide Web. Oggi Tim Berners-Lee di una pagina web.
dirige il World Wide Web Consortium (W3C - www.w3.org), l’ente
internazionale che si occupa di definire le specifiche e gli standard del
linguaggio html.

All’inizio html è stato pensato principalmente per rappresentare


documenti a sfondo scientifico. Poi, fino ai nostri giorni è diventato il
linguaggio ufficiale del World Wide Web. Oggi HTML5 rappresenta la
quinta versione del linguaggio sviluppato dal consorzio W3C. Rispetto
alle preccedenti versioni garantisce un autonomia di funzionamento
libera da tecnologie proprietarie e una maggiore compatibilità tra i COS’È
diversi browser senza tener conto delle piattaforme software e dei
dispositivi utilizzati. CSS?
HTML5 rafforza il disaccoppiamento tra la struttura delle pagine, È l’acronimo di
definiti dal markup, e la loro rappresentazione, gestita tramite gli stili
CSS. Cascading Style

Sheets, in italiano
Html è un linguaggio basato su marcatori testuali chiamati tag che
permettono di descrivere le caratteristiche strutturali dei documenti fogli di stile a cascata.
chiamati ipertesti perché di natura multimediale.
Definisce delle regole
Un documento html, ovvero una pagina web, è una struttura
composta da elementi e testo. Un elemento è formato da una coppia sugli elementi della
di tag, comprendente un’entità di varia natura (testo, immagine, suono, pagina e separa la
etc.): un tag di apertura definisce l’inizio dell’elemento che termina, in
genere, con un tag di chiusura. L’insieme di elementi e testo, di cui si parte presentazione
compone una pagina è detto markup.
dal codice.
1
I tag sono racchiusi dai simboli < e >. Il tag di apertura di un documento html è <html>, il tag di chiusura
è </html>. Ciascuna pagina è composta da due parti fondamentali: la testa ed il corpo.

La testa è delimitata dai tag <head> e </head>, mentre il corpo dai tag <body> e </body>.

La testa rappresenta l’intestazione della pagina e contiene informazioni volte a identificare il contenuto
del documento, per esempio i tag <title> e </title> contengono il nome della pagina.

Il corpo invece contiene i tag che descrivono il contenuto della pagina.

LA SCRITTURA DEL CODICE HTML

Per la scrittura del codice HTML suggerisco di utilizzare solo i programmi più semplici. Per esempio
Notepad (Blocco note per Windows), TextEdit (per Mac) o KEdit (per KDE) andranno benissimo. Una
volta capiti i principi, sarà possibile passare ad editor più avanzati (PSPAD), o anche programmi
commerciali, come Dreamweaver, Style Master o GoLive. Ma inizialmente sarà bene non farsi
distrarre da troppe caratteristiche avanzate. Non si usino wordprocessor, come Microsoft Word o
OpenOffice. Questi programmi generalmente realizzano file che un browser Web non può leggere.
Per HTML e CSS, noi vogliamo file di puro testo. Il primo passo consiste nell'aprire l'editore di testo
(Notepad, TextEdit, KEdit, o altro), cominciare con una finestra vuota e scrivere:
<html>

<head>

<title>paginaWeb</title>

</head>

<body>

</body>

</html>

La forma di scrittura indentata ha il solo scopo di rendere più leggibile il codice html.

Ora, selezionare “Salva con nome…” dal menu File, andare nella cartella dove si vuole salvare il file,
in “Salva come:” selezionare Tutti i file, in “Nome File:” digitare paginaweb.html, poi cliccare su Salva.
Non si chiuda ancora l'editor, perché servirà ancora.

Poi, si apra il file in un browser, in questo modo: trovare il file nella cartella in cui è stato salvato e
cliccare o fare doppio clic sul file “paginaweb.html” Questo dovrebbe aprirsi nel browser di default

Come si nota, la pagina è vuota… l’unica cosa visibile nella finestra è il titolo che compare in alto a
destra nella barra dei titoli, quella di colore blu.
2
I FOGLI DI STILE

CSS (Cascading Style Sheet) è una tecnologia raccomandata dal Consorzio W3C sin dal 1996. Scopo
del CSS è quello di semplificare e migliorare il progetto delle pagine Web, infatti alcuni effetti ottenuti
con il CSS non sono possibili con il solo HTML.
Il vantaggio è che ti permette di specificare lo stile una volta sola mentre il browser può applicarlo più
volte nel documento. Se per esempio vuoi che tutte le figure del tuo sito abbiano una cornice di colore
rosso, questo stile può essere definito nel CSS. Invece di utilizzare una definizione HTML per la
cornice rossa in ogni immagine, basta inserire un attributo che fa riferimento allo stile in ogni immagine
che si vuol incorniciare di rosso.
Il CSS permette di definire delle regole generali riguardo gli oggetti che compongono una pagina e
serve a separare la parte di presentazione dal codice. Quindi a ciascuna pagina o sua porzione può
essere applicato uno stile. Attraverso lo stile è possibile determinare la formattazione del testo, il
colore, le dimensioni e i font utilizzati per i caratteri del testo e del titolo.
Per queste operazioni si utilizzano i fogli di stile a cascata dove il termine a cascata indica la possibilità
di utilizzarne più di uno all’interno dello stesso documento e regolare quale di questi sarà
effettivamente usato in base a precise regole gerarchiche. Nello stesso documento possono essere
utilizzati tre tipi di fogli di stile: in linea, incorporati ed esterni e la priorità di applicazione dello stile
avviene nell’ordine in cui li abbiamo elencati. Si ha perciò una cascata verso l’esterno.
I fogli in linea definiscono lo stile mediante l’attributo style all’interno di particolari tag della pagina.
I fogli incorporati vengono invece definiti nell’intestazione del documento.
I fogli esterni sono file con estensione .css separati dalle pagine html.
Prima di tutto vengono interpretati gli stili in linea, quindi quelli incorporati ed infine quelli esterni.

LE REGOLE DI STILE PER IL TESTO

Torniamo al nostro blocco note ed aggiungiamo un’intestazione nel corpo della pagina:

<html >

<head>

<title> paginaWeb</title>

</head>

<body>

<!-- Qui inseriamo un’intestazione -->

<h1>La mia prima pagina con stile</h1>

</body>

</html>
3
I testi all'interno di <!-- e --> sono commenti. Il browser li ignorerà.

Per la creazione di intestazioni (titoli, sottotitoli, titoli di paragrafo e note) html utilizza il tag h seguito
da un numero da 1 a 6 corrispondenti ad altezze predefinite del carattere. Se ora salviamo il nostro
file html ed aggiorniamo la pagina web dovremmo notare l’intestazione che abbiamo appena inserito.

Con l’utilizzo del CSS è possibile ridefinire le altezze del carattere, ma anche aggiungere altre
caratteristiche al testo, per esempio possiamo allinearlo al centro della pagina e scriverlo in un
particolare font.

È arrivato il momento di scrivere una regola di stile per fissare l’altezza del carattere del titolo a 32px
(per px si intende pixel).

Aggiorniamo il nostro codice:

<html >

<head>

<title> paginaWeb</title>

<style type="text/css">

h1 {

font-size: 32px;

</style>

</head>

<body>

<!-- Qui inseriamo un’intestazione -->

<h1>La mia prima pagina con stile</h1>

</body>

</html>

Nei fogli di stile incorporati le regole di stile vanno specificate tra i tag <style> e </style> all’interno
della porzione “testa” della pagina web.

Alcuni tag possono avere atributi che definiscono delle proprietà. Per esempio l’attributo type del tag
style indica che è un foglio di stile e che è scritto in CSS (“text/css”).
4
I fogli di stile nei CSS sono costituiti da regole. Ogni regola è formata da tre parti:

1. il selettore (nell'esempio: 'h1'), che dice al browser di quale parte del documento si occupa
la regola;

2. la proprietà (nell'esempio, 'font-size'), che specifica quale aspetto del layout viene definito;

3. e il valore ('32px'), che definisce il valore per la proprietà di stile.

Le proprietà e i valori sono racchiusi tra parentesi graffe.

Aggiungiamo ora nel selettore h1 la proprietà che permette di centrare il testo:

….

<style type="text/css">

h1 {

font-size: 32px;

text-align:center;

</style>

…..

Salviamo sempre il file html ed aggiorniamo la pagina nel browser per vedere il risultato.

L’AGGIUNTA DEI FONT

Il CSS prevede cinque famiglie di font: Serif (con grazie) particolarmente indicato per testi destinati
alla stampa, Sans Serif (senza grazie) più adatto a testi visualizzati su monitor, Cursive, testi corsivi,
effetto di scrittura a mano, Fantasy, testi decorativi e Monospace, con caratteri a spaziatura fissa.

Poichè non tutti i font sono disponibili su tutti i computer (ci sono migliaia di font e la maggior parte
non gratuiti), il CSS fornisce un sistema di fallback (cascata). Prima si elencano i font desiderati, poi
qualunque font che potrebbe sostituire il primo quando non disponibile, e si dovrebbe finire la lista con
la famiglia di appartenenza.

Il browser tenterà di applicare al testo il primo font e in mancanza di questo passerà al secondo e così
via, per ultimo utilizzerà quello di default per la famiglia indicata.

Di seguito elenchiamo alcuni font divisi per famiglia.


5
Serif: Times New Roman, Times, Georgia, Palatino, Bookman, New Century Schoolbook.

Sans Serif: Arial, Helvetica, Lucida, Geneva, Tahoma, Verdana, Gill Sans.

Cursive: Comic Sans, Comic Sans MS, Zapf Chancery, Coronetscript, Florence, Parkavenue.

Fantasy: Impact, Arnoldboecklin, Oldtown, Blippo, Brushstroke.

Monospace: Courier, Courier New, Andale Mono, Lucidatypewriter, Fixed.

Inseriamo nel nostro css le regole di stile relative alla scelta del font per i vari elementi della pagina.
Così, definiamo il testo in “Georgia” nel corpo della pagina, ad eccezione degli elementi h1, ai quali
daremo “Helvetica.” Aggiungiamo le seguenti linee di testo:

….

<style type="text/css">

body {

font-family: Georgia, "Times New Roman", Serif;

h1 {

font-family: Helvetica, Arial, Sans-serif;

font-size: 32px;

text-align:center;

</style>

…..
6
L’AGGIUNTA DEI PARAGRAFI

Ogni paragrafo che scriviamo deve cominciare con il marcatore <p> e terminare con il marcatore </p>,
anche se è facoltativo.

Possiamo introdurre nella nostra pagina dei paragrafi fittizi ricorrendo al generatore “Lorem Ipsum”
che troviamo all’indirizzo http://it.lipsum.com/

In fondo alla pagina, sulla destra, specifichiamo 3 paragrafi e poi clicchiamo sul pulsante Genera
Lorem Ipsum; il risultato ottenuto può essere copiato e incollato nel blocco note.

Per quanto riguarda lo stile del paragrafo scegliamo una dimensione del carattere di 10 pixel ed un
allineamento del testo giustificato:

….

<style type="text/css">

….

p{

font-size: 10px;

text-align:justify;

</style>

…..

<body>

<!-- Qui inseriamo un’intestazione -->

<h1>La mia prima pagina con stile</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam massa arcu, pretium sit
amet sollicitudin eget, dapibus vitae enim. Nullam commodo leo eu velit venenatis in lobortis eros
consectetur. Phasellus a mi urna. Vivamus consequat congue lacinia.</p>

<p>Sed eleifend mi sit amet felis placerat eu lacinia neque gravida. Sed placerat euismod
hendrerit. Etiam in tellus augue. Quisque facilisis urna sed nulla gravida congue. Nulla tristique nunc
nisl, non pellentesque arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Ut malesuada nisl ac nulla blandit consectetur.</p>

<p>Maecenas aliquet hendrerit tellus quis egestas. Donec vestibulum ultricies convallis. Sed
porta nulla vitae libero placerat a imperdiet lacus luctus. Duis eu eleifend sapien. Aenean malesuada
laoreet felis ut tempor. Aenean eu varius metus. Quisque adipiscing aliquet mi sit amet luctus.</p>

</body>
7
Riassumiamo qui di seguito le principali proprietà per la formattazione del testo con il CSS:

PROPRIETÀ SIGNIFICATO ESEMPIO


font-family Specifica il font utilizzato font-family:arial,sans-
serif
font-size Specifica le dimensioni del font font-size:18px
font-style Specifica lo stile dei font (p.e corsivo) font-style:italic
font-weight Specifica il peso del font (p.e. grassetto) font-weight:bold
text-align Stabilisce se il testo debba apparire text-align:justify
centrato (center), allineato a sinistra (left),
a destra (right) o giustificato (justify).

L’INSERIMENTO DELLE IMMAGINI

Le immagini possono essere usate per rendere le pagine web più interessanti. Per inserire una
immagine utilizziamo il tag html <img> (image). Un attributo irrinunciabile è src (source), seguito dal
nome completo del file posizionato tra virgolette dopo il segno di uguale.
Per esempio <img src=”foto1.jpg”>. Poiché <img> non ha un tag di chiusura è buona norma
aggiungere il simbolo / di chiusura all’interno del tag di apertura in questo modo:
<img src=”foto1.jpg” />.
È importante conoscere il tipo di file dell’immagine che vogliamo inserire, per esempio jpg, gif, png,
bmp etc. In generale il formato jpeg o jpg è migliore per fotografie ed altre immagini con transizioni
sfumate, mentre gif e png sono adatti per l’arte grafica basata su aree di colore uniforme, linee e testo.
Per evitare lunghe attese durante lo scaricamento dell’immagine dalla rete è consigliabile evitare di
usare file immagini di grandi dimensioni.
Altra cosa importante è la posizione occupata dal file immagine nel sistema. Infatti la modalità di
scrittura formata soltanto dal nome completo del file all’interno dell’attributo src è valida se il file
immagine è situato nello stesso ambiente del file html, per esempio nella stessa cartella.
Nel caso non lo fosse, bisogna fornire il percorso (path) del file immagine. Il percorso può essere
espresso in forma assoluta o in forma relativa.
In forma assoluta un file immagine situato nella cartella documenti potrebbe essere individuato in
questo modo: <img src=”C:\Documents and Settings\user\Documenti\scuola.jpg”>.
La forma relativa è fortemente consigliata. Se il file è situato per esempio in una sottocartella myfoto
si può scrivere: <img src=”myfoto\foto1.jpg”> Se invece la cartella myfoto è situata nello stesso
ambiente che contiene la cartella contenente il file html si può scrivere:
<img src=”..\myfoto\foto1.jpg”>.
Inseriamo ora una foto all’interno della nostra pagina web, una foto magari scattata con la fotocamera
o prelevata dal pc. Prendiamo un’immagine campione per esempio inverno.jpg. Essa ha una
risoluzione di 800x600 pixel, per cui inserita nella nostra pagina nelle sue dimensioni originali la
slargherebbe producendo un effetto antiestetico di sproporzione tra immagine e testo.
8
Per cui una volta copiata l’immagine nella cartella di lavoro sarebbe opportuno ridimensionarla con un
programma di grafica. Un’alternativa meno ortodossa è quella di ricorrere al CSS per il
ridimensionamento utilizzando gli attributi width e height che permettono di specificare la dimensione
in larghezza e altezza che può occupare l’oggetto in pagina. Nell’assegnare i valori è necessario
mantenere la proporzione dell’oggetto originario; nel nostro esempio volendo ridurre l’immagine di un
quarto assegnamo il valore 200px in larghezza e 150px in altezza.
Se passando sopra all'immagine con il mouse vogliamo visualizzare un testo descrittivo si deve
adoperare l'attributo title che serve proprio a dare un titolo o una descrizione testuale all'immagine
grafica.
Il codice diventa il seguente:

….

<style type="text/css">

….

img {

width:200px;

height:150px;

</style>

…..

<body>

<!-- Qui inseriamo un’intestazione -->

<h1>La mia prima pagina con stile</h1>

<!-- Qui inseriamo un’immagine-->

<img src="inverno.jpg" title="inverno" />

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam massa arcu, pretium sit

….

</body>

Salviamo sempre il file html ed aggiorniamo la pagina nel browser per vedere il risultato.

Se nella vostra pagina appare qualcosa di simile significa che il codice html non individua l’immagine
specificata! Controllate la posizione dell’immagine, nel nostro esempio si trova nello stesso ambiente del file html; poi il
nome riportato in src deve essere completo dell’estensione e i caratteri devono essere scritti in modo identico a quelli
del file immagine. A volte una maiuscola al posto di una minuscola o jpeg al posto di jpg possono fare la differenza!
9
UN TOCCO DI COLORE

I colori nel Web possono essere espressi in tre modi diversi:

 specificando il nome del colore


 specificando il codice esadecimale dei tre colori base Red Green Blue (rosso, verde e blu)
la cui composizione è capace di generare qualsiasi tipo di colore
 specificando il codice decimale RGB

Per esempio il color fucsia (fusione di rosso e blu) può essere così specificato:

color:fuchsia oppure color:#ff00ff oppure color:rgb(255,0,255)

Valori come "#ff00ff" rappresentano i colori come numeri esadecimali per il rosso, il verde e il blu.

I primi due caratteri subito dopo il # danno il valore del rosso, i due successivi danno il verde, gli ultimi
due il blu. Questi numeri sono sempre compresi tra 00 e FF. In decimale rgb i tre numeri
corrispondono rispettivamente a rosso, verde e blu in una gamma che va da 0 a 255.

L'insieme standard di nomi di colori è il seguente: aqua [acqua, celeste chiaro], black [nero], blue,
fuchsia [fucsia], gray [grigio], green [verde scuro], lime [verde brillante], maroon [marrone scuro],
navy [blu marino], olive [verde oliva], purple [porpora], red [rosso], silver [color argento, grigio
chiaro], teal [alzavola], white [bianco] e yellow [giallo]. Questi 16 colori corrispondono all'insieme
VGA di base sui PC. La maggior parte dei browser accetta un insieme più largo di nomi di colori.

Nomi di colore e valori


black rgb(0,0,0) #000000 green rgb(0,128,0) #008000
silver rgb(192,192,192) #C0C0C0 lime rgb(0,255,0) #00FF00
gray rgb(128,128,128) #808080 olive rgb(128,128,0) #808000
white rgb(255,255,255) #FFFFFF yellow rgb(255,255,0) #FFFF00
maroon rgb(128,0,0) #800000 navy rgb(0,0,128 #000080
red rgb(255,0,0) #FF0000 blue rgb(0,0,255) #0000FF
purple rgb(128,0,128) #800080 teal rgb(0,128,128) #008080
fuchsia rgb(255,0,255) #FF00FF aqua rgb(0,255,255) #00FFFF

I calcolatori più recenti supportano milioni di colori, ma sistemi più vecchi possono mostrare anche
solo 256. Per far fronte a ciò i browser ripiegano sui colori di una tavolozza fissa ma l'effetto visibile
che ne consegue è una colorazione picchiettata dovuta all’approssimazione del vero colore in ciascun
punto dell'immagine. Questa tavolozza "browser sicura" usa sei gradazioni uniformemente spaziate
di rosso, verde e blu e loro combinazioni. Se si scelgono i colori dell'immagine da questa tavolozza,
si evita l'effetto di picchiettatura. Ciò risulta particolarmente utile per le aree di sfondo delle immagini
per non correre il rischio che lo sfondo appaia con colori differenti. I colori della tavolozza sicura sono
10

costituiti da combinazioni di rosso, verde e blu ristrette ai seguenti valori:


RGB 00 51 102 153 204 255

ESA 00 33 66 99 CC FF

Potete consultare la tavolozza browser sicura su www.visibone.com.

Ora aggiungiamo delle regole di stile all'elemento body:

<style type="text/css">

body {

font-family: Georgia, "Times New Roman", Serif;

color: rgb(0,0,153);

background-color: rgb(153,204,255)

</style>

Color definisce il colore del testo in una tonalità di blu e background-color il fondo in una tonalità di
celeste. Il colore di fondo dell'elemento 'body' sarà anche il colore di fondo dell'intero documento.

Non abbiamo definito eventuali espliciti colori di fondo di altri elementi (come p) così il loro colore di
fondo sarà nessuno (oppure, sarà trasparente). La proprietà 'color' definisce il colore del testo per
l'elemento 'body', ma tutti gli altri elementi all'interno di 'body' ereditano quel colore, se non sovrascritto
in maniera esplicita.

L’IMMAGINE COME SFONDO

Quando inseriamo un’immagine di sfondo per il body essa viene ripetuta in senso orizzontale e
verticale fino a riempire l'intera area. Questo comportamento particolare ha sempre favorito la scelta
di piccole texture in grado di dare la sensazione visiva dell'uniformità. Sul web è facile trovare delle
raccolte di texture di sfondo (vedi per esempio webgif) oppure crearle con applicativi grafici. Qui di
seguito mostriamo alcuni esempi.

La proprietà background-image definisce l'url (indirizzo) di un'immagine da usare come sfondo di un


elemento. L’url può essere assoluto, per esempio:
background-image: url(http://www.server.it/images/sfondo.gif)
o relativo:
background-image: url(sfondo.gif).
11
Una buona norma vuole che quando si definisce un'immagine come sfondo si usi sempre anche un
colore di sfondo che consenta una lettura agevole del testo anche quando le immagini sono
disabilitate.
Utilizziamo la prima texture come sfondo col nome ‘sfondo.jpg’ ed inseriamo la seguente riga html:

body { …

background-image: url('sfondo.jpg');

Salviamo sempre il file html ed aggiorniamo la pagina nel browser, dovrebbe cambiare il suo contenuto
noioso, bianco e nero, in uno più vivo e colorato.

LE LISTE

HTML consente di generare tre diversi tipi di liste per rendere più gradevole la lettura della pagina. Il
primo tipo è l’elenco puntato o lista non ordinata e rappresenta un elenco di voci precedute da un
pallino; usa il tag <ul> (unordered list) e in chiusura il tag </ul>, ciascuna voce della lista viene
racchiusa tra i tag <li> (list item) e </li>.

Il secondo tipo è l’elenco numerato o lista ordinata; usa il tag <ol> (ordered list) e in chiusura </ol>,
ciascuna voce è sempre racchiusa tra i tag <li> e </li>.

Il terzo tipo è l’elenco di definizioni che consente di elencare dei termini e le relative definizioni come
in un glossario. Questa lista è aperta dal tag <dl> (definition list) ed è chiusa con </dl>. Ogni termine
comincia con <dt> (definition term) e finisce con </dt>, mentre ogni definizione è racchiusa tra i tag
<dd> (definition description) e </dd>.

Aggiungiamo alla pagina un elenco puntato con i nostri siti preferiti, scriviamo:

<body>

….

<p>…..Aenean eu varius metus. Quisque adipiscing aliquet mi sit amet luctus.</p>

<ul>I miei siti preferiti:

<li>google</li>

<li>youtube</li>

<li>facebook</li>

</ul>

</body>
12
Le regole di stile css permettono di specificare lo stile dei marcatori di una lista. Per esempio la proprietà
list-style-type permette di cambiare il tipo di marcatura, invece del pallino (disc) possiamo usare il
cerchietto (circle) o il quadratino (square); la proprietà list-style-image permette di cambiare il
marcatore di default con un immagine, mentre la proprietà list-style-position permette di scegliere la
posizione del marcatore.

Se vogliamo usare questa immagine come marcatore e poi lo vogliamo spostare verso destra per
farlo entrare nei limiti del testo, aggiungiamo le seguenti regole di stile:

<style type="text/css">

ul {

list-style-image:url(list_style_icon.jpg);

list-style-position:inside;

I COLLEGAMENTI

L’efficacia del Web risiede proprio nella capacità di definire collegamenti da una pagina ad un’altra.
Basta un clic per attivare un collegamento e ritrovarsi dall’altra parte del mondo.

Un collegamento è definito per mezzo del tag <a> (anchor – ancora). Il testo compreso tra <a> e </a>
è usato come didascalia per il collegamento (link) ed appare sottolineato e di colore blu (#0000FF).
Non necessariamente il contenuto che nasconde il collegamento è di tipo testuale ma può essere
anche un’immagine. Per fare un collegamento ad una pagina all’interno del proprio sito basta fornire
il riferimento al file stesso. Se, per esempio, vogliamo attivare un link alla pagina auto.html che
contiene un ipertesto sulle auto sportive, scriviamo: <a href=”auto.html”>auto sportive</a>

Per fare, invece, un collegamento ad una pagina su un altro sito Web è necessario fornire l’indirizzo
Internet completo (URL). Nel nostro esempio aggiungiamo nell’elenco i collegamenti ai nostri siti
preferiti:

...

<ul>I miei siti preferiti:

<li><a href="http://www.google.it">google</a></li>

<li><a href="http://www.youtube.com">youtube</a></li>

<li><a href="http://www.facebook.com">facebook</a></li>

</ul>
13
Quando un collegamento viene visitato (visited), esso non appare più di colore blu ma violetto
(#800080). La sottolineatura e i colori dei collegamenti possono essere modificati ricorrendo ai fogli di
stile; anche il passaggio del mouse (hover) sul collegamento può creare degli effetti con il CSS.

Il CSS fornisce delle “pseudo-classi” (:link, :visited e :hover) per effettuare tali modifiche.

Per esempio vogliamo eliminare la sottolineatura al collegamento con la proprietà text-decoration,


cambiare il colore in giallo quando il collegamento è visitato e renderlo blu scuro (#00008B) al
passaggio del mouse. Aggiungiamo le seguenti regole di stile per “a”:

<style type="text/css">


a{
text-decoration: none;

a:visited {

color:yellow;

a:hover

color: darkblue;

LE TABELLE

Le tabelle sono usate principalmente per fornire informazioni, altre volte sono usate per dare risalto
ad una presentazione.

La tabella si presenta come una griglia (insieme di caselle) formata da righe e colonne racchiuse tra i
tag <table> e </table>. La struttura della tabella è costituita da diverse parti (gruppi di righe -“row
group”) individuate dai seguenti tag:

 <caption> e </caption> racchiudono la didascalia, il titolo con un commento esplicativo sulla


tabella
 <thead> e </thead> racchiudono l'intestazione, la parte iniziale della tabella, quella che
contiene indicazioni sul contenuto delle caselle
 <tfoot> e </tfoot> racchiudono il piede, la conclusione della tabella, quella che consente di
tirare le somme
 <tbody> e </tbody> racchiudono il corpo, la parte centrale con il contenuto vero e proprio
della tabella
14
Notate che <tfoot> è anteposto rispetto a <tbody>.

Ciascuna riga della tabella è individuata dai tag <tr> (table row) e </tr>, mentre ciascuna casella dai
tag <td> (table data) e </td>.

Le caselle all’interno del tag <thead> possono anche essere racchiuse dai tag <th> (table header) e
</th>, al posto dei consueti <td> e </td>, in questo caso il contenuto delle caselle è automaticamente
formattato in grassetto e centrato.

Riepilogando, lo schema della tabella risulta il seguente:

Ora vogliamo aggiungere la seguente tabella alla nostra pagina: 15


Il codice da inserire è il seguente:

<table>
<caption>Le mie cazoni preferite:</caption>
<thead>
<tr>
<th>Classifica</th>
<th>Autore</th>
<th>Canzone</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bruce Springsteen</td>
<td>We take care of our own</td>
</tr>
<tr>
<td>2</td>
<td>Coldplay</td>
<td>Charlie Brown</td>
</tr>
<tr>
<td>3</td>
<td>Ligabue</td>
<td>M'abituerò</td>
</tr>
</tbody>
</table>
Per ottenere lo sfondo giallo, i riquadri rossi e la spaziatura tra gli elementi della tabella ricorriamo al
CSS, quindi aggiungiamo le seguenti regole di stile, alcune chiarite nel paragrafo successivo.
<style type="text/css">

table {
background: yellow;
text-align:center;
}
table,th,tr,td {
border: solid 1px red;
}
th,td,caption {
padding: 10px;
}

</style>
16
IL BOX MODEL

Una pagina Web non è altro che un insieme di box rettangolari disposti sullo schermo. Non importa
che si tratti di paragrafi, titoli, tabelle o immagini: si tratta sempre di box rettangolari. Però non tutti i
box sono uguali, bisogna distinguere tra elementi block ed elementi inline.

L’inserimento di un elemento block nel documento comporta la creazione di una nuova riga nel flusso
del documento. Un block quindi comincia sempre su una nuova riga e può contenere altri elementi,
sia di tipo block che di tipo inline. Esempi di elementi block sono i tag <h1> …<h6>, <p> e <div>.

Gli elementi inline, invece, si pongono accanto a quello che li precede, si estendono come le lettere
che state leggendo di questa frase e iniziano una nuova riga quando hanno raggiunto il lato destro
della finestra; cioè quando hanno "riempito" lo spazio precedente. Possono contenere solo elementi
inline, non elementi block. Esempi di elementi inline sono i tag <a>, <img> e <span>.

L’immagine seguente mostra la pagina come sequenza di box rettangolari, quelli con il bordo verde
rappresentano elementi inline.

L'insieme di regole che gestisce l'aspetto visuale degli elementi block viene in genere riferito al
cosiddetto box model, la cui struttura è così composta:

 Area del contenuto. È la zona in cui trova spazio il contenuto vero e proprio, testo, immagini,
animazioni, etc. Le dimensioni orizzontali dell'area possono essere modificate con la
proprietà width. Quelle verticali con height.
 Padding. È uno spazio vuoto che può essere creato tra l'area del contenuto e il bordo
dell'elemento. Se si imposta un colore di sfondo per un elemento questo si estende
dall'area del contenuto alla zona di padding.
 Border. Il bordo è una linea di dimensione, stile e colore variabile che circonda la zona del
padding e l'area del contenuto.
 Margin. Il margine è uno spazio di dimensioni variabili che separa un dato elemento da quelli
adiacenti.
17
Questi componenti del box model possono essere modificati con le proprietà dei CSS. La figura di
seguito mostra visivamente tali componenti:

Margin, border e padding dispongono ciascuno di quattro attributi per definire lo stile di ciascun lato
(es. margin-top:15 px; margin-right: 20px; margin-bottom: 25px; margin-left: 30px;); però se ne può
utilizzare anche uno solo anziché quattro (es. margin: 15px 20px 25px 30px;). I valori di questi attributi
sono espressi in pixel (px), ma possiamo utilizzare anche pollici (in), centimetri (cm), punti (pt)
e unita' (em).

La larghezza dell'area del contenuto è fornita dal valore della proprietà width, mentre la larghezza
effettiva del box è data dalla somma del margin-left + border-left + padding-left + area del contenuto
+ padding-right + border-right + margin-right. Un elemento block-level di dimensioni non specificate
occupa tra margini, bordi, padding e contenuto, tutta la larghezza messa a disposizione dal suo box
contenitore. In verticale occuperà l'altezza necessaria al suo contenuto.

Prendiamo un esempio:

<style type="text/css">

div {
width: 300px;
height: 80px;
padding: 5px;
border: solid 1px black;
margin: 10px;
}

</style>
18
La dimensione del blocco div è la seguente:

Larghezza = 300 + ((5 + 1 + 10) x 2) = 332 pixel

Altezza = 80 + ((5 + 1 + 10) x 2) = 112 pixel

Con CSS3 per semplificare la vita agli sviluppatori è stata introdotta la proprietà box-sizing. Quando
la proprietà CSS box-sizing, non è specificata o viene impostata al valore content-box, il box model si
comporta in maniera standard, come visto prima. Se invece la proprietà box-sizing viene impostata a
border-box, la dimensione di un elemento comprende anche il border e padding, ma non margin.

In questo caso la larghezza di un elemento è data dalla formula width + margin-left + margin-right,
mentre l’altezza è data dalla formula height + margin-top + margin-bottom.

Riprendendo l’esempio precedente:

style type="text/css">

div {
box-sizing: border-box;
width: 300px;
height: 80px;
padding: 5px;
border: solid 1px black;
margin: 10px;
}

</style>

La dimensione del blocco div ora è la seguente:

Larghezza = 300 + (10 x 2) = 320 pixel

Altezza = 80 + (10 x 2) = 100 pixel

Per due box adiacenti in senso verticale che abbiano impostato un margine inferiore e uno superiore
la distanza non sarà data dalla somma delle due distanze. A prevalere sarà invece la distanza
maggiore tra le due. È il meccansimo del cosiddetto margin collapsing. Tale meccanismo non si
applica ai box adiacenti in senso orizzontale.

Per le proprietà width, height e margin è possibile impostare il valore auto. L'effetto è quello di lasciar
calcolare al browser l'ammontare di ciascuna di esse in base alla risoluzione dello schermo e alle
dimensioni della finestra.

La proprietà Outline del CSS permette di disegnare un secondo bordo intorno all’elemento esattamente
come border, ma a differenza di quest’ultimo, non influisce sulla dimensione dell’elemento.
19
IL POSIZIONAMENTO GLI ELEMENTI

Rispetto all’html classico i fogli di stile offrono una grande potenzialità permettendo il posizionamento
dinamico degli oggetti. Offrono due posizionamenti: quello assoluto (absolute) e quello relativo
(relative).

Il posizionamento assoluto permette di posizionare un elemento in qualsiasi punto della pagina, senza
preoccuparsi degli altri elementi in essa contenuta, anzi, potendo effettuare anche delle
sovrapposizioni. Quello relativo, invece, permette, per esempio, di posizionare un testo in maniera
diversa rispetto al testo che lo precede.

La scelta del tipo di posizionamento avviene mediante la proprietà position. Il valore di default è static:
rappresenta la posizione normale che l’oggetto occupa nel flusso del documento.

Quando il valore è settato su absolute l'elemento, o meglio, il box dell'elemento viene rimosso dal
flusso del documento e posizionato in base alle coordinate fornite con le proprietà top, left, right e
bottom. Le coordinate sono in riferimento all'angolo superiore sinistro del box. Il posizionamento
avviene sempre rispetto al box contenitore dell'elemento purché esso abbia un valore per position
diverso da static; altrimenti il box contenitore è l'elemento radice HTML.

Quando il valore è settato su relative l'elemento viene posizionato relativamente al suo box
contenitore. In questo caso il box contenitore è il posto che l'elemento avrebbe occupato nel normale
flusso del documento. La posizione viene anche qui impostata con le proprietà top, left, bottom, right.
Ma qui esse non indicano un punto preciso, ma l'ammontare dello spostamento in senso orizzontale
e verticale rispetto al box contenitore.

Tornando alla nostra pagina Web vogliamo posizionare i paragrafi affianco all’immagine e la tabella
affianco all’elenco puntato come nella seguente figura:

20
In questo caso ricorriamo ad un posizionamento assoluto per l’immagine; questa viene a sovrapporsi
ai paragrafi che vengono, invece, spostati mediante un padding-left. Per la tabella utilizziamo un
posizionamento relativo spostandola sulla destra e verso l’alto (valore negativo). Ricordiamo che il
punto di riferimento per le coordinate è sempre l’angolo del contenitore in alto a sinistra.

Aggiungiamo le seguenti regole di stile:

<style type="text/css">

p{

padding-left: 250px;
}
img {

position: absolute;
top: 75px;
left: 25px;
}

table {

position: relative;
top:-100px;
left: 250px;
}

</style>

LE CLASSI

Se ad un selettore vengono applicati stili alternativi allora bisogna ricorrere alla definizione di classe.
Supponiamo che la maggior parte dei paragrafi sia di color nero ma alcuni vengano mostrati in rosso
per richiamare attenzione sul contenuto; si può realizzare questo stile definendo una classe semplice
e una classe attenzione per il selettore p.

p.semplice { color: black;}

p.attenzione { color: red;}

Il punto serve a separare il selettore dalla classe. Il codice html che si riferisce a queste classi potrebbe
essere il seguente:

<p class=”semplice”>Questo paragrafo è color nero</p>


21

<p class=”attenzione”>Questo paragrafo è color rosso</p>


Non sempre una classe viene collegata ad un tag, si può specificare una classe generica che viene
applicata a qualsiasi tag.

Se per esempio si vuole che del testo venga evidenziato in blue definiamo una classe generica
evidenziato:

.evidenziato { color: blue;}

In html qualsiasi elemento che utilizza la classe evidenziato mostrerà il testo in blue:

<p class=”evidenziato”>Questo paragrafo è color blue</p>

<h2 class=”evidenziato”>Questo è un sotto-titolo blue</h2>

Se si vuole rendere solo parte di un paragrafo di color blue bisogna usare il tag <span>:

<p>Vi ricordo, <span class=evidenziato”>e uso il blue per evidenziarlo</span>, che dovete studiare
la lezione</p>

I commenti in CSS sono racchiusi tra i simboli /* e */

/* Questa classe può essere usata con qualsiasi tag */

IL SELETTORE ID

Un selettore ID è simile alla classe generica, ma a differenza della classe può essere applicato una
sola volta nella pagina Web, ad un solo elemento quello con id.

Per creare una regola ID in CSS si usa il simbolo # (hash).

Per esempio dividiamo la nostra pagina in quattro zone utilizzando il tag div (sta per divide) e coloriamo
i loro sfondi con diversi colori; il codice html e le regole CSS sono le seguenti:

<html>
<head>
<style type="text/css">
#testata {background: yellow;}
#navigazione {background: lightgray;}
#contenuto {background: white;}
#fondo {background: cyan;}
</style>
<title>esempioID</title>
</head>
<body>
<div id="testata">testata</div>
<div id="navigazione">navigazione</div>
<div id="contenuto">contenuto</div>
<div id="fondo">fondo</div>
</body>
</html>
22
LA DISPOSIZIONE DI UN ELEMENTO

Ci sono quattro proprietà CSS che influenzano come un elemento viene disposto nella pagina: float,
clear, visibility e display.

Con la proprietà float è possibile rimuovere un elemento dal normale flusso del documento e spostarlo
su uno dei lati (sinistro o destro) del suo elemento contenitore. Il contenuto che circonda l'elemento
scorrerà intorno ad esso sul lato opposto rispetto a quello indicato.

Se si vuole affiancare del testo ad un’immagine è possibile farlo ricorrendo all’attributo float.
Nell’esempio seguente il paragrafo si posiziona alla sinistra dell’immagine, in linea con esso, come
indicato dall’attributo float: left, altrimenti essendo p un elemento block si sarebbe posizionato sotto
l’immagine.

<html>
<head>
<style type="text/css">
p {float: left;}
</style>
<title></title>
</head>
<body>
<img src="farfalla.png"><p>che bella farfalla!</p>
</body>
</html>

Quando si usa float accade che gli elementi che seguono non siano proprio sotto. Pertanto viene
usata la proprietà clear applicata all’elemento che segue allo scopo di impedire che al fianco di esso
compaiano altri elementi (i valori sono left, right e both).

La proprietà visibility imposta la visibilità di un elemento. Di default è impostata su visible ma se viene


posta a hidden l’elemento viene reso invisibile nel browser anche se continua ad occupare spazio
nella pagina.

La proprietà display gestisce la renderizzazione di un elemento. Abbiamo già detto che un elemento,
per default, può essere di tipo block (div, p, ul, ol,li) o inline (img, input, select, span, a) ma la proprietà
display può cambiare questa impostazione. Se viene impostata sul valore block non accetta altri
elementi né a destra nè a sinistra; se viene impostata sul valore inline l’elemento viene renderizzato
accanto a quello precedente; in quest’ultimo caso se lo spazio per contenerlo non è sufficiente, viene
suddiviso in due blocchi, il primo accanto all’elemento che lo precede ed il secondo sotto.
La proprietà display assume anche i valori inline-block e none. Un elemento impostato a inline-block
viene mostrato accanto all’elemento precedente (come per inline) ma no può suddividersi in più
blocchi. È un’impostazione molto versatile che sostituisce l’utilizzo di float. Quando un elemento viene
impostato su none non viene renderizzato sul browser, quindi è invisibile ma non occupa spazio nella
pagina.
23
LA COMPOSIZIONE DEL LAYOUT

La progettazione di una pagina web o di un sito comporta sempre un notevole impegno. Ma non ci
scoraggiamo. Per prima cosa organizziamo i contenuti, allora prendiamo carta e penna e buttiamo giù
le nostre idee. Quali contenuti vogliamo proporre? Come li vogliamo proporre? Per rispondere a tali
domande dobbiamo pianificare i contenuti cioè strutturare logicamente i contenuti di una pagina in
modo da creare un modello (layout).

Nell’esempio vogliamo predisporre un layout di pagina 980x550 pixel (rapporto 16:9) a due colonne.
La dimensione 980px si presta bene anche per suddivisioni a più colonne. Per far questo è necessario
conoscere quali sono le principali sezioni logiche che lo compongono. Si compone delle seguenti
sezioni: testata, navigazione, contenuto e fondo.

Testata: in questa sezione viene riportato il nome del sito e una sorta di descrizione o sottotitolo. Il
contenuto è sia grafico (stemma) che testuale (logo) ed occupa la parte superiore della pagina.
Generalmente si estende orizzontalmente per tutto lo spazio a disposizione della struttura ed in
verticale per 150 pixel.

Navigazione: questa sezione, anche detta menu, è indispensabile in quanto permette di accedere ai
contenuti del sito. Ogni pagina del sito dovrebbe poter consentire di accedere a tutte le altre pagine
senza troppi click e soprattutto senza l'uso dei tasti indietro e avanti del browser. Occupa ¼ della
larghezza, 240px.

Contenuto: è la sezione principale. Infatti se al primo impatto con la pagina siamo catturati dal suo
aspetto e da una grafica accattivante, dopo un primo sguardo, ci rendiamo conto che quello che
davvero ci attira sono i contenuti. Sono davvero i contenuti a fare la differenza. Nel nostro caso occupa
¾ della larghezza, 720px.

Fondo: è generalmente una piccola sezione disposta in fondo alla pagina non più grande dell'header.
Contiene informazioni sullo sviluppatore del sito, sul copyright, i contatti di posta elettronica ed
eventualmente indirizzo e numero di telefono se riferito ad un'azienda.

Queste quattro sezioni logiche sono incorporate in un unico blocco contenitore.

Il layout a due colonne si presenta come nella figura sottostante.


24
Nella colonna di sinistra (in azzurro) andremo ad inserire il menu (navigazione), mentre in quella di
destra (in bianco) il contenuto che descrive la pagina (contenuto).

Il layout si realizza attraverso l'uso del tag div. A ciascun div viene associata una zona della pagina. Il
tag div definisce un generico elemento di tipo block. Un contenitore di tipo block può contenere
qualsiasi tipo di elemento html pertanto è il contenitore per eccellenza per realizzare layout.

Di seguito riportiamo il codice html necessario per realizzare la struttura di base del layout.

Notiamo che secondo le specifiche HTML5, ogni documento html si apre con il tag di intestazione
<!DOCTYPE html>, che, diversamente dal passato, esprime in modo sintetico e semplificato la
tipologia del documento stesso. A questo tag non corrisponde alcun tag di chiusura ed è subito seguito
dall’elemento radice html.

Per far fronte alle limitazioni dei server o delle configurazioni, i documenti HTML possono includere
informazioni esplicite sulla codifica dei caratteri del documento; l'elemento META può essere usato
per fornire ai programmi utente tali informazioni.

Per esempio la dichiarazione: <META charset=ISO-8859-1"> specifica che la codifica dei caratteri del
documento corrente è ISO-8859-1 conosciuta anche come "Latin-1" ed utilizzabile per la maggior
parte delle lingue occidentali.

Il contenitore principale (#contenitore) viene dimensionato a 980px con l’attributo width e centrato
orizzontalmente

Il metodo usato per centrare il contenitore nella pagina si basa sul fatto che quando i margini sinistro
e destro di un elemento sono settati ad auto essi si suddivideranno lo spazio determinato dalla
differenza tra l’ampiezza del contenitore dell’elemento e l’ampiezza dell’elemento stesso. In questo
caso all’ampiezza della finestra del browser verrà sottratta l’ampiezza di contenitore e il valore
risultante dimezzato costituirà il margine sinistro e destro di contenitore.

Per affiancare navigazione e contenuto (ricordiamo che sono elementi di tipo block e non possono
essere affiancati da alcun elemento) si ricorre all’attributo float in modo che ciascuno fa spazio all’altro
collocandosi rispettivamente nella parte sinistra e destra del contenitore.

Testata e fondo devono ripulire tutto lo spazio che sta attorno a loro (clear:both). In particolare fondo
potrebbe trovare posto affianco ad uno degli elementi che lo precedono, navigazione o contenuto, se
questi hanno altezze diverse. Pertanto usiamo la proprietà clear applicata a fondo che serve ad
impedire che al fianco di esso compaiano altri elementi.

Per individuare più facilmente gli elementi logici che suddividono il layout sono stati applicati sfondi di
colore diverso a ciascuno con l’attributo background.

Le altezze (attributo height) dei vari elementi sono stati ripartiti in questo modo: 150px per la testata,
350px per navigazione e contenuto e 50px per il fondo in modo da avere un totale di 550 pixel.

Così facendo il contenitore ha una dimensione di 980x 550 pixel ed un rapporto su display di 16:9.
25
<!DOCTYPE html>
<html>
<head>
<meta charset=iso-8859-1">
<title>layout</title>
<style type="text/css">
html {
background:cyan;
}
#contenitore,#testata,#navigazione,#contenuto,#fondo {
outline: solid 2px blue;
color:red;
}
#contenitore {
margin:0 auto;
width:960px;
background:white;}
#testata, #fondo {
clear:both;
}
#testata {
height:150px;
background:lightblue;
}
#navigazione {
float:left;
width:240px;
height:350px;
background:rgb(20,112,250);
}
#contenuto {
float:right;
width:720px;
height:350px;
}
#fondo {
height:50px;
background:lightblue;
}
</style>
</head>
<body>
<div id="contenitore">
<div id="testata">testata</div>
<div id="navigazione">navigazione</div>
<div id="contenuto">contenuto</div>
<div id="fondo">fondo</div>
</div>
</body>
</html>
26