Corso brevissimo di HTML.

Corso brevissimo di HTML.

Elementi di base (titolo della pagina, ecc.)
Proprietà della pagina: sfondi e colori (del testo, dei link, ecc.)
Formattazione del testo
Collegamenti (link) interni, ad Altre pagine, ad Altri siti
Immagini
Formato di struttura (dipende dal browser)
Divisori
Elenchi puntati, numerati, ecc.
Tabelle
Tabelle a struttura complessa (poco usate)
Moduli (form)
Javascript e Applet Java
Frame (pagine con più sezioni)
Vari (keywords per essere classificati nei motori di ricerca, ecc.)
Caratteri speciali: come scriverli correttamente in html
I colori nell'html: il codice esadecimale
Legenda
Note finali

ELEMENTI DI BASE
(tutti i documenti HTML devono contenere questi tag)
Tipo documento <HTML></HTML> (segnano l'inizio e la fine del file)
Titolo <TITLE></TITLE> (titolo della pagina, da inserire all’interno della testata)
Testata <HEAD></HEAD> (informazioni descrittive; come il titolo)
Corpo <BODY></BODY> (contenuto della pagina)

PROPRIETA' DELLA PAGINA: SFONDI E COLORI
Immagine di sfondo <BODY BACKGROUND="URL">
Colore di sfondo <BODY BGCOLOR="#******">
Colore del testo <BODY TEXT="#******">
Colore dei collegamenti <BODY LINK="#******">
Colore dei collegamenti visitati <BODY VLINK="#******">
Colore del collegamento selezionato <BODY ALINK="#******">
* Per i colori clicca qui

FORMATTAZIONE DEL TESTO
Neretto <B></B>
Corsivo <I></I>
Sottolineato <U></U> (A partire dalle versioni 4.*)
Apice <SUP></SUP>
Pendice <SUB></SUB>
Lampeggiante <BLINK></BLINK> (Supportato solo da Netscape)
Testo scorrevole <MARQUEE></MARQUEE> (Supportato solo da Internet Explorer)
Macchina da scrivere <TT></TT> (Visualizzato a spaziatura fissa)
Preformattato <PRE></PRE> (Visualizzato tale e quale, compresi gli spazi)
Centrato <Center></Center> (sia per testo che immagini)
Font: dimensioni <FONT SIZE=?></FONT> (valori da 1 a 7)
Font: modifica misura <FONT SIZE="+|-?"></FONT> (valori da –3 a +3)
Font: colore <FONT COLOR="#******"></FONT>
Font: tipo <FONT FACE="Verdana"></FONT> (A partire dalle versioni 4.*)

COLLEGAMENTI (link)
Link a un documento <A HREF="URL"></A>
Definizione di un’àncora <A NAME="nomeàncora"></A>
Link a un’àncora dello stessa pagina <A HREF="#nomeàncora"></A>
Link a un’àncora di un’Altra pagina <A HREF="URL#nomeàncora"></A>
Link da visualizzare in Altro frame <A HREF="URL" TARGET="_nomedelframe"></A>
Link a indirizzo e-mail <A HREF="mailto:indirizzo@posta.it"></A>

IMMAGINI
Visualizzazione immagine <IMG SRC="URL">
Immagine: allineamento <IMG SRC="URL" Align=Top|Bottom|Middle|Left|Right>
Immagine: testo in Alternativa <IMG SRC="URL" Alt="***">
Immagine: dimensioni (in pixel) <IMG SRC="URL" Width=? Height=?>
Immagine: dimensioni (in % d. largh. e Alt. d. pagina) <IMG SRC="URL" Width=?% Height=?%>
Immagine:bordo (in pixel) <IMG SRC="URL" Border=?>
Definizione della mappa <MAP NAME="***"></MAP>
Sezioni della mappa <AREA SHAPE="DEFAULT|Rect|Circle|Poly" COORDS=",,," HREF="URL"|NOHREF>

FORMATO DI STRUTTURA
(le caratteristiche di visualizzazione dipendono dai browser)
Titoli <H?></H?> (sono definiti 6 livelli)
Titoli: allineamento <H? Align=Left | Center | Right></H?> (sinistra | centrato | destra)
Separazione <DIV></DIV>
Separazione: allineamento <DIV Align=Left | Right | Center | JUSTIFY></DIV>  (sinistra | centrato | destra | giustif.)
Contenuto <SPAN></SPAN> (A partire dalle versioni 4.*)
Citazione <BLOCKQUOTE></BLOCKQUOTE> (in genere visualizz. come blocco di testo rientr.)
Citazione breve <Q></Q>
Evidenziato <EM></EM> (in genere visualizzato in corsivo)
Molto evidenziato <STRONG></STRONG> (in genere visualizzato in neretto)
Font molto grande <BIG></BIG>
Font molto piccolo <SMALL></SMALL>

DIVISORI
Paragrafo (spesso il comando di chiusura viene omesso) <P></P>
Paragrafo: allineamento <P Align=Left|Center|Right></P>
Paragrafo: giustificazione (Supportato solo da Netscape) <P Align=JUSTIFY></P>
Interruzione riga (Singolo ritorno a capo) <BR>
Riga orizzontale <HR>
Riga orizzontale: allineamento <HR Align=Left|Right|Center>
Riga orizzontale: spessore (in pixel) <HR SIZE=?>
Riga orizzontale: larghezza (in pixel) <HR Width=?>
Riga orizzontale: larghezza % risp. alla largh. della pagina <HR Width="?%">
Riga orizzontale: piena (senza l'effetto ombra) <HR NOSHADE>

ELENCHI PUNTATI, NUMERATI, ECC.
Elenco puntato <UL><LI></UL> (<LI> prima di ogni elemento)
Elenco puntato compatto <UL COMPACT></UL>
Tipo di puntatore <UL TYPE=Disc|Circle|Square> (per tutta la lista)
Tipo di puntatore <LI TYPE=Disc|Circle|Square> (questo e successivi)
Elenco numerato <OL><LI></OL> (<LI> prima di ogni elemento)
Elenco numerato compatto <OL COMPACT></OL>
Tipo di numero <OL TYPE=A|a|I|i|1> (per tutta la lista)
Tipo di numero <LI TYPE=A|a|I|i|1> (questo e successivi)
Numero di partenza <OL START=?> (per tutta la lista)
Numero di partenza <LI VALUE=?> (questo e successivi)
Elenco di definizioni <DL><DT><DD></DL> (<DT>=termine, <DD>=definizione)
Elenco di definizioni compatto <DL COMPACT></DL>
Elenco tipo Menu <MENU><LI></MENU> (<LI> prima di ogni elemento)
Elenco tipo Menu compatto <MENU COMPACT></MENU>
Elenco tipo indirizzario <DIR><LI></DIR> (<LI> prima di ogni elemento)
Elenco tipo indirizzario compatto <DIR COMPACT></DIR>

TABELLE
(alcuni effetti sono supportati solo dalle versioni 4.* o superiori)
Inizio e fine tabella <TABLE></TABLE>
Tabella: allineamento <TABLE Align=Left|Right|Center> (A partire dalle versioni 4.*)
Tabella: spessore bordo <TABLE Border=?></TABLE> (numero pixel; con '0' non è visibile)
Spazio tra le celle <TABLE CELLSPACING=?>
Spazio nelle celle <TABLE CELLPADDING=?>
Larghezza tabella (in pixel) <TABLE Width=?>
Larghezza % tabella <TABLE Width="?%"> (in perc. risp. alla pagina o alla
tabella più esterna)
Tabella: colore di sfondo <TABLE BGCOLOR="#******"></TABLE>
Riga <TR></TR>
Allineamento della riga <TR Align=Left|Right|Center VAlign=Top|Middle|Bottom>
Cella <TD></TD> (deve essere all'interno di una riga)
Allineamento della cella <TD Align=Left|Right|Center VAlign=Top|Middle|Bottom>
Senza interruzione <TD NOWRAP>
Unione colonne <TD COLSPAN=?>
Unione righe <TD ROWSPAN=?>
Larghezza celle (in pixel) <TD Width=?>
Larghezza % celle <TD Width="?%"> (in percentuale risp. alla tabella)
Colore di sfondo della cella <TD BGCOLOR="#******">

TABELLE A STRUTTURA COMPLESSA
(poco usate)
Titolo <TH></TH> (uguale alle celle di dati, ma in neretto e centrate)
Titolo: allineamento <TH Align=Left|Right|Center VAlign=Top|Middle|Bottom>
Corpo tabella <TBODY>
Pie' di pagina <TFOOT></TFOOT> (deve essere indicato prima di THEAD)
Titolo <THEAD></THEAD>
Legenda <CAPTION></CAPTION>
Legenda: allineamento <CAPTION Align=Top|Bottom> (sopra o sotto alla tabella)
Colonna <COL></COL> (attributi per gruppi di colonne)
Unione colonne <COL SPAN=?></COL>
Larghezza colonna <COL Width=?></COL>
Larghezza % colonna <COL Width="?%"></COL>

MODULI (FORM)
(generalmente richiedono uno script sul server;
alcuni effetti sono supportati solo dalle versioni 4.* o superiori)
Definizione <FORM ACTION="URL" METHOD=GET | POST></FORM>
Campo di immissione: tipo <INPUT TYPE="TEXT | PASSWORD | CHECKBOX | RADIO | FILE | BUTTON | IMAGE | HIDDEN | SUBMIT | RESET">
(tipo di campo: testo | password | casella | pallino | file | bottone | immagine | non visualizzato | invio dati | cancella dati)
Nome del campo <INPUT NAME="***">
Campo: valore visualizzato di default <INPUT VALUE="***">
Campo selezionato di default <INPUT CHECKED> (checkbox e radio)
Campo: misura <INPUT SIZE=?> (in caratteri)
Campo: lunghezza massima <INPUT MAXLENGTH=?> (in caratteri)
Bottone <BUTTON></BUTTON>
Bottone: nome <BUTTON NAME="***"></BUTTON>
Bottone: tipo <BUTTON TYPE="SUBMIT | RESET | BUTTON"></BUTTON>
(Invio dati | cancella dati | etichetta)
Bottone: valore visualizzato di default <BUTTON VALUE="***"></BUTTON>
Elenco a scelta singola <SELECT></SELECT>
Elenco a scelta multipla <SELECT MULTIPLE></SELECT> (per selezionare piu' di un elemento)
Nome dell’elenco <SELECT NAME="***"></SELECT>
Numero di opzioni <SELECT SIZE=?></SELECT>
Opzioni <OPTION> (elementi che possono essere selezionati)
Opzione selezionata di default <OPTION SELECTED>
Opzione: valore visualizzato di default <OPTION VALUE="testoetichetta">
Area immissione testo <TEXTAREA ROWS=? COLS=?></TEXTAREA>
Nome dell’area <TEXTAREA NAME="***"></TEXTAREA>
Upload file <FORM ENCTYPE="multipart/form-data"></FORM>

JAVASCRIPT E APPLET JAVA
Script: inizio e fine <SCRIPT></SCRIPT>
Ubicazione <SCRIPT SRC="nomedelfile.js"></SCRIPT>
Linguaggio <SCRIPT LANGUAGE="javascript"></SCRIPT> (nel caso si tratti di javascript)
Applet: inizio e fine <APPLET></APPLET>
Nome del file <APPLET CODE="nomedelfile.jar">
Parametri <APPLET PARAM NAME="***">
Ubicazione <APPLET CODEBASE="URL">
Denominazione <APPLET NAME="***"> (per riferimenti)
Testo in Alternativa <APPLET Alt="***"> (per i browser che non supportano Java)
Allineamento <APPLET Align="Left | Right | Center">
Dimensioni (in pixel) <APPLET Width=? Height=?>
Spaziatura (in pixel) <APPLET HSPACE=? VSPACE=?>

FRAME
(definizione e gestione di specifiche sezioni della finestra)
Documento Frame <FRAMESET></FRAMESET> (al posto di <BODY>)
Impostazione frame div. Orizz. <FRAMESET ROWS=?,*></FRAMESET> (Altezza in pixel o %)
Larghezza dei frame div. Vert. <FRAMESET COLS=*,?></FRAMESET> (larghezza in pixel o %)
Bordo fra i frame <FRAMESET FRAMEBorder="yes | no"></FRAMESET> (Sì | No)
Larghezza dei bordi fra i frame <FRAMESET Border=?>
Colore del bordo fra i frame <FRAMESET BorderCOLOR="#******">
Spaziatura fra i frame <FRAMESET FRAMESPACING=?></FRAMESET>
Definizione del Frame <FRAME> (contenuto di una sezione)
Documento da visualizzare <FRAME SRC="URL">
Denominazione <FRAME NAME="***"|_blank|_self|_parent|_Top>
Larghezza dei margini <FRAME MARGINWidth=?> (margine destro e sinistro)
Altezza dei margini <FRAME MARGINHeight=?> (margine Alto e basso)
Barra di scorrimento <FRAME SCROLLING="YES|NO|AUTO"> (sì | no | automatico)
Dimensione non modificabile <FRAME NORESIZE>
Presenza del bordo <FRAME FRAMEBorder="yes|no">
Colore del bordo <FRAME BorderCOLOR="#******">
Contenuto in assenza di frame <NOFRAMES></NOFRAMES> (visualizzato dai browser che non supportano i frame)
Frame interno <IFRAME></IFRAME> (con gli stessi attributi di FRAME)
Frame interno: dimensioni <IFRAME Width=? Height=?></IFRAME>
Frame interno: dimensioni % <IFRAME Width="?%" Height="?%"></IFRAME>

VARI
Commenti (non visualizzati dal browser) <!-- testo del commento -->
Dichiarazione tipo di file (primissima riga) <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
Tipo documento <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Editor html utilizzato <meta name="Generator" content="Mozilla/4.5 [it] (Win98; I) [Netscape]">
Caricamento automatico dopo ? secondi <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">
Per facilitare l’opera di indicizzazione dei motori di ricerca utilizzare i seguenti tag (da inserire nella testata)
Autore del documento html <meta name="Author" content="nomedellautore">
Descrizione dei contenuti <meta name="Description" content="testodelladescrizione">
Parole-chiave per ricerche <meta name="Keywords" content="parole, chiave, da, inserire">

CARATTERI SPECIALI
(devono essere digitati in caratteri minuscoli)
< (minore di) &lt;
> (maggiore di) &gt;
& (e commerciale) &amp;
" (virgoletta) &quot;
© (CopyRight) &copy;
® (Marchio registrato) &reg;
   (Spazio) &nbsp;
ç (cediglia) &ccedil;
ñ (n con tilde) &ntilde;
€ (euro) &euro;
£ (lira) &pound;
¥ (yen) &yen;
§ (sezione) &sect;
à &agrave;
é &eacute;
è &egrave;
ì &igrave;
ò &ograve;
ù &ugrave;
À &Agrave;
È &Eacute;
È &Egrave;
Ì &Igrave;
Ò &Ograve;
Ù &Ugrave;