HTML - unimi, Crema

Corso IFTS
Informatica, Modulo 3 – Progettazione pagine web statiche
(50 ore)
Il linguaggio HTML - Nozioni di base
Dott. Chiara Braghin
[email protected]
What is HTML?
 HTML (HyperText Markup Language) è un linguaggio
per la costruzione di ipertesti.
 È un linguaggio di markup: descrive, tramite TAG predefiniti, in
modo preciso al browser sia il tipo del contenuto del
documento che come esso deve apparire all’utente.
 Storia di HTML:
 1992: prima versione del linguaggio HTML
 ~ 1994: HTML 3.0 diventa uno standard
 Dicembre 1997: Recommendation HTML 4.01 del W3C
 Il browser interpreta i tag e formatta il contenuto del file
html - ovvero, sistema visivamente i caratteri - nel modo
voluto dal suo autore (dimensione, fine riga, fine
paragrafo, tabelle, colori, ecc.)
C. Braghin - HTML: nozioni di base
2
Struttura di file HTML
 Un documento HTML in genere contiene immagini e fa riferimento
attraverso dei link ad altri file che si trovano sullo stesso server o su di
un server diverso
 L’informzione (file HTML e immagini) viene conservata nel server in
diverse cartelle che possono essere annidate l’una dentro l’altra:
 Quando, tramite un link, si fa riferimento ad un file o ad una immagine,
oltre al nome del file è necessario inserire anche la locazione in cui si
trova. Quest’informazione può venire data in 2 modi:
 Percorso relativo: il percorso relativo per il documento “page.html”
dell’immagine è "/directory/foldertwo/page.html”.
 Percorso assoluto: l’intero percorso dalla root directory.
C. Braghin - HTML: nozioni di base
3
Come creare un file HTML?




Con un normale editor di testi. L’importante è che il file abbia
l’estensione .html (o .htm - in Win3.x non erano supportate
estensioni più lunghe di tre caratteri), altrimenti il browser non
lo riconosce.
Con un editor specifico WYSIWYG (What You See Is What
You Get), tipo Dreamweaver, Adobe GoLive o il composer di
Mozilla/Netscape dalla versione 3.0 in poi.
Con un programma di videoscrittura che contiene l’opzione
“salva come HTML” e permette di convertire il risultato in un
file HTML. Il contenuto però può venire interpretato in modo
indesiderato e non univoco, e spesso vengono aggiunti inutili
tag che rendono il file più pesante.
Soluzione ibrida: con text-editor pensati per scrivere in HTML
e che permettono di lavorare sul file sorgente (con i tag visibili)
ma contengono menu e bottoni che suggeriscono i comandi.
C. Braghin - HTML: nozioni di base
4
La guerra dei browser
 HTML appartiene alla famiglia dei linguaggi SGML, ma è molto
più semplice
 appena introdotto era troppo povero, non permetteva frame né
immagini, perché orientato alla trasmissione dei contenuti, poco al
layout
 Per accaparrarsi più utenti, i browser hanno cominciato ad
inserire nel linguaggio nuovi tag proprietari
 blink (Netscape): testo lampeggiante
 marquee (Internet Explorer): testo scorrevole
 La guerra dei browser ha portato un arricchimento delle
possibilità offerte ma anche grossi problemi di incompatibilità
 HTML 4.0 viene considerato lo standard a cui le nuove versioni e I
browser devono fare riferimento, anche non risolve del tutto il
problema di incompatibilità
 In genere, è consigliabile testare la pagina HTML generata su
diversi browser, oppure limitarsi ad utilizzare i TAG più standard.
C. Braghin - HTML: nozioni di base
5
Problemi e limiti di HTML
 Crescita disordinata e incompatibilità
 HTML 4.0.1
 Contenuto e aspetto non vengono considerati
separatamente
 Cascading Style Sheet (CSS) fogli di stile
 Il numero notevole di pagine web presenti oggi rende
difficile qualunque modifica al linguaggio HTML che
non sia retro-compatibile
 Come fare?
C. Braghin - HTML: nozioni di base
6
La scommessa del W3C: XML
 XML, eXtensible Markup Language risolve molti
problemi:
 separa contenuto da presentazione
 permette un’espandibilità senza fine del linguaggio (i tag
vengono definiti dall’utente a seconda della necessità)
 adatto a contenuti internazionali
 adatto a dispositivi di visualizzazione diversi (browser,
wap, palmari, ecc.)
 utilizzato in molti settori: web services, scambio dati
tra applicazioni, accesso a basi di dati, ecc.
C. Braghin - HTML: nozioni di base
7
I tag HTML (1)
 I tag sono gli elementi della pagina HTML che servono per
definire il tipo e il formato del contenuto, in questo modo il testo
scritto appare nel formato voluto
 Caratteristiche principali:
 sono racchiusi da parentesi <angolate>
 <HTML>
 molti elementi possono avere argomenti (chiamati attributi)
all'interno dei tag che definiscono parametri sulla gestione
dell'elemento stesso da parte del browser
 <BODY BGCOLOR=“red”>
 la maggior parte dei tag ha un inizio (tag di apertura) e una fine
(tag di chiusura)
 <HTML> e </HTML>
 Per chiudere un tag basta aggiungere / al tag iniziale
 i tag possono essere scritti indifferentemente con lettere maiuscole
o minuscole
C. Braghin - HTML: nozioni di base
8
I tag HTML (2) - Regole di scrittura
 Regole per una corretta scrittura (non tutte obbligatorie):
 I tag vanno scritti sempre nello stesso modo
 non <HTML> e </html>
 I tag vanno aperti e chiusi sempre nello stesso ordine ma devono
essere annidati fra loro e non sovrapposti:
 <THIS><THAT></THIS></THAT> - tag sovrapposti, sbagliato
 <THIS><THAT></THAT></THIS> - tag annidati, giusto
 Esempio: non si deve scrivere <body><p>Contenuto della
pagina</body></p>
 I valori vanno inseriti tra “virgolette” o ‘apici’
 Il browser interpreta al meglio pagine web che non rispettino
queste regole, ma browser diversi possono dare risultati visivi
diversi.
C. Braghin - HTML: nozioni di base
9
Struttura di un documento HTML (1)
 Un documento HTML si compone di due parti identificate da un
tag di apertura ed uno di chiusura, entrambe contenute in un
tag principale:
 <HTML> - tag principale necessario per identificare il tipo di
documento. Deve essere sempre definito.
 <HEAD> - intestazione, contiene il tag per definire il titolo della
pagina e altre informazioni che non sono generalmente visualizzate
insieme al testo del documento vero e proprio
 <BODY> - corpo, la parte principale del documento contenente
tutto il contenuto, comprese immagini, link ad altre pagine HTML e
tag che modificano il layout di testo ed immagini
 NOTA: Elementi permessi all'interno dell'HEAD, come il titolo
(TITLE), non sono permessi all'interno del BODY, e viceversa.
C. Braghin - HTML: nozioni di base
10
Struttura di un documento HTML (2)
<HTML>
<HEAD>
<TITLE>
Questo e’ il titolo che appare sulla striscia
alta della finestra
</TITLE>
</HEAD>
<BODY>
Qui si scrive il documento.
</BODY>
</HTML>
 Il tag <HTML> è esterno rispetto a tutti gli altri tag
 Esempio1: primaPagina.html
C. Braghin - HTML: nozioni di base
11
Come creare il primo file HTML (1)



1. Aprire un editor di testo
2. Creare un nuovo file e salvarlo con l’estensione .html
3. Una volta scritti tutti i comandi HTML che ci sembrano opportuni nella nostra
pagina WEB, salvare il file


4. Aprire il browser (Netscape, Firefox, Internet Explorer, Safari,…)
5. Selezionare il comando “Aprire file” dal menu File e scegliere il file appena
creato


6. Visualizzare il file nella finestra del browser
7. Se si fanno modifiche al file e la finestra del browser è ancora aperta,
selezionare il pulsante “Reload” della barra degli strumenti e saranno visibili le
modifiche fatte (se le abbiamo precedentemente salvate nel nostro file
originale).

Al momento la pagina è visibile "in locale", cioè solo sul computer su cui stiamo
lavorando, per renderla visibile a tutti (tecnicamente si dice metterla "in linea" o
"in rete") va inviata (insieme agli eventuali file di figure che abbiamo inserito) al
gestore del Server Web che la collocherà sul computer opportuno.
C. Braghin - HTML: nozioni di base
12
Come creare il primo file HTML (2)
WordPad
(o qualunque altro
editor di testo)
documento
HTML
scegliere il formato
solo testo e salvare con
estensione .html
C. Braghin - HTML: nozioni di base
13
Intestazione - <HEAD>
 La parte contenuta tra i tag <HEAD> e </HEAD> viene chiamata
intestazione
 contiene informazioni generali, o meta-informazioni, che riguardano
il documento.
 il contenuto dell'HEAD non viene visualizzato come una parte del
testo del documento: il materiale da visualizzare e' contenuto
all'interno del BODY.
 Solo determinati tag possono essere posti all'interno dell'HEAD. In
particolare, non può comparire direttamente del testo.
 Un tag deve SEMPRE comparire nell’intestazione, e si tratta di
<TITLE>:
 <TITLE> contiene il titolo del documento. Questo elemento è
obbligatorio -- tutti i documenti devono avere un TITLE.
C. Braghin - HTML: nozioni di base
14
Altri elementi di <HEAD>
 <BASE> - imposta l’URL di base del documento, utilizzata per
risolvere i riferimenti relativi
 permette di muovere il documento in un altra directory (o addirittura in
un nuovo sito) senza alterare il funzionamento dei link a URL relativi
 <STYLE> - permette di specificare uno stile per definire la
formattazione del documento
 <SCRIPT> - permette l’inserimento di script per “animare” la pagina
(con JavaScript e VBScript)
 <META> - contiene le meta-informazioni relative al documento
 <META NAME="author” CONTENT="Francesco Stillitano">
 <META NAME="keywords" CONTENT="html documentazione
guida url">
 <META NAME="editor"
CONTENT="Win95 Notepad">
 L'attributo NAME comunque si riferisce a valori arbitrari definiti
dall'utente.
C. Braghin - HTML: nozioni di base
15
Corpo del documento - <BODY>
 La parte contenuta tra i tag <BODY> e </BODY> viene chiamata
corpo del documento
 All'interno di <BODY> si trova il contenuto del documento, ovvero
quello che si vedrà a video
 Molteplici elementi possono essere contenuti nel <BODY>:




Immagini
Suoni o filmati
Testo, eventualmente organizzato in tabelle o form
Link
 La sezione <BODY> contiene quindi tutti i tag che descrivono
come la pagina viene visualizzata all’utente:
 colori (per i font e per il background)
 font utilizzati
 immagini, link, tabelle…
C. Braghin - HTML: nozioni di base
16
Attributi di <BODY> - Colore dello sfondo
 BGCOLOR=“#rrggbb”
 Attribuisce allo sfondo della pagina uno specifico colore RGB
 Il colore può essere espresso sia col nome inglese che nel relativo
codice RR GG e BB sono i codici colore esadecimali per i livelli di
Rosso (red), Verde (green) e Blu (blue), che vanno da 0 a 255 -cioè in esadecimale, da 00 a FF esadecimale - il colore "#000000" è il nero
 Il colore "#FFFFFF" è il bianco
 Se c'è anche un'immagine di background (vedi prossima slide), il
valore di BGCOLOR e' usato per il colore al di sotto dell'immagine di
background -- se l'immagine di background ha parti trasparenti,
questo e' il colore che verra' visualizzato.
 La maggior parte dei nuovi browser supporta al posto dei valori
RGB anche i nomi dei colori più comuni in inglese
 "black" = "#000000" = nero
 "white" = "#ffffff" = bianco
 Esempio2: body1_bg_color.html
C. Braghin - HTML: nozioni di base
17
Attributi di <BODY> - Immagine come sfondo
 BACKGROUND=“immagine.jpg”
 inserisce un'immagine come sfondo della pagina (sono permesse
immagini .gif .jpg o .png), indipendentemente dalle sue dimensioni
 <BODY BACKGROUND="immagine.gif”>
 <BODY BACKGROUND="http://altrosito.it/path/immagine.gif">
 se l’immagine non è sufficientemente grande, lo sfondo del
documento viene riempito ripetutamente della stessa immagine
 BGPROPERTIES=“fixed”
 l'immagine adoperata a riempimento può essere tenuta ferma
durante lo spostamento verticale (scrolling) sulla pagina (solo con
Internet Explorer, o con CSS)
 <body background="immagine.gif" bgproperties="fixed">
 Esempio3: body2_bg_image.html
C. Braghin - HTML: nozioni di base
18