Obiettivi del corso Il concetto di markup La marcatura nel linguaggio

Obiettivi del corso
INFO WEB – LEZIONE N.1
RAVENNA, 5 MARZO 2008
creazione di pagine web con il linguaggio HTML: le basi del
linguaggio HTML, i generatori e gli editor, la fase di
progettazione, l'uso dei principali tag, la messa in linea
delle pagine, l'utilizzo di un programma per la generazione.
Introduzione a Wiki,Blog e CMS.
I materiali didattici potranno essere scaricati dalla sezione
Materiali didattici del sito www.cirsfid.unibo.it/didattica.
L’esame sarà svolto in forma orale; si consiglia agli studenti
di preparare un elaborato in HTML come verifica delle
competenze acquisite. L'elaborato verrà discusso durante la
prova orale.
Dott. Giuseppe Contissa
[email protected]
HTML (Hyper Text Markup Language)
L’HTML è un linguaggio di markup, ossia di descrizione.
Non è un linguaggio di programmazione.
Il linguaggio HTML non presuppone meccanismi di
compilazione
o
gestione
degli
errori
di
programmazione: se la sintassi non viene rispettata
semplicemente non si ottiene la visualizzazione della
pagina, perlomeno non nel modo previsto.
Appartiene alla famiglia dei linguaggi per la
descrizione logica dei documenti derivati da SGML
(Standard Generalized Markup Language), famiglia
che comprende anche XHTML e XML.
Il concetto di markup
Il concetto di markup (o marcatura) deriva
dall’ambiente tipografico, ed indica le annotazioni e i
simboli che si usavano per indicare le parti del testo che
dovevano essere corrette.
Un collegamento ancora più antico (XII-XIII secolo) va
all’opera dei Glossatori: le glosse erano spesso
annotazioni a fronte, a retro o fra le righe del testo.
La marcatura di un documento aggiunge alle
informazioni che costituiscono il contenuto del
documento delle metainformazioni sulla sua struttura e
visualizzazione (rappresentazione).
HTML (Hyper Text Markup Language)
(2)
Sviluppato a partire dalla fine degli anni ‘80 da
Tim Berners Lee al CERN di Ginevra.
Il W3C (World Wide web Consortium),
l’organizzazione che si occupa di standardizzare la
sintassi del linguaggio HTML, ha rilasciato diverse
versioni di questo linguaggio (HTML 2.0, HTML 3.2,
HTML 4.0).
La versione presa in considerazione in questo corso
è l’HTML 4.01.
La marcatura nel linguaggio HTML
In un documento è possibile distinguere tra contenuto,
struttura e visualizzazione. (esempio: in un libro, una
frase ha un contenuto, una posizione nella struttura, una
modalità di rappresentazione).
Il linguaggio HTML separa il contenuto di un documento
dalla sua struttura e visualizzazione, che vengono
descritte attraverso dei marcatori denominati TAG.
Quella che appare una complicazione rispecchia in
realtà la filosofia originaria del web, e preannuncia la
sua evoluzione (web semantico).
La marcatura nel linguaggio HTML (2)
È effettuataattraversoi TAG, chegestiscono:
formattazione del documento
L’inserimentodiimmagini
L’inserimentodialtrielementimultimediali (filmati,
applet,…)
I collegamentitra le variepaginechecompongono un sito
(creandoquindidocumentichehanno la
strutturadiipertesti).
Ipertesto
La
Creare pagine HTML
Per creare pagine HTML si utilizzano software specializzati detti
editor HTML
Editor testuali: permettono di scrivere intervenendo direttamente sul
codice (esempi: Notepad, HomeSite, HotDog).
Editor WYSIWYG (whatyouseeiswhatyouget): non visualizzano il
codice HTML, ma anticipano su schermo la pagina come verrà
visualizzata dal browser(esempi: FrontPage).
Editor ibridi testuali/WYSIWYG (esempio: Dreamweaver).
Il file creato viene normalmente salvato con estensione “.htm” o
“.html”.
E’ un testo o un insieme di testi leggibili, con l’ausilio
di una interfaccia elettronica, in maniera non
sequenziale, per mezzo dei collegamenti
ipertestuali.
I collegamenti costituiscono una rete di informazioni,
organizzate secondo diversi criteri, in modo da
costituire vari percorsi di lettura alternativi.
Progettare un sito web
Prima di implementare un sito Web è necessario
considerare vari aspetti di progettazione:
Decidere una procedura tecnica (definire strumenti
e tecnologie da utilizzare)
Considerare il contenuto del sito, e
conseguentemente la progettazione dei documenti e
le modalità di presentazione
Definire la struttura del sito (ad albero, lineare,
ecc.)
Per creare interi siti web si possono usare questi strumenti o in
alternativa/aggiunta tool quali: Wiki, Blog, CMS, che permettono
una gestione più agevole ed evoluta dei contenuti.
Accessibilità
Accessibilità (2)
“Il potere del web sta nella sua universalità. Un aspetto
essenziale è che tutti possano accedervi a prescindere dalle
disabilità”
Tim Berners-Lee. Direttore W3C
Esistono alcuni standard e linee guida per definire
l’accessibilità:
WCAG, Web ContentAccessibilityGuidelines della WAI, Web
AccessibilityInitiative (sezione del W3C)
Negli USA la legge “Section 508” (Section 508 Amendmentto the
RehabilitationActof 1973)
In Italia la legge n. 4 del 2004 (legge Stanca) e successivi
regolamento di attuazione (DPR 1 marzo 2005, n.75) e regole
tecniche (DM 8 luglio 2005)
Art. 2 della legge 9 gennaio 2004, n.4 (legge Stanca):
1. Ai fini della presente legge, si intende per:
a) “accessibilità”: la capacità dei sistemi informatici, nelle forme
e nei limiti consentiti dalle conoscenze tecnologiche, di
erogare servizi e fornire informazioni fruibili, senza
discriminazioni, anche da parte di coloro che a causa di
disabilità necessitano di tecnologie assistive o configurazioni
particolari;
b) “tecnologie assistive”: gli strumenti e le soluzioni tecniche,
hardware e software, che permettono alla persona disabile,
superando o riducendo le condizioni di svantaggio, di
accedere alle informazioni e ai servizi erogati dai sistemi
informatici.
Strumenti di Validazione
http://validator.w3.org/
controllare il codice HTML rispetto alle guidelines
del W3C)
Browser
(per
http://www.w3.org/WAI/ER/tools/complete
Lista
di tool per controllare il codice rispetto a
numerose guidelines o leggi disciplinanti l’accessibilità
I Tag
Sono parole riservate racchiuse fra parentesi angolari (nome del tag), seguite
normalmente da un contenuto
Es<p>testo</p>
Es. <imgsrc=“immagine.gif” alt=“foto”>
Commenti
Possono essere inseriti commenti e annotazioni che non
debbono essere interpretati e visualizzati dal browser.
<! commento non visualizzabile>
TAG di commento indicato dal W3C:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//IT”>
Non deve essere chiuso e deve essere posto
all’inizio del documento, prima di qualsiasi altro
tag.
Sono case-insensitive, cioè indipendenti dal maiuscolo o minuscolo
Possono essere annidati uno dentro l’altro. Esempio:
<tag1 attributi> contenuto 1
<tag2> contenuto 2</tag2>
</tag1>
Es. <a href=“/didattica.htm”>didattica</a>
Alcuni tag invece non hanno contenuto, perché ad esempio indicano solo la posizone
di alcuni elementi, conseguentemente non hanno neanche una chiusura. Un tag del
genere è detto “empty”, cioè “vuoto”.
I Tag (2)
Spesso si presentano in coppie in cui il tag di chiusura ha lo stesso nome del tag di
apertura ma è preceduto da una barra /
Hanno degli attributi (obbligatori o facoltativi), il cui valore è racchiuso tra apici.
Es. <title>titolo….
Il browser si occupa del rendering, cioè di interpretare
e visualizzare gli ipertesti in linguaggio html, e di
fornire strumenti per la fruizione dell’ipertesto stesso.
Il browser cerca sempre di visualizzare il contenuto del
file HTML anche se i tag sono non chiusi, incompleti o
inesistenti.
Da browser è possibile richiamare l’html alla base della
pagina correntemente visualizzata (IE: menu->
visualizza ->html; firefox:menu-> visualizza ->sorgente
pagina; safari: menu-> vista-> visualizza codice).
È buona norma usare i caratteri di tabulazione per far rientrare il
testo ogni volta che ci troviamo a creare un annidamento. Questa
procedura si chiama indentazione e serve per rendere il testo più
leggibile (all’utente umano - per il browser è indifferente).