Generale Il documento HTML: Tag di base
- FormattazioneGrassetto, allineamento, colori dimensione del testo
Collegamenti (Link, Hyperlink, Ancore)
Collegamenti interni ed esterni dei documenti ipertestuali
Le Immagini: Inserimento, dimensione e risoluzione video
Creare immagini mappate , tipi di mappature e programmi di utilità
Spaziature e formattazion
Liste, elenchi puntati e numerati, liste composte
Attributi colore del documento, programmi per gestire colori RGB
Tabelle di conversione e di consultazione per caratteri latin e simboli di utilità generica
creare form complessi e di acquisizione dati utente
Uso delle tabelle per presentazione dati e per impaginazioni di alto livello grafico
Divisione e gestione della finestra del browser in porzioni
Gestione della destinazione dell' output proveniente da link o processi server come risposte di form
Comandi non classificabili nelle sezioni precedenti
G E N E R A L E
(impostazioni obbligatorie del documento ipertestuale)
|
|
||
|
Tipo di documento |
<HTML></HTML> |
(inizio e fine del file, tag obbligatorio) |
|
Testata |
<HEAD></HEAD> |
(descrizioni varie; come il titolo e i Meta Name) |
|
Titolo documento |
<TITLE></TITLE> |
(nome del documento; contenuto in Head) |
|
Contenuto |
<BODY></BODY> |
(corpo del file) |
F O R M A T T A Z I O N E D E L T E S T O
|
Titoli di paragrafo e capitoli |
<H?></H?> |
(sono possibili 6 diversi livelli di grandezza ed importanza h1,h2, etc.) |
|
|
Allineamento titolo |
<H? ALIGN=LEFT|CENTER|RIGHT></H?> |
|
|
|
Divisione di un blocco |
<DIV></DIV> |
usato per porzioni di testo o paragrafi |
|
|
Allineamento del blocco |
<DIV ALIGN=LEFT|RIGHT|JUSTIFY|CENTER></DIV> |
|
|
|
Formattazioni particolari |
|
|
|
|
Citazioni |
<BLOCKQUOTE></BLOCKQUOTE> |
rientrato |
|
|
Evidenziato |
<EM></EM> |
corsivo |
|
|
Molto marcato |
<STRONG></STRONG> |
neretto |
|
|
Citazione |
<CITE></CITE> |
corsivo |
|
|
Codice programm. |
<CODE></CODE> |
programmi |
|
|
Esempio |
<SAMP></SAMP> |
|
|
|
Immissione da tastiera |
<KBD></KBD> |
carattere a spaziatura fissa |
|
|
Variabile |
<VAR></VAR> |
|
|
|
Definizione |
<DFN></DFN> |
|
|
|
Indirizzo dell'autore |
<ADDRESS></ADDRESS> corsivo |
|
|
|
Font grande |
<BIG></BIG> |
|
|
|
Font piccolo |
<SMALL></SMALL> |
|
|
|
Grassetto |
<B></B> |
|
|
|
Corsivo |
<I></I> |
|
|
|
Sottolineato |
<U></U> |
(non più supportato) |
|
|
Depennato (Strikeout) |
<S></S> |
|
|
|
Pedice |
<SUB></SUB> |
|
|
|
Apice |
<SUP></SUP> |
|
|
|
Font non scalabile |
<TT></TT> |
(spaziatura fissa) |
|
|
Preformattato |
<PRE></PRE> |
(mantiene gli allineamenti originali) |
|
|
Larghezza |
<PRE WIDTH=?></PRE> |
(in caratteri) |
|
|
Centrato |
<CENTER></CENTER> |
(sia per testo che immagini) |
|
|
Intermittente |
<BLINK></BLINK> |
||
|
Specifica il tipo di Font |
<FONT FACE="Verdana,Arial,Helvetica,Geneva"> |
|
|
|
Grandezza del Font |
<FONT SIZE=?></FONT> |
(valori da 1 a 7) |
|
|
Cambia la grandezza del font |
<FONT SIZE=+|-?></FONT> |
|
|
|
Grandezza font di base |
<BASEFONT SIZE=?> |
(da 1 a 7; il valore di default e' 3) |
|
|
Colore del Font |
<FONT Color="#$$$$$$"></FONT> |
|
|
C O L L E G A M E N T I
N E L T E S T O E A D A L T R I F I L E
|
Collegamento di base |
<A HREF="URL"></A> |
|||
|
link ad un' ancora nel file |
<A HREF="URL#$$$$"></A> |
(in altro file) |
||
|
|
<A HREF="#$$$$"></A> |
(nello stesso file) |
||
|
ad un file indicando la destinazione |
<A HREF="URL" TARGET="$$$$"></A> |
(nello stesso file) |
||
|
Definizione di ancora nel file |
<A NAME="$$$$"></A> |
|
|
|
|
Inserimento di una immagine |
<IMG SRC="URL"> |
||
|
Allineamento |
<IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE> |
||
|
Allineamento |
<IMG SRC="URL" ALIGN=LEFT|RIGHT|TEXTTOP|ABSMIDDLE|BASELINE> |
||
|
testo alternativo |
<IMG SRC="URL" ALT="$$$$"> |
(quando non viene visualizzata l'immagine si vedra' il testo carattere) |
|
|
Mappa navigabile |
<IMG SRC="URL" ISMAP> |
(richiede un script) |
|
|
Mappa navigabile client-side o locale |
<IMG SRC="URL" USEMAP="URL#$$$$"> |
|
|
|
Dimensioni |
<IMG SRC="URL" WIDTH="?" HEIGHT="?"> |
(in pixel) |
|
|
Bordi |
<IMG SRC="URL" BORDER=?> |
(in pixel) |
|
|
Bassa risoluzione |
<IMG SRC="URL" LOWSRC="URL"> |
|
|
|
Spaziatura |
<IMG SRC="URL" HSPACE=? VSPACE=?> |
|
|
M A P P E
Occorre conoscere in molti casi la directory sul server per posizionare il file .map di definizione.
Usando però un tipo di dichiarazione Client-Side il file .map non è più necessario. La definizione di mappa può essere dichiarata all'interno del file documento HTML. Per la dichiarazione si usa il codice <MAP NAME="nome della mappa"> </MAP> come indicato sotto.
|
Specifica della mappa |
<MAP NAME="$$$$";></MAP> |
(descrive la mappa) |
|
|
Sezione mappa |
<AREA SHAPE="RECT|CIRCLE|POLYGON" COORDS=",,," HREF="URL"|NOHREF> |
|
|
|
|
|
|
|
S E G N I D I P A R A G R A F O E D A R G O M E N T O
|
Paragrafo |
<P></P> |
(lascia due righe bianche) |
|
|
Allineamento |
<P ALIGN=LEFT|CENTER|RIGHT></P> |
|
|
|
Interruzione riga |
<BR> |
(ritorno a capo) |
|
|
Riga orizzontale |
<HR> |
|
|
|
<FONT="-1"Parametri: |
|
|
|
|
Allineamento |
<HR ALIGN=LEFT|CENTER|RIGHT> |
|
|
|
Spessore |
<HR SIZE=?> |
(in pixel) |
|
|
Larghezza |
<HR WIDTH=?> |
(in pixel) |
|
|
in % |
<HR WIDTH=%> |
(come percentuale della larghezza della pagina) |
|
|
No effetto 3D |
<HR NOSHADE> |
|
|
L I S T E
Elenchi semplici, composti, numerati o puntati
|
Liste libere |
<UL><LI></UL> |
(<LI> prima di ogni elemento) |
|
|
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> |
(<LI> prima di ogni elemento) |
|
|
Tipo di numero |
<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) |
|
|
Numero di partenza |
<OL VALUE=?> |
(per tutta la lista) |
|
|
<LI VALUE=?> |
(questo e successivi) |
|
|
|
Lista di definizioni |
<DL><DT><DD></DL> |
Molto usata nella definizione dei menu |
|
|
|
|
|
|
S F O N D I E D E F I N I Z I O N E D I C O L O R E
|
Colore di sfondo |
<BODY BGCOLOR="#$$$$$$"> |
(in ordine di RGB) |
|
|
colore dei collegamenti |
<BODY LINK="#$$$$$$"> |
|
|
|
colore dei collegamenti visitati |
<BODY VLINK="#$$$$$$"> |
|
|
|
colore del testo |
<BODY TEXT="#$$$$$$"> |
|
|
|
colore del collegamento in corso |
<BODY ALINK="#$$$$$$"> |
|
|
|
immagine di sfondo |
<BODY BACKGROUND="URL"> |
|
|
Clicca per avere l'immagine dell' ELENCO DEI COLORI
C A R A T T E R I S P E C I A L I
Il seguente elenco non è completo ma comprende i caratteri maggiormente usati nei documenti HTML per usi particolari. Per maggiori informazioni consiglio di consultare le pagine del CERN.
|
carattere speciale &#?; (? indica il codice ISO) |
|
|
|
|
|||
|
< |
< |
Ograve Ò |
Ò |
|
|||
|
> |
> |
Ocirc Ô |
Ô |
|
|||
|
& |
& |
Otilde Õ |
Õ |
|
|||
|
" |
" |
Ouml Ö |
Ö |
|
|||
|
Aacute Á |
Á |
Oslash Ø |
Ø |
|
|||
|
Agrave À |
À |
|
|
|
|||
|
Acirc  |
 |
Uacute Ú |
Ú |
|
|||
|
Atilde à |
à |
Ugrave Ù |
Ù |
|
|||
|
Aring Å |
Å |
Ucirc Û |
Û |
|
|||
|
Auml Ä |
Ä |
Uuml Ü |
Ü |
|
|||
|
AElig Æ |
Æ |
Yacute Ý |
Ý |
|
|||
|
Ccedil Ç |
Ç |
THORN Þ |
Þ |
|
|||
|
Eacute É |
É |
aelig æ |
æ |
|
|||
|
Egrave È |
È |
eacute é |
é |
|
|||
|
Ecirc Ê |
Ê |
egrave è |
è |
|
|||
|
Euml Ë |
Ë |
ecirc ê |
ê |
|
|||
|
Iacute Í |
Í |
euml ë |
ë |
|
|||
|
Igrave Ì |
Ì |
reg ® |
® Registered TradeMark |
|
|||
|
Icirc Î |
Î |
copy © |
© Copyright |
|
|||
|
Iuml Ï |
Ï |
trade ™ |
™ TradeMark |
|
|||
|
ETH Ð |
Ð |
nbsp |
Non breaking space |
|
|||
|
Ntilde Ñ |
Ñ |
|
|
||||
|
Oacute Ó |
Ó |
|
|
|
|||
M O D U L I
Per ottenere risposte ottimali occorre uno script di tipo cgi sul server oppure si puo' usare il mailto: abbinato al POST
Script di tipo mail si possono trovare facilmente e gratuitamente in vari server Internet, con allegata documentazione per l'uso.
|
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> |
|
|
Definizione tabella |
<TABLE></TABLE> |
||
|
Bordo |
<TABLE BORDER></TABLE> |
(per visualizzare il bordo) |
|
|
Si puo' impostare lo spessore del bordo |
<TABLE BORDER=?></TABLE> |
(per indicare lo spessore) |
|
|
Spazio tra le celle |
<TABLE CELLSPACING=?> |
|
|
|
Spazio tra testo e bordo |
<TABLE CELLPADDING=?> |
|
|
|
Larghezza tabella |
<TABLE WIDTH=?> |
(in pixel) |
|
|
Larghezza tabella in % |
<TABLE WIDTH=%> |
(percentuale della pagina) |
|
|
Riga |
<TR></TR> |
|
|
|
Allineamento |
<TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> |
|
|
|
Campo dati |
<TD></TD> |
(definita dentro una definizone di riga) |
|
|
Allineamento |
<TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> |
|
|
|
No interruzione |
<TD NOWRAP> |
|
|
|
Colonne da occupare |
<TD COLSPAN=?> |
|
|
|
Righe da occupare |
<TD ROWSPAN=?> |
|
|
|
Larghezza desiderata |
<TD WIDTH=?> |
(in pixel) |
|
|
Larghezza desiderata in % |
<TD WIDTH=%> |
(percentuale della tabella) |
|
|
Titolo della colonna |
<TH></TH> |
(come <TD>, ma in neretto e centrata) |
|
|
Legenda della tabella |
<CAPTION></CAPTION> |
|
|
|
Allineamento |
<CAPTION ALIGN=TOP|BOTTOM> |
(sopra o sotto la tabella) |
|
F R A M E
Divisione e gestione di parti della finestra del browser
ATTENZIONE: la compatibilità dei Frame è limitata al Netscape 2.0 e succ. e all'explorer Microsoft ultima ver.
|
Documento FRAME |
<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) |
|
|
Gestione dei bordi |
<FRAME BORDER=Yes | No Bordercolor="RGB"> |
|
Presente sia in FRAMES che in FRAMESET |
|
Bordo in Frameset |
<FRAMESET Bordercolor="canale RGB"> |
|
|
|
Gestione dei Margini |
<FRAME MARGIN="xx,yy"> |
|
|
|
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) |
|
T A R G E T (DESTINAZIONE DEI LINK)
|
target in una definiz. di ancora |
< A HREF="url" TARGET="nome_finestra">Ancora di destinazione </A> |
Visualizza il link nella finestra indicata nel target |
|
|
target di base |
< BASE TARGET="nome_finestra"> |
Imposta di default la finestra indicata nel target |
|
|
target in una mappa |
< AREA SHAPE="shape" COORDS="x,y,..."> TARGET="finestra_destinazione"> |
Visualizza il link risulatto dalla mappa nella finestra indicata dal target |
|
|
target in un form |
< FORM ACTION="url" TARGET="nome_finestra"> |
Visualizza il risultato del form nella finestra indicata nel target |
|
|
Target Speciali |
TARGET="_blank" |
Visualizza il link in nuova finestra vuota |
|
|
Target Speciali |
TARGET="_self" |
link nella stessa finestra |
|
|
Target Speciali |
TARGET="_parent" |
link nella finestra parente. Se non esiste diventa come _self |
|
|
Target Speciali |
TARGET="_top" |
link nella stessa finestra ma a tutto schermo |
|
