HTML - Università degli Studi di Firenze

HTML: Introduzione
Documento HTML da presentare/spedire (entro tre giorni dall’orale):
Il documento HTML è individuale e deve consistere di due pagine, collegate tra loro.
La prima deve illustrare un progetto/ricerca/elaborato eseguito durante il corso degli
studi. La seconda deve contenere una breve biografia dell'autore. I file relativi devono
essere denominati come
cognome_nome_1.html (la prima pagina)
cognome_nome_2.html (la seconda pagina)
Entrambi devono avere un titolo del tipo:
<title>Nome Cognome - Titolo del progetto/ricerca/elaborato</title>
Nel caso di impossibilita' a produrre il documento HTML, l'esame può essere
comunque sostenuto. La conoscenza acquisita del linguaggio HTML sarà comunque
verificata durante il colloquio.
HTML: Introduzione
HTML: HyperText Markup Language
Linguaggio, standardizzato dal World Wide Web Consortium (W3C,
www.w3c.org) e giunto alla versione 4, per definire il contenuto di un documento
web.
La visualizzazione (layout) del documento stesso può dipendere dal particolare
browser (client web) utilizzato e dalle sue impostazioni.
Le pagine che l’HTML definisce sono dette ipertestuali poiché possono contenere
informazioni di diversa natura e collegamenti con altre pagine.
HTML: Introduzione
Un documento HTML è un file in formato testo contenente sia il testo delle informazioni
che delle particolari istruzioni (i tag) per formattarle (definirne la struttura, collegamenti,
inclusioni di oggetti, ecc.). I tag sono interpretati dal browser per visualizzare le
informazioni contenute nel documento nella forma voluta.
Il documento HTML è spesso detto sorgente della pagina. Con pagina si indica la
visualizzazione del documento da parte di un browser.
Spazi, tabulazioni e righe vuote (blanks o white space) sono compresse in un unico
spazio bianco dai browser.
HTML: Introduzione
Cosa è necessario:
• un editor (ASCII)
• un browser
• un provider
Browser web: Interpreta il linguaggio HTML di un documento per visualizzarne
i contenuti su uno schermo.
Browser grafici (in grado di visualizzare anche immagini, ecc., riprodurre suoni
e animazioni)
• Mozilla (www.mozilla.org)
• Netscape (home.netscape.com)
• Internet explorer (www .microsoft.com)
• Opera (www.opera.com)
• ……
Browser testuali (visualizzano solo le informazioni testuali)
• Lynx
HTML: Introduzione
Editor di testo (salva in ASCII senza codici di formattazione)
Non WYSIWYG
WYSIWYG
Tra i freeware:
Dreamweaver (www.marcromedia.com)
1st Page 2000 (www.evrsoft.com/)
FrontPage (www.microsoft.com)
EasyHTML
(www.javascript-page.com/easyhtml)
Tra i freeware:
mozilla (www.mozilla.org)
PsPad (www.pspad.com)
Netscape (home.netscape.com)
Nvu (www.sanavia.it/nvuitalia/index.html)
Trellian Webpage
(webpage.vendercom.com)
HTML: Introduzione
ISP (Internet Service Provider)
Fornisce uno spazio disco su un host con un server web.
Nello spazio disco assegnato andranno inseriti (FTP, SFTP, …….) i file relativi ai
documenti web.
Se non esplicitamente indicato dal provider, la pagina iniziale deve avere un
nome di default (es. index.htm, index.html, main.html, ecc.).
HTML: Introduzione
Guide HTML
basta un motore di ricerca (www.google.it, ecc.)
………….
http://www.infonetfree.com/crea/crea_guit.html
http://www.webmasterpoint.org/html/home.asp
………….
Guide HTML (biblioteca)
Validatori: controllano il corretto funzionamento del codice.
http://www.htmlvalidator.com/lite/
http://www.sai.msu.su/admin/
http://validator.w3c.org
HTML: Tag fondamentali
Tag presenti in qualsiasi documento HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Dichiarazione. Definisce la versione del linguaggio
HTML adottata affinché il browser possa interpretarlo
correttamente.
Deve essere il primo tag, ed è l’unico a dover essere
obbligatoriamente maiuscolo.
Il DTD (Document Type Definition) stabilisce le regole
che regolano la sintassi e la struttura del linguaggio
HTML.
EN indica una definizione per la lingua inglese. Per
l’italiano il codice da utilizzare è IT.
Possibili DTD:
Transitional: permette di utilizzare tag deprecati
http://www.w3.org/TR/html4/loose.dtd
Strict: i tag deprecati sono segnalati come errori
http://www.w3.org/TR/html4/strict.dtd
Frameset: Documento con frame
http://www.w3.org/TR/html4/frameset.dtd
HTML: Tag fondamentali
Tag presenti in qualsiasi documento HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<html>
… contenuto della pagina web
</html>
<body>
Attributi:
lang: Lingua dei testi contenuti nel documento
es. <html lang=“it”> imposta la lingua italiana
dir: Direzione per stampare e visualizzare i testi
es. <html lang=“it” dir=“ltr”> indica il left-toright come direzione. L’altra possibilità è “rtl”.
version: Deprecato (sarà vietato in futuro).
Descrive la versione HTML (ora !DOCTYPE).
</body>
</html>
HTML: Tag fondamentali
Tag presenti in qualsiasi documento HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<head>
… intestazione del documento
</head>
<body>
Attributi:
dir e lang, per la specifica della lingua utilizzata in
questa parte. Lo standard consiglia l’uso di
!DOCTYPE.
profile: imposta un URL che identifica le
informazioni da utilizzare per rappresentare il
documento e per creare l’indice dei contenuti.
</body>
</html>
HTML: Tag fondamentali
Tag presenti in qualsiasi documento HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Goofy Goose - City Plane</title>
</head>
<body>
</body>
</html>
<title>Titolo del documento</title>
Appare nel bordo superiore della finestra del browser.
Attributi:
dir e lang
HTML: Tag fondamentali
Tag presenti in qualsiasi documento HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Goofy Goose - City Plane</title>
</head>
<body>
</body>
</html>
<body>
… corpo del documento
</title>
Racchiude i contenuti di una pagina web.
Attributi:
una serie di tag per impostare la rappresentazione del
contenuto del documento. Tra di essi troviamo
style: specifica delle regole di formattazione (come
vedremo più avanti).
HTML: Tag fondamentali
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>


<head>
<title>Goofy Goose - City Plane</title>
</head>
<body>
</body>
</html>

Tutto ciò che è racchiuso dal tag è
ignorato dal browser.
HTML: Tag fondamentali
Titoli
<html>
<head>
<title>Titoli</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 5</h6>
Titoli.
Tra gli attributi troviamo:
align (“left”, “right”, “center”):
allineamento
style, lang, dir.
Possono contenere altri tag.
<h1 align="center">Heading 1 (centrato)</h1>
</body>
</html>
HTML: Tag fondamentali
<p>When I was young my teachers were the old.<br>
I gave up fire for form till I was cold.<br>
<br /> (<br> funziona, ma lo
standard consiglia l’utilizzo
della chiusura
spazio /).
</p>
Interruzione di riga.
Paragrafo, interruzione di linea
<p align="center">Now I am old my teachers are the young.<br />
go to school to youth to learn the future.<br />
</p>
<p>Paragrafo</p>
Definisce un paragrafo (sezione
continua di testo).
Tra gli attributi troviamo:
align (“left”, “right”, “center”):
allineamento
style, lang, dir.
HTML: Tag fondamentali
Filetto orizzontale
<hr align="center" noshade size="4" width="50%">
<hr align="center" size="2" width="50" />
<hr /> (<hr> funziona, ma lo standard consiglia l’utilizzo
della chiusura
spazio /).
Introduce un filetto (riga) orizzontale.
Tra gli attributi troviamo
align (“left”, “right”, “center”): allineamento
size: spessore (in pixel)
width: lunghezza (in percentuale della finestra del
browser, o in pixel)
noshade: elimina l’effetto ombra.
HTML: Tag fondamentali
Alcuni attributi del tag <body>
bgcolor: colore di sfondo della pagina.
Il colore può essere definito in base alle sue componenti RGB (Red-Green-Blue),
ognuna delle quali può avere valore tra 0 (nullo) e 255 (FF in esadecimale,
massimo). In tal caso il colore è descritto da 3 coppie di 2 cifre esadecimali, che
indicano l’intensità delle componenti.
Ad es. <body bgcolor=“#FFFFFF”> definisce il colore bianco come background.
Il colore può essere specificato anche tramite il nome (colori principali).
Ad es. “white”, “red”, “green”, “blu”, “yellow”, “magenta”, “cyan”, “black”.
background: inserimento di un’immagine di sfondo nella pagina.
L’immagine è specificata tramite un path o un URL.
Ad es.
<body background="wood.jpg" text="#FFFF00">

oppure
<body background=”file://nome_dominio/immagini/pippo.jpg" text="#FFFF00">
text: imposta il colore dei testi (escluso i link).
alink: colore del link attivo (puntato dal mouse)
link: colore dei link non visitati
vlink: colore dei link visitati
HTML: Link
Un link (collegamento) è un elemento che consente ad un utente di raggiungere parti
diverse dello stesso documento o un altro documento, anche su un host diverso.
HTML: Link
<html>
<head>
<title>Links</title>
</head>
<a>ancora </a>
Collegamento con un altro oggetto
(immagine, suoni, altre aree della
solita pagina, altre pagine).
<body>
<h1 id="top">Poetry Selections</h1>
<p>This is a list of the poets shown on this page: </p>
<a href="#MB">Margaret E. Bruner</a><br />
<a href=”poesie/cummings.html">e. e. cummings</a><br />
<a href=”http://www.frost.com">Robert Frost</a><br />
<a href=”http://www.poets.com/Robinson.html#CC">Edward Arlington Robinson</a><br />
<hr align="center" noshade width="75%" size="4" />
<h2 id="MB"> Margaret E. Bruner</h2>
<h3 align="center">Epitaph for a Cat</h3>
<p align="center"> -- Text of poem omitted for clarity of example -</p>
<p align="center"><a href="#top">Top of Page</a></p>
</body>
</html>
HTML: Link
Il link è definito da un punto di partenza (origine) e un punto di arrivo (destinazione).
Attributo href: contenuto nell’origine, indica la destinazione del link.
L’indicazione è fatta tramite l’URL.
URL interni al documento (URL relativo):
#nome (ad es. <a href="#MB">)
URL locale (altro URL relativo):
path per raggiungere la destinazione (ad es. <a href=“pippo.html"> indica
come destinazione il file pippo.html nella solita directory della pagina
corrente. <a href=”/ugo/pippo.html"> indica il file pippo.html contenuto nella
sottodirectory ugo della directory della pagina corrente. Le lettere di unità
disco sono seguite da | invece che :)
URL assoluto:
<a href=“http://tizio.it/ugo/pippo.html">,
<a href=“http://tizio.it/ugo/pippo.html#PP"> (identifica un punto preciso nel
file pippo.html).
HTML: Link
Attributi di <a>
accesskey: imposta una chiave di accesso per il link.
Questa è un carattere (es. accesskey=“d”) che, se premuto, attiva il link.
charset: identifica il set di caratteri della destinazione
hreflang: (solo con href) identifica la lingua della destinazione
name: identifica una posizione all’interno del documento (destinazione degli URL interni
al documento). Deve essere un nome unico, non contenere spazi e iniziare con una
lettera. Impostato come nome, ci si riferisce ad esso come #nome.
id: come name, è un identificatore. Introdotto con la versione 4 dell’HTML, può essere
utilizzato in un numero maggiore di casi, tra i quali come destinazione dei link interni.
Non è solo attributo di <a> (ad es. lo è anche di <h1-6 >).
HTML: Link
mailto:
Il protocollo mailto: può essere utilizzato nell’href inserire un collegamento che
causa l’invio di una e-mail. Ad es.
<a href=“mailto:[email protected]”>invia un messaggio a pippo </a>
Inclusione di file:

Con un tag di questo tipo si chiede al server web di inserire il file indicato nel
documento prima di inviarlo al client. Può essere utilizzato per inserire delle
informazioni comuni a più pagine (ad es. informazioni e mail dell’autore).
Spesso al file da includere viene data l’estensione .shtml, che indica al server che
deve eseguire il codice del file.
Non tutti i server elaborano tale informazione, dipende dal software e dalla sua
configurazione.