Riferimenti rapidi

programmazione HTML
Sommario

Generale
Il documento HTML: Tag di base
Formattazione
Grassetto, allineamento, colori dimensione del testo
Collegamenti (Link, Hyperlink, Ancore)
Collegamenti interni ed esterni dei documenti ipertestuali
Immagini
Le Immagini: Inserimento, dimensione e risoluzione video
Mappe: definizione
Creare immagini mappate , tipi di mappature e programmi di utilità
Segni di paragrafo e argomento
Spaziature e formattazion
Liste
Liste, elenchi puntati e numerati, liste composte
Sfondi e colori
Attributi colore del documento, programmi per gestire colori RGB
Caratteri speciali
Tabelle di conversione e di consultazione per caratteri latin e simboli di utilità generica
Moduli , Schede o form
creare form complessi e di acquisizione dati utente
Tabelle
Uso delle tabelle per presentazione dati e per impaginazioni di alto livello grafico
Frames
Divisione e gestione della finestra del browser in porzioni
Target (destinazione dei link)
Gestione della destinazione dell' output proveniente da link o processi server come risposte di form
Varie
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>

 

 

I M M A G I N I

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)   

 

 

 

 

<

&lt;

Ograve Ò

&Ograve

 

>

&gt;

Ocirc Ô

&Ocirc

 

&

&amp;

Otilde Õ

&Otilde

 

"

&quot;

Ouml Ö

&Ouml

 

Aacute Á

&Aacute;

Oslash Ø

&Oslash

 

Agrave À

&Agrave

 

 

 

Acirc Â

&Acirc

Uacute Ú

&Uacute

 

Atilde Ã

&Atilde

Ugrave Ù

&Ugrave

 

Aring Å

&Aring

Ucirc Û

&Ucirc

 

Auml Ä

&Auml

Uuml Ü

&Uuml

 

AElig Æ

&AElig

Yacute Ý

&Yacute

 

Ccedil Ç

&Ccedil

THORN Þ

&THORN

 

Eacute É

&Eacute

aelig æ

&aelig

 

Egrave È

&Egrave

eacute é

&eacute

 

Ecirc Ê

&Ecirc

egrave è

&egrave

 

Euml Ë

&Euml

ecirc ê

&ecirc

 

Iacute Í

&Iacute

euml ë

&euml

 

Igrave Ì

&Igrave

reg ®

&reg; Registered TradeMark

 

Icirc Î

&Icirc

copy ©

&copy; Copyright

 

Iuml Ï

&Iuml

trade &trade;

&trade; TradeMark

 

ETH Ð

&ETH

nbsp  

&nbsp; Non breaking space

 

Ntilde Ñ

&Ntilde

 

 

 

Oacute Ó

&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>

T A B E L L E

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

V A R I E

Mulicolonne

<MULTICOL COLS="$$" GUTTER="$$" WIDTH="$$">

 

Imposta più colonne definendo il numero di colonne, la spaziatura e la larghetta fissa o in percentuale

Relazioni

<LINK REV="$$$$" REL="$$$$" HREF="URL">

(nella testata)

Meta Informazioni

<META>

(deve essere nella testata)

Commenti

<!-- $$$$ -->

(non visualizzati dal browser)

Prologo

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

 

Prologo

<!DOCTYPE HTML PUBLIC "-//W3O//DTD W3 HTML 3.0//EN">

 

Prologo

<!DOCTYPE HTML PUBLIC "-//microsoft corp.//DTD HTML //EN">

 

Ricerca

<ISINDEX>

(indica che è un documento collegato ad un database indicizzato in cui è possibile fare ricerche)

Domanda

<ISINDEX PROMPT="$$$$">

(testo da anteporre alla casella di inserimento)

Invio ricerca

<A HREF="URL?$$$$"></a>

(usare il punto di domanda)

URL base di questo file

<BASE HREF="URL">

(deve essere nella testata)