- 29 Maggio 2007
- 2.253
- 0
- Miglior risposta
- 0
Le REGOLE D’ORO per la scrittura html
· definire una progressione progettuale;
· semplicità, chiarezza e immediatezza;
Link commentati descrittivi del contenuto dell'URL che proponete;
· non pesantezza del testo, testi ridotti;
· cercare di stimolare la memoria visiva di chi legge;
· la necessità di non annoiare;
· diffusione, ricordare sempre di rendere accessibile 'al mondo' il
vostro documento,
· velocità: non inserire immagini di grandi dimensioni, meglio tante
piccole rispetto ad una molto grande. Ricordarsi che l’immagine
richiede tempo per essere caricata.
Una immagine di 30kb impiega 30secondi con un modem di 14,4
kbps e 10 secondi con un modem di 28,8 kbps.
Con alcuni browser, ad esempio Mosaic, e' possibile ritardare il
caricamento delle immagini in modo da evitare problemi;
· piacevolezza grafica;
· cercate per quanto possibile di indirizzare tutti alla vostra index
page, e non alle singole pagine: infatti nomi e contenuti di documenti
collegati tendono a cambiare con frequenza.
Introduzione
HTML = HyperText Markup Language
· HTML è un semplice linguaggio di formattazione per creare documenti
“Ipertestuali”;
· Il formato HTML è basato su un sistema di etichettatura (tagging scheme) di un testo
ASCII;
I codici di formattazione (tag) derivano dal linguaggio più complesso SGML
(Structured Generalized Markup Language).
· I documenti HTML sono conformi allo standard ISO 8879: Standard Generalized
Markup Language (SGML);
La formattazione HTML permette di:
· inserire degli ipertesti verso newsgroups, mail, documenti ed file multimediali;
· inserire menu;
· effettuare delle interrogazioni a database;
· strutturare dei semplici documenti con o senza immagini;
La prima versione di HTML 0 è stata sviluppata al CERN di Ginevra
· HTML 2.0 fu sviluppato da IETF's HTML tra il 1994 e il 1996;
· HTML 3.2 sviluppato dal 1996 e compatibile con HTML 2.0, permette di definire liste,
tabelle, ecc;
· 1998 con HTML 4.0 raccomandato dalla W3C;
Sul sorgente si può visualizzare quale tipo di sintassi è stata utilizzata
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
(DTD=Document type defination / IETF= Internet Engineering Task Force);
W3C
The World Wide Web Consortium, fondato nel 1994 da alcune Università americane, ha
la funzione di sviluppare protocolli comuni per World Wide Web.
Fornisce informazioni su sintassi html, protocolli http, sicurezza,ecc.
http.//www.w3c.org/
W3c nonostante abbia tra i suoi componenti rappresentanti dell’industria, IBM,
Netscape, Microsoft, ecc., ha una funzione neutrale, ricercando e studiando modelli di
documenti identificabili in ogni suo tag dal browser. W3c sta promuovendo anche
progetti relativi all’accessibilità sul web per persone disabili, progetto WAI (WEB
Accessibility Initiative).
E’ necessario imparare HTML quando sul mercato esistono degli “assistant” e dei
"WYSIWYG editor"? (What You See Is What You Get)
Alcuni prodotti:
HOT DOG
PAGEMILL
FRONTPAGE
WEBEDIT, il più neutrale
DREAMWEAVER
· HTML come un “Internet Media Type” MIME Content Type
- content type “text/html”
· MIME: standard che permette di spedire degli allegati binari con il servizio di mail
Internet
· content type 'text/html' negli “script cgi-bin” per identificarne il contenuto
Struttura di un documento HTML
Il file HTML e' un comune file ascii, con un'intestazione iniziale, che comunica al
compilatore che il file che si sta processando appartiene a un certo linguaggio.
· Il documento HTML e' composto da un'intestazione ed un corpo racchiusi fra
l'elemento
<HTML></HTML>
All'inzio e alla fine di tutti i documenti in HTML
<HEAD></HEAD>
Contiene informazioni descrittive come il titolo
<TITLE></TITLE>
Nome del documento che compare nella barra di intestazione del Browser
<BODY></BODY>
E' il corpo del documento, contiene tutto ciò che il browser visualizzerà
Intestazione: HEAD
L intestazione di un documento HTML è una collezione non ordinata di informazioni che
riguardano il documento.
Es.: <!--DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"-->
<HTML>
<HEAD>
<TITLE>Titolo sul browser</TITLE>
</HEAD>
TITLE - elemento obbligatorio
Identifica il contenuto del documento nel suo contesto globale
Il visualizzatore (Browser, es:Netscape) del documento può usare il titolo come etichetta
(label) per la finestra in questione
Corpo: BODY
L'elemento BODY contiene il testo del documento, incluse le intestazioni (headings), i
paragrafi, le liste, ecc.
Attributi
Gli attributi seguono il nome dell'elemento e possono avere un valore associato
Attributi nel<BODY>
BACKGROUND="#FFFFFF"
BACKGROUND="immagine.gif"
BGCOLOR="#FFFFFF"
BACKGROUND="URL"
TEXT="#0000FF">
BGSOUND=""
LINK
VLINK
ALINK
<BODY BACKGROUND="immagine.gif">
Permette di inserire un'immagine (*.gif,*.jpg) da usare come sfondo della pagina
<BODY BGCOLOR="#xxyyzz">
Permette di dare un colore di sfondo alla pagina utilizzando il codice RGB alfanumerico
<BODY TEXT="#xxyyzz">
Permette di specificare il colore del testo
<BODY LINK="#xxyyzz">
Permette di specificare il colore dei link
<BODY VLINK="#xxyyzz">
Permette di specificare il colore dei link gia' selezionati
<BODY ALINK="#xxyyzz">
Permette di specificare il colore dei link al momento del click con il mouse
Tags
· definiscono l’inizio e la fine di una porzione di testo da formattare:
intestazioni, paragrafi, liste, caratteri evidenziati e "links"
· ogni elemento inizia con un label (etichetta). I label iniziali ‘start tag’
sono delimitati da "<" e ">", quelli finali ‘end tag’ da "</" e ">".
esempio: <H1 >Intestazione</H1 >
*Alcuni elementi non prevedono un fine tag
- es.:<BR>
* Per altri elementi la fine tag può essere omessa
- es.: </P> o </LI>
* Nel documento HTML si possono inserire dei commenti usando la seguente sintassi:
<!--Commento nel documento HTML.-->
*Per essere conforme alle norme specifiche, un documento HTML deve iniziare con la
seguente dichiarazione del tipo di documento:
<!--I DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN53)-->
Formattazione di struttura
Sono Tag usati per evidenziare parti testo e impostare gli allineamenti
Gli Headings <H?></H?> sono sei e definiscono differenti livelli di grandezza di un
testo/intestazione da H1 a H6
H1 scritta più grande H4 scritta più grande
H2 scritta più grande H5 scritta più piccola
H3 scritta più grande H6 scritta più piccola
Allineamento titolo
Alla grandezza del testo può essere associato l'allineamento del testo rispetto alla
pagina.
<H? ALIGN=LEFT/CENTER/RIGHT></H?>
Font
Il tag <FONT>...</FONT> ci permette di modificare l'aspetto del testo. Gli attributi di
questo tegs sono:
FACE="Nome del Font"
SIZE="Misura"
COLOR="COLORE"
ALIGN="Valore di Allineamento orizzontale"
"Face" imposta il font da utilizzare: Times New Roman, Comic Sans MS.....
"Size" imposta la misura del carattere: 1, 2, 3, 4, +1, +2, +3, ......
"color" imposta il colore del carattere
Colori
I vari colori si ottengo mediante un codice detto "Esadecimale" cioe' in base
16. Il nostro monitor è suddiviso in puntini che in gergo si chiamano Pixel, ogni puntino
e' suddiviso in tre parti che assumono diversa colorazione: Red, Green e Blue,
dosando questi tre colori in maniera appropriata sul Pixel possiamo ottenere tutti i
colori possibili dal bianco al nero.
La sintassi per impostare il colore di un Pixel e': "#RRGGBB", Es: LINK="#33E2F4",
due cifre Esadecimali per ogni colore.
Formattazioni del testo
Il browser non tiene conto della Formattazione del nostro testo: se ci sono linee bianche
da lasciare, rispettare la spaziatura o andare a capo correttamente, allora dobbiamo
intervenire usando determinati tag:
Paragrafi e interruzioni di linea
P : Paragraph
L’identificatore d'interruzione paragrafo interrompe una linea e ne inserisce una vuota
per meglio evidenziare l’inizio di un nuovo paragrafo.
- il ritorno carrello (CR) non e' significativo per i file HTML
- spazi multipli vengono ridotti ad un unico spazio
- se gli spazi devono essere valorizzati si introduce il carattere
- Si può produrre un allineamento
<P ALIGN=LEFT/|CENTER/RIGHT></P>
Se non si inseriscono del <P> il testo risulta come un unico grande paragrafo a meno
che venga indicato come testo preformattato con il tag <PRE>
PRE : Preformatted text
L' identificativo di testo preformattato è utile per riprodurre un testo in un formato
prestabilito
- gli spazi, il "new line', il ritorno carrello sono significativi
- il font usato è diverso rispetto a quello usato con il tag P
Si può modificare la Larghezza (in caratteri)
<PRE WIDTH=?></PRE>
BR: Line Break
*Questo elemento forza l’interruzione di linea fra le parole e a differenza del <P> non
introduce nessuna linea aggiuntiva fra le righe di testo
HR: Horizontal Rule
· Rappresenta un divisore fra le sezioni del testo
· Tipicamente è una linea orizzontale con lunghezza variabile, dipendente dalla
dimensione della finestra
<HR width="80%"> Larghezza della riga in percentuale o in pixel)
<HR SIZE=?> Spessore (in pixel)
<HR ALIGN=LEFT|CENTER|RIGHT> Allineamento(in pixel)
Nessun effetto 3D<HR NOSHADE>
Caratteri Speciali
Esistono alcuni caratteri particolari es: &, @, £, ¥, che inseriti da tastiera non vengono
riconosciuti dal browser, per far si che questi carateri appaiano dobbiamo fare
riferimento a un codice ben definito dallo standard ISO 8859-Latin-1: per esempio per
avere una "&", dovremo inserire "#38, per avere lo yen "¥", inseriremo
"#165" e cosi' via.
Liste
Le liste sono usate per indentare un testo
<UL> <LI></UL>: Unordered list
Liste libere, non ordinate sono evidenziate da un elenco puntato ('bullet')
<LI> inserisce prima di ogni elemento un punto
<UL TYPE=DISC/CIRCLE/SQUARE> ( valido per tutta la lista)
<LI TYPE=DISC/CIRCLE/SQUARE>
(valido per questo e i successivi)
Liste numerate
*<OL><LI></OL> :Ordered List
(<LI> prima di ogni elemento)
· Il Tipo di cifre è determinato da:
<OL TYPE=A/|a/I/i/1>
(valido per per tutta la lista)
<LI TYPE=A/|a/I/i/1>
(valido per questo e i successivi)
· Il Numero di partenza è determinato da:
<OL VALUE=?> (per tutta la lista)
<LI VALUE=?> (per la singola e le successive)
Lista di definizioni, molto usata nella definizione dei menu
Il termine posto a sinistra e la sua descrizione appare rientrata del termine
* <DL><DT><DD></DL>: Definition List
<DT> termine <DD> definizione
Link
Un Hyperlink è un collegamento fra una porzione di un testo ed un altro testo/immagine
che può essere contenuto nello stesso documento o in un documento diverso.
I browser evidenziano il collegamento usando normalmente colori diversi dal testo e
sottolineando le parole:
<A> = ANCHOR e’ l’elemento usato per inserire degli hyperlink
< A HREF="URL documento..." >(il testo è usato come un bottone) </A>
* Il percorso del file è definito relativo (“Relative Pathnames), quando, il file che si
richiama, è nella stessa directory del file dal quale è richiamato.
<A HREF="file.html">Testo </A>
* Il percorso del file è definito assoluto (“Absolute Pathnames”) quando il file è
richiamato con il suo path completo.
<A HREF=”http://www.regione.toscana.it/ita/lavoro/file.htm/">testo</A>
Collegamenti a sezioni specifiche di altri documenti
<A HREF="file.htm#sezione">testo</A>
Collegamenti a sezioni specifiche all’interno dello stesso documento
· Per richiamare la sezione:
<A HREF=" #sezione">testo</A>
· Per marcare:
<A NAME="sezione">testo riferimento</A>
* E' possibile inserire un link per richiamare un file sul proprio personal:
<A HREF=”file:///C|/scuola/base.htm”>
* E' possibile inserire un link per richiamare il servizio di mail
<A HREF=”mailto:a.nencioni@regione.toscana,it”>
* E' possibile inserire un link per richiamare il servizio di news
<A HREF=”news:alt.good.news”>
* E' possibile inserire un link per richiamare il servizio di ftp (file transfer) per scaricare
un file dal server ftp usando il browser
<A HREF=”ftp;//ftp.regione.toscana.it/pub/pubdoc/file.htm”>
Immagini
In un documento HTML e' possibile inserire delle immagini:
· In-line Images
· External Images
· Clickable Images o imagemap
Immagini In-line
<IMG SRC=”immagine.gif/jpg” ALT=”testo”>
Immagini External
Sono quelle immagini richiamabili come documento separato tramite un Hyperlink
<A HREF=”URL/immagine.gif/jpg ” ALT=”testo”> <IMG SRC=”immagine”
ALT=”testo”></A>
ALT=”commento ” Visualizza del testo sostitutivo quando l'immagine non viene caricata
nella pagina
<IMG SRC="immagine.gif" ALIGN=top/bottom/middle>
L'attributo ALIGN permette di disporre l’immagine all'interno di una pagina
Mappe
La mappa si crea con una immagine sulla quale si ritagliano delle aree sensibili che
portano ad un link. Ci sono due tipi di Mappe: la ISMAP (mappa elaborata da un server)
e la USMAP (Mappa elaborata da un Browser) ovviamente ci dedicheremo alla USMAP;
per dichiarare una mappa si usa:
<IMG SRC="immagine" USEMAP=nome> per rendere sensibili le parti della mappa
dobbiamo usare questa sintassi:
<MAP NAME="nome mappa">
<AREA>
</MAP>
A questo punto bisogna analizzare il tag <AREA> che a sua volta contiene gli
attributi necessarii e cioe' le coordinate, la forma della mappa ecc ecc;
SHAPE="Forma" (REC, CIRCLE, POLY cioe' rettango, cerchio e poligono)
COODRS="coordinare varie" dichiarazione delle coordinate sensibili
ALT="stringa di informazione per l'utente"
HREF="destinazione del link"
Ovviamente all'interno di <MAP> ci possono essere piu' <AREA>, le coordinate si
indicano in questo modo: se l'immagine e' rettangolare indicheremo con X1,Y1 l'angolo
in alto a sinistra e X2,Y2 l'angolo in basso a destra, se l'immagine e' crcolare
indicheremo con Xc Yc le coordinate del centro e Yr il raggio, se l'immagine e poligonare
inseriremo tanti X e Y quanti sono i verti del poligono es: se abbiamo un esagono
inseriremo X1,Y1,X2,Y2,X3,Y3,X4,Y4,X5,Y5,X6,Y6 e cosi' via, ecco un esempio di
mappa:
<IMG SRC="mappa.gif" USEMAP="Erika"> <MAP NAME="Erka">
<AREA SHAPE="REC" COORS=X1=0,Y1=0,X2=50,Y2=50 ALT="Foto di Erika"
HREF="foto.html">
<AREA SHAPE="REC" COORS=X1=51,Y1=10,X2=100,Y2=50 ALT="Biografia di
Erika" HREF="bio.html"> </MAP>
Tabelle
Le tabelle risultano particolarmente utili quando dobbiamo allineare molti oggetti che
possono essere parti di testo o immagini il tag da utilizzare è:
<TABLE></TABLE>
· Definisce il contenuto di una tabella, include gli elementi per la definizione delle righe
e delle colonne
· E’ possibile includere una tabella all’interno di un’altra
Attributi:
<TABLE BORDER=?></TABLE> BORDER=N e' possibile scegliere lo spessore del
bordo da visualizzare
<TABLE CELLSPACING=xx>
Permette di quantificare lo spazio che deve esserci tra le celle contigue
<TABLE CELLPADDING=xx>
Permette di stabilire lo spazio all'interno di ogni singola cella
<TABLE WIDTH=xx>
Permette di stabilire la larghezza che la tabella deve avere
<TABLE WIDTH=xx %>
Permette di stabilire la larghezza in pixel che la tabella deve avere in percentuale
<CAPTION></CAPTION>
Viene usato per indicare la Legenda tabella
ALIGN è un attributo che controlla l’allineamento
Table header
<TH>definisce una cella di intestazione
Le celle sono uguali alle celle dati, ma il testo risulta in grassetto ed allineato in modo
centrale
Table row
<TR></TR>
Delimita una riga all’interno di una tabella
<TR ALIGN="LEFT/RIGHT/CENTER VALIGN=TOP/MIDDLE/BOTTOM">
I diversi attributi permettono di centrare il contenuto della celle in orizzontale (ALIGN) ed
in verticale (VALIGN)
Table data
<TD></TD>
Contenuto all'interno di una riga (<TR></TR>), rappresenta una cella. In ogni riga si
possono avere piu' celle.
<TD ALIGN="LEFT/RIGHT/CENTER VALIGN=TOP/MIDDLE/BOTTOM">
I diversi attributi permettono di centrare il contenuto della celle in orizzontale (ALIGN) ed
in verticale (VALIGN)
<TD COLSPAN=n>
Indica il numero di colonne da occupare
<TD ROWSPAN=n>
Indica il numero di righe da occupare
<TD WIDTH=xx>
Permette di stabilire la larghezza in pixel che la cella deve avere in pixel
<TD WIDTH= xx %>
Permette di stabilire la larghezza in pixel che la cella deve avere in percentuale
FRAME
I frames permettono di scomporre una pagina del browser in piu' parti, questo risulta
molto utile quando il nostro sito ha la necessità di mantenere di una porzione di pagina
in fissa, ad esempio un indice, e visualizzare i contenuti in un'altra area.
La compatibilità dei Frame è limitata al Netscape 2.0 e all'explorer Microsoft ultima
versione.
I tags da usare sono:
<FRAMESET></FRAMESET>
(al posto di <BODY>)
altezza in righe
<FRAMESET ROWS=,,,></FRAMESET>
(pixel o %)
altezza in righe
<FRAMESET ROWS=*></FRAMESET>
(* = misura relativa)
larghezza in colonne
<FRAMESET COLS=,,,></FRAMESET>
(pixel o %)
larghezza in colonne
<FRAMESET COLS=*></FRAMESET>
(* = misura relativa)
Definizione
<FRAME>
(contenuto di ogni singolo quadro)
Visualizza documento
<FRAME SRC="URL">
Nome del frame
<FRAME NAME="$$$$"|_blank|_self|_parent|_top>
Larghezza margine
<FRAME MARGINWIDTH=?>
(margine destro e sinistro)
Altezza margine
<FRAME MARGINHEIGHT=?>
(margine alto e basso)
Barra di scorrimento?
<FRAME SCROLLING="YES|NO|AUTO>
Misure non modificabili
<FRAME NORESIZE>
Contenuto in assenza di frame
<NOFRAMES></NOFRAMES>
(per i browser che non supportano FRAME)
TARGET
In un frame l’attributo target può essere utilizzato per aprire un nuovo documento in una
porzione di schermo predefinita.
< A HREF="url" TARGET="nome_finestra">Ancora di destinazione </A>
Visualizza il link nella finestra indicata nel target
TARGET="_top"
link nella stessa finestra ma a tutto schermo
TARGET="_new"
crea una nuova finestra
TARGET="_blank"
Visualizza il link in nuova finestra vuota
TARGET="_self"
link nella stessa finestra
TARGET="_parent"
link nella finestra parente. Se non esiste diventa come _self
FORM
La form è un'interfaccia utilizzata per eseguire programmi sul server e può essere
predisposta per molteplici funzioni tra cui la compilazione di moduli di iscrizione,
prenotazione, acquisto, oppure per l'interrogazione e l'aggiornamento di Banche Dati.
Le form utilizzano programmi CGI che interagiscono con gli archivi delle B.D. offrendo
un'interfaccia comune e rendendo possibile l'utilizzo e la distribuzione al mondo esterno
delle proprie funzionalità.
Definizione:
<FORM ACTION="URL" METHOD=GET|POST></FORM>
Upload di file
<FORM ENCTYPE="multipart/form-data"></FORM>
Campo di immissione
<INPUT TYPE="TEXT/PASSWORD/CHECKBOX/RADIO/
IMAGE/HIDDEN/SUBMIT/RESET">
Nome campo
<INPUT NAME="$$$$">
Valore del campo
<INPUT VALUE="$$$$">
Lunghezza massima
<INPUT MAXLENGTH=?>
(in caratteri)
Selezionato di default
<INPUT CHECKED>
(checkbox e radio)
grandezza
<INPUT SIZE=?>
Selezione elenco delle opzioni
<SELECT></SELECT>
Nome campo
<SELECT NAME="$$$$"></SELECT>
Numero opzioni
<SELECT SIZE=?></SELECT>
Selezione multipla
<SELECT MULTIPLE>
(per selezionare più di 1 elemento)
Opzioni
<OPTION>
(elementi che possono essere selezionati)
Opzione di default
<OPTION SELECTED>
Finestra di immissione
<TEXTAREA ROWS=? COLS=?></TEXTAREA>
Nome del campo
<TEXTAREA NAME="$$$$"></TEXTAREA>
A capo automatico in diversi modi
<TEXTAREA WRAP=OFF/VIRTUAL/PHYSICAL></TEXTAREA>
HTML Avanzato
L'HTML avanzato permette l'utilizzo di strumenti multimediali quali l'ascolto di brani
musicali e la visione di video.
< BGSOUND="file.wav">
-inserisce un suono che verrà udito in background quando si visualizza il documento
formato wav, au, midi
<META HTTP-EQUIV=Expires CONTENT="Tue, 04 Dec 1993 21:29:02 GMT">
<META HTTP-EQUIV="Keywords" CONTENT=" "educazione, education, scuola,
school, ">
<META HTTP-EQUIV="Reply-to" CONTENT="dsr@w3.org (Dave Raggett)">
<META http-equiv="refresh" CONTENT="2; URL=http://www.idg.fi.cnr.it/CLD/">
<META name="description" content="Corso di HTML”>
<META NAME="Title" CONTENT="The Etymology of Dunsel">
HTML 4.0
· HTML 4.0 incoraggia l’uso dei fogli di stile piuttosto delle tabelle per l’impaginazione.
I FOGLI di STILE sono l’elemento innovativo in quanto permettono di modificare
aspetti di visualizzazione prima considerati esterni alla volontà del disegnatore Web,
controllano il layout delle pagine e lo stile che può essere cambiato istantaneamente
su numerose pagine;
· Rende più semplice la descrizione delle immagini per browser non visivi (Lynx);
· Fornire indicazioni nei campi di input;
· Fornire raggruppamenti gerarchici per i campi di input;
· Dare la possibilità di associare un lemento HTML ad una descrizione testuale più
dettagliate
HTML dinamico
DTML per Microsoft o Dynamic HTML per Netscape, è un oggetto interattivo perché
può creare effetti dinamici come si trovano oggi in un cd rom (ad esempio scritte che
cambiano quando il mouse si posiziona sopra. Html non è stato un oggetto interattivo di
per sé, per diventare tale aveva bisogno di plug in.
Attraverso DHTML si può lavorare su livelli diversi (LAYER), con effetti di profondità
precedentemente non creabili.
DHTML ha necessità di piccoli script cgi o applet java
· definire una progressione progettuale;
· semplicità, chiarezza e immediatezza;
Link commentati descrittivi del contenuto dell'URL che proponete;
· non pesantezza del testo, testi ridotti;
· cercare di stimolare la memoria visiva di chi legge;
· la necessità di non annoiare;
· diffusione, ricordare sempre di rendere accessibile 'al mondo' il
vostro documento,
· velocità: non inserire immagini di grandi dimensioni, meglio tante
piccole rispetto ad una molto grande. Ricordarsi che l’immagine
richiede tempo per essere caricata.
Una immagine di 30kb impiega 30secondi con un modem di 14,4
kbps e 10 secondi con un modem di 28,8 kbps.
Con alcuni browser, ad esempio Mosaic, e' possibile ritardare il
caricamento delle immagini in modo da evitare problemi;
· piacevolezza grafica;
· cercate per quanto possibile di indirizzare tutti alla vostra index
page, e non alle singole pagine: infatti nomi e contenuti di documenti
collegati tendono a cambiare con frequenza.
Introduzione
HTML = HyperText Markup Language
· HTML è un semplice linguaggio di formattazione per creare documenti
“Ipertestuali”;
· Il formato HTML è basato su un sistema di etichettatura (tagging scheme) di un testo
ASCII;
I codici di formattazione (tag) derivano dal linguaggio più complesso SGML
(Structured Generalized Markup Language).
· I documenti HTML sono conformi allo standard ISO 8879: Standard Generalized
Markup Language (SGML);
La formattazione HTML permette di:
· inserire degli ipertesti verso newsgroups, mail, documenti ed file multimediali;
· inserire menu;
· effettuare delle interrogazioni a database;
· strutturare dei semplici documenti con o senza immagini;
La prima versione di HTML 0 è stata sviluppata al CERN di Ginevra
· HTML 2.0 fu sviluppato da IETF's HTML tra il 1994 e il 1996;
· HTML 3.2 sviluppato dal 1996 e compatibile con HTML 2.0, permette di definire liste,
tabelle, ecc;
· 1998 con HTML 4.0 raccomandato dalla W3C;
Sul sorgente si può visualizzare quale tipo di sintassi è stata utilizzata
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
(DTD=Document type defination / IETF= Internet Engineering Task Force);
W3C
The World Wide Web Consortium, fondato nel 1994 da alcune Università americane, ha
la funzione di sviluppare protocolli comuni per World Wide Web.
Fornisce informazioni su sintassi html, protocolli http, sicurezza,ecc.
http.//www.w3c.org/
W3c nonostante abbia tra i suoi componenti rappresentanti dell’industria, IBM,
Netscape, Microsoft, ecc., ha una funzione neutrale, ricercando e studiando modelli di
documenti identificabili in ogni suo tag dal browser. W3c sta promuovendo anche
progetti relativi all’accessibilità sul web per persone disabili, progetto WAI (WEB
Accessibility Initiative).
E’ necessario imparare HTML quando sul mercato esistono degli “assistant” e dei
"WYSIWYG editor"? (What You See Is What You Get)
Alcuni prodotti:
HOT DOG
PAGEMILL
FRONTPAGE
WEBEDIT, il più neutrale
DREAMWEAVER
· HTML come un “Internet Media Type” MIME Content Type
- content type “text/html”
· MIME: standard che permette di spedire degli allegati binari con il servizio di mail
Internet
· content type 'text/html' negli “script cgi-bin” per identificarne il contenuto
Struttura di un documento HTML
Il file HTML e' un comune file ascii, con un'intestazione iniziale, che comunica al
compilatore che il file che si sta processando appartiene a un certo linguaggio.
· Il documento HTML e' composto da un'intestazione ed un corpo racchiusi fra
l'elemento
<HTML></HTML>
All'inzio e alla fine di tutti i documenti in HTML
<HEAD></HEAD>
Contiene informazioni descrittive come il titolo
<TITLE></TITLE>
Nome del documento che compare nella barra di intestazione del Browser
<BODY></BODY>
E' il corpo del documento, contiene tutto ciò che il browser visualizzerà
Intestazione: HEAD
L intestazione di un documento HTML è una collezione non ordinata di informazioni che
riguardano il documento.
Es.: <!--DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"-->
<HTML>
<HEAD>
<TITLE>Titolo sul browser</TITLE>
</HEAD>
TITLE - elemento obbligatorio
Identifica il contenuto del documento nel suo contesto globale
Il visualizzatore (Browser, es:Netscape) del documento può usare il titolo come etichetta
(label) per la finestra in questione
Corpo: BODY
L'elemento BODY contiene il testo del documento, incluse le intestazioni (headings), i
paragrafi, le liste, ecc.
Attributi
Gli attributi seguono il nome dell'elemento e possono avere un valore associato
Attributi nel<BODY>
BACKGROUND="#FFFFFF"
BACKGROUND="immagine.gif"
BGCOLOR="#FFFFFF"
BACKGROUND="URL"
TEXT="#0000FF">
BGSOUND=""
LINK
VLINK
ALINK
<BODY BACKGROUND="immagine.gif">
Permette di inserire un'immagine (*.gif,*.jpg) da usare come sfondo della pagina
<BODY BGCOLOR="#xxyyzz">
Permette di dare un colore di sfondo alla pagina utilizzando il codice RGB alfanumerico
<BODY TEXT="#xxyyzz">
Permette di specificare il colore del testo
<BODY LINK="#xxyyzz">
Permette di specificare il colore dei link
<BODY VLINK="#xxyyzz">
Permette di specificare il colore dei link gia' selezionati
<BODY ALINK="#xxyyzz">
Permette di specificare il colore dei link al momento del click con il mouse
Tags
· definiscono l’inizio e la fine di una porzione di testo da formattare:
intestazioni, paragrafi, liste, caratteri evidenziati e "links"
· ogni elemento inizia con un label (etichetta). I label iniziali ‘start tag’
sono delimitati da "<" e ">", quelli finali ‘end tag’ da "</" e ">".
esempio: <H1 >Intestazione</H1 >
*Alcuni elementi non prevedono un fine tag
- es.:<BR>
* Per altri elementi la fine tag può essere omessa
- es.: </P> o </LI>
* Nel documento HTML si possono inserire dei commenti usando la seguente sintassi:
<!--Commento nel documento HTML.-->
*Per essere conforme alle norme specifiche, un documento HTML deve iniziare con la
seguente dichiarazione del tipo di documento:
<!--I DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN53)-->
Formattazione di struttura
Sono Tag usati per evidenziare parti testo e impostare gli allineamenti
Gli Headings <H?></H?> sono sei e definiscono differenti livelli di grandezza di un
testo/intestazione da H1 a H6
H1 scritta più grande H4 scritta più grande
H2 scritta più grande H5 scritta più piccola
H3 scritta più grande H6 scritta più piccola
Allineamento titolo
Alla grandezza del testo può essere associato l'allineamento del testo rispetto alla
pagina.
<H? ALIGN=LEFT/CENTER/RIGHT></H?>
Font
Il tag <FONT>...</FONT> ci permette di modificare l'aspetto del testo. Gli attributi di
questo tegs sono:
FACE="Nome del Font"
SIZE="Misura"
COLOR="COLORE"
ALIGN="Valore di Allineamento orizzontale"
"Face" imposta il font da utilizzare: Times New Roman, Comic Sans MS.....
"Size" imposta la misura del carattere: 1, 2, 3, 4, +1, +2, +3, ......
"color" imposta il colore del carattere
Colori
I vari colori si ottengo mediante un codice detto "Esadecimale" cioe' in base
16. Il nostro monitor è suddiviso in puntini che in gergo si chiamano Pixel, ogni puntino
e' suddiviso in tre parti che assumono diversa colorazione: Red, Green e Blue,
dosando questi tre colori in maniera appropriata sul Pixel possiamo ottenere tutti i
colori possibili dal bianco al nero.
La sintassi per impostare il colore di un Pixel e': "#RRGGBB", Es: LINK="#33E2F4",
due cifre Esadecimali per ogni colore.
Formattazioni del testo
Il browser non tiene conto della Formattazione del nostro testo: se ci sono linee bianche
da lasciare, rispettare la spaziatura o andare a capo correttamente, allora dobbiamo
intervenire usando determinati tag:
Paragrafi e interruzioni di linea
P : Paragraph
L’identificatore d'interruzione paragrafo interrompe una linea e ne inserisce una vuota
per meglio evidenziare l’inizio di un nuovo paragrafo.
- il ritorno carrello (CR) non e' significativo per i file HTML
- spazi multipli vengono ridotti ad un unico spazio
- se gli spazi devono essere valorizzati si introduce il carattere
- Si può produrre un allineamento
<P ALIGN=LEFT/|CENTER/RIGHT></P>
Se non si inseriscono del <P> il testo risulta come un unico grande paragrafo a meno
che venga indicato come testo preformattato con il tag <PRE>
PRE : Preformatted text
L' identificativo di testo preformattato è utile per riprodurre un testo in un formato
prestabilito
- gli spazi, il "new line', il ritorno carrello sono significativi
- il font usato è diverso rispetto a quello usato con il tag P
Si può modificare la Larghezza (in caratteri)
<PRE WIDTH=?></PRE>
BR: Line Break
*Questo elemento forza l’interruzione di linea fra le parole e a differenza del <P> non
introduce nessuna linea aggiuntiva fra le righe di testo
HR: Horizontal Rule
· Rappresenta un divisore fra le sezioni del testo
· Tipicamente è una linea orizzontale con lunghezza variabile, dipendente dalla
dimensione della finestra
<HR width="80%"> Larghezza della riga in percentuale o in pixel)
<HR SIZE=?> Spessore (in pixel)
<HR ALIGN=LEFT|CENTER|RIGHT> Allineamento(in pixel)
Nessun effetto 3D<HR NOSHADE>
Caratteri Speciali
Esistono alcuni caratteri particolari es: &, @, £, ¥, che inseriti da tastiera non vengono
riconosciuti dal browser, per far si che questi carateri appaiano dobbiamo fare
riferimento a un codice ben definito dallo standard ISO 8859-Latin-1: per esempio per
avere una "&", dovremo inserire "#38, per avere lo yen "¥", inseriremo
"#165" e cosi' via.
Liste
Le liste sono usate per indentare un testo
<UL> <LI></UL>: Unordered list
Liste libere, non ordinate sono evidenziate da un elenco puntato ('bullet')
<LI> inserisce prima di ogni elemento un punto
<UL TYPE=DISC/CIRCLE/SQUARE> ( valido per tutta la lista)
<LI TYPE=DISC/CIRCLE/SQUARE>
(valido per questo e i successivi)
Liste numerate
*<OL><LI></OL> :Ordered List
(<LI> prima di ogni elemento)
· Il Tipo di cifre è determinato da:
<OL TYPE=A/|a/I/i/1>
(valido per per tutta la lista)
<LI TYPE=A/|a/I/i/1>
(valido per questo e i successivi)
· Il Numero di partenza è determinato da:
<OL VALUE=?> (per tutta la lista)
<LI VALUE=?> (per la singola e le successive)
Lista di definizioni, molto usata nella definizione dei menu
Il termine posto a sinistra e la sua descrizione appare rientrata del termine
* <DL><DT><DD></DL>: Definition List
<DT> termine <DD> definizione
Link
Un Hyperlink è un collegamento fra una porzione di un testo ed un altro testo/immagine
che può essere contenuto nello stesso documento o in un documento diverso.
I browser evidenziano il collegamento usando normalmente colori diversi dal testo e
sottolineando le parole:
<A> = ANCHOR e’ l’elemento usato per inserire degli hyperlink
< A HREF="URL documento..." >(il testo è usato come un bottone) </A>
* Il percorso del file è definito relativo (“Relative Pathnames), quando, il file che si
richiama, è nella stessa directory del file dal quale è richiamato.
<A HREF="file.html">Testo </A>
* Il percorso del file è definito assoluto (“Absolute Pathnames”) quando il file è
richiamato con il suo path completo.
<A HREF=”http://www.regione.toscana.it/ita/lavoro/file.htm/">testo</A>
Collegamenti a sezioni specifiche di altri documenti
<A HREF="file.htm#sezione">testo</A>
Collegamenti a sezioni specifiche all’interno dello stesso documento
· Per richiamare la sezione:
<A HREF=" #sezione">testo</A>
· Per marcare:
<A NAME="sezione">testo riferimento</A>
* E' possibile inserire un link per richiamare un file sul proprio personal:
<A HREF=”file:///C|/scuola/base.htm”>
* E' possibile inserire un link per richiamare il servizio di mail
<A HREF=”mailto:a.nencioni@regione.toscana,it”>
* E' possibile inserire un link per richiamare il servizio di news
<A HREF=”news:alt.good.news”>
* E' possibile inserire un link per richiamare il servizio di ftp (file transfer) per scaricare
un file dal server ftp usando il browser
<A HREF=”ftp;//ftp.regione.toscana.it/pub/pubdoc/file.htm”>
Immagini
In un documento HTML e' possibile inserire delle immagini:
· In-line Images
· External Images
· Clickable Images o imagemap
Immagini In-line
<IMG SRC=”immagine.gif/jpg” ALT=”testo”>
Immagini External
Sono quelle immagini richiamabili come documento separato tramite un Hyperlink
<A HREF=”URL/immagine.gif/jpg ” ALT=”testo”> <IMG SRC=”immagine”
ALT=”testo”></A>
ALT=”commento ” Visualizza del testo sostitutivo quando l'immagine non viene caricata
nella pagina
<IMG SRC="immagine.gif" ALIGN=top/bottom/middle>
L'attributo ALIGN permette di disporre l’immagine all'interno di una pagina
Mappe
La mappa si crea con una immagine sulla quale si ritagliano delle aree sensibili che
portano ad un link. Ci sono due tipi di Mappe: la ISMAP (mappa elaborata da un server)
e la USMAP (Mappa elaborata da un Browser) ovviamente ci dedicheremo alla USMAP;
per dichiarare una mappa si usa:
<IMG SRC="immagine" USEMAP=nome> per rendere sensibili le parti della mappa
dobbiamo usare questa sintassi:
<MAP NAME="nome mappa">
<AREA>
</MAP>
A questo punto bisogna analizzare il tag <AREA> che a sua volta contiene gli
attributi necessarii e cioe' le coordinate, la forma della mappa ecc ecc;
SHAPE="Forma" (REC, CIRCLE, POLY cioe' rettango, cerchio e poligono)
COODRS="coordinare varie" dichiarazione delle coordinate sensibili
ALT="stringa di informazione per l'utente"
HREF="destinazione del link"
Ovviamente all'interno di <MAP> ci possono essere piu' <AREA>, le coordinate si
indicano in questo modo: se l'immagine e' rettangolare indicheremo con X1,Y1 l'angolo
in alto a sinistra e X2,Y2 l'angolo in basso a destra, se l'immagine e' crcolare
indicheremo con Xc Yc le coordinate del centro e Yr il raggio, se l'immagine e poligonare
inseriremo tanti X e Y quanti sono i verti del poligono es: se abbiamo un esagono
inseriremo X1,Y1,X2,Y2,X3,Y3,X4,Y4,X5,Y5,X6,Y6 e cosi' via, ecco un esempio di
mappa:
<IMG SRC="mappa.gif" USEMAP="Erika"> <MAP NAME="Erka">
<AREA SHAPE="REC" COORS=X1=0,Y1=0,X2=50,Y2=50 ALT="Foto di Erika"
HREF="foto.html">
<AREA SHAPE="REC" COORS=X1=51,Y1=10,X2=100,Y2=50 ALT="Biografia di
Erika" HREF="bio.html"> </MAP>
Tabelle
Le tabelle risultano particolarmente utili quando dobbiamo allineare molti oggetti che
possono essere parti di testo o immagini il tag da utilizzare è:
<TABLE></TABLE>
· Definisce il contenuto di una tabella, include gli elementi per la definizione delle righe
e delle colonne
· E’ possibile includere una tabella all’interno di un’altra
Attributi:
<TABLE BORDER=?></TABLE> BORDER=N e' possibile scegliere lo spessore del
bordo da visualizzare
<TABLE CELLSPACING=xx>
Permette di quantificare lo spazio che deve esserci tra le celle contigue
<TABLE CELLPADDING=xx>
Permette di stabilire lo spazio all'interno di ogni singola cella
<TABLE WIDTH=xx>
Permette di stabilire la larghezza che la tabella deve avere
<TABLE WIDTH=xx %>
Permette di stabilire la larghezza in pixel che la tabella deve avere in percentuale
<CAPTION></CAPTION>
Viene usato per indicare la Legenda tabella
ALIGN è un attributo che controlla l’allineamento
Table header
<TH>definisce una cella di intestazione
Le celle sono uguali alle celle dati, ma il testo risulta in grassetto ed allineato in modo
centrale
Table row
<TR></TR>
Delimita una riga all’interno di una tabella
<TR ALIGN="LEFT/RIGHT/CENTER VALIGN=TOP/MIDDLE/BOTTOM">
I diversi attributi permettono di centrare il contenuto della celle in orizzontale (ALIGN) ed
in verticale (VALIGN)
Table data
<TD></TD>
Contenuto all'interno di una riga (<TR></TR>), rappresenta una cella. In ogni riga si
possono avere piu' celle.
<TD ALIGN="LEFT/RIGHT/CENTER VALIGN=TOP/MIDDLE/BOTTOM">
I diversi attributi permettono di centrare il contenuto della celle in orizzontale (ALIGN) ed
in verticale (VALIGN)
<TD COLSPAN=n>
Indica il numero di colonne da occupare
<TD ROWSPAN=n>
Indica il numero di righe da occupare
<TD WIDTH=xx>
Permette di stabilire la larghezza in pixel che la cella deve avere in pixel
<TD WIDTH= xx %>
Permette di stabilire la larghezza in pixel che la cella deve avere in percentuale
FRAME
I frames permettono di scomporre una pagina del browser in piu' parti, questo risulta
molto utile quando il nostro sito ha la necessità di mantenere di una porzione di pagina
in fissa, ad esempio un indice, e visualizzare i contenuti in un'altra area.
La compatibilità dei Frame è limitata al Netscape 2.0 e all'explorer Microsoft ultima
versione.
I tags da usare sono:
<FRAMESET></FRAMESET>
(al posto di <BODY>)
altezza in righe
<FRAMESET ROWS=,,,></FRAMESET>
(pixel o %)
altezza in righe
<FRAMESET ROWS=*></FRAMESET>
(* = misura relativa)
larghezza in colonne
<FRAMESET COLS=,,,></FRAMESET>
(pixel o %)
larghezza in colonne
<FRAMESET COLS=*></FRAMESET>
(* = misura relativa)
Definizione
<FRAME>
(contenuto di ogni singolo quadro)
Visualizza documento
<FRAME SRC="URL">
Nome del frame
<FRAME NAME="$$$$"|_blank|_self|_parent|_top>
Larghezza margine
<FRAME MARGINWIDTH=?>
(margine destro e sinistro)
Altezza margine
<FRAME MARGINHEIGHT=?>
(margine alto e basso)
Barra di scorrimento?
<FRAME SCROLLING="YES|NO|AUTO>
Misure non modificabili
<FRAME NORESIZE>
Contenuto in assenza di frame
<NOFRAMES></NOFRAMES>
(per i browser che non supportano FRAME)
TARGET
In un frame l’attributo target può essere utilizzato per aprire un nuovo documento in una
porzione di schermo predefinita.
< A HREF="url" TARGET="nome_finestra">Ancora di destinazione </A>
Visualizza il link nella finestra indicata nel target
TARGET="_top"
link nella stessa finestra ma a tutto schermo
TARGET="_new"
crea una nuova finestra
TARGET="_blank"
Visualizza il link in nuova finestra vuota
TARGET="_self"
link nella stessa finestra
TARGET="_parent"
link nella finestra parente. Se non esiste diventa come _self
FORM
La form è un'interfaccia utilizzata per eseguire programmi sul server e può essere
predisposta per molteplici funzioni tra cui la compilazione di moduli di iscrizione,
prenotazione, acquisto, oppure per l'interrogazione e l'aggiornamento di Banche Dati.
Le form utilizzano programmi CGI che interagiscono con gli archivi delle B.D. offrendo
un'interfaccia comune e rendendo possibile l'utilizzo e la distribuzione al mondo esterno
delle proprie funzionalità.
Definizione:
<FORM ACTION="URL" METHOD=GET|POST></FORM>
Upload di file
<FORM ENCTYPE="multipart/form-data"></FORM>
Campo di immissione
<INPUT TYPE="TEXT/PASSWORD/CHECKBOX/RADIO/
IMAGE/HIDDEN/SUBMIT/RESET">
Nome campo
<INPUT NAME="$$$$">
Valore del campo
<INPUT VALUE="$$$$">
Lunghezza massima
<INPUT MAXLENGTH=?>
(in caratteri)
Selezionato di default
<INPUT CHECKED>
(checkbox e radio)
grandezza
<INPUT SIZE=?>
Selezione elenco delle opzioni
<SELECT></SELECT>
Nome campo
<SELECT NAME="$$$$"></SELECT>
Numero opzioni
<SELECT SIZE=?></SELECT>
Selezione multipla
<SELECT MULTIPLE>
(per selezionare più di 1 elemento)
Opzioni
<OPTION>
(elementi che possono essere selezionati)
Opzione di default
<OPTION SELECTED>
Finestra di immissione
<TEXTAREA ROWS=? COLS=?></TEXTAREA>
Nome del campo
<TEXTAREA NAME="$$$$"></TEXTAREA>
A capo automatico in diversi modi
<TEXTAREA WRAP=OFF/VIRTUAL/PHYSICAL></TEXTAREA>
HTML Avanzato
L'HTML avanzato permette l'utilizzo di strumenti multimediali quali l'ascolto di brani
musicali e la visione di video.
< BGSOUND="file.wav">
-inserisce un suono che verrà udito in background quando si visualizza il documento
formato wav, au, midi
<META HTTP-EQUIV=Expires CONTENT="Tue, 04 Dec 1993 21:29:02 GMT">
<META HTTP-EQUIV="Keywords" CONTENT=" "educazione, education, scuola,
school, ">
<META HTTP-EQUIV="Reply-to" CONTENT="dsr@w3.org (Dave Raggett)">
<META http-equiv="refresh" CONTENT="2; URL=http://www.idg.fi.cnr.it/CLD/">
<META name="description" content="Corso di HTML”>
<META NAME="Title" CONTENT="The Etymology of Dunsel">
HTML 4.0
· HTML 4.0 incoraggia l’uso dei fogli di stile piuttosto delle tabelle per l’impaginazione.
I FOGLI di STILE sono l’elemento innovativo in quanto permettono di modificare
aspetti di visualizzazione prima considerati esterni alla volontà del disegnatore Web,
controllano il layout delle pagine e lo stile che può essere cambiato istantaneamente
su numerose pagine;
· Rende più semplice la descrizione delle immagini per browser non visivi (Lynx);
· Fornire indicazioni nei campi di input;
· Fornire raggruppamenti gerarchici per i campi di input;
· Dare la possibilità di associare un lemento HTML ad una descrizione testuale più
dettagliate
HTML dinamico
DTML per Microsoft o Dynamic HTML per Netscape, è un oggetto interattivo perché
può creare effetti dinamici come si trovano oggi in un cd rom (ad esempio scritte che
cambiano quando il mouse si posiziona sopra. Html non è stato un oggetto interattivo di
per sé, per diventare tale aveva bisogno di plug in.
Attraverso DHTML si può lavorare su livelli diversi (LAYER), con effetti di profondità
precedentemente non creabili.
DHTML ha necessità di piccoli script cgi o applet java
