Il Linguaggio HTML
Hyper Text Markup Language
Corso “Il computer come forma di socializzazione e integrazione”
ITCG Einaudi Senorbì A.S.2008-2009
Docenti: Gabriella Deiana - Daniela Lecca



L’HTML è un linguaggio di codifica (markup)
pensato per la creazione di ipertesti.
Che cosa è un ipertesto? È un sistema di
organizzazione delle informazioni in una
struttura non sequenziale, bensì reticolare ed è
costituito da un insieme di unità informative (i
nodi) e da un insieme di collegamenti (link) che
da un nodo permettono di passare a più nodi.
L’HTML fa parte della famiglia dei linguaggi
dichiarativi
Il concetto di markup
Markup non è altro che un insieme di codici, o “tag” inseriti nel testo,
per istruire il programma utilizzato sulla struttura e sul modo di
presentazione del testo.
L’uso più comune del markup elettronico stà nel cambio dell’aspetto
del testo via formattazione, cioè “marcando” alcune parti di esso
come grassetto o corsivo, cambiando le dimensioni delle lettere
o dei margini, per menzionare solo alcuni esempi.
Ogni word processor utilizza un linguaggio di markup per il controllo
della formattazione e dell’aspetto dei documenti, ma questo nella
maggior parte dei casi non è visibile all’utente.
Limiti dell’HTML






Linguaggio di rappresentazione non modificabile (perché set
di marcatori predefinito);
linguaggio scarsamente strutturato, dotato di una sintassi
poco potente, incapace di descrivere fenomeni complessi o
informazioni altamente organizzate;
predilezione per marcatori stilistici più che strutturali;
solo link unidirezionale;
impossibilità di un controllo elastico sull’aspetto del
documento (variabile in relazione alle tecnologie del visitatore
del sito);
browser, che hanno iniziato l’infelice pratica dell’introduzione
di loro proprie e individuali “extensions” al linguaggio HTML.
incominciamo….
Per produrre un documento:

SCRITTURA DEL CODICE
Uso di un applicativo Windows (p.e. Blocco Note). L’importante è
lavorare in formato .txt cioè “solo testo” (solo uso sequenze
ASCII), senza introdurre formattazioni “proprietarie”.
Modificare poi l’estenzione da .txt a .htm oppure .html
Visualizzazione del risultato sul browser.
EDITOR
Uso di un applicativo specifico (p.e. editor visuale con menù a
tendina e bottoni grafici tipo un word processor) in grado di
manipolare l’HTML (conversione automatica delle operazioni
di interfaccia in istruzioni di codice HTML).
Visualizzazione del risultato anche in locale.

GLI EDITOR

Editor di puro testo aiutano a creare file
richiamando i tag e gestendo
link.(Arachnophilia)

Editor WYSIWYG ( Frontpage -Dreamweaver)
WYSIWYG
What you see is what you get
Ciò che si vede è ciò che si ottiene
Quindi è la capacità di un programma grafico di visualizzare
esattamente sullo schermo la pagina una volta stampata
(pubblicata).
TAGS HTML
Istruzioni scritte all’interno dei simboli
<
e
>
Istruzioni attive fino a quando non vengono disattivate ripetendo
l’istruzione stessa preceduta dal simbolo / e cioè:
<istruzione>
</istruzione>
Questo modo di scrivere le istruzioni prende il nome di tag.
STRUTTURA BASE HTML
Il tag <html> scritto all’inizio viene detto tag iniziale
Il tag </html> viene posto alla fine della pagina HTML
Tra <html> e </html> scrivere <head> e </head>
All’interno della sezione HEAD può essere inserito il paragrafo
<title>
</title>
Sotto la sezione HEAD viene inserita la sezione <body> con il relativo
tag di chiusura </body>.
RISULTATO:
Sintassi per un commento (ovunque nel file):
<!—commento-->
<html>
<head>
<title>
</title>
Utilizzati per segnalare delle sezioni di codice
o altre informazioni utili a chiunque utilizzi la
pagina HTML
</head>
NON interpretate da BROWSER
<body>
</body>
</html>
Utilizzare la scrittura indentata (soprattutto
per programmi particolarmente lunghi)
USO PRINCIPALI TAG
FORMATTAZIONE STANDARD DI UN TESTO
INTESTAZIONI DI SEZIONE:
All’interno della sezione BODY inserire
<h1>
</h1 >
Intestazioni HTML: dal livello 1 (il più grande)
al livello 6 (il più piccolo): <h6>
</h6>
Permettono la scrittura in diverse forme di carattere (titolo1, titolo2, sottotitolo......)
USO PRINCIPALI TAG
PARAGRAFI:
Per strutturare il testo in paragrafi: <p>...chiudere poi con il tag </p>.
Allineamento: attributo align=“left|right|center|justify”
Il tag <br> inserito al termine della riga permette il ritorno a capo Non ha tag di
chiusura. Fa ripartire il testo dal margine sinistro.
<b>
grassetto
</b>
<i>
corsivo
</i>
<u>
sottolineato
</u>
<s>
barrato
</s>
<em>
enfasi
</em>
<strong>
forte
</strong>
Combinazione anche di più tag assieme  importante creare codice nidificato
Il tag <blockquote> consente di aggiungere degli spazi (come fosse un
tabulatore)
USO PRINCIPALI TAG
UTILIZZO DI COLORI E SFONDI:
Il tag <font> con i suoi attributi face, size, color
face =“Arial | Times New Roman | Courier-new | Comic”
size assume valori interi da 1 a 7
color espresso con colori tipo black, red, yellow oppure con una
combinazione di 6 numeri o lettere (da A a F) preceduti da #...
Esempio un azzurro è “#6473ef”, un rosa "#cc3677“
Tabella dei colori
Nel tag <body> per aggiungere colore allo sfondo
<body bgcolor = "silver">
Attribuire un colore anche al testo e personalizzare il colore dei
collegamenti (link normali-visitati-attivi)
<body bgcolor = ”black” text = ”white” link = ”yellow”
vlink = ”magenta”
alink = ”lime”>
ALTRI COLORI:
green, gray, olive, maroon, navy, red,
blue, purple, teal, fuchsia, aqua
Tabella dei colori ai siti
http://www.molly.com/molly/webdesign/136_colors.html
http://www.molly.com/molly/webdesign/colorchart.html
USO PRINCIPALI TAG
CARATTERI SPECIALI:








I file html sono ASCII puri.
Vengono definiti un set di caratteri speciali chiamati entità per
aggirare il problema dei caratteri speciali.
Possono avere due forme:
Entità con nome ed iniziano con la & e terminano con il ;
es : &quot; &laquo; &copy;
Le entità con numero iniziano con la & aggiunte con il # e termina
con il ;
es: &#130; &#245;
Per scrivere la parola poiché : poich&eacute; oppure
poich&#233;
&lt;
&gt;
&le;
&ge;
&deg;
&agrave;
&eacute;
&egrave;
&igrave;
&ograve;
&ugrave;
&amp;
&nbsp;
&euro;
>
<
≤
≥
°
à
é
è
ì
ò
ù
&
spazio
€
APICE E PEDICE:
<sup>
</sup>
<sub>
</sub>
USO PRINCIPALI TAG
ELENCHI PUNTATI E NUMERATI: (molto utile il loro utilizzo in una
pagina web)
Elenco non ordinato  due diversi tag: <ul> che comunica al
documento che sta cominciando una lista e <li> vicino ad ogni
singolo elemento della lista stessa:
<body>
<p> I miei studenti preferiti
Attributo
type = “disc | circle | square” per <ul>
<ul>
<li> pino
<li> gino
<li> lino
</ul>
type=“A | a | I | i | 1” per <ol>
</body>
Elenco numerato  <ol> (al posto di <ul>) e
<li> vicino ad ogni singolo elemento della
lista stessa
USO PRINCIPALI TAG
Inserimento di righe orizzontali: <hr>
Non
ha tag di chiusura
Controllare la lunghezza della riga:
attributo width: <hr width = ”50%”>
oppure espresso in pixel…
Altri attributi: align (left|right|center), noshade, size (numero)
ALLINEAMENTO:
Il tag <DIV> permette di “dividere”
lo spazio disponibile
Attributo:
align = “center | left | justify |
right”
<DIV align = “center”>
</DIV>
COLLEGAMENTO IPERTESTUALE:
Documenti HTML sono ipertesti  il funzionamento è in massima parte
dovuto agli HyperLink o ancoraggi, il cui tag specifico è <a>
(Anchor) con chiusura </a>
Al suo interno è possibile inserire testo, immagini o altri elementi
multimediali.
Perché funzioni, deve essere associato ad altri attributi:
Il più importante di questi è href (abbreviazione di Hypertext
Reference) contenente l'URL o la pagina da raggiungere.
Sintassi : <a href = ”nome file”>testo del collegamento</A>
Altri collegamenti


E’ possibile creare link a qualsiasi risorsa (immagini,
testi, audio, video, programmi) semplicemente
usando l’estensione esatta del file (che farà aprire il
programma necessario a leggere il file)
<A href=“mailto:[email protected]in.it”>clicca qui per spedirmi
un messaggio</A>: link ad un indirizzo di posta
elettronica (il link attiva il software necessario
all’invio di messaggi di posta)
Link interni al documento
Alla parte di testo che si vuole raggiungere tramite link
deve essere assegnato un nome preciso (nome
dell’ancora):
<A name=“pippo”>Questo è pippo</A>
Il link deve far riferimento a questa sezione:
<A href=“#pippo”>se clicchi qui vai alla sezione
“Questo è pippo”</A>
Link a punti precisi
Il sistema delle ancora può anche essere utilizzato fra
pagine diverse, sempre specificando tramite <A
name=“nomeancora”> il nome dell’ancora e con <A
href=“#nomeancora”> il link. Se però “nomeancora” è in
un documento esterno rispetto al link avremo:
<A href=“nome_doc_esterno.html#nomeancora”>
Le Tabelle: creazione e strutturazione
Per creare una tabella in HTML si usano i tag:
<table>…….</table>
all’interno dei quali si deve definire il contenuto della tabella.
Per definire una tabella si procede nel modo seguente:
si realizza la prima riga facendo uso del tag <tr> = table row
si indicano le varie celle facendo uso:
del tag <th> per le intestazioni di cella </th> = table header
del tag <td> per i dati della cella </td> = table data
si passa alla seconda riga con le relative celle avendo cura di usare il tag </tr>
Righe e colonne
<TR> “table row” per ogni riga
<TD> “table data” per ogni cella della riga
Esempio: tabella a 2 righe e 3 colonne:
<TABLE>
<TR>
<TD>testo della cella</TD>
<TD>testo della cella</TD>
<TD>testo della cella</TD>
</TR>
<TR>
<TD>testo della cella</TD>
<TD>testo della cella</TD>
<TD>testo della cella</TD>
</TR>
</TABLE>
Attributi della tabella







BORDER per inserire un bordo
BORDERCOLOR per il colore del bordo
BGCOLOR per il colore di sfondo
BACKGROUND per un immagine come sfondo
ALIGN per l’orientamento
CELLSPACING per lo spazio fra il bordo delle celle e il bordo
della tabella
CELLPADDING per lo spazio fra il bordo della cella e gli elementi
al suo interno
<TABLE width=300 border=1 bordercolor=“red”
bgcolor=“green” align=“center” cellspacing=10
cellpadding=10>
Dimensioni definite con width (larghezza) e height (altezza); possono essere
espresse in pixel o in percentuale della pagina, il bordo (border) con un numero:
<table border = 0 width = 500>
<table border = 2 width = 50%>
</table>
</table>
Le Tabelle: formattazione
Per aggiungere una didascalia alla tabella: <caption> e </caption> subito dopo il tag
<table> che può essere disposto sopra e/o sotto la tabella con l’attributo
align = “top | bottom”
Osservazioni:
Se larghezza tabella espressa in pixel  a qualsiasi risoluzione, la misura rimane
invariata.
Se larghezza tabella espressa in percentuale: <table width = 50%>
</table>
 risulta diversa a seconda della risoluzione video dell’utente
es.:
risoluzione video di 640x480  tabella di circa 320 pixels
risoluzione di 800x600  tabella di circa 400 pixel.
In generale e' meglio mantenere il controllo assoluto sulla grandezza delle tabelle
adottando una misurazione in pixel piuttosto che in percentuali.
Le Tabelle: formattazione
Altri attributi del tag <td>
align = “left | center | right | justify”
valign =“top | middle | bottom | baseline”
 allineamento orizzontale
 allineamento verticale
Baseline esamina una sola cella per riga e ne allinea il
contenuto rispetto ad una linea di base comune…
height = espressa in pixel
colspan = numero
rowspan = numero
 altezza
per accorpare orizzontalmente più celle in un’unica cella
per accorpare verticalmente più celle in un’unica cella
Le immagini
I browser (Netscape, Internet Explorer, Opera ecc.) riconoscono molti formati grafici, anche
se sono tre quelli più utilizzati:
1.
2.
3.
GIF (Graphics Interchange Format)
JPEG (Joint Photographics Experts Group)  jpg
PNG
Si utilizza il tag <img> (senza tag di chiusura): in questo tag staranno tutte le informazioni.
Attributo scr = permette di visualizzare l’immagine: <img scr=”immagine.gif”>
SRC sta per Search ed è il percorso dal quale il browser ricava l'immagine (in questo caso
"immagine.gif")
ATTENZIONE: accertarsi di scrivere il percorso corretto; in caso contrario il visitatore
visualizzerebbe solo un’icona che indica l’impossibilità di scaricare l’immagine. E’
consigliabile utilizzare sempre elementi di ottima qualità grafica, altrimenti si
potrebbe impiegare troppo tempo per scaricare l’immagine.
Le immagini
L'elemento <img> è corredato da diversi attributi:
per modificare le dimensioni (consigliati programmi di grafica) si può disporre degli attributi
width e height : <img scr=”immagine.gif” height=“150” width=“45”>
Attributo alt consente di inserire un testo accanto all’immagine:
alt=”testo alternativo”
Attributo align per definire posizione dell'immagine rispetto al testo
align =“top”
testo allineato in alto
align =“middle”
testo allineato in centro
align =“bottom”
testo allineato in basso
Altri attibuti
hspace =
spaziatura orizzontale (in pixel)
vspace =
spaziatura verticale (in pixel)
border =
in pixel
Un’immagine può essere usata anche come sfondo: <body background=“percorso”>
Immagini e link
<IMG SCR=“immagine.jpg”>
Una immagine può funzionare come link
<A HREF=“indice.html”><Img SRC=“imm.gif”></A>
Normalmente le immagini che richiedono link sono
circondate da un bordo il cui spessore può essere cambiato
con l’attributo BORDER nel tag IMG>
<IMG SRC=“IMG.gif” BORDER=5>
AUDIO




I tipi di file molto comuni sono i file AU ( di Sun
Microsystem) usati in tutte le piattaforme, ma con
una qualità scadente.
Quelli di qualità migliore , ma dedicati sono il
formato AIFF per il macintosh e WAVE per il
Windows.
Infine il formato RealAudio viene utilizzato per
ascoltare direttamente dal server, senza dover
scaricare direttamente tutto il brano.
Vedi esempio link nel file canzone1.html
<a
href="nonvita.wav">ascoltala</a>
Suoni e musiche di sottofondo
I file audio supportati sono il MIDI e il MP3
Inserito all’interno di <HEAD>:
<BGSOUND src=“music.mid” loop=“INFINITE”>
(solo con Explorer) fa partire il suono all’apertura
della finestra.
TESTI SCORREVOLI (MARQUEE)








<MARQUEE> QUESTO TESTO SCORRE </MARQUEE>
L’attributo behavior può assumere i valori : scroll,slide e alternate
scroll e standard, slide si ferma quando raggiunge il margine , alternate
fa rimbalzare il testo da sinistra verso destra.
Direction : right o lest determina il verso.
Scrollmount determinana la velocità di spostamento del testo e il valore
numerico ad esso assiciato corrisponde al numero di pixel per ogno
movimento del testo.
Scrolldelay, determina la durata del passo espressa in millisecondi.
Per cambiare l’aspetto del testo usare bgcolor.
Heiht e width determina le dimensioni del riquadro che circonda il testo
scorrevole. Hspace e vspace, lo spazio compreso tra i bordi e il testo
Altri comandi di formattazione




<spacer> per rientro del testo (tag proprietario che funziona
solo con Netscape)
<blink> testo che lampeggia (tag proprietario che funziona
solo con Netscape)
<marquee> testo che scorre (tag proprietario che funziona
solo con Explorer)
<multicol cols=“2”> per porre il testo in colonne (tag
proprietario che funziona solo con Netscape)
I MODULI



Fino ad ora sono state illustrate le istruzione per la
creazione di pagine on-line, senza possibilità di
interazione da parte dell’utente.
I moduli, detti anche schede o form in inglese ,
trasformano le pagine web trasformandole in vere
applicazioni interattive per gestire sondaggi o scelte in
base ad un input a scelta.
Queste istruzioni sono diventate uno standard a
partire dall’ HTML 2.0 e sono supportate da tutti i
moderni browser.
CREAZIONE DI UNA SCHEDA

E’ costituita da due operazioni indipendenti:
la creazione degli elementi della scheda
 la realizzazione del programma script che dovrà essere richiamato
dal server ( chiamato script CGI o script) e che si occupa di
elaborare le informazioni che l’ utente invia utilizzando la scheda.
La scheda si crea con il tag <FORM> e chiusura </FORM>
 Il form include due argomenti:






METHOD
ACTION
METHOD = a GET o POST e determinano il modo in cui le
informazioni verranno inviate allo script (sul server) che si deve
occupare della loro elaborazione.
ACTION : Indica lo script sul server che deve essere richiamato nel
momento in cui viene inoltrata questa scheda.
ESEMPIO SCHEDA
ESEMPIO SCHEDA

<

Bisogna definire successivamente il codice HTML che definisce l’area
di testo:


FORM METHOD= POST ACTION=“….”>
Inserisci il tuo nome:<INPUT NAME=“Nome”>
INPUT è il tag più utilizzato ed accetta due attributi:



TYPE E NAME
Il type descrive il tipo di elemento : text, radio, e altri
pulsanti tipo checkbox per le caselle di selezione . Se
omesso per default = ad una casella testo.
Il name indica il nome dell’ elemento che lo script riceve
dalla scheda sotto forma di una serie di coppie
nome=valore
Campi lunghi

Il tag Input può includere i seguenti attributi:
Size : indica la lunghezza dei caratteri, (lo standard è pari a 20 car.)

maxlength: Indica il numero di caratteri che l’utente può immettere.

AREE DI TESTO:



<Text area name=“commenti” rows=“20” cols=“30”>commenti.
</texarea>
PULSANTI OPZIONE






L’attributo e: radio INPUT TYPE=“RADIO” NAME=“W LA SQUOLA”
L’attributo password evita di visualizzare quanto si scrive sul
video.
Attributo radio consente una scelta fra tante
L’attributo checkbox attiva una o più caselle
Oltre che a definire un valore standard, è possibile includere un
pulsante di annullamento”Reset”
<input type=“reset” value=“valori standard”>
ESEMPIO “controllo della risposta ad un quiz”
TABELLA COLORI
colore
parola chiave
notazione
esadecimale
arancione
orange
#FFA500
blu
blue
#0000FF
bianco
white
#FFFFFF
giallo
yellow
#FFFF00
grigio
gray
#808080
marrone
brown
#A52A2A
nero
black
#000000
rosso
red
#FF0000
verde
green
#008000
viola
violet
#EE82EE
Scarica

Il linguaggio HTML File