html

COMUNICAZIONE ONLINE, RETI
E VIRTUALITA’
MATTEO CRISTANI
AGENDA




IL W3C CONSORTIUM
CHE COS’E’ XML
BASI DEL LINGUAGGIO HTML
INTRODUZIONE AD HTML5
IL W3C CONSORTIUM



Nell'ottobre del 1994 Tim Berners Lee, padre del Web, fondò al MIT
(Massachusetts Institute of Technology), in collaborazione con il CERN (il
laboratorio dal quale proveniva), un'associazione di nome World Wide Web
Consortium (abbreviato W3C), con lo scopo di migliorare gli esistenti
protocolli e linguaggi per il World Wide Web e di aiutare il web a sviluppare
tutte le sue potenzialità.
Nell'aprile del 1995 l'INRIA (Istituto Nazionale di Ricerca Informatica ed
Automatica francese) divenne il primo membro europeo
dell'organizzazione.
Nel 2003 l'ERCIM (Il Consorzio Europeo di Ricerca in Informatica e
Matematica) prese il ruolo di host europeo del W3C dall'INRIA (che è
l'istituzione francese dell'ERCIM).
GLI STANDARD









Gli standard definiti dal W3C
HTTP (HyperText Transfer Protocol)
URI
URL (in collaborazione con IETF)
HTML (HyperText Markup Language)
XML e i linguaggi da questo derivati:
EXI (Efficient XML Interchange)
XProc (XML Pipeline Language)
XPointer (XML Pointer)
STANDARD










XML Processing Model
XML Schema
XML Signature
XHTML (eXtensible HyperText Markup Language)
MathML (Mathematics Markup Language)
SVG (Scalable Vector Graphics)
XForms
XPath
XQuery
STANDARD









CSS (Fogli di stile a cascata)
XSLT (Extensible Stylesheet Language Transformations)
CGI (Common Gateway Interface)
DOM (Document Object Model)
GRDDL (Gleaning Resource Descriptions from
Dialects of Languages)
OWL (Controllo dei contenuti)
RDF (Controllo dei contenuti)
SMIL (Synchronized Multimedia Integration Language)
SML (Service Modeling Language)
STANDARD








SOAP(Simple Object Access Protocol)
PICS (Platform for Internet Content Selection)
WAI (Linee guida per l'accessibilità)
DOM (Linee guida per l'interfaccia)
PICS (Linee guida per le piattaforme)
POWDER (Protocol for Web Description Resources)
PNG (formato grafico)
InkML (formato per inchiostro digitale)
XML


XML (sigla di eXtensible Markup Language) è un
metalinguaggio di markup, ovvero un linguaggio marcatore
che definisce un meccanismo sintattico che consente di
estendere o controllare il significato di altri linguaggi
marcatori.
Costituisce il tentativo di produrre una versione
semplificata di SGML che consenta di definire in modo
semplice nuovi linguaggi di markup da usare in ambito
web. Il nome indica quindi che si tratta di un linguaggio
marcatore (markup language) estensibile (eXtensible) in
quanto permette di creare tag personalizzati.
SPECIFICHE IN XML

La specifica di un linguaggio in XML avviene attraverso
due approcci


Il DTD (Document Type Definition) dove si definiscono i tag in
termini di riscrittura ed indicazioni operative ai browser
compatibili, in genere identificando le funzioni mediante i fogli
di stile
Mediante un XML schema, che integra le operazioni di
estensione dei tag con funzioni proprie del server, quindi
facendo seguire al tagging azioni “libere” dal contesto della
navigazione
BASI DEL LINGUAGGIO HTML5


HTML è un linguaggio di descrizione di pagine
Un documento HTML è un file di testo (file ASCII)
contenente dei comandi per




Formattazione
Inserimento parti multimediali
Link ipertestuali
I file di testo hanno estensione .html o .htm
E’ preferibile .html
BASI DEL LINGUAGGIO HTML5


HTML è case insensitive: i tag possono essere scritti in
maiuscolo e/o minuscolo
E’ preferibile minuscolo
HTML è non posizionale:




è possibile, ma sconsigliato,scrivere tutto il codice di una pagina
su di una sola linea;
andare a capo nel file html non significa andare a capo nella
pagina;
non è possibile utilizzare il carattere spazio per allineare parti
di testo
Come qualificatori di testo è indifferente utilizzare le apici
singole o doppie
E’ preferibile usare le doppie apici
TAG

I comandi (marcatori, tag) hanno una forma sintattica particolare
<tag>informazioni</tag>

Le informazioni tra <tag> e </tag> devono essere trattate secondo quanto
stabilito dal comando stesso


I tag hanno nomi mnemonici
Esistono degli editor che assistono nella creazione delle pagine

I tag possono avere degli attributi
<tag attr1=“valore1” attr2=“valore2” … >informazioni</tag>

XHTML:



tutti i tag hanno sempre una forma di apertura ed una di chiusura
qualora un tag non ha forma di chiusura esso va scritto nella forma
<tag attr1=“valore” … />
I valori degli attributi vanno scritti sempre fra doppie apici
INTESTAZIONE

Un documento HTML è costituito da due parti
<html>
<head>
descrizione delle caratteristiche del documento
</head>
<body>
</body>
</html>
documento vero e proprio

head:
la parte fondamentale è il titolo del documento che verrà visualizzato come titolo
nella finestra del browser poiché il titolo viene usato anche per costruire gli indici
automatici usati dai motori di ricerca è importante che esso sia significativo.

Esempio
<head>
<title>Corso di laurea in Lingue per la comunicazione commerciale</title>
</head>
CORPO DI HTML

Corpo:
contiene il documento (pagina) vero e proprio documento di testo
Il testo può essere inserito liberamente nella parte body e verrà visualizzato secondo le
direttive di formattazione.

Intestazioni: permettono di indicare quali parti di testo vengono usate come titoli
Esempio
<h1> titolo1 </h1>
...
<h6> titolo6 </h6>


Nota:



H1, ..., H6 sono usati anche per controllare le dimensioni dei caratteri:
H1 corrisponde a caratteri grandi, ..., H6 a caratteri piccoli
I tag h* hanno anche valore semantico per i motori di ricerca
Andare a capo


<br/> a capo
<p>…</p> paragrafo
ESEMPIO
<html>
<head>
<title>Esempio01: Hello world!</title>
</head>
<body>
Questa è la mia prima pagina web<br/>
<p>
Giuro solennemente di <b>non dire mai</b>
nella mia vita che HTML è un linguaggio
di programmazione.<br/>
</p>
</body>
</html>
INTRODUZIONE AD HTML5

Gli elementi di HTML5 si dividono in tre categorie



Normali
Vuoti
Provenienti da altri namespaces
ELEMENTI VUOTI

2. Elementi vuoti: gli elementi vuoti sono quelli che non
possono avere alcun contenuto. Per questi elementi si
utilizza un tag ‘vuoto’. Essi sono: area, base, br, col,
command, embed, hr, img, input, keygen, link, meta, param,
source, track, wbr.

Per gli elementi vuoti, la chiusura del tag, obbligatoria in
XHTML, è invece opzionale. Possiamo dunque definire un tag
<img> secondo le regole XHTML:

<img src="immagine.png" alt="testo" />
OPPURE
<img src="immagine.png" alt="testo">


PROVENIENTI DA ALTRI NAMESPACES

3. Elementi provenienti da altri namespace: per
questi elementi sono richiesti i tag ‘autochiudenti’. Si
tratta degli elementi adottati da specifiche esterne, come
SVG e MathML.
ELEMENTI NORMALI

1. Elementi normali: sono quelli che possono
racchiudere dei contenuti sotto forma di testo, commenti
HTML, altri elementi HTML, etc. Sono elementi normali,
dunque, i paragrafi (<p>), le liste (<ul>), i titoli (<h1>), etc.
Salvo specifici casi, cui accenneremo nel seguito della
lezione, gli elementi normali vengono definiti attraverso
un tag di apertura (<p>) e un tag di chiusura (</p>).
DOCTYPE



Poiché, come visto, le attuali specifiche di HTML lo
definiscono come estensione specifica di XML, occorre
definire il tipo del documento
Questa operazione si fa specificando un riferimento ad un
DTD, ovvero un Document Type Definition
Si tratta di un file che descrive la sintassi del linguaggio
impiegato, ovvero di HTML
DOCTYPE


Non è di fatto sempre obbligatorio specificare il DocType
di una pagina; la maggior parte dei browser la
visualizzeranno correttamente anche senza specifica.
Il DocType, nella sua forma più estesa, ha bisogno di
diverse informazioni:



una dichiarazione in cui si determina se il documento è di
dominio pubblico o meno;
una nota che veicoli a quali specifiche del W3C si sta facendo
riferimento;
la lingua del documento.
SPECIFICHE CORRENTI

La maggior parte delle pagine web, attualmente, utilizza
questo DocType:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//IT" http://www.w3.org/TR/html4/loose.dtd> Il
linguaggio usato all'interno della pagina è l'html, il documento è
di dominio pubblico e rispetta le specifiche del W3C del tipo
HTML Transitional definiti nel DTD (Document Type
Definition) loose.dtd, la lingua impostata è l'italiano.
SPECIFICHE TIPICHE



Frameset: questa DTD è utilizzata dai siti che al loro
interno contengono i frames.
Strict: è una DTD che applica rigide regole ed applica
quindi i nuovissimi standard del web. Ad esempio i tag
deprecati non sono ammessi e gli elementi grafici di una
pagina web devono essere definiti tramite i fogli di stile.
Transitional: come è facilmente intuibile dal nome
questo è documento che contiene delle specifiche di
transizione da uno standard all'altro, è il tipo
maggiormente utilizzato ora sul web. Il documento non
applica rigide regole ed è quindi possibile utilizzare tag
deprecati.
ESEMPI DI SPECIFICHE

Esempio di DocType per un sito con i frames:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" http://www.w3.org/TR/html4/frameset.dtd>

Esempio di DocType per un sito che applica rigidamente
le ultime direttive del W3C:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" http://www.w3.org/TR/html4/strict.dtd>
INTESTAZIONE

All’interno del tag <head> possono essere inseriti, oltre al
titolo, altri tag:


I meta tag generici
I meta tag http-equiv
META TAG GENERICI
Nome
DC.Title
Valore
Titolo del documento
Funzione
Serve a definire il titolo del documento
description
Descrizione del sito
Serve per descrivere il contenuto del sito
o della pagina
creation_date
Data
Indica la data di creazione della pagina o
quando essa verrà aggiornata
keywords
Ogni parola chiave separata da
Serve a dichiarare le parole chiave del sito
o della pagina
robots
PROSSIMO LUCIDO
Serve a dare indicazione ai motori di
ricerca per l'indicizzazione
revisit-after
n° di giorni seguito da days
Serve a dire al motore di ricerca dopo
quanti giorni dovrà rivisitare la pagina
generator
L'editor usato per scrivere il codice
Indica il nome dell'editor che si è usato
per scrivere il codice della pagina
copyright
Il proprietario del contenuto del sito
Indica a chi spetta il copyright del
contenuto del sito
author
L'autore della pagina
Indica l'autore della pagina ed
eventualmente il suo indirizzo e-mail
owner
language
Proprietario del sito
Una o più lingue
Indica il proprietario del sito
Indica la lingua o le lingue del sito
DC.Language
Una o più lingue
Indica al motore di ricerca di indicizzare
le pagine in base alla lingua
IL META TAG ROBOTS


Il meta tag robots serve a dare alcune indicazioni ai programmi
dei motori di ricerca (i cosidetti spider); più nello specifico,
serve a comunicare allo spider del motore di ricerca come si
deve comportare
I suoi possibili valori sono:






none: non viene indicizzata la pagina e tutto ciò che è al suo interno
index: indicizza solo la pagina che il motore di ricerca sta visitando
noindex: non indicizza la pagina che il motore di ricerca sta visitando
follow: non indicizza la pagina che sta visitando prosegue attraverso i link
della pagina
nofollow: indicizza la pagina che sta visitando ma salta i link della pagina
all: è l'insieme tra follow e index, indicizza la pagina che sta visitando e
prosegue attraverso i links.
HTTP-EQUIV

La loro sintassi, in linea generale, è la seguente: <meta
http-equiv="nome_meta_tag"
content="valore_del_meta_tag">.
Nome Tag
Valore
Funzione
expires
Ora nel formato GMT
Indica la data di scadenza della validità
della pagina.
reply-to
Indirizzo mail
Set-Cookie
PROSSIMO LUCIDO
refresh
PROSSIMO LUCIDO
content-Type
PROSSIMO LUCIDO
Pragma
no-cache, costringe il browser a
svuotare la cache e ricaricarla
imagetoolbar
yes abilita la visualizzazione della toolbar, Da IE 6.0 in su, abilita/disabilita la toolbar
no la disabilita
che appare sulle immagini.
distribution
global se è un contenuto di interesse
generale, in caso contrario, usare local
Definisce un indirizzo e-mail a cui gli
utenti possono fare riferimento
Salva un cookie sul computer del
visitatore
Serve per ricaricare la pagina dopo un
determinato tempo
Indica il set di caratteri in uso nella
pagina
Solo per NetScape. Forza il browser a
non leggere il sito della cache
Indica se il contenuto della pagina è di
interesse generale o specifico
I COOKIE

Il meta tag Set-Cookie serve, come suggerisce il suo nome,
a salvare un cookie sul computer di chi sta visitando la
pagina. La sua sintassi è la seguente: <meta httpequiv="Set-Cookie" content="cookievalue=nome cookie;
expires=data di scadenza; path=percorso nella cache">



cookievalue: attraverso questo parametro impostiamo il
nome che prenderà il cookie sul computer dell'utente.
expires: impostando una data in formato GMT si può
determinare la data dopo la quale il cookie non avrà più
effetto.
path: dove verrà salvato all'interno della cache
ESEMPIO DI SETTAGGIO DI UN COOKIE

Esempio di settaggio di un cookie:
<head>
<meta http-equiv="Set-Cookie"
content="cookievalue=xxx;
expires=Tuesday, 13-Jul-06 23:00:00 GMT;
path=/">
</head>
REFRESH

Il meta tag refresh ricarica il contenuto della pagina dopo
un determinato intervallo di tempo, si può aggiungere
anche un parametro mediante il quale il ricaricamento
porterà ad un'altra pagina (reindirizzamento). La sua
sintassi è: <meta http-equiv="REFRESH"
content="intervallo di tempo per ricaricare; url=pagina a
cui porterà il ricaricamente, opzionale">
ESEMPIO

Esempio di reindirizzamento:
<meta http-equiv="refresh"
content="4;
url=http://it.wikibooks.org">
CONTENT-TYPE

Il meta tag content-Type serve per dichiarare il set di
caratteri usati all'interno della pagina. La sua sintassi è la
seguente: <meta http-equiv="content-Type"
content="tipo di documento; charset=set di caratteri">.
Il tipo di documento nel nostro caso è text/html con
l'avvento dell'xml potrebbe esserci qualche nuovo valore.
ESEMPIO

Esempio di come utilizzare il meta tag content-Type:
<meta http-equiv="content-Type"
content="text/html;
charset=iso-8859-1">
RIFERIMENTI

http://it.wikibooks.org/wiki/HTML