HTML

HTML
Lezione 1
Padovani Alessandro
[email protected]
HTML (Hyper Text Markup Language)
L’HTML non è un linguaggio di programmazione e nemmeno
un linguaggio di scripting, ma è piuttosto un sistema di
contrassegno o di “marcatura”, quindi un linguaggio che
permette di indicare come disporre gli elementi all'interno di
una pagina.
Lo scopo è di formattare ipertesti, interpretabili da bowswers
Web.
L'HTML, quindi, non ha meccanismi che consentono di
prendere delle decisioni, e non è in grado di compiere delle
iterazioni, né ha altri costrutti propri della programmazione.
1
HTML (2)
Il linguaggio HTML, pur essendo dotato di una sua sintassi, non
presuppone meccanismi di compilazione o gestione degli errori di
programmazione: se non rispettate la sintassi probabilmente non
otterrete la visualizzazione della pagina che desiderate, ma
nient'altro.
Le indicazioni di formattazione vengono date attraverso degli
appositi marcatori, chiamati tag.
Attraverso comandi, chiamati TAG, si operano le formattazioni di
testi, immagini, strutture e si possono inserire altri elementi (in
particolare elementi multimediali. Inoltre tramite alcuni TAG si
creano collegamenti tra le varie pagine che compongono un sito
(creando quindi documenti che hanno la struttura di ipertesti).
2
LO STANDARD HTML
L'organizzazione che si occupa di standardizzare la sintassi
del linguaggio HTML (il W3C: Word Wide Web
Consortium) ha rilasciato diverse versioni di questo
linguaggio (HTML 2.0, HTML 3.2, HTML 4.0).
La versione dell'HTML che esamineremo in questo corso è
l'HTML 4.01.
3
SCELTE PROGETTUALI
Prima di implementare un sito Web (o un portale che offra vari
servizi) è necessario considerare vari aspetti di progettazione:
• Decidere una procedura tecnica (quindi definire gli strumenti e
le tecnologie da utilizzare)
• Considerare il contenuto del sito, progettando documenti che
privilegino un aspetto piuttosto che un altro (è evidente che un
sito “informativo” deve essere pensato con struttura differente da
un sito “pubblicitario”). Definire quindi modalità di presentazione
• Struttura del sito
4
STRUTTURA DI UN SITO
A seconda del tipo di contenuto e del tipo di servizio
che si vuole offrire, è necessario valutare la tipologia di
struttura del sito da creare:
• Struttura ad albero
• Struttura lineare
5
ACCESSIBILITA’
“Il potere del Web sta nella sua universalità. L’accesso alle risorse
Web da parte di qualsiasi utente, indipendentemente da qualsiasi
disabilità, è un aspetto essenziale”.
Tim Berners-Lee. Direttore W3C e inventore del World Wide Web
Le disabilità che devono essere considerate sono sia di tipo fisico e
mentale sia di tipo tecnologico. Ogni sito o portale, in particolare se
di proprietà di aziende o strutture statali o di servizi, deve garantire
accessibilità a ogni utente.
L’accessibilità dei siti Web è un problema di fondamentale
importanza che negli Stati Uniti è già stato codificato da Leggi e
Norme. In Italia esistono proposte di leggi ministeriali, già
approvate o in attesa di approvazione alle Camere.
6
EDITOR PER IMPLEMENTAZIONE E
ESTENSIONI DEL FILE
EDITOR TESTUALI: programmi che permettono di scrivere
documenti HTML intervenendo direttamente sul codice. L’utilità
principale dell’utilizzo di questi editor è la flessibilità assoluta per il
programmatore. La difficoltà è nella necessità di conoscere
approfonditamente il sistema HTML.
EDITOR WYSIWYG (What You See Is What You Get): questi
editor non visualizzano il codice HTML, ma visualizzano il testo e
gli oggetti del documento. Il programmatore non lavorerà sul codice,
ma direttamente sulla pagina come sarà visualizzata dal browser. I
problemi nascono nel momento in cui ci si trova in presenza di errori
che l’editor non riesce a risolvere. Esempi: FrontPage,
DreamWeaver, GoLive
ESTENSIONE: è necessario memorizzare il file con estensione
.HTML oppure .HTM (è indifferente, ma preferibile HTML)
7
I TAG: COME SI SCRIVONO
I TAG delimitano l’inizio e la fine di un’istruzione, in particolare ogni oggetto
da inserire (anche testo) deve essere preceduto e concluso con un TAG.
I TAG sono contenuti dentro a
< > (il tag di apertura)
< /> (il tag di chiusura)
Es: <TAG> Oggetto </TAG>
Ogni tag ha un Nome, può avere Attributi, ogni attributo ha bisogno di un
Valore
Nomi TAG: nome con il quale si identifica un’istruzione
Attributi TAG: ulteriore specificazione di un’istruzione
Valori: Valore con il quale si definisce un attributo
Es: <FONT color=“red”> Oggetto </FONT>
FONT è il nome del tag, COLOR un attributo e RED il valore dell’attributo
color
8
I TAG: COME SI SCRIVONO (2)
Alcuni particolari tag non hanno, conseguentemente questi tag
non hanno neanche chiusura.
La loro forma sarà dunque: <TAG attributi>
Ecco un esempio di immagine:
<IMG widht="20" height="20" SRC="miaImmagine.gif" ALT="alt">
come si vede il tag non viene chiuso.
Questo tipo di tag viene detto "empty", cioè "vuoto".
9
I TAG: COME SI SCRIVONO (3)
Una caratteristica importante del codice HTML è che i tag
possono essere annidati l'uno dentro l'altro. Anzi molto spesso è
necessario farlo.
Es:
<TAG1 attributi> contenuto 1
<TAG2> contenuto 2 </TAG2>
</TAG1>
In questo modo “contenuto1” avrà la formattazione data dal
TAG1 e “contenuto2” avrà la formattazione data da entrambi i
tag.
L'annidamento ci permette quindi di attribuire formattazioni
successive al testo che stiamo inserendo.
10
COMMENTI
Possono essere inseriti commenti e annotazioni che non
vengano visualizzati da browsers:
<! 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.
11
STRUTTURA DEL DOCUMENTO HTML
<HTML>
<HEAD>
intestazione
</HEAD>
<BODY>
corpo
</BODY>
</HTML>
INTESTAZIONE: Contiene informazioni non immediatamente percepibili,
ma che riguardano il modo in cui il documento deve essere letto e interpretato.
CORPO: Qui è racchiuso il contenuto vero e proprio del documento
12
TAG DI INTESTAZIONE
All’interno dell’intestazione si utilizzano i TAG:
<TITLE>: titolo del documento (compare nella Barra del titolo)
<META>: informazioni per i browser e i motori di ricerca
<META name=“keywords” content=“Questo sono le mie parole”>
<META name=“author” content=“Nome Cognome”>
<META name=“description” content=“Descrizione finale sito”>
<META name=“generator” Content=“NotePad”>
13
TAG BODY
Attributi del TAG <BODY>:
bgcolor=“#nnnnnn” o “colore in inglese” (colore sfondo)
N.B. nn nn nn: numeri esadecimali (rosso verde blu)
background=“…\…\…\…” (il path dell’immagine desiderata)
text=“#nnnnnn” o “colore in inglese” (colore testo)
link=“#nnnnnn” o “colore in inglese” (colore collegamenti)
vlink=“#nnnnnn” o “colore in inglese” (colore colleg, visitati)
alink=“#nnnnnn” o “colore in inglese” (colore colleg, cliccato)
lang="it“ (si indica ai motori di ricerca la lingua utiizzata nel
documento)
14
FORMATTAZIONE DI PARAGRAFO
<Hx> Con x da 1 a 6 (Questi tag danno diversa
dimensione al testo, grassetto, una riga vuota sopra e una
vuota sotto)
<P> Attributo: align=“left”
capo e salta 1 riga)
“center” “right”
(Questo tag va a
<BR> (Questo tag va a capo e non ha attributi)
<DIV>
capo )
Attributo: align=“left” “center” “right” (Questo
tag va a
FORMATTAZIONE DI TESTO
<FONT>
Attributi:
face =“Tipodicarattere” (definisce il font da usare)
size=“x” (x è un numero che definisce la dimensione del font,
va da 1 a 7 oppure si può usare “+x” o “-x” per rendere una
dimensione relativa rispetto alla dimensione impostata nel
browser)
color= =“#nnnnnn” o “colore in inglese” (definisce il colore
del testo)
<B> (grassetto)
<I> (corsivo)
<U> (sottolineato)
<STRIKE> (barrato)
<SUP> e <SUB> (apice e pedice)
TAG <HR>
<HR> Traccia una riga orizzontale
Attributi:
noshade (evita che la rigavenga sfumata, non ha valori)
size=“x” (x è un numero che definisce l‘altezza della riga, in
pixel)
width=“x” (x è un numero che definisce la largehzza della
riga, in pixel o in percentuale)
align=“left” “center” “right” (definisce l’allinemento
della riga)
color= =“#nnnnnn” o “colore in inglese” (definisce il
colore della riga)
PRIMO ESEMPIO (1)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
<HTML>
<HEAD>
<TITLE>Benvenuto in HTML</TITLE>
<META name="keywords" content="html,newsgroup,tag">
<META name="author" content="Alessandro Padovani">
<META name="generator" content="NotePad di Windows XP">
</HEAD>
<!Qui comincia il corpo>
<BODY bgcolor="green" text="green" background="C:\windows\intonaco
spagnolo.bmp">
<DIV align="center"><FONT size=“7“ face="Arial" color="#660088">
<B>BENVENUTO IN HTML<B></FONT>
<H2>Prima Pagina</H2>
</DIV>
<BR>
<HR align="center" size="5" width="70%" color="blue"></HR>
PRIMO ESEMPIO (2)
<!Testo>
<P align="left"><FONT face="Times New Roman" size="5" color="black">
L’HTML non è un linguaggio di programmazione vero e proprio.
<BR>
Lo scopo è di formattare ipertesti, interpretabili da bowswers Web.
<BR>
Attraverso comandi, chiamati TAG, si operano le formattazioni di testi
</FONT></P>
<HR align="center" size="7" width="50%" color="blue"></HR>
<DIV align="center"><FONT face="Tahoma" size="8"
color="yellow"><B><I>I NEWSGROUP</I></B></DIV></FONT>
<HR align="center" size="8" width="100%" color="red"></HR>
<DIV align="right"><FONT face="times new roman" color="black"
size="3">Università di Bologna
<BR></BR>
Data: 01/01/2004
</FONT></DIV>
</HTML>
</BODY>